/*
 * Site navigation (Tts\Ui\Navigation): one component, two layouts.
 *
 * Loaded on every page - the navigation is shared, and looks and behaves the
 * same whatever page is underneath it. Its markup is its own (site-nav__*):
 * none of Foundation's .top-bar rules or the legacy navigation CSS reach it.
 * Decision 15.
 *
 *   below 1024px  the lime bar holds the search field and a menu button; the
 *                 menu is a panel under it - an accordion, the catalogue a
 *                 second accordion inside it
 *   from 1024px   the lime bar is the menu: a row of links and section
 *                 buttons; sections open as dropdowns, the catalogue as a mega
 *                 menu across the header's measure
 *
 * 1024 is where both fit: the seven labels and a four-column catalogue need
 * about 800px beside the logo row, which 768-1023 does not reliably give. It is
 * also the design system's own second breakpoint. The phone form below it is
 * written as max-width because it is the other half of one component, not a
 * base that 1024 builds on - the two share tokens and states, not layout.
 *
 * The same four kinds of row in both: top level, catalogue group, destination,
 * featured link - plus the catalogue's see-all, "Alle tapijttegels". Purple
 * marks "you are here", the see-all link and an open caret; everything
 * structural stays ink.
 */

/* Shared --------------------------------------------------------------------- */

.site-nav-band {
    background: var(--shop-lime);
}

/* Foundation fades a button's background over 300ms; the links beside the
   section buttons change at once, so the buttons do too - at both widths. */
button.site-nav__toggle {
    transition: none;
}

.site-nav .site-nav__featured a {
    font-weight: var(--shop-weight-semibold);
}

.site-nav {
    /* The height of a structural row: a top-level item, a catalogue group, a
       pinned heading. */
    --site-nav-row: 48px;
    /* A destination link in a list. A notch under the structural rows, so a list
       of twelve colours stays scannable; still well over the 24px minimum. */
    --site-nav-link: 40px;
}

/* Every list in the navigation - the bar, a section's links, a group's links,
   the featured links - is a plain list: lists for screen readers, not bullets. */
.site-nav__list,
.site-nav__links,
.site-nav__group-links,
.site-nav__featured {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* An h2: it heads a part of the navigation, which comes before the page's h1.
   Nothing of a page heading's look is wanted. */
.site-nav__group-heading {
    margin: 0;
    padding: 0;
    border: 0;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: normal;
    text-transform: none;
}

.site-nav__caret {
    display: flex;
    flex: none;
    transition: rotate var(--shop-duration) var(--shop-ease);
}

.site-nav__item.is-open > .site-nav__toggle .site-nav__caret,
.site-nav__group.is-open .site-nav__caret {
    rotate: 180deg;
    color: var(--shop-accent);
}

.site-nav a:focus-visible,
.site-nav button:focus-visible {
    outline: 2px solid var(--shop-accent);
    outline-offset: -2px;
}

/* A current link inside a section: the brighter purple, and the same edge bar
   as a current row, so it is not marked by colour alone. */
.site-nav__panel a[aria-current="page"] {
    border-inline-start: 4px solid var(--shop-accent);
    color: var(--shop-accent);
    font-weight: var(--shop-weight-semibold);
}

/* Phone and tablet, below 1024px --------------------------------------------- */

@media (max-width: 1023.98px) {
    /* Search and the menu button, side by side on the lime bar. Positioned: the
       search suggestions hang from it, as wide as the bar. */
    .site-nav__bar {
        position: relative;
        display: flex;
        align-items: center;
        gap: var(--shop-space-2);
        padding: var(--shop-space-2) var(--shop-gutter);
    }

    .site-nav__bar form {
        flex: 1;
        min-width: 0;
        margin: 0;
    }

    /* The design system's field: one white control, the submit inside its right
       end, 16px so iOS does not zoom on focus. */
    .site-nav__search {
        position: relative;
        display: flex;
        align-items: center;
    }

    input.site-nav__search-input {
        box-sizing: border-box;
        width: 100%;
        height: var(--shop-tap);
        margin: 0;
        padding: 0 var(--shop-tap) 0 var(--shop-space-3);
        border: 1px solid var(--shop-border-field);
        border-radius: var(--shop-radius-md);
        box-shadow: none;
        background: var(--shop-surface);
        color: var(--shop-ink);
        font-family: var(--shop-font);
        font-size: var(--shop-text-base);
    }

    /* The browser's own clear button crowded the submit. */
    input.site-nav__search-input::-webkit-search-cancel-button {
        appearance: none;
    }

    input.site-nav__search-input::placeholder {
        color: var(--shop-text-soft);
        opacity: 1;
    }

    input.site-nav__search-input:focus {
        border-color: var(--shop-accent);
        outline: 2px solid var(--shop-accent);
        outline-offset: 0;
        background: var(--shop-surface);
    }

    button.site-nav__search-submit {
        position: absolute;
        inset-block: 0;
        inset-inline-end: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: var(--shop-tap);
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0 var(--shop-radius-md) var(--shop-radius-md) 0;
        background: transparent;
        color: var(--shop-accent);
    }

    button.site-nav__search-submit:hover,
    button.site-nav__search-submit:focus {
        background: transparent;
        color: var(--shop-accent-strong);
    }

    /* Search suggestions (Tts\Ui\Search\SearchSuggestions, search-suggest.js): a
       listbox under the field, across the bar's measure, above the page. The menu
       panel is never under it: a search closes the menu. Short by design - three
       places to go, five products, "all results" - and scrollable where a phone's
       keyboard leaves little room: the script fits its height to what the screen
       shows below the field. */
    .search-suggest {
        position: absolute;
        inset-block-start: calc(100% - var(--shop-space-1));
        inset-inline: var(--shop-gutter);
        z-index: var(--shop-z-dropdown);
        max-height: min(34rem, 70vh);
        overflow-y: auto;
        overscroll-behavior: contain;
        /* The sticky "all results" row covers the bottom: an option scrolled into view
           by the arrow keys stops above it (WCAG 2.4.11). */
        scroll-padding-block-end: calc(var(--shop-tap) + var(--shop-space-2));
        padding-block: var(--shop-space-1);
        border: 1px solid var(--shop-border);
        border-radius: var(--shop-radius-md);
        background: var(--shop-surface);
        box-shadow: var(--shop-shadow-sheet);
        color: var(--shop-ink);
        font-family: var(--shop-font);
        text-align: start;
    }

    .search-suggest[hidden],
    .search-suggest__listbox[hidden],
    .search-suggest__message[hidden] {
        display: none;
    }

    /* A newer answer is on its way: the list stays, dimmed, instead of flashing. */
    .search-suggest.is-loading .search-suggest__listbox {
        opacity: 0.55;
        transition: opacity var(--shop-duration) var(--shop-ease);
    }

    .search-suggest__group + .search-suggest__group {
        margin-block-start: var(--shop-space-1);
        border-block-start: 1px solid var(--shop-divider);
    }

    .search-suggest__heading {
        padding: var(--shop-space-2) var(--shop-space-3) var(--shop-space-1);
        color: var(--shop-text-soft);
        font-size: var(--shop-text-xs);
        font-weight: var(--shop-weight-semibold);
        letter-spacing: var(--shop-tracking-eyebrow);
        text-transform: uppercase;
    }

    /* A whole row is the link, at least the tap size tall. */
    .search-suggest__option {
        display: flex;
        align-items: center;
        gap: var(--shop-space-3);
        min-height: var(--shop-tap);
        padding: var(--shop-space-1) var(--shop-space-3);
        color: var(--shop-ink);
        font-size: var(--shop-text-base);
        line-height: var(--shop-leading-snug);
        text-decoration: none;
    }

    /* combined.css colours a:hover and a:focus (0,1,1). Hover is shown here only; it
       does not move the active option, which stays the keyboard's. */
    .search-suggest__option:is(:hover, :focus) {
        color: var(--shop-ink);
        text-decoration: none;
    }

    .search-suggest__option:hover {
        background: var(--shop-surface-subtle);
    }

    /* The active option: tint plus an edge bar, as a current row in the menu, so it
       is not marked by colour alone. */
    .search-suggest__option.is-active {
        background: var(--shop-accent-soft);
        box-shadow: inset 4px 0 0 var(--shop-accent);
    }

    /* Forced colours drop the tint and the shadow. */
    @media (forced-colors: active) {
        .search-suggest__option.is-active {
            outline: 2px solid Highlight;
            outline-offset: -2px;
        }
    }

    .search-suggest__image {
        flex: none;
        width: 40px;
        height: 40px;
        border-radius: var(--shop-radius-sm);
        background: var(--shop-surface-subtle);
        object-fit: cover;
    }

    .search-suggest__text {
        display: grid;
        flex: 1;
        gap: 2px;
        min-width: 0;
    }

    .search-suggest__title {
        font-weight: var(--shop-weight-semibold);
        overflow-wrap: anywhere;
    }

    .search-suggest__meta {
        color: var(--shop-text-soft);
        font-size: var(--shop-text-sm);
    }

    /* The cards' price colour and weight, at the size of a line. */
    .search-suggest__price {
        color: var(--shop-price);
        font-size: var(--shop-text-sm);
        font-weight: var(--shop-weight-bold);
    }

    .search-suggest__unit {
        color: var(--shop-text-soft);
        font-weight: normal;
    }

    /* Price and stock on one line, the stock in the cards' green. */
    .search-suggest__line {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0 var(--shop-space-3);
    }

    .search-suggest__stock {
        color: var(--shop-text-soft);
        font-size: var(--shop-text-sm);
    }

    .search-suggest__arrow {
        display: inline-flex;
        flex: none;
        width: 1em;
        height: 1em;
        margin-inline-start: auto;
        color: var(--shop-accent);
    }

    .search-suggest__arrow svg {
        width: 100%;
        height: 100%;
    }

    /* The way to everything stays in view at the bottom of a list that scrolls,
       and the rows cut off above it show that there is more. */
    .search-suggest__all {
        position: sticky;
        inset-block-end: calc(-1 * var(--shop-space-1));
        margin-block-start: var(--shop-space-1);
        border-block-start: 1px solid var(--shop-divider);
        background: var(--shop-surface);
        font-weight: var(--shop-weight-semibold);
    }

    .search-suggest__all,
    .search-suggest__all:is(:hover, :focus) {
        color: var(--shop-accent);
    }

    /* Reading copy (the hint after nothing was found): the phone body size (Decision 13). */
    .search-suggest__message {
        margin: 0;
        padding: var(--shop-space-3);
        color: var(--shop-text);
        font-size: var(--shop-text-body);
        line-height: var(--shop-leading-body);
    }

    /* The same white square as the field beside it. */
    button.site-nav__menu-button {
        flex: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: var(--shop-tap);
        height: var(--shop-tap);
        margin: 0;
        padding: 0;
        border: 1px solid var(--shop-border-field);
        border-radius: var(--shop-radius-md);
        background: var(--shop-surface);
        color: var(--shop-accent);
    }

    button.site-nav__menu-button:hover,
    button.site-nav__menu-button:focus {
        background: var(--shop-surface);
        color: var(--shop-accent-strong);
    }

    button.site-nav__menu-button:focus-visible,
    button.site-nav__search-submit:focus-visible {
        outline-offset: 2px;
    }

    .site-nav__menu-button svg,
    .site-nav__search-submit svg {
        display: block;
        width: var(--shop-icon);
        height: var(--shop-icon);
    }

    .site-nav__icon-close,
    .site-nav.is-open .site-nav__icon-open {
        display: none;
    }

    .site-nav.is-open .site-nav__icon-close {
        display: block;
    }

    /* The panel: one scroll context while the menu is open, the page behind
       locked, nothing inside scrolling on its own. */
    .site-nav__menu {
        display: none;
    }

    .site-nav.is-open .site-nav__menu {
        position: fixed;
        inset: var(--site-nav-top, 0) 0 0;
        z-index: var(--shop-z-sheet);
        display: block;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-block-end: calc(var(--shop-space-8) + env(safe-area-inset-bottom));
        scroll-padding-block-start: var(--site-nav-row);
        background: var(--shop-surface);
        box-shadow: inset 0 1px 0 var(--shop-border);
    }

    /* With a group open, two rows are pinned. */
    .site-nav.is-open .site-nav__menu.has-open-group {
        scroll-padding-block-start: calc(var(--site-nav-row) * 2);
    }

    /* Top level: direct links and section buttons share the row; a section
       carries a caret, a link does not. */
    .site-nav__item {
        color: var(--shop-ink);
    }

    .site-nav__item.is-current {
        color: var(--shop-accent);
    }

    .site-nav__link,
    button.site-nav__toggle {
        display: flex;
        align-items: center;
        gap: var(--shop-space-3);
        width: 100%;
        min-height: var(--site-nav-row);
        margin: 0;
        padding: 0 var(--shop-gutter);
        border: 0;
        border-radius: 0;
        background: var(--shop-surface);
        color: inherit;
        font-family: var(--shop-font);
        font-size: var(--shop-text-base);
        font-weight: var(--shop-weight-semibold);
        line-height: var(--shop-leading-tight);
        text-align: start;
        text-decoration: none;
        cursor: pointer;
    }

    .site-nav__link:hover,
    .site-nav__link:focus,
    button.site-nav__toggle:hover,
    button.site-nav__toggle:focus {
        background: var(--shop-surface);
        color: inherit;
        text-decoration: none;
    }

    @media (hover: hover) {
        .site-nav__link:hover,
        button.site-nav__toggle:hover {
            background: var(--shop-surface-subtle);
        }
    }

    .site-nav__caret {
        margin-inline-start: auto;
        color: var(--shop-text-soft);
    }

    .site-nav__caret svg {
        width: var(--shop-icon-sm);
        height: var(--shop-icon-sm);
    }

    /* Where you are: a bar at the row's edge - a border, so it survives forced
       colours - its width given back in padding. */
    .site-nav__item.is-current > .site-nav__link,
    .site-nav__item.is-current > .site-nav__toggle {
        border-inline-start: 4px solid var(--shop-accent);
        padding-inline-start: calc(var(--shop-gutter) - 4px);
    }

    /* An open section: its heading keeps the ink and says it is open with the
       turned caret, the rule beneath, and by staying pinned at the top of the
       panel while its links scroll. */
    .site-nav__item.is-open > .site-nav__toggle {
        position: sticky;
        inset-block-start: 0;
        z-index: calc(var(--shop-z-sticky) + 1);
        box-shadow: inset 0 -1px 0 var(--shop-border);
    }

    /* Section contents */
    .site-nav__panel {
        display: none;
        padding: var(--shop-space-2) 0 var(--shop-space-4);
        background: var(--shop-surface-subtle);
    }

    .site-nav__item.is-open > .site-nav__panel {
        display: block;
    }

    .site-nav__panel a {
        display: flex;
        align-items: center;
        min-height: var(--site-nav-link);
        padding: var(--shop-space-2) var(--shop-gutter) var(--shop-space-2) calc(var(--shop-gutter) + var(--shop-space-4));
        color: var(--shop-ink);
        font-family: var(--shop-font);
        font-size: var(--shop-text-control);
        font-weight: normal;
        line-height: var(--shop-leading-snug);
        text-decoration: none;
    }

    .site-nav__panel a:hover,
    .site-nav__panel a:focus {
        color: var(--shop-ink);
        text-decoration: none;
    }

    .site-nav__panel a:focus-visible {
        color: var(--shop-accent);
    }

    @media (hover: hover) {
        .site-nav__panel a:hover {
            color: var(--shop-accent);
        }
    }

    .site-nav__panel a[aria-current="page"] {
        padding-inline-start: calc(var(--shop-gutter) + var(--shop-space-4) - 4px);
    }

    /* The catalogue: see-all first, then the groups, one open at a time, then
       the featured links. */
    .site-nav .site-nav__all {
        min-height: var(--site-nav-row);
        color: var(--shop-accent);
        font-weight: var(--shop-weight-semibold);
    }

    .site-nav__all-arrow {
        display: none;
    }

    .site-nav__group-label {
        display: none;
    }

    button.site-nav__group-toggle {
        display: flex;
        align-items: center;
        gap: var(--shop-space-3);
        width: 100%;
        min-height: var(--site-nav-row);
        margin: 0;
        padding: 0 var(--shop-gutter) 0 calc(var(--shop-gutter) + var(--shop-space-4));
        border: 0;
        border-radius: 0;
        background: var(--shop-surface-subtle);
        color: var(--shop-ink);
        font-family: var(--shop-font);
        font-size: var(--shop-text-control);
        font-weight: var(--shop-weight-semibold);
        line-height: var(--shop-leading-tight);
        text-align: start;
    }

    button.site-nav__group-toggle:hover,
    button.site-nav__group-toggle:focus {
        background: var(--shop-surface-subtle);
        color: var(--shop-ink);
    }

    /* A closed group that holds the current page says so. */
    .site-nav__group.is-current button.site-nav__group-toggle {
        color: var(--shop-accent);
    }

    /* An open group's row stays pinned under the section's heading. */
    .site-nav__group.is-open .site-nav__group-heading {
        position: sticky;
        inset-block-start: var(--site-nav-row);
        z-index: var(--shop-z-sticky);
    }

    .site-nav__group.is-open button.site-nav__group-toggle {
        box-shadow: inset 0 -1px 0 var(--shop-border);
    }

    .site-nav__group-links {
        display: none;
    }

    .site-nav__group.is-open .site-nav__group-links {
        display: block;
    }

    /* Destinations inside a group are a step further in than their group. */
    .site-nav .site-nav__group-links a {
        padding-inline-start: calc(var(--shop-gutter) + var(--shop-space-8));
    }

    .site-nav .site-nav__group-links a[aria-current="page"] {
        padding-inline-start: calc(var(--shop-gutter) + var(--shop-space-8) - 4px);
    }

    .site-nav__featured {
        margin-block-start: var(--shop-space-2);
        padding-block-start: var(--shop-space-2);
        box-shadow: inset 0 1px 0 var(--shop-border);
    }

    /* On the root only: Foundation sets html and body to height: 100%, so
       hiding the body's overflow too makes it a clipped box of its own and snaps
       the page back to the top under the open menu. */
    html.site-nav-open {
        overflow: hidden;
    }
}

/* Desktop, from 1024px --------------------------------------------------------
   The bar is the menu. Its items sit on the header's measure - the first label
   under the logo's left edge - and the catalogue's mega menu spans that measure
   rather than hanging off its own label. */

@media (min-width: 1024px) {
    .site-nav {
        /* The bar items' inline padding, taken back at the list's start so the
           first label lines up with the logo above. */
        --site-nav-item-pad: var(--shop-gutter);
    }

    .site-nav__inner {
        position: relative;
        box-sizing: border-box;
        max-width: var(--shop-container);
        margin-inline: auto;
        padding-inline: var(--shop-gutter);
    }

    .site-nav__bar {
        display: none;
    }

    .site-nav__list {
        display: flex;
        margin-inline-start: calc(var(--site-nav-item-pad) * -1);
    }

    .site-nav__item {
        position: relative;
    }

    /* Its mega menu is placed against the bar, not the item. */
    .site-nav__item--catalogue {
        position: static;
    }

    /* Links and section buttons are one kind of control on the bar: label and
       caret together, one target. The 3px bottom border is where "you are
       here" shows; transparent otherwise, so nothing moves. */
    .site-nav__link,
    button.site-nav__toggle {
        display: flex;
        align-items: center;
        gap: 6px;
        height: var(--site-nav-row);
        margin: 0;
        padding: 3px var(--site-nav-item-pad) 0;
        border: 0;
        border-block-end: 3px solid transparent;
        border-radius: 0;
        background: transparent;
        color: var(--shop-ink);
        font-family: var(--shop-font);
        font-size: var(--shop-text-base);
        font-weight: var(--shop-weight-semibold);
        line-height: 1;
        white-space: nowrap;
        text-decoration: none;
        cursor: pointer;
    }

    .site-nav__link:hover,
    .site-nav__link:focus,
    button.site-nav__toggle:hover,
    button.site-nav__toggle:focus {
        background: transparent;
        color: var(--shop-ink);
        text-decoration: none;
    }

    /* Hover lightens the lime; an open section's button turns white and joins
       the panel below it. */
    @media (hover: hover) {
        .site-nav__link:hover,
        button.site-nav__toggle:hover {
            background: rgb(255 255 255 / 35%);
        }
    }

    /* Above the panel, so the panel's shadow does not fall across the tab
       that is joined to it. */
    .site-nav__item.is-open > button.site-nav__toggle {
        position: relative;
        z-index: calc(var(--shop-z-dropdown) + 1);
        background: var(--shop-surface);
    }

    .site-nav__item.is-current > .site-nav__link,
    .site-nav__item.is-current > .site-nav__toggle {
        border-block-end-color: var(--shop-accent);
        color: var(--shop-accent);
    }

    /* Forced colours paints the transparent underline of every item in the
       text colour; only the current item's should show. */
    @media (forced-colors: active) {
        .site-nav__item:not(.is-current) > :is(.site-nav__link, button.site-nav__toggle) {
            border-block-end-color: Canvas;
        }
    }

    /* Open, the tab runs straight into its panel; the underline would cut it
       off. The purple label still says which item this is. */
    .site-nav__item.is-current.is-open > button.site-nav__toggle {
        border-block-end-color: transparent;
    }

    .site-nav__caret svg {
        width: var(--shop-icon-xs);
        height: var(--shop-icon-xs);
    }

    /* Dropdowns ---------------------------------------------------------------
       A white panel flush under its button - no gap for the pointer to fall
       through - sized by its content. The last two items' panels open leftward
       so they stay inside the bar. */
    .site-nav__panel {
        position: absolute;
        inset-block-start: 100%;
        inset-inline-start: 0;
        z-index: var(--shop-z-dropdown);
        display: none;
        box-sizing: border-box;
        width: max-content;
        min-width: 15rem;
        max-width: 22rem;
        padding: var(--shop-space-2);
        border: 1px solid var(--shop-border);
        border-block-start: 0;
        border-radius: 0 0 var(--shop-radius-lg) var(--shop-radius-lg);
        background: var(--shop-surface);
        box-shadow: var(--shop-shadow-card-hover);
    }

    .site-nav__item.is-open > .site-nav__panel {
        display: block;
    }

    /* Without the script (it marks the nav .is-enhanced) the buttons do
       nothing, so hovering or tabbing into an item opens it, as the legacy
       menu did. */
    .site-nav:not(.is-enhanced) .site-nav__item:is(:hover, :focus-within) > .site-nav__panel {
        display: block;
    }

    .site-nav:not(.is-enhanced) .site-nav__item:is(:hover, :focus-within) > .site-nav__panel--catalogue {
        display: grid;
    }

    .site-nav__item:nth-last-child(-n + 2) > .site-nav__panel {
        inset-inline: auto 0;
    }

    .site-nav__panel a {
        display: flex;
        align-items: center;
        min-height: var(--site-nav-link);
        padding: var(--shop-space-2) var(--shop-space-3);
        border-radius: var(--shop-radius-md);
        color: var(--shop-ink);
        font-family: var(--shop-font);
        font-size: var(--shop-text-control);
        line-height: var(--shop-leading-snug);
        text-decoration: none;
    }

    .site-nav__panel a:hover,
    .site-nav__panel a:focus {
        color: var(--shop-ink);
        text-decoration: none;
    }

    @media (hover: hover) {
        .site-nav__panel a:hover {
            background: var(--shop-surface-subtle);
            color: var(--shop-accent);
        }
    }

    /* On the desktop a current link inside a panel is the tinted row a hover
       would give it, kept - not the phone's edge bar, which read as a stray
       bracket beside a short link in a wide panel. */
    .site-nav .site-nav__panel a[aria-current="page"] {
        border-inline-start: 0;
        background: var(--shop-surface-subtle);
        color: var(--shop-accent);
    }

    /* The see-all link is already purple and bold; on the homepage the Webshop
       item above it says "here". */
    .site-nav .site-nav__panel a.site-nav__all[aria-current="page"] {
        background: none;
    }

    /* The mega menu ------------------------------------------------------------
       The catalogue across the header's measure, in the phone menu's order:
       "Alle tapijttegels", then the groups flowing into four balanced columns
       in their reading order, then the featured links as a tinted card at the
       end of that flow. Its inner padding is the gutter, so its text lines up with the
       logo and the Webshop label. */
    .site-nav__panel--catalogue {
        inset-inline: 0;
        width: auto;
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        gap: var(--shop-space-4);
        min-width: 0;
        max-width: none;
        padding: var(--shop-space-6) var(--shop-gutter) var(--shop-space-6);
    }

    .site-nav__item.is-open > .site-nav__panel--catalogue {
        display: grid;
    }

    .site-nav .site-nav__all {
        justify-self: start;
        gap: var(--shop-space-2);
        min-height: 0;
        padding: var(--shop-space-1) 0;
        color: var(--shop-accent);
        font-size: var(--shop-text-base);
        font-weight: var(--shop-weight-semibold);
        transition: gap var(--shop-duration) var(--shop-ease);
    }

    @media (hover: hover) {
        .site-nav .site-nav__all:hover {
            gap: var(--shop-space-3);
            background: none;
            color: var(--shop-accent-strong);
        }
    }

    .site-nav__all-arrow {
        display: flex;
    }

    .site-nav__all-arrow svg {
        width: var(--shop-icon-xs);
        height: var(--shop-icon-xs);
    }

    .site-nav__groups {
        column-count: 4;
        column-gap: var(--shop-space-8);
    }

    .site-nav__group {
        break-inside: avoid;
        padding-block-end: var(--shop-space-4);
    }

    button.site-nav__group-toggle {
        display: none;
    }

    .site-nav__group-label {
        display: block;
        padding-block-end: var(--shop-space-1);
        color: var(--shop-ink);
        font-family: var(--shop-font);
        font-size: var(--shop-text-control);
        font-weight: var(--shop-weight-semibold);
        line-height: var(--shop-leading-tight);
    }

    /* Denser than a dropdown: a list of links under a heading, not a menu of
       rows. 15px text keeps them as readable as on a phone. */
    .site-nav .site-nav__group-links a {
        display: block;
        min-height: 0;
        margin-inline-start: calc(var(--shop-space-2) * -1);
        padding: 5px var(--shop-space-2);
        border-radius: var(--shop-radius-sm);
    }

    /* The featured links close the groups' flow: a tinted card that the
       column balancing sets at the foot of the last column, which the short
       groups (Accessoires, Merk) leave room in - so the panel is no taller for
       them and they are in view on a short laptop screen. */
    .site-nav__featured {
        break-inside: avoid;
        padding: var(--shop-space-2);
        border-radius: var(--shop-radius-md);
        background: var(--shop-surface-subtle);
    }

    @media (hover: hover) {
        .site-nav .site-nav__featured a:hover {
            background: var(--shop-surface);
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-nav__caret,
    .site-nav .site-nav__all {
        transition: none;
    }
}