/* =====================================================================
   ENKA - huisstijl
   =====================================================================
   Komt na themes/_base/assets/css/app.css, waar de hele winkel in staat
   in de opbouw van DutchLine. Hier staat alleen wat ENKA anders maakt:
   de kleuren en de vorm, met de variabelen van _base ingevuld in zwart,
   wit en grijs in plaats van het merkblauw, en overal een kleine ronding
   van hoogstens 3 pixels; daarnaast de onderdelen die alleen ENKA heeft,
   zoals de startpagina, de voet en de pagina's met tekst.

   Groen alleen voor wat open of op voorraad is, rood voor wat fout of
   dicht is.
   ===================================================================== */

/* -- Tokens ---------------------------------------------------------
   De eigen trappen van ENKA, in zwart, en daaronder de namen van _base
   ingevuld met diezelfde trappen: zo neemt alles van de winkel het zwart
   over zonder dat er een regel overschreven hoeft te worden.
   --------------------------------------------------------------------- */

:root {
    --ek-950: #0b0b0b;
    --ek-900: #161616;
    --ek-800: #242424;
    --ek-700: #333333;
    --ek-500: #666666;
    --ek-400: #8c8c8c;
    --ek-300: #bdbdbd;
    --ek-200: #dcdcdc;
    --ek-100: #efefed;

    --ek-groen:  #0f7a55;
    --ek-open:   #20c997;
    --ek-dicht:  #ff4d4d;

    /* Het merkblauw van _base, hier in de trappen van het zwart. */
    --dl-blue-950: var(--ek-950);
    --dl-blue-900: var(--ek-900);
    --dl-blue-800: var(--ek-800);
    --dl-blue-700: #111111;
    --dl-blue-600: var(--ek-700);
    --dl-blue-500: var(--ek-500);
    --dl-blue-450: var(--ek-500);
    --dl-blue-400: var(--ek-400);
    --dl-blue-300: var(--ek-400);
    --dl-blue-200: var(--ek-300);
    --dl-blue-150: var(--ek-200);
    --dl-blue-100: var(--ek-100);

    --dl-grey-700: var(--ek-700);
    --dl-grey-600: var(--ek-500);
    --dl-grey-400: var(--ek-400);
    --dl-grey-200: var(--ek-200);

    --accent:       #111111;
    --accent-hover: #2b2b2b;
    --accent-soft:  rgba(17, 17, 17, .07);
    --accent-text:  #ffffff;

    --ink:          #0b0b0b;
    --ink-soft:     rgba(11, 11, 11, .70);
    --ink-faint:    rgba(11, 11, 11, .52);
    --line:         rgba(11, 11, 11, .12);
    --line-soft:    rgba(11, 11, 11, .07);
    --surface:      #ffffff;
    --surface-alt:  #f6f6f5;

    --ok:           var(--ek-groen);
    --warn:         #9a5b00;
    --danger:       #d42a2a;

    /* De sterren van een beoordeling in het zwart, zoals de rest, en de
       stappen van het bestellen in wit: groen is hier alleen voor wat open
       of op voorraad is. */
    --dl-ster:       var(--ek-900);
    --dl-voortgang:  #ffffff;

    /* Elke hoek hoogstens 3 pixels rond, ook wat _base groter afrondt; de
       kleinste blokjes 2, anders worden het rondjes. Zie Rondingen
       onderaan. */
    --radius:       3px;
    --radius-lg:    3px;
    --radius-pill:  3px;
    --radius-sm:    2px;
    --dl-r-btn:     3px;
    --dl-r-max:     3px;

    --shadow-sm:    0 1px 2px rgba(11, 11, 11, .05);
    --shadow:       0 14px 34px rgba(11, 11, 11, .06);
    --shadow-lg:    0 20px 38px rgba(11, 11, 11, .12);

    --page-max:     1440px;

    --font:         "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-head:    var(--font);
}

/* -- Basis ---------------------------------------------------------- */

/* De koptekst blijft staan bij het scrollen: een sprong naar een anker
   moet eronder uitkomen, niet erachter. */
:root {
    scroll-behavior: smooth;
    scrollbar-gutter: stable;
    scroll-padding-top: 9.5rem;
    scrollbar-width: thin;
    scrollbar-color: var(--ek-500) var(--surface-alt);
}

@media (prefers-reduced-motion: reduce) {
    :root { scroll-behavior: auto; }
}

body {
    background: var(--surface);
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
    letter-spacing: -.005em;
}

h1, h2, h3 { letter-spacing: -.022em; }

.price { font-variant-numeric: tabular-nums; }

a { color: var(--ink); transition: color .14s ease; }
a:hover { color: var(--ek-500); }

/* Een link in lopende tekst is onderstreept: zwart op zwart valt anders
   niet op. */
.dl-tekst a, .notice a, .help a, .muted a, .empty a, p > a:not(.btn) {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .2em;
}

::selection { background: var(--ek-900); color: #ffffff; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.skip-link { background: var(--ek-900); color: #ffffff; font-weight: 600; }

.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); }
.lead  { font-size: 1.08rem; color: var(--ink-soft); }

/* Het label boven een kop, met een streepje ervoor zoals op
   enkabouwmarkt.nl. */
.dl-eyebrow,
.dl-eyebrow-licht {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .45rem;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .13em;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--ek-500);
}

.dl-eyebrow::before,
.dl-eyebrow-licht::before {
    content: "";
    flex: none;
    width: 26px;
    height: 2px;
    background: currentColor;
}

.dl-eyebrow-licht { color: rgba(255, 255, 255, .72); }
.dl-eyebrow-licht::before { background: var(--ek-400); }

.help { margin: .5rem 0 0; font-size: .83rem; line-height: 1.5; color: var(--ink-faint); }

/* -- Knoppen ---------------------------------------------------------
   Zoals bij DutchLine: een variant vult alleen variabelen in, de
   basisregel schildert. Een donker vlak geeft zijn eigen waarden mee in
   plaats van de knop te overschrijven.
   --------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 2.75rem;
    padding: .625rem 1.15rem;
    border: 1px solid var(--dl-btn-rand, transparent);
    background: var(--dl-btn-vulling, var(--accent));
    color: var(--dl-btn-tekst, #ffffff);
    font: inherit;
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .14s ease, border-color .14s ease, color .14s ease;
}

.btn:hover {
    background: var(--dl-btn-vulling-hover, var(--accent-hover));
    border-color: var(--dl-btn-rand-hover, var(--dl-btn-rand, transparent));
    color: var(--dl-btn-tekst-hover, var(--dl-btn-tekst, #ffffff));
    text-decoration: none;
}

.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--dl-btn-ring, var(--ink)); outline-offset: 2px; }
.btn > svg { flex: none; }

.btn:disabled,
.btn[aria-disabled="true"] {
    --dl-btn-vulling:       var(--surface-alt);
    --dl-btn-vulling-hover: var(--surface-alt);
    --dl-btn-tekst:         var(--ink-faint);
    --dl-btn-tekst-hover:   var(--ink-faint);
    --dl-btn-rand:          var(--line-soft);
    cursor: not-allowed;
    opacity: 1;
}

.btn:disabled:active,
.btn[aria-disabled="true"]:active { transform: none; }

.btn-outline {
    --dl-btn-vulling:       transparent;
    --dl-btn-vulling-hover: var(--ek-100);
    --dl-btn-tekst:         var(--ink);
    --dl-btn-tekst-hover:   var(--ink);
    --dl-btn-rand:          var(--line);
    --dl-btn-rand-hover:    var(--ink);
}

.btn-dark {
    --dl-btn-vulling:       var(--ek-900);
    --dl-btn-vulling-hover: var(--ek-950);
    --dl-btn-tekst:         #ffffff;
    --dl-btn-ring:          var(--ek-900);
}

.btn-soft {
    --dl-btn-vulling:       var(--ek-100);
    --dl-btn-vulling-hover: var(--ek-900);
    --dl-btn-tekst:         var(--ink);
    --dl-btn-tekst-hover:   #ffffff;
}

.btn-outline:disabled, .btn-outline[aria-disabled="true"] {
    --dl-btn-vulling:       transparent;
    --dl-btn-vulling-hover: transparent;
}

.btn-sm { min-height: 2.25rem; padding: .375rem .75rem; font-size: .8125rem; gap: .375rem; }
.btn-lg { min-height: 3.25rem; padding: .875rem 1.75rem; font-size: 1rem; }
.btn-block { width: 100%; }

/* Op een donkere ondergrond: de primaire knop wit, de omlijnde een lichte
   rand. */
.dl-hero, .dl-showroom, .dl-cat.is-donker, .dl-kop, .dl-pdp-band, .dl-tour-venster {
    --dl-btn-vulling:       #ffffff;
    --dl-btn-vulling-hover: #e9e9e7;
    --dl-btn-tekst:         var(--ek-950);
    --dl-btn-tekst-hover:   var(--ek-950);
    --dl-btn-ring:          #ffffff;
}

.dl-hero .btn-dark, .dl-showroom .btn-dark, .dl-cat.is-donker .btn-dark, .dl-kop .btn-dark {
    --dl-btn-vulling:       #ffffff;
    --dl-btn-vulling-hover: #e9e9e7;
    --dl-btn-tekst:         var(--ek-950);
    --dl-btn-tekst-hover:   var(--ek-950);
    --dl-btn-ring:          #ffffff;
}

.dl-hero .btn-outline, .dl-showroom .btn-outline, .dl-cat.is-donker .btn-outline, .dl-kop .btn-outline, .dl-pdp-band .btn-outline {
    --dl-btn-vulling:       rgba(255, 255, 255, .1);
    --dl-btn-vulling-hover: rgba(255, 255, 255, .2);
    --dl-btn-tekst:         #ffffff;
    --dl-btn-tekst-hover:   #ffffff;
    --dl-btn-rand:          rgba(255, 255, 255, .28);
    --dl-btn-rand-hover:    rgba(255, 255, 255, .6);
    --dl-btn-ring:          #ffffff;
}

/* Een kaart is wit, ook op een donker vlak: de knoppen erin krijgen daar
   hun gewone waarden terug. */
.dl-pdp-band .dl-kaart, .dl-pdp-band .dl-pdp-zij, .dl-cat.is-donker .dl-art {
    --dl-btn-vulling:       var(--accent);
    --dl-btn-vulling-hover: var(--accent-hover);
    --dl-btn-tekst:         #ffffff;
    --dl-btn-tekst-hover:   #ffffff;
    --dl-btn-ring:          var(--ink);
}

.dl-pdp-band .dl-kaart .btn-outline, .dl-pdp-band .dl-pdp-zij .btn-outline {
    --dl-btn-vulling:       transparent;
    --dl-btn-vulling-hover: var(--ek-100);
    --dl-btn-tekst:         var(--ink);
    --dl-btn-tekst-hover:   var(--ink);
    --dl-btn-rand:          var(--line);
    --dl-btn-rand-hover:    var(--ink);
}

/* -- Formulieren ---------------------------------------------------- */

.field label { margin-bottom: .4rem; font-size: .875rem; font-weight: 600; color: var(--ink); }

.input, .field input[type="text"], .field input[type="email"],
.field input[type="password"], .field input[type="tel"],
.field input[type="search"], .field input[type="number"],
.field select, .field textarea {
    min-height: 2.875rem;
    padding: .65rem .9rem;
    border: 1px solid rgba(11, 11, 11, .2);
    background: #ffffff;
    color: var(--ink);
    font-size: .95rem;
    box-shadow: inset 0 1px 2px rgba(11, 11, 11, .04);
    transition: border-color .15s ease, box-shadow .15s ease;
}

/* Een veld met een teken ervoor, zoals bij inloggen: daar houdt de tekst
   ruimte voor het teken, en rechts voor het oogje bij een wachtwoord. */
.field .dl-veld input { padding-left: 2.6rem; }
.field .dl-veld:has(.dl-veld-oog) input { padding-right: 2.9rem; }

.input:hover, .field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(11, 11, 11, .36); }

.input:focus, .field input:focus, .field select:focus, .field textarea:focus {
    outline: none;
    border-color: var(--ink);
    box-shadow: 0 0 0 4px var(--accent-soft);
}

.input::placeholder, .field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); }

.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea {
    border-color: var(--danger);
    box-shadow: 0 0 0 4px rgba(212, 42, 42, .08);
}

.field .error { font-weight: 500; }

input[type="search"] { -webkit-appearance: none; appearance: none; }

select, select.input, .field select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 2.75rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%230b0b0b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 12px 8px;
}

/* Vinkjes en keuzerondjes in dezelfde vorm als de rest; een gekozen rondje
   heeft een blokje in het midden, een vinkje een vink. */
input[type="checkbox"], input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    flex: none;
    display: inline-grid;
    place-content: center;
    width: 1.125rem;
    height: 1.125rem;
    margin: .2rem 0 0;
    border: 1.5px solid rgba(11, 11, 11, .45);
    background: #ffffff;
    cursor: pointer;
    vertical-align: -.2rem;
    transition: border-color .15s ease, background-color .15s ease;
}

input[type="checkbox"]:hover, input[type="radio"]:hover { border-color: var(--ink); }

input[type="checkbox"]:checked {
    border-color: var(--ink);
    background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath d='M1.5 5.2 4.6 8.2 10.5 1.8' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 11px 9px;
}

input[type="radio"]:checked { border-color: var(--ink); background: var(--ink); box-shadow: inset 0 0 0 3px #ffffff; }
input[type="checkbox"]:disabled, input[type="radio"]:disabled { opacity: .4; cursor: not-allowed; }
input[type="checkbox"][hidden], input[type="radio"][hidden] { display: none; }

/* -- Kleine onderdelen ---------------------------------------------- */

.card { border-color: var(--line-soft); background: var(--surface); box-shadow: var(--shadow); }
.card h2 { font-size: 1.2rem; }

.badge { padding: .2rem .5rem; font-size: .74rem; font-weight: 600; background: var(--surface-alt); color: var(--ink-soft); }

.notice { border-color: var(--line-soft); background: var(--surface-alt); }

/* Een kruimelpad is een <ol>, en daar zet de browser zelf 40 pixels
   inspringing op. */
.crumbs { padding-inline: 0; gap: .5rem; font-size: .85rem; color: var(--ink-faint); }
.crumbs a { color: var(--ink-soft); }
.crumbs a:hover { color: var(--ink); }
.crumbs li:not(:last-child)::after { content: "\203A"; margin-left: .5rem; color: var(--ink-faint); }

.pager a, .pager span {
    min-width: 2.5rem;
    height: 2.5rem;
    border-color: var(--line);
    color: var(--ink);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.pager a:hover { border-color: var(--ink); color: var(--ink); }
.pager [aria-current] { background: var(--ek-900); border-color: var(--ek-900); color: #ffffff; }

.empty { border: 1px solid var(--line-soft); background: var(--surface-alt); }
.empty h3 { margin-bottom: .4rem; }

.tag { border-color: var(--line); color: var(--ink); font-weight: 500; }
.tag:hover { border-color: var(--ink); color: var(--ink); }



/* Een klein blokje, bijvoorbeeld voor open of dicht. */
.dl-stip { display: inline-block; flex: none; width: 7px; height: 7px; background: currentColor; }

/* -- De topbalk ------------------------------------------------------ */

.dl-topbar {
    background: var(--ek-900);
    color: rgba(255, 255, 255, .76);
    font-size: .8rem;
    line-height: 1.4;
}

.dl-topbar .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    min-height: 38px;
    padding-block: .4rem;
}

.dl-status {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    min-width: 0;
    font-weight: 500;
    color: rgba(255, 255, 255, .88);
}

.dl-status::before {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    background: var(--ek-dicht);
    box-shadow: 0 0 0 3px rgba(255, 77, 77, .18);
}

.dl-status.is-open::before { background: var(--ek-open); box-shadow: 0 0 0 3px rgba(32, 201, 151, .18); }

/* Staan we open, dan klopt het blokje rustig. */
.dl-status.is-open::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 7px;
    height: 7px;
    margin-top: -3.5px;
    background: var(--ek-open);
    pointer-events: none;
    animation: dl-hartslag 2.4s ease-out infinite;
}

@keyframes dl-hartslag {
    0%   { transform: scale(1);   opacity: .55; }
    70%  { transform: scale(2.6); opacity: 0; }
    100% { transform: scale(2.6); opacity: 0; }
}

.dl-status-kort { display: none; }

.dl-topbar-links { display: flex; align-items: center; gap: 1.35rem; margin: 0; padding: 0; list-style: none; }
.dl-topbar-links a { color: rgba(255, 255, 255, .72); white-space: nowrap; }
.dl-topbar-links a:hover, .dl-topbar-links a[aria-current] { color: #ffffff; }
.dl-topbar-tel { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; color: #ffffff !important; }

@media (max-width: 1180px) { .dl-hide-md { display: none !important; } }

@media (max-width: 640px) {
    .dl-status-lang { display: none; }
    .dl-status-kort { display: block; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .dl-topbar { font-size: .76rem; }
    .dl-topbar .wrap { flex-wrap: nowrap; gap: .75rem; }
    .dl-topbar-links { flex: none; }
}

/* -- Koptekst: logo, zoekveld en acties ------------------------------ */

.site-header { z-index: 60; border-bottom: 0; background: var(--surface); box-shadow: 0 1px 0 var(--line); }

.header-main {
    display: grid;
    grid-template-columns: 12.5rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.75rem;
    padding-block: 1.1rem;
}

.nav-toggle-label { display: none; }

/* Even hoog als het logo van DutchLine (52 pixels), en net als dat kleiner
   zodra de kop aan de bovenrand blijft staan. */
.dl-logo { display: block; line-height: 0; color: var(--ink); }
.dl-logo:hover { color: var(--ink); }
.dl-logo-teken { width: 200px; height: auto; transition: width .25s ease; }
.site-header.is-stuck .dl-logo-teken { width: 150px; }

.header-search { position: relative; display: flex; align-items: center; min-width: 0; max-width: none; }

.header-search input {
    display: block;
    width: 100%;
    height: 48px;
    padding: 0 6.5rem 0 2.9rem;
    border: 1px solid var(--line);
    background: #ffffff;
    color: var(--ink);
    font: inherit;
    font-size: .94rem;
    box-shadow: inset 0 1px 2px rgba(11, 11, 11, .05);
    transition: border-color .18s ease, box-shadow .18s ease;
}

.header-search input::placeholder { color: var(--ink-faint); }
.header-search input:hover { border-color: rgba(11, 11, 11, .3); }

.header-search input:focus {
    outline: none;
    border-color: var(--ink);
    box-shadow: 0 0 0 4px var(--accent-soft), 0 6px 18px rgba(11, 11, 11, .08);
}

.dl-search-icon {
    position: absolute;
    left: 1.1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-faint);
    line-height: 0;
    pointer-events: none;
    transition: color .18s ease;
}

.header-search:focus-within .dl-search-icon { color: var(--ink); }

.dl-search-tools { position: absolute; top: 5px; right: 5px; bottom: 5px; display: flex; align-items: center; }

.header-search button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    height: 100%;
    padding-inline: 1.25rem;
    border: 0;
    background: var(--accent);
    color: #ffffff;
    font: inherit;
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .14s ease;
}

.header-search button:hover { background: var(--accent-hover); }
.header-search button:active { transform: translateY(1px); }
.dl-search-mobile { display: none; }

.header-actions { display: flex; align-items: center; gap: .25rem; }

/* Een tegel met het icoon en daarnaast twee regels: een grijs label en de
   waarde. Zoals bij DutchLine. */
.dl-action {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .7rem;
    color: var(--ink);
    white-space: nowrap;
    transition: background-color .16s ease, box-shadow .16s ease;
}

.dl-action:hover { background: var(--surface-alt); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); text-decoration: none; }
.dl-action[aria-current="page"] { background: var(--ek-100); box-shadow: inset 0 0 0 1px var(--ek-300); }

.dl-action-icon {
    position: relative;
    flex: none;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--line);
    background: linear-gradient(180deg, #ffffff, var(--surface-alt));
    color: var(--ek-900);
    transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

.dl-action:hover .dl-action-icon { background: var(--ek-900); border-color: var(--ek-900); color: #ffffff; }

.dl-action-text { display: flex; flex-direction: column; line-height: 1.25; }

.dl-action-label {
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.dl-action-value { font-size: .86rem; font-weight: 600; color: var(--ink); }

/* Het telwerk hangt aan de hoek van de tegel, zodat de knop even breed
   blijft met en zonder cijfer. */
.dl-action-telling {
    position: absolute;
    top: -6px;
    right: -6px;
    display: grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border: 2px solid #ffffff;
    background: var(--ek-950);
    color: #ffffff;
    font-size: .66rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.dl-action-telling[hidden] { display: none; }
.dl-action:hover .dl-action-telling { background: #ffffff; border-color: var(--ek-900); color: var(--ek-900); }

.dl-action-form { display: flex; margin: 0; }
button.dl-action { border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }

/* Tot en met een tablet: de menuknop vooraan, het logo en de acties op
   een regel en het zoekveld eronder. Het menu zelf is het schuifmenu van
   _base (partials/offcanvas). */
@media (max-width: 1024px) {
    .nav-bar { display: none; }

    .header-main {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "menu logo acties"
            "zoek zoek zoek";
        gap: .75rem 1rem;
        padding-block: .7rem .85rem;
    }

    .nav-toggle-label {
        grid-area: menu;
        display: inline-grid;
        place-items: center;
        width: 44px;
        height: 44px;
        background: var(--surface-alt);
        color: var(--ek-900);
        cursor: pointer;
    }

    .header-main > .dl-logo { grid-area: logo; }
    .header-search { grid-area: zoek; }
    .header-actions { grid-area: acties; }

    .dl-logo-teken,
    .site-header.is-stuck .dl-logo-teken { width: 150px; }
    .header-actions .dl-action-text { display: none; }
    .header-actions .dl-action { min-width: 44px; min-height: 44px; padding: .2rem; }
}

@media (max-width: 560px) {
    .header-search input { height: 44px; padding-right: 3.6rem; font-size: .9rem; }
    .header-search button { padding-inline: .85rem; }
    .dl-search-text { display: none; }
    .dl-search-mobile { display: inline-flex; }
}

@media (max-width: 480px) {
    .header-main { gap: .6rem .5rem; padding-block: .6rem .75rem; }
    .header-actions { gap: .15rem; }
    .dl-logo-teken,
    .site-header.is-stuck .dl-logo-teken { width: 124px; }
}

/* -- De hero ----------------------------------------------------------
   Een donker vlak met de catalogus als textuur erachter: dezelfde dunne
   lijntekeningen als bij DutchLine, ver weggedraaid. Links de boodschap,
   rechts een foto uit een badkamer, en onderaan de categorieën.
   --------------------------------------------------------------------- */

.dl-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: var(--ek-950);
    color: #ffffff;
    padding-block: clamp(3rem, 2rem + 5vw, 5.5rem) 0;
}

.dl-hero::before {
    content: "";
    position: absolute;
    inset: -30% -10% auto -10%;
    height: 150%;
    z-index: -3;
    background:
        radial-gradient(54% 54% at 16% 30%, rgba(255, 255, 255, .07), transparent 68%),
        radial-gradient(44% 44% at 84% 10%, rgba(255, 255, 255, .05), transparent 70%),
        radial-gradient(64% 58% at 56% 112%, rgba(255, 255, 255, .05), transparent 74%);
}

.dl-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(100deg, var(--ek-950) 0%, rgba(11, 11, 11, .94) 30%, rgba(11, 11, 11, .72) 50%, rgba(11, 11, 11, .3) 70%, transparent 86%);
    pointer-events: none;
}

.dl-hero-raster {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: url("../img/raster.svg");
    background-repeat: repeat;
    background-size: clamp(728px, 70.2vw, 1040px);
    opacity: .16;
    mask-image: radial-gradient(118% 104% at 76% 40%, #000 4%, rgba(0, 0, 0, .5) 38%, transparent 95%);
    -webkit-mask-image: radial-gradient(118% 104% at 76% 40%, #000 4%, rgba(0, 0, 0, .5) 38%, transparent 95%);
}

.dl-hero-in {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, clamp(22rem, 38vw, 40rem));
    gap: clamp(2rem, 1rem + 4vw, 4.5rem);
    align-items: center;
    padding-bottom: clamp(2.5rem, 1.5rem + 4vw, 4rem);
}

.dl-hero-boodschap { max-width: 40rem; }

.dl-hero-titel {
    margin: 1.1rem 0 0;
    font-size: clamp(2.3rem, 1.1rem + 4vw, 3.8rem);
    font-weight: 800;
    line-height: 1.03;
    letter-spacing: -.035em;
    color: #ffffff;
}

/* Van wit naar grijs, zoals "begint hier." op enkabouwmarkt.nl. De
   ruimte onderaan houdt de staart van de g binnen het verloop. */
.dl-hero-titel .accent {
    background: linear-gradient(100deg, #ffffff 0%, #d4d4d2 42%, #8c8c8c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding-bottom: .08em;
}

.dl-hero .lead { margin-top: 1.6rem; max-width: 46ch; font-size: 1.05rem; color: rgba(255, 255, 255, .78); }

.dl-hero-onder { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 2rem; }
.dl-hero-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.dl-hero-actions .btn > svg { transition: transform .14s ease; }
.dl-hero-actions .btn:hover > svg { transform: translateX(2px); }

/* De foto ligt als een voorwerp op het vlak: een schaduw en een dunne lichte
   rand, geen kader. */
.dl-hero-foto {
    position: relative;
    margin: 0;
    aspect-ratio: 5 / 4;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .14);
    background: var(--ek-900);
    box-shadow: 0 30px 60px rgba(0, 0, 0, .5);
}

.dl-hero-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% center; }

.dl-hero-foto figcaption {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .7rem;
    background: rgba(11, 11, 11, .78);
    color: #ffffff;
    font-size: .78rem;
    font-weight: 600;
}

@media (max-width: 62rem) {
    .dl-hero-in { grid-template-columns: minmax(0, 1fr); gap: clamp(1.75rem, 1.25rem + 2vw, 2.5rem); }
    .dl-hero::after { background: linear-gradient(180deg, rgba(11, 11, 11, .9) 0%, rgba(11, 11, 11, .72) 55%, rgba(11, 11, 11, .45) 100%); }
    .dl-hero-foto { aspect-ratio: 16 / 10; }
}

/* De hero speelt zijn eigen intro af zodra de opmaak klaar is, zonder op
   een script te wachten. */
.dl-hero .dl-eyebrow-licht,
.dl-hero-titel,
.dl-hero .lead,
.dl-hero-onder,
.dl-hero-foto,
.dl-hero-cats {
    opacity: 0;
    transform: translateY(14px);
    animation: dl-intro .65s cubic-bezier(.16, 1, .3, 1) forwards;
}

.dl-hero .dl-eyebrow-licht { animation-delay: .04s; }
.dl-hero-titel             { animation-delay: .10s; }
.dl-hero .lead             { animation-delay: .18s; }
.dl-hero-onder             { animation-delay: .26s; }
.dl-hero-foto              { animation-delay: .22s; }
.dl-hero-cats              { animation-delay: .34s; }

@keyframes dl-intro { to { opacity: 1; transform: none; } }

/* -- De categorierij onderaan de hero -------------------------------
   Een doorlopende rij vakken, een stellingwand. De scheidingslijnen zijn
   de tussenruimte van het raster, dus er valt nergens een lijn dubbel.
   --------------------------------------------------------------------- */

.dl-hero-cats {
    position: relative;
    z-index: 1;
    border-top: 1px solid rgba(255, 255, 255, .13);
    container: catrail / inline-size;
}

.dl-hero-cats-in {
    display: grid;
    grid-template-columns: repeat(var(--dl-vakken, 10), minmax(0, 1fr));
    gap: 1px;
    background: rgba(255, 255, 255, .13);
}

.dl-hero-cats a {
    position: relative;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: .5rem;
    min-height: clamp(4.25rem, 3.6rem + 2cqi, 4.75rem);
    padding: .9rem .45rem;
    background: rgba(5, 5, 5, .72);
    color: rgba(255, 255, 255, .8);
    font-size: clamp(.68rem, .6rem + .22cqi, .8rem);
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
    transition: background-color .14s ease, color .14s ease;
}

.dl-hero-cats a > span { min-width: 0; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.dl-hero-cats a::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    height: 2px;
    background: #ffffff;
    opacity: 0;
    transition: opacity .14s ease;
}

.dl-hero-cats a:hover,
.dl-hero-cats a:focus-visible {
    background-image: linear-gradient(rgba(255, 255, 255, .085), rgba(255, 255, 255, .085));
    color: #ffffff;
}

.dl-hero-cats a:hover::before,
.dl-hero-cats a:focus-visible::before { opacity: 1; }

.dl-hero-cats a:focus-visible { outline: 2px solid #ffffff; outline-offset: -2px; }

.dl-hero-cats svg { width: 22px; height: 22px; color: rgba(255, 255, 255, .5); transition: color .14s ease; }
.dl-hero-cats a:hover svg { color: #ffffff; }

@container catrail (max-width: 70rem) {
    .dl-hero-cats-in { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .dl-hero-cats a { gap: .6rem; min-height: 5.5rem; padding-inline: 1rem; font-size: .84rem; }
    .dl-hero-cats svg { width: 26px; height: 26px; }
    .dl-hero-cats a:last-child { grid-column: span var(--dl-span5, 1); }
}

@container catrail (max-width: 44rem) {
    .dl-hero-cats-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dl-hero-cats a:last-child { grid-column: span var(--dl-span2, 1); }
}

@media (max-width: 40rem) {
    .dl-hero-cats { display: none; }
}

/* -- De lopende band met beloftes -------------------------------------
   Zoals op enkabouwmarkt.nl, onder de hero, met dezelfde snelheid: één rij
   in 38 seconden. Het spoor schuift een derde op, want er staan drie
   gelijke rijen in. Aanwijzen zet hem stil. Hij loopt ook bij minder
   beweging (Animatie-effecten uit in Windows), zoals in V1; anders zet de
   regel daarvoor in app.css hem stil.
   --------------------------------------------------------------------- */

.dl-band-lopend {
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, .1);
    background: var(--ek-900);
    color: rgba(255, 255, 255, .72);
    white-space: nowrap;
}

.dl-band-lopend-spoor {
    display: flex;
    width: max-content;
    animation: dl-lopen 38s linear infinite;
}

.dl-band-lopend:hover .dl-band-lopend-spoor { animation-play-state: paused; }

.dl-band-lopend-rij { display: flex; margin: 0; padding: 0; list-style: none; }

.dl-band-lopend-rij li {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1.75rem;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .12em;
    line-height: 1.3;
    text-transform: uppercase;
}

.dl-band-lopend-rij li::before {
    content: "";
    flex: none;
    width: 6px;
    height: 6px;
    background: rgba(255, 255, 255, .35);
}

@keyframes dl-lopen { to { transform: translateX(calc(-100% / 3)); } }

@media (prefers-reduced-motion: reduce) {
    .dl-band-lopend-spoor { animation-duration: 38s !important; }
}

/* -- De voordelen onder de hero -------------------------------------- */

.dl-usp { border-bottom: 1px solid var(--line-soft); background: #ffffff; }

.dl-usp-lijst {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-block: 0;
    list-style: none;
}

.dl-usp-lijst li {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: 1.35rem 1.25rem;
    font-size: .86rem;
    line-height: 1.4;
    color: var(--ink-soft);
}

.dl-usp-lijst li:first-child { padding-left: 0; }
.dl-usp-lijst li + li { border-left: 1px solid var(--line-soft); }
.dl-usp-lijst strong { display: block; font-size: .93rem; font-weight: 600; color: var(--ink); }

@media (max-width: 960px) {
    .dl-usp-lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dl-usp-lijst li:nth-child(3) { padding-left: 0; border-left: 0; }
    .dl-usp-lijst li:nth-child(n + 3) { border-top: 1px solid var(--line-soft); }
}

@media (max-width: 520px) {
    .dl-usp-lijst li { flex-direction: column; align-items: flex-start; gap: .55rem; padding: 1.1rem .9rem 1.1rem 0; }
    .dl-usp-lijst li:nth-child(even) { padding-left: .9rem; }
}

/* -- De categorieblokken ---------------------------------------------- */

.dl-cat { padding-block: clamp(2.5rem, 2rem + 2vw, 4rem); }
.dl-cat-in { position: relative; }

.dl-cat-kop {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 1rem 2rem;
    margin-bottom: 1.75rem;
}

.dl-cat-kop h2 { margin: 0; font-size: clamp(1.5rem, 1.25rem + .9vw, 2rem); font-weight: 800; letter-spacing: -.03em; }
.dl-cat-kop .sub { margin: .4rem 0 0; max-width: 62ch; color: var(--ink-soft); font-size: .95rem; }
.dl-cat-kop .btn > svg { transition: transform .14s ease; }
.dl-cat-kop .btn:hover > svg { transform: translateX(2px); }

.dl-cat-subs { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0 0; padding: 0; list-style: none; }

.dl-cat-subs a {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 2.1rem;
    padding: .35rem .75rem;
    border: 1px solid var(--line);
    background: #ffffff;
    color: var(--ink-soft);
    font-size: .84rem;
    font-weight: 500;
    transition: border-color .14s ease, color .14s ease;
}

.dl-cat-subs a:hover { border-color: var(--ink); color: var(--ink); }
.dl-cat-subs svg { color: var(--ink-faint); }

.dl-artikelen {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
}

.dl-artikelen > * { display: grid; }

.dl-artikelen.is-vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1100px) { .dl-artikelen.is-vier { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .dl-artikelen.is-vier { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Het donkere vlak, niet bij elk blok: een accent dat overal staat is geen
   accent meer. De kaarten blijven wit. */
.dl-cat.is-donker {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--ek-950);
    color: #ffffff;
}

.dl-cat.is-donker::before {
    content: "";
    position: absolute;
    inset: -30% -10% auto -10%;
    height: 150%;
    z-index: -3;
    background:
        radial-gradient(54% 54% at 16% 30%, rgba(255, 255, 255, .06), transparent 68%),
        radial-gradient(44% 44% at 84% 10%, rgba(255, 255, 255, .05), transparent 70%);
}

.dl-cat-raster {
    position: absolute;
    inset: 0 0 auto 0;
    height: 95%;
    z-index: -2;
    background-image: url("../img/raster.svg");
    background-repeat: repeat;
    background-size: 988px;
    opacity: .18;
    mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .45) 15%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .45) 15%, transparent 100%);
}

.dl-cat.is-donker h2 { color: #ffffff; }
.dl-cat.is-donker .dl-eyebrow { color: rgba(255, 255, 255, .62); }
.dl-cat.is-donker .dl-cat-kop .sub { color: rgba(255, 255, 255, .72); }
.dl-cat.is-donker .dl-cat-subs a { border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .86); }
.dl-cat.is-donker .dl-cat-subs a:hover { border-color: #ffffff; color: #ffffff; }
.dl-cat.is-donker .dl-cat-subs svg { color: rgba(255, 255, 255, .55); }

/* Ingekaderd in plaats van van rand tot rand, voor een blok binnen de
   paginabreedte, zoals de verwante artikelen onder een productpagina. */
.dl-cat.is-donker.is-ingekaderd { padding-block: clamp(1.5rem, 1.2rem + 1.4vw, 2.5rem); }

/* -- De artikelkaart ------------------------------------------------------
   De kaart van _base in de stijl van ENKA: de foto op een zachtgrijs vlak
   binnen de kaart, waar een witte productfoto door multiply in oploopt, de
   naam iets vetter, en de prijs met btw groot. Alleen wat afwijkt staat op
   de foto.
   --------------------------------------------------------------------- */

.dl-art:hover {
    border-color: rgba(11, 11, 11, .16);
    box-shadow: 0 16px 36px rgba(11, 11, 11, .09);
}

.dl-art-foto { margin: .45rem .45rem 0; overflow: hidden; background: var(--surface-alt); }

.dl-art-foto > img {
    padding: 9%;
    object-fit: contain;
    mix-blend-mode: multiply;
    transition: transform .35s cubic-bezier(.16, 1, .3, 1), opacity .15s ease;
}

.dl-art:hover .dl-art-foto > img { transform: scale(1.035); }

.dl-art-nee { left: .6rem; bottom: .6rem; background: var(--ek-900); font-weight: 700; }

.dl-art-titel { font-weight: 600; letter-spacing: -.005em; }

.dl-art:hover .dl-art-titel,
.dl-art.is-koop .dl-art-link:hover .dl-art-titel {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .18em;
}

.dl-art-sku { font-size: .72rem; letter-spacing: .02em; }

.dl-art-koop { padding-top: 0; border-top: 0; }

/* Als lijst een rand rondom de foto, en geen lijn voor de prijs: de kaart
   heeft er nergens een. */
.dl-artikelen.is-lijst .dl-art-foto { margin: .45rem; }
.dl-artikelen.is-lijst .dl-art-koop { border-left: 0; border-top: 0; }

/* Het bedrag met btw voorop en groot, met wat het is er klein achter. */
.dl-art-prijzen.is-incl > div { display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: baseline; gap: .45rem; }
.dl-art-prijzen.is-incl dd { margin: 0; font-size: 1.22rem; font-weight: 800; letter-spacing: -.02em; color: var(--ek-950); }
.dl-art-prijzen.is-incl dt { font-weight: 500; }

@media (max-width: 520px) {
    .dl-artikelen, .dl-artikelen.is-vier { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
    .dl-art-foto { margin: .35rem .35rem 0; }
    .dl-art-body { padding: .7rem .7rem .75rem; }
    .dl-art-koop { padding: 0 .7rem .7rem; }
    .dl-art-titel { font-size: .85rem; }
    .dl-art-prijzen.is-incl dd { font-size: 1.05rem; }
    .dl-art-prijzen.is-incl dt { display: none; }
}

/* -- De showroom -------------------------------------------------------
   Het donkere vlak met het raster van onderaf, zoals het dealerblok bij
   DutchLine: links de uitnodiging, rechts de foto uit de winkel, en
   daaronder wat u er vindt.
   --------------------------------------------------------------------- */

.dl-showroom {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(3rem, 2.25rem + 3vw, 5rem);
    background: var(--ek-950);
    color: #ffffff;
}

.dl-showroom::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -3;
    background:
        radial-gradient(50% 80% at 18% 100%, rgba(255, 255, 255, .07), transparent 72%),
        radial-gradient(45% 75% at 88% 0%, rgba(255, 255, 255, .05), transparent 74%);
}

.dl-showroom-raster {
    position: absolute;
    inset: auto 0 0 0;
    height: 85%;
    z-index: -2;
    background-image: url("../img/raster.svg");
    background-repeat: repeat;
    background-size: 988px;
    opacity: .15;
    mask-image: linear-gradient(0deg, transparent 0%, rgba(0, 0, 0, .55) 9%, #000 24%, rgba(0, 0, 0, .4) 66%, transparent 100%);
    -webkit-mask-image: linear-gradient(0deg, transparent 0%, rgba(0, 0, 0, .55) 9%, #000 24%, rgba(0, 0, 0, .4) 66%, transparent 100%);
}

.dl-showroom-in {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(2rem, 1rem + 4vw, 4.5rem);
    align-items: center;
}

.dl-showroom h2 { margin: .9rem 0 0; font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.6rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.08; color: #ffffff; }
.dl-showroom-tekst > p:not(.dl-eyebrow-licht) { margin: 1rem 0 0; max-width: 50ch; color: rgba(255, 255, 255, .74); }
.dl-showroom .dl-hero-actions { margin-top: 1.75rem; }

.dl-showroom-foto {
    position: relative;
    margin: 0;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .14);
    box-shadow: 0 30px 60px rgba(0, 0, 0, .5);
}

.dl-showroom-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.dl-voordelen {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    margin: clamp(2rem, 1.5rem + 2vw, 3rem) 0 0;
    padding: 0;
    list-style: none;
}

.dl-voordelen > li {
    display: flex;
    align-items: start;
    gap: .85rem;
    padding: 1.1rem 1.15rem;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .05);
}

.dl-voordeel-icoon {
    flex: none;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .09);
    color: #ffffff;
}

.dl-voordeel { display: grid; gap: .2rem; }
.dl-voordeel strong { font-size: .95rem; font-weight: 600; }
.dl-voordeel span { font-size: .88rem; line-height: 1.45; color: rgba(255, 255, 255, .68); }

@media (max-width: 62rem) {
    .dl-showroom-in { grid-template-columns: minmax(0, 1fr); }
}

/* -- Uw project -------------------------------------------------------
   Een lichte band met het raster als sjabloon: de tekening knipt een laag
   inkt uit, zodat er één rasterbestand blijft. Links de uitnodiging, rechts
   de drie manieren om ons te bereiken als tegels.
   --------------------------------------------------------------------- */

.dl-band-licht {
    position: relative;
    isolation: isolate;
    padding-block: clamp(2.5rem, 2rem + 2vw, 4rem);
    background: linear-gradient(180deg, var(--ek-100) 0%, var(--surface-alt) 38%);
}

.dl-band-licht-raster {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: linear-gradient(180deg, var(--ek-950) 0%, rgba(11, 11, 11, .5) 46%, rgba(11, 11, 11, .3) 82%, rgba(11, 11, 11, 0) 100%);
    opacity: .07;
    mask-image: url("../img/raster.svg");
    mask-repeat: repeat;
    mask-size: clamp(620px, 52vw, 840px);
    -webkit-mask-image: url("../img/raster.svg");
    -webkit-mask-repeat: repeat;
    -webkit-mask-size: clamp(620px, 52vw, 840px);
}

.dl-project-in {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: clamp(2rem, 1rem + 4vw, 5rem);
    align-items: center;
}

.dl-project h2 { margin: .5rem 0 0; font-size: clamp(1.8rem, 1.3rem + 2vw, 3rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.04; }
.dl-project-tekst > p:not(.dl-eyebrow) { margin: 1.1rem 0 0; max-width: 58ch; color: var(--ink-soft); }

.dl-contactrij { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }

.dl-contactrij a {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .9rem;
    padding: .85rem 1rem;
    border: 1px solid var(--line);
    background: #ffffff;
    color: var(--ink);
    box-shadow: var(--shadow-sm);
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.dl-contactrij a:hover { border-color: var(--ink); box-shadow: var(--shadow); transform: translateY(-1px); color: var(--ink); }
.dl-contactrij a:hover .dl-action-icon { background: var(--ek-900); border-color: var(--ek-900); color: #ffffff; }
.dl-contactrij a > svg { color: var(--ink-faint); transition: transform .14s ease; }
.dl-contactrij a:hover > svg { transform: translateX(3px); color: var(--ink); }
.dl-contactrij .dl-action-value { font-size: .98rem; overflow-wrap: anywhere; }

.dl-contactrij .is-whatsapp .dl-action-icon { background: #25d366; border-color: #25d366; color: #ffffff; }
.dl-contactrij .is-whatsapp:hover .dl-action-icon { background: #1ebe5a; border-color: #1ebe5a; }

@media (max-width: 62rem) {
    .dl-project-in { grid-template-columns: minmax(0, 1fr); }
}

/* -- De virtuele rondleiding ------------------------------------------
   Het venster van Google laadt pas na een klik: het is zwaar, en het zet
   gegevens van Google in de browser. Tot die klik staat er de foto uit de
   winkel met een knop.
   --------------------------------------------------------------------- */

.dl-tour { padding-block: clamp(2.5rem, 2rem + 2vw, 4rem); }

.dl-tour-kaart { border: 1px solid var(--line-soft); background: #ffffff; box-shadow: var(--shadow); }

.dl-tour-kop {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    padding: 1.15rem 1.35rem;
    background: var(--ek-900);
    color: #ffffff;
}

.dl-tour-kop > div { display: flex; align-items: center; gap: .9rem; }

.dl-tour-kop .dl-voordeel-icoon { width: 42px; height: 42px; }
.dl-tour-kop h2 { margin: 0; font-size: 1.15rem; font-weight: 700; color: #ffffff; }
.dl-tour-kop p { margin: .15rem 0 0; font-size: .88rem; color: rgba(255, 255, 255, .7); }

.dl-tour-venster { position: relative; aspect-ratio: 21 / 9; background: var(--ek-950); }
.dl-tour-venster iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.dl-tour-venster > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }

.dl-tour-start {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: .9rem;
    padding: 1rem;
    color: #ffffff;
    text-align: center;
}

.dl-tour-start p { margin: 0; max-width: 46ch; font-size: .9rem; color: rgba(255, 255, 255, .78); }

.dl-tour-voet { margin: 0; padding: .75rem 1.35rem; border-top: 1px solid var(--line-soft); font-size: .84rem; color: var(--ink-faint); }

@media (max-width: 760px) {
    .dl-tour-venster { aspect-ratio: 4 / 3; }
}

/* -- Voettekst ------------------------------------------------------ */

.site-footer {
    margin-top: clamp(2.5rem, 2rem + 3vw, 4.5rem);
    padding-block: clamp(2.75rem, 2rem + 2.5vw, 4rem) 1.5rem;
    border-top: 0;
    background: var(--ek-900);
    color: rgba(255, 255, 255, .72);
}

/* Tegen de voet aan als de pagina op een donker of licht vlak eindigt:
   anders staat er een witte strook tussen twee gekleurde vlakken. */
#main:has(> .dl-band-licht:last-child) + .site-footer,
#main:has(> .dl-showroom:last-child) + .site-footer { margin-top: 0; }

.site-footer a { color: rgba(255, 255, 255, .8); }
.site-footer a:hover { color: #ffffff; }

.footer-grid { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 2.5rem; }

.footer-grid h4 {
    margin-bottom: 1rem;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .12em;
    color: rgba(255, 255, 255, .52);
}

.footer-grid h4.is-volgend { margin-top: 1.75rem; }
.footer-grid li + li { margin-top: .5rem; }

.dl-footer-logo { margin-bottom: 1.1rem; color: #ffffff; }
.dl-footer-logo .dl-logo-teken { width: 150px; }

.dl-footer-intro { max-width: 36ch; margin-bottom: 1.25rem; font-size: .9rem; line-height: 1.6; color: rgba(255, 255, 255, .62); }

.dl-footer-adres { margin: 0 0 .6rem; font-style: normal; line-height: 1.6; color: rgba(255, 255, 255, .86); }
.dl-footer-route { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; color: #ffffff !important; }

.dl-footer-contact a { display: inline-flex; align-items: center; gap: .55rem; overflow-wrap: anywhere; }

.dl-footer-tijden { display: grid; gap: .2rem; margin: 1.1rem 0 0; font-size: .86rem; }
.dl-footer-tijden > div { display: flex; justify-content: space-between; gap: 1rem; max-width: 16rem; color: rgba(255, 255, 255, .6); }
.dl-footer-tijden dt, .dl-footer-tijden dd { margin: 0; }
.dl-footer-tijden dd { font-variant-numeric: tabular-nums; }
.dl-footer-tijden .is-vandaag { color: #ffffff; font-weight: 600; }

.footer-bottom { margin-top: 2.5rem; border-top: 1px solid rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .5); }
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; margin: 0; padding: 0; list-style: none; }
.footer-bottom a { color: rgba(255, 255, 255, .6); }

@media (max-width: 960px) {
    .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-grid > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
    .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
}

/* -- De donkere paginakop ---------------------------------------------
   Hetzelfde vlak als de hero, over de volle breedte, met het raster
   rechtsboven. Een pagina opent zo met het merk en niet met een kaal
   kruimelpad.
   --------------------------------------------------------------------- */

.dl-kop {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(1rem, .85rem + .7vw, 1.6rem) clamp(2.25rem, 1.75rem + 2vw, 3.25rem);
    background: var(--ek-950);
    color: #ffffff;
}

.dl-kop::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -3;
    background:
        radial-gradient(52% 78% at 14% 0%, rgba(255, 255, 255, .07), transparent 70%),
        radial-gradient(44% 72% at 88% 100%, rgba(255, 255, 255, .05), transparent 74%);
}

.dl-kop-raster {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: url("../img/raster.svg");
    background-repeat: repeat;
    background-size: clamp(620px, 52vw, 840px);
    opacity: .18;
    mask-image: radial-gradient(56% 118% at 84% 32%, #000 0%, rgba(0, 0, 0, .4) 52%, transparent 84%);
    -webkit-mask-image: radial-gradient(56% 118% at 84% 32%, #000 0%, rgba(0, 0, 0, .4) 52%, transparent 84%);
}

@media (max-width: 780px) {
    .dl-kop-raster {
        opacity: .12;
        mask-image: radial-gradient(86% 62% at 96% 100%, #000 0%, rgba(0, 0, 0, .34) 54%, transparent 86%);
        -webkit-mask-image: radial-gradient(86% 62% at 96% 100%, #000 0%, rgba(0, 0, 0, .34) 54%, transparent 86%);
    }
}

.dl-kop-in { position: relative; }
.dl-kop-tekst { max-width: min(100%, 46rem); }

.dl-kop h1 { margin: 0; font-size: clamp(2rem, 1.5rem + 2.2vw, 3rem); font-weight: 800; line-height: 1.04; letter-spacing: -.032em; color: #ffffff; }
.dl-kop-lead { margin: .8rem 0 0; max-width: 56ch; font-size: clamp(1rem, .95rem + .25vw, 1.12rem); line-height: 1.5; color: rgba(255, 255, 255, .74); }
.dl-kop .dl-eyebrow { color: rgba(255, 255, 255, .62); }

.dl-kop .crumbs, .dl-pdp-band .crumbs {
    margin: 0 0 clamp(1.1rem, .9rem + .8vw, 1.75rem);
    padding-block: 0;
    font-size: .86rem;
    color: rgba(255, 255, 255, .55);
}

.dl-kop .crumbs a, .dl-pdp-band .crumbs a { color: rgba(255, 255, 255, .66); }
.dl-kop .crumbs a:hover, .dl-pdp-band .crumbs a:hover { color: #ffffff; }
.dl-kop .crumbs [aria-current], .dl-pdp-band .crumbs [aria-current] { color: #ffffff; font-weight: 500; }
.dl-kop .crumbs li:not(:last-child)::after, .dl-pdp-band .crumbs li:not(:last-child)::after { color: rgba(255, 255, 255, .34); }

/* -- Catalogus: zijbalk en werkbalk ----------------------------------- */

/* De categorieën in de zijbalk: hetzelfde donkere vlak met raster als de
   paginakop, smal en hoog. */
.dl-side-cats {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 1.15rem 1rem 1.25rem;
    background: var(--ek-950);
    color: #ffffff;
}

.dl-side-raster {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: url("../img/raster.svg");
    background-repeat: repeat;
    background-size: 430px;
    opacity: .15;
    mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .34) 42%, transparent 80%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .34) 42%, transparent 80%);
}

.dl-side-lijst { margin: 0; padding: 0; list-style: none; font-size: .93rem; }
.dl-side-lijst > li + li { margin-top: .05rem; }

.dl-side-lijst:not([data-niveau="1"]) {
    margin: .3rem 0 .55rem .4rem;
    padding-left: .6rem;
    border-left: 1px solid rgba(255, 255, 255, .16);
    font-size: .88rem;
}

.dl-side-lijst a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .6rem;
    padding: .4rem .6rem;
    margin-inline: -.25rem;
    color: #ffffff;
    transition: background-color .14s ease;
}

.dl-side-lijst a > span:first-child { min-width: 0; }
.dl-side-lijst a:hover { background-color: rgba(255, 255, 255, .08); color: #ffffff; }
.dl-side-lijst a:focus-visible { outline: 2px solid #ffffff; outline-offset: -2px; }
.dl-side-lijst > li.is-pad > .dl-side-rij > a { font-weight: 600; }

.dl-side-lijst a[aria-current] { position: relative; background-color: rgba(255, 255, 255, .14); font-weight: 600; }
.dl-side-lijst a[aria-current]::before { content: ""; position: absolute; inset-block: .3rem; inset-inline-start: 0; width: 2px; background: #ffffff; }

.dl-side-n { flex: none; font-size: .76rem; color: rgba(255, 255, 255, .6); font-variant-numeric: tabular-nums; }
.dl-side-lijst a:hover .dl-side-n { color: rgba(255, 255, 255, .85); }

.dl-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1rem;
    margin: 0 0 1.15rem;
    padding: .7rem .95rem;
    border: 1px solid var(--line);
    background: var(--surface-alt);
    font-size: .9rem;
}

.dl-toolbar-sort { display: flex; align-items: center; gap: .6rem; }
.dl-toolbar-sort label { font-size: .88rem; color: var(--ink-soft); }
.dl-toolbar-sort select { width: auto; min-height: 2.5rem; padding-block: .4rem; font-size: .9rem; }

/* -- Het assortiment en zoeken ---------------------------------------- */

.dl-cats {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

.dl-cats-block {
    display: grid;
    grid-template-rows: auto 1fr auto;
    padding: 1.25rem 1.35rem 1.15rem;
    border: 1px solid var(--line-soft);
    background: var(--surface);
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.dl-cats-block:hover { border-color: rgba(11, 11, 11, .28); box-shadow: 0 10px 26px rgba(11, 11, 11, .08); transform: translateY(-2px); }

.dl-cats-parent { display: flex; align-items: center; gap: .75rem; font-size: 1.05rem; font-weight: 700; letter-spacing: -.015em; color: var(--ink); }
.dl-cats-parent:hover { color: var(--ink); }

.dl-cats-teken {
    display: grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    border: 1px solid var(--line);
    background: var(--surface-alt);
    color: var(--ek-900);
    transition: background-color .16s ease, color .16s ease;
}

.dl-cats-block:hover .dl-cats-teken { background: var(--ek-900); border-color: var(--ek-900); color: #ffffff; }

.dl-cats-zin { margin: .75rem 0 0; min-height: calc(1.45em * 2); font-size: .88rem; line-height: 1.45; color: var(--ink-soft); }

.dl-cats-sub { margin: .95rem 0 0; padding: .85rem 0 0; border-top: 1px solid var(--line-soft); list-style: none; font-size: .87rem; }
.dl-cats-sub li + li { margin-top: .05rem; }
.dl-cats-sub a { display: block; padding: .25rem 0; color: var(--ink-soft); }
.dl-cats-sub a:hover { color: var(--ink); }

.dl-cats-voet { margin: .9rem 0 0; padding-top: .85rem; border-top: 1px solid var(--line-soft); font-size: .86rem; font-weight: 600; }
.dl-cats-voet a { display: inline-flex; align-items: center; gap: .4rem; color: var(--ink); }
.dl-cats-voet svg { transition: transform .14s ease; }
.dl-cats-voet a:hover svg { transform: translateX(3px); }

.dl-zoek-leeg { display: grid; grid-template-columns: 22rem minmax(0, 1fr); gap: 2rem; align-items: start; }
.dl-zoek-tips h2 { margin: 0 0 .8rem; font-size: 1.2rem; }
.dl-zoek-tips ul { margin: 0 0 1rem; padding-left: 1.1rem; color: var(--ink-soft); }
.dl-zoek-tips li + li { margin-top: .4rem; }

@media (max-width: 900px) {
    .dl-zoek-leeg { grid-template-columns: minmax(0, 1fr); }
}

/* -- Contact en de pagina's met tekst --------------------------------- */

.dl-contact {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 24rem;
    gap: clamp(1rem, .8rem + 1vw, 1.75rem);
    align-items: start;
}

.dl-contact-vraag textarea { min-height: 10rem; }
.dl-contact-over { margin: 0 0 1.25rem; padding: .85rem 1rem; background: var(--surface-alt); font-size: .92rem; }
.dl-contact-verstuur { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-top: .5rem; }
.dl-contact-verstuur span { font-size: .84rem; color: var(--ink-faint); }

.dl-contact-zij { display: grid; gap: .75rem; }

.dl-tijden { display: grid; margin: 0; font-size: .89rem; }
.dl-tijden > div { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid var(--line-soft); }
.dl-tijden > div:last-child { border-bottom: 0; padding-bottom: 0; }
.dl-tijden > div:first-child { padding-top: 0; }
.dl-tijden dt, .dl-tijden dd { margin: 0; }
.dl-tijden dt { color: var(--ink-soft); }
.dl-tijden dd { font-weight: 600; font-variant-numeric: tabular-nums; }
.dl-tijden .is-vandaag dt, .dl-tijden .is-vandaag dd { color: var(--ink); font-weight: 700; }

@media (max-width: 960px) {
    .dl-contact { grid-template-columns: minmax(0, 1fr); }
}

.dl-formulier { margin: 0; padding: 1.25rem 1.5rem; border-left: 2px solid var(--ek-900); background: var(--surface-alt); font-size: .92rem; }

.dl-over { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1rem; align-items: stretch; }
.dl-over .dl-tekst { max-width: none; }
.dl-over-foto { position: relative; min-height: 18rem; margin: 0; overflow: hidden; box-shadow: var(--shadow); }
.dl-over-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dl-over-adres { margin: 0 0 1rem; font-style: normal; line-height: 1.6; }

.dl-over-winkel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: start; }

@media (max-width: 900px) {
    .dl-over { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 960px) {
    .dl-over-winkel { grid-template-columns: minmax(0, 1fr); }
}


/* -- Inloggen ---------------------------------------------------------
   Links effen zwart, zonder gloed of raster, met de kop bovenaan en de
   vier punten onderaan, even hoog als het formulier ernaast.
   --------------------------------------------------------------------- */

@media (min-width: 901px) {
    .dl-portaal { align-items: stretch; }
}

.dl-portaal-welkom {
    display: flex;
    flex-direction: column;
    background: var(--ek-950);
}

.dl-portaal-welkom::before,
.dl-portaal-welkom .dl-aanmeld-raster { display: none; }

.dl-portaal-lead { margin-bottom: 0; }

.dl-portaal-kenmerken { margin-top: auto; padding-top: clamp(1.5rem, 1rem + 2vw, 3rem); }

/* -- Rondingen --------------------------------------------------------
   Alle rondingen van ENKA bij elkaar. De variabelen bovenaan zetten elke
   ronding van _base op hoogstens 3 pixels (--dl-r-max); hier krijgen de
   onderdelen van ENKA zelf hun 3 pixels, en de kleinste blokjes 2, anders
   worden het rondjes. Banden die van rand tot rand lopen, zoals de
   topbalk, de hero, de categorierij, de paginakop en de voet, blijven
   recht: daar zou een ronding alleen in de hoek van het scherm vallen.
   --------------------------------------------------------------------- */

select, select.input, .field select,
.header-search input,
.dl-action, .dl-action-icon, .nav-toggle-label,
.dl-hero-foto, .dl-cat-subs a,
.dl-art, .dl-showroom-foto, .dl-voordelen > li, .dl-voordeel-icoon,
.dl-contactrij a, .dl-tour-kaart,
.dl-cat.is-donker.is-ingekaderd,
.dl-side-cats, .dl-toolbar, .dl-cats-block, .dl-cats-teken,
.dl-kaart, .dl-contact-over, .dl-formulier, .dl-over-foto,
.dl-melding { border-radius: var(--radius); }

input[type="checkbox"], input[type="radio"],
.dl-stip, .dl-status::before, .dl-status.is-open::after,
.header-search button, .dl-action-telling,
.dl-band-lopend-rij li::before, .dl-art-nee, .dl-art-foto, .dl-art-streepjes > span,
.dl-side-lijst a, .dl-merk, .dl-koop-voorraad strong,
.dl-filter-teller, .dl-filter-staal, .dl-gecontroleerd, .dl-verdeling-balk, .dl-ks-aantal { border-radius: var(--radius-sm); }

/* Een kaart met een kopbalk: de balk heeft de bovenhoeken en het vak
   eronder de onderhoeken. Zo hoeft de kaart niets af te knippen, en blijft
   een uitklapper die eruit steekt heel. */
.dl-kaart > h2 { border-radius: var(--radius) var(--radius) 0 0; }
.dl-kaart-in { border-radius: 0 0 var(--radius) var(--radius); }

/* De rondleiding knipt wel af: het venster van Google heeft zelf rechte
   hoeken. */
.dl-tour-kaart { overflow: hidden; }

/* -- Minder beweging -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .dl-hero .dl-eyebrow-licht, .dl-hero-titel, .dl-hero .lead, .dl-hero-onder, .dl-hero-foto, .dl-hero-cats {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .dl-status.is-open::after { animation: none; opacity: 0; }
    .dl-art:hover, .dl-cats-block:hover, .dl-contactrij a:hover, .dl-whatsapp:hover { transform: none; }
    .dl-whatsapp, .dl-whatsapp-tekst, .dl-naar-boven { transition: none; }
    .dl-melding, .dl-logo-teken { transition: none; }
    .dl-art-foto > img.dl-art-ander, .dl-art-streepjes { transition: none; }
}