/* Yeni bir mağazanın ilk günü nasıl görünür.
   Bu dosya da temanın parçası: veritabanında durur, sürümlenir ve
   /_theme/<surum>/asset/assets/style.css adresinden servis edilir. */

:root {
    /* ⚠ **The store's roles, with this sheet's old names kept** (ADAY-B #6):
       every rule below still reads `--accent`, `--ink`, `--paper` and `--muted`,
       and each of them is now the store's own colour. The hex after the comma
       is what an unframed page with no tokens falls back to.

       ⚠ **And no dark variant any more**: a `prefers-color-scheme` block wrote
       its own three colours over the store's palette, so a merchant's choice
       was invisible to every visitor in dark mode. The packaged designs have
       none either. */
    --accent: var(--color-accent, #3b82f6);
    --ink: var(--color-text, #16181d);
    --paper: var(--color-bg, #ffffff);
    --muted: var(--color-muted, #6b7280);
    /* A hairline in the store's own text colour, not a black nobody chose. */
    --line: color-mix(in srgb, var(--ink) 12%, transparent);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font: 16px/1.65 ui-sans-serif, system-ui, "Segoe UI", sans-serif;
    color: var(--ink);
    background: var(--paper);
}

.preview-bar {
    margin: 0;
    padding: 10px 20px;
    text-align: center;
    font-size: 13px;
    /* The packaged designs' colours for the same strip: it is the store's
       own accent, not a yellow nobody chose. */
    background: var(--accent);
    color: var(--color-accent-contrast, #ffffff);
}

.site-header {
    padding: 56px 24px 8px;
    text-align: center;
}

.brand {
    font-size: 30px;
    font-weight: 650;
    letter-spacing: -.02em;
    color: inherit;
    text-decoration: none;
}

.tagline {
    margin: 6px 0 0;
    color: var(--muted);
}

.site-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 16px;
}

/* The top bar's box and Catalog's search page share one look: the field, then
   the button, on one line until the line runs out. */
.site-search,
.search-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.search-form { margin: 0 0 24px; max-width: 640px; }
.search-form__label { flex: 1 0 100%; color: var(--muted); }

.site-search input,
.search-form input {
    flex: 1 1 12em;
    min-height: 44px;
    padding: 8px 12px;
    font: inherit;
    color: inherit;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 8px;
}

/* Only the two search boxes: `.button` elsewhere is drawn by pages this
   slice does not touch. */
.site-search .button,
.search-form .button {
    padding: 8px 16px;
    font: inherit;
    font-weight: 600;
    color: var(--color-accent-contrast, #ffffff);
    background: var(--accent);
    border: 0;
    border-radius: 8px;
    cursor: pointer;
}

/* Read by a screen reader, drawn for nobody: the top bar's field says what it
   is in its placeholder. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.site-main {
    width: min(880px, 92vw);
    margin: 0 auto;
    padding: 40px 0 64px;
}

.hero h1 {
    margin: 0 0 12px;
    font-size: clamp(28px, 5vw, 42px);
    line-height: 1.15;
    letter-spacing: -.03em;
}

.hero p { margin: 0 0 8px; color: var(--muted); }

.cards {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin-top: 40px;
}

/* Scoped to the two grids this theme actually draws cards in (B78, ADR-0237).

   `.card` is a name the platform's own `feature_grid` and `testimonials`
   sections chose independently, and a bare `.card h2` here is (0,1,1) against
   the platform's `.h4` at (0,1,0) -- so these three rules were painting sections
   this theme never meant to style, in this file's own hand-written `--accent`
   and `--muted` rather than in the store's palette. Nothing under
   `resources/sections/` emits `.cards` or `.grid--3`, so naming them is what
   hands those sections back to the merchant's tokens.

   The two ancestors are what this theme's own templates put above a card:
   `.cards` on `home.twig` and `collection.twig`, `.grid--3` on `search.twig`.
   The price is that a merchant who writes a card of their own outside both
   grids gets no frame -- which is the cost B78 weighed and accepted. */
.cards .card,
.grid--3 .card {
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: 14px;
}

.cards .card h2,
.grid--3 .card h2 {
    margin: 0 0 6px;
    font-size: 15px;
    color: var(--accent);
}

.cards .card p,
.grid--3 .card p { margin: 0; font-size: 14px; color: var(--muted); }

.site-footer {
    padding: 24px;
    border-top: 1px solid var(--line);
    text-align: center;
    font-size: 13px;
    color: var(--muted);
}

.site-footer p { margin: 2px 0; }

/* `<picture>` is inline by default, which leaves a text baseline gap under every
   image and makes the element ignore the block layout its `<img>` is sitting in.
   Every picture on this storefront is wrapped in one now (F7D K4), so the wrapper
   has to behave like the image it wraps. */
/* And the image itself, for the same reason it is in Atlas: a picture wider
   than the screen makes the whole page scroll sideways, and a phone is where
   that happens. */
img { max-width: 100%; height: auto; }
picture { display: block; }
picture > img { max-width: 100%; height: auto; display: block; }

/* The keyboard's first stop, and invisible until it is reached. Off screen
   rather than `display: none`: a hidden element is not focusable at all, which
   would make this a link nobody can reach (F7D K8). */
.skip-link {
    position: absolute;
    left: 8px;
    top: 8px;
    z-index: 100;
    padding: .6em 1.2em;
    border-radius: var(--radius, 4px);
    background: var(--color-accent, #2563eb);
    color: var(--color-accent-contrast, #fff);
    text-decoration: none;
    transform: translateY(-200%);
}
.skip-link:focus { transform: translateY(0); }

/* Roughly a fingertip, on the things a finger actually aims at. Not on every
   link: a word inside a paragraph is not a target, and padding it to 44 pixels
   would tear the paragraph apart (WCAG 2.2, K8). */
.button, .top__nav a, .brand, .site-header a {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Not a preference about taste. Everything this stylesheet animates is switched
   off for a reader who asked. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Where the keyboard is. `:focus-visible` rather than `:focus` so a mouse click
   leaves no ring behind -- rings on every click are rings people learn to
   ignore. Drawn with an offset so it is never the same colour as what it
   surrounds (WCAG 1.4.11 asks 3:1). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--color-accent, #2563eb);
    outline-offset: 2px;
    border-radius: 2px;
}

/* What a reduced price looks like (F7E J4).

   Three parts, and none of them is a colour typed by hand: the badge takes the
   store's accent and the contrast colour that was measured against it (F7D K7),
   so a merchant who changes their palette gets a readable badge without anybody
   editing this file.

   The old price is struck through *and* says "was ..." in words. The line is
   for the eye; the words are for everything else, because a screen reader does
   not reliably announce `<s>` and two numbers side by side with nothing between
   them is a page that lies to a listener. */
.price__was { color: var(--color-muted); font-size: var(--text-small); margin-right: .4em; }
.price__now { font-weight: 650; }
.badge {
    display: inline-block;
    margin-left: .4em;
    padding: .1em .5em;
    border-radius: var(--radius);
    font-size: var(--text-small);
    font-weight: 650;
    /* Not a word wrapped away from its number. */
    white-space: nowrap;
}
.badge--sale { background: var(--color-accent); color: var(--color-accent-contrast); }

/* -- the filter panel (vitrin D3/E1) --------------------------------------- */

/* ⚠ **Structure only.** What the panel looks like is this theme's job and the
   §8.2 round's subject; what is here is the part without which the markup would
   be dishonest -- a listing that is one column on a phone and two on a desk, and
   a `<details>` that is a button on the small screen and a heading on the wide
   one. Mobile first, like every rule above it (T12).

   ⚠ **No colour and no font value**: both come from the store's design tokens,
   so a merchant's palette restyles the panel and a test can keep looking for the
   words that must not be here. ⚠ **And no font FAMILY either, not even a
 *** (sir deseni maskelendi)
   (`ThemeFontTest`), so a seventh would have meant editing a pinned number for
   a declaration the panel does not need -- the summary inherits the page's
   voice, which is the voice E1 drew it in. */

.listing { display: grid; gap: var(--space-normal); align-items: start; }

.filters {
    border: 1px solid var(--theme-line);
    border-radius: var(--radius);
    padding: var(--space-tight);
    background: var(--color-surface);
}

/* ⚠ **44 pixels, because on a phone this is the one thing a thumb aims at.**
   `display: flex` is what puts the count beside the word -- and it is also what
   takes the browser's triangle away, which is why one is drawn below. */
.filters > summary {
    display: flex;
    align-items: center;
    gap: var(--space-tight);
    min-height: 44px;
    cursor: pointer;
    font-size: var(--text-base);
    list-style: none;
}

.filters > summary::-webkit-details-marker { display: none; }

/* ⚠ **A marker drawn from borders, not written as a character** -- the lesson
   `sections/page.twig` already paid for: a glyph in `content:` is a word nobody
   can translate and a font nobody is promised (ADR-0234). Without it an open row
   and a plain heading look identical and nothing says this can be opened. */
.filters > summary::after {
    content: "";
    margin-inline-start: auto;
    width: .5em;
    height: .5em;
    border-inline-end: 2px solid currentColor;
    border-block-end: 2px solid currentColor;
    transform: rotate(45deg);
}

.filters[open] > summary::after { transform: rotate(-135deg); }

.filters__badge {
    min-width: 1.5em;
    padding: 0 .35em;
    border-radius: 999px;
    text-align: center;
    background: var(--color-accent);
    color: var(--color-accent-contrast);
    font-size: var(--text-small);
}

.filters__body { padding-block-start: var(--space-tight); }

.filters__clear { font-size: var(--text-small); }

.filters__group + .filters__group {
    margin-block-start: var(--space-tight);
    padding-block-start: var(--space-tight);
    border-block-start: 1px solid var(--theme-line);
}

.filters__group-title {
    margin: 0 0 var(--space-tight);
    font-size: var(--text-small);
    text-transform: uppercase;
}

.filters__options { margin: 0; padding: 0; list-style: none; }

/* 44 pixels again: these are the rows a thumb aims at. */
.filters__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-tight);
    min-height: 44px;
    text-decoration: none;
    color: inherit;
}

.filters__option--on { font-weight: 600; }

/* ⚠ **A mark, not only a weight.** A selected row whose only difference is how
   bold it is, is a selection nobody reading at a distance can see -- and the
   `aria-current` beside it is what a listener gets. */
.filters__option--on .filters__option-label::before {
    content: "";
    display: inline-block;
    width: .45em;
    height: .25em;
    margin-inline-end: .5em;
    border-inline-start: 2px solid currentColor;
    border-block-end: 2px solid currentColor;
    transform: rotate(-45deg);
}

.filters__count { color: var(--color-muted); font-size: var(--text-small); }

/* ⚠ **On a wide screen the panel is a box beside the list and the `<summary>`
   is its heading.** Two overrides rather than one, because browsers hide a
   closed `<details>`' body in two different ways: the old rule sets `display:
   none` on the children (an author rule beats the UA sheet whatever its
   specificity), and the current spec hides `::details-content` with
   `content-visibility`. ⚠ **Opening it with the `open` attribute instead was
   eliminated:** then the phone would start open, and E1 asks for a panel that
   starts closed there. */
@media (min-width: 60em) {
    .listing { grid-template-columns: 16rem 1fr; gap: var(--space-loose); }

    .filters > summary { cursor: default; }
    .filters > summary::after { display: none; }

    .filters > .filters__body { display: block; }

    .filters::details-content {
        content-visibility: visible;
        block-size: auto;
        overflow: visible;
    }
}

/* ⚠ **The one control in the panel that is a form**, and the only one a shopper
   has to confirm: two numbers have no moment at which they are finished. Laid out
   as a two column grid so the labels sit above their fields on a phone and the
   button spans both. */
.filters__price {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-tight);
    align-items: end;
}

.filters__price-label { font-size: var(--text-small); }

/* `min-width: 0` because a grid item's default `auto` lets a number field push
   the column wider than the panel and take a horizontal scrollbar with it. */
.filters__price-field {
    min-width: 0;
    width: 100%;
    min-height: 44px;
    padding: 0 .5em;
    border: 1px solid var(--theme-line);
    border-radius: var(--radius);
    background: var(--color-bg);
    color: inherit;
    font: inherit;
}

.filters__price-basis {
    grid-column: 1 / -1;
    color: var(--color-muted);
    font-size: var(--text-small);
}

.filters__price-apply {
    grid-column: 1 / -1;
    min-height: 44px;
    border: 0;
    border-radius: var(--radius);
    background: var(--color-accent);
    color: var(--color-accent-contrast);
    font: inherit;
    cursor: pointer;
}

/* ⚠ **The labels keep their own row and the fields theirs**, rather than each
   label sitting beside its field: *Van* and *Tot* are two words of different
   lengths, and a shared row would put the two boxes at two different widths. */
.filters__price-label:nth-of-type(2) { grid-column: 2; }

/* The order, and the filters a shopper has on (vitrin D3-3 / E1)
   ------------------------------------------------------------------------
   ⚠ **No colour and no font value here either**: both come from the store's
   design tokens, so a merchant's palette restyles both controls -- and Loft
   pins how many times `var(--theme-font, …)` appears in its sheet, so a
   declaration neither control needs would have meant editing a pinned number.

   ⚠ **The sort is a sibling of the panel, not a child of it**: a control inside
   the `<details>` is a control a phone hides behind the word *"Filters"*. On a
   phone it therefore sits directly under the panel's own button, and on a wide
   screen it moves to the top of the results column -- which is the heading row
   E1 drew it on. */

.filters__sort {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-tight);
}

.filters__sort-label { font-size: var(--text-small); }

/* `min-width: 0` and a flexible basis, because a `<select>` sized by its longest
   option is a control that pushes a phone sideways: *"Prijs: hoog naar laag"* is
   wider than the screen it has to fit on. */
.filters__sort-select {
    min-width: 0;
    flex: 1 1 8rem;
    min-height: 44px;
    padding: 0 .5em;
    border: 1px solid var(--theme-line);
    border-radius: var(--radius);
    background: var(--color-bg);
    color: inherit;
    font: inherit;
}

/* ⚠ **44 pixels, like the price form's button**: with no script at all this is
   what applies the order, so it is a thumb target rather than a hint. */
.filters__sort-apply {
    min-height: 44px;
    padding: 0 .9em;
    border: 0;
    border-radius: var(--radius);
    background: var(--color-accent);
    color: var(--color-accent-contrast);
    font: inherit;
    cursor: pointer;
}

/* ⚠ **A row that wraps, because the number of chips is the shopper's**: four
   categories and a range is five, and a row that scrolled sideways would hide
   the one a shopper is looking for. */
.filters__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-tight);
    margin: 0 0 var(--space-tight);
    padding: 0;
    list-style: none;
}

/* ⚠ **32 pixels and not 44.** These are not the panel: a chip is a shortcut
   beside the rows, and a row of 44 pixel pills on a phone is a second panel
   nobody asked for. The panel's own options stay the thumb targets. */
.filters__chip {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    min-height: 32px;
    padding: 0 .7em;
    border: 1px solid var(--theme-line);
    border-radius: 999px;
    font-size: var(--text-small);
}

.filters__chip-remove { color: var(--color-muted); }

/* ⚠ **The wide screen puts the order on the heading row** (E1), and it takes
   three lines rather than one because the listing is a two column grid: the
   panel keeps the left column over both rows, the order takes the top of the
   right one, and the rows follow underneath it.

   ⚠ **A second `@media` block rather than an edit to the one above**, so the
   panel's own disclosure rules and this placement stay readable apart -- and a
   merchant reading their copy sees one block per decision. */
@media (min-width: 60em) {
    .filters { grid-row: 1 / span 2; }

    .filters__sort {
        grid-column: 2;
        grid-row: 1;
        justify-content: flex-end;
    }

    .listing__results { grid-column: 2; grid-row: 2; }
}

/* ⚠ **`.pagination` BESIDE `.pager` and not instead of it** (vitrin D3-4b).
   ADR-1384 pinned `pagination` as the listing pager's permanent name and the
   listing templates write it now -- but ⚠ **`.pager` is also the product grid
   band's own nav** (`Catalog/resources/sections/product-grid.twig` writes
   `class="pager product-grid__pager"`), so a rename that *deleted* the rule
   above would have unstyled a control on the home page in order to restyle one
   on the listing. Two controls were sharing one class name; each has its own
   now, and the band's is untouched.

   ⚠ **It wraps, because the number of pages is the catalogue's.** The window's
   ceiling is eleven entries whatever the shop does (`PageWindow::AROUND`), and a
   row that scrolled sideways would hide the number a shopper is reaching for. */
.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4em;
    margin-top: var(--space-normal);
    font-size: var(--text-small);
}

/* ⚠ **44 pixels, like the panel's own controls and the price form's button**: a
   page number on a phone is a thumb target, and a bare digit is the smallest one
   a listing has. */
.pagination__step,
.pagination__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 .5em;
    border-radius: var(--radius);
}

/* ⚠ **Selected through the attribute rather than a second class** (vitrin
   D3-4b): the markup already carries `aria-current="page"` because E1 asks for
   it, and a `.pagination__current` beside it would be a second answer to one
   question -- the kind that goes out of step the day one of the two is
   forgotten. */
.pagination__number[aria-current="page"] {
    background: var(--color-accent);
    color: var(--color-accent-contrast);
}

/* The gap stands in for pages and leads nowhere, so it is not a target. */
.pagination__gap { padding: 0 .2em; color: var(--color-muted); }

/* The row count, under the heading (E1). ⚠ **Pulled up against the title**,
   because it is part of the heading rather than the first line of the listing. */
.listing__count { margin: calc(0px - var(--space-tight)) 0 var(--space-normal); font-size: var(--text-small); }

/* ==========================================================================
   Bookwinkel — ontwerp "Plank": bosgroen, leeslamp-geel, boeken op een plank.
   Staat bewust achteraan: alles hierboven blijft, dit overschrijft alleen.
   ========================================================================== */
:root {
    --bw-green: #123C33;
    --bw-green-2: #1F6F5C;
    --bw-lamp: #FFC83D;
    --bw-tint: #FFF4D6;
    --bw-zemin: #F4F6F3;
    --bw-line: #DDE3DF;
    --bw-grijs: #55635E;
    --bw-koraal: #C8402A;
    --bw-kop: "Bricolage Grotesque", "Avenir Next", "Segoe UI Variable Display", "Helvetica Neue", Arial, sans-serif;
    --bw-tekst: "Instrument Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --bw-kap: 1280px;
    --side: max(16px, calc((100vw - var(--bw-kap)) / 2));
    --bw-kaft: 3px 7px 7px 3px;
    --bw-i-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
    --bw-i-wereld: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.500 2.700 3.800 5.700 3.800 9s-1.300 6.300-3.800 9c-2.500-2.700-3.800-5.700-3.800-9S9.500 5.700 12 3z'/%3E%3C/svg%3E");
    --bw-i-neer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    --bw-i-boek: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 108 92'%3E%3Crect x='6' y='10' width='20' height='74' rx='4'/%3E%3Crect x='31' y='26' width='15' height='58' rx='4'/%3E%3Crect x='51' y='0' width='20' height='84' rx='4'/%3E%3Crect x='76' y='20' width='15' height='64' rx='4'/%3E%3Crect x='0' y='84' width='108' height='8' rx='4'/%3E%3C/svg%3E");
    --bw-i-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16'/%3E%3C/svg%3E");
}
html { overflow-x: clip; }
body { overflow-x: clip; background: var(--bw-zemin); color: var(--bw-green); font-family: var(--bw-tekst); -webkit-font-smoothing: antialiased; }
:is(h1, h2, h3, .h1, .h2, .h3) { font-family: var(--bw-kop); font-weight: 800; letter-spacing: -.02em; color: var(--bw-green); }
a { color: inherit; }
a:hover { color: var(--bw-green-2); }
:focus-visible { outline: 3px solid var(--bw-green-2); outline-offset: 2px; }

/* -- knoppen ---------------------------------------------------------------- */
:is(.btn, .button, .add-to-cart button, .filters__price-apply) { border-radius: 12px; font-weight: 600; }
.btn { min-height: 48px; padding: .6em 1.4em; }
.btn--solid, .add-to-cart button, .button { background: var(--bw-lamp); border-color: var(--bw-lamp); color: var(--bw-green); }
:is(.btn--solid, .add-to-cart button, .button):hover { background: #F2B91F; border-color: #F2B91F; color: var(--bw-green); }
.btn--outline { border-color: var(--bw-green); color: var(--bw-green); }

/* -- kop -------------------------------------------------------------------- */
header.page-band {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    column-gap: 24px;
    align-items: center;
    padding-inline: var(--side);
    background: var(--bw-green);
    color: #fff;
}
header.page-band a { color: #fff; }
#top-row { grid-column: 1; grid-row: 1; padding-block: 14px; background: none; color: #fff; }
#top-row .nav-bar__inner { flex-wrap: nowrap; gap: 16px 24px; }
#top-row .nav-bar__inner { background: none; }
#top-row .rich-nav__brand { order: 1; flex: none; color: #fff; font-family: var(--bw-kop); font-size: 26px; font-weight: 800; letter-spacing: -.03em; text-decoration: none; }
#top-row .rich-nav__brand img { height: 44px; width: auto; }
#top-row .rich-nav__level-1--start { order: 3; flex: none; gap: 0; }
#top-row .rich-nav__level-1--end { display: none; }
#top-row .rich-nav__item > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 10px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 10px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .02em;
    text-decoration: none;
}
#top-row .rich-nav__item > a::before {
    content: "";
    width: 18px;
    height: 18px;
    background-color: currentColor;
    -webkit-mask: var(--bw-i-wereld) center / contain no-repeat;
            mask: var(--bw-i-wereld) center / contain no-repeat;
}
#top-row .rich-nav__item > a::after {
    content: "";
    width: 12px;
    height: 12px;
    background-color: currentColor;
    -webkit-mask: var(--bw-i-neer) center / contain no-repeat;
            mask: var(--bw-i-neer) center / contain no-repeat;
}
#top-row .rich-nav__item:hover > a,
#top-row .rich-nav__item:focus-within > a { border-color: var(--bw-lamp); color: var(--bw-lamp); }
#top-row .rich-nav__panel {
    inset-inline: auto 0;
    top: 100%;
    z-index: 60;
    min-width: 168px;
    width: auto;
    margin-top: 6px;
    padding: 6px;
    border: 0;
    border-radius: 12px;
    background: #fff;
    color: var(--bw-green);
    box-shadow: 0 16px 32px rgba(18, 60, 51, .24);
}
#top-row .rich-nav__panel::before { content: ""; position: absolute; inset: -8px 0 auto; height: 8px; }
#top-row .rich-nav__level-2 { display: block; columns: auto; }
#top-row .rich-nav__level-2 > li > a { display: flex; min-height: 40px; align-items: center; padding: 0 12px; border-radius: 8px; color: var(--bw-green); font-size: 15px; font-weight: 500; text-decoration: none; }
#top-row .rich-nav__level-2 > li > a:hover { background: var(--bw-tint); color: var(--bw-green); }
#top-row .rich-nav__search-label { display: none; }
#top-row .rich-nav__search :is(form, label) { flex: 1 1 auto; min-width: 0; }
#top-row .rich-nav__search { position: relative; order: 2; flex: 1 1 auto; max-width: none; display: flex; flex-wrap: nowrap; }
#top-row .rich-nav__search input {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
    min-width: 0;
    min-height: 48px;
    padding: 0 104px 0 16px;
    border: 0;
    border-radius: 12px;
    background: #fff;
    color: var(--bw-green);
    font: inherit;
    font-size: 16px;
}
#top-row .rich-nav__search button {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    min-height: 48px;
    padding: 0 20px;
    border: 0;
    border-radius: 0 12px 12px 0;
    background: var(--bw-lamp);
    color: var(--bw-green);
    font: inherit;
    font-weight: 600;
}
#top-row .rich-nav__search button:hover { background: #F2B91F; }
#top-row .rich-nav__search button::before { display: none; }
#account { grid-column: 2; grid-row: 1; margin: 0; padding: 0; }
#account .nav-bar__account { flex-direction: row; gap: 8px; padding: 0; font-size: 15px; font-weight: 600; color: #fff; }
#basket { grid-column: 3; grid-row: 1; padding: 0; color: #fff; }
#basket .nav-bar__basket { gap: 8px; min-height: 44px; padding: 0; border: 0; border-radius: 0; background: none; color: #fff; font-size: 15px; font-weight: 600; }
#basket .nav-bar__basket::after { content: attr(aria-label); }
#basket .nav-bar__basket:hover { background: none; color: var(--bw-lamp); }
#basket .nav-bar__basket-count { inset-inline-start: 12px; top: 2px; background: var(--bw-lamp); color: var(--bw-green); }

#category-bar {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-inline: calc(0px - var(--side));
    padding: 0 var(--side);
    background: var(--bw-green);
    color: #fff;
}
#category-bar .section__inner { position: relative; max-width: none; background: none; color: inherit; }
#category-bar .mega-nav__level-1 { flex-wrap: nowrap; gap: 4px 20px; align-items: center; overflow: visible; }
#category-bar .mega-nav__top {
    gap: 6px;
    min-height: 44px;
    padding: 0 12px;
    border-radius: 10px 10px 0 0;
    background: none;
    color: inherit;
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
}
#category-bar .mega-nav__top::before { display: none; }
#category-bar .mega-nav__disclosure > summary::after { display: none; }
#category-bar .mega-nav__top:hover,
#category-bar .mega-nav__item:focus-within .mega-nav__top,
#category-bar .mega-nav__disclosure[open] > .mega-nav__top { background: var(--bw-lamp); color: var(--bw-green); text-decoration: none; }

/* -- megamenu: geel lipje, witte kaart, een echte plank met kaften ----------- */
@media (min-width: 700px) {
    #category-bar .mega-nav__panel {
        display: flex;
        flex-direction: column;
        gap: 20px;
        inset-inline: 0;
        max-height: min(600px, calc(100vh - 140px));
        padding: 28px 32px;
        overflow-y: auto;
        border: 0;
        border-top: 6px solid var(--bw-lamp);
        border-radius: 0 0 18px 18px;
        background: #fff;
        color: var(--bw-green);
        box-shadow: 0 24px 48px rgba(18, 60, 51, .22);
    }
    #category-bar .mega-nav__panel a { color: var(--bw-green); text-decoration: none; }
    #category-bar .mega-nav__all { order: 2; align-self: flex-start; margin: 0; padding: 11px 16px; border-radius: 10px; background: var(--bw-lamp); font-weight: 600; }
    #category-bar .mega-nav__all:hover { background: #F2B91F; }
    #category-bar .mega-nav__columns { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 24px 20px; max-width: none; margin: 0; padding: 0; list-style: none; }
    #category-bar .mega-nav__column { min-width: 0; }
    #category-bar .mega-nav__column .mega-nav__column-head {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 8px;
        width: 100%;
        min-height: 0;
        padding: 0;
        border-radius: 0;
        background: none;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.3;
        text-align: left;
    }
    #category-bar .mega-nav__column .mega-nav__column-head::before { display: none; }
    #category-bar .mega-nav__column .mega-nav__column-head picture { display: block; order: -2; margin: 0 !important; line-height: 0; }
    #category-bar .mega-nav__column .mega-nav__column-head :is(img, .mega-nav__thumb) {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 2 / 3;
        margin: 0 !important;
        object-fit: cover;
        border-radius: var(--bw-kaft);
        background: #E7ECE9;
        box-shadow: 0 8px 12px -8px rgba(18, 60, 51, .45);
        transition: transform .15s ease;
    }
    #category-bar .mega-nav__column .mega-nav__column-head:hover :is(img, .mega-nav__thumb) { transform: translateY(-4px); }
    #category-bar .mega-nav__column .mega-nav__column-head::after {
        content: "";
        display: block;
        position: static;
        order: -1;
        width: auto;
        height: 5px;
        margin: -8px -10px 0;
        border: 0;
        border-radius: 3px;
        background: var(--bw-green);
        transform: none;
    }
}

/* -- home: held met boekruggen op de plank ---------------------------------- */
main:has(.bw-hero) { width: auto; max-width: none; margin: 0; padding: 0; }
.bw-hero { background: var(--bw-green); color: #fff; }
.bw-hero__kap { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-end; width: min(var(--bw-kap), calc(100% - 32px)); margin-inline: auto; padding-top: 56px; }
.bw-hero__tekst { flex: 1 1 420px; min-width: 0; padding-bottom: 56px; }
.bw-hero h1 { margin: 0; color: #fff; font-size: clamp(44px, 6vw, 76px); line-height: .98; letter-spacing: -.03em; }
.bw-hero p { max-width: 42ch; margin: 20px 0 28px; color: #fff; font-size: 19px; }
.bw-knop { display: inline-block; padding: 15px 24px; border-radius: 12px; background: var(--bw-lamp); color: var(--bw-green); font-weight: 600; text-decoration: none; }
a.bw-knop:hover { background: #F2B91F; color: var(--bw-green); }
.bw-ruggen { flex: 1 1 520px; min-width: 0; }
.bw-ruggen__rij { display: flex; align-items: flex-end; gap: 10px; padding: 0 16px; }
.bw-rug { flex: 1 1 0; min-width: 0; height: var(--h, 280px); display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 6px 6px 0 0; background: var(--r, #FFC83D); color: var(--i, #123C33); font-family: var(--bw-kop); font-size: 19px; font-weight: 800; white-space: nowrap; writing-mode: vertical-rl; }
.bw-rug:nth-child(1) { --h: 300px; --r: #FFC83D; --i: #123C33; }
.bw-rug:nth-child(2) { --h: 240px; --r: #FFFFFF; --i: #123C33; }
.bw-rug:nth-child(3) { --h: 330px; --r: #C8402A; --i: #FFFFFF; }
.bw-rug:nth-child(4) { --h: 260px; --r: #2A4B7C; --i: #FFFFFF; }
.bw-rug:nth-child(5) { --h: 310px; --r: #0E6E6E; --i: #FFFFFF; }
.bw-rug:nth-child(6) { --h: 230px; --r: #F2E3C6; --i: #123C33; }
.bw-rug:nth-child(7) { --h: 290px; --r: #9B2C5A; --i: #FFFFFF; }
.bw-rug:nth-child(8) { --h: 340px; --r: #6B3FA0; --i: #FFFFFF; }
.bw-rug:nth-child(9) { --h: 280px; --r: #FFC83D; --i: #123C33; transform: rotate(-7deg); transform-origin: bottom right; }
.bw-ruggen__plank { height: 12px; border-radius: 6px 6px 0 0; background: var(--bw-lamp); }

.bw-usp { background: var(--bw-lamp); color: var(--bw-green); }
.bw-usp ul { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px; width: min(var(--bw-kap), calc(100% - 32px)); margin: 0 auto; padding: 14px 0; list-style: none; font-size: 15px; font-weight: 600; }

/* -- planken: kaften op een groene plank ------------------------------------ */
.bw-plank, .bw-onderwerpen { width: min(var(--bw-kap), calc(100% - 32px)); margin-inline: auto; padding-top: 56px; }
.bw-onderwerpen { padding-bottom: 64px; }
.bw-kop { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; margin-bottom: 24px; }
.bw-kop h2, .bw-onderwerpen h2 { margin: 0; font-size: clamp(28px, 3vw, 38px); }
.bw-onderwerpen h2 { margin-bottom: 24px; }
.bw-kop a { font-weight: 600; }
.bw-rij { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.bw-boek { display: flex; flex-direction: column; gap: 10px; color: var(--bw-green); text-decoration: none; }
.bw-boek :is(picture, img) { display: block; width: 100%; }
.bw-boek img { aspect-ratio: 2 / 3; height: auto; object-fit: cover; border-radius: var(--bw-kaft); box-shadow: 0 8px 14px -8px rgba(18, 60, 51, .45); transition: transform .15s ease; }
.bw-boek:hover img { transform: translateY(-4px); }
.bw-boek::after { content: ""; order: 1; height: 6px; margin: -10px -12px 0; border-radius: 3px; background: var(--bw-green); }
.bw-boek span { order: 2; margin-top: 2px; font-size: 15px; font-weight: 600; line-height: 1.3; }
.bw-chips { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; }
.bw-chips a { display: block; padding: 12px 20px; border-radius: 999px; background: #fff; color: var(--bw-green); font-weight: 600; text-decoration: none; }
.bw-chips a:hover { background: var(--bw-lamp); }

/* -- productkaart ----------------------------------------------------------- */
.product-card, .card--product, .cards .card { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.cards .card a { color: var(--bw-green); }
.cards .card h2 { color: var(--bw-green); font-size: 15px; }
:is(.product-card__link, .card--product > a) { display: flex; flex-direction: column; gap: 8px; color: inherit; text-decoration: none; }
:is(.card--product img, .card--product .card__shade, .product-card img, .product-card__media) {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 3;
    height: auto;
    padding: 0;
    object-fit: cover;
    border-radius: var(--bw-kaft);
    background: #E7ECE9 !important;
}
:is(.product-card__link, .card--product > a)::after { content: ""; order: 1; height: 6px; margin: -8px -12px 0; border-radius: 3px; background: var(--bw-green); }
:is(.product-card__name, .card--product h2) { order: 2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 2px 0 0; color: var(--bw-green); font-family: var(--bw-tekst); font-size: 15px; font-weight: 600; letter-spacing: 0; line-height: 1.3; }
:is(.product-card__price, .card--product .price, .card--product .price__now) { margin: 4px 0 0; color: var(--bw-green); font-family: var(--bw-kop); font-size: 19px; font-weight: 800; }

/* -- categorie: groene kop met gele plank, filters in witte kaart ----------- */
main:has(.listing) { width: min(var(--bw-kap), calc(100% - 32px)); max-width: none; margin-inline: auto; padding: 0 0 64px; }
main:has(.listing) > :is(.breadcrumb, h1, .listing__count, .filters__subcats),
main:has(.listing) > .band { position: relative; }
main:has(.listing) > :is(.breadcrumb, h1, .listing__count) {
    margin: 0;
    background: var(--bw-green);
    box-shadow: 0 0 0 100vmax var(--bw-green);
    clip-path: inset(-1px -100vmax);
    color: #fff;
}
main:has(.listing) > .breadcrumb { padding-top: 20px; font-size: 14px; }
main:has(.listing) > .breadcrumb :is(a, span) { color: #fff; }
main:has(.listing) > h1 { padding-top: 10px; font-size: clamp(36px, 5vw, 60px); line-height: 1; letter-spacing: -.03em; }
main:has(.listing) > .listing__count { padding: 8px 0 28px; font-size: 15px; color: #fff; }
main:has(.listing) > .listing__count::after { content: ""; position: absolute; inset: auto -100vmax 0; height: 0; }
main:has(.listing) > .filters__subcats { margin: 0; padding-top: 20px; }
.filters__subcat-list { display: flex; flex-wrap: nowrap; gap: 8px; margin: 0; padding: 2px 0 6px; overflow-x: auto; list-style: none; scrollbar-width: none; }
.filters__subcat-list::-webkit-scrollbar { display: none; }
.filters__subcat-list li { flex: none; }
a.filters__subcat { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; background: #fff; color: var(--bw-green); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
a.filters__subcat:hover { background: var(--bw-lamp); }
a.filters__subcat--on { background: var(--bw-green); color: #fff; }
a.filters__subcat .filters__count { padding: 0; background: none; color: inherit; opacity: .7; font-size: 12px; }
.listing__results .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 32px 24px; }
.filters__sort-apply { display: none; }
.filters__sort-select { min-height: 44px; border: 1px solid var(--bw-line); border-radius: 10px; background-color: #fff; font: inherit; }
.filters__option { color: var(--bw-green); text-decoration: none; }
.filters__option--on { font-weight: 600; }
.filters__group-title { font-family: var(--bw-tekst); font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.filters__title { font-family: var(--bw-kop); font-size: 22px; font-weight: 800; }
.filters__price-field { min-height: 44px; border: 1px solid var(--bw-line); border-radius: 10px; background: #fff; }
.pagination__number, .pagination__step { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border-radius: 10px; background: #fff; color: var(--bw-green); text-decoration: none; }
.pagination__number[aria-current="page"] { background: var(--bw-green); color: #fff; }
@media (min-width: 60em) {
    .listing { display: grid; grid-template-columns: 272px minmax(0, 1fr); grid-template-rows: auto auto 1fr; gap: 0 32px; padding-top: 24px; }
    .listing > .filters { grid-column: 1; grid-row: 1 / span 3; align-self: start; padding: 20px; border: 0; border-radius: 16px; background: #fff; }
    .listing > .filters > summary { pointer-events: none; }
    .listing > .filters > summary::after { display: none; }
    .listing > .filters::details-content { content-visibility: visible; display: block; }
    .listing > .filters__chips { grid-column: 2; grid-row: 1; margin: 0 0 8px; }
    .listing > .filters__sort { grid-column: 2; grid-row: 2; justify-self: end; margin: 0 0 16px; }
    .listing > .listing__results { grid-column: 2; grid-row: 3; }
}

/* -- zoeken ------------------------------------------------------------------ */
main:has(.search-form) .band { background: none; }
.search-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 20px; }
.search-form__label { flex: 0 0 100%; color: var(--bw-grijs); font-size: 14px; }
.search-form input { flex: 1 1 280px; min-height: 48px; padding: 0 14px; border: 1px solid var(--bw-line); border-radius: 12px; background: #fff; font: inherit; font-size: 16px; }
.search-form .button { min-height: 48px; padding: 0 24px; border: 0; }

/* -- product: kaft op plank, witte koopkaart --------------------------------- */
main:has(> .product) { width: min(var(--bw-kap), calc(100% - 32px)); max-width: none; margin-inline: auto; padding: 24px 0 64px; }
main:has(> .product) > .breadcrumb { font-size: 14px; color: var(--bw-grijs); }
.product { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 48px; align-items: start; margin-top: 20px; }
.product:not(:has(.product-images)) { grid-template-columns: minmax(0, 1fr); }
.product-images { min-width: 0; }
.product-images :is(picture, img) { display: block; width: 100%; height: auto; border-radius: 4px 10px 10px 4px; }
.product-images::after { content: ""; display: block; height: 10px; margin: 0 -14px; border-radius: 5px; background: var(--bw-green); }
.product-detail { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.product-detail h1 { order: 1; margin: 0 0 18px; font-size: clamp(34px, 4.4vw, 60px); line-height: 1; letter-spacing: -.03em; }
.product-detail > .price { order: 2; margin: 0; padding: 22px 22px 6px; border-radius: 16px 16px 0 0; background: #fff; }
.product-detail > .price .price__now { color: var(--bw-green); font-family: var(--bw-kop); font-size: 40px; font-weight: 800; }
.product-detail > .stock { order: 3; margin: 0; padding: 0 22px 12px; background: #fff; color: var(--bw-green-2); font-weight: 600; }
.product-detail > .stock.out { color: var(--bw-koraal); }
.product-detail > .add-to-cart { order: 5; display: flex; gap: 12px; margin: 0; padding: 4px 22px 22px; border-radius: 0 0 16px 16px; background: #fff; }
.add-to-cart input[type="number"] { width: 84px; min-height: 54px; border: 1px solid var(--bw-line); border-radius: 12px; text-align: center; font: inherit; font-size: 16px; }
.add-to-cart button { flex: 1 1 auto; min-height: 54px; border: 0; font-size: 17px; }
.product-detail > .sku { order: 6; margin: 14px 0 0; color: var(--bw-grijs); font-size: 14px; }
.product-detail > .product-description { order: 7; margin: 28px 0 0; font-size: 17px; line-height: 1.6; white-space: pre-line; }
.product-detail > .product-description::before { content: "Over dit boek"; display: block; margin-bottom: 10px; font-family: var(--bw-kop); font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
html:lang(en) .product-detail > .product-description::before { content: "About this book"; }
html:lang(fr) .product-detail > .product-description::before { content: "À propos de ce livre"; }
html:lang(de) .product-detail > .product-description::before { content: "Über dieses Buch"; }
.product-detail > .product-categories { order: 9; display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; padding: 0; list-style: none; }
.product-categories a { display: inline-block; padding: 8px 14px; border-radius: 999px; background: #fff; font-size: 14px; font-weight: 600; text-decoration: none; }
.product-detail > :is(.specs, .product-specs, .product-attributes, [class*="specificat"]) { order: 8; margin: 28px 0 0; padding: 22px; border-radius: 16px; background: #fff; }
:is(.specs, .product-specs, .product-attributes, [class*="specificat"]) :is(dl, table) { width: 100%; margin: 0; border-collapse: collapse; }
:is(.specs, .product-specs, .product-attributes, [class*="specificat"]) :is(tr, dl > div) { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--bw-line); }
:is(.specs, .product-specs, .product-attributes, [class*="specificat"]) :is(dt, th) { color: var(--bw-grijs); font-weight: 400; text-align: left; }
:is(.specs, .product-specs, .product-attributes, [class*="specificat"]) :is(dd, td) { margin: 0; font-weight: 600; text-align: right; }

/* -- winkelmand en afrekenen ------------------------------------------------- */
:is(main:has(.cart-lines), main:has(.cart-empty), main:has(.checkout), main:has([class^="checkout__"])) { width: min(var(--bw-kap), calc(100% - 32px)); max-width: none; margin-inline: auto; padding: 28px 0 64px; }
main:has(.cart-empty) h1, main:has(.cart-lines) h1 { font-size: clamp(36px, 5vw, 48px); letter-spacing: -.03em; }
.cart-layout { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.cart-lines-box { flex: 999 1 560px; min-width: 0; }
.cart-summary { flex: 1 1 320px; max-width: 380px; padding: 22px; border-radius: 16px; background: #fff; position: sticky; top: 16px; }
.cart-item { padding: 16px; border-radius: 16px; background: #fff; }
.cart-item__thumb :is(img, picture) { display: block; width: 92px; height: auto; border-radius: var(--bw-kaft); }
.cart-item__name { font-weight: 600; font-size: 18px; text-decoration: none; }
.cart-line-total { font-family: var(--bw-kop); font-size: 22px; font-weight: 800; white-space: nowrap; }
.cart-totals .total { font-weight: 600; }
.checkout__summary { padding: 22px; border-radius: 16px; background: #fff; }
.checkout__submit { min-height: 56px; border: 0; border-radius: 12px; background: var(--bw-lamp); color: var(--bw-green); font-weight: 600; font-size: 17px; }
.checkout__submit:hover { background: #F2B91F; }
.checkout__delivery { padding: 12px; border-radius: 12px; background: #EEF3F0; font-size: 14px; line-height: 1.45; }
input:is([type="text"], [type="email"], [type="tel"], [type="password"]), select, textarea { border-radius: 10px; }

/* -- tekstpagina's ------------------------------------------------------------ */
:is(#info-tekst) { padding-bottom: 64px; }
#info-kop { margin: 0; padding: 36px var(--side) 28px; background: var(--bw-green); color: #fff; }
#info-kop .section__inner { max-width: none; padding: 0; }
#info-kop :is(h1, h2, .h1, .h2) { margin: 0; color: #fff; font-size: clamp(36px, 5vw, 60px); line-height: 1; letter-spacing: -.03em; }
#info-kop :is(p, .prose) { margin: 12px 0 0; color: #fff; font-size: 18px; }
#info-tekst { margin-inline: auto; width: min(820px, calc(100% - 32px)); max-width: none; }
#info-tekst .section__inner { max-width: none; padding: 32px 0 0; }
#info-tekst :is(h2, .h2) { margin: 28px 0 8px; font-size: 26px; }
#info-tekst a { color: var(--bw-green-2); }

/* -- voet --------------------------------------------------------------------- */
footer.page-band { padding: 48px var(--side) 28px; border-top: 8px solid var(--bw-lamp); background: var(--bw-green); color: #fff; text-align: left; }
footer.page-band :is(p, li, h2, h3, h4, .h2, .h3, .h4, .prose) { color: #fff; opacity: 1; }
footer.page-band a { color: #fff; text-decoration: none; }
footer.page-band a:hover { color: var(--bw-lamp); text-decoration: underline; }
footer.page-band .section__inner { max-width: none; padding: 0; background: none; }
:is(footer, div, section):has(> #bw-voet-merk):has(> #bw-voet-service) { display: grid; grid-template-columns: 1.7fr 1fr 1fr .8fr; gap: 32px 56px; align-items: start; }
:is(#bw-voet-merk, #bw-voet-service, #bw-voet-juridisch, #bw-voet-talen) { margin: 0; padding: 0; background: none; }
:is(#bw-voet-service, #bw-voet-juridisch, #bw-voet-talen) :is(h2, h3, h4, .h2, .h3, .h4) { margin: 0 0 12px; font-family: var(--bw-kop); font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
:is(#bw-voet-service, #bw-voet-juridisch, #bw-voet-talen) p { margin: 0; font-size: 15px; line-height: 1.9; }
#bw-voet-merk :is(h2, .h2, .h4) { margin: 0 0 10px; font-family: var(--bw-kop); font-size: 26px; font-weight: 800; letter-spacing: -.03em; }
#bw-voet-merk img { display: block; height: 42px; width: auto; margin-bottom: 14px; }
#bw-voet-merk p { max-width: 38ch; margin: 0 0 12px; font-size: 15px; line-height: 1.55; }
#bw-voet-merk p + p { font-size: 14px; }
footer.page-band .section--legal { grid-column: 1 / span 2; align-self: center; margin-top: 12px; padding: 16px 0 0; border-top: 1px solid rgba(255, 255, 255, .2); background: none; font-size: 14px; }
footer.page-band .section--legal .page-legal { margin: 0; }
footer.page-band .ermecms-consent-prefs { grid-column: 3 / -1; align-self: center; justify-self: stretch; margin: 12px 0 0 !important; padding: 16px 0 0 !important; border-top: 1px solid rgba(255, 255, 255, .2); background: none !important; text-align: right; }
footer.page-band .ermecms-consent-open { min-height: 0; padding: 0; border: 0; background: none !important; color: #fff !important; font-size: 14px; }
footer.page-band .ermecms-consent-open:hover { color: var(--bw-lamp) !important; }

/* -- smal ---------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .bw-rij { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
    .product { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .product-images { max-width: 300px; }
    .bw-hero__kap { gap: 8px; padding-top: 36px; }
    .bw-hero__tekst { padding-bottom: 20px; }
    .bw-rug { font-size: 14px; }
    .bw-rug:nth-child(n) { height: calc(var(--h) * .62); }
}
@media (max-width: 699px) {
    header.page-band { padding-inline: 16px; grid-template-columns: minmax(0, 1fr) auto; }
    #top-row { grid-column: 1 / -1; grid-row: 1; }
    #top-row .rich-nav__narrow { display: none !important; }
        #top-row .rich-nav__brand { padding-inline-end: 56px; }
    #top-row .rich-nav__brand img { height: 36px; }
    #top-row .nav-bar__inner { flex-wrap: wrap; }
    #top-row .rich-nav__search { flex: 1 1 100%; order: 3; }
    #basket { position: absolute; top: 12px; right: 12px; }
    #basket .nav-bar__basket::after { display: none; }
    #account { display: none; }
    header.page-band #category-bar { display: block !important; margin-inline: -16px; padding: 0 16px; }
    #category-bar .mega-nav__tree { padding-inline: 0; }
    #category-bar .mega-nav__level-1 { display: flex; flex-wrap: nowrap; gap: 4px; overflow-x: auto; scrollbar-width: none; }
    #category-bar .mega-nav__level-1::-webkit-scrollbar { display: none; }
    #category-bar .mega-nav__item { flex: none; }
    #category-bar .mega-nav__top { padding: 0 10px; font-size: 14px; }
    #category-bar .mega-nav__disclosure[open] > summary { position: fixed; inset: 0 0 auto; z-index: 81; min-height: 56px; padding: 0 16px; border-radius: 0; background: var(--bw-green); color: #fff; }
    #category-bar .mega-nav__disclosure[open] > summary::after {
        content: "×";
        display: block;
        position: absolute;
        right: 16px;
        top: 10px;
        width: auto;
        height: auto;
        margin: 0;
        border: 0;
        transform: none;
        color: var(--bw-green);
        font-size: 28px;
        font-weight: 400;
        line-height: 1.2;
    }
    #category-bar .mega-nav__panel { position: fixed; inset: 56px 0 0; z-index: 80; padding: 0 0 80px; overflow-y: auto; background: #fff; color: var(--bw-green); }
    #category-bar .mega-nav__panel a { color: var(--bw-green); }
    #category-bar .mega-nav__all { display: none; }
    #category-bar .mega-nav__column .mega-nav__column-head { display: flex; align-items: center; flex-direction: row; justify-content: flex-start; gap: 0; width: 100%; min-height: 48px; padding: 0 16px; border-bottom: 1px solid var(--bw-line); border-radius: 0; background: none; font-size: 15px; font-weight: 500; }
    #category-bar .mega-nav__column .mega-nav__column-head::before,
    #category-bar .mega-nav__column .mega-nav__column-head::after { display: none; }
    #category-bar .mega-nav__column .mega-nav__column-head :is(picture, img) { display: none; }
    .bw-rij { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; }
    .bw-usp ul { flex-direction: column; gap: 4px; }
    .bw-ruggen__rij { gap: 6px; padding: 0 8px; }
    .listing__results .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
    :is(footer, div, section):has(> #bw-voet-merk):has(> #bw-voet-service) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 20px; }
    #bw-voet-merk { grid-column: 1 / -1; }
    footer.page-band .section--legal { grid-column: 1 / -1; padding-top: 14px; }
    footer.page-band .ermecms-consent-prefs { grid-column: 1 / -1; margin-top: 0 !important; padding-top: 0 !important; border-top: 0; text-align: left; }
    .cart-summary { max-width: none; position: static; }
}

/* -- uitklapmenu's in de groene kop: eigen kleur, anders wit op wit ----------- */
header.page-band :is(.account-menu__list, .search-suggest) { color: var(--bw-green); }
header.page-band .account-menu__list { min-width: 210px; padding: 6px; border: 0; border-radius: 12px; background: #fff; box-shadow: 0 16px 32px rgba(18, 60, 51, .24); }
header.page-band :is(.account-menu__link, .account-menu__button, .account-menu__list a) { display: flex; align-items: center; width: 100%; min-height: 40px; padding: 0 12px; border: 0; border-radius: 8px; background: none; color: var(--bw-green); font: inherit; font-size: 15px; font-weight: 500; text-align: left; text-decoration: none; cursor: pointer; }
header.page-band :is(.account-menu__link, .account-menu__button, .account-menu__list a):hover { background: var(--bw-tint); color: var(--bw-green); }
header.page-band .search-suggest a { color: var(--bw-green); }
header.page-band .search-suggest a:hover { color: var(--bw-green-2); }

/* -- leesbare links: geel is een knopkleur, geen tekstkleur op wit --------------- */
main :is(.card, .card--product, .product-card) a,
main :is(.card, .card--product, .product-card) :is(h2, h3) { color: var(--bw-green); }
.checkout__line-link, .account a, .checkout__back a, .withdraw a, .prose a { color: var(--bw-green); }
:is(.listing__more-link, a.button) { text-decoration: none; }
.listing__results a.listing__more-link { display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px; border-radius: 12px; background: var(--bw-lamp); color: var(--bw-green); font-weight: 600; }
.listing__results a.listing__more-link:hover { background: #F2B91F; color: var(--bw-green); }
.listing__shown { color: var(--bw-grijs); }
.listing__more { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 36px; }

/* -- zoekresultaten delen de kaart met de categorie --------------------------- */
.listing__results :is(.grid, .cards) { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 32px 24px; }
.listing__results .card { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.listing__results .card h2 { font-size: 15px; }
main:has(.search-form) .wrap { width: min(var(--bw-kap), calc(100% - 32px)); max-width: none; margin-inline: auto; padding: 24px 0 64px; }
main:has(.search-form) h1 { font-size: clamp(36px, 5vw, 48px); letter-spacing: -.03em; }

/* -- geen kaft: een rustig leeg boek, geen grijs vlak ---------------------------- */
.card__shade { position: relative; display: block; }
.card__shade::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 34%;
    height: 34%;
    background-color: #B9C6C0;
    -webkit-mask: var(--bw-i-boek) center / contain no-repeat;
            mask: var(--bw-i-boek) center / contain no-repeat;
}

/* -- filters: gekozen waarden als pillen, lange lijsten scrollen ------------------ */
.filters__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.filters__chip:not(.filters__subcat) { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 999px; background: var(--bw-green); color: #fff; font-size: 14px; text-decoration: none; }
.filters__chip:not(.filters__subcat) a, .filters__chip-remove { color: inherit; text-decoration: none; }
.filters__options { max-height: 264px; overflow-y: auto; scrollbar-width: thin; }
.filters__option { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; font-size: 15px; }
.filters__option:hover { color: var(--bw-green-2); }
.filters__count { color: var(--bw-grijs); font-size: 12px; }
.filters__clear { color: var(--bw-green); font-size: 14px; }
.filters__group + .filters__group { border-block-start: 1px solid var(--bw-line); }

/* -- winkelmand: witte kaart links, overzicht rechts ------------------------------ */
main:has(.cart-lines) { display: grid; grid-template-columns: minmax(0, 1fr) 360px; column-gap: 28px; align-items: start; width: min(var(--bw-kap), calc(100% - 32px)); max-width: none; margin-inline: auto; padding: 28px 0 64px; }
main:has(.cart-lines) > h1 { grid-column: 1 / -1; margin: 0 0 20px; }
main:has(.cart-lines) > :not(h1, .cart-lines, .cart-totals, .cart-checkout) { grid-column: 1; }
.cart-lines { grid-column: 1; grid-row: 2 / span 3; width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; border-radius: 16px; background: #fff; }
.cart-lines :is(th, td) { padding: 14px 16px; border-bottom: 1px solid var(--bw-line); text-align: left; vertical-align: middle; }
.cart-lines tr:last-child td { border-bottom: 0; }
.cart-lines th { color: var(--bw-grijs); font-size: 14px; font-weight: 400; }
.cart-lines td:first-child { font-size: 16px; font-weight: 600; }
.cart-lines form { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.cart-lines input[type="number"] { width: 64px; height: 40px; border: 1px solid var(--bw-line); border-radius: 8px; padding: 0 8px; font: inherit; }
.cart-lines button { height: 40px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: var(--bw-green); font: inherit; font-size: 14px; text-decoration: underline; cursor: pointer; }
.cart-lines button:hover { background: var(--bw-tint); }
.cart-totals { grid-column: 2; grid-row: 2; width: 100%; padding: 14px 18px; border-collapse: separate; border-radius: 16px 16px 0 0; background: #fff; }
.cart-totals :is(th, td) { padding: 7px 4px; font-weight: 400; text-align: left; }
.cart-totals td { text-align: right; }
.cart-totals .total :is(th, td) { font-weight: 600; }
.cart-totals .total td { font-family: var(--bw-kop); font-size: 24px; font-weight: 800; }
.cart-totals .tax :is(th, td) { color: var(--bw-grijs); font-size: 14px; }
.cart-checkout { grid-column: 2; grid-row: 3; margin: 0; padding: 4px 18px 18px; border-radius: 0 0 16px 16px; background: #fff; }
.cart-checkout .button { display: block; padding: 16px; border-radius: 12px; font-size: 17px; text-align: center; }
main:has(.cart-empty) { padding: 40px 0 72px; }
main:has(.cart-empty) p a { color: var(--bw-green); font-weight: 600; }

/* -- afrekenen: formulier links, overzicht vast rechts ---------------------------- */
.checkout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; column-gap: 28px; align-items: start; max-width: none; }
.checkout__title { grid-column: 1 / -1; margin: 0 0 16px; font-size: clamp(30px, 4vw, 40px); }
.checkout__summary-title { grid-column: 2; grid-row: 2; margin: 0; padding: 18px 18px 6px; border-radius: 16px 16px 0 0; background: #fff; font-size: 22px; }
.checkout__summary { grid-column: 2; grid-row: 3; width: 100%; padding: 0 12px 12px; border-collapse: separate; border-radius: 0 0 16px 16px; background: #fff; position: static; }
.checkout__form { grid-column: 1; grid-row: 2 / span 3; padding: 22px; border-radius: 16px; background: #fff; }
.checkout__form h2 { font-size: 24px; }
.checkout__back { grid-column: 1; }
.checkout__line-image { display: inline-block; width: 44px; height: auto; border-radius: 2px 4px 4px 2px; vertical-align: middle; }
.checkout__totals :is(th, td) { padding-block: 6px; }
.checkout__form input:not([type="radio"], [type="checkbox"]), .checkout__form select { min-height: 48px; border: 1px solid #C9D3CE; border-radius: 10px; font: inherit; font-size: 16px; }

/* -- account, herroepen, foutpagina --------------------------------------------- */
.account { max-width: 460px; margin: 36px auto; padding: 28px; border-radius: 16px; background: #fff; }
.account__title { margin-top: 0; font-size: 30px; }
.account__field { display: block; margin-bottom: 14px; }
.account__field > span { display: block; margin-bottom: 4px; font-size: 14px; font-weight: 600; }
.account__input { width: 100%; min-height: 48px; border: 1px solid #C9D3CE; border-radius: 10px; padding: 0 12px; font: inherit; font-size: 16px; }
.account__input:focus { border-color: var(--bw-green); outline: 2px solid var(--bw-green); outline-offset: 0; }
.account__submit { width: 100%; min-height: 52px; border: 0; border-radius: 12px; background: var(--bw-lamp); color: var(--bw-green); font: inherit; font-weight: 600; font-size: 16px; cursor: pointer; }
.account__submit:hover { background: #F2B91F; }
.withdraw { max-width: 720px; margin: 36px auto; padding: 28px; border-radius: 16px; background: #fff; }
.withdraw__submit { min-height: 52px; padding: 0 24px; border: 0; border-radius: 12px; background: var(--bw-lamp); color: var(--bw-green); font: inherit; font-weight: 600; }
@media (max-width: 899px) {
    main:has(.cart-lines), .checkout { display: block; }
    .cart-totals { margin-top: 16px; }
    .cart-lines thead { display: none; }
    .cart-lines, .cart-lines tbody, .cart-lines tr, .cart-lines td { display: block; width: 100%; }
    .cart-lines td { border-bottom: 0; padding: 6px 16px; }
    .cart-lines tr { padding: 10px 0; border-bottom: 1px solid var(--bw-line); }
    .checkout__summary-title { margin-top: 0; }
    .checkout__form { margin-top: 16px; padding: 16px; }
}

/* -- laatste rondgang -------------------------------------------------------------- */
main:has(.checkout) { width: min(var(--bw-kap), calc(100% - 32px)); max-width: none !important; margin-inline: auto; padding: 28px 0 64px; }
main:has(.checkout) .checkout { width: 100%; max-width: none !important; margin: 0; padding: 0; }
main a.checkout__line-link { color: var(--bw-green) !important; }
#top-row .rich-nav__level-2 > li > a { justify-content: flex-start; text-align: left; }
footer.page-band .section--legal { grid-column: 1 / -1; grid-row: 2; }
footer.page-band .ermecms-consent-prefs { grid-column: 3 / -1; grid-row: 2; justify-self: end; border-top: 0; background: none !important; }
@media (max-width: 699px) {
    footer.page-band .section--legal { grid-row: auto; }
    footer.page-band .ermecms-consent-prefs { grid-column: 1 / -1; grid-row: auto; justify-self: start; }
    #top-row .rich-nav__level-1--start { display: none; }
    #category-bar .section__inner { min-width: 0; }
    #category-bar .mega-nav__tree { flex: 1 1 100%; width: 100%; min-width: 0; max-width: 100%; overflow: visible; }
    #category-bar .mega-nav__level-1 { width: 100%; min-width: 0; max-width: 100%; }
}
.checkout__summary-title { margin: 0 !important; }
.checkout__summary { margin: 0 !important; }
.checkout__summary :is(td, th) { padding-inline: 16px; }
.checkout__summary tr:last-child :is(td, th) { padding-bottom: 14px; }