/**
 * Kind Recards — Site header
 * ----------------------------------------------------------------------------
 * Two rows: [logo · search · action icons] then the primary WP menu bar.
 * Built from tokens + the .kr-search component.
 *
 * At phone widths (≤ 760px) the menu bar becomes `.kr-mobile-menu`, a
 * full-screen sheet opened by the hamburger (LV1) — see the bottom of the file.
 */

.kr-header {
    background: var(--kr-bg);
    border-bottom: 1px solid var(--kr-border);
}

/* ---- Top row ----------------------------------------------------------- */
.kr-header__bar {
    display: flex;
    align-items: center;
    justify-content: space-between; /* even logo · search · icons gaps */
    gap: var(--kr-space-5);
    padding-block: var(--kr-space-5);
}

/* Logo */
.kr-header__logo {
    flex: none;
    display: inline-flex;
    align-items: center;
}

.kr-header__logo img {
    width: auto;
    height: clamp(84px, 7.5vw, 124px);
    object-fit: contain;
}

.kr-header__logo-text {
    font-family: var(--kr-font-heading);
    font-size: var(--kr-text-xl);
    color: var(--kr-primary);
}

/* Search — extend the .kr-search component for the header */
.kr-header__search {
    /* Don't grow — leaving slack lets space-between balance the gaps. */
    flex: 0 1 500px;
    width: 100%;
    max-width: 500px;
    /* M18: a thin, fully-opaque navy hairline. It used to be a 2px navy at 45%
       alpha, which read as a thick, washed-out blue band against the cream. */
    border: 1px solid var(--kr-primary);
    padding: 0.3rem 0.4rem 0.3rem 1.6rem;
    /* Only the shadow animates: transitioning outline-color would fade the focus
       ring up from currentColor (navy) and read as the wrong colour mid-way. */
    transition: box-shadow var(--kr-transition-fast);
}

/* Focus the pill, not the inner field (the input's own ring is suppressed
   below). The border is already full navy, so focus is carried by a pink ring
   outside it — outline follows the pill's radius and costs no layout. */
.kr-header__search:focus-within {
    outline: 3px solid var(--kr-focus-ring);
    outline-offset: 2px;
    box-shadow: var(--kr-focus-shadow);
}

.kr-header__search input {
    font-size: var(--kr-text-md);
    padding-block: 0.45rem;
}

/* Suppress the field's own focus ring so it doesn't draw inside the pill. */
.kr-header__search input:focus,
.kr-header__search input:focus-visible {
    outline: none;
    box-shadow: none;
}

.kr-header__search input::placeholder {
    font-style: italic;
    color: color-mix(in srgb, var(--kr-primary) 55%, transparent);
}

/* Magnifier submit: plain navy glyph (no filled circle) */
.kr-header__search button {
    flex: none;
    width: 2.6rem;
    height: 2.6rem;
    background: transparent;
    color: var(--kr-primary);
    border-radius: var(--kr-radius-circle);
    transition: color var(--kr-transition-fast);
}

.kr-header__search button:hover {
    color: var(--kr-accent);
}

.kr-search__icon {
    display: block;
}

/* Action icons (ACF repeater) */
.kr-header__actions {
    flex: none;
    display: flex;
    align-items: flex-start;
    gap: clamp(1.75rem, 4vw, 4.5rem);
}

.kr-header-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--kr-space-1);
    min-width: 3.25rem;
    color: var(--kr-primary);
    text-align: center;
    text-decoration: none;
    transition: color var(--kr-transition-fast);
}

.kr-header-action__icon {
    width: clamp(34px, 3vw, 46px);
    height: clamp(34px, 3vw, 46px);
    object-fit: contain;
}

/* Cart icon + count badge: the wrapper anchors the badge to the icon's corner. */
.kr-header-action__icon-wrap {
    position: relative;
    display: inline-flex;
}

.kr-header-action__icon-wrap .kr-badge--count {
    position: absolute;
    top: -0.45em;
    left: 100%;
    transform: translateX(-55%);
    /* a cream ring lifts it cleanly off the icon */
    border: 2px solid var(--kr-bg);
    box-shadow: var(--kr-shadow-sm);
    pointer-events: none;
}

/* Empty cart: keep the node in the DOM (so the WC fragment has a target) but
   hide it — overrides the .kr-badge inline-flex that defeats [hidden]. */
.kr-header-action__icon-wrap .kr-badge--count[hidden] {
    display: none;
}

.kr-header-action__label {
    font-family: var(--kr-font-body);
    font-weight: var(--kr-weight-regular);
    font-size: var(--kr-text-sm);
    color: var(--kr-primary);
}

.kr-header-action:hover,
.kr-header-action:hover .kr-header-action__label {
    color: var(--kr-accent);
}

/* ---- Menu row ---------------------------------------------------------- */
.kr-header__menu {
    padding-block: var(--kr-space-2) var(--kr-space-4);
}

.kr-header__nav {
    position: relative;
}

.kr-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--kr-space-4) clamp(1rem, 3vw, 3rem);
}

.kr-menu li {
    margin: 0;
}

.kr-menu a {
    position: relative;
    display: inline-block;
    font-family: var(--kr-font-body);
    font-weight: var(--kr-weight-regular);
    font-size: clamp(1.125rem, 1rem + 0.4vw, 1.25rem); /* ~20px on desktop */
    color: var(--kr-primary);
    text-decoration: none;
    padding-bottom: 6px;
    transition: color var(--kr-transition-fast);
}

/* Pink underline, a touch wider than the text and centred under it. */
.kr-menu a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: calc(100% + 0.5em);
    height: 2px;
    border-radius: var(--kr-radius-pill);
    background: var(--kr-color-pink-light);
    opacity: 0;
    transition: opacity var(--kr-transition-fast);
}

/* Hover + active share the same pink underline. Hover is gated to real pointing
   devices: on touch, a tap leaves a sticky :hover behind, so the underline
   flashed on and then vanished the moment the next tap landed elsewhere (M10).
   With hover out of the way, the open/current rules own that state on a phone. */
@media (hover: hover) {
    .kr-menu a:hover::after {
        opacity: 1;
    }
}

.kr-menu a:focus-visible::after,
.kr-menu .current-menu-item > a::after,
.kr-menu .current_page_item > a::after,
.kr-menu .current-menu-ancestor > a::after,
.kr-menu .current-menu-parent > a::after {
    opacity: 1;
}

/* Sub-menus (dropdowns) */
.kr-menu .sub-menu {
    list-style: none;
    margin: 0;
    padding: var(--kr-space-2) 0;
    position: absolute;
    z-index: var(--kr-z-dropdown);
    min-width: 12rem;
    background: var(--kr-surface);
    border-radius: var(--kr-radius-md);
    box-shadow: var(--kr-shadow-md);
    display: none;
}

.kr-menu li:hover > .sub-menu,
.kr-menu li:focus-within > .sub-menu {
    display: block;
}

.kr-menu .sub-menu a {
    display: block;
    padding: var(--kr-space-2) var(--kr-space-4);
    font-size: var(--kr-text-base);
}

.kr-menu .sub-menu a::after {
    content: none; /* no wide underline inside dropdowns */
}

/* ---- Mega menu --------------------------------------------------------- */
/* A wide panel under a top-level item, built from the ACF "Mega menu" fields
   (inc/acf-mega-menu.php) and injected by Kind_Recards_Mega_Walker. The item is
   made position:static so the absolutely-positioned panel resolves against
   .kr-header__nav (position:relative) and spans the full menu width. */
.kr-has-mega {
    position: static;
}

/* A mega item never shows the plain CSS dropdown as well. */
.kr-has-mega > .sub-menu {
    display: none !important;
}

.kr-mega-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: var(--kr-z-dropdown);
    margin-top: var(--kr-space-4);
    /* Roomy, with even room top and bottom. */
    padding: var(--kr-space-6) var(--kr-space-7);
    background: var(--kr-bg);
    border: 2px solid var(--kr-primary);
    border-radius: var(--kr-radius-xl);
    box-shadow: var(--kr-shadow-lg);
    display: none;
}

/* Invisible "safety" bridge across the margin-top gap: the panel is a descendant
   of .kr-has-mega, so filling the gap between the item and the panel keeps the
   hover region continuous — moving the cursor down (or diagonally) from the
   top-level item into the panel never crosses a dead zone that would close it. */
.kr-mega-panel::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: var(--kr-space-4); /* == .kr-mega-panel margin-top, fills exactly the gap */
}

/* Reveal on keyboard focus, the JS hover-intent state, or the JS .is-open
   (tap) toggle. `is-focus-closed` lets Escape dismiss a focus-open desktop
   panel until focus leaves that menu item. */
.kr-has-mega:focus-within:not(.is-focus-closed) > .kr-mega-panel,
.kr-has-mega.is-hover-open > .kr-mega-panel,
.kr-has-mega.is-open > .kr-mega-panel {
    display: block;
}

/* No-JS fallback: a desktop hover-capable pointer can still reveal a mega panel with
   :hover. When header.js confirms pointer-event support it adds .kr-js-hover
   to <html>, leaving the 120ms / 350ms hover-intent timers as the sole owner
   of desktop pointer visibility. */
@media (min-width: 761px) and (hover: hover) {
    html:not(.kr-js-hover) .kr-has-mega:hover > .kr-mega-panel {
        display: block;
    }
}

/* M10: while a section's panel is open, its top-level item keeps the underline.
   .is-open is only set by the tap handler in js/header.js, so in practice this
   is the mobile accordion — but stating it here keeps the two in step if the
   class is ever used on a wider screen. */
.kr-menu .kr-has-mega.is-open > a::after,
.kr-menu .kr-has-mega.is-hover-open > a::after {
    opacity: 1;
}

.kr-mega-panel__inner {
    display: grid;
    grid-template-columns: repeat(var(--kr-mega-cols, 4), minmax(0, 1fr));
    gap: var(--kr-space-5) clamp(1.5rem, 3vw, 3rem);
}

.kr-mega-panel__title {
    margin: 0 0 var(--kr-space-5);
    /* Brand display font (Funky Smile), navy — matches the reference headings. */
    font-family: var(--kr-font-heading);
    font-weight: var(--kr-weight-regular);
    font-size: var(--kr-text-xl);
    line-height: 1.1;
    color: var(--kr-primary);
}

.kr-mega-panel__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--kr-space-1);
}

.kr-mega-panel__item {
    margin: 0;
}

/* Scoped under .kr-menu so these win over the bar's `.kr-menu a` rules. */
.kr-menu .kr-mega-panel__link {
    display: inline-block;
    padding-bottom: 3px;
    font-family: var(--kr-font-body);
    font-weight: var(--kr-weight-regular);
    font-size: var(--kr-text-md);
    color: var(--kr-primary);
    text-decoration: none;
}

/* No wide bar-underline inside the panel. */
.kr-menu .kr-mega-panel__link::after {
    content: none;
}

/* Hover, keyboard focus, and the current (active) item all get the same soft-pink
   underline as the top-level menu bar (--kr-color-pink-light); navy text is kept
   (pink text fails WCAG on a light fill). The active state marks where you are:
   the child you clicked, under its parent. */
.kr-menu .kr-mega-panel__link:hover,
.kr-menu .kr-mega-panel__link:focus-visible,
.kr-menu .kr-mega-panel__link.is-active,
.kr-menu .kr-mega-panel__link[aria-current] {
    color: var(--kr-primary);
    text-decoration: underline;
    text-decoration-color: var(--kr-color-pink-light);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

/* Keyboard focus ring: navy on the cream card (the global pink ring is low
   non-text contrast on the light --kr-bg). */
.kr-menu .kr-mega-panel__link:focus-visible {
    outline: 2px solid var(--kr-primary);
    outline-offset: 3px;
    border-radius: var(--kr-radius-xs);
}

/* ---- Mobile toggle ----------------------------------------------------- */
/* M10: the word "Menu" is screen-reader-only now (nav-toggle.php), so this is a
   glyph-only control — it gets a full tap target of its own instead of
   borrowing width from the label that used to sit beside it. */
.kr-nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    min-width: var(--kr-tap-target);
    min-height: var(--kr-tap-target);
    padding: 0;
    color: var(--kr-primary);
    text-decoration: none; /* the <noscript> twin is a link */
}

.kr-nav-toggle__bars,
.kr-nav-toggle__bars::before,
.kr-nav-toggle__bars::after {
    content: "";
    display: block;
    width: 24px;
    height: 3px;
    border-radius: var(--kr-radius-pill);
    background: var(--kr-primary);
    position: relative;
}

.kr-nav-toggle__bars::before {
    position: absolute;
    top: -7px;
}
.kr-nav-toggle__bars::after {
    position: absolute;
    top: 7px;
}

/* ---- Mobile menu sheet: inert wrapper on desktop ----------------------- */
/* LV1: site-navigation.php wraps the primary menu in `.kr-mobile-menu` together
   with a top row (logo · close) and a footer (the phone-only shortcuts). Above
   the phone breakpoint the wrapper generates no box at all, so `.kr-menu` stays
   a direct flex child of the nav and the absolutely-positioned mega panels keep
   resolving against `.kr-header__nav` exactly as before; the two extra rows are
   simply not rendered. The sheet itself is composed in the ≤ 760px block. */
.kr-mobile-menu {
    display: contents;
}

.kr-mobile-menu__top,
.kr-mobile-menu__footer {
    display: none;
}

/* ---- Footer shortcut card (.kr-mobile-menu-action) --------------------
   The Favoriet / Kalender rows the phone bar hides, as cream navy-outlined
   cards — the panel's shape one size down. Defined outside the phone media
   query so the style guide can show one; on the site it only ever renders
   inside .kr-mobile-menu__footer. */
.kr-mobile-menu__actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: var(--kr-space-3);
}
.kr-mobile-menu-action {
    display: flex;
    align-items: center;
    gap: var(--kr-space-3);
    min-height: var(--kr-tap-target);
    padding: var(--kr-space-2) var(--kr-space-4) var(--kr-space-2) var(--kr-space-3);
    font-family: var(--kr-font-body);
    font-weight: var(--kr-weight-regular);
    font-size: var(--kr-text-md);
    color: var(--kr-primary);
    text-decoration: none;
    background: var(--kr-bg);
    border: 2px solid var(--kr-primary);
    border-radius: var(--kr-radius-lg);
    transition: background var(--kr-transition-fast);
}
.kr-mobile-menu-action:hover,
.kr-mobile-menu-action:focus-visible {
    color: var(--kr-primary);
    background: var(--kr-btn-soft-bg);
}
.kr-mobile-menu-action__icon {
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    object-fit: contain;
}

/* Scroll lock while the sheet is open. js/header.js puts the class on <html>;
   locking html AND body is what iOS Safari needs (body alone is ignored there),
   and the sheet's own `overscroll-behavior: contain` stops the rubber-band from
   chaining through. Chosen over `body { position: fixed }`, which forces a
   full relayout and a scroll-position round-trip on every open/close. */
html.kr-menu-open,
html.kr-menu-open body {
    overflow: hidden;
}

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 980px) {
    .kr-header__bar {
        flex-wrap: wrap;
        gap: var(--kr-space-4);
    }
    .kr-header__search {
        order: 3;
        flex-basis: 100%;
        max-width: none;
    }
    .kr-header__actions {
        gap: var(--kr-space-4);
    }
}

@media (max-width: 760px) {
    /* ---- M8: the phone header ------------------------------------------
       One row of hamburger · logo · login · cart, with the search on a full
       row of its own underneath. space-between does the placing: the toggle
       pins left, the icons pin right, and the logo (the only flexible item)
       takes the middle and centres itself in it. */
    .kr-header__bar {
        gap: var(--kr-space-3);
    }
    .kr-nav-toggle {
        display: inline-flex;
        order: 1;
    }
    .kr-header__logo {
        order: 2;
        /* Basis 0, not auto: a wrapping flex line is measured on flex-basis
           *before* anything shrinks, so a logo that asks for its natural width
           pushes the cart onto a second row at 390px instead of giving way.
           From zero it simply takes whatever the two controls leave. */
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
    }
    .kr-header__logo img {
        /* Height-capped rather than height-fixed: max-width keeps it inside the
           middle column, and the aspect ratio follows whichever cap bites. */
        height: auto;
        max-height: 64px;
        max-width: 100%;
    }
    .kr-header__actions {
        order: 3;
        flex: none;
        gap: var(--kr-space-2);
    }
    .kr-header__search {
        order: 4;
        flex: 1 0 100%;
    }

    /* M8: Favoriet and Kalender leave the phone header — both are reachable
       from the account menu. They are rows in the shared "Header icons" ACF
       repeater, so removing them there would remove them on desktop too; the
       identity comes from template-parts/header/header-actions.php. */
    .kr-header-action--favoriet,
    .kr-header-action--kalender {
        display: none;
    }

    /* Login and cart lose their labels below, so they need a target of their
       own rather than the width the words used to give them. (The hamburger
       carries its own, in the .kr-nav-toggle rule above.) */
    .kr-header-action {
        min-width: var(--kr-tap-target);
        min-height: var(--kr-tap-target);
        justify-content: center;
    }

    /* labels are tight on small screens — keep icons, drop the words */
    .kr-header-action__label {
        display: none;
    }


    /* ---- LV1: the phone menu is a full-screen sheet ---------------------
       The hamburger lives in the bar, so the menu row holds nothing in the
       flow at all — open or closed. The menu itself is `.kr-mobile-menu`, a
       fixed sheet over the whole viewport (below), so the page behind never
       shifts. */
    .kr-header__menu {
        padding-block: 0;
    }

    /* The sheet. Hidden until js/header.js puts .is-open on the nav; then it
       covers the viewport (100dvh, with 100vh as the fallback) and scrolls
       on its own. `overscroll-behavior: contain` stops a scroll that reaches
       the sheet's end from chaining to the page behind it — together with the
       html/body overflow lock (top of this file) that is the whole scroll
       lock, no body { position: fixed } juggling required. */
    .kr-mobile-menu {
        /* Same 5% gutter the page uses (.kr-container is 90% wide). */
        --kr-mobile-menu-gutter: calc((100% - var(--kr-container-width)) / 2);
        display: none;
        flex-direction: column;
        position: fixed;
        inset: 0;
        z-index: var(--kr-z-modal);
        height: 100vh;
        height: 100dvh;
        padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
        background: var(--kr-section-pink);
        color: var(--kr-primary);
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
    .kr-header__nav.is-open .kr-mobile-menu {
        display: flex;
        animation: kr-mobile-menu-in var(--kr-transition-fast) both;
    }

    /* Top row: small logo · close. Sticky, so the way out is always in reach
       while a long menu scrolls underneath it. The top safe-area inset is
       added here rather than on the sheet so the sticky row itself covers the
       notch area with the sheet colour. */
    .kr-mobile-menu__top {
        position: sticky;
        top: 0;
        z-index: var(--kr-z-base);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--kr-space-3);
        padding: calc(var(--kr-space-3) + env(safe-area-inset-top)) var(--kr-mobile-menu-gutter) var(--kr-space-3);
        background: var(--kr-section-pink);
    }
    .kr-mobile-menu__logo {
        display: inline-flex;
        align-items: center;
        min-height: var(--kr-tap-target);
        text-decoration: none;
    }
    .kr-mobile-menu__logo img {
        width: auto;
        height: auto;
        max-height: 56px;
        object-fit: contain;
    }
    .kr-mobile-menu__logo-text {
        font-family: var(--kr-font-heading);
        font-size: var(--kr-text-lg);
        color: var(--kr-primary);
    }
    /* The one × of the system (.kr-close), on a cream disc: the shared hover
       disc is --kr-section-pink, which IS the sheet here, so the disc is drawn
       at rest and flips to pink-light on hover instead. Navy × on cream is
       13.8:1, on pink-light 10.2:1. */
    .kr-mobile-menu__close {
        background: var(--kr-bg);
        border: 2px solid var(--kr-primary);
    }
    .kr-mobile-menu__close:hover,
    .kr-mobile-menu__close:focus-visible {
        background: var(--kr-btn-soft-bg);
    }

    /* Inside the sheet every focus ring is navy: the global pink ring is
       ~2.6:1 on the pink-pale sheet and would be easy to lose. */
    .kr-mobile-menu a:focus-visible,
    .kr-mobile-menu button:focus-visible {
        outline: 2px solid var(--kr-primary);
        outline-offset: 2px;
    }

    /* ---- The list ------------------------------------------------------ */
    .kr-menu {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: var(--kr-space-2) var(--kr-mobile-menu-gutter) var(--kr-space-5);
    }
    .kr-menu > li {
        width: 100%;
        border-bottom: 1px solid var(--kr-border);
    }
    .kr-menu > li:last-child {
        border-bottom: 0;
    }

    /* Top level in the brand display face (Funky Smile has one weight — the
       face itself is the emphasis; a synthetic bold would only smear it). Each
       row is a ≥ 48px target: 24–28px type at tight leading plus 12px above
       and below. */
    .kr-menu > li > a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--kr-space-3);
        width: 100%;
        padding-block: var(--kr-space-3);
        font-family: var(--kr-font-heading);
        font-weight: var(--kr-weight-regular);
        font-size: var(--kr-text-xl);
        line-height: var(--kr-leading-tight);
    }

    /* Full-bleed underline: the row is the target here, so the rule tracks the
       row rather than the word (and can't overhang into the gutter). */
    .kr-menu > li > a::after {
        left: 0;
        width: 100%;
        transform: none;
    }

    /* The section you are in, and the section you have open, both stay marked —
       in the brand pink, not the soft tint, so it survives at arm's length. */
    .kr-menu .kr-has-mega.is-open > a::after,
    .kr-menu .current-menu-item > a::after,
    .kr-menu .current_page_item > a::after,
    .kr-menu .current-menu-ancestor > a::after,
    .kr-menu .current-menu-parent > a::after {
        opacity: 1;
        height: 3px;
        background: var(--kr-accent);
    }

    /* Chevron on the items that unfold. The walker (inc/mega-menu.php) owns
       the <a>'s markup and ::after is the underline, so ::before draws it and
       flex `order` puts it at the end of the row. Rotates to point up while
       the section is open. */
    .kr-menu > .kr-has-mega > a::before {
        content: "";
        order: 2;
        flex: none;
        width: 0.5em;
        height: 0.5em;
        margin-inline-end: var(--kr-space-2);
        border-right: 3px solid currentColor;
        border-bottom: 3px solid currentColor;
        transform: translateY(-25%) rotate(45deg);
        transition: transform var(--kr-transition-fast);
    }
    .kr-menu > .kr-has-mega.is-open > a::before {
        transform: translateY(25%) rotate(225deg);
    }

    /* ---- Children sit inside the desktop panel -------------------------
       Same enclosing line as the desktop mega menu (navy border, big radius,
       cream fill) so it is obvious which menu you are inside — and on the
       pink-pale sheet the cream panel now reads as a card. Only the roominess
       is dialled back — the panel keeps its shape, not its desktop padding. */
    .kr-has-mega {
        width: 100%;
    }
    .kr-mega-panel,
    .kr-menu .sub-menu {
        /* Shape only — `display` stays with the rules that own each one's open
           state, or this would force every collapsed mega panel open. */
        position: static;
        min-width: 0;
        margin: var(--kr-space-2) 0 var(--kr-space-4);
        padding: var(--kr-space-4);
        background: var(--kr-bg);
        border: 2px solid var(--kr-primary);
        border-radius: var(--kr-radius-xl);
        box-shadow: none;
    }
    /* No hover bridge in the tap-driven accordion (panel is in-flow here). */
    .kr-mega-panel::before {
        content: none;
    }
    /* Hover/focus must not reveal the panel on touch — only .is-open does. */
    .kr-has-mega:hover > .kr-mega-panel,
    .kr-has-mega:focus-within > .kr-mega-panel {
        display: none;
    }
    .kr-has-mega.is-open > .kr-mega-panel {
        display: block;
        animation: kr-mobile-menu-panel-in var(--kr-transition-fast) both;
    }
    /* Plain (non-mega) dropdowns have no toggle here, so they stay unfolded —
       unchanged behaviour, now inside the same panel. */
    .kr-menu .sub-menu {
        display: block;
    }
    .kr-mega-panel__inner {
        grid-template-columns: 1fr;
        gap: var(--kr-space-4);
    }
    /* Tighter rhythm inside the panel: the column headings were set at the
       desktop display size with 24px under them, which is most of why the open
       menu ran so long. */
    .kr-mega-panel__title {
        margin-bottom: var(--kr-space-2);
        font-size: var(--kr-text-lg);
    }
    .kr-mega-panel__list {
        gap: 0;
    }
    /* 18px at 1.6 leading plus 8px above and below is a 44.8px row — the
       system's tap target. */
    .kr-menu .kr-mega-panel__link,
    .kr-menu .sub-menu a {
        display: block;
        padding: var(--kr-space-2) 0;
        line-height: var(--kr-leading-normal);
    }

    /* ---- Footer: the shortcuts the phone bar hides ---------------------
       Favoriet and Kalender (header-actions.php, context 'mobile-menu') as
       cream cards — the same navy-outlined shape as the panel above, one size
       down. `margin-top: auto` parks them at the foot of a short menu; a long
       menu simply scrolls to them. The bottom safe-area inset lives here. */
    .kr-mobile-menu__footer {
        display: block;
        margin-top: auto;
        padding: var(--kr-space-4) var(--kr-mobile-menu-gutter) calc(var(--kr-space-5) + env(safe-area-inset-bottom));
        border-top: 1px solid var(--kr-border);
    }
    /* Nothing to show (no extra repeater rows) → no stray divider. */
    .kr-mobile-menu__footer:not(:has(*)) {
        display: none;
    }
    /* ---- No JS: unfold in the page instead --------------------------------
       nav-toggle.php swaps the button for a link to #kr-mobile-menu when
       scripting is off, so :target is the open state. Without a script there
       is no accordion, no scroll lock and no way to close a sheet — so the
       menu opens *in the flow* here, every panel already unfolded, and the
       visitor scrolls past it. header.js adds .kr-js to <html> on load, which
       keeps these rules out of the scripted path. */
    html:not(.kr-js) .kr-mobile-menu:target {
        display: block;
        position: static;
        height: auto;
        overflow: visible;
        animation: none;
    }
    html:not(.kr-js) .kr-mobile-menu:target .kr-mobile-menu__top {
        display: none;
    }
    html:not(.kr-js) .kr-mobile-menu:target .kr-has-mega > .kr-mega-panel {
        display: block;
    }
    html:not(.kr-js) .kr-mobile-menu:target .kr-menu > .kr-has-mega > a::before {
        content: none;
    }
}

/* Entrance: a short lift-and-fade on the sheet, and a smaller one on a panel
   as it unfolds. Both take their duration and curve from --kr-transition-fast,
   which tokens.css already zeroes under prefers-reduced-motion; the explicit
   guard below is belt and braces. */
@keyframes kr-mobile-menu-in {
    from {
        opacity: 0;
        transform: translateY(var(--kr-space-4));
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@keyframes kr-mobile-menu-panel-in {
    from {
        opacity: 0;
        transform: translateY(calc(-1 * var(--kr-space-2)));
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    .kr-header__nav.is-open .kr-mobile-menu,
    .kr-has-mega.is-open > .kr-mega-panel {
        animation: none;
    }
    .kr-menu > .kr-has-mega > a::before {
        transition: none;
    }
}