/*
 * Shop shell - top bar, category nav, footer. Styled to the Figma composed
 * components Shop/TopBar (22:2), Shop/CategoryNav (51:56) and Shop/Footer
 * (26:53). Loaded after shop.css so it owns the global frame on the new token
 * system; the inner screens are migrated onto these tokens one by one.
 */

/* The shell owns the shop body on the new system (Inter + Zinc canvas) and lays
   it out as a sticky-footer column: header + main (grows) + footer. */
body[data-app='shop'] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    font-family: var(--font-sans);
    color: var(--color-text-primary);
    background: var(--color-bg-canvas);
}

body[data-app='shop'] main {
    flex: 1 0 auto;
    width: 100%;
    max-width: var(--shop-container);
    margin: 0 auto;
    padding: 32px 64px;
    /* Keep the side gutters inside the 100% width; without this the padding is
       added on top and the page overflows the viewport (horizontal scroll). */
    box-sizing: border-box;
}

/* ============================================================ Top bar */

.shop-topbar {
    display: flex;
    align-items: center;
    gap: 28px;
    height: 68px;
    padding: 0 32px;
    background: var(--color-bg-surface);
    border-bottom: 1px solid var(--color-border-default);
}

.shop-topbar__logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    text-decoration: none;
}

.shop-topbar__logo img {
    display: block;
    height: 34px;
    width: auto;
}

.shop-search {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
}

.shop-search:focus-within {
    border-color: var(--color-bg-brand);
    box-shadow: var(--shadow-focus);
}

.shop-search__submit {
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
}

.shop-search__submit:hover {
    color: var(--color-text-secondary);
}

.shop-search__submit:focus-visible {
    outline: none;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-focus);
}

.shop-search__icon {
    color: var(--color-text-muted);
}

.shop-search__input {
    flex: 1;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font-family: var(--font-sans);
    font-size: var(--text-md);
    line-height: 22px;
    color: var(--color-text-primary);
}

.shop-search__input::placeholder {
    color: var(--color-text-muted);
}

.shop-search__input:focus {
    outline: none;
}

/* Mobile search toggle - the magnifying-glass button that stands in for the full
   search bar on phones (shown only <=720px with JS; see the responsive block).
   Tapping it slides the bar out as its own row; the glyph swaps to an X to close. */
.shop-search-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-primary);
    cursor: pointer;
}

.shop-search-toggle:hover {
    background: var(--color-bg-subtle);
}

.shop-search-toggle__close {
    display: none;
}

.shop-search-toggle[aria-expanded='true'] .shop-search-toggle__open {
    display: none;
}

.shop-search-toggle[aria-expanded='true'] .shop-search-toggle__close {
    display: block;
}

@keyframes shop-search-reveal {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
}

.shop-topbar__right {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 0 0 auto;
}

/* Language switcher: JS-free flag dropdown via <details>/<summary>. */
.shop-lang {
    position: relative;
    display: flex;
    align-items: center;
}

.shop-lang__trigger {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 7px;
    border-radius: var(--radius-sm);
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--color-text-secondary);
    cursor: pointer;
    list-style: none;
    transition: background 150ms ease;
}

.shop-lang__trigger::-webkit-details-marker {
    display: none;
}

.shop-lang__trigger:hover {
    background: var(--color-bg-subtle);
}

.shop-lang__code {
    letter-spacing: 0.02em;
}

.shop-lang__caret {
    color: var(--color-text-muted);
    transition: transform 150ms ease;
}

.shop-lang[open] .shop-lang__caret {
    transform: rotate(180deg);
}

.shop-lang__menu {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    min-width: 184px;
    padding: 8px;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-overlay);
}

.shop-lang__opt {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: var(--radius-sm);
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--color-text-primary);
    text-decoration: none;
}

.shop-lang__opt:hover {
    background: var(--color-bg-subtle);
}

.shop-lang__opt.is-active {
    color: var(--color-text-brand);
}

.shop-lang__opt.is-active::after {
    content: "";
    margin-left: auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.shop-flag {
    display: block;
    width: 22px;
    height: 15px;
    flex: 0 0 auto;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.1);
}

.shop-topbar__divider {
    width: 1px;
    height: 22px;
    background: var(--color-border-default);
}

.shop-topbar__account {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.shop-topbar__login,
.shop-acct__trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--color-text-primary);
    text-decoration: none;
    cursor: pointer;
}

/* Account dropdown: JS-free via <details>/<summary>. */
.shop-acct {
    position: relative;
}

.shop-acct__trigger {
    list-style: none;
}

.shop-acct__trigger::-webkit-details-marker {
    display: none;
}

.shop-acct__caret {
    transition: transform 150ms ease;
}

.shop-acct[open] .shop-acct__caret {
    transform: rotate(180deg);
}

.shop-acct__menu {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    min-width: 220px;
    padding: 8px;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-overlay);
}

.shop-acct__name {
    padding: 8px 10px 6px;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.shop-acct__menu a {
    padding: 9px 10px;
    border-radius: var(--radius-sm);
    font-size: var(--text-base);
    color: var(--color-text-primary);
    text-decoration: none;
}

.shop-acct__menu a:hover {
    background: var(--color-bg-subtle);
}

.shop-cart {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: var(--color-text-primary);
    text-decoration: none;
}

.shop-cart__count {
    position: absolute;
    top: -6px;
    right: -8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: var(--radius-full);
    background: var(--color-bg-brand);
    color: var(--color-text-on-brand);
    font-size: var(--text-2xs);
    font-weight: 600;
    line-height: 1;
}

/* ============================================================ Category nav */

.shop-catnav {
    position: relative;
    padding: 0 32px;
    background: var(--color-bg-surface);
    border-bottom: 1px solid var(--color-border-default);
}

/* The bar wraps to a second row when the departments don't fit (IMTOS has ~10
   wide categories, so on anything narrower than a very wide monitor a single
   non-wrapping row ran off-screen and got cut off). The rows are centred so a
   wrapped remainder reads as intentional instead of a lonely left-aligned
   orphan. Items stay relative so each department's mega panel still drops
   directly beneath it; an open panel sits above the wrapped rows (z-index), so
   the pointer travels straight down into it without grazing the row below. */
.shop-catnav__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 0 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Not the offset parent: the mega panel below anchors to the full-width
   .shop-catnav (position: relative) so it spans the whole bar, not one item. */
.shop-catnav__item {
    display: flex;
    align-items: center;
}

.shop-catnav__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 52px;
    font-size: 0.90625rem; /* 14.5 */
    font-weight: 500;
    line-height: 18px;
    letter-spacing: -0.145px;
    color: #45454d;
    text-decoration: none;
    white-space: nowrap;
}

/* Department header: a non-navigating <button> that reveals its panel on hover
   and on keyboard focus. Reset the button to match the sibling category links
   (font-size/weight/colour come from .shop-catnav__link on the same element). */
.shop-catnav__summary {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    cursor: pointer;
}

/* The open department reads as an active tab - brand colour + a flush underline
   sitting on the bar's bottom rule (box-shadow, so it adds no layout height).
   .is-open (set by the hover-intent JS) keeps it lit while the pointer has moved
   off the trigger and down into the panel. */
.shop-catnav__item:hover .shop-catnav__link,
.shop-catnav__item:focus-within .shop-catnav__link,
.shop-catnav__item.is-open .shop-catnav__link {
    color: var(--color-bg-brand);
    box-shadow: inset 0 -2px 0 var(--color-bg-brand);
}

.shop-catnav__caret {
    transition: transform 150ms ease;
}

.shop-catnav__item:hover .shop-catnav__caret,
.shop-catnav__item:focus-within .shop-catnav__caret,
.shop-catnav__item.is-open .shop-catnav__caret {
    transform: rotate(180deg);
}

/* Full-bleed mega panel (Coolblue-style): it spans the whole bar (left/right: 0
   against the position: relative .shop-catnav) and drops flush beneath the nav -
   no floating card, no side borders or radius, just the bar's own bottom rule and
   a soft downward shadow lifting it off the page. Columns are gutter-aligned
   (32px) to the bar via the panel's own padding; max-height is a safety net for
   extreme trees. It opens on :hover / :focus-within with no JS; with JS a small
   hover-intent script (app.js) drives the .is-open class instead, so the pointer
   can cross a wrapped 2nd nav row to reach it - see the display rules below. */
.shop-catnav__panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 40;
    display: none;
    width: auto;
    max-height: calc(100vh - 140px);
    padding: 28px 32px 36px;
    overflow-y: auto;
    background: var(--color-bg-surface);
    border: 0;
    border-bottom: 1px solid var(--color-border-default);
    box-shadow: 0 14px 16px -10px rgba(15, 13, 23, 0.14);
    /* Entrance: per spec, flipping display none->block restarts this, so it
       replays each time a department opens (both the JS and no-JS paths) -
       a quick fade + small drop from under the nav. */
    animation: shop-catnav-panel-in 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes shop-catnav-panel-in {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.shop-catnav__item:hover .shop-catnav__panel,
.shop-catnav__item:focus-within .shop-catnav__panel {
    display: block;
}

/* With JS, hover-intent owns open/close via .is-open (app.js): suppress the
   raw hover/focus open so the panel never flaps as the pointer sweeps over a
   wrapped 2nd row on its way down into the full-width panel. */
[data-js] .shop-catnav__item:hover .shop-catnav__panel,
[data-js] .shop-catnav__item:focus-within .shop-catnav__panel {
    display: none;
}

[data-js] .shop-catnav__item.is-open .shop-catnav__panel {
    display: block;
}

.shop-catnav__grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    gap: 30px 60px;
}

.shop-catnav__group {
    flex: 0 0 188px;
}

/* Column heads are the brand accent (Coolblue colours its column titles), with
   the leaves below in near-black so the hierarchy reads at a glance. */
.shop-catnav__sub {
    display: block;
    margin-bottom: 12px;
    font-size: var(--text-md);
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-text-brand);
    text-decoration: none;
}

.shop-catnav__sub:hover {
    color: var(--color-bg-brand-hover);
    text-decoration: underline;
}

/* Intermediate branch in a 3-level tree: a group label, not a link. */
.shop-catnav__sub--label {
    cursor: default;
}

.shop-catnav__sub--label:hover {
    color: var(--color-text-brand);
    text-decoration: none;
}

.shop-catnav__leaves {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.shop-catnav__leaves a {
    font-size: var(--text-base);
    line-height: 1.3;
    color: var(--color-text-primary);
    text-decoration: none;
}

.shop-catnav__leaves a:hover {
    color: var(--color-bg-brand);
    text-decoration: underline;
}

/* ============================================================ Footer */

.shop-footer {
    display: flex;
    flex-direction: column;
    gap: 36px;
    padding: 52px 64px 28px;
    /* same brand purple as the primary button (.ui-btn--primary) */
    background: var(--color-bg-brand);
}

.shop-footer__cols {
    display: flex;
    flex-wrap: wrap;
    gap: 64px;
    align-items: flex-start;
}

.shop-footer__brand {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 360px;
    max-width: 100%;
}

.shop-footer__logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.shop-footer__logo img {
    display: block;
    height: 30px;
    width: auto;
    /* purple wordmark -> white on the purple footer */
    filter: brightness(0) invert(1);
}

.shop-footer__tagline {
    margin: 0;
    font-size: var(--text-base);
    line-height: 21px;
    color: rgba(255, 255, 255, 0.8);
}

.shop-footer__contact {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 6px;
}

.shop-footer__contact a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-base);
    line-height: 18px;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
}

.shop-footer__contact a:hover {
    color: #ffffff;
}

.shop-footer__col {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.shop-footer__heading {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 16px;
    letter-spacing: 0.26px;
    color: #ffffff;
}

.shop-footer__col a,
.shop-footer__col span {
    font-size: var(--text-base);
    line-height: 20px;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
}

.shop-footer__col a:hover {
    color: #ffffff;
}

.shop-footer__divider {
    width: 100px;
    height: 1px;
    margin: 0;
    border: 0;
    background: rgba(255, 255, 255, 0.2);
}

.shop-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

.shop-footer__copyright {
    margin: 0;
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.6);
}

.shop-footer__credit {
    margin: 0 0 0 auto;
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.6);
}

.shop-footer__credit a {
    color: rgba(255, 255, 255, 0.82);
}

.shop-footer__credit a:hover {
    color: #ffffff;
}

/* ============================================================ Home merchandising (M13)
   NOTE: the hero is full-bleed and lives entirely in home.css (loaded last on
   the home page, so it is the single source of truth). Its rules were duplicated
   here and have been removed to avoid the two definitions fighting. The category
   cards and featured row below are likewise overridden by
   home.css on the home page; `.deal-label` (reused on listing pages) stays. */

.home-heading {
    margin: 8px 0 16px;
    font-size: var(--text-2xl);
    color: var(--color-text-primary);
}

.home-categories {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-categories a {
    display: block;
    padding: 16px 18px;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
    font-weight: 600;
    text-decoration: none;
}

.home-categories a:hover {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-sm);
}

.home-featured {
    margin-bottom: 28px;
}

.home-featured__row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Merchandising badge on a featured card (deal label). */
.deal-label {
    align-self: flex-start;
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--radius-full);
    font-size: var(--text-2xs);
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--color-text-on-brand);
    background: var(--color-bg-brand);
}

.deal-label--nieuw {
    background: var(--color-status-info-fg);
}

.deal-label--actie {
    background: var(--color-status-danger-solid);
}

/* ============================================================ Drawer (off-canvas)
   Shared chrome for the mobile menu and the listing filters. The container is
   fixed over the viewport with a dimming overlay and a panel that slides in
   from a side; hidden until JS adds .is-open, so no-JS keeps the inline nav.
   The listing filters reuse the overlay + keyframes but manage their own
   show/hide in catalog.css (the panel doubles as the desktop sidebar). */

.shop-drawer {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: none;
}

.shop-drawer.is-open {
    display: block;
}

.shop-drawer__overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: rgba(15, 13, 23, 0.5);
    cursor: pointer;
    animation: shop-drawer-fade 150ms ease;
}

.shop-drawer__panel {
    position: absolute;
    inset: 0 auto 0 0;
    display: flex;
    flex-direction: column;
    width: min(86vw, 340px);
    background: var(--color-bg-surface);
    box-shadow: var(--shadow-overlay);
    overflow-y: auto;
    animation: shop-drawer-slide-l 200ms ease;
}

.shop-drawer__panel--right {
    inset: 0 0 0 auto;
    animation: shop-drawer-slide-r 200ms ease;
}

@keyframes shop-drawer-fade {
    from { opacity: 0; }
}

@keyframes shop-drawer-slide-l {
    from { transform: translateX(-100%); }
}

@keyframes shop-drawer-slide-r {
    from { transform: translateX(100%); }
}

.shop-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 auto;
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 16px 18px;
    background: var(--color-bg-surface);
    border-bottom: 1px solid var(--color-border-default);
}

.shop-drawer__title {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-text-primary);
}

.shop-drawer__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.shop-drawer__close:hover {
    background: var(--color-bg-subtle);
    color: var(--color-text-primary);
}

/* Mobile menu body */
.shop-drawer__nav {
    display: flex;
    flex-direction: column;
    padding: 8px 0 24px;
}

.shop-drawer__link,
.shop-drawer__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 18px;
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--color-text-primary);
    text-decoration: none;
    cursor: pointer;
}

.shop-drawer__link:hover,
.shop-drawer__summary:hover {
    background: var(--color-bg-subtle);
}

.shop-drawer__summary {
    list-style: none;
}

.shop-drawer__summary::-webkit-details-marker {
    display: none;
}

.shop-drawer__caret {
    flex: 0 0 auto;
    color: var(--color-text-muted);
    transition: transform 150ms ease;
}

.shop-drawer__group[open] .shop-drawer__caret {
    transform: rotate(180deg);
}

.shop-drawer__sublist {
    display: flex;
    flex-direction: column;
    padding: 2px 0 10px;
    background: var(--color-bg-canvas);
}

.shop-drawer__sublist a {
    padding: 10px 18px 10px 34px;
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    text-decoration: none;
}

.shop-drawer__sublist a:hover {
    color: var(--color-text-brand);
}

.shop-drawer__sublabel {
    padding: 12px 18px 4px 34px;
    font-size: var(--text-2xs);
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

/* Hamburger trigger - only on small screens, only with JS (see media query). */
.shop-hamburger {
    display: none;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-primary);
    cursor: pointer;
}

.shop-hamburger:hover {
    background: var(--color-bg-subtle);
}

/* Lock the page behind an open drawer. */
body.is-drawer-open {
    overflow: hidden;
}

/* ============================================================ Responsive
   The shop frame (top bar, category nav, footer) is full-bleed around a centred
   `main` with 64px desktop gutters - far too wide for tablets/phones. These
   steps tighten the container, wrap the header onto multiple rows and, when JS
   is on, swap the horizontal category bar for the hamburger menu (with JS off
   the bar wraps as the fallback). */

@media (max-width: 900px) {
    /* With JS: the hamburger replaces the horizontal category bar. */
    [data-js] .shop-hamburger {
        display: inline-flex;
    }

    [data-js] .shop-catnav {
        display: none;
    }

    body[data-app='shop'] main {
        padding: 28px 32px;
    }

    .shop-topbar {
        gap: 18px;
        padding: 0 24px;
    }

    /* The category bar wraps to as many rows as it needs; the panel is already
       full-width from the base, so a wrapped row never clips it. Here it just
       grows with the page (no inner scroll) for the no-JS fallback. */
    .shop-catnav {
        height: auto;
        padding: 4px 24px;
    }

    .shop-catnav__list {
        flex-wrap: wrap;
        align-items: center;
        height: auto;
        gap: 2px 18px;
        padding: 6px 0;
    }

    .shop-catnav__link {
        height: 38px;
    }

    .shop-catnav__panel {
        max-height: none;
        overflow: visible;
    }

    .shop-footer {
        padding: 44px 32px 24px;
    }

    .shop-footer__cols {
        gap: 40px;
    }
}

@media (max-width: 720px) {
    /* Header reflows to tidy rows on phones:
         row 1  [☰] [logo] ........ [search] [flag] [account] [cart]
         row 2  [ search bar, full width - slides out when the toggle is tapped ]
       The two right-hand wrappers are flattened with `display: contents` so each
       control becomes a flex item of the bar in its own right - the search bar
       can then drop to its own full-width row while the toggle, flag and account
       icon stay snug on row 1. The "Account aanvragen" CTA is hidden here (still
       reachable from the login page and footer). Desktop is untouched. */
    .shop-topbar {
        flex-wrap: wrap;
        align-items: center;
        height: auto;
        padding: 12px 16px;
        gap: 12px 14px;
    }

    .shop-topbar__right,
    .shop-topbar__account {
        display: contents;
    }

    .shop-hamburger {
        order: 1;
    }

    .shop-topbar__logo {
        order: 2;
        margin-right: auto;
    }

    .shop-topbar__logo img {
        height: 30px;
    }

    /* With JS the search collapses to a magnifying-glass toggle on row 1; the bar
       slides out to its own row when tapped. Without JS the toggle stays hidden
       and the bar remains the full-width row below (the fallback). */
    [data-js] .shop-search-toggle {
        display: inline-flex;
        order: 3;
    }

    .shop-lang {
        order: 4;
    }

    /* The account icon: the dropdown trigger when logged in, the login link out. */
    .shop-acct,
    .shop-topbar__login {
        order: 5;
    }

    .shop-cart {
        order: 6;
    }

    .shop-search {
        order: 7;
        flex-basis: 100%;
    }

    /* With JS the bar is hidden until the toggle slides it out. */
    [data-js] .shop-search {
        display: none;
    }

    [data-js] .shop-search.is-open {
        display: flex;
        animation: shop-search-reveal 200ms ease;
    }

    /* The "Account aanvragen" CTA is dropped from the mobile header (still
       reachable from the login page and the footer). */
    .shop-topbar__account .ui-btn {
        display: none;
    }

    .shop-catnav {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Trim the action cluster so row 1 never overflows: drop the divider and
       collapse the login/account text labels to icons (kept for screen readers). */
    .shop-topbar__divider {
        display: none;
    }

    .shop-topbar__login span,
    .shop-acct__trigger > span {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}

@media (max-width: 600px) {
    body[data-app='shop'] main {
        padding: 20px 16px;
    }

    .shop-footer {
        padding: 36px 16px 24px;
    }
}

@media (max-width: 400px) {
    /* Reclaim space on the smallest phones: the flag alone carries the language,
       and the bar gaps tighten so row 1 stays a single line. */
    .shop-topbar {
        gap: 12px 10px;
    }

    .shop-lang__code {
        display: none;
    }
}