/* =====================================================================
   DutchLine V2 - standaardtheme
   =====================================================================
   Merkneutraal opgezet. Alle kleuren, vormen en afstanden staan als
   variabele bovenaan; een merktheme hoeft alleen die waarden te
   overschrijven en erft de rest. Zo hoef je geen component opnieuw te
   schrijven om er anders uit te zien.

   Opbouw:
     1. Variabelen
     2. Basis en typografie
     3. Layout
     4. Koptekst en navigatie
     5. Voettekst
     6. Knoppen
     7. Kaarten en rasters
     8. Formulieren
     9. Kleine onderdelen
    10. Pagina-onderdelen
   ===================================================================== */

/* -- 1. Variabelen -------------------------------------------------- */

:root {
    /* Kleur. Een merktheme herdefinieert deze vier en is grotendeels klaar. */
    --accent:        #2f4a7a;
    --accent-hover:  #24395e;
    --accent-soft:   #eef2f9;
    --accent-text:   #ffffff;

    /* Neutraal */
    --ink:           #14181f;
    --ink-soft:      #5b6472;
    --ink-faint:     #8b94a3;
    --line:          #e4e7ec;
    --line-soft:     #f0f2f5;
    --surface:       #ffffff;
    --surface-alt:   #f7f8fa;

    /* Status */
    --ok:            #1f9d6b;
    --warn:          #b8860b;
    --danger:        #c23b3b;

    /* Vorm */
    --radius:        10px;
    --radius-lg:     16px;
    --radius-pill:   999px;

    /* De grootste ronding die er mag zijn. Elke ronding met een eigen maat
       staat als min(maat, --dl-r-max): een theme dat het strak wil, zoals
       ENKA, zet hier 3px en is overal klaar. */
    --dl-r-max:      999px;

    /* Diepte. Subtiel houden; een webshop mag niet zweven. */
    --shadow-sm:     0 1px 2px rgba(20, 24, 31, .06);
    --shadow:        0 2px 8px rgba(20, 24, 31, .07);
    --shadow-lg:     0 12px 32px rgba(20, 24, 31, .10);

    /* Ruimte */
    --gap:           1rem;
    --gap-lg:        2rem;
    --page-max:      1240px;
    --page-pad:      1.25rem;

    /* Letters */
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-head: var(--font);
}

/* -- 2. Basis en typografie ----------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink);
    background: var(--surface);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--font-head);
    line-height: 1.25;
    letter-spacing: -.01em;
    margin: 0 0 .5em;
    font-weight: 600;
}

h1 { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem); }
h2 { font-size: clamp(1.35rem, 1.15rem + .8vw, 1.7rem); }
h3 { font-size: 1.15rem; }
h4 { font-size: 1rem; }

p { margin: 0 0 1em; }

/* Geen onderstreping, ook niet bij aanwijzen. Een streep onder tekst leest
   als een correctie en hakt bovendien door de staarten van de letters heen.
   Wat een link is blijkt uit zijn kleur, en dat hij aanwijsbaar is uit de
   kleurverandering. De focusring blijft wel: daar hangt de toegankelijkheid
   van het toetsenbord aan. */
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

img { max-width: 100%; height: auto; display: block; }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--gap-lg) 0; }

small { font-size: .875rem; }

/* Zichtbaar waar de focus staat. Wie met het toetsenbord werkt moet kunnen
   volgen waar hij is; dat weghalen omdat het "lelijk" is sluit mensen buiten. */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: min(3px, var(--dl-r-max));
}

/* Alleen voor schermlezers. */
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--accent); color: var(--accent-text);
    padding: .75rem 1.25rem; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

/* -- 3. Layout ------------------------------------------------------ */

.wrap {
    max-width: var(--page-max);
    margin: 0 auto;
    padding-inline: var(--page-pad);
}

.wrap-narrow { max-width: 720px; }
.wrap-mid    { max-width: 940px; }

.section    { padding-block: clamp(2rem, 1.2rem + 3vw, 3.5rem); }
.section-sm { padding-block: 1.75rem; }
.section-alt { background: var(--surface-alt); }

.stack > * + * { margin-top: var(--gap); }
.stack-lg > * + * { margin-top: var(--gap-lg); }

.row {
    display: flex;
    gap: var(--gap);
    align-items: center;
    flex-wrap: wrap;
}
.row-between { justify-content: space-between; }
.row-end     { justify-content: flex-end; }

.muted  { color: var(--ink-soft); }
.faint  { color: var(--ink-faint); }
.center { text-align: center; }

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

/* -- 4. Koptekst en navigatie --------------------------------------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}

.header-main {
    display: flex;
    align-items: center;
    gap: var(--gap);
    padding-block: .9rem;
}

.logo {
    font-family: var(--font-head);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--ink);
    white-space: nowrap;
}
.logo:hover { text-decoration: none; }
.logo span { color: var(--accent); }

.header-search {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 30rem;
    position: relative;
}
.header-search input {
    width: 100%;
    padding: .6rem 2.5rem .6rem .9rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--surface-alt);
    font: inherit;
    font-size: .95rem;
}
.header-search input:focus {
    background: var(--surface);
    border-color: var(--accent);
    outline: none;
}
.header-search button {
    position: absolute;
    right: .3rem; top: 50%;
    transform: translateY(-50%);
    border: 0; background: none;
    padding: .4rem .6rem;
    cursor: pointer;
    color: var(--ink-soft);
    line-height: 0;
}
.header-search button:hover { color: var(--accent); }

.header-actions {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-left: auto;
}

.icon-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .75rem;
    border-radius: var(--radius);
    color: var(--ink-soft);
    font-size: .9rem;
    white-space: nowrap;
}
.icon-link:hover {
    background: var(--surface-alt);
    color: var(--ink);
    text-decoration: none;
}

/* Hoofdnavigatie */
.nav-bar { border-top: 1px solid var(--line-soft); }

.nav-list {
    display: flex;
    gap: .25rem;
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.nav-list::-webkit-scrollbar { display: none; }

.nav-list > li > a {
    display: block;
    padding: .7rem .85rem;
    color: var(--ink-soft);
    font-size: .93rem;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
}
.nav-list > li > a:hover {
    color: var(--ink);
    text-decoration: none;
}
.nav-list > li > a[aria-current="page"] {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* Menuknop voor smalle schermen. Werkt zonder JavaScript via een checkbox,
   zodat het menu ook opengaat als een script faalt. */
.nav-toggle { display: none; }
.nav-toggle-label {
    display: none;
    padding: .5rem .7rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    cursor: pointer;
    color: var(--ink-soft);
}

@media (max-width: 860px) {
    .nav-toggle-label { display: inline-flex; align-items: center; gap: .45rem; }
    .nav-bar .nav-list {
        display: none;
        flex-direction: column;
        padding-bottom: .5rem;
    }
    .nav-toggle:checked ~ .nav-bar .nav-list { display: flex; }
    .nav-list > li > a { padding: .7rem .25rem; }
    .nav-list > li > a[aria-current="page"] {
        border-bottom-color: transparent;
        border-left: 2px solid var(--accent);
        padding-left: .6rem;
    }
    .header-search { order: 3; flex-basis: 100%; max-width: none; }
    .header-main { flex-wrap: wrap; }
}

/* -- 5. Voettekst --------------------------------------------------- */

.site-footer {
    margin-top: clamp(2.5rem, 2rem + 3vw, 4.5rem);
    background: var(--surface-alt);
    border-top: 1px solid var(--line);
    padding-block: clamp(2rem, 1.5rem + 2vw, 3rem) 1.5rem;
    font-size: .92rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: var(--gap-lg);
}

.footer-grid h4 {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--ink-faint);
    margin-bottom: .75rem;
}

.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li + li { margin-top: .4rem; }
.footer-grid a { color: var(--ink-soft); }
.footer-grid a:hover { color: var(--accent); }

.footer-bottom {
    margin-top: var(--gap-lg);
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    gap: .5rem var(--gap);
    justify-content: space-between;
    color: var(--ink-faint);
    font-size: .86rem;
}

/* -- 6. Knoppen ----------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .65rem 1.15rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: var(--accent);
    color: var(--accent-text);
    font: inherit;
    font-size: .95rem;
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover { background: var(--accent-hover); text-decoration: none; color: var(--accent-text); }

.btn-outline {
    background: transparent;
    border-color: var(--line);
    color: var(--ink);
}
.btn-outline:hover { background: var(--surface-alt); border-color: var(--ink-faint); color: var(--ink); }

.btn-soft {
    background: var(--accent-soft);
    color: var(--accent);
}
.btn-soft:hover { background: var(--accent); color: var(--accent-text); }

.btn-ghost { background: transparent; color: var(--ink-soft); }
.btn-ghost:hover { background: var(--surface-alt); color: var(--ink); }

.btn-lg  { padding: .85rem 1.6rem; font-size: 1rem; }
.btn-sm  { padding: .4rem .75rem; font-size: .86rem; }
.btn-block { width: 100%; }

.btn[disabled], .btn[aria-disabled="true"] {
    opacity: .5;
    cursor: not-allowed;
}

/* -- 7. Kaarten en rasters ------------------------------------------ */

.grid {
    display: grid;
    gap: var(--gap);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
}
.grid-wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); }
.grid-2 { display: grid; gap: var(--gap-lg); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.card-pad { padding: 1.25rem; }

/* Productkaart */
.product-card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
.product-card:hover {
    border-color: transparent;
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.product-card .thumb {
    aspect-ratio: 1;
    background: var(--surface-alt);
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: .75rem;
}
.product-card .thumb img {
    width: 100%; height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.product-card .body {
    padding: .9rem 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    flex: 1;
}

.product-card .title {
    font-size: .93rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--ink);

    /* Twee regels en dan afkappen, zodat kaarten in een rij even hoog blijven. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.product-card a:hover .title { color: var(--accent); }
.product-card .meta { font-size: .8rem; color: var(--ink-faint); margin-top: auto; }

.product-card .price {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ink);
}
.price-note { font-size: .78rem; color: var(--ink-faint); font-weight: 400; }

/* Categoriekaart.
   Bewust een rij en geen groot vlak: er zijn geen categoriefoto's in de
   database, en een leeg vlak van 130px hoog met een woord onderin ziet eruit
   als een afbeelding die niet geladen is. */
.cat-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .9rem 1.1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    font-weight: 500;
    transition: border-color .18s ease, background .18s ease;
}
.cat-card::after {
    content: "";
    flex: none;
    width: 7px; height: 7px;
    border-top: 2px solid var(--ink-faint);
    border-right: 2px solid var(--ink-faint);
    transform: rotate(45deg);
    transition: border-color .18s ease;
}
.cat-card:hover {
    text-decoration: none;
    border-color: var(--accent);
    background: var(--accent-soft);
}
.cat-card:hover::after { border-color: var(--accent); }
.cat-card .count { display: block; font-size: .8rem; color: var(--ink-faint); font-weight: 400; }

/* -- 8. Formulieren ------------------------------------------------- */

.field { margin-bottom: 1.1rem; }

.field label {
    display: block;
    margin-bottom: .35rem;
    font-size: .9rem;
    font-weight: 500;
}

.field .req { color: var(--danger); }

.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 {
    width: 100%;
    padding: .65rem .85rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    font: inherit;
    font-size: .95rem;
    color: var(--ink);
}

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

.field textarea { min-height: 8rem; resize: vertical; }

.field .help { margin-top: .3rem; font-size: .83rem; color: var(--ink-faint); }
.field .error { margin-top: .3rem; font-size: .83rem; color: var(--danger); }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea {
    border-color: var(--danger);
}

.field-row {
    display: grid;
    gap: 0 var(--gap);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}

.check {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    font-size: .9rem;
}
.check input { margin-top: .25rem; flex: none; }

/* -- 9. Kleine onderdelen ------------------------------------------- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .55rem;
    border-radius: var(--radius-pill);
    font-size: .76rem;
    font-weight: 500;
    background: var(--surface-alt);
    color: var(--ink-soft);
}
.badge-ok     { background: #e7f6ef; color: #146c4a; }
.badge-warn   { background: #fdf3e0; color: #8a6400; }
.badge-danger { background: #fbeaea; color: #962f2f; }
.badge-accent { background: var(--accent-soft); color: var(--accent); }

.notice {
    padding: .9rem 1.1rem;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: var(--surface-alt);
    font-size: .93rem;
}
.notice-accent { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.notice-ok     { background: #e7f6ef; border-color: transparent; color: #146c4a; }
.notice-warn   { background: #fdf3e0; border-color: transparent; color: #8a6400; }
.notice-danger { background: #fbeaea; border-color: transparent; color: #962f2f; }

.crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    align-items: center;
    padding-block: .9rem;
    font-size: .85rem;
    color: var(--ink-faint);
    list-style: none;
    margin: 0;
}
.crumbs a { color: var(--ink-soft); }
.crumbs li:not(:last-child)::after { content: "/"; margin-left: .4rem; color: var(--line); }
.crumbs [aria-current] { color: var(--ink); }

.pager {
    display: flex;
    gap: .3rem;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-top: var(--gap-lg);
    list-style: none;
    padding: 0;
}
.pager a, .pager span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.4rem;
    height: 2.4rem;
    padding-inline: .6rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--ink-soft);
    font-size: .9rem;
}
.pager a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.pager [aria-current] { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.pager .gap { border: 0; min-width: 1.2rem; }

.empty {
    padding: clamp(2.5rem, 2rem + 3vw, 4.5rem) 1.5rem;
    text-align: center;
    color: var(--ink-soft);
    border: 1px dashed var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface-alt);
}
.empty h3 { color: var(--ink); }

.tag-list { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.tag {
    display: inline-block;
    padding: .35rem .75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    font-size: .85rem;
    color: var(--ink-soft);
    background: var(--surface);
}
.tag:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }

/* -- 10. Pagina-onderdelen ------------------------------------------ */

.hero {
    background: var(--surface-alt);
    border-bottom: 1px solid var(--line);
    padding-block: clamp(2.5rem, 2rem + 4vw, 5rem);
}
.hero h1 { max-width: 20ch; }
.hero p  { max-width: 56ch; font-size: 1.1rem; color: var(--ink-soft); }
.hero .row { margin-top: 1.5rem; }

.page-head {
    padding-block: 1.5rem 1rem;
    border-bottom: 1px solid var(--line-soft);
    margin-bottom: var(--gap-lg);
}
.page-head h1 { margin-bottom: .25rem; }
.page-head p  { margin: 0; color: var(--ink-soft); }

.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--gap);
    margin-bottom: var(--gap);
    flex-wrap: wrap;
}
.section-head h2 { margin: 0; }
.section-head a  { font-size: .9rem; }

/* Twee kolommen met een zijbalk, die onder elkaar vallen op smal. */
.with-side {
    display: grid;
    gap: var(--gap-lg);
    grid-template-columns: 250px minmax(0, 1fr);
    align-items: start;
}
@media (max-width: 900px) {
    .with-side { grid-template-columns: 1fr; }
    .side { order: 2; }
}

.side-box + .side-box { margin-top: var(--gap-lg); }
.side-box h4 {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--ink-faint);
    margin-bottom: .6rem;
}
.side-list { list-style: none; margin: 0; padding: 0; font-size: .92rem; }
.side-list li + li { margin-top: .1rem; }
.side-list a {
    display: block;
    padding: .35rem .5rem;
    margin-inline: -.5rem;
    border-radius: var(--radius);
    color: var(--ink-soft);
}
.side-list a:hover { background: var(--surface-alt); color: var(--ink); text-decoration: none; }
.side-list a[aria-current] { background: var(--accent-soft); color: var(--accent); font-weight: 500; }

/* Productpagina */
.product-layout {
    display: grid;
    gap: var(--gap-lg);
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: start;
}
@media (max-width: 820px) { .product-layout { grid-template-columns: 1fr; } }

.product-figure {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface-alt);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    overflow: hidden;
}
.product-figure img { max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }

.thumb-strip { display: flex; gap: .5rem; margin-top: .75rem; flex-wrap: wrap; }
.thumb-strip img {
    width: 66px; height: 66px;
    object-fit: contain;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-alt);
    padding: .3rem;
    cursor: pointer;
}
.thumb-strip img:hover { border-color: var(--accent); }

.spec-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.spec-table th, .spec-table td {
    padding: .6rem .25rem;
    text-align: left;
    border-bottom: 1px solid var(--line-soft);
    vertical-align: top;
}
.spec-table th { color: var(--ink-soft); font-weight: 400; width: 40%; }

/* Blok dat vraagt om in te loggen voor prijzen. Bij DutchLine is dit de
   belangrijkste knop op de pagina; bij Enka bestaat hij niet. */
.price-gate {
    padding: 1.25rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--accent-soft);
}
.price-gate p { margin-bottom: .9rem; color: var(--ink-soft); }

/* Rustiger voor wie bewegingen vervelend vindt. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
    .product-card:hover { transform: none; }
}


/* Meldingen. Een theme legt hier zijn eigen opmaak overheen (zie
   .dl-melding in het DutchLine-theme); dit is de terugval, zodat een
   melding altijd leesbaar op het scherm staat en niet als losse regel
   tekst tussen de rest verdwijnt. */
.meldingen { display: grid; gap: .5rem; margin: 1rem 0; }

.melding {
    margin: 0;
    padding: .75rem 1rem;
    border: 1px solid var(--line);
    border-left-width: 3px;
    border-radius: var(--radius);
    background: #ffffff;
    font-size: .92rem;
}

.melding-goed { border-left-color: #0fae8a; background: #f2fdfa; }
.melding-info { border-left-color: var(--accent); background: #f4f6fd; }
.melding-let  { border-left-color: #eab308; background: #fffbeb; }
.melding-fout { border-left-color: #dc2626; background: #fef3f2; }

/* Afdrukken: alles wat niet de inhoud is, weg. */
@media print {
    .site-header, .site-footer, .btn, .skip-link { display: none !important; }
    body { font-size: 12pt; }
}

/* =====================================================================
   De winkel
   =====================================================================
   Alles hieronder is de opmaak van de schermen in _base/templates: de
   topbalk, de koptekst met het menu, de hero, de kaarten, de
   productpagina, het account en het beheer. Het uiterlijk is dat van
   DutchLine, het systeem waar de winkel op gebouwd is. Een theme zet er
   in zijn eigen theme.css alleen zijn stijl overheen: andere kleuren
   (de --dl-variabelen), een ander lettertype of andere rondingen, en de
   paar onderdelen die alleen dat merk heeft.

   De kleuren en maten komen uit de bestaande site van DutchLine, zodat V2
   naast V1 kan draaien zonder dat het een ander bedrijf lijkt.
   ===================================================================== */

/* -- Het lettertype -------------------------------------------------
   Inter, van onze eigen server en niet van Google: geen verzoek naar een
   ander bedrijf bij elke pagina. Het is een variabel lettertype, dus één
   bestand per tekenset voor alle gewichten van 400 tot 800. De tekensets
   en hun bereiken zijn die van Google Fonts; een browser haalt alleen het
   bestand op waarvan een teken op de pagina staat, meestal alleen latin.
   De licentie (SIL Open Font License) staat naast de bestanden. */

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("../fonts/inter/inter-cyrillic-ext.woff2") format("woff2");
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("../fonts/inter/inter-cyrillic.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("../fonts/inter/inter-greek-ext.woff2") format("woff2");
    unicode-range: U+1F00-1FFF;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("../fonts/inter/inter-greek.woff2") format("woff2");
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("../fonts/inter/inter-vietnamese.woff2") format("woff2");
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("../fonts/inter/inter-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("../fonts/inter/inter-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* -- Tokens --------------------------------------------------------- */

:root {
    /* Het blauw van DutchLine, rechtstreeks uit het logo gehaald.
       Niet geschat: de 3875 bij 965 pixels van het beeldmerk zijn nagelopen
       en op kleur gesorteerd. Van de 237.000 blauwe punten is #354397 de
       middelste, #1F2756 de donkerste rand van de D en #8397E0 de lichte
       glans erin. Dat eerste getal is dus letterlijk het merkblauw.

       Hiervoor stond hier #304DA1: een tint helderder en blauwer dan het
       logo, met daaronder een bijna zwarte marine (#131F3F) die in het
       beeldmerk helemaal niet voorkomt. Naast elkaar gezet leek de site
       daardoor van een ander bedrijf dan het logo linksboven. */
    --dl-blue-950:  #161C3E;
    --dl-blue-900:  #1F2756;
    --dl-blue-800:  #2A3576;
    --dl-blue-700:  #354397;
    --dl-blue-600:  #4A58AE;
    --dl-blue-500:  #6577C6;
    /* De tussentinten: de gloed op de donkere vlakken (450), de streepjes
       en accenten daarop (400, 200) en het licht in de kop van de hero
       (150). Een theme in een andere kleur zet ze allemaal. */
    --dl-blue-450:  #5B78C0;
    --dl-blue-400:  #6F8CDB;
    --dl-blue-300:  #8397E0;
    --dl-blue-200:  #8EA6E6;
    --dl-blue-150:  #C3D2FB;
    --dl-blue-100:  #E8ECF9;

    /* Het zilvergrijs van de L. Stond nergens in het thema, terwijl het de
       halve merknaam is. Goed voor randen, rustige vlakken en alles wat
       niet om aandacht hoeft te vragen. */
    --dl-grey-700:  #3C413F;
    --dl-grey-600:  #565B5A;
    --dl-grey-400:  #8D8D8D;
    --dl-grey-200:  #CFD1D0;

    --accent:       var(--dl-blue-700);
    --accent-hover: var(--dl-blue-800);
    --accent-soft:  color-mix(in srgb, var(--dl-blue-700) 10%, transparent);
    --accent-text:  #ffffff;

    /* Het zwart van "utch Line" in het logo is #10110C en niet het
       blauwzwart dat hier stond. Klein verschil, maar de kop van een pagina
       staat vaak vlak naast het beeldmerk. */
    --ink:          #10110C;
    --ink-soft:     rgba(16, 17, 12, .70);
    --ink-faint:    rgba(16, 17, 12, .52);
    --line:         rgba(16, 17, 12, .12);
    --line-soft:    rgba(16, 17, 12, .07);
    --surface:      #ffffff;
    --surface-alt:  #f7f8fb;

    /* De ronding van elke knop. Eén getal, zodat de knop in de koptekst,
       het menu-item, de zoekknop en de categorie in het schuifmenu dezelfde
       vorm hebben. Pilvormig (999px) was het eerder, maar naast de vierkante
       vlakken van de kaarten en het menu botste dat. */
    --dl-r-btn:        13px;

    --ok:           #20c997;
    --warn:         #ffc107;
    --danger:       #ff4d4d;

    /* Hoe ver iets onder de vaste kop moet blijven: een plakkende kolom, en
       de kop van een blok waar je met #naam naartoe springt. De kop is het
       hoogst rond de 950 pixels breed, 148 pixels; hier staat wat ruimer.
       Stond eerder als 6rem en 6.5rem in twee regels, allebei te laag, dus
       schoof er op elke pagina iets onder de balk. */
    --dl-kop-plak:     9.5rem;

    --radius:       12px;
    --radius-lg:    20px;

    --shadow-sm:    0 1px 2px rgba(15, 23, 42, .05);
    --shadow:       0 14px 34px rgba(15, 23, 42, .06);
    --shadow-lg:    0 20px 38px rgba(15, 23, 42, .10);

    /* Een maat breder dan de 1280 die er stond. Op een breed scherm gaf dat
       aan weerskanten een halve kolom marge terwijl de pagina zelf krap
       stond. De rasters hieronder zijn meegegaan, zodat er niet ineens een
       kolom bijkomt: vier kaarten op een rij blijven vier kaarten. */
    --page-max:     1440px;
}

body { background: var(--surface); }

/* -- Scrollen ---------------------------------------------------------
   Vloeiend springen bij een ankerlink, en een schuifbalk die bij de site
   hoort in plaats van bij het besturingssysteem.

   Het vloeiende scrollen staat met opzet niet op html maar op :root met een
   uitzondering eronder: wie "minder beweging" heeft ingesteld krijgt de
   directe sprong terug. Dat is geen smaak maar een toegankelijkheids-
   instelling; voor sommige mensen veroorzaakt een schuivend scherm
   misselijkheid.

   scrollbar-gutter houdt de ruimte voor de balk altijd vrij. Zonder dat
   verspringt de hele pagina een pixel of vijftien zodra een korte pagina
   wordt vervangen door een lange - bijvoorbeeld bij het openen van het
   categoriemenu.
   -------------------------------------------------------------------- */

:root {
    scroll-behavior: smooth;
    scrollbar-gutter: stable;

    /* De moderne, korte manier. Chrome, Edge en Firefox doen dit; Safari
       gebruikt de ::-webkit-regels hieronder. */
    scrollbar-width: thin;
    scrollbar-color: var(--dl-blue-500) var(--surface-alt);
}

/* De koptekst is sticky; een ankerlink zou anders onder die balk landen. */
:root { scroll-padding-top: 6.5rem; }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--surface-alt); }

::-webkit-scrollbar-thumb {
    border-radius: min(999px, var(--dl-r-max));
    background: var(--dl-blue-500);

    /* De rand is in de kleur van de baan en niet doorzichtig: een
       doorzichtige rand laat de duim op een donkere pagina zwart oplichten. */
    border: 3px solid var(--surface-alt);
}

::-webkit-scrollbar-thumb:hover { background: var(--dl-blue-700); }
::-webkit-scrollbar-corner { background: var(--surface-alt); }

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

/* -- Topbalk -------------------------------------------------------- */
/* De smalle donkere strook met openingstijden en taalkeuze. */

.dl-topbar {
    background: var(--dl-blue-900);
    color: rgba(255, 255, 255, .82);
    font-size: .82rem;
}

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

.dl-status {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.dl-status::before {
    content: "";
    width: 7px; height: 7px;
    border-radius: min(50%, var(--dl-r-max));
    background: var(--danger);
    flex: none;
}
.dl-status.is-open::before { background: var(--ok); }

.dl-topbar-right {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
}

/* -- Koptekst ------------------------------------------------------- */

.site-header {
    border-bottom: 0;
    box-shadow: 0 1px 0 var(--line);
}

/* De indeling van deze balk staat verderop in dit bestand, bij de rest van
   de koptekst. Hier stond een tweede, oudere versie: een andere tussenruimte,
   een logo van 46 in plaats van 52 pixels en een zoekveld van 42rem naast
   eentje van 36rem. Alles ervan werd verderop overschreven, dus de getallen
   hier logen over wat er op het scherm stond. */

.header-search input {
    padding: .75rem 5.5rem .75rem 2.6rem;
    border-radius: var(--dl-r-btn);
    background: var(--surface-alt);
    border-color: transparent;
    font-size: .95rem;
}
.header-search input:focus {
    background: #ffffff;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft);
}

/* Het vergrootglas links in het veld. */
.header-search .dl-search-icon {
    position: absolute;
    left: 1rem; top: 50%;
    transform: translateY(-50%);
    color: var(--ink-faint);
    line-height: 0;
    pointer-events: none;
}

/* De knop zit binnen het veld, rechts. */
.header-search button {
    right: .35rem;
    padding: .5rem 1.15rem;
    border-radius: var(--dl-r-btn);
    background: #ffffff;
    border: 1px solid var(--line);
    color: var(--ink);
    font-size: .88rem;
    font-weight: 500;
    line-height: 1.4;
}
.header-search button:hover {
    background: var(--surface-alt);
    color: var(--accent);
}

.header-actions { gap: .6rem; }

/* -- Navigatie ------------------------------------------------------
   De regels staan verderop in dit bestand, bij het categoriemenu waar ze
   bij horen. Hier stond een tweede, oudere versie die het aria-current-item
   een gevuld blauw vlak gaf; drie regels verderop werd dat weer een
   streepje. Twee blokken die om dezelfde knop vochten.

   Ook de randen van het basisthema gaan hier uit. app.css geeft elke
   menulink een border-bottom van 2px en de huidige pagina daar de
   accentkleur in; op een telefoon wordt dat een border-left. Dit thema
   tekent zijn eigen streepje met ::after, dus stonden er twee onder Home -
   en omdat dit thema er ook een border-radius op zet, werd het een
   afgerond hokje met een streep aan de onderkant eraan vast.
   ------------------------------------------------------------------- */

.nav-list > li > a,
.nav-list > li > a[aria-current="page"] { border: 0; }

/* -- Knoppen ---------------------------------------------------------
   Eén plek waar een knop wordt vastgelegd. Hiervoor stonden er verspreid
   over dit bestand en app.css zesendertig regels die dezelfde .btn steeds
   opnieuw invulden; de startpagina eindigde daardoor met een primaire knop
   in donkerblauwe letters op een blauwe vulling, een contrast van 1,6 op de
   4,5 die leesbare tekst nodig heeft. Dat was geen kleurkeuze maar het
   gevolg van twee regels die elkaar half overschreven: de een zette de
   tekstkleur voor een witte knop, de ander maakte de knop daarna blauw.

   Daarom zet geen enkele variant hieronder nog rechtstreeks een achtergrond
   of een kleur. Ze vullen alleen variabelen in, en de basisregel schildert.
   Een donkere sectie doet hetzelfde: die geeft andere waarden mee in plaats
   van de knop te overschrijven. Zo kan er niets meer tegen elkaar in werken.
   --------------------------------------------------------------------- */

.btn {
    /* De standaardwaarden staan als terugval in var() en niet als declaratie
       op .btn zelf. Dat scheelt niet alleen regels: een waarde die hier op
       het element wordt gezet, kan een sectie eromheen nooit meer meegeven,
       en juist dat is hoe de knoppen op de donkere startpagina hun kleur
       horen te krijgen. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;

    /* 44 pixels hoog, ook als de tekst korter is. Dat is de maat die een
       vinger op een telefoon betrouwbaar raakt. */
    min-height: 2.75rem;
    padding: .625rem 1.15rem;

    border: 1px solid var(--dl-btn-rand, transparent);
    border-radius: var(--dl-r-btn);
    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;

    /* Geen transform in de overgang: dat zou de knop bij elke hover een
       fractie laten verspringen onder de muis. */
    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;
}

/* Indrukken mag je voelen. Eén pixel is genoeg; meer leest als een spel. */
.btn:active { transform: translateY(1px); }

.btn:focus-visible {
    outline: 2px solid var(--dl-btn-ring, var(--accent));
    outline-offset: 2px;
}

/* Een knop die niets doet ziet er ook uit alsof hij niets doet. Alleen de
   dekking verlagen maakt de tekst onleesbaar zonder dat duidelijk is
   waarom; dit is een eigen, rustige staat. */
.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;
}
.btn:disabled:active,
.btn[aria-disabled="true"]:active { transform: none; }

/* Een variant die in rust geen vlak heeft, hoort er uitgeschakeld ook geen
   te krijgen. Anders verschijnt er juist een blokje op het moment dat de
   knop niets meer doet. */
.btn-outline:disabled,
.btn-outline[aria-disabled="true"] {
    --dl-btn-vulling:       transparent;
    --dl-btn-vulling-hover: transparent;
}

/* Ghost heeft in rust geen vlak en geen rand; uitgeschakeld dus ook niet.
   Alleen de tekst verkleurt. */
.btn-ghost:disabled,
.btn-ghost[aria-disabled="true"] {
    --dl-btn-vulling:       transparent;
    --dl-btn-vulling-hover: transparent;
    --dl-btn-rand:          transparent;
}

/* -- Varianten: alleen variabelen ------------------------------------- */

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

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

.btn-soft {
    --dl-btn-vulling:       var(--accent-soft);
    --dl-btn-vulling-hover: var(--accent);
    --dl-btn-tekst:         var(--accent);
    --dl-btn-tekst-hover:   #ffffff;
}

.btn-ghost {
    --dl-btn-vulling:       transparent;
    --dl-btn-vulling-hover: var(--surface-alt);
    --dl-btn-tekst:         var(--ink-soft);
    --dl-btn-tekst-hover:   var(--ink);
}

/* -- Maten ------------------------------------------------------------ */

.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%; }

/* Een icoon krimpt niet mee als de tekst lang wordt. */
.btn > svg { flex: none; }

/* -- Op een donkere ondergrond ----------------------------------------
   De startpagina en het dealerblok staan op donkerblauw. Daar hoort de
   primaire knop wit te zijn en de omlijnde variant een lichte rand te
   krijgen. Ook dit zijn alleen andere waarden, geen nieuwe regels die de
   knop overschrijven. */

/* De waarden staan op de sectie en niet op .btn. Dat is met opzet: een knop
   erft ze, en een variant die ze zelf invult wint daarvan altijd. Zo hoeft
   hier geen :not()-ketting te staan om ghost en soft te ontzien. */
.dl-hero,
.dl-dealer,
.dl-cat.is-donker,
.dl-vkp-kaart .dl-kaart-in {
    --dl-btn-vulling:       #ffffff;
    --dl-btn-vulling-hover: #eef2fa;
    --dl-btn-tekst:         var(--dl-blue-900);
    --dl-btn-tekst-hover:   var(--dl-blue-900);
    --dl-btn-ring:          #ffffff;
}

/* Deze twee vullen hun eigen waarden in en hebben de context dus wel nodig.
   btn-dark is in de hero juist de lichte knop: daar is donkerblauw op
   donkerblauw niet te lezen. */
.dl-hero .btn-dark,
.dl-dealer .btn-dark,
.dl-cat.is-donker .btn-dark,
.dl-vkp-kaart .btn-dark {
    --dl-btn-vulling:       #ffffff;
    --dl-btn-vulling-hover: #eef2fa;
    --dl-btn-tekst:         var(--dl-blue-900);
    --dl-btn-tekst-hover:   var(--dl-blue-900);
    --dl-btn-ring:          #ffffff;
}

.dl-hero .btn-outline,
.dl-dealer .btn-outline,
.dl-cat.is-donker .btn-outline,
.dl-vkp-kaart .btn-outline,
.dl-hero .btn-soft,
.dl-dealer .btn-soft,
.dl-kop .btn-soft,
.dl-cat.is-donker .btn-soft {
    --dl-btn-vulling:       rgba(255, 255, 255, .16);
    --dl-btn-vulling-hover: rgba(255, 255, 255, .26);
    --dl-btn-tekst:         #ffffff;
    --dl-btn-tekst-hover:   #ffffff;
    --dl-btn-ring:          #ffffff;
}

.dl-hero .btn-ghost,
.dl-dealer .btn-ghost,
.dl-cat.is-donker .btn-ghost {
    --dl-btn-vulling:       transparent;
    --dl-btn-vulling-hover: rgba(255, 255, 255, .14);
    --dl-btn-tekst:         rgba(255, 255, 255, .82);
    --dl-btn-tekst-hover:   #ffffff;
    --dl-btn-ring:          #ffffff;
}

/* Een artikelkaart is wit, ook op de donkere startpagina. De knoppen erin
   krijgen daar hun gewone waarden terug: anders staat de winkelwagen wit op
   wit en is de tekst van "Kies uit" of "Prijs opvragen" wit en onzichtbaar. */
.dl-cat.is-donker .dl-art .btn-dark {
    --dl-btn-vulling:       var(--dl-blue-900);
    --dl-btn-vulling-hover: var(--dl-blue-950);
    --dl-btn-tekst:         #ffffff;
    --dl-btn-tekst-hover:   #ffffff;
    --dl-btn-ring:          var(--dl-blue-900);
}

.dl-cat.is-donker .dl-art .btn-outline {
    --dl-btn-vulling:       transparent;
    --dl-btn-vulling-hover: var(--accent-soft);
    --dl-btn-tekst:         var(--ink);
    --dl-btn-tekst-hover:   var(--accent);
    --dl-btn-ring:          var(--accent);
}

/* -- Heroblok ------------------------------------------------------- */

/* De hero staat verderop in dit bestand, in een blok bij elkaar. Hier stond
   een tweede, lichte versie eroverheen: twee achtergronden, twee koptekst-
   maten en twee keer dezelfde knoppenrij voor hetzelfde onderdeel. */

/* -- Label boven een kop -------------------------------------------- */
/* Klein blauw label boven de titel van een blok. */

.dl-eyebrow {
    display: block;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: .35rem;
}

/* -- Merkteken ------------------------------------------------------ */

/* Het merkteken rechtsboven op de productfoto. */
.dl-product-mark {
    position: absolute;
    top: 12px; right: 12px;
    z-index: 3;
    width: 30px; height: 30px;
    border-radius: min(999px, var(--dl-r-max));
    border: 1px solid rgba(15, 23, 42, .08);
    background: rgba(255, 255, 255, .88);
    display: grid;
    place-items: center;
    box-shadow: 0 6px 16px rgba(15, 23, 42, .07);
    opacity: .85;
}
.dl-product-mark img { width: 15px; height: 15px; object-fit: contain; }

/* Bij DutchLine staat er geen prijs maar een verwijzing naar inloggen. */
.price-note {
    font-size: .8rem;
    color: var(--ink-faint);
}

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

.site-footer {
    background: var(--dl-blue-900);
    border-top: 0;
    color: rgba(255, 255, 255, .72);
}

.site-footer h4 { color: rgba(255, 255, 255, .52); }
.site-footer a  { color: rgba(255, 255, 255, .78); }
.site-footer a:hover { color: #ffffff; }
.site-footer .muted { color: rgba(255, 255, 255, .58); }

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .5);
}

.dl-footer-logo img {
    height: 38px;
    width: auto;
    margin-bottom: .9rem;
    filter: brightness(0) invert(1);
    opacity: .9;
}

.dl-footer-intro {
    font-size: .88rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .62);
    max-width: 34ch;
}

/* -- Uitklapmenu ----------------------------------------------------- */
/* De eerste opzet stond hier: een raster met alle categorieën naast
   elkaar. Die is vervangen door het tweedelige menu onderaan dit
   bestand, naar het model van V1. De oude regels zijn weggehaald
   omdat .dl-mega-col in beide voorkwam en ze elkaar in de weg zaten. */

/* -- Assortimentsoverzicht ------------------------------------------ */

/* -- De donkere paginakop ----------------------------------------------
   Hetzelfde materiaal als de hero en het dealerblok: merkblauw over de volle
   breedte met het iconenraster erin. Een pagina die opent met een wit vlak en
   een kruimelpad opent met niets; zo begint hij met het merk.

   De opbouw is die van de hero: de tekst links in een kolom die niet breder
   wordt dan een leesregel, het raster daarnaast. Het liep eerder van boven
   naar beneden en dus dwars door de titel heen, en dertig iconen achter een
   koptekst zijn geen achtergrond maar ruis.
   ---------------------------------------------------------------------- */

.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(--dl-blue-950);
    color: #ffffff;
}

/* Licht linksboven waar de titel staat en nog een keer rechtsonder, zodat het
   vlak niet één egale plaat is. Ligt onder het raster (-3 tegen -2). */
.dl-kop::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -3;
    background:
        radial-gradient(52% 78% at 14% 0%, color-mix(in srgb, var(--dl-blue-700) 55%, transparent), transparent 70%),
        radial-gradient(44% 72% at 88% 100%, color-mix(in srgb, var(--dl-blue-450) 34%, transparent), transparent 74%);
}

/* Het raster zit rechtsboven en lost op richting de tekst. De tegel is
   kleiner dan in de hero: daar is het vlak twee keer zo hoog en mogen de
   iconen groot zijn, hier moet het textuur blijven en geen plaatjes worden. */
.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%);
}

/* Onder de omslag staat de tekst over de volle breedte en is er geen plek
   meer naast. Het raster kruipt dan in de onderhoek weg. */
@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%);
    }
}

/* Extra diep, voor een kop met een balk die over de onderrand heen ligt.
   Die overlap moet ergens vandaan komen: zonder deze ruimte schuift de balk
   over de laatste regel tekst in plaats van over het blauw. */
.dl-kop.is-diep { padding-bottom: clamp(4.75rem, 4rem + 3vw, 6.5rem); }

.dl-kop-in { position: relative; }

/* De leeskolom. Breder dan dit leest niet prettig, en wat overblijft is
   precies de ruimte waar het raster staat. */
.dl-kop-tekst { max-width: min(100%, 44rem); }

.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: 52ch;
    font-size: clamp(1rem, .95rem + .25vw, 1.12rem);
    line-height: 1.5;
    color: rgba(255, 255, 255, .74);
}

/* Een kruimelpad is een <ol>, en daar zet de browser zelf 40 pixels
   padding-inline-start op. Het basisthema zet wel margin op 0 maar niet
   padding, dus stond het pad veertig pixels verder naar rechts dan de titel
   eronder - op elke pagina met een kruimelpad. */
.crumbs { padding-inline: 0; }

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

.dl-kop .crumbs a {
    color: rgba(255, 255, 255, .62);
    text-decoration: none;
    transition: color .14s ease;
}

.dl-kop .crumbs a:hover        { color: #ffffff; text-decoration: none; }
.dl-kop .crumbs [aria-current] { color: #ffffff; font-weight: 500; }

/* Een pijlpunt in plaats van de schuine streep uit het basisthema. Die staat
   daar op --line: bijna zwart op 12%, en op blauw is dat niets - het pad las
   als drie losse woorden. Een punt die de kant op wijst waar je vandaan komt
   leest bovendien sneller dan een streep. */
.dl-kop .crumbs li:not(:last-child)::after {
    content: "\203A";
    margin-left: .5rem;
    color: rgba(255, 255, 255, .34);
}

/* -- Wat er op de categoriepagina met de hand was neergezet -------------
   Deze drie stonden als style="" in de opmaak: een intro van 72ch, de
   sorteerregel en de tekst onderaan. Een maat in de opmaak is niet te vinden
   als hij ergens knelt, en hij overschrijft zonder overleg wat hier staat. */

.dl-cat-intro { margin-bottom: 2rem; max-width: 72ch; }
.dl-cat-uitro { max-width: 72ch; }

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

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

/* Dezelfde kaart als de artikelkaarten op de startpagina: haarlijn, ronding
   van 16, en bij het aanwijzen een rand in het merkblauw met een schaduw en
   twee pixels omhoog. Geen schaduw in rust - dan zweeft elke kaart al voordat
   er iets gebeurt.

   De pijl rechts van de titel is weg. Die stond er bij elke categorie, en een
   pijl die overal staat wijst nergens meer naar. */
.dl-cats-block {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    padding: 1.25rem 1.35rem 1.15rem;
    border: 1px solid var(--line-soft);
    border-radius: min(16px, var(--dl-r-max));
    background: var(--surface);
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.dl-cats-block:hover {
    border-color: color-mix(in srgb, var(--dl-blue-700) 28%, transparent);
    box-shadow: 0 10px 26px rgba(15, 23, 42, .08);
    transform: translateY(-2px);
}

.dl-cats-parent {
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -.015em;
    color: var(--ink);
}
.dl-cats-parent:hover { color: var(--accent); text-decoration: none; }

/* De verkoopregel, dezelfde als op de startpagina. Twee regels hoog houden,
   zodat de lijsten eronder in alle kaarten op dezelfde hoogte beginnen. */
.dl-cats-zin {
    margin: .4rem 0 .9rem;
    min-height: calc(1.45em * 2);
    font-size: .88rem;
    line-height: 1.45;
    color: var(--ink-soft);
}

.dl-cats-sub {
    list-style: none;
    margin: 0;
    padding: .85rem 0 0;
    border-top: 1px solid var(--line-soft);
    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(--accent); text-decoration: none; }

.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 { color: var(--accent); }

/* -- Werkbalk boven een productraster -------------------------------- */

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

/* -- De categorieen in de zijbalk ------------------------------------
   Hetzelfde merkblauw met iconenraster als de paginakop, alleen smal en
   hoog. Het was een witte lijst op een witte pagina: dat las als een
   restje, terwijl het de navigatie van deze pagina is.

   De maskering loopt van boven naar beneden en niet vanuit een hoek. Het
   vak is 250 pixels breed; een schuine overgang levert daar geen ruimte
   voor tekst op, alleen een rommelige bovenrand.
   -------------------------------------------------------------------- */

.dl-side-cats {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 1.15rem 1rem 1.25rem;
    border-radius: var(--radius-lg);
    background: var(--dl-blue-950);
}

.dl-side-cats::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: radial-gradient(78% 42% at 24% 0%, color-mix(in srgb, var(--dl-blue-700) 60%, transparent), transparent 72%);
}

.dl-side-raster {
    position: absolute;
    inset: 0;
    z-index: -1;

    background-image: url("../img/raster.svg");
    background-repeat: repeat;
    background-size: 430px;
    opacity: .17;

    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-cats h4 {
    margin-bottom: .7rem;
    color: rgba(255, 255, 255, .62);
}

/* De kop met rechts de weg naar alles in de hoofdcategorie, zoals in V1. */
.dl-side-kop {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .35rem .75rem;
    margin-bottom: .7rem;
}

.dl-side-kop h4 { margin: 0; }

.dl-side-alles {
    padding: .2rem .6rem;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: min(999px, var(--dl-r-max));
    color: rgba(255, 255, 255, .82);
    font-size: .76rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .14s ease, color .14s ease;
}

.dl-side-alles:hover { border-color: rgba(255, 255, 255, .55); color: #ffffff; text-decoration: none; }
.dl-side-alles:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }

/* Een regel van de boom: de link, en bij een categorie met subcategorieën
   het pijltje dat ze open- of dichtklapt. Staat er in een lijst een pijltje,
   dan houden de regels zonder er de ruimte voor vrij, zodat de aantallen
   onder elkaar blijven. */
.dl-side-rij { display: flex; align-items: center; gap: .15rem; }
.dl-side-rij > a { flex: 1 1 auto; min-width: 0; }

.dl-js .dl-side-lijst:has(> li > .dl-side-rij > .dl-side-open) > li > .dl-side-rij > a:last-child { margin-right: 1.65rem; }

.dl-side-open {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 0;
    border-radius: min(7px, var(--dl-r-max));
    background: transparent;
    color: rgba(255, 255, 255, .6);
    cursor: pointer;
    transition: background-color .14s ease, color .14s ease;
}

.dl-side-open:hover { background: rgba(255, 255, 255, .1); color: #ffffff; }
.dl-side-open:focus-visible { outline: 2px solid #ffffff; outline-offset: -2px; }
.dl-side-open svg { transition: transform .16s ease; }
.dl-side-open[aria-expanded="true"] svg { transform: rotate(180deg); }
.dl-side-open[hidden] { display: none; }

.dl-side-lijst {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .93rem;
}

.dl-side-lijst > li + li { margin-top: .05rem; }

/* Elk niveau dieper hangt aan een haarlijn en staat een stukje naar binnen.
   Zo is aan de vorm te zien hoe diep je zit, ook zonder het kruimelpad. Een
   ruime inspringing leest prettiger maar kost breedte, en op het vierde
   niveau blijft er dan te weinig over voor een naam als "Comfort & safety
   accessoires". Vandaar één regel ruimte per niveau en niet meer. */
.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;
    border-radius: min(9px, var(--dl-r-max));
    color: #ffffff;
    text-decoration: none;
    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);
    text-decoration: none;
}

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

/* De categorieën waar je doorheen gelopen bent. Geen bestemming, maar wel de
   tak waar je in zit; wat meer gewicht maakt er een ruggengraat van in plaats
   van tien gelijke regels. */
.dl-side-lijst > li.is-pad > .dl-side-rij > a { font-weight: 600; }

/* De categorie waar je op staat. Een vulling en een streepje ervoor, want
   alleen een vulling is op blauw net zo goed een aanwijsvlak als een stand. */
.dl-side-lijst a[aria-current] {
    position: relative;
    background-color: color-mix(in srgb, var(--dl-blue-400) 24%, transparent);
    font-weight: 600;
}

.dl-side-lijst a[aria-current]::before {
    content: "";
    position: absolute;
    inset-block: .3rem;
    inset-inline-start: 0;
    width: 2px;
    border-radius: min(2px, var(--dl-r-max));
    background: var(--dl-blue-200);
}

.dl-side-n {
    flex: none;
    font-variant-numeric: tabular-nums;
    font-size: .76rem;
    color: rgba(255, 255, 255, .6);
    transition: color .14s ease;
}

.dl-side-lijst a:hover .dl-side-n { color: rgba(255, 255, 255, .85); }

/* Op een smal scherm zet het basisthema de zijbalk onder de artikelen. Dat
   klopt niet voor wat er nu in staat: de categorieboom is de navigatie van
   deze pagina, en navigatie hoort boven wat ze ordent. Anders moet je langs
   vierentwintig artikelen scrollen om te zien waar je bent.

   Hetzelfde omslagpunt als het basisthema, zodat de kolommen en de volgorde
   op hetzelfde moment wisselen. */
@media (max-width: 900px) {
    .with-side > .side { order: -1; }
}

/* -- Productpagina ---------------------------------------------------
   De opzet van Enka, in DutchLine-kleuren: de naam over de volle breedte,
   het beeld links, en rechts een stapel kaarten met een kopbalk - wat het
   artikel is, wat het kost, wat het kan. Elke kaart één onderwerp, elke
   kopbalk één woord.

   Het geheel staat op het merkvlak met het iconenraster, net als de hero en
   de categoriekop. Op die band draait de contrastvolgorde om: het beeld en
   de kaarten worden wit, want op donkerblauw is wit het zwaarst. Precies
   andersom als op een witte pagina, waar het merkblauw het zwaarst is.

   Onder de band de lange stukken op wit, en het dealerblok als slot.
   -------------------------------------------------------------------- */

.dl-pdp-band {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(1.1rem, .8rem + 1.2vw, 1.9rem) clamp(2rem, 1.5rem + 2vw, 3rem);
    background: var(--dl-blue-950);
    color: #ffffff;
}

.dl-pdp-band::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -3;
    background:
        radial-gradient(52% 70% at 12% 0%, color-mix(in srgb, var(--dl-blue-700) 55%, transparent), transparent 70%),
        radial-gradient(46% 68% at 86% 100%, color-mix(in srgb, var(--dl-blue-450) 30%, transparent), transparent 74%);
}

.dl-pdp-band-raster {
    position: absolute;
    inset: 0;
    z-index: -2;

    background-image: url("../img/raster.svg");
    background-repeat: repeat;
    background-size: clamp(620px, 52vw, 840px);
    opacity: .11;

    mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .55) 52%, transparent 94%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .55) 52%, transparent 94%);
}

.dl-pdp-band .crumbs {
    position: relative;
    margin: 0 0 clamp(1rem, .8rem + .9vw, 1.6rem);
    padding-block: 0;
    font-size: .85rem;
    color: rgba(255, 255, 255, .55);
}

.dl-pdp-band .crumbs a              { color: rgba(255, 255, 255, .72); }
.dl-pdp-band .crumbs a:hover        { color: #ffffff; }
.dl-pdp-band .crumbs [aria-current] { color: rgba(255, 255, 255, .92); }

.dl-pdp-band .crumbs li:not(:last-child)::after { color: rgba(255, 255, 255, .3); }

/* Op een telefoon alleen de weg terug naar de categorie: het hele pad liep
   daar over drie regels boven de naam. */
@media (max-width: 600px) {
    .dl-pdp-band .crumbs li { display: none; }
    .dl-pdp-band .crumbs li:nth-last-child(2) { display: inline-flex; align-items: center; gap: .45rem; }
    .dl-pdp-band .crumbs li:nth-last-child(2)::after { content: none; }
    .dl-pdp-band .crumbs li:nth-last-child(2)::before { content: "\2039"; font-size: 1.15em; line-height: 1; color: rgba(255, 255, 255, .55); }
}

/* Links de foto over alle rijen, rechts de kop en het koopdeel onder
   elkaar. Het witte paneel achter die twee is ::before over beide rijen,
   zodat het één vlak is met één schaduw. De derde rij neemt wat de foto
   langer is, zodat het paneel niet met hem meegroeit. */
.dl-pdp {
    --dl-pdp-paneel: clamp(1.25rem, .9rem + 1.2vw, 2rem);

    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
        "gal kop"
        "gal zij"
        "gal .";
    column-gap: clamp(1.5rem, 1rem + 2vw, 2.75rem);
    align-items: start;
    padding-bottom: clamp(.5rem, .4rem + .5vw, 1rem);
}

.dl-pdp::before {
    content: "";
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: stretch;
    border-radius: var(--radius-lg);
    background: #ffffff;
    box-shadow: 0 22px 50px rgba(2, 6, 23, .32);
}

.dl-pdp-gal { grid-area: gal; }

.dl-pdp-kop {
    grid-area: kop;
    position: relative;
    padding: var(--dl-pdp-paneel) var(--dl-pdp-paneel) 1.1rem;
    border-bottom: 1px solid var(--line-soft);
    color: var(--ink);
}

.dl-pdp-titel {
    margin: 0;
    font-size: clamp(1.35rem, 1.15rem + .8vw, 1.85rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.025em;
    color: var(--ink);
    overflow-wrap: anywhere;
}

.dl-pdp-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem 1.25rem;
    margin: .6rem 0 0;
    font-size: .86rem;
    color: var(--ink-faint);
}

.dl-pdp-meta strong { font-weight: 600; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* Op een telefoon onder elkaar: de naam op het donkere vlak boven de foto,
   het koopdeel als eigen wit vlak eronder. */
@media (max-width: 900px) {
    .dl-pdp {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        grid-template-areas:
            "kop"
            "gal"
            "zij";
        row-gap: 1.25rem;
    }

    .dl-pdp::before { display: none; }

    .dl-pdp-kop { padding: 0; border-bottom: 0; color: #ffffff; }
    .dl-pdp-titel { color: #ffffff; }
    .dl-pdp-meta { color: rgba(255, 255, 255, .6); }
    .dl-pdp-meta strong { color: rgba(255, 255, 255, .85); }
}

/* -- Links: het beeld --------------------------------------------- */

/* Wit en niet getint: de foto staat op mix-blend-mode: multiply, zodat het
   wit van de fotostudio wegvalt tegen het vlak eronder. Op blauw zou die
   regel het hele artikel blauw kleuren. */
.dl-pdp-foto {
    position: relative;
    display: grid;
    place-items: center;
    /* Vierkant, net als de foto's zelf: zo vult het artikel het vlak en
       staat het niet klein in een brede strook wit. */
    aspect-ratio: 1 / 1;
    margin: 0;

    /* De marge staat in een variabele omdat de foto hem hieronder als inset
       overneemt. */
    --dl-vlak-marge: clamp(1rem, .8rem + 1vw, 1.75rem);
    padding: var(--dl-vlak-marge);
    border-radius: var(--radius-lg);
    background: #ffffff;
    box-shadow: 0 22px 50px rgba(2, 6, 23, .32);
    overflow: hidden;
}

/* De foto is losgemaakt uit de stroom en op de marge vastgezet. Met
   max-height: 100% ging het mis: de hoogte van het vlak komt uit
   aspect-ratio, en daar rekent de browser een procentuele hoogte van een
   kind niet tegenaan. De foto bleef dus op zijn eigen 640 pixels staan, viel
   buiten het vlak en werd door overflow: hidden aan de boven- en onderkant
   afgesneden - vandaar dat het ligbad onderin hing.

   mix-blend-mode laat het wit van de fotostudio wegvallen tegen het vlak,
   zodat er geen grijze rand om het artikel blijft staan. */
/* Direct kind, en niet elke img in het vlak: het merkteken rechtsboven zit
   ook in dit vlak, en die kreeg deze regels dus ook over zich heen - hij
   werd opgerekt tot het hele vlak en verdween in de vermenigvuldiging. Wat
   overbleef was een leeg cirkeltje. */
.dl-pdp-foto > img {
    position: absolute;
    inset: 0;

    /* Vullend en niet auto: een vervangen element met width: auto houdt zijn
       eigen 640 pixels aan, ook tussen twee insets. De marge zit daarom in
       de padding van de foto zelf, en object-fit past het plaatje daar
       binnen in zonder er iets af te snijden. */
    width: 100%;
    height: 100%;
    padding: var(--dl-vlak-marge);
    object-fit: contain;
    mix-blend-mode: multiply;
}

/* Het vergrootglas rechtsonder op het beeld. Het vlak zelf opent de foto
   ook, maar dat ziet niemand; dit is het teken dat er meer te zien is. Hij
   staat op hidden in de opmaak en wordt door het script zichtbaar gemaakt:
   zonder javascript opent er niets, en dan hoort er ook geen knop te staan. */
.dl-pdp-zoom {
    position: absolute;
    right: .85rem;
    bottom: .85rem;
    z-index: 3;

    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: min(999px, var(--dl-r-max));
    background: rgba(255, 255, 255, .92);
    color: var(--dl-blue-900);
    cursor: zoom-in;
    transition: background-color .14s ease, border-color .14s ease, transform .14s ease;
}

.dl-pdp-zoom:hover {
    background: #ffffff;
    border-color: var(--dl-blue-300);
    transform: translateY(-1px);
}

.dl-pdp-zoom:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .dl-pdp-zoom:hover { transform: none; }
}

.dl-pdp-duimen {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .6rem;
}

.dl-pdp-duimen img {
    width: 4.75rem;
    height: 4.75rem;
    padding: .35rem;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: min(10px, var(--dl-r-max));
    background: #ffffff;
    object-fit: contain;
    cursor: pointer;
    transition: border-color .14s ease, box-shadow .14s ease;
}

.dl-pdp-duimen img:hover { border-color: rgba(255, 255, 255, .55); }

.dl-pdp-duimen img.is-active {
    border-color: #ffffff;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .28);
}

/* Op een telefoon één rij om te vegen, in plaats van twee rijen onder de
   foto. */
@media (max-width: 600px) {
    .dl-pdp-duimen { flex-wrap: nowrap; overflow-x: auto; padding: 2px; scrollbar-width: none; }
    .dl-pdp-duimen::-webkit-scrollbar { display: none; }
    .dl-pdp-duimen img { flex: none; width: 4.25rem; height: 4.25rem; }
}

/* -- Rechts: het koopdeel ------------------------------------------ */

.dl-pdp-zij {
    grid-area: zij;
    position: relative;
    display: grid;
    gap: 1.25rem;
    padding: 1.25rem var(--dl-pdp-paneel) var(--dl-pdp-paneel);
    color: var(--ink);
}

@media (max-width: 900px) {
    .dl-pdp-zij {
        padding: var(--dl-pdp-paneel);
        border-radius: var(--radius-lg);
        background: #ffffff;
        box-shadow: 0 22px 50px rgba(2, 6, 23, .32);
    }
}

/* Geen overflow: hidden meer. Dat knipte de tooltip van de deelknoppen af
   zodra hij boven de kaart uitkwam. De ronde hoeken kwamen daarvandaan, dus
   die staan nu op de kopbalk en op het vak eronder.

   De kaart zelf is doorzichtig. Met wit eronder liep dat wit in de ronde
   bovenhoeken langs de blauwe balk heen: twee even ronde hoeken op elkaar
   laten door het antialiasen een haarlijntje van de onderste kleur zien, en
   dat waren de witte randjes. Nu ligt er niets onder om doorheen te schijnen. */
.dl-kaart {
    border-radius: var(--radius);
    background: transparent;
    box-shadow: 0 18px 40px rgba(2, 6, 23, .26);
}

/* De kopbalk. Eén woord, klein, in het merkblauw - zo is aan de rand van
   het oog te zien waar een kaart over gaat zonder hem te lezen. */
.dl-kaart > h2 {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;

    /* Even hoog als een tabblad in de rail ernaast: die is 43 pixels, deze
       balk was er 34. Twee koppen naast elkaar die net niet even hoog zijn
       vallen meer op dan een verschil van tien. */
    padding: .88rem .95rem;
    border-radius: var(--radius) var(--radius) 0 0;
    background: var(--dl-blue-900);
    color: #ffffff;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.dl-kaart > h2 svg { flex: none; opacity: .8; }

.dl-kaart-in {
    padding: .95rem 1rem 1.1rem;
    border-radius: 0 0 var(--radius) var(--radius);
    background: #ffffff;
}

/* De voet van een kaart: een lichte strook onder de inhoud, voor wat bij de
   kaart hoort maar niet in de inhoud zelf - de bladwijzer onder een lijst.
   Het vak erboven verliest dan zijn ronde onderhoeken, die heeft de voet. */
.dl-kaart-in.is-met-voet { border-radius: 0; }

.dl-kaart-voet {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .6rem 1rem;
    padding: .7rem 1rem;
    border-top: 1px solid var(--line-soft);
    border-radius: 0 0 var(--radius) var(--radius);
    background: var(--surface-alt);
}

/* De regels in een kaart: naam links, waarde rechts, haarlijn ertussen. */
.dl-kaart-rij {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: .5rem 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: .89rem;
}

.dl-kaart-rij:last-child  { border-bottom: 0; padding-bottom: 0; }
.dl-kaart-rij:first-child { padding-top: 0; }

.dl-kaart-rij dt,
.dl-kaart-rij > span:first-child { color: var(--ink-soft); }

.dl-kaart-rij dd,
.dl-kaart-rij > span:last-child {
    margin: 0;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    text-align: right;
}

.dl-kaart-rij a { color: var(--accent); }

/* Zonder bedrag, zoals voor wie eerst moet inloggen: een tegel met een
   teken en één regel ernaast, dan de keuze en de knoppen. Alles links, op
   één lijn met de naam erboven. */
.dl-pdp-melding {
    display: flex;
    align-items: center;
    gap: .85rem;
}

.dl-pdp-slot {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: min(12px, var(--dl-r-max));
    background: color-mix(in srgb, var(--dl-blue-700) 9%, #ffffff);
    color: var(--dl-blue-900);
}

.dl-pdp-koop p {
    margin: 0;
    font-size: .95rem;
    color: var(--ink-soft);
}

.dl-pdp-melding p { font-weight: 500; color: var(--ink); }

/* Wat na de regel komt zonder de keuze ertussen, zoals de knoppen; de keuze
   heeft zelf al lucht en een lijn erboven. */
.dl-pdp-melding + :not(.dl-kleuren) { margin-top: 1.1rem; }

.dl-pdp-acties {
    display: grid;
    gap: .5rem;
    width: 100%;
}

/* -- Het bedrag zelf ----------------------------------------------------
   Na .dl-pdp-koop p en niet ervoor: die regel geeft elke alinea in deze
   kaart dezelfde grijze tekst van .92rem, en een prijs die daaronder valt
   is geen prijs meer. Vandaar ook .dl-pdp-koop ervoor in elke selector -
   anders wint de kortste regel en niet de laatste.
   -------------------------------------------------------------------- */

/* De kaart meet zichzelf, zodat de bedragen meeschalen met de kolom waar hij
   in staat en niet met het scherm: naast de foto is hij een derde van de
   pagina, op een telefoon de volle breedte. */
.dl-pdp-koop { container: prijskaart / inline-size; }

/* Wat het bedrag is: inkoopprijs, uw prijsafspraak of adviesprijs. Klein en
   rustig; de bedragen eronder doen het werk. */
.dl-pdp-koop .dl-prijs-label {
    display: block;
    margin-bottom: .55rem;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

/* Zonder btw links, met btw rechts, met een lijntje ertussen. */
.dl-pdp-koop .dl-prijs-paar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    margin: 0;
}

.dl-pdp-koop .dl-prijs-paar > div { min-width: 0; }

.dl-pdp-koop .dl-prijs-paar > div + div {
    padding-left: 1rem;
    border-left: 1px solid var(--line-soft);
}

.dl-pdp-koop .dl-prijs-paar dt {
    font-size: .8rem;
    font-weight: 600;
    color: var(--ink-faint);
}

.dl-pdp-koop .dl-prijs-paar dd {
    margin: .15rem 0 0;
    font-size: clamp(1.1rem, 7cqi, 1.75rem);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
    line-height: 1.15;
    white-space: nowrap;
    color: var(--dl-blue-900);
}

/* De adviesprijs onder de inkoopprijs, met een haarlijn erboven. Kleiner en
   in gewone inkt: het is wat zijn klant betaalt, niet wat hij zelf betaalt. */
.dl-pdp-koop .dl-prijs-advies {
    margin-top: 1rem;
    padding-top: .95rem;
    border-top: 1px solid var(--line-soft);
}

.dl-pdp-koop .dl-prijs-advies .dl-prijs-paar dd {
    font-size: clamp(1rem, 5cqi, 1.25rem);
    font-weight: 700;
    color: var(--ink);
}

/* -- De prijs opvragen ---------------------------------------------------
   Bij een artikel zonder prijs, op de productpagina en op een kaart; zie
   partials/prijsvraag. Na het opvragen staat er in plaats van de knop een
   groen vak van dezelfde hoogte, zodat er niets verspringt.
   ---------------------------------------------------------------------- */

.dl-prijsvraag { width: 100%; }

.dl-prijsvraag-klaar {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: .2rem;
    min-height: 2.75rem;
    padding: .55rem .9rem;
    border: 1px solid #cdebd8;
    border-radius: var(--dl-r-btn);
    background: #e7f6ec;
    text-align: center;
}

.dl-prijsvraag-klaar[hidden] { display: none; }
.dl-prijsvraag-klaar:focus { outline: none; }

.dl-prijsvraag-kop {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .9rem;
    font-weight: 700;
    color: #1d7a42;
}

.dl-prijsvraag-kop svg { flex: none; }

.dl-prijsvraag-uitleg {
    font-size: .82rem;
    line-height: 1.45;
    color: #2f6b45;
}

/* Hoe het dan wel gaat. Met een streep erboven, want dit gaat niet meer over
   het bedrag maar over de volgende stap. */
.dl-pdp-koop .dl-prijs-note {
    margin: .9rem 0 0;
    padding-top: .85rem;
    border-top: 1px solid var(--line-soft);
    width: 100%;
    font-size: .84rem;
}

/* -- Wat voor dit account dicht staat ------------------------------------
   Een rood blok met een slotje: wat er niet kan, waarom, en de weg naar
   ons. In de prijskaart en op de retourpagina; zie partials/dicht. Met
   .dl-dicht voor de alinea's: de regel voor elke alinea in de prijskaart
   hierboven weegt anders zwaarder. is-rustig is de grijze versie, voor een
   collega.
   ---------------------------------------------------------------------- */

.dl-dicht {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    width: 100%;
    padding: .85rem .95rem;
    border: 1px solid #fca5a5;
    border-radius: var(--radius);
    background: #fee2e2;
    text-align: left;
}

.dl-dicht-teken {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: min(10px, var(--dl-r-max));
    background: #dc2626;
    color: #ffffff;
}

.dl-dicht-tekst {
    display: grid;
    gap: .25rem;
    min-width: 0;
}

.dl-dicht .dl-dicht-kop {
    margin: 0;
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.35;
    color: #7f1d1d;
}

.dl-dicht .dl-dicht-uitleg {
    margin: 0;
    font-size: .84rem;
    line-height: 1.5;
    color: #991b1b;
}

.dl-dicht-link {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-top: .2rem;
    font-size: .85rem;
    font-weight: 700;
    color: #b91c1c;
    text-decoration: none;
}

.dl-dicht-link:hover { color: #7f1d1d; text-decoration: underline; }
.dl-dicht-link svg { transition: transform .14s ease; }
.dl-dicht-link:hover svg { transform: translateX(2px); }

.dl-dicht.is-rustig {
    border-color: var(--line-soft);
    background: var(--surface-alt);
}

.dl-dicht.is-rustig .dl-dicht-teken {
    background: #ffffff;
    box-shadow: inset 0 0 0 1px var(--line);
    color: var(--dl-blue-800);
}

.dl-dicht.is-rustig .dl-dicht-kop    { color: var(--ink); }
.dl-dicht.is-rustig .dl-dicht-uitleg { color: var(--ink-soft); }

/* In de prijskaart onder het bedrag, met dezelfde lucht als de rest daar. */
.dl-pdp-koop .dl-dicht { margin-top: 1rem; }

/* -- De variant kiezen --------------------------------------------------
   Een rij stalen in de prijskaart. Elk staal is een link naar die
   uitvoering: die heeft zijn eigen prijs, foto en voorraad, en dus zijn
   eigen adres. De kleur komt uit de kaart in cms_settings, via Swatches.

   Alleen de cirkel, geen naam ernaast. Met naam werd het een rij brede
   pillen over drie regels waarin de kleur het kleinste element was; nu is
   de kleur het hele knopje en staat de naam in de tooltip.
   ---------------------------------------------------------------------- */

.dl-kleuren {
    width: 100%;
    margin-top: 1rem;
    padding-top: .95rem;
    border-top: 1px solid var(--line-soft);

    /* Mee met de rest van de kaart: gecentreerd onder het slotje, links onder
       een bedrag. Anders hangt de rij scheef onder wat erboven staat. */
    text-align: center;
}

.dl-pdp-koop .dl-kleuren { text-align: left; }
.dl-pdp-koop .dl-kleuren-rij { justify-content: flex-start; }

/* De knoppen onder de rij krijgen dezelfde lucht als het formulier met het
   aantal (.dl-pdp-leggen): zonder dit plakt "Inloggen" tegen de uitvoering die
   aan staat, en die is ook donkerblauw. */
.dl-kleuren + .dl-pdp-acties {
    margin-top: 1rem;
}

.dl-kleuren-kop {
    display: block;
    margin-bottom: .7rem;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.dl-kleuren-rij {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .7rem;
}

/* -- Varianten die geen kleur zijn --------------------------------------
   Een maat, een lengte, een type: daar hoort tekst bij en geen rondje. Een
   lege cirkel naast een andere lege cirkel is geen keuze.
   ---------------------------------------------------------------------- */

.dl-variant {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: .5rem 1rem;
    border: 1px solid var(--line);
    border-radius: min(999px, var(--dl-r-max));
    background: #ffffff;
    font-size: .9rem;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    transition: border-color .14s ease, background .14s ease, color .14s ease;
}

.dl-variant:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
}

/* De uitvoering waar je nu staat: gevuld, zodat het verschil ook standhoudt
   op een scherm dat kleuren afvlakt. */
.dl-variant.is-nu {
    border-color: var(--dl-blue-900);
    background: var(--dl-blue-900);
    color: #ffffff;
    cursor: default;
}

/* Bij tekstknoppen is een tussenruimte van zeven tiende te ruim: die stond er
   voor de cirkels, waar de tooltip lucht nodig heeft. */
.dl-kleuren-rij.is-tekst { gap: .5rem; }

/* Het knopje is de cirkel. Eromheen zit lucht voor de ring van de gekozen
   variant, en het geheel is zesenveertig pixels in het vierkant - ruim boven
   de vierentwintig die een vinger nodig heeft. */
.dl-kleur {
    position: relative;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: min(999px, var(--dl-r-max));
    border: 2px solid transparent;
    background: none;
    transition: border-color .14s ease, transform .14s ease;
}

.dl-kleur:hover { border-color: var(--line); transform: translateY(-1px); }

.dl-kleur:focus-visible {
    outline: none;
    border-color: var(--accent);
}

/* De gekozen variant: een ring in het merkblauw. Geen kleurverschil in het
   bolletje zelf, want dat is de kleur van het artikel. */
.dl-kleur.is-nu {
    border-color: var(--dl-blue-900);
    cursor: default;
}

.dl-kleur.is-nu:hover { transform: none; }

.dl-kleur-stip {
    width: 42px;
    height: 42px;
    border-radius: min(999px, var(--dl-r-max));
    border: 1px solid rgba(16, 17, 12, .16);
    background: #ffffff;

    /* Een glans over de bol: zonder dit is een chroom of geborsteld messing
       een plat vlekje. Met een lichtpunt linksboven en een schaduw rechts
       onderin leest het als een rond, metaalachtig oppervlak. */
    box-shadow:
        inset 3px 3px 5px rgba(255, 255, 255, .55),
        inset -3px -4px 6px rgba(16, 17, 12, .18),
        0 1px 3px rgba(16, 17, 12, .14);
}

/* Een kleur die niet in de kaart staat: een schuine streep in plaats van een
   verzonnen kleurtje. Zo is te zien dat er een afwerking is en dat wij hem
   hier niet kunnen laten zien. Sinds de kaart compleet is hoort dit niet meer
   voor te komen; hij blijft staan voor wat er morgen bijkomt. */
.dl-kleur-stip.is-onbekend {
    background:
        linear-gradient(135deg, transparent 44%, rgba(16, 17, 12, .3) 44%,
                        rgba(16, 17, 12, .3) 56%, transparent 56%),
        var(--surface-alt);
}

/* -- De tooltip ---------------------------------------------------------
   Met de naam van de kleur, boven de cirkel. Alleen bij aanwijzen met een
   muis en bij toetsenbordfocus: op een aanraakscherm is er geen zweven en
   zou hij blijven hangen na een tik.
   ---------------------------------------------------------------------- */

/* De tooltip hangt midden boven het bolletje - bij alle vijf, ook bij de
   eerste en de laatste. Die twee schoven even naar binnen omdat een lange naam
   een paar pixels buiten de kaart stak, maar dan staat er één tooltip scheef
   tussen vier rechte, en dat valt meer op dan de overhang. De kaart knipt niets
   af, dus wat eroverheen valt mag gewoon. */
.dl-kleur::after,
.dl-kleur::before {
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    opacity: 0;
    pointer-events: none;
    transition: opacity .12s ease, transform .12s ease;
    transform: translate(-50%, 4px);
}

.dl-kleur::before { transform: translate(-50%, 4px) rotate(45deg); }

.dl-kleur::after {
    content: attr(data-tip);
    z-index: 3;
    padding: .45rem .75rem;
    border-radius: min(10px, var(--dl-r-max));
    background: var(--dl-blue-950);
    box-shadow: 0 8px 20px rgba(10, 16, 40, .28);
    font-size: .88rem;
    font-weight: 600;
    line-height: 1.25;
    color: #ffffff;
    white-space: nowrap;
}

/* Het pijltje eronder. */
.dl-kleur::before {
    content: "";
    z-index: 3;
    bottom: calc(100% - 5px);
    width: 10px;
    height: 10px;
    background: var(--dl-blue-950);
    transform: translate(-50%, 4px) rotate(45deg);
}

@media (hover: hover) and (pointer: fine) {
    .dl-kleur:hover::after,
    .dl-kleur:hover::before { opacity: 1; }

    .dl-kleur:hover::after  { transform: translate(-50%, 0); }
    .dl-kleur:hover::before { transform: translate(-50%, 0) rotate(45deg); }
}

.dl-kleur:focus-visible::after,
.dl-kleur:focus-visible::before { opacity: 1; }

.dl-kleur:focus-visible::after  { transform: translate(-50%, 0); }
.dl-kleur:focus-visible::before { transform: translate(-50%, 0) rotate(45deg); }

/* -- Zonder muis --------------------------------------------------------
   Op een telefoon of tablet bestaat zweven niet: daar zou de naam van een
   kleur pas blijken uit het aantikken, en dan sta je al op de volgende
   pagina. Dus staat hij daar gewoon onder het bolletje. De tooltip vervalt,
   want er is niets om hem mee op te roepen.
   ---------------------------------------------------------------------- */

@media (hover: none) {
    .dl-kleuren-rij { gap: .9rem .5rem; }

    .dl-kleur {
        width: auto;
        height: auto;
        min-width: 56px;
        display: grid;
        justify-items: center;
        gap: .35rem;
        padding: .3rem .25rem;
        border: 0;
        border-radius: min(12px, var(--dl-r-max));
    }

    .dl-kleur:hover { transform: none; }

    /* De gekozen variant heeft hier geen ring om het bolletje maar een vlak
       eromheen: met naam erbij is een ring om alleen de cirkel scheef. */
    .dl-kleur.is-nu {
        background: var(--accent-soft);
        box-shadow: inset 0 0 0 2px var(--dl-blue-900);
    }

    /* De naam uit de schermlezertekst terug in beeld. */
    .dl-kleur-naam {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        clip: auto;
        clip-path: none;
        max-width: 5.5rem;
        font-size: .74rem;
        font-weight: 600;
        line-height: 1.25;
        text-align: center;
        white-space: normal;
        color: var(--ink-soft);
    }

    .dl-kleur.is-nu .dl-kleur-naam { color: var(--dl-blue-900); }

    .dl-kleur::after,
    .dl-kleur::before { content: none; }
}

@media (prefers-reduced-motion: reduce) {
    .dl-kleur,
    .dl-kleur::after,
    .dl-kleur::before { transition: none; }

    .dl-kleur:hover { transform: none; }
}

/* Het aantal en de knop naar de winkelwagen. Het veld houdt zijn eigen maat,
   de knop neemt de rest: bij een knop die meekrimpt met het veld breekt
   "In winkelwagen" over twee regels zodra de kolom smaller wordt. */
/* -- Min en plus bij een aantal ----------------------------------------
   Eén doosje met een rand eromheen: [-] [ 3 ] [+]. De knoppen komen pas
   tevoorschijn als javascript draait (html.dl-js). Gaat dat niet op, dan
   blijft het veld over met de pijltjes van de browser - precies wat er
   hiervoor stond.

   De rand zit daarom om het doosje en niet om het veld: valt de min en de
   plus weg, dan ís het doosje het veld.
   ---------------------------------------------------------------------- */

.dl-tel {
    display: flex;
    align-items: stretch;
    flex: none;
    border: 1px solid var(--line);
    border-radius: min(10px, var(--dl-r-max));
    background: #ffffff;
    overflow: hidden;
}

.dl-tel-knop {
    display: none;
    place-items: center;
    flex: none;
    width: 2.4rem;
    padding: 0;
    border: 0;
    background: var(--surface-alt);
    color: var(--ink-soft);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.dl-js .dl-tel-knop { display: grid; }

.dl-tel-knop:hover:not(:disabled) { background: var(--accent-soft); color: var(--accent); }
.dl-tel-knop:active:not(:disabled) { background: var(--accent); color: #ffffff; }
.dl-tel-knop:disabled { color: #ccd5e0; cursor: default; }
.dl-tel-knop:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Meer ingetikt dan er op voorraad is: het getal is teruggezet, en het
   doosje licht even rood op. */
.dl-tel.is-vol { animation: dl-tel-vol .9s ease; }

@keyframes dl-tel-vol {
    0%, 55% {
        border-color: #dc2626;
        box-shadow: 0 0 0 3px rgba(220, 38, 38, .18);
    }

    100% {
        border-color: var(--line);
        box-shadow: none;
    }
}

/* Niet op voorraad: het aantal staat uit en de knop is rood. Hij staat er
   wel, zodat de kaart niet korter wordt en te zien is waarom er niets kan. */
.is-op .dl-tel {
    background: var(--surface-alt);
    opacity: .6;
}

.is-op .dl-tel input { cursor: not-allowed; }

/* Heel, en niet half doorzichtig zoals app.css elke knop die uit staat maakt:
   het rood moet opvallen. */
.btn.is-op:disabled {
    --dl-btn-vulling:       #fee2e2;
    --dl-btn-vulling-hover: #fee2e2;
    --dl-btn-tekst:         #b91c1c;
    --dl-btn-tekst-hover:   #b91c1c;
    --dl-btn-rand:          #fca5a5;
    opacity: 1;
}

/* Twee stel knoppen op hetzelfde veld is er een te veel: de pijltjes van
   de browser gaan weg zodra de onze er staan. */
.dl-js .dl-tel input { appearance: textfield; -moz-appearance: textfield; }

.dl-js .dl-tel input::-webkit-outer-spin-button,
.dl-js .dl-tel input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Het veld zit nu ín het doosje en heeft zijn eigen rand niet meer nodig. */
.dl-pdp-leggen .dl-tel input {
    width: 3.2rem;
    border: 0;
    border-radius: 0;
}

.dl-pdp-leggen {
    display: flex;
    gap: .5rem;
    width: 100%;
    margin-top: 1rem;
}

.dl-pdp-leggen input {
    width: 4.6rem;
    flex: none;
    padding: .6rem .5rem;
    border: 1px solid var(--line);
    border-radius: min(10px, var(--dl-r-max));
    background: #ffffff;
    font: inherit;
    font-size: .95rem;
    font-weight: 600;
    text-align: center;
    color: var(--ink);
}

.dl-pdp-leggen .btn {
    flex: 1;
    justify-content: center;
    white-space: nowrap;
}

.dl-pdp-leggen .btn svg { flex: none; }

/* -- Onder de vouw: de lange stukken ------------------------------- */

/* -- Productdetails ---------------------------------------------------
   Een rail links, het paneel in het midden, delen rechts. De rail werkt op
   twee radioknoppen en niet op javascript - hetzelfde als de tabbladen in
   het schuifmenu. Zonder script wisselt het dus gewoon.

   De knoppen zijn niet verborgen met display: none maar weggeschoven: zo
   blijven ze in de tabvolgorde en kun je met de pijltjes van tab wisselen.
   Dat is het verschil tussen een tabblad en een plaatje van een tabblad.
   -------------------------------------------------------------------- */

/* De lichte band met het iconenraster erachter. De tegenhanger van de donkere
   band: dezelfde textuur, maar blauw op licht in plaats van wit op donker.

   Op de productpagina draagt hij alles onder de productband, op Over ons de
   opsomming in het midden en op het retourbeleid de hele tekst. Heette eerst
   .dl-onder, naar zijn plek op die ene pagina; zodra hetzelfde vlak op een
   tweede pagina nodig was, klopte die naam niet meer.

   Geen overflow: hidden. Het raster is absoluut op inset: 0 en kan er dus
   niet buiten vallen, en een ouder met overflow anders dan visible wordt de
   scrollcontainer voor alles wat erin plakt. Daardoor bleef de
   inhoudsopgave van het retourbeleid honderdvijftig pixels te laag hangen in
   plaats van mee te lopen. */
.dl-band-licht {
    position: relative;
    isolation: isolate;
    padding-block: clamp(1.75rem, 1.4rem + 1.5vw, 3rem);

    /* Boven een streepje blauw dat naar de paginakleur zakt, zodat dit stuk
       aan de donkere band erboven vastzit en niet als los grijs vlak leest. */
    background: linear-gradient(180deg, var(--dl-blue-100) 0%, var(--surface-alt) 38%);
}

/* Hetzelfde iconenraster als op de hero en de productband, maar omgekeerd:
   daar staan witte iconen op blauw, hier blauwe op wit.

   Het bestand tekent in wit en is dus op een lichte achtergrond onzichtbaar.
   Daarom dient het hier als sjabloon en niet als plaatje: de tekening knipt
   de laag eronder uit, en die laag is blauw. Zo blijft er één rasterbestand.

   Het vervagen zit in die blauwe laag en niet in een tweede masker: twee
   maskers over elkaar leggen vraagt om mask-composite, en dat is precies het
   soort regel dat in de ene browser wel en in de andere niet aankomt.

   Onderaan helemaal weg: daar begint het dealerblok, en een halve wasbak op
   de naad tussen twee vlakken leest als een fout. */
.dl-band-licht-raster {
    position: absolute;
    inset: 0;
    z-index: -1;

    background-image: linear-gradient(180deg,
        var(--dl-blue-700) 0%, color-mix(in srgb, var(--dl-blue-700) 50%, transparent) 46%,
        color-mix(in srgb, var(--dl-blue-700) 38%, transparent) 82%, color-mix(in srgb, var(--dl-blue-700) 0%, transparent) 100%);
    opacity: .1;

    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);
}

/* De blokken binnen die band. Geen .section-sm: dat zet boven én onder
   dezelfde ruimte, en tussen twee blokken komt die dan dubbel te liggen. */
.dl-band-vlak { padding-top: clamp(1.75rem, 1.4rem + 1.5vw, 3rem); }

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

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

/* De radioknoppen: uit beeld, niet uit de tabvolgorde. */
.dl-details-keuze {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
}

/* -- De rail ------------------------------------------------------ */

.dl-details-rail {
    grid-area: 1 / 1;
    display: grid;
    gap: .2rem;
    overflow: hidden;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    background: #ffffff;
    padding: .4rem;
    box-shadow: var(--shadow-sm);
}

.dl-details-rail label {
    display: flex;
    align-items: center;
    gap: .55rem;

    padding: .6rem .7rem;
    border-radius: min(8px, var(--dl-r-max));
    color: var(--ink-soft);
    font-size: .92rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color .14s ease, color .14s ease;
}

.dl-details-rail label svg { flex: none; opacity: .65; }

.dl-details-rail label:hover { background: var(--surface-alt); color: var(--ink); }

/* Het gekozen tabblad in het merkblauw, zodat je aan de kleur ziet waar je
   bent en niet aan een streepje. */
#dl-detail-tekst:checked ~ .dl-details-rail label[for="dl-detail-tekst"],
#dl-detail-specs:checked ~ .dl-details-rail label[for="dl-detail-specs"],
#dl-detail-beoordelingen:checked ~ .dl-details-rail label[for="dl-detail-beoordelingen"] {
    background: var(--dl-blue-900);
    color: #ffffff;
    font-weight: 600;
}

#dl-detail-tekst:checked ~ .dl-details-rail label[for="dl-detail-tekst"] svg,
#dl-detail-specs:checked ~ .dl-details-rail label[for="dl-detail-specs"] svg,
#dl-detail-beoordelingen:checked ~ .dl-details-rail label[for="dl-detail-beoordelingen"] svg { opacity: 1; }

/* De ring hoort om het label, want de knop zelf staat uit beeld. */
#dl-detail-tekst:focus-visible ~ .dl-details-rail label[for="dl-detail-tekst"],
#dl-detail-specs:focus-visible ~ .dl-details-rail label[for="dl-detail-specs"],
#dl-detail-beoordelingen:focus-visible ~ .dl-details-rail label[for="dl-detail-beoordelingen"] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* -- De panelen --------------------------------------------------- */

/* Allebei in hetzelfde vak, dus ze schuiven niet onder elkaar. */
.dl-details-paneel {
    grid-area: 1 / 2;
    display: none;
    border: 1px solid var(--line-soft);
    box-shadow: var(--shadow-sm);
}

#dl-detail-tekst:checked ~ .dl-details-paneel[data-paneel="tekst"],
#dl-detail-specs:checked ~ .dl-details-paneel[data-paneel="specs"] { display: block; }

/* Het paneel met de beoordelingen is zelf geen kaart: het formulier en de
   beoordelingen zijn er twee, onder elkaar. */
#dl-detail-beoordelingen:checked ~ .dl-details-paneel[data-paneel="beoordelingen"] { display: grid; }

/* Specificaties in twee kolommen zodra het paneel breed genoeg is. Het
   paneel meet zichzelf en niet het scherm, want naast de rail en het
   deelvak houdt het maar een deel van de pagina over. */
.dl-details-paneel { container: paneel / inline-size; }

/* Onder de tabletmaat onder elkaar: de tabs boven, het paneel eronder.
   Alleen het aantal kolommen terugzetten is niet genoeg, en dat was wel wat
   er stond. De rail en de panelen krijgen hierboven met grid-area een vaste
   plek (1/1 en 1/2) zodat de twee panelen in dezelfde cel liggen en er maar
   één zichtbaar hoeft te zijn. Blijft die plaatsing staan als de tweede kolom
   verdwijnt, dan maakt het raster er stilletjes eentje bij van twee pixels -
   en stak de hele productpagina 147 pixels buiten het scherm.
   Dit blok staat expres ná de regels die het terugzet: even zwaar weegt in
   css niet even zwaar als je het eerder opschrijft. */
@media (max-width: 800px) {
    .dl-details-rail   { grid-area: 1 / 1; }
    .dl-details-paneel { grid-area: 2 / 1; }
}

.dl-details-specs {
    margin: 0;
    display: grid;
    gap: 0 clamp(1.5rem, 1rem + 2vw, 3rem);
}

@container paneel (min-width: 34rem) {
    .dl-details-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* -- Delen -------------------------------------------------------- */

/* Delen onderaan het paneel, met een lijn erboven: een woord en de knoppen
   op één regel. */
.dl-pdp-delen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem 1rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--line-soft);
}

.dl-pdp-delen-kop {
    margin: 0;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.dl-pdp-delen .dl-deel { width: 2.3rem; height: 2.3rem; }

/* Een rij vierkantjes met alleen het beeldmerk. De namen erbij zetten zou
   vier regels kosten voor iets wat aan het logo al te zien is; de naam staat
   in het label voor wie hem niet ziet. */
.dl-deelrij {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

/* Elke knop in de huisstijl van de partij waar hij heen gaat: dat is waar
   een bezoeker het aan herkent, nog voor hij het teken heeft bekeken. De
   kleuren staan hier en niet bij het beeldmerk, want het teken neemt de
   kleur van de knop over.

   De kopieerknop is de enige die geen merk heeft; die krijgt het onze. */
.dl-deel {
    --dl-deel-vulling: var(--dl-blue-900);
    --dl-deel-hover:   var(--dl-blue-950);

    display: grid;
    place-items: center;

    width: 2.6rem;
    height: 2.6rem;
    padding: 0;
    border: 0;
    border-radius: min(10px, var(--dl-r-max));
    background: var(--dl-deel-vulling);
    color: #ffffff;
    cursor: pointer;
    transition: background-color .14s ease, box-shadow .14s ease, transform .14s ease;
}

.dl-deel.is-whatsapp { --dl-deel-vulling: #25d366; --dl-deel-hover: #1da851; }
.dl-deel.is-facebook { --dl-deel-vulling: #1877f2; --dl-deel-hover: #0c5fd0; }
.dl-deel.is-x        { --dl-deel-vulling: #0f0f0f; --dl-deel-hover: #303030; }
.dl-deel.is-linkedin { --dl-deel-vulling: #0a66c2; --dl-deel-hover: #004182; }

.dl-deel svg { flex: none; }

/* De naam boven de knop. Met een eigen tooltip en niet met title: die van de
   browser komt pas na een seconde, staat waar de muis is en is niet te
   stijlen. De naam staat ook in aria-label, want deze hier is alleen te
   zien - een schermlezer leest geen ::after. */
.dl-deel { position: relative; }

.dl-deel::after {
    content: attr(data-tip);
    position: absolute;
    z-index: 5;
    bottom: calc(100% + .5rem);
    left: 50%;

    padding: .32rem .6rem .36rem;
    border-radius: min(7px, var(--dl-r-max));
    background: var(--dl-blue-950);
    color: #ffffff;
    font-size: .74rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;

    opacity: 0;
    transform: translateX(-50%) translateY(4px);
    pointer-events: none;
    transition: opacity .14s ease, transform .14s ease;
}

/* Het puntje eronder, uit twee randen van een vierkant gedraaid. */
.dl-deel::before {
    content: "";
    position: absolute;
    z-index: 5;
    bottom: calc(100% + .22rem);
    left: 50%;

    width: 8px;
    height: 8px;
    background: var(--dl-blue-950);

    opacity: 0;
    transform: translateX(-50%) translateY(4px) rotate(45deg);
    pointer-events: none;
    transition: opacity .14s ease, transform .14s ease;
}

.dl-deel:hover::after,
.dl-deel:focus-visible::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.dl-deel:hover::before,
.dl-deel:focus-visible::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0) rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
    .dl-deel::after,
    .dl-deel::before { transition: opacity .14s ease; }
}

.dl-deel:hover {
    background: var(--dl-deel-hover);
    box-shadow: 0 3px 10px rgba(15, 23, 42, .18);
    transform: translateY(-1px);
}

/* De ring in de kleur van de knop zelf, met een witte tussenring: op een
   gevulde knop zou een ring in de merkkleur erin verdwijnen. */
.dl-deel:focus-visible {
    outline: 2px solid var(--dl-deel-vulling);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .dl-deel:hover { transform: none; }
}

/* Even bevestigen dat de link is gekopieerd; anders klikt iemand drie keer
   omdat er niets gebeurt. */
.dl-deel.is-gekopieerd {
    --dl-deel-vulling: #20c997;
    --dl-deel-hover:   #17a97f;
}

/* Geen leesbreedte meer. Die stond op 72 tekens - de maat die je voor een
   lopend artikel aanhoudt - maar het paneel is hier ruim elfhonderd pixels
   breed, en dan houdt de tekst op een derde voor het einde op en blijft er
   een lege rechterhelft staan. Dat leest als een fout in de opmaak, en dat
   weegt zwaarder dan de paar tekens die een regel te lang wordt.

   De regelafstand staat wat ruimer dan gewoon: bij een lange regel is het
   terugvinden van het begin van de volgende het lastige deel. */
.dl-vlak-tekst {
    color: var(--ink-soft);
    line-height: 1.75;
}

.dl-vlak-tekst p:last-child { margin-bottom: 0; }


/* -- Toegangsschermen ------------------------------------------------ */

/* Alleen zijwaartse vulling. De ruimte boven en onder komt van de band
   eromheen; stond hij hier ook, dan telden de twee bij elkaar op en zat er
   honderd pixels tussen de menubalk en de eerste kaart. */
.dl-auth {
    position: relative;
    max-width: 34rem;
    margin: 0 auto;
    padding-inline: var(--page-pad);
}

/* De schermen met twee kolommen - inloggen en aanmelden - lopen even breed
   als de rest van de site. Ze stonden op tweeënzestig rem gecentreerd, en dan
   is dit smaller dan elke andere pagina; dat zie je zodra je van de ene naar
   de andere klikt. Dezelfde maat en dezelfde randafstand als .wrap, zodat de
   kaarten netjes onder de zoekbalk in de kop uitkomen.

   De schermen met één kaart blijven smal: een formulier van twee velden over
   veertienhonderd pixels is geen formulier meer. */
.dl-auth:has(.is-wide) { max-width: var(--page-max); }

/* Het vlak waar de toegangsschermen op staan. Het raster komt van
   .dl-band-licht; hier alleen de ruimte eromheen, en die staat op één plek. */
.dl-auth-vlak { padding-block: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem); }

.dl-auth-card {
    padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: 0 18px 44px rgba(15, 23, 42, .08);
}

.dl-auth-card h1 {
    font-size: 1.6rem;
    font-weight: 800;
    margin: .15rem 0 .4rem;
}
.dl-auth-card > .muted { font-size: .93rem; margin-bottom: 0; }

/* -- Het aanmeldscherm --------------------------------------------- */

/* Voordelen links, formulier rechts. Het formulier krijgt de meeste ruimte:
   dat is wat er moet gebeuren, de rest is de reden. */
.dl-aanmeld {
    display: grid;
    gap: clamp(1rem, .8rem + 1vw, 1.75rem);
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
}

/* Onder elkaar gaat het formulier voorop. Wie op een telefoon doorklikt naar
   dit scherm heeft de reden al gehad; die moet beginnen te typen, niet eerst
   vier voordelen wegscrollen. */
@media (max-width: 800px) {
    .dl-aanmeld { grid-template-columns: minmax(0, 1fr); }
    .dl-aanmeld-reden { order: 2; }
    .dl-aanmeld-kaart { order: 1; }
}

.dl-aanmeld-reden {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    border-radius: var(--radius-lg);
    background: var(--dl-blue-950);
    color: #ffffff;
}

.dl-aanmeld-reden::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -3;
    background:
        radial-gradient(60% 48% at 18% 8%, color-mix(in srgb, var(--dl-blue-700) 60%, transparent), transparent 70%),
        radial-gradient(52% 44% at 88% 96%, color-mix(in srgb, var(--dl-blue-450) 34%, transparent), transparent 74%);
}

/* Een eigen tegelmaat en niet die van de startpagina. Het vlak is hier nog
   geen driehonderd pixels breed; met een tegel van 988 passen er twee iconen
   in en leest het als vlekken in plaats van als textuur. */
.dl-aanmeld-raster {
    position: absolute;
    inset: 0;
    z-index: -2;

    background-image: url("../img/raster.svg");
    background-repeat: repeat;
    background-size: 420px;
    opacity: .14;

    mask-image: linear-gradient(200deg, #000 0%, rgba(0, 0, 0, .4) 46%, transparent 82%);
    -webkit-mask-image: linear-gradient(200deg, #000 0%, rgba(0, 0, 0, .4) 46%, transparent 82%);
}

.dl-aanmeld-reden-in { position: relative; padding: clamp(1.25rem, 1rem + 1.2vw, 1.85rem); }

.dl-aanmeld-reden h2 {
    margin: 0 0 1.1rem;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -.018em;
    color: #ffffff;
}

/* -- De stappenbalk ----------------------------------------------- */

/* De lijn loopt door de bolletjes heen en niet ernaast: hij zit op de rand
   van elke stap, zodat hij vanzelf de hoogte van de tekst volgt. De laatste
   stap heeft geen lijn meer, daar houdt het op. */
.dl-stappen {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.dl-stap {
    position: relative;
    padding-bottom: 1.1rem;
}

.dl-stap:last-child { padding-bottom: 0; }

.dl-stap:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 30px;
    bottom: 2px;
    width: 2px;
    background: rgba(255, 255, 255, .16);
}

/* De gedane stappen zijn een link, de huidige en de komende niet. Beide
   tekenen hetzelfde, anders springt de rij als je een stap afrondt. */
.dl-stap > a,
.dl-stap > span {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: .1rem .8rem;
    color: inherit;
    text-decoration: none;
}

.dl-stap > a:hover { text-decoration: none; }
.dl-stap > a:hover .dl-stap-tekst strong { color: #ffffff; }

.dl-stap > a:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
    border-radius: min(8px, var(--dl-r-max));
}

.dl-stap-teken {
    grid-row: span 2;
    display: grid;
    place-items: center;
    align-self: start;

    width: 32px;
    height: 32px;
    border-radius: min(50%, var(--dl-r-max));
    border: 2px solid rgba(255, 255, 255, .22);
    background: var(--dl-blue-950);

    font-size: .85rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, .55);
}

/* Afgerond: gevuld met een vinkje. Bezig: wit met een ring eromheen, zodat je
   hem terugvindt zonder de nummers te lezen. */
.dl-stap.is-klaar .dl-stap-teken {
    border-color: #6fd6b0;
    background: #6fd6b0;
    color: var(--dl-blue-950);
}

.dl-stap.is-nu .dl-stap-teken {
    border-color: #ffffff;
    background: #ffffff;
    color: var(--dl-blue-900);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .16);
}

.dl-stap-tekst { grid-column: 2; }

.dl-stap-tekst strong {
    display: block;
    font-size: .95rem;
    font-weight: 700;
    color: rgba(255, 255, 255, .72);
}

.dl-stap-tekst span {
    display: block;
    margin-top: .1rem;
    font-size: .82rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, .5);
}

.dl-stap.is-nu .dl-stap-tekst strong,
.dl-stap.is-klaar .dl-stap-tekst strong { color: #ffffff; }
.dl-stap.is-nu .dl-stap-tekst span { color: rgba(255, 255, 255, .7); }

/* -- Het formulier per stap --------------------------------------- */

.dl-aanmeld-teller {
    margin: 0 0 .2rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--dl-blue-500);
}

/* Twee velden naast elkaar waar dat kan; wat 'breed' is neemt de rij. Zo
   staan straat en huisnummer naast elkaar zonder dat er een tweede
   rasterklasse bij hoeft. */
.dl-velden {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--gap, 1rem);
    margin-top: 1.5rem;
}

.dl-velden > .is-breed { grid-column: 1 / -1; }

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

/* De soort account: een kaart per soort, de hele kaart is aan te klikken.
   Zoals de betaalwijze bij het afrekenen, met een rondje voor de tekst. Met
   .dl-soort-veld ervoor, want .field label uit het basisthema maakt van elk
   label een blok. */
.dl-soort-veld { min-width: 0; margin: 0; padding: 0; border: 0; }

.dl-soort-keuze { display: grid; gap: .6rem; }

.dl-soort-veld .dl-soort-optie {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    margin: 0;
    padding: .9rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #ffffff;
    font-weight: 400;
    cursor: pointer;
    transition: border-color .14s ease, background .14s ease;
}

.dl-soort-veld .dl-soort-optie:hover { border-color: color-mix(in srgb, var(--dl-blue-700) 35%, transparent); }

.dl-soort-veld .dl-soort-optie:has(input:checked) {
    border-color: color-mix(in srgb, var(--dl-blue-700) 45%, transparent);
    background: var(--accent-soft);
}

.dl-soort-veld .dl-soort-optie input {
    flex: none;
    width: 18px;
    height: 18px;
    margin: .15rem 0 0;
    accent-color: var(--dl-blue-700);
}

.dl-soort-tekst { display: grid; gap: .2rem; min-width: 0; font-size: .88rem; line-height: 1.5; color: var(--ink-soft); }
.dl-soort-tekst strong { font-size: .98rem; color: var(--dl-blue-900); }

.dl-soort-veld.is-invalid .dl-soort-optie { border-color: rgba(192, 51, 44, .45); }
.dl-soort-veld > .error { margin-top: .5rem; }

/* Vorige links, verder rechts. Op één regel, want het zijn de enige twee
   dingen die je op dit scherm kunt doen. */
.dl-aanmeld-knoppen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    margin-top: 1.5rem;
}

.dl-aanmeld-knoppen .btn:only-child { margin-left: auto; }

/* -- Het overzicht op de laatste stap ------------------------------ */

.dl-overzicht {
    display: grid;
    gap: .9rem;
    margin: 1.5rem 0;
}

.dl-overzicht section {
    padding: .95rem 1.1rem 1.05rem;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    background: var(--surface-alt);
}

.dl-overzicht h2 {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;

    margin: 0 0 .6rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--dl-blue-500);
}

.dl-overzicht h2 a {
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--accent);
}

.dl-overzicht dl { margin: 0; display: grid; gap: .3rem; }

.dl-overzicht dl > div {
    display: grid;
    grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
    gap: .75rem;
    font-size: .9rem;
}

.dl-overzicht dt { color: var(--ink-soft); }
.dl-overzicht dd { margin: 0; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }

@media (max-width: 460px) {
    .dl-overzicht dl > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

.dl-aanmeld-kaart h1 { margin-top: 0; }

.dl-aanmeld-kaart form { margin-top: 1.5rem; }

/* De kleine regel onder het formulier. */
.dl-aanmeld-klein {
    margin: .9rem 0 0;
    font-size: .83rem;
    text-align: center;
    color: var(--ink-faint);
}

/* De foutpagina staat onderaan dit bestand, bij de andere pagina's. Hier
   stond het reuzencijfer dat er vroeger in het midden op stond. */

/* =====================================================================
   Tweede laag: diepte en beweging
   =====================================================================
   Alles hieronder is aankleding bovenop de opmaak die er al staat. Het
   uitgangspunt blijft dat dit een groothandel is en geen etalage: de
   beweging is klein, de diepte is zacht, en niets leidt af van het
   artikelnummer en de voorraad.

   Wie "minder beweging" heeft ingesteld krijgt onderaan dit bestand
   alles uitgezet.
   ===================================================================== */

/* -- Letterwerk ------------------------------------------------------ */

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

body {
    /* Inter heeft alternatieve lettervormen die schermtekst rustiger
       maken; die zetten we aan. */
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
    letter-spacing: -.005em;
}

h1, h2, h3, .dl-cats-parent, .dl-mega-col-title { letter-spacing: -.022em; }

/* Cijfers even breed, zodat bedragen onder elkaar recht staan. */
.price { font-variant-numeric: tabular-nums; }

/* -- Koptekst die meekrimpt ------------------------------------------ */

/* Dekkend wit, in rust en tijdens het scrollen. Hier stond de balk op 88%
   met een backdrop-filter eronder: dan schemert de pagina erdoorheen en
   krijgt de bovenste helft een andere tint dan de menubalk eronder, die wél
   wit is. Dat verschil zag je precies op de naad tussen die twee.

   De vervaging is meteen weg. Een element met backdrop-filter houdt de hele
   tijd een grafische laag bezet, en dit element staat op élke pagina
   bovenaan - dezelfde valkuil die verderop bij de schuiflade beschreven
   staat. Zonder doorschijnende achtergrond viel er toch niets te vervagen.

   Bij het scrollen verandert alleen de schaduw: dat is het signaal dat de
   balk los van de pagina is komen te staan. */
.site-header {
    transition: box-shadow .25s ease;
    background: var(--surface);
}

.site-header.is-stuck { box-shadow: 0 6px 24px rgba(15, 23, 42, .08); }

.site-header.is-stuck .header-main { padding-block: .6rem; }
.site-header.is-stuck .dl-logo img { height: 36px; }

.header-main, .dl-logo img { transition: padding .25s ease, height .25s ease; }

/* -- Binnenschuiven bij scrollen ------------------------------------- */

[data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s cubic-bezier(.16, 1, .3, 1),
                transform .6s cubic-bezier(.16, 1, .3, 1);
}

[data-reveal].is-in {
    opacity: 1;
    transform: none;
}

/* -- Heroblok met diepte --------------------------------------------- */

/* De donkere hero met al zijn lagen staat hieronder bij elkaar. */


/* == De hero =========================================================
   Een donker vlak met de catalogus als textuur erachter, de boodschap
   ervoor en de categorieen eronder.

   Het raster op de achtergrond bestond uit twee gekruiste lijnenverlopen:
   patroon zonder betekenis. Dat zijn nu de artikelen zelf. Ze staan ver
   weggedraaid, want ze moeten het vlak vullen en niet om aandacht vragen;
   de tekst erboven blijft het enige wat je leest.
   ==================================================================== */

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

/* De gloed onder het raster. Twee zachte vlekken in de merkkleur in plaats
   van een recht verloop; dat laatste ziet er op een breed scherm uit als een
   band over de pagina. */
.dl-hero::before {
    content: "";
    position: absolute;
    inset: -30% -10% auto -10%;
    height: 150%;
    z-index: -3;
    background:
        radial-gradient(54% 54% at 16% 30%, color-mix(in srgb, var(--dl-blue-700) 52%, transparent), transparent 68%),
        radial-gradient(44% 44% at 84% 10%, color-mix(in srgb, var(--dl-blue-450) 32%, transparent), transparent 70%),
        radial-gradient(64% 58% at 56% 112%, color-mix(in srgb, var(--dl-blue-800) 50%, transparent), transparent 74%);
}

/* Een sluier tussen het raster en de tekst. Hij dooft het patroon waar
   gelezen wordt en laat het pas rond de kaart weer zien; de instelling van
   het raster zelf blijft zo ongemoeid. Tot voorbij het midden, anders staat
   er tussen de tekst en de kaart een strook losse tekeningen die met allebei
   om aandacht vecht. */
.dl-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(100deg,
        var(--dl-blue-950) 0%,
        rgba(15, 20, 48, .94) 30%,
        rgba(15, 20, 48, .72) 50%,
        rgba(15, 20, 48, .3) 70%,
        transparent 86%);
    pointer-events: none;
}

/* Zonder tweede kolom staat de tekst over de volle breedte, dus moet de
   sluier mee. Van links naar rechts werkt dan niet meer: van boven naar
   beneden wel, want daar staat de tekst en onderaan de categorierij. */
@media (max-width: 62rem) {
    .dl-hero::after {
        background: linear-gradient(180deg,
            rgba(15, 20, 48, .9) 0%,
            rgba(15, 20, 48, .72) 55%,
            rgba(15, 20, 48, .45) 100%);
    }
}

/* -- Het raster ------------------------------------------------------
   Dezelfde vierkante cellen als hiervoor, maar nu staat er in een deel
   ervan een vorm: dezelfde dunne lijntekeningen die het categoriemenu
   gebruikt, met precies de lijndikte van het raster eromheen.

   Een eerdere poging zette er echte productfoto's in. Dat werd een veld
   grijze blokjes met een vage vlek erin, en het raster zelf was weg. Een
   foto heeft altijd een eigen achtergrond en lost dus nooit op in het
   vlak; een lijntekening wel.
   -------------------------------------------------------------------- */

/* Een herhalende tegel in plaats van een raster van elementen.

   Hiervoor stonden hier 366 <span>'s met een grid eroverheen. Dat werkt tot
   het venster breder wordt dan waar het aantal cellen op berekend was: er
   passen dan meer kolommen op een rij, dus zijn er minder rijen, en het
   raster houdt halverwege de hero op. Een tegel die zich herhaalt heeft die
   grens niet - background-repeat vult elk vlak, hoe groot ook.

   background-size stuurt de celmaat: de tegel is 13 bij 13 cellen, dus een
   celmaat van 80 pixels is een tegel van 1040. Wil je de hokjes groter of
   kleiner, dan is dat hier een getal en niet een nieuw bestand.

   De dekking zit op het element en niet in het bestand, zodat die per plek
   kan verschillen: de hero staat op .16, een sectieband mag zachter. */
.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;

    /* Naar de randen oplossen, het sterkst rechts waar geen tekst staat.
       Zonder dit loopt het raster tot tegen de rand en leest het als een
       tabel die halverwege is afgeknipt. */
    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%);
}

/* -- De boodschap ----------------------------------------------------- */

/* Dit element is ook .wrap, en .wrap centreert met margin:0 auto. Stond hier
   max-width:44rem, dan won die van de 1280px van .wrap en zweefde het hele
   blok 268px naar binnen - terwijl de kop, de categorierij en elke sectie
   eronder gewoon bij de paginamarge beginnen. De breedtebeperking hoort dus
   op de tekstkolom en niet op de omhulling. */
.dl-hero-in {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2rem, 1rem + 4vw, 4.5rem);
    align-items: center;
    padding-bottom: clamp(2.5rem, 1.5rem + 4vw, 4rem);
}

/* De tweede kolom bestaat alleen als er een kaart in staat. Staat er geen
   dealer vrijgegeven, dan tekent de partial niets en zou een vaste
   tweekolomsindeling een lege helft overhouden naast de tekst.

   De kolom met de kaart groeit mee maar neemt nooit de ruimte die de kop
   nodig heeft: op een laptop van 1120px zou een vaste 30rem "Compleet
   sanitair," over twee regels duwen. */
.dl-hero-in:has(.dl-dealerkaart) {
    grid-template-columns: minmax(0, 1fr) minmax(0, clamp(20rem, 30vw, 30rem));
}

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

/* Onder de tabletmaat past er geen tweede kolom meer naast. Het blok zakt dan
   onder de boodschap in plaats van zich dood te drukken. */
@media (max-width: 62rem) {
    .dl-hero-in,
    .dl-hero-in:has(.dl-dealerkaart) {
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(1.75rem, 1.25rem + 2vw, 2.5rem);
    }
    .dl-dealerkaart { max-width: 26rem; margin-inline: auto; }
}

.dl-eyebrow-licht {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .72);
}

.dl-eyebrow-licht::before {
    content: "";
    width: 26px;
    height: 2px;
    border-radius: min(2px, var(--dl-r-max));
    background: var(--dl-blue-400);
}

.dl-hero-titel {
    margin-top: 1.1rem;
    font-size: clamp(2.2rem, 1.1rem + 4.4vw, 4rem);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -.035em;
    color: #ffffff;

}

/* Het blauwe balkje onder de titel is weg. Het streepje bij het bovenschrift
   doet hetzelfde werk, en twee accenten boven elkaar in hetzelfde blok tellen
   op tot ruis. Het bovenschrift blijft, want dat draagt tekst; het balkje
   droeg niets. */

.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 dealerkaart naast de boodschap --------------------------------- */

/* position: relative, want de tooltip wordt hierbinnen op de muis gezet. */
.dl-dealerkaart {
    position: relative;
    display: grid;
    justify-items: center;
}

/* Nederland is smal en hoog. Stuur je op breedte, dan vallen Zeeland en
   Limburg onder de vouw; daarom staat de grens op de hoogte. */
.dl-dealerkaart-svg {
    display: block;
    width: 100%;
    max-width: 28rem;
    max-height: 40rem;
    height: auto;

    /* De stadsnaam in de tooltip mag buiten de landsgrens vallen. */
    overflow: visible;

    /* Losmaken van het vlak erachter. Geen kaartrand nodig: de schaduw doet
       het werk en volgt de kustlijn in plaats van een rechthoek. */
    filter: drop-shadow(0 18px 30px rgba(6, 9, 22, .55));
}

/* Dekkende vlakken en geen doorschijnende. Met transparantie liep het
   iconenraster van de hero dwars door Nederland heen en werd de kaart een
   spook; nu ligt hij er als een voorwerp bovenop.

   Een provincie zonder dealers blijft wel staan. Laat je die weg, dan is het
   geen kaart van Nederland meer maar een verzameling losse vlekken en
   herkent niemand meer waar hij naar kijkt. */
.dl-prov {
    fill: #1b2350;
    stroke: #39457e;
    stroke-width: 1.1;
    stroke-linejoin: round;
}

.dl-prov.is-bezet {
    fill: var(--dl-blue-600);
    stroke: var(--dl-blue-300);
}

.dl-prov,
.dl-stip-kern { transition: fill .14s ease; }

/* Alleen een provincie waar dealers zitten reageert op de muis. Lichtte een
   lege provincie ook op, dan belooft de kaart iets wat er niet is: Zeeland
   voelde daardoor net zo goed als Zuid-Holland. */
.dl-prov.is-bezet:hover,
.dl-prov-link:hover .dl-prov.is-bezet,
.dl-prov-link:focus-visible .dl-prov.is-bezet { fill: var(--dl-blue-500); }

/* Waar je nu naar kijkt, staat aan. */
.dl-prov.is-actief { fill: var(--dl-blue-500); stroke: #ffffff; stroke-width: 1.6; }

.dl-dealerkaart.is-klikbaar .dl-prov-link,
.dl-dealerkaart.is-klikbaar a.dl-stip { cursor: pointer; }

/* De ring valt binnen de vorm, want een omlijning om een provincie heen zou
   de buurprovincie half overlappen. */
.dl-prov-link:focus-visible,
a.dl-stip:focus-visible { outline: 2px solid #ffffff; outline-offset: -2px; }

/* De bol: groene kern met een donkere ring eromheen, zodat hij loskomt van de
   provincie eronder ook als die is ingekleurd. Groen is hier de enige kleur
   die geen blauw is, dus de stippen springen er meteen uit zonder dat er een
   legenda bij hoeft. */
.dl-stip { cursor: default; }

.dl-stip-ring { fill: rgba(11, 15, 36, .55); }

.dl-stip-kern {
    fill: var(--ok);
    stroke: var(--dl-blue-950);
    stroke-width: 1.6;
}

.dl-stip:hover .dl-stip-kern,
.dl-stip:focus-visible .dl-stip-kern { fill: #4fe3b0; }

.dl-stip.is-actief .dl-stip-kern { fill: #ffffff; stroke: var(--ok); stroke-width: 3; }

/* De tooltip volgt de muis. Hij staat buiten de svg: binnen een svg kan geen
   gewone tekst staan die netjes afbreekt en een achtergrondje krijgt. */
.dl-kaart-tip {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    transform: translate(-50%, -150%);
    padding: .3rem .6rem;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: min(8px, var(--dl-r-max));
    background: rgba(11, 15, 36, .94);
    color: #ffffff;
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;

    /* Anders schuift de kaart onder de muis weg zodra de tooltip eronder
       komt, en knippert hij aan en uit. */
    pointer-events: none;
}

.dl-kaart-tip[hidden] { display: none; }

.dl-kaart-tip b {
    margin-left: .35rem;
    color: var(--ok);
    font-weight: 700;
}


/* -- De categorieblokken op de startpagina ----------------------------- */

.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.4rem, 1.2rem + .8vw, 1.9rem); letter-spacing: -.02em; }
.dl-cat-kop .sub { margin: .35rem 0 0; max-width: 62ch; color: var(--ink-soft); font-size: .95rem; }

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

/* Elke kaart zit in een omhulsel voor de intro-beweging, en dat omhulsel was
   het rasteritem - niet de kaart. Het omhulsel rekte netjes mee tot de hoogte
   van de rij, de kaart erin bleef op zijn eigen hoogte staan. Vandaar dat een
   kaart met een titel van een regel korter was dan zijn buren.

   Door het omhulsel zelf een raster te maken vult de kaart het helemaal. */
.dl-artikelen > * { display: grid; }

/* Vier op een rij, vast. Met de gewone maat vult het raster zichzelf en dat
   worden er vijf over de volle breedte; een kaart is dan 240 pixels en een
   naam met een afwerking erachter past er niet meer op. Vast is hier beter
   dan meeschalen: het aantal is de reden, niet de minimumbreedte. */
.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)); }
}

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

/* Drie regels voor de naam in plaats van twee. Een uitvoering heet "Douchegoot
   met flens en rooster - 1000x70 - Geborsteld koper"; op twee regels valt de
   afwerking eraf, en juist daarop is gezocht. */
.dl-artikelen.is-vier .dl-art-titel {
    -webkit-line-clamp: 3;
    min-height: calc(1.35em * 3);
}

/* -- De donkere band ---------------------------------------------------
   Hetzelfde vlak als de hero, om en om. Niet elke sectie: een accent dat
   overal staat is geen accent meer.

   De kaarten blijven wit. Een tweede soort kaart voor dit vlak is dubbel
   werk voor een verschil dat niemand mist, en precies waar twee versies van
   hetzelfde ding uit elkaar gaan lopen.
   ---------------------------------------------------------------------- */

.dl-cat.is-donker {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--dl-blue-950);
    color: #ffffff;
}

/* Ingekaderd in plaats van van rand tot rand. Op de productpagina komt na
   dit blok het dealerblok, dat óók op het merkblauw staat; twee volle banden
   tegen elkaar worden één donkere massa van achthonderd pixels waarin de
   scheiding wegvalt. Met een rand licht eromheen blijft het een blok, en
   loopt de lichte band eronder gewoon door naar de afsluiting.

   De binnenste .wrap zorgt voor de vulling binnen het kader; die stond er al
   omdat dit hetzelfde blok is als op de startpagina. */
.dl-cat.is-donker.is-ingekaderd {
    padding-block: clamp(1.5rem, 1.2rem + 1.4vw, 2.5rem);
    border-radius: var(--radius-lg);
}

.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%, color-mix(in srgb, var(--dl-blue-700) 52%, transparent), transparent 68%),
        radial-gradient(44% 44% at 84% 10%, color-mix(in srgb, var(--dl-blue-450) 32%, transparent), transparent 70%),
        radial-gradient(64% 58% at 56% 112%, color-mix(in srgb, var(--dl-blue-800) 50%, transparent), transparent 74%);
}

/* Dezelfde tegel als de hero, maar van boven naar beneden in plaats van
   radiaal: in de hero staat de tekst links en blijft die hoek leeg, hier
   staat de inhoud in het midden en moeten de vormen daarvoor oplossen.

   De celmaat is 76px: de tegel is 13 cellen breed, dus 13 x 76 = 988. */
.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: .21;

    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 .dl-eyebrow  { color: var(--dl-blue-200); }
.dl-cat.is-donker .dl-cat-kop .sub { color: rgba(255, 255, 255, .72); }


/* -- De artikelkaart in die blokken ------------------------------------ */

/* De hele kaart is één link. app.css onderstreept elke a:hover, en dat sloeg
   daardoor neer op de titel en het artikelnummer tegelijk. Uitzetten op de
   link alleen is niet genoeg: de kinderen erven het onderstrepen van hem. */
.dl-art, .dl-art:hover, .dl-art:focus-visible,
.dl-art *, .dl-art:hover * { text-decoration: none; }

.dl-art {
    display: grid;
    grid-template-rows: auto 1fr;
    border: 1px solid var(--line-soft);
    border-radius: min(16px, var(--dl-r-max));
    background: var(--surface);
    overflow: hidden;
    color: inherit;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.dl-art:hover {
    border-color: color-mix(in srgb, var(--dl-blue-700) 28%, transparent);
    box-shadow: 0 10px 26px rgba(15, 23, 42, .08);
    transform: translateY(-2px);
}

.dl-art:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Vierkant en vullend: van 400 nagemeten foto's is 97 procent 1000x1000, dus
   in een vierkant kader valt er niets af. De foto beweegt niet mee bij het
   zweven - inzoomen snijdt er een rand af, en dat is bij een productfoto net
   de kraan of de poot van het bad. */
.dl-art-foto {
    position: relative;
    display: block;
    aspect-ratio: 1;
    background: #f4f6f9;
}

.dl-art-foto > img { width: 100%; height: 100%; object-fit: cover; display: block; }

.dl-art-merk {
    position: absolute;
    top: .55rem;
    right: .55rem;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: min(8px, var(--dl-r-max));
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .12);
}

.dl-art-merk img { width: 18px; height: 18px; display: block; }

.dl-art-nee {
    position: absolute;
    left: .55rem;
    bottom: .55rem;
    padding: .2rem .5rem;
    border-radius: min(999px, var(--dl-r-max));
    background: rgba(16, 17, 12, .82);
    color: #ffffff;
    font-size: .7rem;
    font-weight: 600;
}

.dl-art-body {
    display: grid;
    align-content: start;
    gap: .4rem;
    padding: .85rem .9rem 1rem;
}

/* Altijd twee regels hoog, ook als de titel er maar een nodig heeft. Zonder
   die ondergrens is elke rij wel even hoog - het raster rekt ze immers gelijk -
   maar verschillen de rijen onderling, en dat zie je meteen zodra er een blok
   met korte namen tussen staat. Langer dan twee regels wordt afgekapt, anders
   gaat het hele raster op de langste titel staan. */
.dl-art-titel {
    font-size: .92rem;
    font-weight: 500;
    line-height: 1.35;
    min-height: calc(1.35em * 2);
    color: var(--ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dl-art:hover .dl-art-titel { color: var(--accent); }

/* Ook deze regel houdt zijn hoogte als hij leeg is: niet elk artikel heeft
   een nummer, en zonder die ondergrens is zo'n kaart een regel korter. */
.dl-art-sku {
    min-height: calc(1.4em);
    font-size: .76rem;
    line-height: 1.4;
    color: var(--ink-faint);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* -- De artikelkaart voor wie ingelogd is -------------------------------
   Dan is de kaart een blok met de link bovenin en eronder de prijzen en de
   winkelwagen. De link houdt de opbouw van de gewone kaart: foto, naam,
   nummer. Het vak eronder staat altijd onderaan, zodat de knoppen in een rij
   kaarten op een lijn liggen, ook als de ene naam twee regels heeft en de
   andere drie.
   --------------------------------------------------------------------- */

.dl-art.is-koop { grid-template-rows: 1fr auto; }

.dl-art-link {
    display: grid;
    grid-template-rows: auto 1fr;
    color: inherit;
    border-radius: min(16px, var(--dl-r-max)) min(16px, var(--dl-r-max)) 0 0;
}

.dl-art-link:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }

/* De naam kleurt mee als u de link aanwijst, niet als u bij het aantal bent. */
.dl-art.is-koop:hover .dl-art-titel { color: var(--ink); }
.dl-art.is-koop .dl-art-link:hover .dl-art-titel { color: var(--accent); }

.dl-art-koop {
    padding: .75rem .9rem .9rem;
    border-top: 1px solid var(--line-soft);
    container: artkoop / inline-size;
}

/* Zonder btw links, met btw rechts, net als op de productpagina. Bij een
   DutchLine-klant de adviesprijs op dezelfde manier eronder, met een haarlijn
   ertussen: zo staan de bedragen zonder btw recht onder elkaar, en die met btw
   ook. */
.dl-art-prijzen {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: .45rem 0;
    margin: 0;
}

/* De ruimte tussen de kolommen zit in de rechterkolom en niet in het raster:
   dan loopt de haarlijn boven de adviesprijs door. */
.dl-art-prijzen > div { min-width: 0; }
.dl-art-prijzen .is-rechts { padding-left: .8rem; text-align: right; }

.dl-art-prijzen .is-advies {
    padding-top: .45rem;
    border-top: 1px solid var(--line-soft);
}

.dl-art-prijzen .is-advies dd {
    font-size: .88rem;
    font-weight: 600;
    color: var(--ink-soft);
}

.dl-art-prijzen dt {
    font-size: .68rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ink-faint);
}

.dl-art-prijzen dd {
    margin: .1rem 0 0;
    font-size: 1rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--dl-blue-900);
}

/* Op een smalle kaart passen twee bedragen niet naast elkaar. Dan elk bedrag
   een eigen regel: de naam links, het bedrag rechts. */
@container artkoop (max-width: 12.5rem) {
    .dl-art-prijzen { grid-template-columns: minmax(0, 1fr); gap: .35rem; }

    .dl-art-prijzen > div {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .5rem;
    }

    .dl-art-prijzen dd { margin: 0; }
    .dl-art-prijzen .is-rechts { padding-left: 0; text-align: left; }

    .dl-art-prijzen .is-advies + .is-advies { padding-top: 0; border-top: 0; }
}

/* Het aantal en de knop. Het aantal neemt de ruimte, de knop houdt zijn maat.
   Is de kaart te smal voor "In winkelwagen", dan blijft alleen het wagentje
   over; wie niet kijkt hoort de tekst nog wel. */
.dl-art-leggen {
    display: flex;
    gap: .5rem;
    margin-top: .8rem;
    container: leggen / inline-size;
}

.dl-art-leggen .dl-tel { flex: 1 1 auto; min-width: 0; }

.dl-art-leggen .dl-tel input {
    flex: 1 1 auto;
    width: 100%;
    min-width: 2.2rem;
    padding: .55rem .25rem;
    border: 0;
    background: #ffffff;
    font: inherit;
    font-size: .95rem;
    font-weight: 600;
    text-align: center;
    color: var(--ink);
}

.dl-art-leggen .btn { flex: none; padding-inline: .85rem; }
.dl-art-leggen .btn svg { flex: none; }

@container leggen (max-width: 18rem) {
    .dl-art-mand-tekst {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

.dl-art-kies { margin: 0; }

/* De uitvoeringen op de kaart: kleine stalen zoals de keuze op de
   productpagina, of knopjes met tekst. Daaronder de naam van de gekozen en
   zijn prijs met de knop. */
.dl-art-keuze .dl-art-stalen { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .45rem; }

.dl-art-staal {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 2px;
    border: 2px solid transparent;
    border-radius: min(999px, var(--dl-r-max));
    transition: border-color .14s ease;
}

.dl-art-staal:hover { border-color: var(--line); }
.dl-art-staal.is-nu { border-color: var(--dl-blue-900); }
.dl-art-staal:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.dl-art-staal-stip {
    width: 100%;
    height: 100%;
    border: 1px solid rgba(16, 17, 12, .16);
    border-radius: min(999px, var(--dl-r-max));
    background: #ffffff;
    box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .55), inset -2px -3px 4px rgba(16, 17, 12, .18);
}

.dl-art-staal-stip.is-onbekend {
    background:
        linear-gradient(135deg, transparent 44%, rgba(16, 17, 12, .3) 44%, rgba(16, 17, 12, .3) 56%, transparent 56%),
        var(--surface-alt);
}

.dl-art-stalen.is-tekst .dl-art-staal {
    width: auto;
    height: auto;
    min-height: 30px;
    padding: .2rem .6rem;
    border: 1px solid var(--line);
    border-radius: min(999px, var(--dl-r-max));
    color: var(--ink);
    font-size: .75rem;
    font-weight: 600;
    text-decoration: none;
}

.dl-art-stalen.is-tekst .dl-art-staal:hover { border-color: var(--ink-faint); }
.dl-art-stalen.is-tekst .dl-art-staal.is-nu { border-color: var(--dl-blue-900); background: var(--dl-blue-900); color: #ffffff; }

.dl-art-keuze-naam {
    display: block;
    overflow: hidden;
    margin-bottom: .6rem;
    font-size: .78rem;
    font-weight: 600;
    color: var(--ink-soft);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.dl-art-aanvraag {
    margin: 0 0 .6rem;
    font-size: .86rem;
    font-weight: 600;
    color: var(--ink-soft);
}

/* Zestien pixels op een aanraakscherm, net als de andere velden: anders zoomt
   een iPhone de pagina in zodra u het aantal aantikt. */
@media (any-pointer: coarse) {
    .dl-art-leggen .dl-tel input { font-size: 16px; }
}

/* -- Het hartje: bewaren bij de favorieten ------------------------------
   Op een kaart linksboven over de foto, tegenover het merkje rechtsboven. Het
   ligt er los overheen en zit niet in de link van de kaart; zie
   partials/favoriet.php. Leeg is een omtrek, aan is een vol hartje in rood:
   dat kent iedereen van een webwinkel, en dan hoeft er geen woord bij.
   --------------------------------------------------------------------- */

.dl-art.is-koop { position: relative; }

.dl-fav { margin: 0; }

.dl-fav.is-hart {
    position: absolute;
    top: .55rem;
    left: .55rem;
    z-index: 2;
}

.dl-fav.is-hart .dl-fav-knop {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: min(9px, var(--dl-r-max));
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .12);
    color: var(--ink-soft);
    cursor: pointer;
    transition: color .14s ease, background .14s ease;
}

.dl-fav.is-hart .dl-fav-knop:hover { color: #e11d48; background: #ffffff; }
.dl-fav.is-hart .dl-fav-knop:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Op de productpagina linksboven op de foto, tegenover het merkje: rond, net
   als dat merkje en het vergrootglas. De tooltip staat ernaast en niet
   erboven, want de foto knipt af wat er buiten valt. */
.dl-fav.is-foto {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;
}

.dl-fav.is-foto .dl-fav-knop {
    position: relative;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: min(999px, var(--dl-r-max));
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 6px 16px rgba(15, 23, 42, .07);
    color: var(--ink-soft);
    cursor: pointer;
    transition: color .14s ease, background .14s ease, border-color .14s ease;
}

.dl-fav.is-foto .dl-fav-knop:hover { color: #e11d48; background: #ffffff; border-color: #fecdd3; }
.dl-fav.is-foto .dl-fav-knop:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.dl-fav.is-foto .dl-fav-knop::after {
    content: attr(data-tip);
    position: absolute;
    top: 50%;
    left: calc(100% + .55rem);
    padding: .32rem .6rem .36rem;
    border-radius: min(7px, var(--dl-r-max));
    background: var(--dl-blue-950);
    color: #ffffff;
    font-size: .74rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    opacity: 0;
    transform: translate(-4px, -50%);
    pointer-events: none;
    transition: opacity .14s ease, transform .14s ease;
}

@media (hover: hover) {
    .dl-fav.is-foto .dl-fav-knop:hover::after { opacity: 1; transform: translate(0, -50%); }
}

.dl-fav.is-foto .dl-fav-knop:focus-visible::after { opacity: 1; transform: translate(0, -50%); }

/* Met .dl-fav ervoor: de grijze kleur van de hartjes hierboven weegt even
   zwaar, en dan moet de rode van aan er later in het bestand overheen. */
.dl-fav .dl-fav-knop.is-aan { color: #e11d48; }
.dl-fav .dl-fav-knop.is-aan svg { fill: currentColor; }

/* Terwijl het verzoek onderweg is: rustiger, en niet nog een keer. */
.dl-fav-knop[data-favoriet-bezig] { opacity: .55; }

/* Op een aanraakscherm een vinger groot. */
@media (any-pointer: coarse) {
    .dl-fav.is-hart .dl-fav-knop { width: 40px; height: 40px; }
    .dl-fav.is-foto .dl-fav-knop { width: 42px; height: 42px; }
}

/* Het aantal boven de favorieten. */
.dl-fav-telling {
    margin: 0 0 1rem;
    font-size: .9rem;
    font-weight: 600;
    color: var(--ink-soft);
}

/* -- De verkooppuntenpagina -------------------------------------------- */

/* Kaart links, lijst rechts. De kaart loopt mee bij het scrollen: hij is het
   filter, en een filter dat uit beeld verdwijnt zodra je de lijst leest is
   geen filter meer. */
.dl-vkp {
    display: grid;
    gap: clamp(1.75rem, 1rem + 3vw, 3rem);
    align-items: start;
}

@media (min-width: 60rem) {
    .dl-vkp { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); }

    /* Op de wikkel en niet op de kaart zelf: die zit inmiddels in een
       .dl-kaart, en een plakkend element beweegt alleen binnen het vak van
       zijn ouder. Stond het op de kaart, dan is dat vak precies zo hoog als
       de kaart en gebeurt er niets.

       De afstand tot de kop staat in --dl-kop-plak, op één plek voor de hele
       site. */
    .dl-vkp-zij {
        position: sticky;
        top: var(--dl-kop-plak);
    }
}

/* De kaart van Nederland staat op een lichte achtergrond en niet in de
   donkere hero, dus krijgt het vlak eronder het merkblauw mee. Zonder dat
   zweven de provincies los op wit. De kopbalk eromheen komt van .dl-kaart. */
.dl-vkp-kaart .dl-kaart-in {
    padding: clamp(.9rem, .7rem + .8vw, 1.25rem);
    background: var(--dl-blue-950);
}

.dl-vkp-terug { margin-top: .9rem; }

/* Alleen het blok Buiten Nederland is nog een groep; de Nederlandse punten
   staan in één rij. */
.dl-vkp-groep > h2 {
    margin: 0 0 .5rem;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--dl-blue-500);
}

/* Drie naast elkaar en geen auto-fill. Met vier werd elk kaartje zo smal dat
   een naam als "Ducci Bouw & Bouwmaterialen B.V." over drie regels ging en de
   adressen eronder niet meer op één lijn stonden. */
.dl-vkp-punten {
    display: grid;
    gap: .85rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (max-width: 1100px) { .dl-vkp-punten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px)  { .dl-vkp-punten { grid-template-columns: minmax(0, 1fr); } }

.dl-vkp-punten > li {
    position: relative;
    display: grid;
    align-content: start;
    gap: .3rem;

    padding: 1.1rem 1.2rem 1.15rem;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    background: var(--surface);
    transition: border-color .16s ease, box-shadow .16s ease;
}

.dl-vkp-punten > li:hover {
    border-color: var(--dl-blue-300);
    box-shadow: 0 8px 22px rgba(15, 23, 42, .07);
}

/* Het speldje in de hoek, op dezelfde plek als het merkteken op een
   artikelkaart. De naam houdt er ruimte voor vrij, anders schuift een lange
   naam eronderdoor. */
.dl-vkp-speld {
    position: absolute;
    top: .9rem;
    right: .9rem;

    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: min(8px, var(--dl-r-max));
    background: var(--dl-blue-100);
    color: var(--dl-blue-700);
}

.dl-vkp-buiten {
    margin-top: 2.5rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--line-soft);
}

.dl-vkp-buiten-uitleg {
    margin: -.4rem 0 1.1rem;
    font-size: .88rem;
    color: var(--ink-faint, rgba(16, 17, 12, .5));
}



.dl-vkp-naam {
    margin: 0;
    padding-right: 2.4rem;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.012em;
    color: var(--dl-blue-900);
}

.dl-vkp-adres {
    margin: 0;
    font-size: .9rem;
    line-height: 1.5;
    color: var(--ink-soft);
}

.dl-vkp-land { color: var(--ink-faint); }

/* De route als knop en niet als tekstlink: het is de enige handeling in het
   kaartje, en hij opent een kaart-app buiten deze site. Onder een haarlijn,
   want hij hoort niet tussen de adresregels. */
.dl-vkp-route {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;

    margin-top: .85rem;
    padding: .5rem .8rem;
    border: 1px solid var(--line);
    border-radius: min(9px, var(--dl-r-max));

    font-size: .87rem;
    font-weight: 600;
    color: var(--dl-blue-900);
    text-decoration: none;
    transition: background-color .14s ease, border-color .14s ease, color .14s ease;
}

.dl-vkp-route svg { flex: none; opacity: .7; }

.dl-vkp-punten > li:hover .dl-vkp-route,
.dl-vkp-route:hover {
    background: var(--dl-blue-900);
    border-color: var(--dl-blue-900);
    color: #ffffff;
    text-decoration: none;
}

.dl-vkp-punten > li:hover .dl-vkp-route svg,
.dl-vkp-route:hover svg { opacity: 1; }

.dl-vkp-route:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.dl-vkp-leeg p {
    margin: 0 0 1rem;
    color: var(--ink-soft);
    line-height: 1.6;
}

.dl-vkp-leeg .btn + .btn { margin-top: .5rem; }

/* -- De categorieen onderaan ------------------------------------------ */

/* Geen losse pillen maar een doorlopende rij vakken: een stellingwand, geen
   setje filterlabels. Een pil zegt "hier kun je iets aan- en uitzetten", en
   dat is precies wat deze links niet doen.

   De scheidingslijnen zijn de tussenruimte van het raster en geen randen op
   de vakken. Daardoor valt er nergens een lijn dubbel, blijft er geen streep
   over als een categorie wegvalt, en hoeft er niets weggepoetst te worden
   bij de eerste of de laatste. */

.dl-hero-cats {
    position: relative;
    z-index: 1;
    border-top: 1px solid rgba(255, 255, 255, .13);

    /* De rij kijkt naar zijn eigen breedte en niet naar die van het scherm.
       Nu loopt dat op hetzelfde neer omdat de band van rand tot rand staat,
       maar zo blijft hij kloppen als hij ooit in een smallere kolom belandt -
       en een proefpagina die drie schermbreedtes naast elkaar zet, laat
       meteen het echte gedrag zien in plaats van een nabootsing. */
    container: catrail / inline-size;
}

/* De rij loopt van rand tot rand, net als de lijn erboven. Hield hij de
   zijmarge van de pagina aan, dan stopte de kast twee centimeter voor het
   einde terwijl de band gewoon doorliep: precies het gat dat opviel. De
   vakken zijn breed genoeg om de tekst zelf van de schermrand te houden. */
.dl-hero-cats-in {
    display: grid;
    grid-template-columns: repeat(var(--dl-vakken, 11), minmax(0, 1fr));
    gap: 1px;

    /* De lijnkleur ligt onder het raster en komt in de voegen naar boven. */
    background: rgba(255, 255, 255, .14);
}

.dl-hero-cats a {
    position: relative;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: .5rem;

    /* cqi en niet vw: het vak meet de rij waar het in staat. Op een smal
       scherm staan er vier rijen onder elkaar, en dan telt elke tien pixels
       hoogte mee voor de vraag of de hero nog op een scherm past. */
    min-height: clamp(4.25rem, 3.6rem + 2cqi, 4.75rem);
    padding: .9rem .45rem;
    background: rgba(9, 12, 26, .62);
    color: rgba(255, 255, 255, .8);
    font-size: clamp(.68rem, .6rem + .22cqi, .78rem);
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    transition: background-color .14s ease, color .14s ease;
}

/* Het langste woord is Bouwmaterialen. Bij elf kolommen op de volle
   paginabreedte past dat op een regel; breekt het toch, dan zou een enkel
   vak twee regels krijgen en de hele rij een regel hoger worden. De naam
   blijft daarom op een regel en kapt desnoods af. */
.dl-hero-cats a > span {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* De streep bovenaan is de enige beweging: een lade die een stukje naar
   voren komt. Geen schaduw, geen verspringen, want de vakken staan tegen
   elkaar en zouden elkaar dan raken. */
.dl-hero-cats a::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    height: 2px;
    background: var(--dl-blue-400);
    opacity: 0;
    transition: opacity .14s ease;
}

/* De vulling blijft staan en er komt een waas overheen, want background-image
   raakt de background-color van de basisregel niet. Verving de hover de hele
   vulling, dan werd het vak een lichtere plaat dan zijn buren en leek het
   breder dan het is. */
.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; }

/* De ring valt naar binnen. Buiten het vak zou het buurvak eroverheen
   liggen en de helft van de ring opeten. */
.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, .46);
    transition: color .14s ease;
}

.dl-hero-cats a:hover svg,
.dl-hero-cats a:focus-visible svg { color: var(--dl-blue-200); }

/* Elf kolommen naast elkaar vragen ongeveer 1180px. Daaronder schuift de rij
   opzij in plaats van te breken: elf vakken over drie regels maakt de hero een
   scherm hoger, en een halve afgesneden kolom aan de rechterkant laat zien dat
   er meer staat. */
/* Elf even brede vakken vragen ongeveer 1120px; daaronder wordt Bouwmaterialen
   afgekapt. Vanaf daar zakt de rij door naar minder kolommen en meer rijen.
   Niet zijwaarts schuiven: de categorieen zijn de navigatie van deze site, en
   dan hoort een installateur op zijn telefoon niet te moeten vegen om
   Wandpanelen te vinden.

   Drie, vier en zes, en met opzet geen vijf: elf gedeeld door vijf laat er een
   over, en dat ene vak zou dan alleen over de volle breedte komen te staan.

   Het laatste vak overbrugt wat er in de onderste rij overblijft. Het getal
   daarvoor komt uit de template, want CSS kan niet delen met rest. Zo staat
   elke rij even vol en blijft er nergens een gat waar de lijnkleur doorheen
   schijnt. */

/* Op een tablet zijn de vakken bijna tweehonderd pixels breed. Dan is het een
   blok tegels en geen strip, dus mogen het icoon en de letter mee groeien. */
@container catrail (max-width: 70rem) {
    .dl-hero-cats-in { grid-template-columns: repeat(6, minmax(0, 1fr)); }

    .dl-hero-cats a {
        gap: .6rem;
        min-height: 5.5rem;
        padding-inline: 1rem;
        font-size: .82rem;
    }

    .dl-hero-cats svg { width: 26px; height: 26px; }

    .dl-hero-cats a:last-child { grid-column: span var(--dl-span6, 1); }
}

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

/* Onder de 640px valt de rij weg. Elf vakken over vier rijen maakt de hero daar
   een half scherm langer, en het categoriemenu in de kop heeft precies dezelfde
   elf ingangen. Er verdwijnt dus geen navigatie, alleen een herhaling.

   Dit is met opzet een media query en geen containerquery: een containerquery
   kan de container die hij bevraagt niet zelf verbergen, en de bovenrand zou
   dan als losse streep blijven staan. De band loopt van rand tot rand, dus de
   schermbreedte is hier hetzelfde getal. */
@media (max-width: 40rem) {
    .dl-hero-cats { display: none; }
}

/* -- Categoriekaarten met diepte -------------------------------------- */

.dl-cats-block {
    position: relative;
    overflow: hidden;
    transition: transform .25s cubic-bezier(.16, 1, .3, 1),
                border-color .2s ease,
                box-shadow .25s ease;
}

.dl-cats-block::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--dl-blue-700), var(--dl-blue-300));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s cubic-bezier(.16, 1, .3, 1);
}

.dl-cats-block:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(15, 23, 42, .09);
}
.dl-cats-block:hover::before { transform: scaleX(1); }

/* -- Het dealerblok onderaan de startpagina ---------------------------- */

/* Hier stond .dl-cta: een afgeronde kaart van 26px binnen de paginabreedte,
   met de tekst gecentreerd. Dat maakte er een blok op de pagina van terwijl
   het het slot van de pagina is - de enige plek waar om een handeling
   gevraagd wordt. Nu loopt het van rand tot rand, net als de categoriebanden
   erboven, en staat de tekst links zoals overal.

   .dl-cta is daarmee helemaal vervallen: geen enkele template gebruikt hem
   nog. De knopvariabelen die eraan hingen staan nu op de lijst secties die op
   het merkblauw staan - hero, dit blok en de donkere categorieband - zodat er
   een plek is waar dat vastligt in plaats van drie. */

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

/* De overgang naar de voet ligt bovenop alles wat eronder ligt, en niet in de
   achtergrond van het blok.

   Eerst legde ik het verloop in die achtergrond. Dat hielp niet, want de
   glans hieronder heeft zijn helderste punt op 18% 100% - precies op de naad.
   Het blok was daar dus lichter dan de voet, hoe donker de achtergrond eronder
   ook werd gemaakt. Een laag erboven heeft dat probleem niet: die dooft de
   glans, het raster en de achtergrond in een keer, en eindigt op exact de
   kleur waarmee de voet begint.

   Vaste pixels en geen procenten: het gaat om die ene rand, en de overgang
   moet niet meegroeien met de hoogte van het blok. */
.dl-dealer::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 220px;
    z-index: -1;
    background: linear-gradient(180deg, transparent 0%, var(--dl-blue-900) 100%);
    pointer-events: none;
}

/* Een andere gloed dan de categoriebanden: daar komt het licht van linksboven,
   hier van rechtsonder. Zo is het herkenbaar hetzelfde materiaal zonder dat
   het een vierde keer hetzelfde plaatje is. */
.dl-dealer::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -3;
    background:
        radial-gradient(50% 80% at 18% 100%, color-mix(in srgb, var(--dl-blue-700) 60%, transparent), transparent 72%),
        radial-gradient(45% 75% at 88% 0%, color-mix(in srgb, var(--dl-blue-450) 38%, transparent), transparent 74%);
}

/* Het raster komt hier van onderaf omhoog, tegengesteld aan de categoriebanden.
   Dat maakt van de twee samen een begin en een eind in plaats van twee keer
   hetzelfde. */
.dl-dealer-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: .16;

    /* Ook onderaan vervagen en niet alleen bovenaan. Stond hier #000 op 0%,
       dan liepen de vormen op volle sterkte tot tegen de voet en werden ze
       daar middendoor geknipt - je zag halve baden en halve kranen op een
       kaarsrechte lijn. Nu lossen ze op voordat die rand in beeld komt.

       0deg leest van onder naar boven: 0% is de onderkant van het blok. */
    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-dealer-in { position: relative; }

/* De kop en de knoppen op een regel, met de knoppen aan het eind. Breekt het
   af, dan zakken ze onder de tekst in plaats van ernaast te blijven duwen. */
.dl-dealer-kop {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 1.5rem 2.5rem;
    margin-bottom: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
}

.dl-dealer-kop h2 {
    margin: 0;
    font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem);
    letter-spacing: -.025em;
    color: #ffffff;
}

.dl-dealer-kop p {
    margin: .5rem 0 0;
    max-width: 56ch;
    color: rgba(255, 255, 255, .74);
}

.dl-dealer-acties { display: flex; flex-wrap: wrap; gap: .6rem; }

/* Vier vakken naast elkaar, en daaronder twee en dan een. Een eigen rand in
   plaats van haarlijnen tussen regels: op dit donkere vlak moeten ze als
   losse blokken leesbaar zijn, niet als opsomming. */
.dl-dealer-voordelen {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

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

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

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

/* Tegen de voet aan. app.css geeft .site-footer een marge aan de bovenkant om
   hem los te maken van een lichte pagina; eindigt de pagina op een donkere
   band over de volle breedte, dan is dat een witte streep tussen twee donkere
   vlakken.

   Alleen dan weghalen en niet altijd: op een pagina die op tekst eindigt is
   die marge juist nodig. Vandaar :has() - de voet kijkt naar wat er boven hem
   eindigt in plaats van dat elke pagina het zelf moet regelen.

   Geldt net zo goed voor de lichte band: de toegangsschermen eindigen daarop,
   en dan staat er een strook wit tussen twee gekleurde vlakken. */
main:has(> .dl-dealer:last-child) + .site-footer,
main:has(> .dl-band-licht:last-child) + .site-footer,

/* En als die band in een omhulsel zit. De winkelwagen wordt in zijn geheel
   vervangen bij het wijzigen van een aantal, dus hij zit in een eigen blok -
   en daardoor was de band niet meer het laatste kind van main. Gevolg: de
   marge uit app.css kwam terug en er stond een witte strook van zeventig
   pixels tussen de lichte band en de donkere voet. */
main:has(> :last-child > .dl-band-licht:last-child) + .site-footer { margin-top: 0; }


/* -- Minder beweging --------------------------------------------------- */
/* Eén blok dat alles stilzet, in plaats van het per onderdeel te regelen
   en er ergens een te vergeten. */

@media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1 !important; transform: none !important; }

    .dl-cats-block:hover { transform: none !important; }

    .site-header, .header-main, .dl-logo img { transition: none; }
}

/* -- De tweede regel van de kop ---------------------------------------- */

.dl-hero h1 { max-width: 26ch; }

/* Van wit naar het blauw van het streepje boven de kop: de belofte valt op
   zonder een tweede kleur in het vlak. De ruimte onderaan houdt de staart
   van de j binnen het verloop. */
.dl-hero h1 .accent {
    background: linear-gradient(100deg, #ffffff 0%, var(--dl-blue-150) 40%, var(--dl-blue-200) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding-bottom: .08em;
}

/* -- Correctie: de hero wacht niet ------------------------------------
   De hero stond ook op binnenschuiven-bij-scrollen, maar hij staat al in
   beeld als de pagina opent. Het gevolg was een lege blauwe vlakte die
   pas ná de eerste meting van de browser gevuld werd.

   Nu speelt de hero zijn eigen intro af zodra de opmaak klaar is, zonder
   op JavaScript te wachten. Laadt het script niet, dan draait deze
   animatie gewoon en staat alles er alsnog.
   ---------------------------------------------------------------------- */

/* De onderdelen staan bij naam en niet op [data-reveal]. Dat attribuut hoort
   bij de waarnemer die verderop de pagina bijhoudt; de hero staat altijd al in
   beeld en hoeft daar niet op te wachten. */
.dl-hero .dl-eyebrow-licht,
.dl-hero-titel,
.dl-hero .lead,
.dl-hero-onder,
.dl-hero-cats {
    opacity: 0;
    transform: translateY(14px);
    animation: dl-intro .65s cubic-bezier(.16, 1, .3, 1) forwards;
}

/* Trapsgewijs, op volgorde van de blokken in de hero: bovenschrift, kop,
   zin, knop en dan de categorieen eronder. */
.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-cats                      { animation-delay: .34s; }

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

/* Heeft het script ze alsnog gemarkeerd, dan blijven ze staan waar ze
   staan; de animatie heeft ze dan al op hun plek gezet. */
.dl-hero [data-reveal].is-in { opacity: 1; transform: none; }

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

/* =====================================================================
   De koptekst, opnieuw
   =====================================================================
   Wat er aan de vorige versie niet klopte:

     - Het logo zwom in de ruimte en was te klein voor de hoogte van de
       balk eromheen.
     - Het zoekveld nam alle aandacht en duwde de rest naar de rand.
     - Rechts stonden twee losse knoppen, terwijl een dealerportaal daar
       zijn vaste snelkoppelingen hoort te hebben: account, offerte,
       aanmelden.
     - De navigatie was een rij gelijke woorden; nergens was te zien dat
       "Categorieën" de ingang naar het assortiment is.

   Deze regels komen ná de eerdere koptekst-regels in dit bestand en
   overschrijven ze waar nodig.
   ===================================================================== */

/* -- 1. Topbalk -------------------------------------------------------- */

/* Effen, geen verloop. Daar is een verloop overheen gelegd en dat is er op
   verzoek weer af: de vlakke kleur is rustiger. */
.dl-topbar {
    background: var(--dl-blue-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 { font-weight: 500; color: rgba(255, 255, 255, .88); }

/* Van de twee teksten is er één zichtbaar. Breed de lange, smal de korte. */
.dl-status-kort { display: none; }

.dl-status::before {
    width: 6px; height: 6px;
    box-shadow: 0 0 0 3px rgba(255, 77, 77, .18);
}
.dl-status.is-open::before { box-shadow: 0 0 0 3px rgba(32, 201, 151, .18); }

/* Staan we open, dan klopt het bolletje rustig. Dat is het verschil tussen
   een stoplicht en een teken van leven; je ziet in een oogopslag dat er nu
   iemand zit.

   Het is één element van zeven pixels dat alleen schaalt en vervaagt, dus
   het draait op de grafische kaart en kost de rest van de pagina niets.
   Geen bewegend verloop en geen schaduw die per beeld opnieuw berekend
   moet worden; dat was eerder precies wat het tabblad liet vastlopen. */
.dl-status.is-open { position: relative; }

.dl-status.is-open::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 7px;
    height: 7px;
    margin-top: -3.5px;
    border-radius: min(50%, var(--dl-r-max));
    background: var(--ok);
    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; }
}

@media (prefers-reduced-motion: reduce) {
    .dl-status.is-open::after { animation: none; opacity: 0; }
}

.dl-topbar-right {
    display: inline-flex;
    align-items: center;
}

.dl-lang {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: rgba(255, 255, 255, .78);
    font-weight: 500;
}

/* De vlag als drie balkjes, zodat er geen plaatje voor geladen hoeft. */
.dl-flag {
    width: 17px; height: 12px;
    border-radius: min(2px, var(--dl-r-max));
    background: linear-gradient(180deg,
        #ae1c28 0 33.3%,
        #ffffff 33.3% 66.6%,
        #21468b 66.6% 100%);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .22);
}

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

@media (max-width: 640px) {
    /* Onder deze breedte past "Klantenservice gesloten. Opent vandaag om
       08:00" niet meer naast de taal op één regel. Hij wikkelde dan naar
       twee of drie regels en maakte de balk van 38 pixels 63 hoog. Vanaf
       hier de korte tekst. */
    .dl-status-lang { display: none; }
    .dl-status-kort { display: inline; }

    .dl-topbar { font-size: .76rem; }
    .dl-topbar .wrap { gap: .75rem; }
}

/* De balk mag niet wikkelen: één regel of niets. Wordt het toch te krap,
   dan wordt de openingstijd afgekapt en blijft de taal staan. */
@media (max-width: 640px) {
    .dl-topbar .wrap { flex-wrap: nowrap; }

    /* .dl-status is zelf een flexbox met het bolletje ervoor, dus het
       afkappen hoort op de tekst erbinnen en niet op de schil. */
    .dl-status { min-width: 0; }

    .dl-status-kort {
        display: block;
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .dl-topbar-right { flex: none; }
}

/* -- 2. Logo, zoekveld en acties --------------------------------------- */

/* Een raster en geen flexbox, om één reden: de logokolom heeft een vaste
   breedte.

   Met flexbox bepaalde de afbeelding zelf hoe breed het logo was. Bij het
   scrollen krimpt die van 52 naar 36 pixels hoog en dus ook van 209 naar 145
   breed, en omdat het zoekveld daarna met auto-marges in de overgebleven
   ruimte werd gecentreerd, schoof het bij elke scroll een stuk opzij. Een
   kolom van een vaste breedte krimpt niet mee: de afbeelding wordt kleiner
   binnen een vak dat blijft staan.

   De breedte is die van het logo op volle hoogte: 3875 bij 965 pixels is een
   verhouding van 4,016, dus 52 hoog is 209 breed. 13,25rem laat daar net wat
   lucht omheen. */
.header-main {
    --dl-logo-kolom: 13.25rem;

    display: grid;
    grid-template-columns: var(--dl-logo-kolom) minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.75rem;
    padding-block: 1.1rem;
}

/* object-fit: past het logo niet in zijn kolom, dan krimpt het naar
   verhouding in plaats van platgedrukt te worden. Dat gebeurt op een smalle
   telefoon, waar naast het logo de menuknop en drie knoppen staan. */
.dl-logo img {
    height: 52px;
    width: auto;
    display: block;
    object-fit: contain;
    object-position: left center;
}

/* Het zoekveld vult de kolom tussen het logo en de acties. Het had een
   max-width van 36rem met auto-marges, waardoor het middenin die ruimte
   zweefde met ongelijke gaten aan weerszijden. Nu begint het waar het logo
   ophoudt en eindigt het waar de acties beginnen - op een pagina van 1280
   scheelt dat ruim honderd pixels breedte. */
.header-search {
    min-width: 0;
    position: relative;

    /* app.css kapt dit veld af op 30rem. Dat stond hier eerder verborgen
       achter een eigen max-width van 36rem; haal je die weg, dan valt hij
       terug op de 30rem van het basisthema en wordt het veld juist smaller.
       Expliciet uitzetten, zodat de rasterkolom de breedte bepaalt. */
    max-width: none;
}

/* Dit is het gereedschap van de bezoeker: op een groothandel wordt er meer
   gezocht dan geklikt. Het veld was grijs op wit met een onzichtbare rand,
   dus het las als een uitgeschakeld vak. Nu is het wit met een echte rand
   en een lichte verdieping, zodat het eruitziet als iets waar je in typt. */
.header-search input {
    width: 100%;
    height: 48px;
    padding: 0 7.6rem 0 2.9rem;
    border: 1px solid var(--line);
    border-radius: var(--dl-r-btn);
    background: #ffffff;
    font-size: .94rem;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, .05);
    transition: border-color .18s ease, box-shadow .18s ease;
}
.header-search input::placeholder { color: var(--ink-faint); }

.header-search input:hover { border-color: color-mix(in srgb, var(--dl-blue-700) 30%, transparent); }

.header-search input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft), 0 6px 18px color-mix(in srgb, var(--dl-blue-700) 12%, transparent);
    outline: none;
}

.header-search .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 input:focus ~ .dl-search-icon,
.header-search:focus-within .dl-search-icon { color: var(--accent); }

/* De knop en het toetsteken zitten in één blokje rechts in het veld. Los
   van elkaar absoluut plaatsen betekent dat het teken op een uitgerekende
   afstand van de rand staat, en die klopt niet meer zodra het woord op de
   knop verandert. */
.dl-search-tools {
    position: absolute;
    right: 5px; top: 5px; bottom: 5px;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.dl-search-key {
    display: grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding-inline: 5px;

    border: 1px solid var(--line);
    border-bottom-width: 2px;
    border-radius: min(6px, var(--dl-r-max));
    background: var(--surface-alt);

    font-family: inherit;
    font-size: .74rem;
    font-weight: 600;
    color: var(--ink-faint);
    transition: opacity .16s ease;
}

/* Tijdens het typen zegt het teken niets meer: je bent er al. */
.header-search:focus-within .dl-search-key { opacity: 0; }

/* De zoekknop is een knop als alle andere en gebruikt dezelfde variabelen.
   Hij stond hier als eigen bouwsel met een eigen verloop, een eigen schaduw
   en een hoogte van 38 pixels, net onder de maat die een vinger raakt. */
.header-search button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    height: 2.25rem;
    padding-inline: 1.15rem;
    border: 0;
    border-radius: var(--dl-r-btn);
    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); color: #ffffff; }
.header-search button:active { transform: translateY(1px); }
.header-search button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.dl-search-mobile { display: none; }

/* -- 3. Acties rechts --------------------------------------------------- */

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

/* Icoon met daarnaast twee regels: een grijs label en de waarde eronder.
   Dat is hoe een groothandel het doet, en het scheelt een klik: je ziet
   meteen of er iets in je offerte staat. */
.dl-action {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .7rem;
    border-radius: var(--dl-r-btn);
    color: var(--ink);
    white-space: nowrap;
    transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}
.dl-action:hover {
    background: var(--surface-alt);
    box-shadow: inset 0 0 0 1px var(--line);
    text-decoration: none;
}

/* Sta je op die pagina, dan hoort de knop aan te staan. Deze twee lopen niet
   door Site::navigation() en bleven daarom grijs op hun eigen pagina, terwijl
   zweven wel werkte - dat is een aparte regel. */
.dl-action[aria-current="page"] {
    background: var(--dl-blue-100);
    box-shadow: inset 0 0 0 1px var(--dl-blue-300);
}

.dl-action[aria-current="page"] .dl-action-icon,
.dl-action[aria-current="page"] .dl-action-value { color: var(--dl-blue-900); }

.dl-action[aria-current="page"] .dl-action-label { color: var(--dl-blue-700); }

/* Het icoon in een eigen tegel. De rand eromheen maakt er een knop van in
   plaats van een zwevend tekentje, en bij het aanwijzen kleurt hij mee. */
.dl-action-icon {
    position: relative;
    flex: none;
    width: 38px; height: 38px;
    display: grid;
    place-items: center;
    border-radius: min(12px, var(--dl-r-max));
    background: linear-gradient(180deg, #ffffff, var(--surface-alt));
    border: 1px solid var(--line);
    color: var(--dl-blue-900);
    transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.dl-action:hover .dl-action-icon {
    background: var(--dl-blue-800);
    border-color: var(--dl-blue-800);
    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);
}
.dl-action:hover .dl-action-value { color: var(--accent); }

/* Het telwerk van de winkelwagen. Hij hangt aan de hoek van de tegel en niet
   ernaast: zo blijft de knop even breed met en zonder cijfer, en verspringt de
   koptekst niet op het moment dat er iets in de mand gaat.

   Merkblauw en niet rood. Rood is voor wat er misgaat; dit is de bevestiging
   dat er iets in ligt. */
.dl-action-telling {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    display: grid;
    place-items: center;
    border-radius: min(999px, var(--dl-r-max));
    border: 2px solid #ffffff;
    background: var(--accent);
    font-size: .66rem;
    font-weight: 700;
    line-height: 1;
    color: #ffffff;
}

/* Bij het aanwijzen wordt de tegel zelf blauw; dan moet het bolletje de
   andere kant op, anders verdwijnt het in de knop. */
.dl-action:hover .dl-action-telling {
    background: #ffffff;
    border-color: var(--dl-blue-800);
    color: var(--dl-blue-900);
}

/* Uitloggen is een formulier met een knop, en hoort eruit te zien als de
   links ernaast. */
.dl-action-form { display: flex; margin: 0; }

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

/* De labels verdwenen eerst al bij 1240px, omdat er toen drie acties naast
   het zoekveld stonden. Met er nog twee past het tot 1024px, en daaronder
   klapt de balk sowieso om naar het schuifmenu. */
@media (max-width: 1024px) {
    .dl-action-text { display: none; }
    .dl-action { padding: .35rem; }
}

/* Onder de 980 past het zoekveld niet meer tussen het logo en de acties. Het
   zakt dan naar een eigen regel eronder, over de volle breedte. De plekken
   staan er met de hand in en niet op automatische plaatsing: met drie
   kinderen en twee kolommen zou het zoekveld anders naast het logo belanden
   en de acties naar de tweede regel duwen. */
@media (max-width: 980px) {
    .header-main {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 1rem;
    }

    /* De plaatsing van logo, knoppen en zoekveld staat verderop, bij "De
       koptekst op tablet en telefoon": sinds de menuknop vooraan staat zijn
       het vier onderdelen en geen drie. */

    .dl-logo img { height: 42px; }
}

/* Een toetsenbord-snelkoppeling heeft alleen zin als er een toetsenbord
   is. Hij verdwijnt zodra het veld over de volle breedte gaat staan, want
   dat is het moment waarop dit een aanraakscherm is. */
@media (max-width: 1024px), (pointer: coarse) {
    .dl-search-key { display: none; }
    .header-search input { padding-right: 6rem; }
}

@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: block; }
}

/* Het logo en de drie knoppen moeten op één regel blijven. Op 360 pixels
   deden ze dat niet: logo 169 plus knoppen 155 plus tussenruimte was net te
   veel, het logo kreeg een eigen regel en de koptekst werd 266 pixels hoog.
   Dat is een derde van een telefoonscherm voordat je iets van de winkel
   ziet. Een kleiner logo en minder tussenruimte houdt het op één regel. */
@media (max-width: 480px) {
    .dl-logo img { height: 34px; }

    .header-main { gap: .6rem; padding-block: .7rem; }
    .header-actions { gap: .15rem; }
}

/* Onder de 340 past het nog steeds niet: logo 137 plus knoppen 142 plus
   tussenruimte is meer dan er is, en dan wikkelt het alsnog. Een kleiner
   logo houdt het ook op een toestel van 320 op één regel. */
@media (max-width: 340px) {
    .dl-logo img { height: 30px; }
    .wrap { padding-inline: .75rem; }
}

/* -- 4. Navigatiebalk ---------------------------------------------------- */

/* Een tint lichter dan wit. De koptekst bestaat uit drie banden boven
   elkaar en die waren alle drie wit met een haarlijntje ertussen: dat leest
   als één groot vlak. Met een lichte tint hier hebben ze een eigen laag,
   zonder dat er een zware scheiding bij komt. */
/* Wit, en verder niets. Hier stond een verloop naar lichtgrijs om de drie
   banden van de koptekst uit elkaar te trekken, maar dat maakt de balk
   zwaarder dan hij hoeft te zijn. Eén haarlijn onderaan is genoeg
   scheiding; de rest doet de witruimte. */
.nav-bar {
    border-top: 1px solid var(--line-soft);
    background: #ffffff;
    box-shadow: inset 0 -1px 0 rgba(60, 65, 63, .1);
}

.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.nav-list { padding-block: .5rem; gap: .25rem; }

/* De maten staan op beide soorten items tegelijk, want in deze rij staan een
   <a> en een <button> naast elkaar en die moeten even hoog zijn. Ze stonden
   apart: de knop had line-height 1.25 met een min-height, de links erfden de
   regelhoogte van de body (1.6) en hadden geen ondergrens. Dat is vijf pixels
   verschil, en dat zie je meteen zodra er twee gevulde blokken naast elkaar
   staan. */
.nav-list > li > a,
.nav-list > li > .dl-nav-mega {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 2.25rem;
    padding: .55rem 1rem;
    border-radius: var(--dl-r-btn);
    font-size: .92rem;
    line-height: 1.25;
}

.nav-list > li > a {
    font-weight: 500;
    color: var(--ink-soft);
    transition: background .14s ease, color .14s ease;
}

/* De drie toestanden van de categorieknop staan onderaan dit bestand bij
   elkaar, bij de rest van het categoriemenu. Hier stond nog een regel die
   het huidige item een gevuld blauw vlak gaf; twintig regels verderop werd
   dat weer weggehaald voor een streepje. */

/* Aanwijzen is grijs en meer niet: een kleurvlek bij het langsgaan trekt
   de aandacht weg van waar je werkelijk bent. */
.nav-list > li > a:hover,
.nav-list > li > a:focus-visible {
    background: var(--surface-alt);
    color: var(--ink);
    text-decoration: none;
}

/* Waar je bent: een gevuld blok in het merkblauw met witte tekst.

   Hier stond een streepje onder de tekst, omdat de categorieknop toen nog
   permanent gevuld was: twee blauwe vlakken naast elkaar vochten dan om
   dezelfde aandacht terwijl ze verschillende dingen betekenen - "hier ben
   je" tegenover "hier kun je heen". Nu die knop alleen nog vult als het
   paneel openstaat, is dit blok het enige gevulde ding in de balk en kan
   het gewoon de huisstijl dragen.

   Het blok blijft staan bij het aanwijzen. Zou de grijze hover er ook
   overheen gaan, dan lijkt het alsof je er weg kunt klikken naar een pagina
   waar je al bent. */
.nav-list > li > a[aria-current="page"],
.nav-list > li > a[aria-current="page"]:hover,
.nav-list > li > a[aria-current="page"]:focus-visible {
    background: var(--dl-blue-700);
    color: #ffffff;
    font-weight: 600;
    box-shadow: none;
}

.nav-list > li > a:focus-visible {
    outline: 2px solid var(--dl-blue-700);
    outline-offset: 2px;
}

/* Het aantal bij een item van het beheer, in de balk en in het schuifmenu:
   zoveel wacht er op een collega. Rood, want het is een vraag die open staat. */
.dl-nav-aantal {
    display: inline-grid;
    place-items: center;
    flex: none;
    min-width: 1.3rem;
    height: 1.3rem;
    padding: 0 .35rem;
    border-radius: min(999px, var(--dl-r-max));
    background: #dc2626;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: #ffffff;
}

/* Snelkoppelingen rechts in de balk. */
.nav-shortcuts {
    display: flex;
    align-items: center;
    gap: .25rem;
    list-style: none;
    margin: 0;
    padding: 0;
    flex: none;
}

.nav-shortcuts a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .8rem;
    border-radius: var(--dl-r-btn);
    font-size: .85rem;
    color: var(--ink-faint);
    white-space: nowrap;
}
.nav-shortcuts a:hover {
    background: var(--surface-alt);
    color: var(--ink);
    text-decoration: none;
}

/* Sta je er zelf op, dan hoort hij aan te staan. De menu-items ernaast
   krijgen dat van Site::navigation(); deze lijst liep daar niet doorheen en
   bleef dus grijs op de eigen pagina, terwijl zweven wel werkte. */
.nav-shortcuts a[aria-current="page"] {
    background: var(--dl-blue-100);
    color: var(--dl-blue-900);
    font-weight: 600;
}

.nav-shortcuts a[aria-current="page"] svg { color: var(--dl-blue-700); }
.nav-shortcuts svg { opacity: .8; }

@media (max-width: 1100px) { .nav-shortcuts { display: none; } }

/* Een collega met beheerschermen heeft zeven onderdelen in de balk. Dan
   passen de snelkoppelingen er onder 1200 pixels niet meer naast, en schoof
   op 1101 pixels de hele pagina opzij. Wat ze bieden staat ook achter de knop
   met zijn naam rechtsboven en in de voet. */
@media (max-width: 1199.98px) {
    .nav-inner:has(.nav-list > li:nth-child(7)) .nav-shortcuts { display: none; }
}

/* Tot en met 1024 pixels gaat de navigatie in het schuifmenu. Dat is de
   breedte van een tablet rechtop, en precies de grens waaronder het brede
   uitklapmenu zijn panelen toch al niet meer kwijt kan.

   Hiervoor lag die grens op 860 en klapte de menulijst gewoon onder de balk
   uit. Daartussen zat dus een gebied van 861 tot 1024 waar je wel de
   horizontale balk had maar een uitklapmenu zonder panelen: de categorieën
   zonder hun inhoud. Die tussentoestand is weg. */
@media (max-width: 1024px) {
    .nav-bar { display: none; }

    .nav-toggle-label {
        display: inline-grid;
        place-items: center;
        padding: 0;
        border-radius: var(--dl-r-btn);
        border: 0;
        background: var(--surface-alt);
        color: var(--dl-blue-900);
    }
}

/* -- Genoeg om met een duim te raken ------------------------------------
   Onder de 860 pixels wordt er aangewezen met een vinger en niet met een
   muis. Een vingertop is ongeveer 44 pixels breed; alles wat kleiner is
   raak je er naast. Gemeten voor deze wijziging: de menuknop was 38 bij 38,
   de zoekknop 38 hoog en de menu-items 41. Dat is elke keer net te weinig.

   Dezelfde maten gelden voor een scherm dat alleen grof aanwijzen kent,
   ongeacht de breedte: een tablet van 1024 die je met je vingers bedient
   valt buiten de breedteregel hierboven maar heeft ze net zo hard nodig.
   ---------------------------------------------------------------------- */

@media (max-width: 1024px), (pointer: coarse) {
    .nav-toggle-label { width: 44px; height: 44px; }

    .header-search button { min-height: 44px; }

    .nav-list > li > a,
    .nav-list > li > .dl-nav-mega { min-height: 44px; align-items: center; }

    .dl-action { min-width: 44px; min-height: 44px; }

    /* Het logo is ook een link, naar de startpagina. Het beeld blijft even
       groot; alleen het vlak eromheen wordt hoog genoeg om te raken. */
    .dl-logo { display: flex; align-items: center; min-height: 44px; }

    /* De categorieën in het uitklapmenu zijn op een telefoon de hele
       navigatie; die moeten ruim genoeg staan om langs te scrollen zonder
       er per ongeluk een te openen. */
    .dl-mega-tab { min-height: 48px; }
}

/* -- De knop en het toetsteken staan in één blokje ---------------------
   Hier stond een correctie die de knop zelf verticaal centreerde met een
   vaste plaatsing. Dat was nodig zolang hij los in het veld zweefde, maar
   het houdt hem ook absoluut geplaatst: toen het toetsteken erbij kwam
   schoof de knop er dwars overheen en was er van dat teken niets te zien.

   Nu doet .dl-search-tools het werk. Die staat over de volle hoogte van het
   veld en zet zijn inhoud er met flexbox in het midden van, dus de knop
   hoeft niets meer zelf te regelen.
   ---------------------------------------------------------------------- */

.header-search {
    display: flex;
    align-items: center;
}

.header-search button {
    position: static;
    top: auto;
    right: auto;
    transform: none;
}

/* Het invoerveld bepaalt de hoogte van het geheel. */
.header-search input { display: block; }

/* -- Correctie: het uitklapmenu werd afgeknipt -------------------------
   In het basistheme staat overflow-x: auto op de menulijst, zodat een
   lange rij categorieën op een smal scherm te schuiven is. Maar een
   element met overflow knipt ook alles af wat eruit steekt, en het
   uitklapmenu hangt per definitie onder de balk uit. Het menu opende dus
   wel, maar was onzichtbaar.

   Op breed scherm dus geen overflow; op smal scherm valt het menu toch in
   de lijst zelf en is schuiven niet nodig.
   ---------------------------------------------------------------------- */

.nav-list { overflow: visible; }

/* De koptekst moet boven de rest van de pagina blijven, anders schuift
   het uitklapmenu achter het heroblok. */
.site-header { z-index: 60; }

/* =====================================================================
   De koptekst op tablet en telefoon
   =====================================================================
   Twee regels. Bovenaan de menuknop, het logo en rechts de twee knoppen
   voor het account en de winkelwagen; daaronder het zoekveld over de
   volle breedte.

   Hiervoor stonden de drie knoppen rechts tegen elkaar aan, met de menuknop
   als platte grijze tegel tussen twee witte met een rand, en een zoekveld
   met een vergrootglas vooraan én een blauw blok met nog een vergrootglas
   achteraan dat tegen de randen van het veld aan gedrukt zat. Alles klopte
   op zich, maar samen zag het er opgepropt uit.

   Nu: de menuknop links, want het menu schuift ook van links binnen; drie
   tegels die er hetzelfde uitzien; lucht tussen de regels; en een zoekveld
   met een ronde knop in het merkblauw die ruimte om zich heen heeft.
   ===================================================================== */

/* Tussen 981 en 1024 pixels staat alles nog op één regel, met de menuknop
   vooraan: de balk met het menu is daar al weg. */
@media (max-width: 1024px) {
    .header-main {
        grid-template-columns: auto var(--dl-logo-kolom) minmax(0, 1fr) auto;
    }
}

@media (max-width: 980px) {
    .header-main {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "menu logo acties"
            "zoek zoek zoek";
        column-gap: .75rem;
        row-gap: .9rem;
        padding-block: .9rem 1rem;
    }

    .nav-toggle-label { grid-area: menu; }
    .dl-logo          { grid-area: logo; }
    .header-actions   { grid-area: acties; gap: .5rem; }
    .header-search    { grid-area: zoek; }
}

@media (max-width: 480px) {
    .header-main {
        column-gap: .6rem;
        row-gap: .8rem;
        padding-block: .8rem .9rem;
    }

    /* Met de menuknop links is er rechts ruimte over: het logo mag weer wat
       groter dan de 34 pixels waarop het stond. */
    .dl-logo img { height: 36px; }
}

/* Wie ingelogd is heeft drie knoppen rechts: zijn account, uitloggen en de
   winkelwagen. Wat dichter op elkaar, dan houdt het logo op 390 pixels zijn
   volle breedte. */
@media (max-width: 400px) {
    .header-actions { gap: .3rem; }
}

@media (max-width: 340px) {
    .dl-logo img,
    .site-header.is-stuck .dl-logo img { height: 30px; }
}

/* -- Drie gelijke tegels --
   De menuknop kreeg eerst een platte grijze vulling, en de knoppen ernaast
   een witte tegel met een rand. Nu hebben ze alle drie dezelfde tegel van 42
   pixels, in een raakvlak van 44: dat is wat een duim nodig heeft. */
@media (max-width: 1024px) {
    .nav-toggle-label {
        position: relative;
        width: 44px;
        height: 44px;
        border: 0;
        border-radius: min(13px, var(--dl-r-max));
        background: none;
        color: var(--dl-blue-900);
        transition: color .16s ease;
    }

    .nav-toggle-label::before {
        content: "";
        position: absolute;
        inset: 1px;
        border: 1px solid var(--line);
        border-radius: min(12px, var(--dl-r-max));
        background: linear-gradient(180deg, #ffffff, var(--surface-alt));
        transition: background .16s ease, border-color .16s ease;
    }

    .nav-toggle-label svg { position: relative; }

    .nav-toggle-label:hover { color: #ffffff; }

    .nav-toggle-label:hover::before {
        border-color: var(--dl-blue-800);
        background: var(--dl-blue-800);
    }

    .nav-toggle-label:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }

    .dl-action {
        min-width: 44px;
        min-height: 44px;
        padding: 1px;
        justify-content: center;
    }

    .dl-action-icon {
        width: 42px;
        height: 42px;
    }

    /* Het vak rond de tegel doet op dit formaat niet mee: de tegel zelf licht
       op. Anders staat er een tweede randje van een pixel omheen. */
    .dl-action:hover,
    .dl-action[aria-current="page"] {
        background: none;
        box-shadow: none;
    }

    .dl-action[aria-current="page"] .dl-action-icon {
        border-color: var(--dl-blue-300);
        background: var(--dl-blue-100);
    }
}

/* -- De zoekknop, op elk scherm --
   Het blauw van de rest van het portaal: hetzelfde verloop als de stand
   waar je staat in de filters en de bladzijde in de bladwijzer, met een
   zachte schaduw. Hij stond er als effen blok, en dan is de belangrijkste
   knop van de winkel de minst afgewerkte. */
.header-search button {
    background: linear-gradient(135deg, var(--dl-blue-700), var(--dl-blue-900));
    box-shadow: 0 4px 12px rgba(31, 39, 86, .24);
    transition: background .14s ease, box-shadow .14s ease;
}

.header-search button:hover {
    background: linear-gradient(135deg, var(--dl-blue-600), var(--dl-blue-800));
    box-shadow: 0 6px 16px rgba(31, 39, 86, .3);
}

/* -- Het zoekveld op tablet en telefoon -- */
@media (max-width: 980px) {
    .header-search input {
        height: 50px;
        border-radius: min(15px, var(--dl-r-max));
        background: #ffffff;
        box-shadow: 0 4px 16px rgba(2, 6, 23, .05);
    }

    .header-search input:focus {
        box-shadow: 0 0 0 4px var(--accent-soft), 0 6px 18px color-mix(in srgb, var(--dl-blue-700) 12%, transparent);
    }

    /* De knop hangt met zes pixels lucht in het veld, en niet meer tegen de
       randen aan. */
    .dl-search-tools {
        top: 6px;
        right: 6px;
        bottom: 6px;
    }

    .header-search button {
        height: 38px;
        min-height: 38px;
        border-radius: min(11px, var(--dl-r-max));
    }
}

@media (max-width: 560px) {
    /* Precies genoeg binnenruimte voor het vergrootglas links en de knop
       rechts, en niet meer: op 320 pixels is elke pixel tekst nodig voor
       "Naam of artikelnummer". */
    .header-search input {
        padding: 0 3.3rem 0 2.6rem;
    }

    .header-search .dl-search-icon { left: .95rem; }

    /* Op een telefoon een ronde knop met alleen de pijl. Het raakvlak is met
       een onzichtbare rand van drie pixels toch 44: de knop zelf blijft 38,
       zodat hij niet tegen de randen van het veld aan komt. */
    .header-search button {
        position: relative;
        width: 38px;
        padding: 0;
    }

    .header-search button::after {
        content: "";
        position: absolute;
        inset: -3px;
    }
}

/* -- Correctie: het uitklapmenu was te smal ----------------------------
   Het menu hing aan de menulijst, en die is maar zo breed als de woorden
   erin. De elf categoriekolommen persten zich daardoor in een strook van
   340 pixels en vielen onder elkaar, tot ver onder het scherm.

   Het hoort aan de navigatiebalk te hangen: die loopt over de volle
   breedte, en dan passen de kolommen naast elkaar zoals bedoeld.
   ---------------------------------------------------------------------- */

.nav-list { position: static; }
.nav-bar  { position: relative; }

.dl-mega-inner {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1.25rem 1.5rem;
    padding-block: 1.5rem 1.75rem;
}

/* Bij elf kolommen is er weinig ruimte per kolom; iets kleiner zetten
   scheelt afgebroken woorden. */

/* =====================================================================
   Het categoriemenu, naar het model van V1
   =====================================================================
   Links de hoofdcategorieën, rechts het paneel van de gekozen categorie.
   Welk paneel je ziet hangt aan een is-active-klasse, precies zoals in
   V1; dat blijkt in de praktijk veel betrouwbaarder dan panelen die
   elkaar met hover afwisselen.

   De vorige poging hier deed dat wel met hover en zwevende panelen. Dat
   brak op twee punten: een paneel dat absoluut gepositioneerd is telt
   niet mee voor de hoogte van zijn ouder, en de muis moest een exact pad
   volgen om van de lijst naar het paneel te komen.

   Deze regels vervangen alles wat er eerder over .dl-mega in dit bestand
   staat.
   ===================================================================== */

.dl-mega-inner {
    display: block;
    padding: 0;
    max-width: var(--page-max);
    margin-inline: auto;
}

.dl-mega-grid {
    display: grid;
    grid-template-columns: 252px minmax(0, 1fr);
    align-items: stretch;
    min-height: 330px;
}

/* -- Links: de hoofdcategorieën ---------------------------------------- */

.dl-mega-side {
    padding: 1.1rem .8rem 1.25rem;
    border-right: 1px solid var(--line-soft);
    background: var(--surface-alt);
}

.dl-mega-tab {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    padding: .55rem .75rem;
    border-radius: min(10px, var(--dl-r-max));
    font-size: .89rem;
    font-weight: 600;
    color: var(--ink);
    text-align: left;
    transition: background .14s ease, color .14s ease;
}
.dl-mega-tab:hover { text-decoration: none; }

.dl-mega-tab-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dl-mega-chev {
    flex: none;
    width: 6px; height: 6px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: 0;
    transition: opacity .14s ease;
}

.dl-mega-tab:hover,
.dl-mega-tab.is-active {
    background: #ffffff;
    color: var(--accent);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
}
.dl-mega-tab:hover .dl-mega-chev,
.dl-mega-tab.is-active .dl-mega-chev { opacity: .6; }

/* -- Rechts: de panelen ------------------------------------------------- */

.dl-mega-panels { padding: 1.5rem 1.75rem 1.25rem; min-width: 0; }

/* Het verbergen van de panelen staat onderaan dit bestand, bij de rest van
   het open- en dichtgaan. */

/* Vier kolommen, altijd, en dus altijd één rij. Hier stond auto-fill met
   een minimum van 185 pixels; dat vult zichzelf aan tot vier kolommen bij
   deze breedte, maar bij vijf of zes blokken wikkelt het naar een tweede
   rij. Zo'n tweede rij maakt het paneel in één klap 200 pixels hoger dan
   alle andere, en dat is precies waarom de onderrand van het menu bij
   Badkamer heen en weer sprong. Het sjabloon levert daarom nooit meer dan
   vier blokken aan; wat overblijft gaat naar de verzamelkolom. */
.dl-mega-cols {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.4rem 1.75rem;
    align-content: start;
}

/* Staat er een uitgelicht blok naast, dan is er nog 689 pixels over in
   plaats van 977. Vier sporen worden dan 150 pixels breed terwijl er maar
   twee gevuld zijn: twee smalle kolommen en een gat. Twee sporen maken ze
   allebei 330 breed en dat vult wel. */
.dl-mega-body.has-spotlight .dl-mega-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dl-mega-col { min-width: 0; }

/* De kolomkop. Vorm en streepje staan verderop bij de rest van het
   categoriemenu; hier alleen wat elke kop deelt. */
.dl-mega-col-title {
    display: block;
    font-size: .9rem;
    font-weight: 700;
    color: var(--ink);
}
a.dl-mega-col-title:hover { color: var(--accent); text-decoration: none; }

/* "Meer in ..." is een kopje en geen link: dezelfde maat en plek als de
   andere koppen, maar gedempt, want er zit geen pagina achter. */
.dl-mega-col-title.is-plain { color: var(--ink-faint); font-weight: 600; }

.dl-mega-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: .85rem;
}
.dl-mega-col li + li { margin-top: .05rem; }

/* Eén regel per subcategorie. Een naam als "Profielsets en
   stabilisatiestangen" liep anders over twee regels en dan is een kolom
   niet meer 28 pixels per item maar soms 56: het paneel wordt hoger dan
   bedoeld en de hoogte hangt weer af van de inhoud. Afkappen met een
   beletselteken is hier het minste kwaad; de volledige naam staat op de
   categoriepagina zelf. */
.dl-mega-col a:not(.dl-mega-col-title):not(.dl-mega-all) {
    display: block;
    padding: .25rem 0;
    color: var(--ink-soft);
    line-height: 1.45;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dl-mega-col a:not(.dl-mega-col-title):hover { color: var(--accent); text-decoration: none; }

.dl-mega-all {
    display: inline-block;
    margin-top: .45rem;
    font-size: .83rem;
    font-weight: 600;
    color: var(--accent);
}

.dl-mega-foot {
    margin-top: 1.4rem;
    padding-top: .9rem;
    border-top: 1px solid var(--line-soft);
    font-size: .87rem;
    font-weight: 600;
}

.dl-mega-empty {
    display: grid;
    place-content: center;
    justify-items: center;
    gap: .85rem;
    min-height: 260px;
    text-align: center;
    color: var(--ink-soft);
}

/* -- Smal scherm --------------------------------------------------------- */
/* Twee kolommen naast elkaar werkt niet op een telefoon. Daar wordt het
   een lijst met alleen de hoofdcategorieën; wie verder wil tikt door naar
   de categoriepagina zelf. */

@media (max-width: 1024px) {
    .dl-mega-grid { display: block; min-height: 0; }

    .dl-mega-side {
        padding: .25rem 0 .75rem;
        border-right: 0;
        background: transparent;
    }

    .dl-mega-panels { display: none; }

    .dl-mega-chev { opacity: .4; transform: rotate(45deg); }
}

/* Kolom zonder kop: voor categorieën waarvan geen enkele subcategorie een
   eigen onderverdeling heeft. De items staan dan gewoon naast elkaar. */
.dl-mega-col.is-flat ul { font-size: .88rem; }
.dl-mega-col.is-flat a:not(.dl-mega-all) { padding-block: .3rem; }

/* -- Uitgelicht blok in een mager paneel -------------------------------
   Een categorie met twee subcategorieën liet driekwart van het paneel leeg.
   V1 had daar een uitgelicht blok voor staan; dit is hetzelfde idee.
   ---------------------------------------------------------------------- */

.dl-mega-body { display: block; }

.dl-mega-body.has-spotlight {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 1.75rem;
    align-items: start;
}

.dl-mega-spot {
    padding: 1.35rem;
    border-radius: min(16px, var(--dl-r-max));
    background: linear-gradient(180deg, color-mix(in srgb, var(--dl-blue-700) 9%, transparent), color-mix(in srgb, var(--dl-blue-700) 3%, transparent));
    border: 1px solid color-mix(in srgb, var(--dl-blue-700) 16%, transparent);
}

/* Geen getrackte kapitalen. "CATEGORIE" boven de naam van de categorie zegt
   niets wat de naam eronder niet al zegt, en in kapitalen van elf pixels
   leest het slechter dan gewone tekst. */
.dl-mega-spot-badge {
    display: inline-block;
    font-size: .78rem;
    font-weight: 500;
    color: var(--ink-faint);
    margin-bottom: .4rem;
}

.dl-mega-spot h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 .4rem;
}

.dl-mega-spot p {
    font-size: .84rem;
    color: var(--ink-soft);
    line-height: 1.5;
    margin-bottom: 1rem;
}

@media (max-width: 1240px) {
    .dl-mega-body.has-spotlight { grid-template-columns: minmax(0, 1fr); }
    .dl-mega-spot { display: none; }
}

/* =====================================================================
   Het categoriemenu in de huisstijl
   =====================================================================
   De vorige versie werkte wel, maar het was grijze tekst op wit zonder
   enige kleur: je kon er niet aan zien van welk bedrijf het was. Hier komt
   het merk erin, met iconen per categorie en artikelen uit de catalogus.
   ===================================================================== */

/* -- De linkerkolom ---------------------------------------------------- */

.dl-mega-side {
    padding: 1rem .75rem 1.25rem;
    background: linear-gradient(180deg, #f6f8fd 0%, #f2f5fb 100%);
    border-right: 1px solid var(--line-soft);
}

.dl-mega-tab {
    position: relative;
    gap: .7rem;
    padding: .58rem .7rem;
    border-radius: var(--dl-r-btn);
    color: var(--ink-soft);
    font-weight: 500;
}

.dl-mega-tab:hover {
    background: rgba(255, 255, 255, .75);
    color: var(--ink);
    box-shadow: none;
}

/* De actieve categorie: een wit vlak, de naam in het merkblauw en een
   streep aan de linkerkant. Hiervoor stond hier een gevuld donkerblauw blok
   met een slagschaduw; dat is in een paneel dat verder uit niets dan tekst
   bestaat de zwaarste vorm op het scherm, terwijl het alleen hoeft te zeggen
   welke van de elf je aan het bekijken bent. De streep doet dat net zo goed
   en laat de aandacht bij de subcategorieen ernaast.

   Wit op grijs alleen was te weinig, dat las als uitgeschakeld. Vandaar de
   kleur op de naam en de streep erbij. */
.dl-mega-tab.is-active {
    position: relative;
    background: #ffffff;
    color: var(--accent);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
}

.dl-mega-tab.is-active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 20%;
    bottom: 20%;
    width: 3px;
    border-radius: 0 min(2px, var(--dl-r-max)) min(2px, var(--dl-r-max)) 0;
    background: var(--accent);
}

.dl-mega-tab.is-active .dl-mega-chev { opacity: .5; }

/* -- De kolommen -------------------------------------------------------- */

.dl-mega-panels { padding: 1.5rem 1.6rem 1.25rem; }

.dl-mega-col-title {
    position: relative;
    padding-bottom: .5rem;
    margin-bottom: .55rem;
}

/* Een kort accentstreepje onder de kop in plaats van een lijn over de
   volle breedte: rustiger, en het geeft kleur aan het paneel. */
.dl-mega-col-title::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 22px; height: 2px;
    border-radius: min(2px, var(--dl-r-max));
    background: var(--dl-blue-700);
    transition: width .2s ease;
}
a.dl-mega-col-title:hover::after { width: 34px; }

.dl-mega-col-title.is-plain::after { background: var(--line); }

.dl-mega-col a:not(.dl-mega-col-title):not(.dl-mega-all) {
    position: relative;
    padding-left: 0;
    transition: padding-left .16s ease, color .16s ease;
}
.dl-mega-col a:not(.dl-mega-col-title):not(.dl-mega-all):hover { padding-left: .45rem; }

/* -- De strook met artikelen rechts ------------------------------------- */

.dl-mega-body { display: block; }


.dl-mega-spot-badge {
    display: block;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: .75rem;
}

.dl-mega-prods { display: grid; gap: .4rem; margin-bottom: .9rem; }

.dl-mega-prod {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .45rem;
    border-radius: min(11px, var(--dl-r-max));
    background: #ffffff;
    border: 1px solid transparent;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.dl-mega-prod:hover {
    text-decoration: none;
    border-color: color-mix(in srgb, var(--dl-blue-700) 22%, transparent);
    box-shadow: 0 6px 16px rgba(15, 23, 42, .07);
    transform: translateX(2px);
}

.dl-mega-prod-img {
    flex: none;
    width: 46px; height: 46px;
    border-radius: min(8px, var(--dl-r-max));
    background: #f1f4f7;
    display: grid;
    place-items: center;
    overflow: hidden;
}
.dl-mega-prod-img img { width: 100%; height: 100%; object-fit: cover; }

.dl-mega-prod-text { min-width: 0; display: flex; flex-direction: column; gap: .1rem; }

.dl-mega-prod-name {
    font-size: .8rem;
    font-weight: 500;
    color: var(--ink);
    line-height: 1.3;

    /* Twee regels en dan afkappen; productnamen zijn hier lang. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.dl-mega-prod:hover .dl-mega-prod-name { color: var(--accent); }

.dl-mega-prod-sku { font-size: .72rem; color: var(--ink-faint); }

/* -- De voet van het paneel ---------------------------------------------- */

.dl-mega-foot {
    margin-top: 1.25rem;
    padding-top: .85rem;
    border-top: 1px solid var(--line-soft);
}

.dl-mega-foot a {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--accent);
    font-weight: 600;
    font-size: .87rem;
}

@media (max-width: 1240px) {
    .dl-mega-spot { display: none; }
}


/* =====================================================================
   Voorstellen onderaan het menupaneel
   =====================================================================
   De artikelen stonden eerst als smalle strook rechts naast de kolommen.
   Dat kostte 268 pixels breedte aan de categorielijst en de productnamen
   werden na drie woorden afgekapt.

   Nu liggen ze onderaan over de volle breedte: de kolommen hebben hun
   ruimte terug en de artikelen zijn groter dan ze rechts ooit konden zijn.
   ===================================================================== */

/* De zijstrook bestaat niet meer; de kolommen krijgen weer alle ruimte,
   behalve als er een uitgelicht blok staat bij een magere categorie. */
.dl-mega-body { display: block; }


/* -- De rij met voorstellen -------------------------------------------- */

.dl-mega-suggest {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line-soft);
}

.dl-mega-suggest-head {
    display: block;
    font-size: .8rem;
    font-weight: 600;
    color: var(--ink-soft);
    margin-bottom: .85rem;
}

/* Vijf kaartjes op een rij, en het sjabloon levert er precies vijf. Met
   auto-fit hing het aantal kolommen van de breedte af en het aantal
   kaartjes niet, dus viel er soms een gat rechts en wikkelde er soms één
   naar een tweede rij. Een vast aantal maakt de hoogte van deze rij een
   bekend getal in plaats van een uitkomst.

   Vijf en geen zes: bij zes is een kaartje 133 pixels breed en dan is van
   "DutchLine - Keramieken wastafel" alleen "DutchLine -" te lezen. Bij
   vijf is het 186 en staat er iets waar je wat aan hebt. */
.dl-mega-prods {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .75rem;
    margin-bottom: 0;
}

/* De kaartjes staan nu naast elkaar met de foto erboven, in plaats van
   naast elkaar op één regel. Zo is de foto groot genoeg om er iets aan te
   hebben en past de naam op twee regels. */
.dl-mega-prod {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding: .6rem;
    border-radius: min(12px, var(--dl-r-max));
    background: #ffffff;
    border: 1px solid var(--line);
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.dl-mega-prod:hover {
    text-decoration: none;
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--dl-blue-700) 26%, transparent);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .09);
}

.dl-mega-prod-img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    border-radius: min(8px, var(--dl-r-max));
    background: #f1f4f7;
    display: grid;
    place-items: center;
    overflow: hidden;
}
.dl-mega-prod-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dl-mega-prod-text {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}

.dl-mega-prod-name {
    font-size: .79rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--ink);

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.dl-mega-prod:hover .dl-mega-prod-name { color: var(--accent); }

.dl-mega-prod-sku { font-size: .71rem; color: var(--ink-faint); }

/* Bij weinig ruimte liever vier grotere kaarten dan zes knijpertjes. */
@media (max-width: 1240px) {
    /* Het aantal kolommen blijft zes; alleen de kaartjes worden smaller.
       Zou het hier naar vier gaan, dan wikkelen zes kaartjes naar een
       tweede rij en is het paneel op een laptop weer hoger dan de rest. */
    .dl-mega-spot { display: none; }
}

@media (max-width: 1024px) {
    .dl-mega-suggest { display: none; }
}

/* -- Paneel zonder subcategorieën --------------------------------------
   Spiegels en Verlichting hebben geen onderverdeling maar wel tientallen
   producten. Die vullen dan het hele paneel, in vier kolommen in plaats
   van de smallere rij die onder een categorielijst past.
   ---------------------------------------------------------------------- */

.dl-mega-suggest.is-only {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

/* Een categorie zonder subcategorieën heeft alleen deze artikelen om het
   paneel mee te vullen, dus mogen het er twee rijen zijn. Zes breed in
   plaats van vier: vier kolommen gaf kaartjes van 234 pixels en daarmee
   twee rijen van 284, samen 582 pixels. Dat was ruim honderd meer dan de
   categorielijst links en dus werd het menu bij Spiegels hoger. Zes
   kolommen maakt er twee rijen van 202 en dan past het wel. */
.dl-mega-prods.is-wide {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: .85rem;
}

.dl-mega-prods.is-wide .dl-mega-prod-img { aspect-ratio: 1; }
.dl-mega-prods.is-wide .dl-mega-prod-name { font-size: .82rem; }

/* -- Correcties op de productkaartjes in het menu -----------------------
   Twee dingen klopten niet:

   1. De foto's werden bijgesneden. Productfoto's staan vrijstaand op een
      witte achtergrond; die moet je in hun geheel laten zien, niet vullend
      uitsnijden. Bij Verlichting zag je daardoor halve spots en bij
      Spiegels alleen een stuk badkamermuur.
   2. Het menu sprong in hoogte. Spiegels heeft twee rijen artikelen en
      Deuren maar één, dus schoot de onderrand alle kanten op zodra je met
      de muis langs de categorieën ging.
   ---------------------------------------------------------------------- */

.dl-mega-prod-img {
    background: #ffffff;
    border: 1px solid var(--line-soft);
    padding: .5rem;
}

.dl-mega-prod-img img {
    width: 100%;
    height: 100%;

    /* De hele foto in beeld, niet bijgesneden. */
    object-fit: contain;

    /* De meeste productfoto's hebben een witte achtergrond; vermenigvuldigen
       laat die opgaan in het vlak eronder in plaats van een wit blokje op
       wit te tonen. */
    mix-blend-mode: multiply;
}

/* De hoogte van het menu wordt bepaald door de categorielijst links, en
   die is met elf items altijd langer dan het langste paneel. Daardoor
   staat de onderrand stil zonder dat er iets hoeft te schuiven.

   Hier stond eerst een vaste hoogte van 486 pixels met een schuifbalk
   erbij. Dat was de verkeerde oplossing én verkeerd gemeten: de lijst is
   800 pixels en het langste paneel 756, dus er viel niets af te knippen.
   Schuiven in een uitklapmenu werkt sowieso niet: je bent het menu kwijt
   op het moment dat je muis richting de schuifbalk gaat. */

.dl-mega-panels {
    height: auto;
    overflow: visible;
}

.dl-mega-side  { min-height: 100%; }
.dl-mega-grid  { align-items: stretch; }

/* -- Compactere kaartjes in het menu ------------------------------------
   Het hoogste paneel bepaalt nu de maat van het hele menu, en dat kwam uit
   op 803 pixels. Op dit scherm past dat, maar op een laptop van 768 hoog
   niet meer, en dan valt de onderkant van het menu buiten beeld.

   De artikelen in het menu zijn een suggestie, geen catalogus: een platter
   plaatje en één regel naam is genoeg om te zien waar je terechtkomt.
   ---------------------------------------------------------------------- */

.dl-mega-prods .dl-mega-prod-img { aspect-ratio: 3 / 2; padding: .35rem; }
.dl-mega-prods.is-wide .dl-mega-prod-img { aspect-ratio: 4 / 3; }

.dl-mega-prod { padding: .45rem; gap: .4rem; }

/* Eén regel voor de naam; het artikelnummer eronder maakt duidelijk genoeg
   welk artikel het is. */
.dl-mega-prod-name {
    -webkit-line-clamp: 1;
    font-size: .78rem;
}

.dl-mega-suggest { margin-top: 1.1rem; padding-top: 1rem; }
.dl-mega-suggest-head { margin-bottom: .6rem; }

.dl-mega-panels { padding: 1.35rem 1.6rem 1.15rem; }
.dl-mega-cols { gap: 1.15rem 1.75rem; }

/* -- Echte oplossing voor de foto's in het menu -------------------------
   De foto's staken nog steeds uit hun kader. Waarom:

   Het kader krijgt zijn hoogte uit een beeldverhouding, dus staat er
   height:auto op. Een kind met height:100% kan daar niets mee: honderd
   procent van een onbekende hoogte is onbepaald, en dan valt de
   afbeelding terug op height:auto uit de algemene img-regel. Zo werd een
   foto van 1000x1000 pixels 156 pixels hoog in een kader van 111, en dan
   heeft object-fit geen enkele invloed meer: die verdeelt de foto binnen
   de afbeelding, niet de afbeelding binnen zijn kader.

   Met max-width en max-height in plaats van vaste maten past de foto
   altijd, ongeacht of het kader zijn hoogte nu wel of niet kent.
   ---------------------------------------------------------------------- */

.dl-mega-prod-img {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.dl-mega-prod-img img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* -- Hoe de productfoto's in het menu staan ----------------------------
   Vierkant kader, vullend. Dat klinkt tegenstrijdig met "niet bijsnijden",
   maar dat is het niet: van 400 nagemeten productfoto's is 97 procent
   vierkant (1000x1000). In een vierkant kader valt er dus niets af.

   De fout die ik eerder maakte was vullend tonen in een LIGGEND kader; dan
   snijd je een vierkante foto boven en onder af, en dat waren die halve
   spots. Daarna ging ik naar passend tonen, en toen kwam het echte probleem
   bovendrijven: de foto's in dit assortiment zijn niet gelijksoortig.
   Sommige zijn productshots op wit, andere sfeerfoto's van een hele
   badkamer. Passend maken zet dat verschil juist in de verf: de sfeerfoto
   vult zijn kader en de productshot zweeft als een postzegel in het midden.

   Vullend in een vierkant kader trekt dat glad. De sfeerfoto's komen tot de
   rand, de productshots verliezen alleen wat overtollig wit, en het raster
   oogt als één geheel.
   ---------------------------------------------------------------------- */

.dl-mega-prod-img {
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    border-radius: min(9px, var(--dl-r-max));
    background: #f4f6f9;
    overflow: hidden;
}

.dl-mega-prods.is-wide .dl-mega-prod-img { aspect-ratio: 1; }

.dl-mega-prod-img img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;

    /* Vermenigvuldigen hoeft niet meer: de foto vult het hele vlak, dus er
       is geen achtergrond meer die erdoorheen moet schijnen. Bij een
       sfeerfoto zou het de kleuren juist vertroebelen. */
    mix-blend-mode: normal;
}

/* Iets inzoomen bij het aanwijzen: de kaart voelt daardoor aanraakbaar
   zonder dat er iets verspringt. */
.dl-mega-prod-img img { transition: transform .35s cubic-bezier(.16, 1, .3, 1); }
.dl-mega-prod:hover .dl-mega-prod-img img { transform: scale(1.06); }

/* -- Afgeronde hoeken op de foto's -------------------------------------
   Genestelde afronding: de buitenste hoek moet ruimer zijn dan de
   binnenste, anders lijkt de binnenrand scherper dan hij is. De vuistregel
   is buitenradius min de tussenruimte, dus 14 min 4 komt op 10 uit.

   De foto zoomt in bij het aanwijzen. Een kind dat vergroot wordt kan in
   sommige browsers buiten de afronding van zijn ouder uitsteken; daarom
   krijgt het kader een eigen laag. Anders zie je op het moment van inzoomen
   even een scherpe hoek terugkomen.
   ---------------------------------------------------------------------- */

.dl-mega-prod {
    border-radius: min(14px, var(--dl-r-max));
    padding: 4px;
}

.dl-mega-prod-img {
    border-radius: min(10px, var(--dl-r-max));
    overflow: hidden;
}

/* Hier stond translateZ(0) om de afronding tijdens het inzoomen scherp te
   houden. Dat dwingt per kader een eigen grafische laag af, en met 52
   kaartjes in het menu liep het tabblad daarop vast. Overflow alleen doet
   in elke browser die wij bedienen precies hetzelfde werk. */

.dl-mega-prod-text { padding: .1rem .35rem .25rem; }

/* =====================================================================
   Het categoriemenu: het model van V1, ongewijzigd overgenomen
   =====================================================================
   Wat hierboven stond waren vijf pogingen over elkaar heen: openen op
   hover, daarna hover met wachttijd, daarna een klasse tijdens het
   scrollen, daarna openen op mousemove, daarna pointer-events erbij. Elke
   laag repareerde iets van de vorige en geen enkele haalde de oorzaak weg.
   Ze zijn allemaal verwijderd.

   Dit is hoe V1 het doet, en dat werkt daar al jaren zonder klachten.
   Drie dingen maken het verschil:

   1. De schil (het lijst-item) is position: static; het menu zelf is
      position: fixed. Het menu hangt dus aan het scherm en niet aan het
      lijst-item. Daarmee is de vraag "zit mijn muis op de knop" niet
      langer te verwarren met "zit mijn muis boven het menuvlak", want die
      twee overlappen elkaar niet meer in de opmaak.

   2. Openen kan maar op één manier: het script zet is-open op de schil.
      Er is geen enkele :hover- of :focus-within-regel die het menu opent.
      Dat is precies waarom V1 nooit vanzelf openklapte tijdens het
      scrollen: een muis die stilstaat terwijl de balk eronder wegschuift
      levert wel hover op, maar geen klik.

   3. De panelen verbergen met display en niet met visibility. Een kind mag
      de verborgen staat van zijn ouder overrulen (visibility erft en is
      omkeerbaar), display niet. Met visibility bleef het actieve paneel
      muisgebeurtenissen vangen terwijl het menu dicht was: dat was het
      rode vlak.
   ---------------------------------------------------------------------- */

.dl-has-mega { position: static; }

.dl-mega {
    position: fixed;
    left: 0;
    right: 0;

    /* Het script meet de onderkant van de koptekst bij elke opening. De
       balk krimpt tijdens het scrollen, dus een vaste waarde klopt niet
       lang. De 120px is alleen de noodwaarde voor als het script niet
       laadt. */
    top: var(--dl-mega-top, 120px);
    z-index: 1050;

    margin: 0;
    padding: 0;
    border: 0;
    border-top: 1px solid var(--line);
    border-bottom: 3px solid var(--dl-blue-700);
    border-radius: 0 0 min(20px, var(--dl-r-max)) min(20px, var(--dl-r-max));
    background: #ffffff;
    box-shadow: 0 28px 80px rgba(15, 23, 42, .16);
    overflow: hidden;
    max-height: none;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(10px);
    /* visibility schakelt en interpoleert niet. Stond hij in de overgang,
       dan houdt de browser hem tijdens die 160 milliseconden op de oude
       waarde, en een element dat nog hidden is kan geen focus krijgen: het
       menu ging open maar het toetsenbord kwam er niet in. Met een vertraging
       van 0 bij het openen staat hij er meteen, en bij het sluiten pas nadat
       het uitvagen klaar is. */
    transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}

.dl-has-mega.is-open > .dl-mega {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity .16s ease, transform .16s ease, visibility 0s;
}

/* -- De knop "Categorieën" ----------------------------------------------
   Drie toestanden, en ze moeten alle drie op zichzelf te herkennen zijn.

   Het is een button en geen link. Dat lost meteen het specificiteitsgevecht
   op dat hier stond: `.nav-list > li > a:hover` won het van
   `.dl-nav-mega:hover`, dus werd de achtergrond het lichtgrijs van een
   gewone menulink terwijl de tekst wit bleef, en verdween de knop bij het
   aanwijzen. Een button wordt door die a-selectors niet geraakt, dus hoeft
   er niets meer overheen.
   ---------------------------------------------------------------------- */

/* Deze knop stond altijd gevuld in de merkkleur, ook als het paneel dicht
   was. Dat leest als "aan": in een balk waar verder niets een vlak heeft,
   is een blauw blok de toestand van het moment en niet de vorm van het
   ding. Wie erlangs keek zag een menu dat permanent openstond.

   Nu gedraagt hij zich als de rest van de balk en vult hij alleen als het
   paneel eronder open is. Het gewicht dat hij verdient - achter deze ene
   ingang zitten elf categorieën - komt van de halfvette letter en het
   pijltje, niet van een kleurvlak. */
/* De maten staan hierboven, gedeeld met de gewone menulinks. Hier alleen wat
   deze knop eigen is. */
.dl-nav-mega {
    border: 0;
    background: transparent;
    color: var(--ink);

    /* font-family en niet de korte vorm font: die zou ook de regelhoogte en
       de lettergrootte terugzetten die hierboven juist gelijkgetrokken zijn.
       Een knop erft van zichzelf de systeemletter, dus dit moet wel. */
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;

    transition: background .14s ease, color .14s ease;
}

.dl-nav-mega:hover,
.dl-nav-mega:focus-visible {
    background: var(--surface-alt);
    color: var(--ink);
}

/* Staat de bezoeker op een categoriepagina, dan is dit de huidige pagina en
   krijgt hij hetzelfde blauwe blok als de andere menu-items. */
.dl-nav-mega[aria-current="page"],
.dl-nav-mega[aria-current="page"]:hover,
.dl-nav-mega[aria-current="page"]:focus-visible {
    background: var(--dl-blue-700);
    color: #ffffff;
}

/* Open: hetzelfde blauw als het huidige item. Hier stond een tint donkerder,
   om "dit staat open" van "hier ben je" te onderscheiden. Naast elkaar in de
   balk las dat alleen maar als twee blokken die niet bij elkaar horen, en dat
   onderscheid hoeft ook niet: het opengeklapte paneel eronder en het gedraaide
   pijltje zeggen allang dat hij openstaat.

   Deze regel staat als laatste zodat hij ook van de regel hierboven wint. */
.dl-has-mega.is-open > .dl-nav-mega,
.dl-has-mega.is-open > .dl-nav-mega[aria-current="page"] {
    background: var(--dl-blue-700);
    color: #ffffff;
    box-shadow: none;
}

.dl-has-mega.is-open > .dl-nav-mega .dl-caret {
    transform: rotate(180deg);
}

/* Verbergen met display, zoals V1. De regels die hier eerder stonden
   legden de panelen op elkaar in een raster om ze even hoog te maken; dat
   is niet nodig, want de categorielijst links telt elf items en is
   daarmee altijd hoger dan het langste paneel. De onderrand van het menu
   staat dus vanzelf stil. */
.dl-mega-panels { display: block; }

/* Alleen display, verder niets. Zet hier geen visibility, opacity of
   pointer-events op: die zijn stuk voor stuk omkeerbaar door een kind, en
   dan vangt het paneel weer muisgebeurtenissen terwijl het menu dicht is.
   Dat was het rode vlak. */
.dl-mega-panel { display: none; }
.dl-mega-panel.is-active { display: block; }

/* -- Smal scherm -------------------------------------------------------- */

@media (max-width: 1024px) {
    .dl-mega {
        position: static;
        display: none;
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        transform: none;
        transition: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .dl-has-mega.is-open > .dl-mega { display: block; }

    /* Op smal scherm staat er geen paneel naast de categorielijst, dus valt
       er ook niets te kiezen: elke categorie is gewoon een link naar zijn
       eigen pagina. De blauwe balk op de eerste liet het lijken alsof
       Badkamer al aangetikt was.

       Deze regels staan hier onderaan en niet bij de rest van de smalle
       schermen halverwege het bestand: de huisstijlregel voor een actieve
       categorie komt daar ná en is even specifiek, dus die won gewoon op
       volgorde. Een mediaquery telt niet mee voor specificiteit. */
    .dl-mega-tab.is-active {
        background: transparent;
        color: var(--ink-soft);
        font-weight: 500;
        box-shadow: none;
    }

    .dl-mega-tab.is-active .dl-mega-chev { opacity: .4; }
}

@media (prefers-reduced-motion: reduce) {
    .dl-mega { transition: none; }
}

/* =====================================================================
   Het schuifmenu voor telefoon en tablet
   =====================================================================
   Naar het model van V1 (#dlMobileNav): een paneel dat van links
   inschuift, met een vaste kop, daaronder het zoekveld en twee tabbladen,
   in het midden het schuifbare deel en onderaan een vaste voet.

   V1 gebruikt daar de offcanvas van Bootstrap voor. Die is er in V2 niet
   en dat blijkt een voordeel: het hele ding hangt hier aan formulier-
   elementen en werkt daarmee zonder JavaScript. Het paneel aan een
   checkbox, de tabbladen aan twee radioknoppen, de accordeon aan details.
   Het script doet er alleen dingen bij die je met CSS niet kunt regelen:
   Escape, de pagina eronder vastzetten en de focus.

   De checkbox staat in de opmaak vóór de koptekst en niet erin. Dat moest
   ooit: .site-header had een backdrop-filter, en een element met zo'n filter
   wordt het referentiekader voor alles wat position: fixed is - het paneel
   hing dan aan de koptekst in plaats van aan het scherm. Dat filter is er
   niet meer, maar de checkbox blijft buiten de koptekst staan: een filter of
   een transform daarop brengt hetzelfde probleem in één regel terug.
   ===================================================================== */

.oc-tab-input { display: none; }

/* -- De laag erachter ---------------------------------------------------- */

.dl-oc-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1090;

    background: rgba(16, 20, 44, .55);

    opacity: 0;
    visibility: hidden;
    transition: opacity .22s ease, visibility 0s linear .22s;
}

#nav-toggle:checked ~ .dl-oc-backdrop {
    opacity: 1;
    visibility: visible;
    transition: opacity .22s ease, visibility 0s;

    /* De vervaging staat bewust alleen hier en niet op de regel hierboven.
       Deze laag is zo groot als het scherm en staat op élke pagina in de
       opmaak; met een backdrop-filter erop houdt de browser daar continu
       een grafische laag voor aan, ook als je hem nooit te zien krijgt.
       Het tabblad bleef reageren maar een schermafdruk maken duurde langer
       dan dertig seconden, en dat is precies de valkuil die verderop in dit
       bestand al beschreven staat: vervaging alleen waar je hem echt ziet. */
    backdrop-filter: blur(2px);
}

/* -- Het paneel ---------------------------------------------------------- */

.dl-oc {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1100;

    width: min(92vw, 400px);
    display: flex;
    flex-direction: column;

    background: #ffffff;
    box-shadow: 0 0 60px rgba(9, 16, 34, .28);

    /* Buiten beeld zetten met translate en niet met left: dan schuift hij
       op de grafische kaart in plaats van dat de opmaak opnieuw berekend
       moet worden. */
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform .26s cubic-bezier(.32, .72, 0, 1), visibility 0s linear .26s;
}

#nav-toggle:checked ~ .dl-oc {
    transform: translateX(0);
    visibility: visible;
    transition: transform .26s cubic-bezier(.32, .72, 0, 1), visibility 0s;
}

/* Boven de 1024 bestaat het niet; daar staat de gewone navigatiebalk. */
@media (min-width: 1025px) {
    .dl-oc,
    .dl-oc-backdrop { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .dl-oc, .dl-oc-backdrop { transition: none; }
}

/* -- De kop -------------------------------------------------------------- */

.dl-oc-head {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;

    padding: 1rem 1rem 1rem 1.15rem;
    background: var(--dl-blue-900);
    color: #ffffff;
}

.dl-oc-title {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -.01em;
}

.dl-oc-close {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin: -.35rem -.35rem -.35rem 0;

    border-radius: var(--dl-r-btn);
    background: rgba(255, 255, 255, .12);
    color: #ffffff;
    cursor: pointer;
    transition: background .14s ease;
}
.dl-oc-close:hover { background: rgba(255, 255, 255, .2); }

/* -- Zoekveld en tabbladen ----------------------------------------------- */

.dl-oc-top {
    flex: none;
    padding: .85rem .9rem 0;
    background: var(--surface-alt);
    border-bottom: 1px solid var(--line);
}

/* Zoekveld en knop naast elkaar en niet over elkaar heen, net als de
   input-group waar V1 het mee doet. Met de knop ín het veld moet hij
   kleiner zijn dan het veld zelf, en dan komt hij nooit aan de 44 pixels
   die je nodig hebt om hem met een vinger te raken. */
.dl-oc-search {
    display: flex;
    align-items: stretch;
    gap: .4rem;
    margin-bottom: .85rem;
}

.dl-oc-search-veld {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
}

.dl-oc-search-icon {
    position: absolute;
    left: .8rem;
    display: grid;
    place-items: center;
    color: var(--ink-faint);
    pointer-events: none;
}

.dl-oc-search input {
    width: 100%;
    height: 46px;
    padding: 0 .9rem 0 2.4rem;

    border: 1px solid var(--line);
    border-radius: var(--dl-r-btn);
    background: #ffffff;
    font-size: .92rem;
    color: var(--ink);
}
.dl-oc-search input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.dl-oc-search button {
    flex: none;
    height: 46px;
    min-height: 46px;
    padding-inline: 1.05rem;

    border: 0;
    border-radius: var(--dl-r-btn);
    background: var(--dl-blue-800);
    color: #ffffff;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .14s ease;
}
.dl-oc-search button:hover { background: var(--dl-blue-900); }

.dl-oc-tabs {
    display: flex;
    gap: .25rem;
}

.dl-oc-tab {
    flex: 1;
    min-height: 44px;
    display: grid;
    place-items: center;

    border-radius: var(--dl-r-btn) var(--dl-r-btn) 0 0;
    font-size: .88rem;
    font-weight: 600;
    color: var(--ink-faint);
    cursor: pointer;

    /* De onderrand staat er altijd, alleen doorzichtig. Anders verspringt
       het tabblad twee pixels op het moment dat je het kiest. */
    border-bottom: 2px solid transparent;
    transition: color .14s ease, background .14s ease, border-color .14s ease;
}
.dl-oc-tab:hover { color: var(--ink); }

/* Het gekozen tabblad. De radioknoppen staan in de opmaak voor het paneel,
   dus de CSS kan er met ~ bij. */
#oc-tab-menu:checked ~ .dl-oc .dl-oc-tab[for="oc-tab-menu"],
#oc-tab-cats:checked ~ .dl-oc .dl-oc-tab[for="oc-tab-cats"] {
    background: #ffffff;
    border-bottom-color: var(--accent);
    color: var(--accent);
}

/* -- Het schuifbare midden ----------------------------------------------- */

.dl-oc-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: .9rem;
}

.dl-oc-panel { display: none; }

#oc-tab-menu:checked ~ .dl-oc .dl-oc-panel[data-oc-panel="menu"],
#oc-tab-cats:checked ~ .dl-oc .dl-oc-panel[data-oc-panel="cats"] { display: block; }

/* -- Tabblad Menu -------------------------------------------------------- */

.dl-oc-link {
    display: flex;
    align-items: center;
    gap: .7rem;
    min-height: 50px;
    padding: .6rem .8rem;

    border: 1px solid var(--line);
    border-radius: var(--dl-r-btn);
    background: #ffffff;
    color: var(--ink);
    font-size: .94rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .14s ease, border-color .14s ease;
}
.dl-oc-link + .dl-oc-link { margin-top: .4rem; }
.dl-oc-link:hover { background: var(--surface-alt); text-decoration: none; }

.dl-oc-link.is-active {
    background: var(--accent-soft);
    border-color: color-mix(in srgb, var(--dl-blue-700) 26%, transparent);
    color: var(--accent);
    font-weight: 600;
}

/* De ingang naar de categorieen krijgt gewicht: dat is waar de meeste
   bezoekers heen willen. */
.dl-oc-link.is-lead {
    background: var(--dl-blue-800);
    border-color: var(--dl-blue-800);
    color: #ffffff;
    font-weight: 600;
    margin-bottom: .55rem;
}
.dl-oc-link.is-lead:hover { background: var(--dl-blue-900); }
.dl-oc-link.is-lead .dl-oc-link-ico { background: rgba(255, 255, 255, .16); color: #ffffff; }
.dl-oc-link.is-lead .dl-oc-chev { opacity: .8; }

.dl-oc-link-ico {
    flex: none;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: min(9px, var(--dl-r-max));
    background: var(--surface-alt);
    color: var(--accent);
}

/* Het pijltje rechts. Twee randen van een vierkant, gedraaid: scheelt een
   icoon per regel. */
.dl-oc-chev {
    flex: none;
    margin-left: auto;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    opacity: .3;
}

.dl-oc-groep { margin-top: 1.1rem; }

.dl-oc-groep-kop {
    display: block;
    padding-left: .2rem;
    margin-bottom: .45rem;

    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

/* -- Tabblad Categorieen ------------------------------------------------- */

.dl-oc-cat {
    border: 1px solid var(--line);
    border-radius: var(--dl-r-btn);
    background: #ffffff;
    overflow: hidden;
}
.dl-oc-cat + .dl-oc-cat { margin-top: .4rem; }

.dl-oc-cat > summary,
.dl-oc-cat.is-flat {
    display: flex;
    align-items: center;
    gap: .7rem;
    min-height: 52px;
    padding: .6rem .8rem;

    color: var(--ink);
    font-size: .94rem;
    font-weight: 500;
    cursor: pointer;
    list-style: none;
}
.dl-oc-cat > summary::-webkit-details-marker { display: none; }
.dl-oc-cat.is-flat:hover { text-decoration: none; background: var(--surface-alt); }

.dl-oc-cat-ico {
    flex: none;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: min(9px, var(--dl-r-max));
    background: var(--surface-alt);
    color: var(--dl-blue-700);
}

.dl-oc-cat-naam { min-width: 0; }

/* Dit pijltje wijst omlaag en draait bij het openklappen, want hier klapt
   er echt iets uit. Bij een categorie zonder inhoud staat het gewone
   pijltje naar rechts: die gaat ergens heen. */
.dl-oc-cat-chev {
    flex: none;
    margin-left: auto;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    opacity: .35;
    transition: transform .18s ease;
}
.dl-oc-cat[open] > summary .dl-oc-cat-chev { transform: rotate(-135deg) translateY(-2px); }

.dl-oc-cat[open] > summary {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
}
.dl-oc-cat[open] > summary .dl-oc-cat-ico { background: #ffffff; }

.dl-oc-cat-body {
    padding: .2rem .8rem .8rem;
    border-top: 1px solid var(--line-soft);
}

.dl-oc-alles {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 44px;
    color: var(--accent);
    font-size: .87rem;
    font-weight: 600;
}

.dl-oc-blok { padding-top: .5rem; }
.dl-oc-blok + .dl-oc-blok { border-top: 1px solid var(--line-soft); margin-top: .5rem; }

/* Ook een kopje is hier een link naar de categoriepagina, dus het heeft
   net zo goed 44 pixels nodig om met een vinger te raken. */
.dl-oc-blok-kop {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding-block: .3rem;
    color: var(--ink);
    font-size: .88rem;
    font-weight: 600;
}
a.dl-oc-blok-kop:hover { color: var(--accent); text-decoration: none; }
.dl-oc-blok-kop.is-plain { color: var(--ink-faint); font-weight: 600; }

.dl-oc-sub {
    display: flex;
    flex-direction: column;
}

/* Ook de diepste laag krijgt 44 pixels. Dat maakt de lijst langer, maar een
   lijst waar je langs moet scrollen is beter dan een lijst waarin je de
   verkeerde regel raakt. */
.dl-oc-sub a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: .25rem 0 .25rem .8rem;

    border-left: 2px solid var(--line);
    color: var(--ink-soft);
    font-size: .87rem;
}
.dl-oc-sub a:hover {
    border-left-color: var(--accent);
    color: var(--accent);
    text-decoration: none;
}

/* -- De voet ------------------------------------------------------------- */

.dl-oc-foot {
    flex: none;
    display: grid;
    gap: .5rem;
    padding: .85rem .9rem;
    border-top: 1px solid var(--line);
    background: var(--surface-alt);
}

.dl-oc-foot .btn { justify-content: center; min-height: 46px; }

/* De uitlogknop zit in een formulier. Een raster van één kolom, anders staat
   de knop op zijn eigen breedte in een voet waar alles even breed is. */
.dl-oc-foot form { display: grid; }

/* -- De pagina eronder staat stil ---------------------------------------- */
/* Het script zet deze klasse als het menu opengaat. Zonder dit scrollt de
   pagina achter het paneel door zodra je met je vinger langs de rand
   veegt, en sta je na het sluiten ergens anders dan waar je was. */
.dl-oc-vast { overflow: hidden; }


/* -- De pagina Over ons ------------------------------------------------
   Vier blokken onder de kop: de getallen, het verhaal, wat ons onderscheidt
   en de tijdlijn, met de kleurenkaart als slot. De kop, de lichte band en
   het ingekaderde donkere vlak staan hierboven al; hier staat alleen wat
   deze pagina zelf nodig heeft.
   -------------------------------------------------------------------- */

/* De drie feiten onder de lead. Geen pillen: een rij afgeronde labels onder
   een kop is de vaste versiering van elke bedrijfspagina, en dit zijn te
   concrete regels om zo weg te zetten. Een scheidingsstreepje ertussen en
   verder niets. */
.dl-over-feiten {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1.25rem;

    margin: 1.4rem 0 0;
    padding: 0;
    list-style: none;

    font-size: .88rem;
    color: rgba(255, 255, 255, .74);
}

.dl-over-feiten li {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.dl-over-feiten li:not(:last-child)::after {
    content: "";
    width: 1px;
    height: .95em;
    background: rgba(255, 255, 255, .28);
}

/* -- De getallen -------------------------------------------------- */

/* Ze liggen half over de rand van de donkere kop heen. Daarmee horen ze bij
   de kop zonder erin te staan, en is de overgang naar wit geen kale lijn. */
/* De balk die over de onderrand van de kop heen ligt. Op Over ons staan er
   getallen in, op Contact de manieren om ons te bereiken; de balk zelf weet
   daar niets van en regelt alleen de plek, de vakverdeling en de scheidingen.
   De kop moet er wel ruimte voor maken, zie .dl-kop.is-diep. */
.dl-kopbalk {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));

    /* Wel in laag gezet, en niet alleen omhoog geschoven: de kop heeft
       isolation: isolate en is daarmee een eigen laag, die over gewone
       inhoud eronder heen valt. Zonder deze regel verdwijnt de bovenste helft
       van de inhoud achter het blauw. */
    position: relative;
    z-index: 1;

    margin-top: clamp(-3.25rem, -2.6rem - 2vw, -2.25rem);
    border-radius: var(--radius-lg);
    background: #ffffff;
    box-shadow: 0 18px 44px rgba(2, 6, 23, .14);
    overflow: hidden;
}

.dl-kopbalk > * {
    padding: clamp(1.1rem, .95rem + .7vw, 1.6rem) clamp(1rem, .85rem + .7vw, 1.75rem);
    border-right: 1px solid var(--line-soft);
}

.dl-kopbalk > :last-child { border-right: 0; }

.dl-over-cijfer-waarde {
    display: block;
    font-size: clamp(1.7rem, 1.4rem + 1.3vw, 2.4rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
    color: var(--dl-blue-800);
}

.dl-over-cijfer-naam {
    display: block;
    margin-top: .3rem;
    font-size: .86rem;
    color: var(--ink-soft);
}

/* Onder elkaar is de rechterrand een streep die nergens op slaat; daar hoort
   een streep tussen de regels. */
@media (max-width: 640px) {
    .dl-kopbalk > * {
        border-right: 0;
        border-bottom: 1px solid var(--line-soft);
    }

    .dl-kopbalk > :last-child { border-bottom: 0; }
}

/* -- Het verhaal en de tijdlijn ----------------------------------- */

/* Tekst links, de twee vakken rechts. */
.dl-over-verhaal {
    display: grid;
    gap: clamp(1.5rem, 1.1rem + 2vw, 3rem);
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
}

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

.dl-over-tekst h2 {
    margin: 0 0 .9rem;
    font-size: clamp(1.4rem, 1.2rem + .8vw, 1.9rem);
    font-weight: 700;
    letter-spacing: -.022em;
    color: var(--dl-blue-900);
}

.dl-over-tekst p {
    max-width: 46ch;
    color: var(--ink-soft);
    line-height: 1.7;
}

.dl-over-tekst p:last-child { margin-bottom: 0; }

/* -- Wat wij leveren ---------------------------------------------- */

/* De tien hoofdgroepen naast het verhaal. Geen kaartjes met schaduw maar
   regels met een haarlijn: het zijn er tien, en tien vakjes naast een lap
   tekst worden een muur. Als regels lezen ze als een inhoudsopgave, en dat
   is ook wat het is. */
/* Twee koppen, twee rollen. Naast het verhaal op Over ons is dit een label
   boven een lijst, dus klein en in kapitalen. Op het lege zoekresultaat is
   het een eigen blok naast de tipkaart, en dan is het een kop. */
.dl-groeplijst > h3 {
    margin: 0 0 .8rem;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--dl-blue-500);
}

.dl-groeplijst > h2 {
    margin: 0 0 .9rem;
    font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem);
    font-weight: 700;
    letter-spacing: -.018em;
    color: var(--dl-blue-900);
}

/* Kolom voor kolom vullen en niet rij voor rij: een alfabetische lijst lees
   je van boven naar beneden, dus hoort Badkamer tot Spiegels links te staan
   en Tegels tot Wandpanelen rechts. Rij voor rij zet Bouwmaterialen naast
   Badkamer en dan klopt de volgorde nergens meer. */
.dl-groeplijst ul {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(5, auto);
    grid-auto-columns: minmax(0, 1fr);
    gap: 0 clamp(1rem, .8rem + 1vw, 2rem);

    margin: 0;
    padding: 0;
    list-style: none;
}

@media (max-width: 560px) {
    .dl-groeplijst ul { grid-auto-flow: row; grid-template-rows: none; }
}

.dl-groeplijst a {
    display: flex;
    align-items: center;
    gap: .7rem;

    padding: .62rem .35rem;
    border-bottom: 1px solid var(--line-soft);
    color: var(--ink);
    font-size: .93rem;
    text-decoration: none;
}

.dl-groeplijst a:hover {
    color: var(--accent);
    text-decoration: none;
}

.dl-groeplijst-teken {
    display: grid;
    place-items: center;
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: min(8px, var(--dl-r-max));
    background: var(--dl-blue-100);
    color: var(--dl-blue-700);
}

.dl-groeplijst-naam { flex: 1 1 auto; }

/* Het getal rechts, op vaste cijferbreedte zodat de rij niet gaat dansen. */
.dl-groeplijst-aantal {
    flex: none;
    font-size: .84rem;
    font-variant-numeric: tabular-nums;
    color: var(--ink-faint);
}

.dl-groeplijst a:hover .dl-groeplijst-aantal { color: var(--accent); }

/* -- Wat ons onderscheidt ----------------------------------------- */

.dl-over-kop {
    margin: 0 0 clamp(1.2rem, 1rem + .8vw, 1.9rem);
    font-size: clamp(1.4rem, 1.2rem + .8vw, 1.9rem);
    font-weight: 700;
    letter-spacing: -.022em;
    color: var(--dl-blue-900);
}

.dl-over-punten {
    display: grid;
    gap: clamp(1rem, .85rem + .8vw, 1.75rem);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

/* Geen kaart eromheen. Vier witte vakjes met een schaduw op een vlak waar de
   productkaarten ook al witte vakjes zijn, en dan is niet meer te zien wat
   je kunt aanklikken en wat niet. Deze vier zijn tekst. */
.dl-over-punt h3 {
    margin: .85rem 0 .35rem;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--dl-blue-900);
}

.dl-over-punt p {
    margin: 0;
    font-size: .9rem;
    line-height: 1.6;
    color: var(--ink-soft);
}

.dl-over-punt-teken {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: min(12px, var(--dl-r-max));
    background: var(--dl-blue-100);
    color: var(--dl-blue-700);
}

/* -- De tijdlijn -------------------------------------------------- */

/* De lijn zit op de rand van elk blok en niet als los element ernaast: zo
   loopt hij vanzelf mee met de maat van de tekst en is er niets uit te
   rekenen. Het bolletje staat erop.

   Geen genummerde stappen: de jaartallen zijn het nummer, en die staan er
   omdat ze iets zeggen.

   Liggend zolang er vier kolommen naast elkaar passen. Vier mijlpalen van
   links naar rechts zijn een verloop in de tijd, en dat is precies wat er
   staat; rechtop naast een kop van twee regels bleef links een leeg vlak van
   driehonderd pixels over. */
.dl-over-tijd {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1rem, .75rem + 1.2vw, 2.25rem);

    margin: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem) 0 0;
    padding: 0;
    list-style: none;
}

.dl-over-mijl {
    position: relative;
    padding-top: 1.35rem;
    border-top: 2px solid var(--dl-blue-100);
}

.dl-over-mijl::before {
    content: "";
    position: absolute;
    left: 0;
    top: -7px;

    width: 12px;
    height: 12px;
    border-radius: min(50%, var(--dl-r-max));
    border: 2px solid var(--surface);
    background: var(--dl-blue-300);
}

/* Rechtop zodra vier kolommen te smal worden: de lijn verhuist naar links en
   de blokken komen onder elkaar. De laatste heeft geen lijn meer nodig, daar
   houdt de tijd op. */
@media (max-width: 760px) {
    .dl-over-tijd { grid-template-columns: minmax(0, 1fr); gap: 0; }

    .dl-over-mijl {
        padding: 0 0 1.5rem 1.6rem;
        border-top: 0;
        border-left: 2px solid var(--dl-blue-100);
    }

    .dl-over-mijl:last-child { padding-bottom: 0; border-left-color: transparent; }

    .dl-over-mijl::before { left: -7px; top: 0; }
}

/* Het heden krijgt de merkkleur en een ring, want dat is de regel waar de
   bezoeker naartoe leest. */
.dl-over-mijl.is-nu::before {
    background: var(--dl-blue-700);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--dl-blue-700) 16%, transparent);
}

.dl-over-jaar {
    display: block;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--dl-blue-500);
}

.dl-over-mijl.is-nu .dl-over-jaar { color: var(--dl-blue-700); }

.dl-over-mijl h3 {
    margin: .2rem 0 .3rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
}

.dl-over-mijl p {
    margin: 0;
    max-width: 60ch;
    font-size: .92rem;
    line-height: 1.6;
    color: var(--ink-soft);
}

/* -- De kleurenkaart ---------------------------------------------- */

/* De zes afwerkingen naast elkaar: dat is de lijn, en die hoort als lijn te
   staan en niet als raster. Eerder stonden hier twaalf stalen waarvan de
   helft geen afwerking was maar een tegeldecor.

   Zes gaat op in drie, dus tussendoor twee volle rijen in plaats van een
   rij die halverwege ophoudt. Onder de 700 pixels kantelt elk staal:
   bolletje links, naam ernaast - zes grote bollen onder elkaar is anders een
   halve schermhoogte. */
.dl-over-kleuren {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: clamp(1.25rem, 1rem + 1vw, 2.25rem);

    /* Lucht boven en onder de rij, los van de vulling van het kader zelf:
       dat kader staat ook op de productpagina om een rij artikelkaarten, en
       daar is die ruimte niet nodig. */
    margin: 0;
    padding: clamp(.5rem, .3rem + 1vw, 1.25rem) 0;
    list-style: none;
}

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

/* Ruimer dan het kader om de artikelkaarten: daar vullen de kaarten het vlak,
   hier zijn het zes bolletjes en dan is de ruimte eromheen het verschil
   tussen een staalkaart en een rijtje stippen.

   De marge eronder staat hier en niet op .dl-band-vlak: op de productpagina
   zit dat kader in de lichte band, en die levert de ruimte naar beneden zelf
   al. Hier staat het kader los op de pagina en sloot het zonder deze regel
   naadloos aan op het dealerblok - twee blauwe vlakken tegen elkaar met alleen
   een ronding als scheiding. Even veel als de ruimte erboven. */
.dl-over-kleurvlak { padding-block: clamp(2rem, 1.6rem + 2vw, 3.25rem); }

/* Los op de pagina in plaats van in de lichte band. Op de productpagina zit
   dit kader ín die band en levert die de ruimte naar beneden; staat het er
   los, dan sluit het naadloos aan op het dealerblok eronder - twee blauwe
   vlakken tegen elkaar met alleen een ronding als scheiding. */
.dl-cat.is-donker.is-ingekaderd.is-los {
    margin-bottom: clamp(3.5rem, 2.9rem + 2.4vw, 6.5rem);
}

.dl-over-kleuren li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .7rem;
    text-align: center;
}

/* Een lichte rand om elk staal: chroom op donkerblauw heeft er geen nodig,
   maar gunmetal zonder rand is een gat in het vlak. Eén regel voor allebei. */
.dl-over-staal {
    width: clamp(2.5rem, 2.1rem + 1.2vw, 3.25rem);
    aspect-ratio: 1;
    border-radius: min(50%, var(--dl-r-max));
    border: 1px solid rgba(255, 255, 255, .24);
    box-shadow: 0 6px 18px rgba(2, 6, 23, .34);
}

.dl-over-staal-naam {
    font-size: .84rem;
    line-height: 1.35;
    color: rgba(255, 255, 255, .82);
}

@media (max-width: 700px) {
    .dl-over-kleuren { grid-template-columns: minmax(0, 1fr); gap: .9rem; }

    .dl-over-kleuren li {
        flex-direction: row;
        align-items: center;
        gap: .9rem;
        text-align: left;
    }

    .dl-over-staal { flex: none; width: 2.75rem; }
}


/* -- De contactpagina --------------------------------------------------
   De kopbalk met de drie manieren om ons te bereiken, daaronder het
   formulier met de openingstijden ernaast. De balk en de kop staan hierboven
   al; hier staat wat deze pagina zelf nodig heeft.
   -------------------------------------------------------------------- */

/* Twee van de drie vakken zijn een link, de derde niet: je kunt een adres
   niet aanklikken. Ze zien er wel hetzelfde uit, want een rij waarin één vak
   anders is leest als een fout. Het verschil zit in de aanwijzer en in wat
   er bij zweven gebeurt. */
.dl-contact-weg {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "teken waarde" "teken bij";
    gap: .1rem .75rem;
    align-content: center;

    color: var(--ink);
    text-decoration: none;
    transition: background-color .14s ease;
}

a.dl-contact-weg:hover {
    background: var(--surface-alt);
    text-decoration: none;
}

a.dl-contact-weg:hover .dl-contact-waarde { color: var(--accent); }

a.dl-contact-weg:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.dl-contact-teken {
    grid-area: teken;
    display: grid;
    place-items: center;
    align-self: center;

    width: 38px;
    height: 38px;
    border-radius: min(10px, var(--dl-r-max));
    background: var(--dl-blue-100);
    color: var(--dl-blue-700);
}

.dl-contact-waarde {
    grid-area: waarde;
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: -.01em;
    overflow-wrap: anywhere;
}

.dl-contact-bij {
    grid-area: bij;
    font-size: .82rem;
    color: var(--ink-faint);
}

/* Open is groen, dicht is de gewone grijze regel. Alleen het afwijkende
   geval krijgt een kleur; anders is er geen afwijkend geval meer. */
.dl-contact-bij.is-open {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: #147a5a;
    font-weight: 600;
}

.dl-contact-bij.is-open::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: min(50%, var(--dl-r-max));
    background: currentColor;
}

/* -- Formulier en zijkolom ---------------------------------------- */

.dl-contact {
    display: grid;
    gap: clamp(1.25rem, 1rem + 1.5vw, 2.25rem);
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    align-items: start;
}

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

.dl-contact-zij {
    display: grid;
    gap: clamp(1rem, .85rem + .6vw, 1.5rem);
}

.dl-contact-vraag .field:last-of-type { margin-bottom: 1.25rem; }

/* De bestelling waar de vraag over gaat, boven de velden. Met het teken van
   de drie wegen in de kopbalk: zo hoort het bij deze pagina en leest het niet
   als een losse melding. De tekst zoals de gekozen bestelling bij een retour. */
.dl-contact-over {
    display: flex;
    align-items: center;
    gap: .85rem;
    margin: 0 0 1.1rem;
    padding: 0 0 1rem;
    border-bottom: 1px solid var(--line-soft);
}

.dl-contact-over .dl-contact-teken { flex: none; }

.dl-contact-over-tekst { min-width: 0; }

.dl-contact-over-label {
    margin: 0;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.dl-contact-over-nr {
    margin: .1rem 0 0;
    font-size: 1.15rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--dl-blue-900);
}

.dl-contact-over-bij {
    margin: .15rem 0 0;
    font-size: .84rem;
    color: var(--ink-soft);
}

/* De knop en de regel ernaast op één lijn, en niet de regel als voetnoot
   eronder: het is geen kleine lettertjes maar het antwoord op de vraag die
   iemand stelt voordat hij zijn adres achterlaat. */
.dl-contact-verstuur {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem 1rem;
}

.dl-contact-verstuur span {
    font-size: .84rem;
    color: var(--ink-faint);
}

/* Weggeschoven en niet display:none - een deel van de robots slaat velden
   over die verborgen zijn, en dan vangt de lokvink niets meer. */
.dl-lokvink {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* -- Openingstijden ----------------------------------------------- */

.dl-contact-uren {
    margin: 0;
    font-size: .91rem;
}

.dl-contact-uren > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;

    padding: .42rem .1rem;
    border-bottom: 1px solid var(--line-soft);
}

.dl-contact-uren > div:last-child { border-bottom: 0; }

.dl-contact-uren dt { color: var(--ink-soft); }

.dl-contact-uren dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

.dl-contact-uren dd.is-dicht { color: var(--ink-faint); }

/* Vandaag zwaarder, zodat je niet hoeft te tellen welke regel je bent. */
.dl-contact-uren .is-vandaag dt,
.dl-contact-uren .is-vandaag dd {
    font-weight: 700;
    color: var(--dl-blue-900);
}

/* Of we nu open zijn, boven de tijden: rood dicht, groen open. */
.dl-contact-nu {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin: 0 0 .75rem;
    font-size: .88rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--ink);
}

/* Op de hoogte van de eerste regel, ook als de tekst over twee loopt. */
.dl-contact-nu::before {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    margin-top: calc(.75em - 3.5px);
    border-radius: min(50%, var(--dl-r-max));
    background: var(--danger);
}

.dl-contact-nu.is-open::before { background: var(--ok); }

/* De kleine kaarten in de zijkolom: afhalen, particulier, de vragen. */
.dl-contact-kort p {
    margin: 0 0 .9rem;
    font-size: .91rem;
    line-height: 1.6;
    color: var(--ink-soft);
}

.dl-contact-adres {
    margin: 0 0 .75rem;
    font-style: normal;
    line-height: 1.6;
    color: var(--ink);
}

.dl-contact-route {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .91rem;
    font-weight: 600;
    color: var(--accent);
}


/* -- De klantenservicepagina -------------------------------------------
   In de kop het zoekveld, over de rand de wijzer met wat een klant zelf
   regelt, daaronder links de onderwerpen en rechts de vragen, en als slot
   de weg naar ons met de openingstijden. De kopbalk en het ingekaderde vlak
   staan hierboven al; hier staat wat deze pagina zelf nodig heeft.
   -------------------------------------------------------------------- */

/* De wijzer: vakken in de balk over de kop, elk met een teken, een kop en een
   regel eronder. Ook de foutpagina zet er zijn uitgangen in, dus een
   verandering hier geldt voor allebei. */
.dl-wijzer > a {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "teken kop" "teken bij";
    gap: .05rem .7rem;
    align-content: center;

    color: var(--ink);
    text-decoration: none;
    transition: background-color .14s ease;
}

.dl-wijzer > a:hover {
    background: var(--surface-alt);
    text-decoration: none;
}

.dl-wijzer > a:hover .dl-wijzer-kop { color: var(--accent); }

.dl-wijzer > a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.dl-wijzer-teken {
    grid-area: teken;
    display: grid;
    place-items: center;
    align-self: center;

    width: 38px;
    height: 38px;
    border-radius: min(10px, var(--dl-r-max));
    background: var(--dl-blue-100);
    color: var(--dl-blue-700);
}

.dl-wijzer-kop {
    grid-area: kop;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -.01em;
}

.dl-wijzer-bij {
    grid-area: bij;
    font-size: .82rem;
    color: var(--ink-faint);
}

/* -- Zoeken in de kop --------------------------------------------- */

.dl-ks-zoek {
    position: relative;
    max-width: 38rem;
    margin-top: clamp(1.25rem, 1rem + 1vw, 1.75rem);
}

.dl-ks-zoek > svg {
    position: absolute;
    top: 50%;
    left: 1.05rem;
    transform: translateY(-50%);
    color: var(--ink-faint);
    pointer-events: none;
}

.dl-ks-zoek input {
    width: 100%;
    height: 3.35rem;
    padding: 0 1rem 0 2.9rem;
    border: 0;
    border-radius: min(12px, var(--dl-r-max));
    background: var(--surface);
    box-shadow: 0 14px 34px rgba(2, 6, 23, .3);
    color: var(--ink);
    font: inherit;
    font-size: 1rem;
}

.dl-ks-zoek input::placeholder { color: var(--ink-faint); }

.dl-ks-zoek input:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--dl-blue-200) 70%, transparent);
    outline-offset: 2px;
}

/* Wie liever meteen iemand spreekt: of we nu open zijn, en bellen of appen
   zonder eerst naar beneden te hoeven. */
.dl-ks-snel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .55rem 1.35rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
    font-size: .9rem;
}

.dl-ks-snel a {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: #ffffff;
    font-weight: 600;
    text-decoration: none;
}

.dl-ks-snel a:hover {
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: .2em;
}

.dl-ks-snel svg { color: rgba(255, 255, 255, .6); }

/* -- Onderwerpen en vragen ---------------------------------------- */

.dl-ks {
    display: grid;
    grid-template-columns: 15.5rem minmax(0, 1fr);
    gap: clamp(1.5rem, 1rem + 2.5vw, 3.5rem);
    align-items: start;
}

.dl-ks-zij {
    position: sticky;
    top: var(--dl-kop-plak);
}

.dl-ks-zij-kop {
    margin: 0 0 .55rem;
    padding-inline: .7rem;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.dl-ks-onderwerpen {
    display: grid;
    gap: .15rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dl-ks-onderwerpen a {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem .7rem;
    border-radius: min(9px, var(--dl-r-max));
    color: var(--ink);
    font-size: .93rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .14s ease, color .14s ease, opacity .14s ease;
}

.dl-ks-onderwerpen a:hover {
    background: var(--surface-alt);
    color: var(--accent);
    text-decoration: none;
}

.dl-ks-onderwerpen svg { flex: none; color: var(--dl-blue-500); }

/* Een onderwerp zonder treffer bij het zoeken blijft staan, maar zwak: zo
   springt de lijst niet bij elke letter. */
.dl-ks-onderwerpen a.is-leeg { opacity: .38; }

.dl-ks-aantal {
    min-width: 1.55rem;
    margin-left: auto;
    padding: .05rem .4rem;
    border-radius: min(999px, var(--dl-r-max));
    background: var(--dl-blue-100);
    color: var(--dl-blue-800);
    font-size: .74rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.dl-ks-vragen {
    display: grid;
    gap: clamp(1rem, .8rem + .8vw, 1.5rem);
    scroll-margin-top: var(--dl-kop-plak);
}

.dl-ks-groep[hidden],
.dl-ks-vraag[hidden],
.dl-ks-geen[hidden] { display: none; }

.dl-ks-geen {
    margin: 0;
    padding: 1.1rem 1.25rem;
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    background: var(--surface-alt);
    color: var(--ink-soft);
    line-height: 1.6;
}

.dl-ks-geen strong { color: var(--ink); }

.dl-ks-groep {
    overflow: hidden;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
    scroll-margin-top: var(--dl-kop-plak);
}

.dl-ks-groep-kop {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: 1.15rem 1.35rem;
}

.dl-ks-teken {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: min(11px, var(--dl-r-max));
    background: var(--dl-blue-100);
    color: var(--dl-blue-700);
}

.dl-ks-groep-kop h2 {
    margin: 0;
    font-size: 1.12rem;
    font-weight: 700;
    letter-spacing: -.015em;
}

.dl-ks-groep-kop p {
    margin: .15rem 0 0;
    font-size: .86rem;
    color: var(--ink-faint);
}

.dl-ks-vraag { border-top: 1px solid var(--line-soft); }

/* Het eigen driehoekje van de browser weg; er staat een eigen pijl in de
   opmaak. -webkit- erbij voor Safari. */
.dl-ks-vraag > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.35rem;
    color: var(--ink);
    font-size: .97rem;
    font-weight: 600;
    line-height: 1.45;
    cursor: pointer;
    list-style: none;
    transition: background-color .14s ease, color .14s ease;
}

.dl-ks-vraag > summary::-webkit-details-marker { display: none; }

.dl-ks-vraag > summary:hover {
    background: var(--surface-alt);
    color: var(--accent);
}

.dl-ks-vraag > summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.dl-ks-vraag > summary svg {
    flex: none;
    color: var(--dl-blue-500);
    transition: transform .18s ease;
}

.dl-ks-vraag[open] > summary { color: var(--dl-blue-900); }

.dl-ks-vraag[open] > summary svg {
    transform: rotate(180deg);
    color: var(--dl-blue-700);
}

@media (prefers-reduced-motion: reduce) {
    .dl-ks-vraag > summary svg { transition: none; }
}

.dl-ks-antwoord {
    max-width: 70ch;
    padding: 0 1.35rem 1.25rem;
}

.dl-ks-antwoord p {
    margin: 0 0 .7rem;
    font-size: .94rem;
    line-height: 1.7;
    color: var(--ink-soft);
}

.dl-ks-antwoord p:last-child { margin-bottom: 0; }

.dl-ks-verder {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .9rem;
    font-weight: 600;
    color: var(--accent);
}

/* -- De weg naar ons ---------------------------------------------- */

.dl-ks-hulp-in {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 15.5rem);
    gap: clamp(1.25rem, 1rem + 1.5vw, 2.5rem);
    align-items: start;
}

.dl-ks-hulp h2 {
    margin: 0 0 .45rem;
    font-size: clamp(1.3rem, 1.15rem + .7vw, 1.7rem);
    font-weight: 700;
    letter-spacing: -.022em;
    color: #ffffff;
}

.dl-ks-hulp p {
    max-width: 50ch;
    margin: 0;
    line-height: 1.6;
    color: rgba(255, 255, 255, .74);
}

.dl-ks-hulp .dl-status {
    display: flex;
    width: fit-content;
    margin-top: 1rem;
}

.dl-ks-wegen {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: 1.25rem;
}

.dl-ks-winkel {
    margin: 0 0 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    font-style: normal;
    line-height: 1.6;
    color: rgba(255, 255, 255, .9);
}

.dl-ks-winkel a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: .45rem;
    color: #ffffff;
    font-weight: 600;
}

.dl-ks-winkel a:hover { color: rgba(255, 255, 255, .8); }

.dl-ks-uren {
    margin: 0;
    font-size: .88rem;
}

.dl-ks-uren > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .38rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.dl-ks-uren > div:last-child { border-bottom: 0; }

.dl-ks-uren dt { color: rgba(255, 255, 255, .62); }

.dl-ks-uren dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, .9);
}

.dl-ks-uren .is-vandaag dt,
.dl-ks-uren .is-vandaag dd {
    color: #ffffff;
    font-weight: 700;
}

/* Smal: de onderwerpen als een rij om door te vegen boven de vragen, en
   de tijden onder de knoppen. */
@media (max-width: 960px) {
    .dl-ks { grid-template-columns: minmax(0, 1fr); }

    .dl-ks-zij {
        position: static;
        min-width: 0;
    }

    .dl-ks-zij-kop { display: none; }

    .dl-ks-onderwerpen {
        display: flex;
        gap: .45rem;
        margin-inline: calc(var(--page-pad) * -1);
        padding: .1rem var(--page-pad) .35rem;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .dl-ks-onderwerpen::-webkit-scrollbar { display: none; }

    .dl-ks-onderwerpen a {
        flex: none;
        padding: .45rem .75rem;
        border: 1px solid var(--line);
        background: var(--surface);
        white-space: nowrap;
    }

    .dl-ks-hulp-in { grid-template-columns: minmax(0, 1fr); }
}

/* Op een telefoon staan de vakken onder elkaar; zonder de regel eronder
   blijft de rij kort genoeg om de vragen nog in beeld te krijgen. */
@media (max-width: 640px) {
    .dl-ks-zelf > a { padding-block: .8rem; }
    .dl-ks-zelf .dl-wijzer-bij { display: none; }
}


/* -- Het lege zoekresultaat --------------------------------------------
   Tips links, de hoofdgroepen rechts. Twee manieren om verder te komen en
   geen volgorde, dus naast elkaar en niet onder elkaar.
   -------------------------------------------------------------------- */

.dl-zoek-leeg {
    display: grid;
    gap: clamp(1.25rem, 1rem + 1.5vw, 2.5rem);
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
    align-items: start;
}

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

.dl-zoek-tips ul {
    margin: 0 0 1.1rem;
    padding: 0;
    list-style: none;
    display: grid;
    gap: .6rem;
}

/* Een vinkje en geen bolletje: dit zijn dingen die je kunt doen, geen
   opsomming van eigenschappen. */
.dl-zoek-tips li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .55rem;
    font-size: .92rem;
    line-height: 1.55;
    color: var(--ink-soft);
}

.dl-zoek-tips li::before {
    content: "";
    width: 7px;
    height: 7px;
    margin-top: .5em;
    border-radius: min(50%, var(--dl-r-max));
    background: var(--dl-blue-300);
}

.dl-zoek-tips p {
    margin: 0 0 .8rem;
    padding-top: .9rem;
    border-top: 1px solid var(--line-soft);
    font-size: .89rem;
    color: var(--ink-faint);
}


/* -- Juridische pagina's ------------------------------------------------
   Inhoudsopgave links die meeloopt, de artikelen rechts. Bedoeld voor het
   retourbeleid, de voorwaarden, de privacyverklaring en het cookiebeleid:
   vier pagina's met dezelfde vorm, dus één opmaak.
   -------------------------------------------------------------------- */

/* Drie kolommen over de volle breedte van de site: inhoudsopgave, tekst,
   aanmelden. Stond eerst als twee kolommen gecentreerd in een vak van
   duizend pixels, en dan is deze pagina smaller dan elke andere - dat viel
   op zodra je van de ene naar de andere ging.

   De tekst houdt binnen zijn kaart een leesbreedte van vierenzeventig
   tekens aan; wat er rechts van overblijft is vulling van de kaart en geen
   gat, omdat de kaart zelf ophoudt bij de derde kolom. */
.dl-jur {
    display: grid;
    gap: clamp(1.25rem, 1rem + 1.4vw, 2.25rem);
    grid-template-columns: minmax(0, 16rem) minmax(0, 1fr) minmax(0, 17rem);
    align-items: start;
}

@media (max-width: 1200px) {
    .dl-jur { grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); }

    /* De aanmeldkaart past er niet meer naast en gaat onder de
       inhoudsopgave staan, waar hij eerder ook stond. */
    .dl-jur-actie { grid-column: 1; grid-row: 2; }
}

@media (max-width: 900px) {
    .dl-jur { grid-template-columns: minmax(0, 1fr); }
    .dl-jur-actie { grid-column: auto; grid-row: auto; }
}

@media (min-width: 901px) {
    .dl-jur-zij,
    .dl-jur-actie { position: sticky; top: var(--dl-kop-plak); }
}

/* Met een balk over de onderrand van de kop, zoals de stappen van een retour:
   de band begint waar de kop ophoudt en de balk hangt eroverheen. flow-root
   houdt de negatieve marge van de balk binnen de band, zoals bij
   .dl-fout-band. */
.dl-band-licht.dl-jur-band {
    padding-top: 0;
    display: flow-root;
}

.dl-jur-band .dl-kopbalk { margin-bottom: clamp(1.5rem, 1.2rem + 1.2vw, 2.5rem); }

/* -- De inhoudsopgave --------------------------------------------- */

/* De kopbalk en het wit komen van .dl-kaart; hier alleen de lijst erin. */
.dl-jur-inhoud ol {
    margin: 0;
    padding: .5rem .55rem .6rem;
    list-style: none;
}

.dl-jur-inhoud a {
    display: grid;
    grid-template-columns: 1.6rem minmax(0, 1fr);
    gap: .1rem;
    align-items: baseline;

    padding: .4rem .3rem;
    border-radius: min(7px, var(--dl-r-max));
    color: var(--ink-soft);
    font-size: .91rem;
    line-height: 1.35;
    text-decoration: none;
    transition: background-color .14s ease, color .14s ease;
}

/* Het nummer in de merkkleur en met vaste cijferbreedte, zodat de titels
   ernaast op één lijn beginnen. */
.dl-jur-inhoud a span {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--dl-blue-300);
}

.dl-jur-inhoud a:hover {
    background: var(--surface-alt);
    color: var(--ink);
    text-decoration: none;
}

.dl-jur-inhoud a:hover span { color: var(--dl-blue-700); }

.dl-jur-inhoud a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.dl-jur-actie p {
    margin: 0 0 .9rem;
    font-size: .89rem;
    line-height: 1.6;
    color: var(--ink-soft);
}

.dl-jur-actie .btn + .btn { margin-top: .5rem; }

/* -- De artikelen -------------------------------------------------- */

/* Eén kaart om de hele tekst en geen negen. Juridische tekst leest als
   doorlopend verhaal met kopjes; negen losse vakken met een blauwe balk
   erboven maakt er een formulier van. */
.dl-jur-tekst > .dl-kaart-in {
    padding: clamp(1.25rem, 1rem + 1.4vw, 2.25rem);
}

.dl-jur-artikel {
    scroll-margin-top: var(--dl-kop-plak);
}

.dl-jur-artikel + .dl-jur-artikel {
    margin-top: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem);
    padding-top: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem);
    border-top: 1px solid var(--line-soft);
}

.dl-jur-artikel > h2 {
    margin: 0 0 .8rem;
    font-size: clamp(1.15rem, 1.05rem + .5vw, 1.4rem);
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--dl-blue-900);
}

/* Het nummer boven de titel en niet ervoor: "Artikel 6 - Transport en
   kosten" op één regel breekt op een smal scherm midden in het streepje. */
.dl-jur-nr {
    display: block;
    margin-bottom: .2rem;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--dl-blue-500);
}

.dl-jur-tekst p,
.dl-jur-tekst li {
    max-width: 74ch;
    color: var(--ink-soft);
    line-height: 1.75;
}

.dl-jur-tekst p { margin: 0 0 .8rem; }
.dl-jur-tekst p:last-child { margin-bottom: 0; }

.dl-jur-tekst strong { color: var(--ink); font-weight: 700; }
.dl-jur-tekst a { color: var(--accent); }

.dl-jur-tekst ul {
    margin: 0 0 .8rem;
    padding: 0;
    list-style: none;
    display: grid;
    gap: .45rem;
}

/* Een bolletje in de merkkleur op de plek waar de browser er een zet, zodat
   de lijst in de pas loopt met de alinea's erboven.

   Met inspringing en een absoluut bolletje, en niet met display: grid op de
   li. Dat laatste stond hier eerst en ging mis zodra een regel gemengde
   inhoud heeft: in een raster wordt elk kind een eigen vak, dus bij
   "<strong>Wederpartij:</strong> iedere natuurlijke persoon..." kwam de
   vetgedrukte term in de ene kolom en de omschrijving in de andere. In de
   voorwaarden staat een hele begrippenlijst zo. */
.dl-jur-tekst ul li {
    position: relative;
    padding-left: 1.15rem;
}

.dl-jur-tekst ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .68em;

    width: 6px;
    height: 6px;
    border-radius: min(50%, var(--dl-r-max));
    background: var(--dl-blue-300);
}

/* -- Tabellen in de tekst ----------------------------------------- */

/* In het cookiebeleid staan twee tabellen met de cookies erin. Die zijn
   breder dan een telefoonscherm en duwden de hele pagina mee: op 390 pixels
   liep er zeventig pixels buiten beeld.

   display: block maakt van de tabel een blok dat zelf mag schuiven, zonder
   dat de opmaak eromheen iets hoeft te weten van wat er in de tekst staat -
   en dat is nodig, want die tekst komt uit het beheerscherm. De kolommen
   blijven uitlijnen: de browser maakt er intern weer een tabel van. */
.dl-jur-tekst table {
    display: block;
    overflow-x: auto;
    width: 100%;
    max-width: 100%;

    margin: 0 0 1rem;
    border-collapse: collapse;
    font-size: .88rem;
}

.dl-jur-tekst th,
.dl-jur-tekst td {
    padding: .55rem .75rem;
    border-bottom: 1px solid var(--line-soft);
    text-align: left;
    vertical-align: top;
    line-height: 1.55;
}

.dl-jur-tekst th {
    background: var(--surface-alt);
    color: var(--dl-blue-900);
    font-weight: 700;
    white-space: nowrap;
}

.dl-jur-tekst td { color: var(--ink-soft); }

.dl-jur-tekst tbody tr:last-child td { border-bottom: 0; }

.dl-jur-gegevens {
    font-size: .88rem;
    color: var(--ink-faint);
}

.dl-jur-datum {
    margin-top: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem);
    padding-top: 1.1rem;
    border-top: 1px solid var(--line-soft);
    font-size: .86rem;
    color: var(--ink-faint);
}


/* -- Het inlogscherm ---------------------------------------------------
   Eén kolom: wie hier komt is al klant en wil naar binnen. Het enige wat
   erbij is gekomen ten opzichte van een kaal formulier is het slotje - het
   teken dat er iets achter zit.
   -------------------------------------------------------------------- */

.dl-inlog-teken {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 1rem;
    border-radius: min(12px, var(--dl-r-max));
    background: var(--dl-blue-100);
    color: var(--dl-blue-700);
}

.dl-inlog form { margin-top: 1.5rem; }

/* -- Het inlogscherm van het dealerportaal -----------------------------
   Links waar je binnenkomt, rechts de deur. Het welkomstvlak is licht en
   niet donkerblauw zoals bij aanmelden: daar is het vlak de verleiding, hier
   is het uitleg voor wie al klant is. Twee donkere vlakken naast een wit
   formulier op één scherm is bovendien meer blauw dan tekst.
   -------------------------------------------------------------------- */

.dl-portaal {
    display: grid;
    gap: clamp(1rem, .8rem + 1.2vw, 2rem);
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: start;
}

/* Onder elkaar gaat het formulier voorop: wie hier komt wil inloggen, niet
   eerst lezen wat hij achter dat wachtwoord vindt. */
@media (max-width: 900px) {
    .dl-portaal { grid-template-columns: minmax(0, 1fr); }
    .dl-portaal-welkom { order: 2; }
    .dl-inlog { order: 1; }
}

/* Op het merkvlak, net als het stappenvlak bij aanmelden. Stond hier eerst
   in het wit met een randje: netjes, maar het was het bleekste blok van de
   hele site terwijl het de kant is die iets belooft. Eén donker vlak naast
   één witte kaart is het vaste paar op deze site. */
.dl-portaal-welkom {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    padding: clamp(1.4rem, 1.1rem + 1.6vw, 2.5rem);
    border-radius: var(--radius-lg);
    background: var(--dl-blue-950);
    color: #ffffff;
}

.dl-portaal-welkom::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -3;
    background:
        radial-gradient(56% 46% at 14% 4%, color-mix(in srgb, var(--dl-blue-700) 62%, transparent), transparent 70%),
        radial-gradient(50% 42% at 90% 98%, color-mix(in srgb, var(--dl-blue-450) 36%, transparent), transparent 74%);
}

/* Het merkje boven de titel. Geen kale kapitalen maar een pil met een stip:
   dit is het enige label op de site dat zegt in welk deel je bent, en dat
   verdient een vorm. */
.dl-portaal-welkom h1 {
    margin: 0 0 .7rem;
    font-size: clamp(1.7rem, 1.35rem + 1.8vw, 2.6rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.032em;
    color: #ffffff;
}

.dl-portaal-lead {
    margin: 0 0 1.6rem;
    font-size: clamp(1rem, .96rem + .2vw, 1.1rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, .74);
}

/* -- De vier kenmerken -------------------------------------------- */

.dl-portaal-kenmerken {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

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

/* Teken en titel op één regel, de uitleg daaronder over de volle breedte.
   Het teken stond eerst boven de titel; dan is de kaart drie lagen hoog en
   staat de naam van het kenmerk niet naast het plaatje dat hem aankondigt. */
.dl-portaal-kenmerken article {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: .55rem .7rem;

    padding: 1rem 1.1rem 1.1rem;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, .06);
}

.dl-portaal-teken {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: min(9px, var(--dl-r-max));
    background: rgba(255, 255, 255, .14);
    color: #ffffff;
}

.dl-portaal-kenmerken strong {
    font-size: .96rem;
    font-weight: 700;
    color: #ffffff;
}

.dl-portaal-kenmerken p {
    grid-column: 1 / -1;
    margin: 0;
    font-size: .86rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, .66);
}

/* -- De drie feiten ----------------------------------------------- */

/* Drie feiten als slotregel, met een haarlijn ertussen in plaats van drie
   kadertjes. Het waren doosjes van hetzelfde soort als de vier erboven, en
   dan staan er zeven vakken onder elkaar en valt er niets meer op. */
/* Drie feiten als slotregel, met een haarlijn erboven in plaats van drie
   kadertjes. Het waren doosjes van hetzelfde soort als de vier erboven, en
   dan staan er zeven vakken onder elkaar en valt er niets meer op. */
.dl-portaal-feiten {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem clamp(1rem, .8rem + 1vw, 1.75rem);

    margin: 1.5rem 0 0;
    padding-top: 1.3rem;
    border-top: 1px solid rgba(255, 255, 255, .16);
}

/* Elk feit als groepje in het midden van zijn kolom, en niet links tegen de
   rand. De tekst is kort en de kolom is breed; links uitgelijnd leest dat als
   een kolom waar de helft van weggevallen is. */
.dl-portaal-feiten > div {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    justify-content: center;
    gap: 0 .65rem;
    text-align: left;
}

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

.dl-portaal-feit-teken {
    grid-row: span 2;
    display: grid;
    place-items: center;

    width: 34px;
    height: 34px;
    border-radius: min(50%, var(--dl-r-max));
    border: 1px solid rgba(255, 255, 255, .2);
    background: rgba(255, 255, 255, .1);
    color: #ffffff;
}

.dl-portaal-feiten dt {
    font-size: clamp(1.15rem, 1.05rem + .45vw, 1.45rem);
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: 1.1;
    color: #ffffff;
}

.dl-portaal-feiten dd {
    margin: .1rem 0 0;
    font-size: .78rem;
    line-height: 1.3;
    color: rgba(255, 255, 255, .6);
}

/* -- Velden met een teken erin ------------------------------------ */

/* Het icoon staat in het veld en niet ervoor: een kolom iconen naast de
   invoervakken schuift de velden op en laat ze smaller worden. */
.dl-veld {
    position: relative;
    display: block;
}

/* Met .field ervoor en niet met !important: app.css richt zich op
   .field input[type="text"], en dat weegt zwaarder dan een losse klasse.
   Even zwaar wint hier wel, want theme.css komt na app.css. */
.field .dl-veld input {
    padding-left: 2.6rem;
}

.dl-veld-teken {
    position: absolute;
    left: .85rem;
    top: 50%;
    transform: translateY(-50%);

    display: grid;
    place-items: center;
    color: var(--ink-faint);
    pointer-events: none;
}

.dl-veld input:focus ~ .dl-veld-teken { color: var(--accent); }

/* Label links, wachtwoord-vergeten rechts, op één regel. */
.dl-veld-kop {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .3rem 1rem;
}

.dl-veld-kop label { margin-bottom: .35rem; }

.dl-veld-kop a {
    font-size: .85rem;
    font-weight: 600;
    color: var(--accent);
}

.dl-veld-oog {
    position: absolute;
    right: .4rem;
    top: 50%;
    transform: translateY(-50%);

    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;

    border: 0;
    border-radius: min(8px, var(--dl-r-max));
    background: none;
    color: var(--ink-faint);
    cursor: pointer;
}

.dl-veld-oog:hover { background: var(--surface-alt); color: var(--ink); }
.dl-veld-oog.is-aan { color: var(--accent); }
.dl-veld-oog:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* -- De rest van het inlogblok ------------------------------------ */

/* De melding die over het hele formulier gaat. Rood en met role="alert",
   zodat een schermlezer hem voorleest zodra de pagina terugkomt - anders
   moet iemand zelf gaan zoeken wat er misging. */
.dl-inlog-onthoud { margin-bottom: 1.25rem; }

/* Twee gelijke knoppen naast elkaar onder de hoofdknop. Ze zijn beide een
   uitweg en geen van beide de bedoeling, dus even zwaar. */
.dl-inlog-naast {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
    margin-top: .5rem;
}

/* Krappere vulling en een kleinere letter: met de gewone maat breekt
   "Dealer worden" over twee regels en worden de knoppen zestig pixels hoog,
   hoger dan de inlogknop erboven. */
.dl-inlog-naast .btn {
    padding-inline: .75rem;
    font-size: .88rem;
    white-space: nowrap;
}

.dl-inlog-naast .btn svg { flex: none; }

/* Staat aanmelden uit, dan blijft Klantenservice alleen over. */
.dl-inlog-naast .btn:only-child { grid-column: 1 / -1; }

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

.dl-inlog-hulp {
    margin: 1.1rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--line-soft);
    font-size: .86rem;
    line-height: 1.55;
    color: var(--ink-faint);
}

.dl-inlog-hulp a { color: var(--accent); font-weight: 600; }


/* -- Het scherm na het aanmelden --------------------------------------
   Eén kaart, geen tweede kolom. Op de andere toegangsschermen staat links
   waarom je het doet; hier is het al gedaan, en dan is een verkooppraatje
   naast een bevestiging misplaatst.
   -------------------------------------------------------------------- */

.dl-ontvangen { max-width: 40rem; margin-inline: auto; text-align: left; }

/* Het vinkje. Groen en niet in het merkblauw: dit is het enige op de site
   dat "gelukt" betekent, en dan mag het die kleur ook hebben. */
.dl-ontvangen-teken {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: 1rem;
    border-radius: min(50%, var(--dl-r-max));
    background: #e7f6ec;
    color: #1d7a42;
}

.dl-ontvangen h1 {
    margin: 0 0 .6rem;
    font-size: clamp(1.4rem, 1.2rem + .9vw, 1.9rem);
    font-weight: 800;
    letter-spacing: -.022em;
    color: var(--dl-blue-900);
}

.dl-ontvangen-lead {
    margin: 0 0 1.4rem;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--ink-soft);
}

/* Wat er nu gebeurt. Genummerd voelt hier verkeerd: het zijn geen stappen
   die de bezoeker moet zetten, het is wat wíj doen. Vandaar een teken en
   geen cijfer. */
.dl-ontvangen-stappen {
    margin: 0 0 1.4rem;
    padding: 1.1rem 0;
    border-block: 1px solid var(--line-soft);
    list-style: none;
    display: grid;
    gap: .95rem;
}

.dl-ontvangen-stappen li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .8rem;
    align-items: start;
}

.dl-ontvangen-stap-teken {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: min(9px, var(--dl-r-max));
    background: var(--dl-blue-100);
    color: var(--dl-blue-700);
}

.dl-ontvangen-stappen strong {
    display: block;
    font-size: .95rem;
    font-weight: 700;
    color: var(--dl-blue-900);
}

.dl-ontvangen-stappen strong + span {
    display: block;
    margin-top: .15rem;
    font-size: .89rem;
    line-height: 1.55;
    color: var(--ink-soft);
}

.dl-ontvangen-tussen {
    margin: 0 0 1rem;
    font-size: .92rem;
    line-height: 1.6;
    color: var(--ink-soft);
}

.dl-ontvangen-knoppen {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem;
}

/* Krappere vulling en een kleinere letter, net als onder het inlogscherm:
   met de gewone maat breekt "Naar het assortiment" over twee regels en zijn
   de knoppen zeventig pixels hoog. */
.dl-ontvangen-knoppen .btn {
    padding-inline: .75rem;
    font-size: .9rem;
    white-space: nowrap;
}

.dl-ontvangen-knoppen .btn svg { flex: none; }

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

.dl-ontvangen-klein {
    margin: 1.2rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--line-soft);
    font-size: .86rem;
    line-height: 1.55;
    color: var(--ink-faint);
}

.dl-ontvangen-klein a { color: var(--accent); font-weight: 600; }


/* -- Afmelden voor e-mails --------------------------------------------
   Per soort mail een rij over de hele breedte, zodat hij op een telefoon
   met de duim te raken is. Een aangevinkte rij krijgt de kleur van het
   merk: aangevinkt is hier uit, en dat moet in één oogopslag te zien zijn.
   -------------------------------------------------------------------- */

.dl-afmelden form { margin-top: 1.4rem; }

/* Een lang e-mailadres zonder streepje breekt anders niet, en loopt op een
   telefoon buiten de kaart. */
.dl-afmelden .muted strong { overflow-wrap: anywhere; }

.dl-afmeld-soorten {
    display: grid;
    gap: .5rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.dl-afmeld-soorten legend {
    margin-bottom: .65rem;
    padding: 0;
    font-size: .95rem;
    font-weight: 700;
    color: var(--dl-blue-900);
}

.dl-afmeld-vink {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .75rem .9rem;
    border: 1px solid var(--line);
    border-radius: min(10px, var(--dl-r-max));
    font-size: .92rem;
    line-height: 1.4;
    color: var(--ink);
    cursor: pointer;
}

.dl-afmeld-vink input {
    flex: none;
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: var(--dl-blue-700);
}

.dl-afmeld-vink:has(input:checked) {
    border-color: color-mix(in srgb, var(--dl-blue-700) 40%, transparent);
    background: color-mix(in srgb, var(--dl-blue-100) 60%, transparent);
}

.dl-afmeld-vink:has(input:focus-visible) {
    outline: 2px solid var(--dl-blue-700);
    outline-offset: 2px;
}

.dl-afmeld-knoppen {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: 1.3rem;
}

@media (max-width: 560px) {
    .dl-afmeld-knoppen .btn { flex: 1 1 100%; }
}

.dl-afmeld-noot {
    margin: 1.2rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--line-soft);
    font-size: .84rem;
    line-height: 1.55;
    color: var(--ink-faint);
}


/* -- De foutpagina -----------------------------------------------------
   Dezelfde onderdelen als elke andere pagina: de donkere kop, de wijzer
   erover heen en een lichte band eronder. Een foutpagina die er anders
   uitziet dan de rest van de site laat de bezoeker twijfelen of hij nog
   wel bij ons is, en dat is precies het verkeerde moment daarvoor.

   Wat hier staat is dus klein: het regeltje met de code, de toelichting
   bij de fout, en het vak eronder dat op de 404 een zoekveld bevat en op
   de andere statussen twee kaarten.
   -------------------------------------------------------------------- */

/* De code boven de kop. Klein, en zonder de gespatieerde hoofdletters die
   overal elders op het web boven zo een kop staan: het is een nummer dat
   je doorgeeft als je belt, geen opschrift. */
.dl-fout-code {
    margin: 0 0 .45rem;
    font-size: .84rem;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, .55);
}

/* De toelichting die bij deze ene fout hoort, tussen de kop en de uitleg.
   Lichter dan de kop maar witter dan de lead, want hij is concreter dan
   allebei: hier staat welk artikel er niet meer is. */
.dl-fout-detail {
    margin: .85rem 0 0;
    padding-left: .9rem;
    border-left: 3px solid var(--dl-blue-500);
    max-width: 52ch;
    font-size: clamp(1rem, .95rem + .25vw, 1.08rem);
    font-weight: 600;
    line-height: 1.5;
    color: #ffffff;
}

/* De band begint tegen de kop aan. De wijzer erin trekt zichzelf al omhoog
   met een negatieve marge; zou de band daar ook nog ruimte boven zetten,
   dan zakt de wijzer van de naad af en staat hij als los vak op het
   lichte vlak. De ruimte die eraf gaat komt terug onder de wijzer. */
.dl-band-licht.dl-fout-band {
    padding-top: 0;

    /* En de band moet de marge van de wijzer binnenhouden. Zonder dit valt
       die negatieve marge door de band heen naar buiten - marges van een
       eerste kind lopen samen met die van hun ouder als er geen vulling of
       rand tussen zit - en dan zakt niet de wijzer omhoog maar de hele band,
       met de wijzer plat tegen de naad. */
    display: flow-root;
}

/* Het vak onder de wijzer. Twee gelijke kaarten, behalve op de 404: daar
   is de linkerkolom een zoekveld met tips en de rechter een lijst met
   productgroepen, en die lijst heeft de ruimte nodig omdat hij in twee
   kolommen staat. */
.dl-fout-verder {
    margin-top: clamp(1.5rem, 1.2rem + 1.2vw, 2.5rem);
    display: grid;
    gap: clamp(1.25rem, 1rem + 1.5vw, 2.5rem);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
}

.dl-fout-verder.is-zoek { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); }

@media (max-width: 860px) {
    .dl-fout-verder,
    .dl-fout-verder.is-zoek { grid-template-columns: minmax(0, 1fr); }
}

/* Het zoekveld in de kaart. Het lijkt op dat in de koptekst maar het is het
   niet: daar ligt de knop in een eigen laagje over het veld heen, en dat
   laagje hoort bij de koptekst. Vandaar hier een eigen, complete opmaak in
   plaats van de klasse van daarboven lenen - geleend was de knop naast het
   veld beland in plaats van erin. */
.dl-fout-zoek {
    position: relative;
    display: block;
    margin-bottom: 1.1rem;
}

.dl-fout-zoek input {
    width: 100%;
    height: 48px;
    padding: 0 5.6rem 0 2.6rem;
    border: 1px solid var(--line);
    border-radius: var(--dl-r-btn);
    background: #ffffff;
    font: inherit;
    font-size: .94rem;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, .05);
    transition: border-color .18s ease, box-shadow .18s ease;
}

.dl-fout-zoek input::placeholder { color: var(--ink-faint); }
.dl-fout-zoek input:hover { border-color: color-mix(in srgb, var(--dl-blue-700) 30%, transparent); }

.dl-fout-zoek input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft);
}

.dl-fout-zoek .dl-search-icon {
    position: absolute;
    left: .95rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-faint);
    line-height: 0;
    pointer-events: none;
}

.dl-fout-zoek:focus-within .dl-search-icon { color: var(--accent); }

/* In het veld en niet ernaast: rechts binnen de rand, verticaal gemiddeld. */
.dl-fout-zoek button {
    position: absolute;
    right: .4rem;
    top: 50%;
    transform: translateY(-50%);

    display: inline-flex;
    align-items: center;
    height: 2.25rem;
    padding-inline: 1.15rem;
    border: 0;
    border-radius: var(--dl-r-btn);
    background: var(--accent);
    color: #ffffff;
    font: inherit;
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .14s ease;
}

.dl-fout-zoek button:hover { background: var(--accent-hover); }
.dl-fout-zoek button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

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

/* Een bolletje dat meeschaalt met de regel en niet de standaardopsomming:
   die zet zijn punt buiten de kaart als de regel over twee regels loopt. */
.dl-fout-lijst li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .55rem;
    font-size: .92rem;
    line-height: 1.55;
    color: var(--ink-soft);
}

.dl-fout-lijst li::before {
    content: "";
    width: 7px;
    height: 7px;
    margin-top: .5em;
    border-radius: min(50%, var(--dl-r-max));
    background: var(--dl-blue-300);
}

.dl-fout-slot {
    margin: 1.1rem 0 .8rem;
    padding-top: .9rem;
    border-top: 1px solid var(--line-soft);
    font-size: .89rem;
    color: var(--ink-faint);
}

.dl-fout-tekst {
    margin: 0 0 1rem;
    font-size: .92rem;
    line-height: 1.6;
    color: var(--ink-soft);
}

.dl-fout-knoppen {
    display: grid;
    gap: .5rem;
}

.dl-fout-knoppen .btn svg { flex: none; }


/* -- Mijn gegevens ------------------------------------------------------
   Het scherm van het portaal: de donkere kop, drie tegels over de naad en
   eronder kaarten in twee kolommen. Links wat over u gaat, rechts het
   wachtwoord. Op een tablet en een telefoon onder elkaar.
   -------------------------------------------------------------------- */

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

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

.dl-acc-kolom {
    display: grid;
    gap: clamp(1rem, .85rem + .8vw, 1.75rem);
    align-content: start;
    min-width: 0;
}

.dl-acc-vlakken > *,
.dl-acc-kolom > * { min-width: 0; }

/* Een link naar #wachtwoord of #gegevens komt uit onder de koptekst, en niet
   erachter. */
.dl-acc-kaart { scroll-margin-top: 8rem; }

.dl-acc-kaart form > .btn:last-child { margin-top: .35rem; }

/* Een veld dat er staat maar niet te wijzigen is. Grijs, zodat het niet
   uitnodigt om erin te tikken. */
.field input[readonly] {
    background: var(--surface-alt);
    color: var(--ink-soft);
    cursor: default;
}

.field input[readonly]:focus {
    border-color: var(--line);
    box-shadow: none;
}

.dl-acc-vergeten {
    display: inline-block;
    margin-top: .85rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--accent);
}

/* Een aanvraag die wacht: een gele strook boven het formulier, met wat er
   verandert en een knop om hem in te trekken. Geel zoals "Open" bij de
   bestellingen: er moet nog iets gebeuren, maar niet door u. */
.dl-acc-wacht {
    margin: 0 0 1.25rem;
    padding: .85rem 1rem;
    border: 1px solid #fde68a;
    border-radius: var(--radius);
    background: #fffbeb;
}

.dl-acc-wacht-kop {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    margin: 0;
    font-size: .84rem;
    color: #92400e;
}

.dl-acc-wacht-kop svg { flex: none; margin-top: .15rem; }

.dl-acc-wacht-kop strong {
    display: block;
    font-size: .92rem;
    font-weight: 700;
    color: #78350f;
}

.dl-acc-wacht-lijst {
    display: grid;
    gap: .4rem;
    margin: .75rem 0 0;
    padding: .7rem .85rem;
    border-radius: calc(var(--radius) - 4px);
    background: #ffffff;
}

.dl-acc-wacht-lijst > div {
    display: grid;
    grid-template-columns: 8.5rem minmax(0, 1fr);
    gap: 1rem;
}

.dl-acc-wacht-lijst dt {
    font-size: .82rem;
    font-weight: 600;
    color: var(--ink-faint);
}

.dl-acc-wacht-lijst dd {
    margin: 0;
    font-size: .88rem;
    font-weight: 600;
    color: var(--ink);
    overflow-wrap: anywhere;
}

@media (max-width: 480px) {
    .dl-acc-wacht-lijst > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

.dl-acc-wacht-voet {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .6rem 1rem;
    margin-top: .75rem;
}

.dl-acc-wacht-voet p {
    flex: 1 1 16rem;
    margin: 0;
    font-size: .82rem;
    line-height: 1.5;
    color: #92400e;
}

/* Wat er met de laatste aanvraag is gebeurd: een gewone melding uit
   partials/melding, bovenaan de kaart. Alleen de ruimte is van hier. */
.dl-acc-besluit { margin: 0 0 1.25rem; }
.dl-acc-besluit > .dl-melding.is-inline { margin: 0; }

/* Wachtwoord vergeten, na het versturen: de knop terug onder de melding. */
.dl-herstel-terug { margin-top: 1rem; }

/* Het formulier in drie groepen: contact, bedrijf en adres. Een kleine kop
   met een haarlijn erachter, zodat het een formulier blijft en niet drie. */
.dl-acc-groep {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 1.4rem 0 .8rem;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--dl-blue-900);
}

.dl-acc-groep::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line-soft);
}

.dl-acc-form > .dl-acc-groep:first-of-type { margin-top: 0; }

.dl-acc-groep span {
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: none;
    color: var(--ink-faint);
}

/* Straat breed en huisnummer smal, postcode smal en plaats breed. Op een
   telefoon onder elkaar: "Huisnummer" past daar niet in een kwart. */
.field-row.dl-acc-rij-straat { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); }
.field-row.dl-acc-rij-plaats { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }

@media (max-width: 480px) {
    .field-row.dl-acc-rij-straat,
    .field-row.dl-acc-rij-plaats { grid-template-columns: minmax(0, 1fr); }
}

.dl-acc-verstuur {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1.1rem;
    margin-top: .35rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line-soft);
}

.dl-acc-verstuur p {
    flex: 1 1 14rem;
    margin: 0;
    font-size: .82rem;
    line-height: 1.5;
    color: var(--ink-faint);
}

/* Afleveradressen: per adres de naam, het adres en de knoppen. Wijzigen en
   een nieuw adres klappen uit; na een fout staat dat blok open. */
.dl-adres-uitleg,
.dl-adres-leeg {
    margin: 0 0 .9rem;
    font-size: .88rem;
    line-height: 1.55;
    color: var(--ink-soft);
}

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

/* Wijzigen en de knoppen op één regel, Wijzigen voorop; staat Wijzigen
   open, dan krijgt het formulier de hele breedte. */
.dl-adres {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: .9rem;
    padding: .85rem .95rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #ffffff;
}

.dl-adres > .dl-adres-kop,
.dl-adres > .dl-adres-regels { flex-basis: 100%; }

.dl-adres > .dl-adres-wijzig { order: 1; }
.dl-adres > .dl-adres-knoppen { order: 2; }
.dl-adres > .dl-adres-wijzig[open] { flex-basis: 100%; }

.dl-adres.is-standaard { border-color: color-mix(in srgb, var(--dl-blue-700) 35%, transparent); background: var(--accent-soft); }

.dl-adres-kop { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; }
.dl-adres-kop strong { font-size: .95rem; color: var(--ink); }

.dl-adres-merk {
    padding: .12rem .5rem;
    border-radius: min(999px, var(--dl-r-max));
    background: var(--dl-blue-700);
    font-size: .7rem;
    font-weight: 600;
    color: #ffffff;
}

.dl-adres-regels { margin: .35rem 0 0; font-size: .88rem; line-height: 1.55; color: var(--ink-soft); }
.dl-adres-tel { color: var(--ink-faint); }

.dl-adres-knoppen { display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin-top: .55rem; }
.dl-adres-knoppen form { margin: 0; }

.dl-adres-knop,
.dl-adres-wijzig > summary {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: .84rem;
    font-weight: 600;
    color: var(--accent);
    cursor: pointer;
}

.dl-adres-knop.is-weg { color: var(--ink-faint); }
.dl-adres-knop:hover,
.dl-adres-wijzig > summary:hover { text-decoration: underline; }

.dl-adres-wijzig { margin-top: .55rem; }
.dl-adres-wijzig > summary { display: inline-block; list-style: none; }
.dl-adres-wijzig > summary::-webkit-details-marker { display: none; }
.dl-adres-wijzig[open] > summary { margin-bottom: .8rem; }

.dl-adres-nieuw > summary { list-style: none; }
.dl-adres-nieuw > summary::-webkit-details-marker { display: none; }
.dl-adres-nieuw[open] > summary { margin-bottom: 1rem; }

.dl-adres-vink {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: .2rem 0 .4rem;
    font-size: .88rem;
    color: var(--ink);
    cursor: pointer;
}

.dl-adres-vink input { width: 17px; height: 17px; accent-color: var(--dl-blue-700); }

/* Privacy: per recht wat het is en hoe het ervoor staat, met de knop ernaast.
   In de smalle kolom past dat niet naast elkaar; dan de knop eronder. */
.dl-acc-intro {
    margin: 0 0 .35rem;
    font-size: .88rem;
    line-height: 1.55;
    color: var(--ink-soft);
}

.dl-acc-recht {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .7rem 1.25rem;
    padding: .95rem 0;
    border-top: 1px solid var(--line-soft);
}

.dl-acc-recht:last-child { padding-bottom: 0; }

.dl-acc-recht-tekst { flex: 1 1 20rem; min-width: 0; }

.dl-acc-recht h3 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem .5rem;
    margin: 0 0 .2rem;
    font-size: .92rem;
    font-weight: 700;
    color: var(--ink);
}

.dl-acc-recht p {
    margin: 0;
    font-size: .85rem;
    line-height: 1.5;
    color: var(--ink-soft);
    overflow-wrap: anywhere;
}

.dl-acc-recht .btn svg { flex: none; }


/* -- De retourverzoeken ------------------------------------------------
   In de opbouw van Mijn bestellingen: de donkere kop met de drie stappen
   eroverheen, en daaronder over de volle breedte een retour aanmelden en wat
   er al is aangevraagd. De bestellingen om uit te kiezen zijn tegels die je
   aantikt, niet een tabel: op een telefoon moet het nummer, de datum en het
   merkje er nog steeds in passen.
   -------------------------------------------------------------------- */

/* De stappen zijn een genummerde lijst, voor wie de pagina voorgelezen
   krijgt; het nummer staat er al in de tegel zelf. */
.dl-retour-stappen {
    padding: 0;
    list-style: none;
}

.dl-retour-stappen .dl-bestcijfer-bij { line-height: 1.55; }

/* Op een telefoon onder elkaar en niet twee plus één: een stap is een zin,
   en die past niet in een halve tegel van honderdzeventig pixels. Het nummer
   en de naam dan op één regel, anders staan er vierhonderd pixels aan uitleg
   voordat de klant een bestelling kan kiezen. */
@media (max-width: 640px) {
    .dl-retour-stappen.dl-bestcijfers:not(.is-vier) { grid-template-columns: minmax(0, 1fr); }

    .dl-retour-stappen.dl-bestcijfers:not(.is-vier) > .dl-bestcijfer {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        column-gap: .65rem;
        border-right: 0;
        padding: .8rem 1rem .9rem;
    }

    .dl-retour-stappen .dl-bestcijfer-kop { margin: 0; }

    .dl-retour-stappen .dl-bestcijfer-bij { grid-column: 1 / -1; }
}

/* De telling naast de titel past op een telefoon niet; dan breekt de titel
   in tweeën. Hoeveel het er zijn, staat er dan toch onder. */
@media (max-width: 480px) {
    .dl-retour-kaart .dl-best-kop-bij { display: none; }
}

.dl-retour-pagina {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1rem, .85rem + .8vw, 1.75rem);
    padding-bottom: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem);
}

/* Een link naar #aanmelden of #verzoeken komt uit onder de koptekst, en niet
   erachter. */
.dl-retour-kaart { scroll-margin-top: 8rem; }

/* Een klein kopje boven een deel van een kaart, zoals de kop van een tegel. */
.dl-retour-label {
    margin: 0 0 .5rem;
    padding: 0;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.dl-retour-uitleg {
    margin: 0 0 .9rem;
    font-size: .9rem;
    line-height: 1.55;
    color: var(--ink-soft);
}

/* Nog niets om te retourneren: zoals een lege winkelwagen, kleiner. */
.dl-retour-leeg {
    display: grid;
    justify-items: center;
    padding: clamp(.75rem, .5rem + 1vw, 1.5rem) 1rem;
    text-align: center;
}

.dl-retour-leeg h3 {
    margin: 0 0 .4rem;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--dl-blue-900);
}

.dl-retour-leeg p {
    max-width: 46ch;
    margin: 0 0 1.1rem;
    font-size: .9rem;
    line-height: 1.6;
    color: var(--ink-soft);
}

/* -- Een bestelling kiezen -- */

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

.dl-retour-keuze > li {
    display: flex;
    min-width: 0;
}

.dl-retour-order {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .2rem;
    width: 100%;
    padding: .9rem 1rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    text-decoration: none;
    transition: border-color .14s ease, box-shadow .14s ease;
}

a.dl-retour-order:hover {
    border-color: var(--accent);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--dl-blue-950) 12%, transparent);
    text-decoration: none;
}

a.dl-retour-order:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Met een verzoek dat nog loopt: geen link, en dat is te zien. */
.dl-retour-order.is-uit {
    border-style: dashed;
    background: var(--surface-alt);
    color: var(--ink-soft);
}

.dl-retour-order-kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    width: 100%;
    margin-bottom: .1rem;
}

.dl-retour-order-nr {
    min-width: 0;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
    color: var(--dl-blue-900);
    overflow-wrap: anywhere;
}

.dl-retour-order.is-uit .dl-retour-order-nr { color: var(--ink-soft); }

.dl-retour-order-pijl {
    display: grid;
    place-items: center;
    flex: none;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: min(999px, var(--dl-r-max));
    background: var(--accent-soft);
    color: var(--accent);
    transition: background-color .14s ease, color .14s ease;
}

a.dl-retour-order:hover .dl-retour-order-pijl {
    background: var(--accent);
    color: var(--accent-text);
}

.dl-retour-order-datum {
    font-size: .85rem;
    color: var(--ink-soft);
}

.dl-retour-order-bij {
    margin-bottom: .6rem;
    font-size: .8rem;
    color: var(--ink-faint);
    overflow-wrap: anywhere;
}

/* Het merkje onderaan, zodat de merkjes van tegels naast elkaar op één lijn
   staan, ook als de referentie in de ene tegel over twee regels loopt. */
.dl-retour-order .dl-dash-merk { margin-top: auto; }

/* De oudere bestellingen achter een klik: met tientallen afgeronde
   bestellingen gaat het bijna altijd om een van de nieuwste. */
.dl-retour-ouder { margin-top: .85rem; }

.dl-retour-ouder > summary {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .86rem;
    font-weight: 600;
    color: var(--accent);
    cursor: pointer;
    list-style: none;
}

.dl-retour-ouder > summary::-webkit-details-marker { display: none; }

.dl-retour-ouder > summary::after {
    content: "";
    width: .42rem;
    height: .42rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .14s ease;
}

.dl-retour-ouder[open] > summary::after { transform: translateY(1px) rotate(-135deg); }

.dl-retour-ouder > summary:hover { text-decoration: underline; }

.dl-retour-ouder > .dl-retour-keuze { margin-top: .85rem; }

.dl-retour-meer {
    margin: 1rem 0 0;
    font-size: .84rem;
    color: var(--ink-soft);
}

.dl-retour-meer a { font-weight: 600; color: var(--accent); }

/* -- De gekozen bestelling -- */

/* Boven het formulier, met de weg terug ernaast: een licht vlak, zodat het
   leest als "hierover gaat het" en niet als nog een veld. */
.dl-retour-gekozen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1rem;
    margin: 0 0 1.1rem;
    padding: .85rem 1rem;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    background: var(--surface-alt);
}

.dl-retour-gekozen-tekst { min-width: 0; }

.dl-retour-gekozen .dl-retour-label { margin-bottom: .15rem; }

.dl-retour-gekozen-nr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .6rem;
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--dl-blue-900);
}

.dl-retour-gekozen-bij {
    margin: .2rem 0 0;
    font-size: .84rem;
    color: var(--ink-soft);
}

/* Na de termijn: dat het buiten het beleid valt, en toch kan. */
.dl-retour-let {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    margin: 0 0 1.1rem;
    padding: .7rem .85rem;
    border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--warn) 8%, transparent);
    font-size: .87rem;
    line-height: 1.5;
    color: var(--ink);
}

.dl-retour-let svg {
    flex: none;
    margin-top: .15rem;
    color: var(--warn);
}

/* -- Het formulier -- */

/* Per artikel de naam links en het aantal rechts, als een tabel met een kop,
   zodat te zien is waar het aantal voor is. */
.dl-retour-regels {
    min-width: 0;
    margin: 0 0 1.35rem;
    padding: 0;
    border: 0;
}

.dl-retour-regels > .error {
    margin: 0 0 .5rem;
    font-size: .83rem;
    color: var(--danger);
}

.dl-retour-regels-kop,
.dl-retour-regel {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem 1rem;
    padding: .7rem .9rem;
}

.dl-retour-regels-kop {
    padding-block: .5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius) var(--radius) 0 0;
    background: var(--surface-alt);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

/* Even breed als het vakje met "van 6" erachter, zie .dl-retour-aantal. */
.dl-retour-regels-kop span:last-child { width: 10rem; }

.dl-retour-regel {
    border: 1px solid var(--line);
    border-top: 0;
}

.dl-retour-regel:last-child { border-radius: 0 0 var(--radius) var(--radius); }

/* Niets ingevuld: de rand van de tabel in de kleur van een fout, zoals een
   veld. */
.dl-retour-regels.is-invalid .dl-retour-regels-kop,
.dl-retour-regels.is-invalid .dl-retour-regel { border-color: color-mix(in srgb, var(--danger) 45%, transparent); }

.dl-retour-regel.is-uit .dl-retour-regel-naam { color: var(--ink-soft); }

.dl-retour-regel-tekst {
    display: grid;
    flex: 1 1 auto;
    min-width: 0;
    padding-top: .45rem;
}

.dl-retour-regel-naam {
    font-size: .89rem;
    font-weight: 600;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.dl-retour-regel-bij {
    margin-top: .1rem;
    font-size: .8rem;
    color: var(--ink-faint);
}

/* Een vaste breedte voor "van 6" en "al gemeld", zodat de vakjes onder elkaar
   recht staan, hoeveel cijfers er ook achter staan. */
.field.dl-retour-aantal {
    display: grid;
    grid-template-columns: 5.25rem 4.25rem;
    align-items: center;
    column-gap: .5rem;
    flex: none;
    margin: 0;
}

.field.dl-retour-aantal input { text-align: right; font-variant-numeric: tabular-nums; }

.field.dl-retour-aantal input:disabled { background: var(--surface-alt); color: var(--ink-faint); }

.dl-retour-van {
    font-size: .8rem;
    color: var(--ink-faint);
    white-space: nowrap;
}

.field.dl-retour-aantal .error {
    grid-column: 1 / -1;
    max-width: 11rem;
}

.dl-retour-form textarea { min-height: 6.5rem; }

/* Op een telefoon het aantal onder de naam, naast de foto, en in de kop
   alleen "Artikel": een tweede kolom is er dan niet. */
@media (max-width: 480px) {
    .dl-retour-regel {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: .5rem .75rem;
    }

    .dl-retour-regel-tekst { padding-top: 0; }
    .dl-retour-regel > .field.dl-retour-aantal { grid-column: 2; }
    .dl-retour-regels-kop span:last-child { display: none; }
}

/* Reden en foto's naast elkaar, de toelichting eronder over de hele breedte. */
.dl-retour-velden {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.25rem;
}

.dl-retour-velden > .is-breed { grid-column: 1 / -1; }

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

/* De knop rechts, met ervoor wat er na het aanvragen gebeurt. */
.dl-retour-verstuur {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1.25rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--line-soft);
}

.dl-retour-verstuur p {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    flex: 1 1 18rem;
    margin: 0;
    font-size: .84rem;
    line-height: 1.5;
    color: var(--ink-soft);
}

.dl-retour-verstuur p svg {
    flex: none;
    margin-top: .15rem;
    color: var(--accent);
}

@media (max-width: 480px) {
    .dl-retour-verstuur .btn { width: 100%; justify-content: center; }
}

/* -- De verzoeken -- */

.dl-retour-lijst .dl-kaart-in {
    display: grid;
    gap: .9rem;
}

/* Een verzoek is een blok met een kop en twee helften: links wat er terug
   gaat, rechts wat de klant nu moet doen. Dat tweede is waar hij voor komt,
   dus dat staat in een eigen vlak. */
.dl-retour-verzoek {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}

.dl-retour-verzoek-kop {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    padding: .95rem 1.1rem;
    border-bottom: 1px solid var(--line-soft);
}

.dl-retour-verzoek-titel {
    flex: 1 1 18rem;
    min-width: 0;
}

.dl-retour-verzoek h3 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem .6rem;
    margin: 0 0 .2rem;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--dl-blue-900);
}

.dl-retour-verzoek-bij {
    margin: 0;
    font-size: .85rem;
    line-height: 1.5;
    color: var(--ink-soft);
}

.dl-retour-verzoek-bij a { font-weight: 600; color: var(--accent); }

/* De stappen van dit verzoek, naast de titel: de balk van een bestelling,
   kleiner en op wit. Afgelegd en waar het nu staat in de kleur van het merk. */
.dl-bestelbalk.dl-retour-balk {
    --dl-bol: 26px;
    flex: 0 1 24rem;
    min-width: min(100%, 17rem);
}

.dl-retour-balk .dl-bestelbalk-stap > span { gap: .35rem; }

.dl-retour-balk .dl-bestelbalk-teken { font-size: .74rem; }

.dl-retour-balk .dl-bestelbalk-tekst strong {
    font-size: .76rem;
    font-weight: 600;
    color: var(--ink-faint);
}

.dl-retour-balk .dl-bestelbalk-stap.is-bereikt .dl-bestelbalk-tekst strong { color: var(--ink); }

.dl-retour-balk .dl-bestelbalk-stap.is-bereikt:not(:first-child)::before { background: var(--dl-blue-700); }

.dl-retour-balk .dl-bestelbalk-stap.is-klaar .dl-bestelbalk-teken,
.dl-retour-balk .dl-bestelbalk-stap.is-nu .dl-bestelbalk-teken {
    border-color: var(--dl-blue-700);
    background: var(--dl-blue-700);
    color: #ffffff;
}

.dl-retour-balk .dl-bestelbalk-stap.is-nu .dl-bestelbalk-teken {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--dl-blue-700) 16%, transparent);
}

.dl-retour-verzoek-lijf {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dl-retour-verzoek-wat,
.dl-retour-verzoek-nu {
    min-width: 0;
    padding: .95rem 1.1rem 1.1rem;
}

.dl-retour-verzoek-nu {
    border-left: 1px solid var(--line-soft);
    border-radius: 0 0 var(--radius) 0;
    background: var(--surface-alt);
}

/* Goedgekeurd: nu moet de klant iets doen, dus dat vlak licht op. */
.dl-retour-verzoek-nu.is-bezig { background: var(--accent-soft); }

@media (max-width: 760px) {
    .dl-retour-verzoek-lijf { grid-template-columns: minmax(0, 1fr); }

    .dl-retour-verzoek-nu {
        border-top: 1px solid var(--line-soft);
        border-left: 0;
        border-radius: 0 0 var(--radius) var(--radius);
    }
}

.dl-retour-verzoek-stand {
    margin: 0;
    font-size: .9rem;
    line-height: 1.55;
    color: var(--ink);
}

.dl-retour-verzoek-stand strong {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.dl-retour-adres {
    margin: .65rem 0 0;
    padding: .7rem .85rem;
    border: 1px solid var(--line);
    border-radius: min(8px, var(--dl-r-max));
    background: var(--surface);
    font-size: .88rem;
    font-style: normal;
    line-height: 1.6;
    color: var(--ink-soft);
}

.dl-retour-adres strong { color: var(--ink); }

/* Het bericht van de klantenservice staat hier op het grijze vlak, dus wit. */
.dl-retour-verzoek-nu .dl-retour-verzoek-bericht {
    margin-top: .75rem;
    background: var(--surface);
}

.dl-retour-intrekken { margin-top: .85rem; }

/* De artikelen bij een retour in het beheer, met het aantal ervoor. */
.dl-retour-verzoek-regels {
    display: grid;
    gap: .15rem;
    margin: .45rem 0;
    padding: 0;
    list-style: none;
    font-size: .85rem;
    color: var(--ink);
}

.dl-retour-verzoek-regels span {
    display: inline-block;
    min-width: 2.2rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* De artikelen bij een verzoek van de klant: per artikel de foto, het aantal
   en de naam, als rijen met een haarlijn, zoals de regels van een
   bestelling. */
.dl-retour-artikelen {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dl-retour-artikelen li {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem 0;
    border-top: 1px solid var(--line-soft);
    font-size: .88rem;
    color: var(--ink);
}

.dl-retour-artikelen li:first-child {
    padding-top: 0;
    border-top: 0;
}

.dl-retour-artikelen li:last-child { padding-bottom: 0; }

.dl-retour-artikel-tekst {
    min-width: 0;
    overflow-wrap: anywhere;
}

.dl-retour-artikel-tekst strong {
    margin-right: .2rem;
    font-variant-numeric: tabular-nums;
}

.dl-retour-label.dl-retour-label-fotos { margin-top: .95rem; }

.dl-retour-verzoek-wat .dl-retour-fotos { margin: 0; }

/* De foto van een artikel, klein: een wit vlakje met de hele foto erin. Niet
   uitgesneden, want een productfoto staat op wit en de vorm van het artikel
   is waar de klant het aan herkent. Zonder foto hetzelfde vlakje, gestippeld
   en met een doos, zodat de namen ernaast recht onder elkaar blijven. */
.dl-retour-beeld {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--line);
    border-radius: min(8px, var(--dl-r-max));
    background: var(--surface);
    color: var(--ink-faint);
    overflow: hidden;
}

.dl-retour-beeld img {
    display: block;
    width: 100%;
    height: 100%;
    padding: 3px;
    object-fit: contain;
}

a.dl-retour-beeld {
    cursor: zoom-in;
    transition: border-color .14s ease;
}

a.dl-retour-beeld:hover { border-color: var(--accent); }

a.dl-retour-beeld:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.dl-retour-beeld.is-leeg {
    border-style: dashed;
    background: var(--surface-alt);
}

/* Een foto die de klant meestuurde, vergroot ook in PhotoSwipe. */
.dl-retour-fotos a[data-pswp-width] { cursor: zoom-in; }

/* De foto's bij een verzoek: kleine vierkantjes op een rij, bij de klant en
   in het beheer. Uitgesneden en niet vervormd, want een foto van een kraan is
   zelden vierkant. */
.dl-retour-fotos {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: .5rem 0;
    padding: 0;
    list-style: none;
}

.dl-retour-fotos a {
    display: block;
    border-radius: min(8px, var(--dl-r-max));
    overflow: hidden;
    outline-offset: 2px;
}

.dl-retour-fotos img {
    display: block;
    width: 56px;
    height: 56px;
    object-fit: cover;
    background: var(--surface-alt);
    transition: transform .16s ease;
}

.dl-retour-fotos a:hover img { transform: scale(1.06); }

/* Het woordje achter "Foto's" in het formulier: geen verplicht veld, maar
   wel waar het bij hoort. */
.dl-retour-bij-label {
    margin-left: .25rem;
    font-weight: 500;
    color: var(--ink-faint);
}

/* Foto's kiezen: een vak met een stippelrand, zodat het leest als "hier gaat
   iets in", met de knop van de browser in de vorm van onze knoppen. Even hoog
   als het veld Reden ernaast. */
.dl-retour-form input[type="file"] {
    width: 100%;
    padding: .3rem;
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    background: var(--surface-alt);
    font: inherit;
    font-size: .88rem;
    color: var(--ink-soft);
    cursor: pointer;
}

.dl-retour-form input[type="file"]::file-selector-button {
    margin-right: .75rem;
    padding: .4rem .9rem;
    border: 1px solid var(--line);
    border-radius: var(--dl-r-btn);
    background: #ffffff;
    font: inherit;
    font-weight: 600;
    color: var(--dl-blue-800);
    cursor: pointer;
}

.dl-retour-form input[type="file"]:hover::file-selector-button {
    border-color: var(--accent);
    color: var(--accent);
}

.dl-retour-form .field.is-invalid input[type="file"] { border-color: var(--danger); }


/* -- De winkelwagen ----------------------------------------------------
   Twee kolommen zoals de productpagina: de regels links, de optelling
   rechts en meelopend. Dezelfde kaarten als het dashboard, zodat het
   achter de inlog één geheel blijft.
   -------------------------------------------------------------------- */

.dl-mand-vlak { padding-block: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem); }

/* -- De lege mand -- */

.dl-mand-leeg .dl-kaart-in {
    display: grid;
    justify-items: center;
    padding: clamp(1.6rem, 1.2rem + 1.6vw, 2.5rem) 1.25rem;
    text-align: center;
}

.dl-mand-teken {
    display: grid;
    place-items: center;
    width: 3.4rem;
    height: 3.4rem;
    margin-bottom: .9rem;
    border-radius: min(16px, var(--dl-r-max));
    background: var(--accent-soft);
    color: var(--accent);
}

.dl-mand-leeg h2 {
    margin: 0 0 .5rem;
    font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem);
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--dl-blue-900);
}

.dl-mand-leeg p {
    max-width: 44ch;
    margin: 0 0 1.3rem;
    font-size: .93rem;
    line-height: 1.65;
    color: var(--ink-soft);
}

.dl-mand-knoppen {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6rem;
}

.dl-mand-knoppen .btn svg { flex: none; }

/* -- De gevulde mand -- */

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

.dl-mand-lijst {
    margin: 0;
    padding: 0 1rem;
    list-style: none;
    border-radius: 0 0 var(--radius) var(--radius);
    background: #ffffff;
}

/* Vijf kolommen: foto, wat het is, het aantal, de prullenbak en het bedrag.
   Het aantal krijgt geen fr maar zijn eigen breedte - een veld dat meerekt
   met de naam ernaast wordt op een breed scherm een tekstvak. */
.dl-mand-regel {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: .9rem;
    padding: .95rem 0;
    border-bottom: 1px solid var(--line-soft);
}

.dl-mand-regel:last-child { border-bottom: 0; }

.dl-mand-foto {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border: 1px solid var(--line-soft);
    border-radius: min(12px, var(--dl-r-max));
    background: var(--surface-alt);
    overflow: hidden;
}

.dl-mand-foto img { width: 100%; height: 100%; object-fit: contain; }

.dl-mand-wat { display: grid; gap: .12rem; min-width: 0; }

.dl-mand-naam {
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--dl-blue-900);
    text-decoration: none;
}

.dl-mand-naam:hover { color: var(--accent); }

.dl-mand-nummer {
    font-size: .8rem;
    color: var(--ink-faint);
}

.dl-mand-stuk {
    font-size: .86rem;
    color: var(--ink-soft);
}

.dl-mand-stuk span { color: var(--ink-faint); }

/* Hetzelfde bedrag, anders geteld. Op een eigen regel: naast elkaar worden het
   op een smal scherm twee bedragen die aan elkaar plakken. */
.dl-mand-btw {
    display: block;
    font-size: .82rem;
}
.dl-mand-stuk.is-let { color: #8a6400; }

/* Niet op voorraad, of minder dan er in de mand ligt: afrekenen gaat dan niet. */
.dl-mand-stuk.is-op {
    font-weight: 600;
    color: #b91c1c;
}

/* Dat er een afspraak op dit artikel ligt. Klein en in het merkblauw: het is
   een geruststelling en geen waarschuwing. */
.dl-mand-merk {
    justify-self: start;
    margin-top: .15rem;
    padding: .12rem .45rem;
    border-radius: min(999px, var(--dl-r-max));
    background: var(--accent-soft);
    font-size: .74rem;
    font-weight: 600;
    color: var(--accent);
}

.dl-mand-merk.is-hub {
    background: var(--dl-blue-100);
    color: var(--dl-blue-800);
}

/* De bestellingen die de Hub in deze winkelwagen zette, boven de regels. */
.dl-mand-hub { margin-bottom: clamp(1rem, .85rem + .8vw, 1.75rem); }

/* Bij het nakijken onder het kenmerk, in dezelfde kaart. */
.dl-mand-hub.is-kaal {
    margin: 1.1rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--line-soft);
}

.dl-mand-hub-titel {
    margin: 0 0 .35rem;
    font-size: .9rem;
    font-weight: 700;
    color: var(--ink);
}

.dl-mand-hub-uitleg {
    margin: 0 0 .75rem;
    font-size: .9rem;
    line-height: 1.55;
    color: var(--ink-soft);
}

.dl-mand-hub-bestelling + .dl-mand-hub-bestelling { border-top: 1px solid var(--line-soft); }

.dl-mand-hub-bestelling > summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem .75rem;
    padding: .55rem 0;
    cursor: pointer;
}

.dl-mand-hub-bestelling > summary span {
    font-size: .85rem;
    color: var(--ink-faint);
}

.dl-mand-hub-bestelling ul {
    display: grid;
    gap: .3rem;
    margin: 0 0 .7rem;
    padding: 0;
    list-style: none;
    font-size: .9rem;
}

.dl-mand-hub-bestelling li {
    display: flex;
    flex-wrap: wrap;
    gap: .2rem .6rem;
}

.dl-mand-hub-aantal {
    min-width: 2.2rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.dl-mand-hub-sku {
    font-size: .82rem;
    color: var(--ink-faint);
}

.dl-mand-doen {
    display: flex;
    align-items: center;
    gap: .4rem;
}

/* Het aantal en de knop ernaast in één omhulsel met één rand eromheen: twee
   losse randjes naast elkaar lezen als twee dingen. */
.dl-mand-aantal {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--line);
    border-radius: min(10px, var(--dl-r-max));
    background: #ffffff;
    overflow: hidden;
}

.dl-mand-aantal input {
    width: 4.2rem;
    padding: .45rem .5rem;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: .92rem;
    font-weight: 600;
    text-align: center;
    color: var(--ink);
}

.dl-mand-aantal input:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.dl-mand-bij {
    padding: .45rem .7rem;
    border: 0;
    border-left: 1px solid var(--line);
    background: var(--surface-alt);
    font: inherit;
    font-size: .8rem;
    font-weight: 600;
    color: var(--ink-soft);
    cursor: pointer;
}

.dl-mand-bij:hover { background: var(--accent-soft); color: var(--accent); }

/* Met de min en de plus is bijwerken geen aparte handeling meer: elke klik
   gaat meteen naar de server, en intikken net zo goed. */
.dl-js .dl-mand-bij { display: none; }

.dl-js .dl-mand-aantal input { width: 3.3rem; }

.dl-mand-weg {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--line);
    border-radius: min(10px, var(--dl-r-max));
    background: #ffffff;
    color: var(--ink-faint);
    cursor: pointer;
}

.dl-mand-weg:hover { border-color: rgba(220, 38, 38, .45); background: #fef2f2; color: #b91c1c; }

.dl-mand-regeltotaal {
    min-width: 5.5rem;
    font-size: 1rem;
    font-weight: 700;
    text-align: right;
    color: var(--dl-blue-900);
}

.dl-mand-onder {
    display: flex;
    justify-content: flex-end;
    padding: .9rem 1rem 1rem;
    border-top: 1px solid var(--line-soft);
    border-radius: 0 0 var(--radius) var(--radius);
    background: #ffffff;
}

/* Leegmaken is een handeling die je zelden wilt, dus hij staat er rustig bij:
   geen knop met een rand en geen streep onder de tekst, maar een grijze regel
   die pas bij het aanwijzen rood wordt. */
.dl-mand-schoon {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .6rem;
    border: 0;
    border-radius: min(8px, var(--dl-r-max));
    background: none;
    font: inherit;
    font-size: .84rem;
    color: var(--ink-faint);
    cursor: pointer;
    transition: background .14s ease, color .14s ease;
}

.dl-mand-schoon svg { flex: none; opacity: .75; }

.dl-mand-schoon:hover { background: #fef2f2; color: #b91c1c; }

/* -- De optelling -- */

.dl-mand-zij {
    display: grid;
    gap: .9rem;
    position: sticky;
    top: 1rem;
}

.dl-mand-tel-lijst {
    margin: 0 0 .9rem;
    display: grid;
    gap: .1rem;
}

.dl-mand-tel-lijst > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: .4rem 0;
    font-size: .92rem;
    color: var(--ink-soft);
}

.dl-mand-tel-lijst dt, .dl-mand-tel-lijst dd { margin: 0; }
.dl-mand-tel-lijst dd { font-weight: 600; color: var(--ink); }

.dl-mand-eind {
    margin-top: .25rem;
    padding-top: .7rem !important;
    border-top: 1px solid var(--line);
}

.dl-mand-eind dt { font-size: 1rem; font-weight: 700; color: var(--dl-blue-900); }

.dl-mand-eind dd {
    font-size: 1.3rem !important;
    font-weight: 800 !important;
    color: var(--dl-blue-900) !important;
}

.dl-mand-btwregel,
.dl-mand-note {
    margin: 0 0 .9rem;
    font-size: .84rem;
    line-height: 1.55;
    color: var(--ink-faint);
}

.dl-mand-note {
    padding-top: .85rem;
    border-top: 1px solid var(--line-soft);
}

.dl-mand-let {
    margin: 0 0 .9rem;
    font-size: .84rem;
    line-height: 1.55;
    color: #8a6400;
}

.dl-mand-acties { display: grid; gap: .5rem; }
.dl-mand-acties .btn svg { flex: none; }

@media (max-width: 900px) {
    .dl-mand-lijf { grid-template-columns: minmax(0, 1fr); }
    .dl-mand-zij { position: static; }
}

/* Op een telefoon past de regel niet op één lijn. Geen raster meer maar een
   rij die mag omvouwen: foto en naam boven, de bediening en het bedrag
   eronder. Met een raster hield de bediening de smalle kolom naast de foto,
   en daar paste hij niet in - het omhulsel van het veld heeft overflow:
   hidden, dus "Bijwerken" werd afgekapt tot "Bijwerke". */
@media (max-width: 620px) {
    .dl-mand-regel {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: .7rem .7rem;
    }

    .dl-mand-foto { width: 64px; height: 64px; }

    /* Naast de foto, en breed genoeg om de rest naar de volgende regel te
       duwen: 64 van de foto plus de tussenruimte. */
    .dl-mand-wat { flex: 1 1 calc(100% - 76px); }

    .dl-mand-doen { flex: none; gap: .35rem; }

    /* Het bedrag helemaal rechts op de tweede regel, waar het op een bon ook
       staat. */
    .dl-mand-regeltotaal {
        margin-left: auto;
        min-width: 0;
        font-size: .95rem;
    }

    .dl-mand-bij { padding: .45rem .55rem; font-size: .76rem; }
    .dl-mand-weg { width: 34px; height: 34px; }
}

/* Het veld mag niet meekrimpen. Zonder dit perst de flexregel hem op een
   telefoon tot twintig pixels, en dan is het aantal niet meer te lezen. */
.dl-mand-aantal input { flex: none; }

@media (max-width: 480px) {
    .dl-mand-knoppen { width: 100%; }
    .dl-mand-knoppen .btn { width: 100%; justify-content: center; }
}


/* -- Het dashboard van de klant ----------------------------------------
   Het eerste scherm na het inloggen. Geen kaart in het midden zoals de
   andere toegangsschermen: dit is geen formulier maar een overzicht, en dat
   mag de volle breedte hebben.

   De kop is de gewone donkere paginaband (.dl-kop.is-diep) met de cijfers
   eroverheen, zoals op Over ons en de foutpagina. Hiervoor stond hier een
   grijze regel met een blauwe naam op een bijna wit vlak; dat leest als een
   pagina die nog aan het laden is.
   -------------------------------------------------------------------- */

.dl-dash-kop {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.dl-dash-welkom {
    margin: 0 0 .35rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
}

.dl-dash-onder {
    margin: .7rem 0 0;
    font-size: .92rem;
    color: rgba(255, 255, 255, .72);
}

.dl-dash-kopknoppen {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.dl-dash-kop .btn { flex: none; }
.dl-dash-kop .btn svg { flex: none; }

/* De band begint waar de kop ophoudt; de cijferbalk hangt met zijn negatieve
   marge over de naad. Dezelfde constructie als .dl-fout-band: zonder
   flow-root loopt die marge door de band heen naar buiten en zakt niet de
   balk omhoog maar het hele vlak. */
.dl-band-licht.dl-dash-band {
    padding-top: 0;
    display: flow-root;
}


/* Eén kolom, geen twee. De tabel met openstaande bestellingen heeft vijf
   kolommen en is het enige waar een klant voor komt; die kreeg in een opzet
   van 6 om 4 minder ruimte dan het kaartje ernaast, en dan breekt een
   referentie als "Project Zonnehof fase 1" over drie regels. */
.dl-dash-vlakken {
    display: grid;
    gap: clamp(1rem, .85rem + .8vw, 1.75rem);
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    margin-bottom: clamp(1rem, .85rem + .8vw, 1.75rem);
}

/* De voet onder de openstaande bestellingen: in één zin wat er te betalen
   is, en de knop naar alles. Op een telefoon onder elkaar, met de knop over
   de volle breedte - daar is hij een duimdoel en geen regel tekst. */
.dl-dash-voet-tekst {
    margin: 0;
    font-size: .88rem;
    color: var(--ink-soft);
}

.dl-dash-voet-tekst strong {
    font-weight: 700;
    color: var(--ink);
}

.dl-dash-voet-laat {
    font-weight: 700;
    color: #b45309;
}

.dl-dash-voet-knoppen {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.dl-dash-voet-knop { gap: .45rem; }

.dl-dash-voet-knop svg {
    flex: none;
    transition: transform .14s ease;
}

.dl-dash-voet-knop:hover svg { transform: translateX(3px); }

@media (max-width: 560px) {
    .dl-dash-voet {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .dl-dash-voet-knoppen { flex-direction: column; }
    .dl-dash-voet-knop { justify-content: center; }
}

/* -- Tabellen in een kaart ---------------------------------------------
   Nummers en data links, bedragen rechts met tabelcijfers, zodat de komma's
   onder elkaar staan. Als losse regels met een bedrag erachter loopt een
   lijst met twaalf orders scheef zodra er één bedrag van vier cijfers
   tussen staat.
   -------------------------------------------------------------------- */

.dl-tabel {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

.dl-tabel th,
.dl-tabel td { padding: .55rem .5rem; text-align: left; vertical-align: top; }

.dl-tabel th:first-child,
.dl-tabel td:first-child { padding-left: 0; }

.dl-tabel th:last-child,
.dl-tabel td:last-child { padding-right: 0; }

.dl-tabel thead th {
    padding-top: 0;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--line);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-faint);
    white-space: nowrap;
}

.dl-tabel tbody th {
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--dl-blue-900);
    white-space: nowrap;
}

.dl-tabel tbody tr + tr th,
.dl-tabel tbody tr + tr td { border-top: 1px solid var(--line-soft); }

/* Bedragen: rechts, niet afbrekend, en met cijfers van gelijke breedte. */
.dl-tabel .is-getal {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.dl-tabel tbody td.is-getal { font-weight: 600; }

.dl-tabel-stil { color: var(--ink-soft); white-space: nowrap; }

.dl-tabel tfoot td {
    padding-top: .7rem;
    border-top: 1px solid var(--line);
    font-weight: 700;
}

.dl-tabel tfoot .is-getal {
    font-size: 1.05rem;
    letter-spacing: -.02em;
    color: var(--dl-blue-900);
}

.dl-tabel-bij {
    font-size: .78rem;
    font-weight: 500;
    color: var(--ink-faint);
}

/* De regel met een factuur die over de datum heen is. */
.dl-tabel tr.is-laat th,
.dl-tabel tr.is-laat td { color: #b45309; }

.dl-dash-laat {
    display: inline-block;
    margin-left: .35rem;
    padding: .05rem .4rem;
    border-radius: min(999px, var(--dl-r-max));
    background: #fef3c7;
    font-size: .7rem;
    font-weight: 700;
    color: #92400e;
}

/* De statuskolom krijgt wat overblijft; de rest is zo breed als hij moet
   zijn. max-width: 0 hoort erbij en is geen tikfout: zonder die regel rekent
   de browser de kolom op zijn volle inhoud uit en wordt de tabel breder dan
   de kaart - dan schuift op een telefoon de hele pagina opzij. */
.dl-tabel-lopend td:nth-child(3) { width: 99%; max-width: 0; }

.dl-tabel-lopend .dl-dash-merk + .dl-dash-merk { margin-left: .25rem; }

/* Een merkje mag afbreken. De statuskolom krijgt wat er overblijft, en op een
   telefoon of een smalle tablet is dat minder dan "Klaar om te verzenden"
   lang is; met nowrap liep het merkje tot negentig pixels over het bedrag
   ernaast heen, en op 560 pixels werd de hele pagina er breder van. */
.dl-tabel-lopend .dl-dash-merk {
    max-width: 100%;
    white-space: normal;
}

/* Tot een tablet onder elkaar, met een kleinere ronding voor het merkje dat
   toch afbreekt. Naast elkaar passen twee merkjes daar niet. */
@media (max-width: 600px) {
    .dl-tabel-lopend .dl-dash-merk {
        display: flex;
        width: fit-content;
        padding: .1rem .38rem;
        font-size: .66rem;
        line-height: 1.25;
        border-radius: min(8px, var(--dl-r-max));
    }

    .dl-tabel-lopend .dl-dash-merk + .dl-dash-merk { margin: .2rem 0 0; }

}

/* Een smalle tablet. Vijf kolommen met een referentie van zestien rem en een
   vervaldatum met "te laat" ernaast waren samen breder dan de kaart; op 560
   pixels schoof de hele pagina daardoor opzij. De besteldatum vervalt hier al
   (zie de regel bij 520 pixels), de referentie wordt korter afgekapt en "te
   laat" gaat onder de datum. */
@media (max-width: 640px) {
    .dl-tabel-lopend th:nth-child(2),
    .dl-tabel-lopend td:nth-child(2) { display: none; }

    .dl-tabel-lopend .dl-tabel-bij.is-blok { max-width: 9rem; }
}

/* En op een telefoon nog korter: anders eist de eerste kolom de ruimte op die
   de status nodig heeft om "Nog te betalen" op één regel te zetten. Staat na
   de regel hierboven, want die geldt hier ook en zou anders winnen. */
@media (max-width: 600px) {
    .dl-tabel-lopend .dl-tabel-bij.is-blok { max-width: 7rem; }
}

@media (max-width: 400px) {
    .dl-tabel-lopend .dl-tabel-bij.is-blok { max-width: 6.5rem; }
}

@media (max-width: 900px) {
    .dl-tabel-lopend .dl-dash-laat,
    .dl-tabel-best .dl-dash-laat {
        display: block;
        width: fit-content;
        margin: .2rem 0 0;
    }
}

/* Een tweede regeltje onder een cel: de referentie onder het ordernummer, of
   wat er van een bedrag nog openstaat. */
.dl-tabel-bij.is-blok {
    display: block;
    margin-top: .12rem;
    max-width: 16rem;
    font-weight: 500;

    /* Op één regel, en anders afgekapt. Wel afbreken zou de kolom smal houden
       en de referentie over drie regels verdelen, en dan staat er onder elk
       ordernummer een blokje tekst in plaats van een regel. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* -- Klikbare regels in een tabel ------------------------------------------
   De hele regel opent wat erachter zit, niet alleen de link erin. De link
   blijft de echte link - daar landt de tab en dat leest een schermlezer voor -
   en een klein script maakt de rest raak; zie klikregels in theme.js.

   De tabel steekt links en rechts een halve rem buiten zijn vak uit, met
   evenveel binnenruimte in de eerste en de laatste kolom. De tekst staat dus
   precies waar hij stond, maar de kleur onder de muis loopt een stukje
   voorbij de tekst door en houdt niet op tegen de eerste letter.
   ---------------------------------------------------------------------- */

.dl-tabel-klik {
    width: calc(100% + 1.2rem);
    margin-inline: -.6rem;
}

.dl-tabel-klik th:first-child,
.dl-tabel-klik td:first-child { padding-left: .6rem; }

.dl-tabel-klik th:last-child,
.dl-tabel-klik td:last-child { padding-right: .6rem; }

.dl-tabel-klik tbody tr > * { transition: background-color .12s ease; }

/* Alleen een handje als het script er is: zonder javascript is alleen het
   nummer een link, en dan belooft een handje op de rest iets wat niet komt. */
html.dl-js .dl-tabel-klik tbody tr[data-rij-link] { cursor: pointer; }

html.dl-js .dl-tabel-klik tbody tr[data-rij-link]:hover > *,
.dl-tabel-klik tbody tr:focus-within > * { background: color-mix(in srgb, var(--dl-blue-700) 6%, transparent); }

/* Het nummer licht mee op: daar gaat de regel heen. */
html.dl-js .dl-tabel-klik tbody tr[data-rij-link]:hover .dl-best-nr {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Op een aanraakscherm is er geen muis die kan zweven; daar licht de regel
   op zolang de vinger erop staat, zodat te zien is dat de tik aankwam. */
@media (hover: none) {
    html.dl-js .dl-tabel-klik tbody tr[data-rij-link]:active > * { background: color-mix(in srgb, var(--dl-blue-700) 10%, transparent); }
}

/* Op een smal scherm vervalt de datumkolom in de orderlijst: die staat ook
   in de lijst met alle bestellingen, en het bedrag en de status niet. */
@media (max-width: 520px) {
    /* Kleiner en krapper: op deze breedte moet een tabel van vier kolommen
       binnen 288 pixels passen, en dan telt elke pixel padding mee. */
    .dl-tabel { font-size: .82rem; }
    .dl-tabel th,
    .dl-tabel td { padding: .45rem .35rem; }

    .dl-dash-merk { padding: .1rem .4rem; font-size: .7rem; }

    /* De besteldatum vervalt: die staat ook in de lijst met alle
       bestellingen, en de status, de vervaldatum en het bedrag niet. */
    .dl-tabel-lopend th:nth-child(2),
    .dl-tabel-lopend td:nth-child(2) { display: none; }
}

/* Vijf kolommen passen niet altijd. Eerst vervalt de besteldatum (hierboven),
   daaronder ook de vervaldatum: die staat dan nog wel in de zin onder de
   tabel, en het merkje "Nog te betalen" blijft staan. */
@media (max-width: 480px) {
    .dl-tabel-lopend th:nth-child(4),
    .dl-tabel-lopend td:nth-child(4) { display: none; }
}

/* Onder de 360 pixels - een iPhone SE ligt er nog - moet er nog een slag af.
   Het statusmerkje en het bedrag onder elkaar in plaats van naast elkaar; de
   kolom met het bedrag blijft rechts staan. */
@media (max-width: 380px) {
    .dl-tabel { font-size: .78rem; }
    .dl-tabel th,
    .dl-tabel td { padding: .4rem .25rem; }

    /* De merkjes staan hier al onder elkaar; zie de regel bij 600 pixels. */
}

/* En "te laat" gaat onder de vervaldatum staan in plaats van ernaast; naast
   elkaar maakten die twee de kolom breder dan de kaart. */
@media (max-width: 480px) {
    .dl-tabel-open .dl-tabel-stil { white-space: normal; }

    .dl-dash-laat {
        display: block;
        width: fit-content;
        margin: .2rem 0 0;
    }
}

.dl-dash-leeg {
    margin: 0 0 .9rem;
    font-size: .92rem;
    color: var(--ink-soft);
}

/* -- Het merkje bij een status -- */

.dl-dash-merk {
    display: inline-flex;
    align-items: center;
    padding: .12rem .5rem;
    border-radius: min(999px, var(--dl-r-max));
    font-size: .74rem;
    font-weight: 600;
    white-space: nowrap;
}

.dl-dash-merk.is-bezig { background: var(--dl-blue-100); color: var(--dl-blue-700); }
.dl-dash-merk.is-klaar { background: #e7f6ec; color: #1d7a42; }
.dl-dash-merk.is-af    { background: var(--surface-alt); color: var(--ink-faint); }
.dl-dash-merk.is-open  { background: #fef3c7; color: #92400e; }
.dl-dash-merk.is-laat  { background: #ffedd5; color: #b45309; }

/* De snelkoppelingen: dezelfde vakken als de wijzer op een foutpagina, maar
   in een eigen raster omdat er hier vier naast elkaar staan. Ze staan tussen
   de tegels en de openstaande bestellingen, dus met lucht eronder. */
.dl-dash-snel {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
    margin-bottom: clamp(1rem, .85rem + .8vw, 1.75rem);
}

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

.dl-dash-snel a {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "teken kop" "teken bij";
    gap: .05rem .7rem;
    align-content: center;

    padding: .9rem 1rem;
    border-radius: var(--radius);
    background: #ffffff;
    box-shadow: var(--shadow-sm);
    color: var(--ink);
    text-decoration: none;
    transition: box-shadow .14s ease, transform .14s ease;
}

.dl-dash-snel a:hover {
    text-decoration: none;
    box-shadow: 0 10px 26px rgba(2, 6, 23, .12);
}

.dl-dash-snel a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.dl-dash-snel-teken {
    grid-area: teken;
    display: grid;
    place-items: center;
    align-self: center;
    width: 38px;
    height: 38px;
    border-radius: min(10px, var(--dl-r-max));
    background: var(--dl-blue-100);
    color: var(--dl-blue-700);
}

.dl-dash-snel-kop {
    grid-area: kop;
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: -.01em;
}

.dl-dash-snel-bij {
    grid-area: bij;
    font-size: .8rem;
    color: var(--ink-faint);
}

/* Op een telefoon twee bij twee, met het teken naast het woord en zonder de
   uitleg eronder. Onder elkaar waren het vier vakken van zeventig pixels, en
   die duwden de openstaande bestellingen bijna een halve telefoon naar
   beneden. Vier op een rij paste ook niet: dan brak "Bestellingen" op 375
   pixels midden in het woord af. Twee bij twee is net zo laag en blijft
   leesbaar; het teken en het woord zeggen waar het heen gaat. */
@media (max-width: 560px) {
    .dl-dash-snel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .5rem;
    }

    .dl-dash-snel a {
        grid-template-areas: "teken kop";
        align-items: center;
        gap: .6rem;
        min-height: 3.4rem;
        padding: .6rem .75rem;
    }

    .dl-dash-snel-teken {
        width: 34px;
        height: 34px;
        border-radius: min(10px, var(--dl-r-max));
    }

    .dl-dash-snel-kop {
        font-size: .86rem;
        line-height: 1.2;
    }

    .dl-dash-snel-bij { display: none; }
}

/* Op de smalste telefoons een slag kleiner: tot 360 pixels paste
   "Bestellingen" niet naast het teken. */
@media (max-width: 359px) {
    .dl-dash-snel a {
        gap: .5rem;
        padding: .55rem .6rem;
    }

    .dl-dash-snel-teken {
        width: 30px;
        height: 30px;
    }

    .dl-dash-snel-kop { font-size: .78rem; }
}


/* =====================================================================
   Mijn bestellingen
   =====================================================================
   Eén tabel met één regel per order, en onder elke regel een <details>
   met wat erin zat. Hiervoor was elke order een eigen blok met vier
   artikelregels eronder; bij twaalf bestellingen was dat een pagina van
   twee meter waarin geen twee bedragen meer naast elkaar stonden.
   ===================================================================== */

/* -- De cijfers boven de lijst --------------------------------------------
   Drie tegels die over de onderrand van de donkere kop heen liggen, net als
   .dl-kopbalk elders op de site. Ze staan hier apart omdat er meer in zit dan
   een getal: onder elk cijfer staat de verdeling waar het uit bestaat.

   Hiervoor stonden er drie kale getallen, en dan is "€ 2.491,35 openstaand"
   een bedrag waar niemand iets mee kan. Van tweeduizend euro die pas over drie
   weken vervalt ligt niemand wakker, van driehonderd euro die vorige maand al
   had moeten binnenkomen wel. Dat verschil staat nu op het scherm.
   ---------------------------------------------------------------------- */

.dl-bestcijfers {
    /* Wel in laag gezet en niet alleen omhoog geschoven: de kop erboven heeft
       isolation: isolate en valt anders over deze tegels heen. */
    position: relative;
    z-index: 1;

    /* Onder elkaar, en vanaf 641 pixels met z'n drieën naast elkaar. Met
       auto-fit werden het er tussen 560 en 1000 pixels twee plus één, met een
       lege witte plek naast de derde tegel. Het dashboard heeft er vier en
       zijn eigen verdeling, zie .is-vier. */
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin-top: clamp(-3.25rem, -2.6rem - 2vw, -2.25rem);
    margin-bottom: clamp(1rem, .85rem + .8vw, 1.6rem);
    border-radius: var(--radius-lg);
    background: #ffffff;
    box-shadow: 0 18px 44px rgba(2, 6, 23, .14);
    overflow: hidden;
}

.dl-bestcijfer {
    display: flex;
    flex-direction: column;
    padding: clamp(1.05rem, .9rem + .7vw, 1.5rem) clamp(1rem, .85rem + .7vw, 1.6rem);
    border-right: 1px solid var(--line-soft);
    color: inherit;
    text-decoration: none;
}

.dl-bestcijfers > :last-child { border-right: 0; }

@media (min-width: 641px) {
    .dl-bestcijfers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.dl-bestcijfer-kop {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .7rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

/* Het teken in een eigen vlakje. Een lijntekeningetje van veertien pixels
   naast kapitalen verdwijnt; met een kleur erachter is het een merkteken dat
   je van een meter afstand terugvindt. */
.dl-bestcijfer-teken {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: min(9px, var(--dl-r-max));
    background: var(--dl-blue-100);
    color: var(--dl-blue-700);
}

.dl-bestcijfer-waarde {
    margin: 0;
    font-size: clamp(1.55rem, 1.25rem + 1.2vw, 2.1rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
    color: var(--dl-blue-800);
}

/* Een woord in plaats van een bedrag: "Betaald", "Bezorgen", "Geannuleerd".
   Iets kleiner dan een getal, want een woord van elf letters is breder dan
   "€ 1.151,92" en paste in een smalle tegel niet meer. En een getal hoort
   op deze tegels het grootste te zijn. */
.dl-bestcijfer-waarde.is-woord {
    font-size: clamp(1.2rem, 1rem + .9vw, 1.6rem);
    letter-spacing: -.02em;
}

.dl-bestcijfer-bij {
    margin: .4rem 0 0;
    font-size: .84rem;
    color: var(--ink-faint);
}

/* Een bedrag breekt nooit af tussen het euroteken en het getal. In een
   smalle tegel stond er anders "gemiddeld €" op de ene regel en "610" op de
   volgende. */
.dl-bestcijfer-bij strong {
    font-weight: 700;
    white-space: nowrap;
    color: var(--ink-soft);
}

.dl-bestcijfer-geld { white-space: nowrap; }

.dl-bestcijfer-rust,
.dl-bestcijfer-voet {
    margin: .7rem 0 0;
    font-size: .76rem;
    color: var(--ink-faint);
}

.dl-bestcijfer-rust { margin-top: auto; padding-top: .9rem; }

/* Online betalen wat er openstaat, onder in de tegel Betaling: een knop, en
   niet de tekstlink van dl-bestcijfer-actie. */
.dl-bestcijfer-knop { margin-top: .8rem; align-self: flex-start; }

/* De tegel met het openstaande bedrag is een knop naar de facturen die
   erachter zitten. De andere twee wijzen nergens heen, en lichten dus ook
   niet op: zo is te zien waar klikken zin heeft zonder dat er een knop bij
   hoeft. */
a.dl-bestcijfer { transition: background .14s ease; }
a.dl-bestcijfer:hover { background: var(--dl-blue-100); text-decoration: none; }
a.dl-bestcijfer:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Of de bedragen in een lijst met of zonder btw zijn, onder de kop van de
   kolom. Dat stond eerst alleen in de tegel Dit jaar, en die ziet niet
   iedereen meer. Klein en niet in kapitalen: het is een voetnoot bij de kop,
   geen tweede kop. */
.dl-tabel-btw {
    display: block;
    margin-top: .1rem;
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink-faint);
}

/* -- De tegel met wat een klant vaak bestelt ------------------------------
   Een lijstje van drie in plaats van een getal. Elke naam is een link naar
   het artikel; de knop erachter legt er een in de winkelwagen. De tegel zelf
   is daarom geen link en licht ook niet op.
   --------------------------------------------------------------------- */

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

.dl-bestvaak li {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}

/* Een naam op een regel, met puntjes als hij niet past: de hele naam staat in
   de titel, en de artikelpagina is een tik verder. */
.dl-bestvaak-naam {
    flex: 1 1 auto;
    min-width: 0;
    padding: .35rem 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .88rem;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
}

.dl-bestvaak-naam:hover { color: var(--accent); text-decoration: none; }

.dl-bestvaak-keer {
    flex: none;
    font-size: .74rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ink-faint);
}

.dl-bestvaak-leg { flex: none; margin: 0; }

.dl-bestvaak-knop {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: min(9px, var(--dl-r-max));
    background: var(--dl-blue-100);
    color: var(--dl-blue-800);
    cursor: pointer;
    transition: background .14s ease, color .14s ease;
}

.dl-bestvaak-knop:hover { background: var(--dl-blue-800); color: #ffffff; }
.dl-bestvaak-knop:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Op een aanraakscherm een vinger groot. */
@media (any-pointer: coarse) {
    .dl-bestvaak-knop { width: 2.5rem; height: 2.5rem; }
}

/* Eén tegel mag om aandacht vragen: die met een factuur die over de datum
   heen is. De rest blijft rustig, anders vraagt niets meer aandacht. */
.dl-bestcijfer.is-let .dl-bestcijfer-teken { background: #fef3c7; color: #b45309; }
.dl-bestcijfer.is-let .dl-bestcijfer-bij strong { color: #b45309; }

/* -- Het staafje onder een cijfer --
   margin-top: auto duwt het naar de onderrand, zodat de staafjes van de drie
   tegels op dezelfde hoogte liggen ook als de regel erboven bij de een over
   twee regels loopt. */
.dl-bestmix {
    display: flex;
    gap: 2px;
    margin-top: auto;
    padding-top: .95rem;
}

.dl-bestmix-deel {
    min-width: 4px;
    height: 7px;
    border-radius: min(999px, var(--dl-r-max));
}

.dl-bestmix-deel.is-bezig { background: var(--dl-blue-600); }
.dl-bestmix-deel.is-klaar { background: #16a34a; }
.dl-bestmix-deel.is-af    { background: var(--dl-grey-200); }
.dl-bestmix-deel.is-open  { background: var(--dl-blue-300); }
.dl-bestmix-deel.is-laat  { background: #d97706; }

.dl-bestmix-uitleg {
    display: flex;
    flex-wrap: wrap;
    gap: .15rem .8rem;
    margin: .55rem 0 0;
    padding: 0;
    list-style: none;
    font-size: .78rem;
    color: var(--ink-faint);
}

.dl-bestmix-uitleg li {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.dl-bestmix-uitleg li::before {
    content: "";
    width: .5rem;
    height: .5rem;
    border-radius: min(999px, var(--dl-r-max));
    background: var(--dl-grey-200);
}

.dl-bestmix-uitleg .is-bezig::before { background: var(--dl-blue-600); }
.dl-bestmix-uitleg .is-klaar::before { background: #16a34a; }
.dl-bestmix-uitleg .is-af::before    { background: var(--dl-grey-200); }
.dl-bestmix-uitleg .is-open::before  { background: var(--dl-blue-300); }
.dl-bestmix-uitleg .is-laat::before  { background: #d97706; }

/* -- De maanden --
   Zes staafjes die laten zien of het oploopt of stilvalt. Eén getal "dit
   jaar" zegt hoe veel, maar niet welke kant het op gaat - en dat laatste is
   waar een inkoper naar kijkt. De hoogste maand is de schaal; met een vaste
   schaal is een goede maand niet van een matige te onderscheiden.

   De lopende maand staat in de volle kleur, de rest lichter. Het is de enige
   die nog kan groeien, en daarmee het staafje waar het oog naartoe moet. */
.dl-bestmaanden {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: .35rem;
    margin-top: auto;
    padding-top: .95rem;
}

.dl-bestmaand {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    justify-items: center;
    gap: .35rem;
    height: 4.4rem;
}

.dl-bestmaand-staaf {
    align-self: end;
    width: 100%;
    max-width: 2rem;
    min-height: 3px;
    border-radius: min(6px, var(--dl-r-max)) min(6px, var(--dl-r-max)) min(3px, var(--dl-r-max)) min(3px, var(--dl-r-max));
    background: linear-gradient(180deg, var(--dl-blue-300), var(--dl-blue-500));
}

.dl-bestmaand.is-nu .dl-bestmaand-staaf {
    background: linear-gradient(180deg, var(--dl-blue-600), var(--dl-blue-900));
    box-shadow: 0 4px 10px rgba(31, 39, 86, .22);
}

/* Een maand zonder bestellingen krijgt een streepje en geen niets: een gat in
   de rij leest als een fout in de grafiek. */
.dl-bestmaand.is-leeg .dl-bestmaand-staaf {
    background: var(--line);
    box-shadow: none;
}

.dl-bestmaand-naam {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--ink-faint);
}

.dl-bestmaand.is-nu .dl-bestmaand-naam {
    font-weight: 800;
    color: var(--dl-blue-800);
}

/* -- Het kaartje bij een maand --
   Verschijnt onder de muis, en ook als het staafje de focus heeft: met tab,
   of met een tik op een telefoon. De hele kolom telt als raakvlak en niet
   alleen het staafje, want een maand van drie pixels hoog is met een muis
   niet te raken en met een vinger al helemaal niet. */
.dl-bestmaand {
    position: relative;
    border-radius: min(8px, var(--dl-r-max));
    cursor: default;
    outline: 0;
    -webkit-tap-highlight-color: transparent;
}

.dl-bestmaand-staaf {
    position: relative;
    transition: filter .14s ease;
}

.dl-bestmaand:hover .dl-bestmaand-staaf,
.dl-bestmaand:focus .dl-bestmaand-staaf { filter: brightness(1.14) saturate(1.1); }

.dl-bestmaand.is-leeg:hover .dl-bestmaand-staaf,
.dl-bestmaand.is-leeg:focus .dl-bestmaand-staaf { background: var(--dl-grey-200); }

.dl-bestmaand:focus-visible { box-shadow: 0 0 0 2px var(--accent); }

/* Het kaartje hangt niet midden boven zijn staafje, maar loopt vanaf het
   staafje de tegel in: bij de eerste drie maanden naar rechts, bij de laatste
   drie naar links. Midden erboven valt het in een smalle tegel - op het
   dashboard is een tegel op een telefoon zo'n 170 pixels breed - over de rand,
   en die knipt af. Het puntje staat wel altijd precies boven het staafje; dat
   hangt aan het staafje zelf en niet aan het kaartje. */
.dl-bestmaand-tip {
    position: absolute;
    bottom: calc(100% + .5rem);
    z-index: 3;
    display: grid;
    gap: .1rem;
    padding: .5rem .7rem;
    border-radius: min(10px, var(--dl-r-max));
    background: var(--dl-blue-950);
    box-shadow: 0 12px 26px rgba(2, 6, 23, .3);
    font-size: .74rem;
    font-weight: 500;
    line-height: 1.35;
    color: rgba(255, 255, 255, .7);
    text-align: left;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(5px);
    transition: opacity .14s ease, transform .14s ease, visibility 0s linear .14s;

    /* Hoever het kaartje naar binnen moet om binnen de tegels te blijven.
       Wordt gemeten en gezet door maandkaartjes in theme.js; een losse
       eigenschap, zodat hij buiten de overgang van transform blijft. */
    translate: var(--dl-tip-schuif, 0px) 0;
}

.dl-bestmaand:nth-child(-n+3) .dl-bestmaand-tip { left: -.35rem; }
.dl-bestmaand:nth-child(n+4) .dl-bestmaand-tip { right: -.35rem; }

/* Het puntje onder het kaartje, midden boven het staafje. */
.dl-bestmaand-staaf::before {
    content: "";
    position: absolute;
    bottom: calc(100% + .5rem - 12px);
    left: 50%;
    z-index: 3;
    border: 6px solid transparent;
    border-top-color: var(--dl-blue-950);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 5px);
    transition: opacity .14s ease, transform .14s ease, visibility 0s linear .14s;
}

.dl-bestmaand-tip-naam {
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
}

.dl-bestmaand-tip strong {
    font-size: .95rem;
    font-weight: 800;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
    color: #ffffff;
}

.dl-bestmaand:hover .dl-bestmaand-tip,
.dl-bestmaand:focus .dl-bestmaand-tip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity .14s ease, transform .14s ease, visibility 0s;
}

.dl-bestmaand:hover .dl-bestmaand-staaf::before,
.dl-bestmaand:focus .dl-bestmaand-staaf::before {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition: opacity .14s ease, transform .14s ease, visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
    .dl-bestmaand-tip,
    .dl-bestmaand-staaf::before,
    .dl-bestmaand:hover .dl-bestmaand-tip,
    .dl-bestmaand:focus .dl-bestmaand-tip,
    .dl-bestmaand:hover .dl-bestmaand-staaf::before,
    .dl-bestmaand:focus .dl-bestmaand-staaf::before { transition: none; }
}

/* Onder elkaar is de rechterrand een streep die nergens op slaat; daar hoort
   een streep tussen de regels. */
@media (max-width: 640px) {
    .dl-bestcijfer {
        border-right: 0;
        border-bottom: 1px solid var(--line-soft);
    }

    .dl-bestcijfers > :last-child { border-bottom: 0; }
}

/* Drie tegels op een telefoon: de eerste twee naast elkaar en de derde over
   de volle breedte eronder. Drie onder elkaar is ruim vierhonderd pixels aan
   getallen voordat de inhoud begint; twee naast elkaar passen wel, en de
   derde - met de maanden, of met het adres - heeft juist de breedte nodig. */
@media (max-width: 640px) {
    .dl-bestcijfers:not(.is-vier) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dl-bestcijfers:not(.is-vier) > :first-child { border-right: 1px solid var(--line-soft); }
    .dl-bestcijfers:not(.is-vier) > :last-child { grid-column: 1 / -1; }
}

/* -- Vier tegels, op het dashboard --
   Vier naast elkaar vanaf 1100 pixels, daaronder twee bij twee - ook op een
   telefoon. Vier onder elkaar is daar ruim zeshonderd pixels aan getallen
   voordat de lijst begint waarvoor iemand dit scherm opent. */
.dl-bestcijfers.is-vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.dl-bestcijfers.is-vier > .dl-bestcijfer {
    border-right: 1px solid var(--line-soft);
    border-bottom: 0;
}

.dl-bestcijfers.is-vier > :nth-child(2n) { border-right: 0; }
.dl-bestcijfers.is-vier > :nth-child(-n+2) { border-bottom: 1px solid var(--line-soft); }

/* Op een telefoon krijgt de tegel met een lijstje de volle breedte: in een
   halve tegel van zo'n honderdzeventig pixels is van "Beck Rechthoekige
   Indirecte Ledspiegel" alleen "Beck Rec" over. De tegel ervoor krijgt dan ook
   de hele breedte, anders staat die alleen met een gat ernaast. */
@media (max-width: 640px) {
    .dl-bestcijfers.is-vier > .is-lijst,
    .dl-bestcijfers.is-vier > :nth-child(odd):has(+ .is-lijst) {
        grid-column: 1 / -1;
        border-right: 0;
    }

    .dl-bestcijfers.is-vier > :nth-child(odd):has(+ .is-lijst) { border-bottom: 1px solid var(--line-soft); }
}

@media (min-width: 1100px) {
    .dl-bestcijfers.is-vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    .dl-bestcijfers.is-vier > :nth-child(2n) { border-right: 1px solid var(--line-soft); }
    .dl-bestcijfers.is-vier > :nth-child(-n+2) { border-bottom: 0; }
    .dl-bestcijfers.is-vier > :last-child { border-right: 0; }
}

/* Op een telefoon is een tegel zo'n honderdzeventig pixels breed: twee naast
   elkaar op het dashboard, en ook op het overzicht en bij een bestelling (zie
   de regel hierboven voor drie tegels). Het getal
   krimpt mee, anders past "€ 12.345,67" er niet in, en de binnenruimte wordt
   krapper zodat er voor de staafjes iets overblijft. */
@media (max-width: 560px) {
    .dl-bestcijfers > .dl-bestcijfer { padding: .95rem .85rem; }

    .dl-bestcijfers .dl-bestcijfer-waarde { font-size: 1.28rem; }
    .dl-bestcijfers .dl-bestcijfer-waarde.is-woord { font-size: 1.05rem; }

    .dl-bestcijfers .dl-bestcijfer-kop {
        gap: .4rem;
        font-size: .64rem;
    }

    .dl-bestcijfers .dl-bestcijfer-teken {
        width: 1.45rem;
        height: 1.45rem;
    }

    .dl-bestcijfers .dl-bestcijfer-bij { font-size: .78rem; }

    /* De uitleg onder een staafje in twee regels en niet in drie. */
    .dl-bestcijfers .dl-bestmix-uitleg {
        gap: .1rem .55rem;
        font-size: .72rem;
    }

    .dl-bestcijfers .dl-bestcijfer-actie { font-size: .8rem; }
}

/* De telling in de kop van de openstaande bestellingen past op een telefoon
   niet naast de titel; dan breken ze allebei in tweeën. Wat er openstaat
   staat dan toch al in de regels eronder en in de zin in de voet. */
@media (max-width: 420px) {
    .dl-dash-kaart .dl-best-kop-bij { display: none; }
}

/* Waar een tegel zonder staafje heen gaat, op dezelfde hoogte als de
   staafjes in de tegels ernaast. */
/* Een blok met de pijl als laatste teken, en geen flexdoos: in een smalle
   tegel breekt de tekst dan gewoon af en blijft de pijl achter het laatste
   woord staan, in plaats van los ernaast te zweven. */
.dl-bestcijfer-actie {
    display: block;
    margin-top: auto;
    padding-top: .95rem;
    font-size: .84rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--accent);
}

.dl-bestcijfer-actie-eind { white-space: nowrap; }

.dl-bestcijfer-actie svg {
    display: inline-block;
    margin-left: .3rem;
    vertical-align: -2px;
    transition: transform .14s ease;
}

a.dl-bestcijfer:hover .dl-bestcijfer-actie svg { transform: translateX(3px); }

/* -- De werkbalk: de vier standen en het zoekveld ------------------------
   Eén balk met twee delen van dezelfde hoogte: links de standen als één
   rail, rechts het zoekveld. Hiervoor waren het vier losse pillen met een
   zoekveld erboven en een regel uitleg ertussen; drie dingen die ieder op
   een eigen hoogte stonden, en dan leest het als een rij losse onderdelen en
   niet als het stuur van de lijst eronder.

   Op een telefoon gaat het zoekveld bovenaan, want daar begint wie iets
   zoekt, met de standen als twee bij twee eronder.
   ---------------------------------------------------------------------- */

.dl-best-werkbalk {
    --dl-best-hoogte: 3rem;

    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .6rem;
    margin-bottom: clamp(.85rem, .7rem + .6vw, 1.25rem);
}

/* Naast elkaar pas vanaf 1320 pixels. De rail is met vijf standen zo'n 810
   breed, en daaronder blijft er voor het zoekveld te weinig over om de
   plaatshouder te lezen - dan staat er "Zoek op ordernummer, uw ke" en weet
   niemand waar het veld op zoekt. Gemeten: op 1280 hield het veld 325 pixels
   over voor een tekst van 333. stretch maakt de twee even hoog, ook als de een
   een pixel meer binnenwerk heeft dan de ander. */
@media (min-width: 1320px) {
    .dl-best-werkbalk {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas: "standen zoek";
        align-items: stretch;
        gap: .75rem;
    }

    .dl-best-filters { grid-area: standen; }
    .dl-best-zoek { grid-area: zoek; }
}

/* -- Het zoekveld -- */

.dl-best-zoek {
    position: relative;
    display: flex;
    align-items: center;
    gap: .55rem;
    min-height: var(--dl-best-hoogte);
    padding: .25rem .3rem .25rem .9rem;
    border: 1px solid var(--line);
    border-radius: min(16px, var(--dl-r-max));
    background: #ffffff;
    box-shadow: 0 6px 18px rgba(2, 6, 23, .06);
    transition: border-color .14s ease, box-shadow .14s ease;
}

.dl-best-zoek:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft), 0 6px 18px rgba(2, 6, 23, .06);
}

.dl-best-zoek-teken {
    display: inline-flex;
    flex: none;
    color: var(--ink-faint);
    transition: color .14s ease;
}

.dl-best-zoek:focus-within .dl-best-zoek-teken { color: var(--accent); }

.dl-best-zoek input {
    flex: 1 1 auto;
    min-width: 0;
    padding: .55rem 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: .95rem;
    color: var(--ink);
}

.dl-best-zoek input:focus { outline: 0; }
.dl-best-zoek input::placeholder { color: var(--ink-faint); }

/* Het kruisje dat de browser er zelf in zet, weg: er staat er al een die ook
   zonder javascript werkt en die bovendien de stand bewaart. */
.dl-best-zoek input::-webkit-search-cancel-button,
.dl-best-zoek input::-webkit-search-decoration { -webkit-appearance: none; display: none; }

.dl-best-zoek-wis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 2rem;
    height: 2rem;
    border-radius: min(999px, var(--dl-r-max));
    color: var(--ink-faint);
    text-decoration: none;
    transition: background .14s ease, color .14s ease;
}

.dl-best-zoek-wis:hover {
    background: var(--surface-alt);
    color: var(--ink);
    text-decoration: none;
}

.dl-best-zoek-wis.is-weg { display: none; }

.dl-best-zoek-knop { flex: none; }

/* Met javascript is de knop overbodig: het antwoord komt al terwijl u tikt.
   Zonder javascript is hij de enige manier om te zoeken, dus hij staat in de
   opmaak en verdwijnt pas als het script er is. */
html.dl-js .dl-best-zoek-knop { display: none; }

/* Het draaiende rondje staat op de plek van die knop, zodat er niets
   verspringt zodra het zoeken begint. */
.dl-best-zoek-draai { display: none; }

html.dl-js .dl-best-zoek-draai {
    display: block;
    flex: none;
    width: 1.05rem;
    height: 1.05rem;
    margin-right: .6rem;
    border: 2px solid var(--dl-blue-100);
    border-top-color: var(--accent);
    border-radius: min(999px, var(--dl-r-max));
    opacity: 0;
    transition: opacity .14s ease;
}

[data-best].is-bezig .dl-best-zoek-draai {
    opacity: 1;
    animation: dl-draai .65s linear infinite;
}

@keyframes dl-draai { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    [data-best].is-bezig .dl-best-zoek-draai { animation-duration: 2s; }
}

/* De lijst dooft terwijl er gewisseld wordt. Niet weghalen en opnieuw
   opbouwen: dan springt de pagina omhoog en ben je kwijt waar je was. */
[data-best-lijst] { transition: opacity .18s ease; }

[data-best].is-bezig [data-best-lijst] {
    opacity: .4;
    pointer-events: none;
}

/* Terug van een bestelling: de standen en de lijst staan even uit tot de
   stand van daarnet er weer staat, zodat u niet eerst alles ziet en dan pas
   uw filter. visibility en niet display: de ruimte blijft bezet, en dan
   springt er niets.

   Na anderhalve seconde komen ze hoe dan ook terug. Het stukje in het
   sjabloon zet deze klasse; laadt theme.js daarna niet, dan is er niemand die
   hem weer weghaalt, en een lege pagina is erger dan de verkeerde stand. */
[data-best].is-herstel [data-best-lijst],
[data-best].is-herstel [data-best-filters] {
    visibility: hidden;
    animation: dl-herstel 0s linear 1.5s forwards;
}

@keyframes dl-herstel { to { visibility: visible; } }

/* -- De standen --
   Eén rail met vijf vakken, net als de tegels erboven: wit, met een
   schaduw, en de stand waar u nu in staat in het donkerblauw van de kop. Het
   is één keuze uit vijf, en dan hoort het er ook uit te zien als één ding en
   niet als vijf losse knoppen die toevallig naast elkaar liggen. */
.dl-best-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    min-height: var(--dl-best-hoogte);
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: min(16px, var(--dl-r-max));
    background: #ffffff;
    box-shadow: 0 6px 18px rgba(2, 6, 23, .06);
}

/* Op een telefoon twee kolommen, met Alles over de volle breedte en de vier
   standen twee bij twee eronder. Anders staat de vijfde knop alleen op de
   laatste regel, en dat leest als een knop die er later bij is gezet. */
@media (max-width: 679.98px) {
    .dl-best-filter.is-al { grid-column: 1 / -1; }
}

/* Op een tablet twee rijen: drie boven en twee onder, elk even breed. Vijf op
   een rij past pas vanaf 880 pixels; daaronder breken de namen halverwege af,
   en "Nog te bet..." is geen knop maar een raadsel. */
@media (min-width: 680px) and (max-width: 879.98px) {
    .dl-best-filters { grid-template-columns: repeat(6, minmax(0, 1fr)); }

    .dl-best-filter { grid-column: span 2; }
    .dl-best-filter:nth-child(n+4) { grid-column: span 3; }
}

/* Op één rij vanaf 880 pixels: daar passen de vijf vakken met hun volle naam. */
@media (min-width: 880px) {
    .dl-best-filters {
        display: flex;
        width: fit-content;
        max-width: 100%;
    }
}

/* Wie zijn facturen mag zien, heeft er een zesde stand bij: de creditnota's.
   Op een telefoon dan drie rijen van twee, zonder Alles over de volle
   breedte, en daarboven twee rijen van drie tot ze op één rij passen. Met
   zes is de rail 980 pixels breed: op één rij vanaf 1040, en naast het
   zoekveld vanaf 1400. Daar houdt het veld zo'n 260 pixels over, genoeg
   voor de korte plaatshouder; zie data-kort. */
@media (max-width: 679.98px) {
    .dl-best-werkbalk.is-zes .dl-best-filter.is-al { grid-column: auto; }
}

@media (min-width: 680px) and (max-width: 1039.98px) {
    .dl-best-werkbalk.is-zes .dl-best-filters {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: auto;
    }

    .dl-best-werkbalk.is-zes .dl-best-filter,
    .dl-best-werkbalk.is-zes .dl-best-filter:nth-child(n+4) { grid-column: auto; }
}

@media (min-width: 1320px) and (max-width: 1399.98px) {
    .dl-best-werkbalk.is-zes {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: none;
    }

    .dl-best-werkbalk.is-zes .dl-best-filters,
    .dl-best-werkbalk.is-zes .dl-best-zoek { grid-area: auto; }
}

/* Met de offertes erbij zijn het er zeven. Op een telefoon Alles over de
   volle breedte en de rest twee bij twee, op een tablet Alles bovenaan en de
   rest drie naast elkaar, en op één rij vanaf 1240 pixels. Het zoekveld
   staat er dan altijd boven: naast een rail van zeven blijft er te weinig
   over om de plaatshouder te lezen. */
@media (min-width: 680px) and (max-width: 1239.98px) {
    .dl-best-werkbalk.is-zeven .dl-best-filters {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: auto;
    }

    .dl-best-werkbalk.is-zeven .dl-best-filter,
    .dl-best-werkbalk.is-zeven .dl-best-filter:nth-child(n+4) { grid-column: auto; }

    .dl-best-werkbalk.is-zeven .dl-best-filter.is-al { grid-column: 1 / -1; }
}

@media (min-width: 1320px) {
    .dl-best-werkbalk.is-zeven {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: none;
    }

    .dl-best-werkbalk.is-zeven .dl-best-filters,
    .dl-best-werkbalk.is-zeven .dl-best-zoek { grid-area: auto; }
}

.dl-best-filter {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    padding: .45rem .8rem .45rem .45rem;
    border-radius: min(12px, var(--dl-r-max));
    font-size: .88rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--ink-soft);
    text-decoration: none;
    transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}

/* De naam mag nooit afbreken met puntjes. Op een telefoon mag hij over twee
   regels ("Nog te / betalen"); daar is de hoogte voor, de breedte niet. */
.dl-best-filter-naam {
    min-width: 0;
    line-height: 1.2;
}


/* Het teken krijgt de kleur van de stand waar het bij hoort - dezelfde kleur
   als het merkje in de tabel. Een klant die "Nog te betalen" aanklikt en
   daarna een rij oranje merkjes ziet, hoeft geen tweede kleurcode te leren. */
.dl-best-filter-teken {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.65rem;
    height: 1.65rem;
    border-radius: min(9px, var(--dl-r-max));
    background: var(--surface-alt);
    color: var(--ink-faint);
    transition: background .16s ease, color .16s ease;
}

.dl-best-filter.is-al    .dl-best-filter-teken { background: var(--dl-blue-100); color: var(--dl-blue-800); }
.dl-best-filter.is-bezig .dl-best-filter-teken { background: var(--dl-blue-100); color: var(--dl-blue-600); }
.dl-best-filter.is-open  .dl-best-filter-teken { background: #fef3c7; color: #b45309; }
.dl-best-filter.is-klaar .dl-best-filter-teken { background: #dcfce7; color: #15803d; }
.dl-best-filter.is-af    .dl-best-filter-teken { background: var(--surface-alt); color: var(--ink-faint); }
.dl-best-filter.is-credit .dl-best-filter-teken { background: #ccfbf1; color: #0f766e; }
.dl-best-filter.is-offerte .dl-best-filter-teken { background: var(--dl-blue-100); color: var(--dl-blue-700); }

/* Het aantal in een eigen bolletje, rechts: dan staan de vier getallen op
   dezelfde plek in hun vak en vergelijk je ze in één oogopslag. */
.dl-best-filter-tal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    min-width: 1.5rem;
    height: 1.35rem;
    margin-left: auto;
    padding: 0 .4rem;
    border-radius: min(999px, var(--dl-r-max));
    background: var(--surface-alt);
    font-size: .74rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ink-faint);
    transition: background .16s ease, color .16s ease;
}

a.dl-best-filter:hover {
    background: var(--surface-alt);
    color: var(--ink);
    text-decoration: none;
}

a.dl-best-filter:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.dl-best-filter.is-nu {
    background: linear-gradient(135deg, var(--dl-blue-700), var(--dl-blue-900));
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(31, 39, 86, .28);
}

a.dl-best-filter.is-nu:hover {
    background: linear-gradient(135deg, var(--dl-blue-700), var(--dl-blue-900));
    color: #ffffff;
}

.dl-best-filter.is-nu .dl-best-filter-teken {
    background: rgba(255, 255, 255, .16);
    color: #ffffff;
}

.dl-best-filter.is-nu .dl-best-filter-tal {
    background: rgba(255, 255, 255, .18);
    color: #ffffff;
}

/* Een stand zonder bestellingen blijft staan maar doet niets: zo is te zien
   dát hij bestaat, en meteen ook dat er niets in zit. */
.dl-best-filter.is-uit { opacity: .42; }

/* Smalle schermen. Deze regels staan na de basisregels hierboven en niet
   ernaast: ze hebben hetzelfde gewicht, en dan wint wat later komt. */
@media (max-width: 679.98px) {
    .dl-best-filter {
        gap: .45rem;
        padding: .45rem .55rem .45rem .4rem;
        white-space: normal;
    }
}

/* Op de smalste telefoons wordt het teken een stip in dezelfde kleur. De
   kleurcode blijft, en de naam krijgt de twintig pixels die hij daar nodig
   heeft: "Afgerond" is één woord en kan niet over twee regels. */
@media (max-width: 380px) {
    .dl-best-filter { font-size: .84rem; }

    .dl-best-filter-teken {
        width: .55rem;
        height: .55rem;
        margin-left: .3rem;
    }

    .dl-best-filter-teken svg { display: none; }

    .dl-best-filter.is-al    .dl-best-filter-teken { background: var(--dl-blue-800); }
    .dl-best-filter.is-bezig .dl-best-filter-teken { background: var(--dl-blue-600); }
    .dl-best-filter.is-open  .dl-best-filter-teken { background: #d97706; }
    .dl-best-filter.is-klaar .dl-best-filter-teken { background: #16a34a; }
    .dl-best-filter.is-af    .dl-best-filter-teken { background: var(--ink-faint); }
    .dl-best-filter.is-credit .dl-best-filter-teken { background: #0d9488; }
    .dl-best-filter.is-nu    .dl-best-filter-teken { background: #ffffff; }
}

/* -- De bladwijzer, in de voet van de kaart -------------------------------
   Links waar u bent, rechts de knoppen. Op een telefoon wordt het één rij:
   vorige, de stand, volgende - drie dingen die op 320 pixels naast elkaar
   passen en die u met een duim raakt. De nummers vallen daar weg; wie op een
   telefoon een lijst doorbladert, gaat een voor een.
   ---------------------------------------------------------------------- */

.dl-best-pager-tekst {
    margin: 0;
    font-size: .84rem;
    color: var(--ink-faint);
}

.dl-best-pager-tekst strong {
    font-weight: 700;
    color: var(--ink);
}

.dl-best-pager-knoppen {
    display: flex;
    align-items: center;
    gap: .35rem;
}

.dl-best-pager-stap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    min-height: 2.3rem;
    padding: 0 .8rem;
    border: 1px solid var(--line);
    border-radius: min(10px, var(--dl-r-max));
    background: #ffffff;
    font-size: .86rem;
    font-weight: 600;
    color: var(--ink-soft);
    text-decoration: none;
    transition: border-color .14s ease, color .14s ease, box-shadow .14s ease;
}

a.dl-best-pager-stap:hover {
    border-color: var(--dl-blue-300);
    color: var(--accent);
    text-decoration: none;
    box-shadow: 0 2px 10px rgba(2, 6, 23, .08);
}

a.dl-best-pager-stap:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* De uiterste stap blijft staan en wordt bleek. Weghalen laat de andere knop
   verspringen, en dan klik je op de eerste bladzijde net mis. */
.dl-best-pager-stap.is-uit { opacity: .4; }

.dl-best-pager-stap svg { flex: none; }

.dl-best-pager-nrs {
    display: flex;
    align-items: center;
    gap: .25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dl-best-pager-nr {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.3rem;
    height: 2.3rem;
    padding: 0 .45rem;
    border: 1px solid transparent;
    border-radius: min(10px, var(--dl-r-max));
    font-size: .86rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ink-soft);
    text-decoration: none;
    transition: background .14s ease, border-color .14s ease, color .14s ease;
}

a.dl-best-pager-nr:hover {
    border-color: var(--line);
    background: #ffffff;
    color: var(--accent);
    text-decoration: none;
}

a.dl-best-pager-nr:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* De bladzijde waar u bent, in het blauw van de kop en van de actieve stand
   in de rail erboven: één kleur voor "hier ben ik" op het hele scherm. */
.dl-best-pager-nr.is-nu {
    background: linear-gradient(135deg, var(--dl-blue-700), var(--dl-blue-900));
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(31, 39, 86, .26);
}

.dl-best-pager-gat {
    display: inline-flex;
    justify-content: center;
    min-width: 1.4rem;
    color: var(--ink-faint);
}

@media (max-width: 559.98px) {
    .dl-best-pager {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: .6rem;
    }

    /* De knoppen worden los van hun doosje in het raster gezet, zodat de
       tekst ertussen kan: vorige links, volgende rechts. */
    .dl-best-pager-knoppen { display: contents; }

    .dl-best-pager-nrs { display: none; }

    .dl-best-pager-stap.is-vorige { order: -1; }

    .dl-best-pager-tekst { text-align: center; }

    /* Vierkante knoppen met alleen de pijl; het woord blijft er voor wie het
       scherm niet ziet. Vierenveertig pixels: kleiner raakt een duim mis. */
    .dl-best-pager-stap {
        width: 2.75rem;
        min-height: 2.75rem;
        padding: 0;
    }

    .dl-best-pager-woord {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

/* -- De tabel -------------------------------------------------------------- */

/* Wat gevonden is, licht op in het merkblauw en niet in schoolbordgeel: deze
   tabel staat vol bedragen en statusmerkjes, en daar hoort geen kleur bij die
   alles overschreeuwt. */
.dl-tabel-best mark {
    padding: 0 .14em;
    border-radius: min(3px, var(--dl-r-max));
    background: var(--dl-blue-100);
    box-shadow: inset 0 -2px 0 var(--dl-blue-300);
    color: inherit;
}

.dl-best-kaart > h2 { gap: .6rem; }

.dl-best-kop-bij {
    margin-left: auto;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: none;
    white-space: nowrap;
    color: rgba(255, 255, 255, .6);
}

/* De referentie onder het nummer mag de kolom breed maken, de rest niet. */
.dl-tabel-best td:nth-child(3) { width: 99%; max-width: 0; }

.dl-tabel-best .dl-dash-merk + .dl-dash-merk { margin-left: .25rem; }

/* Bij een zoekopdracht: welk artikel in deze bestelling de treffer is. Twee
   regels op zijn hoogst; het gevonden woord staat vooraan, zie het sjabloon. */
.dl-tabel-bij.is-blok.dl-best-treffer {
    display: -webkit-box;
    max-width: 20rem;
    margin-top: .2rem;
    white-space: normal;
    color: var(--ink-soft);
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* -- Smaller dan een tablet ----------------------------------------------
   Zes kolommen passen niet op een telefoon. Ze vallen weg in de volgorde
   waarin ze het minst gemist worden: eerst de leveringswijze, dan de
   vervaldatum (die staat als merkje "Nog te betalen" al in de status), dan
   de besteldatum.
   ---------------------------------------------------------------------- */

@media (max-width: 860px) {
    .dl-tabel-best th:nth-child(4),
    .dl-tabel-best td:nth-child(4) { display: none; }
}

@media (max-width: 680px) {
    .dl-tabel-best th:nth-child(5),
    .dl-tabel-best td:nth-child(5) { display: none; }
}

@media (max-width: 520px) {
    .dl-tabel-best th:nth-child(2),
    .dl-tabel-best td:nth-child(2) { display: none; }
}

/* Een merkje mag afbreken, op elke breedte. De statuskolom krijgt wat er
   overblijft (zie max-width: 0 hierboven), en dat is op sommige breedtes
   minder dan "Klaar om te verzenden" lang is. Met nowrap liep het merkje dan
   tot zestig pixels over het bedrag ernaast heen. */
.dl-tabel-best .dl-dash-merk {
    max-width: 100%;
    white-space: normal;
}

/* Tot een tablet staan de merkjes onder elkaar en zijn ze iets kleiner:
   naast elkaar passen ze daar niet, en "Nog te betalen" hoort op een gewone
   telefoon op één regel te staan. Breekt er toch een af - de langste status,
   op de smalste schermen - dan met een kleinere ronding, zodat het geen pil
   van twee verdiepingen wordt. */
@media (max-width: 600px) {
    .dl-tabel-best .dl-dash-merk {
        display: flex;
        width: fit-content;
        padding: .1rem .38rem;
        font-size: .66rem;
        line-height: 1.25;
        border-radius: min(8px, var(--dl-r-max));
    }

    .dl-tabel-best .dl-dash-merk + .dl-dash-merk { margin: .2rem 0 0; }
}

/* Op een telefoon houdt de referentie onder het ordernummer zich smaller. Hij
   mocht zestien rem breed worden, en dan eiste de eerste kolom zo veel ruimte
   op dat er voor de status nog vijftig pixels overbleven. */
@media (max-width: 600px) {
    .dl-tabel-best .dl-tabel-bij.is-blok { max-width: 7rem; }
}

@media (max-width: 400px) {
    .dl-tabel-best .dl-tabel-bij.is-blok { max-width: 6.5rem; }
}


/* =====================================================================
   Facturen en creditnota's bij de bestellingen
   =====================================================================
   Onder de tegels waar het openstaande bedrag heen moet, op elke regel de
   factuur als pdf, en de creditnota's als eigen stand met een eigen tabel.
   De kaart en de bladwijzer zijn die van het besteloverzicht.
   ===================================================================== */

/* Het rekeningnummer: een regel en geen kaart. Hij hoort bij het bedrag in
   de tegel erboven, niet bij de lijst eronder. */
.dl-best-betalen {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    margin: 0 0 clamp(.85rem, .7rem + .6vw, 1.25rem);
    font-size: .88rem;
    line-height: 1.55;
    color: var(--ink-soft);
}

.dl-best-betalen svg {
    flex: none;
    margin-top: .2rem;
    color: var(--dl-blue-600);
}

.dl-best-betalen strong {
    color: var(--ink);
    white-space: nowrap;
}

/* De knop naar Facturen betalen staat achter de zin, en op een smal scherm
   eronder. */
.dl-best-betalen { flex-wrap: wrap; }
.dl-best-betalen > span { flex: 1 1 18rem; }
.dl-best-betalen-knop { flex: none; margin-left: auto; }

/* Bij de creditnota's krijgt de bestelling wat er overblijft, zoals de
   status in de tabel met bestellingen. */
.dl-tabel-credit td:nth-child(3) { width: 99%; max-width: 0; }

.dl-fact-actie {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

/* De knop naar de pdf. Klein, want hij staat op elke regel, en met een
   rand zodat hij als knop leest en niet als nog een getal. */
.dl-fact-pdf {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .28rem .55rem;
    border: 1px solid var(--line);
    border-radius: min(8px, var(--dl-r-max));
    background: #ffffff;
    font-size: .78rem;
    font-weight: 700;
    color: var(--dl-blue-800);
    text-decoration: none;
    transition: border-color .14s ease, color .14s ease;
}

.dl-fact-pdf:hover {
    border-color: var(--accent);
    color: var(--accent);
    text-decoration: none;
}

.dl-fact-pdf:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

/* Smaller: bij de creditnota's eerst de datum weg. Op een telefoon staat in
   de knop alleen het pijltje. */
@media (max-width: 640px) {
    .dl-tabel-credit th:nth-child(2),
    .dl-tabel-credit td:nth-child(2) { display: none; }
}

@media (max-width: 520px) {
    .dl-fact-pdf { padding: .35rem; }
    .dl-fact-pdf-woord { display: none; }

    .dl-tabel-credit .dl-tabel-bij.is-blok { max-width: 7rem; }
}

/* Op een telefoon kost een eigen kolom voor de pdf de statuskolom de ruimte
   om "Nog te betalen" op één regel te houden: daar zijn 86 pixels voor
   nodig, en op 390 bleven er 68 over. Daar staat het pijltje daarom achter
   het ordernummer, en valt de kolom weg. */
.dl-fact-pdf.is-bij-nummer { display: none; }

@media (max-width: 430px) {
    .dl-tabel-best .dl-fact-actie { display: none; }

    .dl-fact-pdf.is-bij-nummer {
        display: inline-flex;
        margin-left: .3rem;
        padding: .15rem;
        border-color: transparent;
        vertical-align: -3px;
    }
}


/* =====================================================================
   Eén bestelling
   =====================================================================
   Dezelfde opbouw als het dashboard en het besteloverzicht: de donkere kop
   met het ordernummer en de statusbalk, drie tegels over de naad, en
   daarna kaarten op het lichte vlak. De tegels zelf staan bij de cijfers
   boven het besteloverzicht (.dl-bestcijfer); hier staat wat er alleen op
   deze pagina bij komt.
   ===================================================================== */



/* De statusbalk is de stappenbalk van het afrekenen, maar dan met vier
   stappen en zonder links: je kunt een order niet terugzetten. De balk zelf
   staat op drie kolommen, dus die moet hier opnieuw gezet worden - anders
   valt de vierde stap op een eigen regel. */
/* Twee klassen in de selector, want .dl-bestelbalk staat verderop in dit
   bestand en zou anders met zijn drie kolommen winnen. */
.dl-bestelbalk.dl-orderbalk {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    cursor: default;
}

/* De kleuren op de donkere kop staan bij de stappenbalk zelf, onder
   .dl-bestelbalk.is-donker: de bestelstraat gebruikt dezelfde. */


/* Op een telefoon passen vier namen niet naast elkaar. Dan twee rijen van
   twee, met de lijn ertussen weg: die zou tussen "In behandeling" en
   "Klaar om te verzenden" door het niets lopen. */
@media (max-width: 620px) {
    .dl-bestelbalk.dl-orderbalk { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1rem; }
    .dl-orderbalk .dl-bestelbalk-stap:nth-child(3)::before { display: none; }
}

.dl-orderstatus-af {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: clamp(1.1rem, .9rem + .8vw, 1.75rem) 0 0;
    padding: .7rem .95rem;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, .06);
    font-size: .92rem;
    color: rgba(255, 255, 255, .82);
}

.dl-orderstatus-af span { display: grid; place-items: center; color: #ffb4a8; }



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

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

/* Alleen de regels, zoals op de pagina van de statuslink: over de hele breedte. */
.dl-order-vlakken.is-enkel { grid-template-columns: minmax(0, 1fr); }

.dl-order-kolom {
    display: grid;
    gap: clamp(1rem, .85rem + .8vw, 1.75rem);
    align-content: start;
    min-width: 0;
}

.dl-order-kolom > *,
.dl-order-vlakken > * { min-width: 0; }

.dl-order-naam {
    display: block;
    font-weight: 600;
    color: var(--ink);

    /* Een artikelnummer als JH-NF56-127 breekt nergens af en duwt de tabel
       anders het scherm uit. */
    overflow-wrap: anywhere;
}

/* De kolom met de naam krijgt wat overblijft. Geen max-width: 0 zoals in de
   andere tabellen: daar staat de inhoud op één regel en wordt hij afgekapt,
   hier mag een artikelnaam over twee regels. Met max-width: 0 zou de tekst
   buiten de tabel doorlopen in plaats van af te breken.

   De kopcel van een rij staat verder in dit thema op nowrap - dat is voor een
   ordernummer, niet voor een artikelnaam van zestig tekens. Hier dus niet. */
.dl-tabel-order th:nth-child(2) { width: 99%; }

.dl-tabel-order tbody th,
.dl-tabel-order tbody th .dl-tabel-bij { white-space: normal; max-width: none; }

.dl-tabel-order tfoot tr:not(.is-totaal) td { border-top: 0; padding-top: .35rem; font-weight: 600; }
.dl-tabel-order tfoot tr:first-child td { border-top: 1px solid var(--line); padding-top: .7rem; }

.dl-tabel-order tfoot .is-totaal td {
    border-top: 1px solid var(--line);
    padding-top: .6rem;
    font-weight: 800;
}

.dl-tabel-order tfoot .is-totaal .is-getal {
    font-size: 1.15rem;
    color: var(--dl-blue-900);
}


.dl-order-adres {
    margin: 0;
    font-size: .92rem;
    line-height: 1.6;
    color: var(--ink);
}

/* De tijden van de balie bij een afhaalorder, als die ingevuld zijn. */
.dl-order-tijden {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    margin: .6rem 0 0;
    font-size: .86rem;
    line-height: 1.55;
    color: var(--ink-soft);
}

.dl-order-tijden svg {
    flex: none;
    margin-top: .18rem;
    color: var(--dl-blue-700);
}

.dl-order-klant {
    margin: .75rem 0 0;
    padding-top: .75rem;
    border-top: 1px solid var(--line-soft);
    font-size: .86rem;
    color: var(--ink-soft);
}

.dl-order-klant strong {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

/* De kleine voet onder een kaart: een vraag links, de weg rechts. */
.dl-order-kaartvoet p,
.dl-order-notitie p {
    margin: 0;
    font-size: .86rem;
    color: var(--ink-soft);
}

.dl-order-kaartvoet a {
    font-size: .86rem;
    font-weight: 700;
    color: var(--accent);
}

.dl-order-notitie strong {
    margin-right: .35rem;
    font-weight: 700;
    color: var(--ink);
}

/* -- Het beheer: vlakken met een lijst ------------------------------------
   Een lijst links en een kaart rechts, voor Retouren, Verzoeken en
   Prijsverzoeken.
   --------------------------------------------------------------------- */

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

.dl-afhaal-vlakken > * { min-width: 0; }

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

/* De lijst hangt direct onder de kopbalk, zonder wit vak ertussen: elke regel
   is zelf wit, met een haarlijn ertussen. */
.dl-afhaal-lijst {
    margin: 0;
    padding: 0;
    list-style: none;
    border-radius: 0 0 var(--radius) var(--radius);
    background: #ffffff;
    overflow: hidden;
}

.dl-afhaal-leeg {
    margin: 0;
    font-size: .9rem;
    color: var(--ink-soft);
}


/* -- Het beheer: verzoeken ----------------------------------------------
   Links wat open staat, elk verzoek een eigen kaart met onderaan het
   besluit. Rechts wat er laatst is beoordeeld, in dezelfde witte lijst als
   de afhaalorders.
   --------------------------------------------------------------------- */

.dl-verz-open {
    display: grid;
    gap: clamp(1rem, .85rem + .8vw, 1.75rem);
    min-width: 0;
}

/* Hoe de tabel staat, hangt af van hoe breed de kaart is en niet van het
   scherm. */
.dl-verz {
    container: verz / inline-size;
    scroll-margin-top: 8rem;
}

.dl-verz-klant p { margin: 0; }

.dl-verz-naam {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem .5rem;
}

.dl-verz-naam strong {
    font-size: 1rem;
    font-weight: 800;
    color: var(--dl-blue-900);
}

.dl-verz-bij {
    font-size: .84rem;
    line-height: 1.5;
    color: var(--ink-faint);
    overflow-wrap: anywhere;
}

.dl-verz-klant .dl-verz-bij { margin-top: .2rem; }

/* Wat er staat en wat het wordt, naast elkaar. Het nieuwe vet op een groene
   ondergrond: daar gaat het om. */
.dl-verz-schuif {
    margin-top: .9rem;
    overflow-x: auto;
    border: 1px solid var(--line-soft);
    border-radius: calc(var(--radius) - 2px);
}

.dl-verz-tabel {
    width: 100%;
    border-collapse: collapse;
    font-size: .87rem;
}

.dl-verz-tabel th,
.dl-verz-tabel td {
    padding: .55rem .75rem;
    border-bottom: 1px solid var(--line-soft);
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;
}

.dl-verz-tabel tbody tr:last-child > * { border-bottom: 0; }

.dl-verz-tabel thead th {
    background: var(--surface-alt);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.dl-verz-tabel tbody th {
    width: 9.5rem;
    font-weight: 600;
    color: var(--ink-soft);
}

.dl-verz-tabel td.is-oud { color: var(--ink-soft); }

.dl-verz-tabel td.is-nieuw {
    background: #f0faf4;
    font-weight: 700;
    color: var(--ink);
}

.dl-verz-leeg {
    font-weight: 400;
    font-style: italic;
    color: var(--ink-faint);
}

/* Smal: per gegeven een blokje, met Nu en Wordt ervoor. */
@container verz (max-width: 30rem) {
    .dl-verz-tabel,
    .dl-verz-tabel tbody,
    .dl-verz-tabel tr,
    .dl-verz-tabel th,
    .dl-verz-tabel td { display: block; width: auto; }

    .dl-verz-tabel thead { display: none; }

    .dl-verz-tabel tbody tr {
        padding: .6rem .75rem;
        border-bottom: 1px solid var(--line-soft);
    }

    .dl-verz-tabel tbody tr:last-child { border-bottom: 0; }

    .dl-verz-tabel tbody th,
    .dl-verz-tabel td { padding: 0; border: 0; }

    .dl-verz-tabel tbody th { margin-bottom: .2rem; font-size: .78rem; }
    .dl-verz-tabel td.is-nieuw { background: none; }

    .dl-verz-tabel td::before {
        content: attr(data-kop) ": ";
        font-size: .78rem;
        font-weight: 600;
        color: var(--ink-faint);
    }
}

.dl-verz-let {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin: .7rem 0 0;
    padding: .6rem .75rem;
    border-radius: calc(var(--radius) - 2px);
    background: #fffbeb;
    font-size: .84rem;
    line-height: 1.5;
    color: #92400e;
}

.dl-verz-let svg { flex: none; margin-top: .15rem; }

.dl-verz-uitleg {
    margin: .9rem 0 0;
    font-size: .88rem;
    line-height: 1.55;
    color: var(--ink-soft);
}

/* Het besluit in de voet van de kaart: de reden breed, de knoppen ernaast.
   Past het niet, dan de knoppen op een eigen regel. */
.dl-verz-reden {
    flex: 1 1 16rem;
    min-width: 0;
    height: 44px;
    padding: 0 .85rem;
    border: 1px solid var(--line);
    border-radius: var(--dl-r-btn);
    background: #ffffff;
    font: inherit;
    font-size: .92rem;
    color: var(--ink);
}

.dl-verz-reden:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft);
}

.dl-verz-knoppen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.dl-verz-eigen {
    max-width: 15rem;
    font-size: .8rem;
    line-height: 1.4;
    color: var(--ink-faint);
}

.dl-verz-rij { padding: .85rem 1rem; }
.dl-verz-rij + .dl-verz-rij { border-top: 1px solid var(--line-soft); }
.dl-verz-rij p { margin: 0; }
.dl-verz-rij .dl-verz-bij { margin-top: .15rem; }
.dl-verz-rij .dl-verz-bij.is-reden { color: var(--ink-soft); }

.dl-verz-rij-kop {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem .5rem;
    font-size: .9rem;
}

.dl-verz-rij-kop strong { font-weight: 700; color: var(--ink); }

/* Zestien pixels op een aanraakscherm, anders zoomt een iPhone in. */
@media (any-pointer: coarse) {
    .dl-verz-reden { font-size: 16px; }
}

/* -- Prijsverzoeken in het beheer ---------------------------------------
   Dezelfde kaart als een verzoek: links het artikel met zijn foto, rechts de
   klant, en in de voet het afmelden. Is de kaart smal, dan onder elkaar.
   --------------------------------------------------------------------- */

.dl-prijsverz {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem 1.5rem;
}

@container verz (max-width: 34rem) {
    .dl-prijsverz { grid-template-columns: minmax(0, 1fr); }
}

.dl-prijsverz-artikel {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    min-width: 0;
}

.dl-prijsverz-foto {
    display: grid;
    place-items: center;
    flex: none;
    width: 56px;
    height: 56px;
    border: 1px solid var(--line-soft);
    border-radius: min(10px, var(--dl-r-max));
    background: #ffffff;
    overflow: hidden;
}

.dl-prijsverz-foto img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.dl-kaart-voet > .dl-verz-bij { margin: 0; }

/* -- Beoordelingen in het beheer ----------------------------------------
   De kaart van een prijsverzoek, met eronder wat de klant schreef. In de
   lijst rechts de knoppen om terug te komen op een besluit.
   --------------------------------------------------------------------- */

.dl-beoord-tekst {
    margin-top: .9rem;
    padding: .75rem .9rem;
    border: 1px solid var(--line-soft);
    border-radius: calc(var(--radius) - 2px);
    background: var(--surface-alt);
    font-size: .9rem;
    line-height: 1.55;
    color: var(--ink-soft);
}

.dl-beoord-tekst p { margin: 0; overflow-wrap: anywhere; }
.dl-beoord-tekst p + p { margin-top: .35rem; }
.dl-beoord-sterren { color: var(--ink); }

.dl-beoord-acties { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .45rem; }
.dl-beoord-acties form { margin: 0; }

/* -- Retouren in het beheer ---------------------------------------------
   Dezelfde kaart als een verzoek: de klant bovenaan, dan de feiten van de
   bestelling, wat de klant schreef, wat er terug moet en de foto's. In de
   voet het bericht aan de klant en de knoppen voor de volgende stap.
   --------------------------------------------------------------------- */

.dl-rbeh-feiten {
    display: grid;
    gap: .35rem;
    margin: .9rem 0 0;
    padding: .7rem .85rem;
    border: 1px solid var(--line-soft);
    border-radius: calc(var(--radius) - 2px);
    font-size: .87rem;
}

.dl-rbeh-feiten > div {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    gap: .5rem;
    align-items: baseline;
}

.dl-rbeh-feiten dt { color: var(--ink-faint); }

.dl-rbeh-feiten dd {
    margin: 0;
    color: var(--ink);
    overflow-wrap: anywhere;
}

.dl-rbeh-feiten .dl-dash-merk { margin-left: .3rem; }

.dl-rbeh-bij {
    margin-left: .35rem;
    font-size: .8rem;
    font-style: normal;
    color: var(--ink-faint);
}

.dl-rbeh-klant { margin-top: .8rem; }

.dl-rbeh-regels { margin: .8rem 0 .2rem; }

/* In het beheer mogen de foto's wat groter: daar wordt op beslist. */
.dl-retour-fotos.is-groot img {
    width: 88px;
    height: 88px;
}

/* Het bericht aan de klant, of van een collega: een blok met een streep in
   het merkblauw, bij de klant en in het beheer. */
.dl-retour-verzoek-bericht {
    margin: .5rem 0 0;
    padding: .55rem .75rem;
    border-left: 3px solid var(--dl-blue-600);
    border-radius: 0 min(8px, var(--dl-r-max)) min(8px, var(--dl-r-max)) 0;
    background: var(--surface-alt);
    font-size: .86rem;
    line-height: 1.5;
    color: var(--ink-soft);
    overflow-wrap: anywhere;
}

.dl-retour-verzoek-bericht strong {
    display: block;
    margin-bottom: .1rem;
    color: var(--ink);
}

/* De voet: het bericht over de hele breedte, daaronder het vinkje en de
   knoppen. De kolom expliciet op de volle breedte: de voet van een kaart
   zet space-between, en dan rekt een raster zijn kolom niet op. */
.dl-rbeh-besluit {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
    align-items: stretch;
    gap: .6rem;
}

.dl-rbeh-bericht {
    width: 100%;
    min-height: 3.4rem;
    padding: .55rem .85rem;
    border: 1px solid var(--line);
    border-radius: var(--dl-r-btn);
    background: #ffffff;
    font: inherit;
    font-size: .92rem;
    line-height: 1.45;
    color: var(--ink);
    resize: vertical;
}

.dl-rbeh-bericht:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft);
}

.dl-rbeh-onder {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
}

.dl-rbeh-mail {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .88rem;
    color: var(--ink-soft);
    cursor: pointer;
}

.dl-rbeh-mail input { width: 1rem; height: 1rem; accent-color: var(--dl-blue-700); }

.dl-rbeh-klaar {
    font-size: .86rem;
    color: var(--ink-soft);
}

/* Zestien pixels op een aanraakscherm, anders zoomt een iPhone in. */
@media (any-pointer: coarse) {
    .dl-rbeh-bericht { font-size: 16px; }
}



.dl-best-nr {
    color: var(--dl-blue-900);
    text-decoration: none;
}

.dl-best-nr:hover { color: var(--accent); text-decoration: none; }

@media (max-width: 520px) {
    /* De stuksprijs vervalt: die is uit te rekenen uit het aantal en het
       regeltotaal, en de artikelnaam heeft de ruimte harder nodig. Op een
       telefoon leest een naam over vijf regels als een blok tekst. */
    .dl-tabel-order th:nth-child(3),
    .dl-tabel-order td:nth-child(3) { display: none; }

    /* Zonder stuksprijs is de derde kolom het totaal, en die blijft. */
    .dl-tabel-order.is-kort th:nth-child(3),
    .dl-tabel-order.is-kort td:nth-child(3) { display: table-cell; }

    .dl-tabel-order th,
    .dl-tabel-order td { padding-left: .25rem; padding-right: .25rem; }
}


/* =====================================================================
   Bestellen in drie stappen
   =====================================================================
   De schermen tussen de winkelwagen en het betalen. Ze delen de
   tweekolomsopzet en de kaarten van de winkelwagen; wat hier staat is
   alleen wat er extra bij komt kijken.
   ===================================================================== */

/* De stappenbalk. Drie stappen op gelijke afstand met een lijn ertussen, en
   die lijn is gevuld tot waar je bent. Als pilletjes tegen elkaar aan las het
   als een rijtje knoppen; zo is het een route waar je je plek op ziet.

   Deze basis is neutraal; op de donkere kop komen er de kleuren van
   .dl-bestelbalk.is-donker overheen, verderop. */
.dl-bestelbalk {
    --dl-bol: 32px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Wie zonder account bestelt, heeft er een stap bij: dan vier op een rij,
   en op een telefoon twee rijen van twee, zoals de stappen van een
   bestelling. */
.dl-bestelbalk.is-vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 620px) {
    .dl-bestelbalk.is-vier { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1rem; }
    .dl-bestelbalk.is-vier .dl-bestelbalk-stap:nth-child(3)::before { display: none; }
}

.dl-bestelbalk-stap { position: relative; }

.dl-bestelbalk-stap > a,
.dl-bestelbalk-stap > span {
    display: grid;
    justify-items: center;
    gap: .5rem;
    padding: 0 .4rem;
    text-align: center;
    text-decoration: none;
    color: inherit;
}

/* De lijn naar de vorige stap: van de rand van dat bolletje tot de rand van
   dit, met een kiertje ervoor en erachter. Hij liep eerst van midden tot
   midden, en dan zie je hem op de donkere band dwars door het doorzichtige
   bolletje heen lopen. */
.dl-bestelbalk-stap:not(:first-child)::before {
    content: "";
    position: absolute;
    top: calc(var(--dl-bol) / 2 - 1px);
    right: calc(50% + var(--dl-bol) / 2 + 6px);
    left: calc(-50% + var(--dl-bol) / 2 + 6px);
    height: 2px;
    border-radius: min(2px, var(--dl-r-max));
    background: var(--line);
}

.dl-bestelbalk-teken {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: var(--dl-bol);
    height: var(--dl-bol);
    border: 2px solid var(--line);
    border-radius: min(999px, var(--dl-r-max));
    background: #ffffff;
    font-size: .84rem;
    font-weight: 700;
    color: var(--ink-faint);
}

.dl-bestelbalk-tekst { display: grid; gap: .1rem; }

.dl-bestelbalk-tekst strong {
    font-size: .88rem;
    font-weight: 700;
    color: var(--ink);
}


/* -- De stappenbalk op de donkere kop -----------------------------------
   Voor de bestelstraat en voor de stand van een bestelling: dezelfde kleuren,
   zodat de twee balken er in het hele portaal hetzelfde uitzien. Afgelegd en
   waar u nu staat in het groen, wat nog komt doorzichtig wit.

   In de bestelstraat was wat nog kwam rood. Een rood bolletje leest als een
   fout, terwijl het alleen een stap is die nog moet komen.
   --------------------------------------------------------------------- */

.dl-bestelbalk.is-donker {
    position: relative;
    margin-top: clamp(1.4rem, 1.1rem + 1.2vw, 2.2rem);
}

.dl-bestelbalk.is-donker .dl-bestelbalk-stap:not(:first-child)::before { background: rgba(255, 255, 255, .16); }

.dl-bestelbalk.is-donker .dl-bestelbalk-teken {
    border-color: rgba(255, 255, 255, .3);
    background: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .78);
}

.dl-bestelbalk.is-donker .dl-bestelbalk-tekst strong { color: rgba(255, 255, 255, .62); }

.dl-bestelbalk.is-donker .dl-bestelbalk-stap.is-bereikt:not(:first-child)::before { background: var(--dl-voortgang, var(--ok)); }

.dl-bestelbalk.is-donker .dl-bestelbalk-stap.is-klaar .dl-bestelbalk-teken,
.dl-bestelbalk.is-donker .dl-bestelbalk-stap.is-nu .dl-bestelbalk-teken {
    border-color: var(--dl-voortgang, var(--ok));
    background: var(--dl-voortgang, var(--ok));
    color: var(--dl-blue-950);
}

.dl-bestelbalk.is-donker .dl-bestelbalk-stap.is-nu .dl-bestelbalk-teken { box-shadow: 0 0 0 5px color-mix(in srgb, var(--dl-voortgang, var(--ok)) 22%, transparent); }

.dl-bestelbalk.is-donker .dl-bestelbalk-stap.is-klaar .dl-bestelbalk-tekst strong { color: rgba(255, 255, 255, .9); }
.dl-bestelbalk.is-donker .dl-bestelbalk-stap.is-nu .dl-bestelbalk-tekst strong { color: #ffffff; }

/* Een stap die al geweest is, is in de bestelstraat een link terug. */
.dl-bestelbalk.is-donker .dl-bestelbalk-stap.is-klaar > a:hover .dl-bestelbalk-tekst strong { color: #ffffff; }

.dl-bestelbalk.is-donker .dl-bestelbalk-stap.is-klaar > a:hover .dl-bestelbalk-teken {
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .16);
}

/* Een datum onder een stap: wanneer een bestelling binnenkwam of geleverd
   is. Klein en rustig: de stap is het nieuws, de datum de bijzin. */
.dl-bestelbalk.is-donker .dl-bestelbalk-datum {
    font-size: .76rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, .58);
}

@media (max-width: 560px) {
    .dl-bestelbalk-tekst strong { font-size: .8rem; }

    .dl-bestelbalk-stap > a,
    .dl-bestelbalk-stap > span { padding: 0 .15rem; gap: .4rem; }

    .dl-bestelbalk { --dl-bol: 28px; }
}

/* De band eronder sluit aan op de kop, dus daar hoeft bovenin geen lucht
   meer bij. */
.dl-kop.is-bestel + .dl-mand-vlak {
    padding-top: clamp(1.1rem, .9rem + .9vw, 1.75rem);
}

/* -- De kolom met kaarten ---------------------------------------------- */

.dl-bestel-kolom {
    display: grid;
    gap: clamp(.8rem, .7rem + .5vw, 1.1rem);
    align-content: start;
}

.dl-bestel-gegevens {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1.1rem;
}

.dl-bestel-gegevens p {
    margin: .25rem 0 0;
    font-size: .92rem;
    line-height: 1.6;
    color: var(--ink);
}

.dl-bestel-kopje {
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.dl-bestel-klein {
    font-size: .82rem;
    font-weight: 400;
    color: var(--ink-faint);
}

/* De voetregel van een kaart: waar je heen kunt als er iets niet klopt. */
.dl-bestel-voet {
    margin: 0;
    padding: .8rem 1rem .9rem;
    border-top: 1px solid var(--line-soft);
    border-radius: 0 0 var(--radius) var(--radius);
    background: #ffffff;
    font-size: .85rem;
    color: var(--ink-faint);
}

.dl-bestel-voet a { color: var(--accent); font-weight: 600; }

/* -- De regels, compacter dan in de winkelwagen ------------------------- */

.dl-bestel-regels {
    margin: 0;
    padding: 0 1rem;
    list-style: none;
    background: #ffffff;
}

.dl-bestel-regels li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: baseline;
    gap: .75rem;
    padding: .7rem 0;
    border-bottom: 1px solid var(--line-soft);
}

.dl-bestel-regels li:last-child { border-bottom: 0; }

.dl-bestel-aantal {
    min-width: 2.2rem;
    font-size: .92rem;
    font-weight: 700;
    color: var(--dl-blue-900);
}

.dl-bestel-wat { display: grid; gap: .1rem; min-width: 0; }

.dl-bestel-wat a {
    font-size: .93rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--dl-blue-900);
    text-decoration: none;
}

.dl-bestel-wat a:hover { color: var(--accent); }

.dl-bestel-bedrag {
    font-size: .95rem;
    font-weight: 700;
    color: var(--dl-blue-900);
    white-space: nowrap;
}

/* -- Het akkoord -------------------------------------------------------- */

/* Een vinkje waar je op kunt tikken zonder te mikken: het hele blokje is
   aanraakbaar, en het staat in een eigen vlak zodat het niet wegvalt tussen
   de bedragen erboven en de knop eronder. */
.dl-akkoord {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .65rem;
    align-items: start;
    margin: .3rem 0 1rem;
    padding: .8rem .9rem;
    border: 1px solid rgba(220, 38, 38, .45);
    border-radius: var(--radius);
    background: #fef3f2;
    transition: background-color .15s ease, border-color .15s ease;
}

/* Rood zolang er geen vinkje staat, groen zodra het er wel staat. */
.dl-akkoord input {
    width: 20px;
    height: 20px;
    margin: .1rem 0 0;
    accent-color: #0f9f74;
    cursor: pointer;
}

.dl-akkoord label {
    font-size: .88rem;
    line-height: 1.55;
    color: #c0332c;
    cursor: pointer;
}

.dl-akkoord a { color: inherit; font-weight: 700; text-decoration: none; }

.dl-akkoord:has(input:checked) {
    border-color: rgba(15, 159, 116, .5);
    background: #ecfbf5;
}

.dl-akkoord:has(input:checked) label { color: #0b7a59; }

.dl-akkoord.is-mis {
    border-width: 2px;
}

.dl-akkoord-fout {
    margin: -.6rem 0 .9rem;
    font-size: .85rem;
    color: #c0332c;
}

/* -- Betaalmanieren ----------------------------------------------------- */

.dl-betaal-lijst {
    margin: 0;
    padding: .3rem 1rem 1rem;
    list-style: none;
    display: grid;
    gap: .6rem;
    background: #ffffff;
    border-radius: 0 0 var(--radius) var(--radius);
}

.dl-betaal-lijst li {
    display: grid;
    gap: .2rem;
    padding: .8rem .9rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-size: .88rem;
    line-height: 1.55;
    color: var(--ink-soft);
}

.dl-betaal-lijst li.is-nu {
    border-color: color-mix(in srgb, var(--dl-blue-700) 35%, transparent);
    background: var(--accent-soft);
}

.dl-betaal-kop {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.dl-betaal-kop strong {
    font-size: .95rem;
    color: var(--dl-blue-900);
}

.dl-betaal-merk {
    padding: .1rem .5rem;
    border-radius: min(999px, var(--dl-r-max));
    background: var(--surface-alt);
    font-size: .74rem;
    font-weight: 600;
    color: var(--ink-faint);
}

.dl-betaal-lijst li.is-nu .dl-betaal-merk {
    background: #ffffff;
    color: var(--accent);
}

/* De betaalwijze is een keuze: een rondje voor de tekst, en de hele rij is
   aan te klikken. Een rij die nu niet kan, staat er grijs bij met de reden. */
.dl-betaal-keuze { min-width: 0; margin: 0; padding: 0; border: 0; }

.dl-betaal-optie {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    cursor: pointer;
}

.dl-betaal-optie input {
    flex: none;
    width: 18px;
    height: 18px;
    margin: .15rem 0 0;
    accent-color: var(--dl-blue-700);
}

.dl-betaal-optie input:disabled { cursor: not-allowed; }
.dl-betaal-lijst li.is-later .dl-betaal-optie { cursor: default; }

.dl-betaal-tekst { display: grid; gap: .2rem; flex: 1 1 auto; min-width: 0; }

/* Terug van Mollie terwijl de betaling nog loopt. */
.dl-betaal-wacht .dl-kaart-in > p { margin: 0 0 .8rem; line-height: 1.6; }
.dl-betaal-wacht-stand { font-size: .86rem; color: var(--ink-faint); }

/* -- Facturen in één keer betalen ----------------------------------------
   De rijen van de betaalmanieren, met een vinkje in plaats van een rondje en
   rechts het bedrag dat er van de factuur betaald wordt. Een factuur die niet
   gekozen is, verliest de kleur; een factuur waarvoor al een betaling loopt,
   staat er grijs bij zonder bedrag.
   ----------------------------------------------------------------------- */

.dl-alles-lijst li {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 1rem;
}

.dl-alles-lijst li.is-nu:not(:has([data-alles-vink]:checked)) {
    border-color: var(--line);
    background: #ffffff;
}

.dl-alles-lijst li.is-later { background: var(--surface-alt); }

.dl-alles-lijst li .dl-betaal-merk.is-laat {
    background: #fdecea;
    color: #b42318;
}

.dl-alles-geld { white-space: nowrap; }

.dl-alles-bedrag {
    display: grid;
    gap: .2rem;
    justify-items: end;
}

.dl-alles-bedrag label {
    font-size: .74rem;
    font-weight: 600;
    color: var(--ink-faint);
}

.dl-alles-bedrag input {
    width: 7.5rem;
    padding: .45rem .65rem;
    border: 1px solid var(--line);
    border-radius: min(8px, var(--dl-r-max));
    background: #ffffff;
    font: inherit;
    font-size: .95rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--ink);
}

.dl-alles-bedrag input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.dl-alles-bedrag input:disabled {
    background: var(--surface-alt);
    color: var(--ink-faint);
}

.dl-alles-bedrag input.is-fout { border-color: #c0332c; }

.dl-alles-loopt > p { margin: 0 0 .8rem; line-height: 1.6; }
.dl-alles-loopt .dl-mand-acties { display: flex; flex-wrap: wrap; }

.dl-alles-terug { padding-top: 0; border-top: 0; }

@media (max-width: 560px) {
    .dl-alles-lijst li { grid-template-columns: minmax(0, 1fr); }
    .dl-alles-bedrag { justify-items: start; padding-left: calc(18px + .7rem); }
}

/* Wat er eerst anders moet voordat er besteld kan worden. */
.dl-bestel-fouten {
    display: grid;
    gap: .45rem;
    margin: 0 0 1rem;
    padding: 0 0 0 1.1rem;
    font-size: .88rem;
    line-height: 1.55;
    color: var(--ink-soft);
}

/* Afhalen of bezorgen, als de klant mag kiezen. */
.dl-bestel-levering {
    display: grid;
    gap: .6rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    grid-column: 1 / -1;
}

.dl-bestel-optie {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .8rem .9rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    cursor: pointer;
}

.dl-bestel-optie:has(input:checked) {
    border-color: color-mix(in srgb, var(--dl-blue-700) 35%, transparent);
    background: var(--accent-soft);
}

.dl-bestel-optie input {
    flex: none;
    width: 18px;
    height: 18px;
    margin: .15rem 0 0;
    accent-color: var(--dl-blue-700);
}

.dl-bestel-optie p { margin: .25rem 0 0; }

/* Waar het heen gaat bij bezorgen: het bedrijf of een afleveradres. Onder
   de keuze afhalen of bezorgen; kiest de klant afhalen, dan is hij weg. */
.dl-bestel-bezorgnaar { grid-column: 1 / -1; min-width: 0; margin: 0; }

.dl-bestel-gegevens:has(input[name="levering"][value="pickup"]:checked) .dl-bestel-bezorgnaar { display: none; }

.dl-bestel-adressen {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: .6rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.dl-bestel-adressen legend { margin-bottom: .45rem; padding: 0; }
.dl-bestel-adressen > .dl-bestel-klein { grid-column: 1 / -1; margin: .1rem 0 0; }

.dl-bestel-adres {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .75rem .85rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    cursor: pointer;
}

.dl-bestel-adres:has(input:checked) {
    border-color: color-mix(in srgb, var(--dl-blue-700) 35%, transparent);
    background: var(--accent-soft);
}

.dl-bestel-adres input {
    flex: none;
    width: 18px;
    height: 18px;
    margin: .15rem 0 0;
    accent-color: var(--dl-blue-700);
}

.dl-bestel-adres > span > strong { display: block; font-size: .92rem; }
.dl-bestel-adres p { margin: .2rem 0 0; font-size: .86rem; }

/* =====================================================================
   Meldingen
   =====================================================================
   Vier soorten, elk met een eigen kleur en teken: gelukt (groen), ter
   info (merkblauw), let op (amber) en niet gelukt (rood).

   Of hij van de server komt of na een handeling: het is altijd dezelfde
   zwever, rechtsboven net onder de koptekst, in het donkerblauw van de kop
   en de kaartkoppen. Niet in de pagina zelf. Daar stond hij in een witte
   strook tussen de koptekst en de inhoud, over de hele breedte, en schoof
   alles eronder omlaag.

   Nooit wit. Een wit kaartje met een dunne rand viel weg tegen de witte
   koptekst en zag eruit als iets van de browser, niet van DutchLine. In
   een formulier is hij getint in de eigen kleur, ook niet wit.

   Kleur alleen is niet genoeg. Een op de twaalf mannen ziet rood en
   groen niet uit elkaar, dus staat het teken er altijd bij en zegt de
   tekst zelf wat er aan de hand is.
   ===================================================================== */

/* Per soort: het rondje met het teken, een lichte tint voor op het
   donkerblauw (de uitweg en het balkje), en voor in een formulier een
   getint vlak met een rand en een donkere tekstkleur. Alles dicht en niets
   doorzichtig: wat eronder ligt, hoort er niet doorheen te schemeren. */
.dl-melding.is-goed {
    --dl-melding-kleur: #12a37f;
    --dl-melding-licht: #6ee0bd;
    --dl-melding-vlak:  #e6f6f0;
    --dl-melding-rand:  #bde5d6;
    --dl-melding-inkt:  #0b6650;
}

.dl-melding.is-info {
    --dl-melding-kleur: var(--dl-blue-500);
    --dl-melding-licht: #aab7ef;
    --dl-melding-vlak:  #eceffb;
    --dl-melding-rand:  #d2d8f4;
    --dl-melding-inkt:  var(--dl-blue-800);
}

.dl-melding.is-let {
    --dl-melding-kleur: #e3a008;
    --dl-melding-licht: #ffd36b;
    --dl-melding-vlak:  #fdf5de;
    --dl-melding-rand:  #f1dda2;
    --dl-melding-inkt:  #7a5300;
}

.dl-melding.is-fout {
    --dl-melding-kleur: #e5484d;
    --dl-melding-licht: #ff9fa2;
    --dl-melding-vlak:  #fdecec;
    --dl-melding-rand:  #f4c5c6;
    --dl-melding-inkt:  #9c1f25;
}

/* De vorm, zoals hij in een formulier staat: het rondje, de soort in een
   woord en daaronder de zin, op een vlak in de eigen tint. */
.dl-melding {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: .75rem;
    padding: .8rem .9rem .85rem .8rem;
    border: 1px solid var(--dl-melding-rand, var(--line));
    border-radius: min(14px, var(--dl-r-max));
    background: var(--dl-melding-vlak, var(--surface-alt));
    font-size: .9rem;
    line-height: 1.5;
}

/* Een vol rondje in de eigen kleur met het teken erin. Amber met wit erop is
   niet te lezen; daar staat het teken donker. */
.dl-melding-teken {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: min(999px, var(--dl-r-max));
    background: var(--dl-melding-kleur, var(--accent));
    color: #ffffff;
}

.dl-melding.is-let .dl-melding-teken { color: #2b1d00; }

.dl-melding-lijf { min-width: 0; }

.dl-melding-kop {
    display: block;
    margin: .25rem 0 .1rem;
    font-size: .88rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--dl-melding-inkt, var(--ink));
}

.dl-melding-tekst {
    margin: 0;
    color: var(--ink-soft);
}

/* De uitweg op een eigen regel onder de zin, als tekst in de eigen kleur met
   een pijltje erachter. Geen knop: die was luider dan het bericht. Wel groot
   genoeg om te raken. Het pijltje is getekend, geen teken uit een lettertype. */
.dl-melding-tekst a {
    display: flex;
    align-items: center;
    gap: .45rem;
    width: fit-content;
    margin-top: .25rem;
    padding: .2rem 0;
    font-size: .84rem;
    font-weight: 700;
    color: var(--dl-melding-inkt, var(--accent));
    text-decoration: none;
    white-space: nowrap;
}

.dl-melding-tekst a::after {
    content: "";
    width: .42em;
    height: .42em;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .14s ease;
}

.dl-melding-tekst a:hover { text-decoration: underline; text-underline-offset: 3px; }
.dl-melding-tekst a:hover::after { transform: translateX(2px) rotate(45deg); }

/* De sluitknop wordt door het script toegevoegd; zonder script staat hij er
   niet, want dan zou hij niets doen. */
.dl-melding-sluit {
    grid-column: 3;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    margin: -.1rem -.3rem 0 0;
    border: 0;
    border-radius: min(8px, var(--dl-r-max));
    background: none;
    color: var(--ink-faint);
    cursor: pointer;
    transition: background .14s ease, color .14s ease;
}

.dl-melding-sluit:hover { background: rgba(16, 17, 12, .06); color: var(--ink); }

/* In een formulier: tussen een kop en een invoerveld. */
.dl-melding.is-inline { margin: 1.1rem 0 0; }

/* -- De zwevers -----------------------------------------------------
   Rechtsboven, net onder de donkere topbalk: daar staan ze op de hele site.
   Niet onder de hele koptekst met het menu, want dan hingen ze midden in de
   pagina. De topbalk scrolt mee weg; theme.js meet waar hij ophoudt en zet
   dat in --dl-meldingen-top, en is hij uit beeld, dan staan ze in de hoek
   van het scherm over de koptekst die blijft staan. Zonder javascript geldt
   de stand op de hoogte van de topbalk.

   Drie maten. Op een tablet een kaartje in de hoek. Op een groot scherm
   ruimer, met grotere letters, in de hoek van het scherm: in de maat van
   een tablet en naast de inhoud geschoven zag hij er daar uit als iets dat
   voor een kleiner scherm bedoeld was. Op een telefoon over de volle
   breedte: daar is geen ruimte voor een kaartje dat het halve scherm
   afdekt.
   ------------------------------------------------------------------- */

.dl-toasts {
    position: fixed;
    top: var(--dl-meldingen-top, calc(38px + .75rem));
    right: 1rem;
    z-index: 120;
    display: grid;
    gap: .6rem;
    width: min(26rem, calc(100vw - 2rem));

    /* Alleen de meldingen zelf vangen een klik; de lege ruimte eronder hoort
       gewoon door te laten naar de pagina. */
    pointer-events: none;
}

/* Het donkerblauw van de kop, met een haarlijn om hem los te zetten van een
   donkere band eronder, en een diepe schaduw: hij ligt over de pagina heen. */
.dl-toasts .dl-melding {
    pointer-events: auto;
    padding: .9rem .95rem 1.05rem .9rem;
    border: 1px solid rgba(255, 255, 255, .13);
    background: var(--dl-blue-950);
    box-shadow: 0 22px 48px rgba(10, 13, 38, .34), 0 4px 12px rgba(10, 13, 38, .18);
    overflow: hidden;
}

.dl-toasts .dl-melding-kop   { color: #ffffff; }
.dl-toasts .dl-melding-tekst { color: rgba(255, 255, 255, .76); }
.dl-toasts .dl-melding-tekst a { color: var(--dl-melding-licht, #ffffff); }

.dl-toasts .dl-melding-sluit { color: rgba(255, 255, 255, .55); }
.dl-toasts .dl-melding-sluit:hover { background: rgba(255, 255, 255, .1); color: #ffffff; }

.dl-toasts .dl-melding-sluit:focus-visible {
    outline: 2px solid var(--dl-melding-licht, #ffffff);
    outline-offset: 1px;
}

@media (prefers-reduced-motion: no-preference) {
    .dl-toasts .dl-melding {
        animation: dl-toast-in .3s cubic-bezier(.16, 1, .3, 1) both;
    }

    .dl-toasts .dl-melding.is-weg {
        animation: dl-toast-uit .22s ease-in both;
    }
}

@keyframes dl-toast-in {
    from { opacity: 0; transform: translateY(-.5rem) scale(.98); }
    to   { opacity: 1; transform: none; }
}

/* Aan het eind ook onzichtbaar voor de muis: een melding die vervaagd is maar
   nog klikken opvangt, zit de knoppen eronder in de weg. */
@keyframes dl-toast-uit {
    from { opacity: 1; transform: none; }
    to   { opacity: 0; transform: translateY(-.3rem); visibility: hidden; }
}

/* -- Hoe lang hij nog blijft staan --------------------------------------
   Een balkje dat leegloopt. Het is niet alleen versiering: zonder dat
   weet je niet of een melding zo weg is of blijft staan, en dan lees je
   hem sneller dan nodig - of je wacht op iets dat niet gebeurt.

   Het leeglopen is een animatie en geen javascript-teller. Daardoor is
   stilzetten één regel css: bij aanwijzen pauzeert de animatie, en omdat
   het einde van diezelfde animatie het sein is om te verdwijnen, staat de
   hele melding stil zolang je erop staat. Handig als je het artikelnummer
   uit een melding wilt overnemen.
   --------------------------------------------------------------------- */

.dl-melding-balk {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: rgba(255, 255, 255, .08);
}

.dl-melding-balk i {
    display: block;
    height: 100%;
    background: var(--dl-melding-licht, var(--accent));
    transform-origin: left center;
    animation-name: dl-melding-loopt;
    animation-duration: var(--dl-melding-tijd, 5000ms);
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

/* Wie "minder beweging" aan heeft krijgt in het basisthema alle animaties op
   nul milliseconden. Terecht voor het inschuiven van een melding, maar niet
   voor dit balkje: dat is geen versiering maar de klok zelf, en op nul
   milliseconden is de melding weg voordat hij gelezen is. Hij houdt dus zijn
   eigen looptijd - de beweging is drie pixels hoog en gaat één kant op. */
@media (prefers-reduced-motion: reduce) {
    .dl-toasts .dl-melding-balk i {
        animation-duration: var(--dl-melding-tijd, 5000ms) !important;
    }
}

/* Aanwijzen, aanraken of met het toetsenbord binnenkomen zet hem stil. Ook
   als er tekst in geselecteerd staat - dan is de bezoeker hem aan het
   overnemen, en die hoort niet halverwege weg te schuiven. */
.dl-toasts .dl-melding:hover .dl-melding-balk i,
.dl-toasts .dl-melding:focus-within .dl-melding-balk i,
.dl-toasts .dl-melding.is-vast .dl-melding-balk i {
    animation-play-state: paused;
}

@keyframes dl-melding-loopt {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

/* Een groot scherm: breder, ruimer en grotere letters. */
@media (min-width: 1200px) {
    .dl-toasts {
        right: 1.5rem;
        gap: .75rem;
        width: 30rem;
    }

    .dl-toasts .dl-melding {
        gap: .9rem;
        padding: 1.1rem 1.15rem 1.3rem 1.1rem;
        border-radius: min(16px, var(--dl-r-max));
        font-size: .95rem;
    }

    .dl-toasts .dl-melding-teken { width: 36px; height: 36px; }
    .dl-toasts .dl-melding-teken svg { width: 18px; height: 18px; }
    .dl-toasts .dl-melding-kop { margin-top: .35rem; font-size: 1rem; }
    .dl-toasts .dl-melding-tekst a { font-size: .88rem; }
    .dl-toasts .dl-melding-sluit { width: 32px; height: 32px; }
}

/* Een telefoon: over de volle breedte, iets compacter. */
@media (max-width: 560px) {
    .dl-toasts {
        right: .6rem;
        left: .6rem;
        width: auto;
    }

    .dl-toasts .dl-melding {
        padding: .8rem .85rem .95rem .8rem;
        font-size: .88rem;
    }
}

/* Zonder script is er geen sluitknop en geen klok. Gelukt en ter info gaan
   dan na een paar seconden vanzelf; let op en niet gelukt blijven staan,
   want die horen gelezen te worden. */
@media (scripting: none) {
    .dl-toasts .dl-melding.is-goed,
    .dl-toasts .dl-melding.is-info {
        animation: dl-toast-in .3s ease-out both, dl-toast-uit .22s ease-in 7s forwards;
    }
}

/* Terwijl een live kaart of een verzoek in het beheer wordt verstuurd: pas
   na een moment wat rustiger, zodat een snel antwoord geen flits geeft.
   Klikken kan dan niet, dus twee keer versturen ook niet. */
[data-live-bezig] form,
form[data-live-bezig],
[data-verz-bezig] {
    opacity: .6;
    pointer-events: none;
    transition: opacity .15s ease .2s;
}

/* Na het versturen staat de focus op de kaart zelf; die hoeft geen rand. */
[data-live-kaart]:focus { outline: none; }

.dl-verz-open > [hidden] { display: none; }

/* Een overzicht dat zonder herladen wisselt: de catalogus, de zoekresultaten
   en de verkooppunten. Tijdens het wisselen dooft de lijst, pas als het
   antwoord er na 180 ms nog niet is (BEZIG_PAUZE in theme.js). Niet weghalen
   en opnieuw opbouwen: dan springt de pagina omhoog.

   Terug van een artikel of na verversen staat de lijst even uit, tot de
   stand van daarnet er weer staat; zie partials/overzicht-herstel.
   visibility en niet display, zodat de ruimte bezet blijft. Na anderhalve
   seconde komt hij hoe dan ook terug: laadt theme.js niet, dan is er niemand
   die de klasse weghaalt, en een lege pagina is erger dan de verkeerde stand.
   Zelfde afspraak als bij de bestellingen. */
[data-overzicht-lijst] { transition: opacity .18s ease; }

[data-overzicht].is-bezig [data-overzicht-lijst] {
    opacity: .4;
    pointer-events: none;
}

[data-overzicht].is-herstel [data-overzicht-lijst] {
    visibility: hidden;
    animation: dl-herstel 0s linear 1.5s forwards;
}

/* Na het wisselen staat de focus soms op de lijst zelf; die hoeft geen rand. */
[data-overzicht-lijst]:focus { outline: none; }

/* Terwijl een regel bijgewerkt wordt. Niet weghalen maar laten vervagen: een
   regel die verdwijnt en terugkomt laat de pagina springen. */
[data-mand-bezig] { opacity: .55; transition: opacity .12s ease; }


/* =====================================================================
   De winkelwagenlade
   =====================================================================
   Schuift rechts in zodra er iets in de mand gaat. De pagina eronder
   blijft staan: wie aan het kiezen is hoort niet steeds weggehaald te
   worden naar een ander scherm om te zien wat hij al heeft.
   ===================================================================== */

.dl-lade-open,
.dl-lade-open body { overflow: hidden; }

.dl-lade {
    position: fixed;
    inset: 0;
    z-index: 1900;
}

.dl-lade[hidden] { display: none; }

.dl-lade-waas {
    position: absolute;
    inset: 0;
    background: rgba(12, 17, 40, .5);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity .22s ease;
}

.dl-lade.is-open .dl-lade-waas { opacity: 1; }

.dl-lade-doos {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(26rem, 100vw);
    display: flex;
    flex-direction: column;
    background: var(--surface-alt);
    box-shadow: -18px 0 50px rgba(10, 16, 40, .25);
    transform: translateX(100%);
    transition: transform .26s cubic-bezier(.22, .7, .3, 1);
}

.dl-lade.is-open .dl-lade-doos { transform: none; }

@media (prefers-reduced-motion: reduce) {
    .dl-lade-waas,
    .dl-lade-doos { transition: none; }
}

/* De kop: dezelfde balk als op een kaart, zodat de lade bij de winkel hoort. */
.dl-lade-kop {
    flex: none;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .7rem;
    padding: .9rem 1rem .9rem 1.1rem;
    background: var(--dl-blue-900);
    color: #ffffff;
}

.dl-lade-teken {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: min(10px, var(--dl-r-max));
    background: rgba(255, 255, 255, .14);
}

.dl-lade-kop h2 {
    margin: 0;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #ffffff;
}

.dl-lade-sluit {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: min(9px, var(--dl-r-max));
    background: none;
    color: rgba(255, 255, 255, .7);
    cursor: pointer;
}

.dl-lade-sluit:hover { background: rgba(255, 255, 255, .14); color: #ffffff; }

/* Het schuifbare deel. De voet blijft staan, want daar zit het totaal en de
   knop waar deze lade voor bedoeld is. */
.dl-lade-in {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.dl-lade-rol {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: .8rem;
}

.dl-lade-rol .dl-mand-lijst {
    padding: 0 .9rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.dl-lade-voet {
    flex: none;
    padding: .9rem 1rem 1.1rem;
    border-top: 1px solid var(--line);
    background: #ffffff;
}

.dl-lade-voet .dl-mand-tel-lijst { margin-bottom: .9rem; }

.dl-lade-knoppen { display: grid; gap: .5rem; }

/* De lege lade. Komt alleen voor als je de laatste regel eruit haalt terwijl
   hij openstaat - en dan hoort er iets te staan in plaats van niets. */
.dl-lade-leeg {
    flex: 1;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: .2rem;
    padding: 2rem 1.5rem;
    text-align: center;
}

.dl-lade-leeg p {
    margin: .4rem 0 1rem;
    font-size: .95rem;
    color: var(--ink-soft);
}

.dl-lade-leeg .btn { width: 100%; justify-content: center; }

/* -- De regels in de lade -----------------------------------------------
   Dezelfde regel als op de winkelwagenpagina, alleen krapper: geen foto van
   tweeënzeventig pixels en geen bedrag helemaal rechts, want die kolom is er
   niet. Het regeltotaal schuift naar de tweede regel, naast de bediening.
   ---------------------------------------------------------------------- */

/* De foto links, de naam ernaast, en daaronder de bediening met het bedrag
   rechts. Het stond eerst onder elkaar - foto, dan pas de naam - omdat de
   naamkolom op honderd procent min zestig pixels stond terwijl de foto plus de
   tussenruimte al drieënzestig innam. Drie pixels te veel, en dan klapt een
   flexregel om. Nu een raster met vaste plekken, dus dat kan niet meer. */
.dl-mand-regel.is-krap {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    grid-template-areas:
        "foto wat    wat"
        "foto doen   totaal";
    align-items: center;
    gap: .55rem .75rem;
    padding: .9rem 0;
}

.dl-mand-regel.is-krap .dl-mand-foto {
    grid-area: foto;
    align-self: start;
    width: 52px;
    height: 52px;
    border-radius: min(10px, var(--dl-r-max));
}

.dl-mand-regel.is-krap .dl-mand-wat {
    grid-area: wat;
    gap: .15rem;
}

.dl-mand-regel.is-krap .dl-mand-naam { font-size: .9rem; }

.dl-mand-regel.is-krap .dl-mand-doen {
    grid-area: doen;
    flex: none;
    gap: .35rem;
}

.dl-mand-regel.is-krap .dl-mand-aantal input { width: 2.8rem; }
.dl-mand-regel.is-krap .dl-mand-bij { padding: .4rem .5rem; font-size: .74rem; }
.dl-mand-regel.is-krap .dl-mand-weg { width: 32px; height: 32px; }

.dl-mand-regel.is-krap .dl-mand-regeltotaal {
    grid-area: totaal;
    margin-left: 0;
    min-width: 0;
    font-size: .95rem;
    white-space: nowrap;
}

/* Op een telefoon vult de lade het scherm op een randje na: smaller heeft geen
   zin, want dan past de bediening van een regel er niet meer in. */
@media (max-width: 480px) {
    .dl-lade-doos { width: min(22rem, calc(100vw - 2.5rem)); }
    .dl-lade-rol { padding: .6rem; }
    .dl-lade-rol .dl-mand-lijst { padding: 0 .7rem; }
}

/* =====================================================================
   Aanraken in plaats van aanwijzen
   =====================================================================
   Wat hier staat geldt alleen op een scherm dat je met je vinger bedient.
   Twee dingen die je op een bureaublad nooit merkt en op een telefoon
   meteen:

   Een invoerveld met een letter kleiner dan 16 pixels laat Safari op iOS
   inzoomen zodra je erin tikt. De pagina springt dan naar voren en blijft
   ingezoomd staan; de bezoeker moet zelf terugknijpen. Dat is niet met
   user-scalable=no te onderdrukken - dat zou ook betekenen dat niemand meer
   kan inzoomen - en de enige nette oplossing is het veld gewoon 16 pixels
   geven.

   En een vinger is geen muisaanwijzer: alles waar je op moet tikken hoort
   minstens vierentwintig pixels hoog te zijn (WCAG 2.5.8), en liefst meer.
   ===================================================================== */

/* De lijst is lang omdat het basisthema zijn velden per type aanspreekt
   (.field input[type="text"] en zo). Een kortere .field input weegt lichter
   en verliest het dan, hoe ver achteraan hij ook staat.

   Op maat van het aanwijsapparaat en niet op schermbreedte: een iPad in
   liggende stand is duizendvierentwintig pixels breed en toch een
   aanraakscherm. any-pointer vangt ook de laptop met een aanraakscherm. */
@media (any-pointer: coarse) {
    .header-search input,
    .dl-oc-search input,
    .dl-fout-zoek input,
    .dl-best-zoek input,
    .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,
    .field .dl-veld input,
    .dl-velden input,
    .dl-keuze {
        font-size: 16px;
    }
}

@media (any-pointer: coarse) {
    /* Het oogje bij het wachtwoord. */
    .dl-veld-oog { width: 40px; height: 40px; }

    /* Een vinkje met zijn tekst ernaast: de hele regel is aanklikbaar, maar
       hij was drieëntwintig pixels hoog. */
    .check {
        min-height: 32px;
        align-items: center;
    }

    /* Losse tekstlinks die als knop dienen: onder een antwoord op de
       klantenservicepagina, naast een veldnaam, en onderaan een kaart. */
    .dl-veld-kop a,
    .dl-inlog-hulp a,
    .dl-ontvangen-klein a {
        display: inline-block;
        padding-block: .35rem;
    }

    .dl-ks-verder { padding-block: .35rem; }

    /* De bollen op de dealerkaart. Ze zijn zo groot als het aantal dealers
       in die plaats, en de kleinste komt op een telefoon uit op elf pixels.
       Dit vangvlak is doorzichtig en ligt eronder: het maakt het aanraken
       makkelijker zonder dat de kaart er anders uitziet. Het staat alleen op
       een aanraakscherm, want met een muis zouden de vlakken van twee
       plaatsen die dicht bij elkaar liggen elkaar overlappen.

       r als stijl in plaats van als kenmerk kan sinds svg2. Kent een browser
       het niet, dan blijft de straal nul en verandert er niets. */
    .dl-stip-vang { r: 26px; }
}

/* De keuzelijst in het aanmeldformulier. Dezelfde maat en rand als een
   invoerveld ernaast, anders staat er een vak van de browser tussen twee
   vakken van ons. */
.dl-keuze {
    width: 100%;
    height: 44px;
    padding: 0 2.2rem 0 .85rem;
    border: 1px solid var(--line);
    border-radius: var(--dl-r-btn);
    background: #ffffff;
    font: inherit;
    font-size: .94rem;
    color: var(--ink);

    /* Het eigen pijltje van de browser weg, en er een van onszelf voor in de
       plaats: die van Windows en die van macOS zien er anders uit, en dit is
       het enige veld op de pagina dat er dan uit de toon valt. */
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235b6472' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .85rem center;
}

.dl-keuze:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft);
}

/* -- Bevestigen ------------------------------------------------------------
   De modal die theme.js bouwt voor een formulier of knop met data-bevestig.
   Geen window.confirm(): die bevriest het tabblad en ziet er in elke browser
   anders uit. Annuleren links en rustig, de handeling rechts en rood, want
   wat daar gebeurt is niet terug te draaien.
   ----------------------------------------------------------------------- */

/* Rood, maar niet het rood van een brandmelder. #dc2626 naast het merkblauw
   trekt alle aandacht naar de knop die je meestal juist níet moet indrukken;
   deze tint is dieper en blijft bij de rest horen. */
.btn-danger {
    --dl-btn-vulling:       #b3312b;
    --dl-btn-vulling-hover: #932722;
    --dl-btn-tekst:         #ffffff;
    --dl-btn-ring:          #b3312b;
}

.dl-bevestig-open,
.dl-bevestig-open body { overflow: hidden; }

.dl-bevestig {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: center;
    padding: 1rem;
}

.dl-bevestig[hidden] { display: none; }

.dl-bevestig-waas {
    position: absolute;
    inset: 0;
    background: rgba(12, 17, 40, .6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity .18s ease;
}

/* Links uitgelijnd en niet gecentreerd. Gecentreerd werkt voor een kort
   "Weet u het zeker?", maar zodra er een artikelnaam in staat wordt het een
   blok tekst waarvan elke regel op een andere plek begint. */
.dl-bevestig-doos {
    position: relative;
    width: min(100%, 31rem);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: #ffffff;
    box-shadow: 0 26px 64px rgba(10, 16, 40, .3);
    text-align: left;
    overflow: hidden;
    opacity: 0;
    transform: translateY(8px) scale(.975);
    transition: opacity .18s ease, transform .18s ease;
}

.dl-bevestig.is-open .dl-bevestig-waas { opacity: 1; }
.dl-bevestig.is-open .dl-bevestig-doos { opacity: 1; transform: none; }

/* De kopbalk van een DutchLine-kaart: merkblauw, klein en in kapitalen. Zo
   hoort dit venster bij de winkel en niet bij het besturingssysteem. */
.dl-bevestig-kop {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .7rem;
    padding: .85rem 1rem .85rem 1.1rem;
    background: var(--dl-blue-900);
    color: #ffffff;
}

.dl-bevestig-teken {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: min(10px, var(--dl-r-max));
    background: rgba(255, 255, 255, .14);
    color: #ffffff;
}

.dl-bevestig-doos h2 {
    margin: 0;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #ffffff;
}

.dl-bevestig-sluit {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: min(9px, var(--dl-r-max));
    background: none;
    color: rgba(255, 255, 255, .7);
    cursor: pointer;
}

.dl-bevestig-sluit:hover { background: rgba(255, 255, 255, .14); color: #ffffff; }

.dl-bevestig-lijf { padding: 1.15rem 1.1rem .25rem; }

.dl-bevestig-doos p {
    margin: 0;
    font-size: .94rem;
    line-height: 1.6;
    color: var(--ink-soft);
}

/* Waar het over gaat, op een eigen regel met een merkblauwe rand ervoor. Zo
   blijft de vraag één zin en is in één oogopslag te zien wát er weggaat. */
.dl-bevestig-item {
    margin: .9rem 0 0 !important;
    padding: .7rem .9rem;
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: min(4px, var(--dl-r-max)) min(12px, var(--dl-r-max)) min(12px, var(--dl-r-max)) min(4px, var(--dl-r-max));
    background: var(--surface-alt);
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--dl-blue-900) !important;
    overflow-wrap: anywhere;
}

.dl-bevestig-item[hidden] { display: none; }

/* Annuleren links, doorzetten rechts, met de volle breedte ertussen. */
.dl-bevestig-knoppen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    margin-top: 1.2rem;
    padding: 1rem 1.1rem 1.1rem;
    border-top: 1px solid var(--line-soft);
    background: var(--surface-alt);
}

.dl-bevestig-knoppen .btn { justify-content: center; }
.dl-bevestig-knoppen .btn-outline { background: #ffffff; }

/* Op een smal scherm onder elkaar in dezelfde volgorde als links en rechts:
   annuleren boven, doorzetten onder. Andersom - de rode knop bovenaan, waar de
   duim hem als eerste raakt - is precies de knop die je niet per ongeluk wilt
   indrukken. */
@media (max-width: 460px) {
    .dl-bevestig-knoppen { flex-direction: column; }
    .dl-bevestig-knoppen .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .dl-bevestig-waas,
    .dl-bevestig-doos { transition: none; }
}

/* =====================================================================
   Onderdelen die per website aan of uit staan
   =====================================================================
   De opmaak bij wat een website met een onderdeel of in theme.php
   aanzet: het menu per categorie, de zoeksuggesties, de knoppen
   rechtsonder, de foto's op een kaart, de filters, de beoordelingen en
   wat er op de productpagina bij kan. In de kleuren en rondingen van de
   variabelen, zodat elk theme ze in zijn eigen stijl krijgt zonder ze
   over te schrijven.
   ===================================================================== */

/* -- Het menu per categorie -------------------------------------------
   De hoofdcategorieën zelf in de balk (menu "per-categorie" in theme.php).
   Het paneel met de subcategorieën opent pas na een tel en sluit ook na
   een tel: wie schuin naar het paneel gaat, komt anders over de buurman.
   --------------------------------------------------------------------- */

.dl-menu-balk { border-top: 1px solid var(--line-soft); background: var(--surface); box-shadow: inset 0 -1px 0 var(--line-soft); }

.dl-menu-lijst {
    display: flex;
    flex-wrap: wrap;
    gap: .2rem;
    margin: 0 0 0 -.85rem;
    padding: .5rem 0;
    list-style: none;
}

.dl-menu-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 2.25rem;
    padding: .55rem .85rem;
    border-radius: var(--dl-r-btn);
    color: var(--ink-soft);
    font-size: .92rem;
    font-weight: 500;
    line-height: 1.25;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color .14s ease, color .14s ease;
}

.dl-menu-link:hover,
.dl-menu-item:hover > .dl-menu-link,
.dl-menu-item:focus-within > .dl-menu-link { background: var(--surface-alt); color: var(--ink); text-decoration: none; }

.dl-menu-link[aria-current],
.dl-menu-link[aria-current]:hover { background: var(--dl-blue-900); color: #ffffff; font-weight: 600; }

.dl-menu-pijl { display: inline-flex; opacity: .6; transition: transform .2s ease; }
.dl-menu-item:hover .dl-menu-pijl { transform: rotate(180deg); }

.dl-menu-paneel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 5;
    border-top: 1px solid var(--line-soft);
    background: var(--surface);
    box-shadow: 0 28px 48px -24px color-mix(in srgb, var(--ink) 28%, transparent);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .15s ease .1s, transform .15s ease .1s, visibility 0s linear .25s;
}

.dl-menu-item:hover > .dl-menu-paneel,
.dl-menu-item:focus-within > .dl-menu-paneel {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: .12s, .12s, .12s;
}

/* De kolommen zoals het menu van V1: een kop met een lijn eronder en
   daaronder de subcategorieën, zonder tekentjes. */
.dl-menu-paneel-in {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 17.5rem;
    gap: 3rem;
    min-height: 17.5rem;
    padding-block: 2rem;
}

.dl-menu-kolommen {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13.75rem, 1fr));
    gap: 2rem;
    align-content: start;
}

.dl-menu-groep { min-width: 0; }

.dl-menu-kop {
    display: block;
    overflow: hidden;
    margin-bottom: .5rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--ink);
    color: var(--ink);
    font-size: .833rem;
    font-weight: 800;
    letter-spacing: .06em;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-decoration: none;
}

a.dl-menu-kop:hover { color: var(--ink); text-decoration: none; }
.dl-menu-groep.is-los .dl-menu-kop { color: var(--ink-soft); }

.dl-menu-groep ul { margin: 0; padding: 0; list-style: none; }

.dl-menu-groep li a {
    display: block;
    padding: .5rem 0;
    color: var(--ink-soft);
    font-size: .833rem;
    line-height: 1.5;
    text-decoration: none;
    transition: color .14s ease, padding-left .14s ease;
}

.dl-menu-groep li a:hover { padding-left: .25rem; color: var(--ink); text-decoration: none; }

/* Rechts de weg naar de hele categorie: een effen grijs vlak met de naam
   groot en een donkere knop onderaan. */
.dl-menu-alles {
    display: flex;
    flex-direction: column;
    min-height: 15rem;
    padding: 2rem 1.5rem;
    border: 1px solid var(--line-soft);
    border-radius: min(8px, var(--dl-r-max));
    background: var(--surface-alt);
    color: var(--ink);
    text-decoration: none;
}

.dl-menu-alles:hover { color: var(--ink); text-decoration: none; }
.dl-menu-alles-boven { margin-bottom: .5rem; font-size: .694rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.dl-menu-alles strong { margin-bottom: .5rem; font-size: 1.75rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.dl-menu-alles-tekst { margin-bottom: 1rem; color: var(--ink-soft); font-size: .833rem; line-height: 1.6; }

.dl-menu-alles-link {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: .5rem;
    margin-top: auto;
    padding: .5rem 1rem;
    border-radius: min(4px, var(--dl-r-max));
    background: var(--ink);
    color: #ffffff;
    font-size: .694rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    transition: transform .14s ease;
}

.dl-menu-alles:hover .dl-menu-alles-link { transform: translateX(2px); }

@media (max-width: 1260px) {
    .dl-menu-link { padding-inline: .6rem; }
    .dl-menu-lijst { margin-left: -.6rem; gap: .1rem; }
}

@media (max-width: 1120px) {
    .dl-menu-link { padding-inline: .5rem; font-size: .875rem; }
    .dl-menu-lijst { margin-left: -.5rem; }
    .dl-menu-pijl { display: none; }
}

/* De eigen schermen boven die balk, voor wie ingelogd is
   (partials/menu-account): een lichte strook die met Dashboard begint, op
   dezelfde lijn als de categorieën eronder. Op een tablet en telefoon staan
   ze in het schuifmenu. */
.dl-accountbalk { border-top: 1px solid var(--line-soft); background: var(--surface-alt); }

.dl-accountbalk-in {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .15rem;
    margin-left: -.8rem;
    padding-block: .3rem;
}

.dl-accountbalk a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 2.1rem;
    padding: .4rem .8rem;
    border-radius: var(--dl-r-btn);
    color: var(--ink-soft);
    font-size: .86rem;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color .14s ease, color .14s ease;
}

.dl-accountbalk a:hover { background: var(--surface); color: var(--ink); text-decoration: none; }
.dl-accountbalk a[aria-current="page"] { background: var(--dl-blue-100); color: var(--dl-blue-900); }

@media (max-width: 1024px) { .dl-accountbalk { display: none; } }

/* -- Zoeksuggesties ---------------------------------------------------
   Onder het zoekveld in de koptekst, met het onderdeel zoeksuggesties.
   --------------------------------------------------------------------- */

.dl-suggesties {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    left: 0;
    z-index: 65;
    max-height: min(78vh, 40rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 18px 44px color-mix(in srgb, var(--ink) 16%, transparent);
}

.dl-suggesties[hidden] { display: none; }
.dl-suggesties-lijst { margin: 0; padding: .35rem 0; list-style: none; }

.dl-suggestie {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: .8rem;
    padding: .5rem .9rem;
    color: var(--ink);
    text-decoration: none;
}

.dl-suggestie:hover, .dl-suggestie.is-actief { background: var(--surface-alt); color: var(--ink); text-decoration: none; }

.dl-suggestie-foto {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    overflow: hidden;
    border: 1px solid var(--line-soft);
    border-radius: var(--dl-r-btn);
    background: #ffffff;
    color: var(--ink-faint);
}

.dl-suggestie-foto img { width: 40px; height: 40px; object-fit: contain; }
.dl-suggestie-wat { display: grid; min-width: 0; }
.dl-suggestie-naam { overflow: hidden; font-size: .9rem; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.dl-suggestie-sku { font-size: .76rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.dl-suggestie-prijs { font-size: .92rem; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }

.dl-suggestie.is-alles {
    display: flex;
    justify-content: space-between;
    margin-top: .35rem;
    padding-block: .8rem;
    border-top: 1px solid var(--line-soft);
    font-size: .88rem;
    font-weight: 600;
}

.dl-suggesties-leeg { margin: 0; padding: 1rem 1.1rem; font-size: .9rem; color: var(--ink-soft); }

/* -- De knoppen rechtsonder (partials/zwevend) ------------------------
   WhatsApp als er een nummer staat, in het groen van WhatsApp, want dat
   herkent iedereen; met een muis schuift de tekst ernaast uit. Daarboven
   de knop naar boven, pas als de bezoeker een eind gescrold is.
   --------------------------------------------------------------------- */

.dl-whatsapp {
    position: fixed;
    right: clamp(1rem, .5rem + 1vw, 1.5rem);
    bottom: clamp(1rem, .5rem + 1vw, 1.5rem);
    z-index: 55;
    display: inline-flex;
    align-items: center;
    height: 3.5rem;
    padding-inline: calc((3.5rem - 26px) / 2);
    border-radius: var(--radius-pill);
    background: #25d366;
    color: #ffffff;
    box-shadow: 0 12px 28px color-mix(in srgb, var(--ink) 22%, transparent);
    transition: background-color .15s ease, transform .15s ease;
}

.dl-whatsapp:hover { background: #1ebe5a; color: #ffffff; text-decoration: none; transform: translateY(-2px); }
.dl-whatsapp:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.dl-whatsapp svg { flex: none; }

.dl-whatsapp-tekst {
    max-width: 0;
    overflow: hidden;
    font-size: .92rem;
    font-weight: 600;
    white-space: nowrap;
    transition: max-width .25s ease, margin .25s ease;
}

@media (hover: hover) {
    .dl-whatsapp:hover .dl-whatsapp-tekst,
    .dl-whatsapp:focus-visible .dl-whatsapp-tekst { max-width: 10rem; margin-left: .6rem; }
}

.dl-naar-boven {
    position: fixed;
    right: clamp(1rem, .5rem + 1vw, 1.5rem);
    bottom: clamp(1rem, .5rem + 1vw, 1.5rem);
    z-index: 55;
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--dl-r-btn);
    background: var(--dl-blue-900);
    color: #ffffff;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--ink) 20%, transparent);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s, background-color .15s ease;
}

.dl-naar-boven[hidden] { display: none; }
.dl-naar-boven.is-zichtbaar { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.dl-naar-boven:hover { background: var(--dl-blue-800); }
.dl-naar-boven:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.dl-whatsapp + .dl-naar-boven {
    right: calc(clamp(1rem, .5rem + 1vw, 1.5rem) + .375rem);
    bottom: calc(clamp(1rem, .5rem + 1vw, 1.5rem) + 4.1rem);
}

@media (max-width: 600px) {
    .dl-whatsapp { height: 3.25rem; padding-inline: calc((3.25rem - 26px) / 2); }

    .dl-whatsapp + .dl-naar-boven {
        right: calc(clamp(1rem, .5rem + 1vw, 1.5rem) + .25rem);
        bottom: calc(clamp(1rem, .5rem + 1vw, 1.5rem) + 3.85rem);
    }
}

/* -- Meekijken als klant -----------------------------------------------
   De balk onderaan zolang een collega meekijkt als klant (partials/
   meekijken): altijd in beeld, zodat niemand vergeet dat hij als een ander
   rondloopt. De pagina en de knoppen rechtsonder schuiven erboven.
   --------------------------------------------------------------------- */

.dl-meekijken {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 90;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .5rem 1rem;
    padding: .6rem 1rem;
    border-top: 3px solid var(--danger);
    background: var(--dl-blue-950);
    color: #ffffff;
    font-size: .9rem;
    box-shadow: 0 -6px 18px rgba(15, 23, 42, .18);
}

.dl-meekijken form { margin: 0; }
.dl-meekijken-tekst { display: inline-flex; align-items: center; gap: .5rem; }
.dl-meekijken-tekst svg { flex: none; }

.dl-meekijken .dl-meekijken-knop {
    --dl-btn-vulling: #ffffff;
    --dl-btn-tekst: var(--dl-blue-950);
    --dl-btn-rand: #ffffff;

    border-color: #ffffff;
    background: #ffffff;
    color: var(--dl-blue-950);
}

.dl-meekijken .dl-meekijken-knop:hover { background: color-mix(in srgb, #ffffff 86%, transparent); color: var(--dl-blue-950); }

/* Op een telefoon één regel, anders dekt de balk de onderkant van de pagina
   af: de naam wordt zo nodig afgekort, de uitleg staat al in de melding en
   de knop zegt alleen Terug. */
@media (max-width: 600px) {
    .dl-meekijken { flex-wrap: nowrap; justify-content: space-between; padding: .5rem .75rem; font-size: .82rem; }
    .dl-meekijken-tekst { min-width: 0; }
    .dl-meekijken-tekst > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .dl-meekijken-lang { display: none; }
    .dl-meekijken .dl-meekijken-knop { flex: none; white-space: nowrap; }
}

body:has(.dl-meekijken) { padding-bottom: 3.5rem; }

body:has(.dl-meekijken) .dl-whatsapp,
body:has(.dl-meekijken) .dl-naar-boven { margin-bottom: 3.5rem; }

.dl-meekijken-noot { font-weight: 600; color: var(--danger); }

/* -- Meer foto's op een kaart -----------------------------------------
   De andere foto's liggen erover en komen bij het aanwijzen; de eerste
   gaat dan weg, anders schijnt hij erdoorheen. De streepjes zeggen welke.
   --------------------------------------------------------------------- */

.dl-art-foto > img.dl-art-ander { position: absolute; inset: 0; opacity: 0; }
.dl-art-foto > img.dl-art-ander:not([src]) { visibility: hidden; }
.dl-art-foto > img.dl-art-ander.is-zichtbaar { opacity: 1; }
.dl-art-foto[data-nu]:not([data-nu="0"]) > img:first-child { opacity: 0; }

/* Een lijntekening heel, ook als hij niet vierkant is: een maatschets met een
   rand eraf is geen maatschets meer. */
.dl-art-foto > img.is-tekening { object-fit: contain; }

.dl-art-streepjes {
    position: absolute;
    right: .6rem;
    bottom: .5rem;
    left: .6rem;
    display: flex;
    gap: 4px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
}

.dl-art-streepjes > span { flex: 1; height: 3px; border-radius: min(2px, var(--dl-r-max)); background: color-mix(in srgb, var(--ink) 14%, transparent); }
.dl-art-streepjes > span.is-nu { background: var(--dl-blue-900); }
.dl-art-foto:has(.dl-art-nee) .dl-art-streepjes { bottom: 2.4rem; }

@media (hover: hover) {
    .dl-art:hover .dl-art-streepjes { opacity: 1; }
}

/* -- De subcategorieën in de kop ---------------------------------------
   Met catalogus "subcategorieen" in theme.php: op een telefoon de weg naar
   beneden, want daar staat de zijbalk pas onder de artikelen.
   --------------------------------------------------------------------- */

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

.dl-kop-subs a {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 2.25rem;
    padding: .4rem .8rem;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: var(--dl-r-btn);
    background: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .88);
    font-size: .85rem;
    font-weight: 500;
    text-decoration: none;
    transition: border-color .14s ease, background-color .14s ease;
}

.dl-kop-subs a:hover { border-color: #ffffff; background: rgba(255, 255, 255, .12); color: #ffffff; text-decoration: none; }
.dl-kop-subs svg { color: rgba(255, 255, 255, .55); }

/* -- De filters ---------------------------------------------------------
   Met het onderdeel filters: in de zijbalk onder de categorieën, wit met
   een dunne rand. Elke groep klapt open en dicht. Op een telefoon een lade
   van links, met de knop Filters in de werkbalk; een vinkje doet dat
   werk (#filters-open), dus ook zonder script.
   --------------------------------------------------------------------- */

/* Op een groot scherm blijft de zijbalk naast de artikelen, zonder eigen
   schuifbalk: is hij hoger dan het scherm, dan loopt hij mee met de pagina
   en blijft hij staan zodra zijn onderkant in beeld is, en omhoog net zo
   met zijn bovenkant. Waar hij staat, rekent app.js (zijbalk). */
@media (min-width: 901px) {
    .with-side > .side:has(.dl-filters-paneel) {
        align-self: start;
        position: sticky;
        top: var(--dl-zij-top, 9.5rem);
    }
}

/* Met filters is de zijbalk breder: een kenmerk als "Afwerking" met zijn
   aantallen past anders niet op een regel. Op een telefoon staan de
   filters in een lade, en de categorieën onder de artikelen; de weg naar
   beneden zijn dan de subcategorieën in de kop. */
.with-side:has(> .side .dl-filters-paneel) {
    grid-template-columns: clamp(16rem, 11rem + 8vw, 19rem) minmax(0, 1fr);
    gap: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
}

@media (max-width: 900px) {
    .with-side:has(> .side .dl-filters-paneel) { grid-template-columns: minmax(0, 1fr); }
    .with-side:has(> .side .dl-filters-paneel) > .side { order: 2; }
}

.dl-filters-paneel { margin-top: 1rem; }
.dl-filters-achter, .dl-filters-sluit, .dl-filters-voet { display: none; }

.dl-filters { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }

.dl-filters-kop { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .9rem 1rem; border-bottom: 1px solid var(--line-soft); }
.dl-filters-kop h2 { display: inline-flex; align-items: center; gap: .5rem; margin: 0; font-size: .9rem; font-weight: 700; letter-spacing: .02em; }
.dl-filters-wis { font-size: .82rem; color: var(--ink-soft); text-decoration: underline; text-underline-offset: .2em; }
.dl-filters-wis:hover { color: var(--ink); }

.dl-filter { padding: .9rem 1rem; border-bottom: 1px solid var(--line-soft); }
.dl-filter-kop { display: block; margin-bottom: .45rem; font-size: .82rem; font-weight: 600; color: var(--ink); }

.dl-filter-zoek { display: flex; overflow: hidden; border: 1px solid var(--line); border-radius: var(--dl-r-btn); background: #ffffff; }
.dl-filter-zoek:focus-within { border-color: var(--ink); }
.dl-filter-zoek .input { flex: 1; min-width: 0; min-height: 2.5rem; padding-block: .4rem; border: 0; border-radius: 0; box-shadow: none; font-size: .88rem; }
.dl-filter-zoek .input:focus { box-shadow: none; }

.dl-filter-zoek button {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 2.5rem;
    border: 0;
    border-left: 1px solid var(--line-soft);
    background: var(--surface-alt);
    color: var(--ink);
    cursor: pointer;
}

.dl-filter-vink { display: flex; align-items: center; gap: .6rem; font-size: .9rem; cursor: pointer; }
.dl-filter-vink input { flex: none; }

.dl-filter-groep { border-bottom: 1px solid var(--line-soft); }
.dl-filter-groep:last-of-type { border-bottom: 0; }

.dl-filter-groep > summary {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .85rem 1rem;
    font-size: .88rem;
    font-weight: 600;
    list-style: none;
    cursor: pointer;
}

.dl-filter-groep > summary::-webkit-details-marker { display: none; }
.dl-filter-groep > summary > span:first-child { flex: 1; min-width: 0; }

.dl-filter-groep > summary::after {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    margin-right: .2rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform .15s ease;
}

.dl-filter-groep[open] > summary::after { transform: rotate(-135deg) translateY(-1px); }
.dl-filter-groep > summary:hover { background: var(--surface-alt); }
.dl-filter-groep > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }

.dl-filter-teller {
    display: inline-grid;
    place-items: center;
    min-width: 1.3rem;
    height: 1.3rem;
    padding-inline: .3rem;
    border-radius: var(--radius-pill);
    background: var(--dl-blue-900);
    color: #ffffff;
    font-size: .7rem;
    font-weight: 700;
}

.dl-filter-prijs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; padding: 0 1rem; }
.dl-filter-prijs label { display: grid; gap: .25rem; font-size: .76rem; color: var(--ink-faint); }
.dl-filter-prijs .input { min-height: 2.4rem; padding: .35rem .6rem; font-size: .88rem; }
.dl-filter-noot { margin: .45rem 1rem .9rem; font-size: .75rem; color: var(--ink-faint); }

.dl-filter-waarden { margin: 0; padding: 0 .5rem .7rem; list-style: none; }
.dl-filter-waarden.is-ingeklapt > li.is-extra { display: none; }

.dl-filter-meer {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin: -.25rem 0 .85rem 1rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink);
    font: inherit;
    font-size: .82rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: .2em;
    cursor: pointer;
}

.dl-filter-meer[hidden] { display: none; }
.dl-filter-meer:hover { text-decoration-thickness: 2px; }

.dl-filter-waarde {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .38rem .5rem;
    border-radius: var(--dl-r-btn);
    font-size: .87rem;
    cursor: pointer;
    transition: background-color .12s ease;
}

.dl-filter-waarde:hover { background: var(--surface-alt); }
.dl-filter-waarde input { flex: none; }
.dl-filter-waarde.is-aan .dl-filter-naam { font-weight: 600; }
.dl-filter-naam { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.dl-filter-n { flex: none; font-size: .76rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

/* Kleur met een staal naast de naam; het vinkje zelf zit in het staal. */
.dl-filter-groep.is-kleur .dl-filter-waarde input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.dl-filter-staal {
    position: relative;
    flex: none;
    width: 1.35rem;
    height: 1.35rem;
    border: 1px solid rgba(0, 0, 0, .14);
    border-radius: min(50%, var(--dl-r-max));
    background: var(--surface-alt);
}

.dl-filter-staal.is-onbekend { background: repeating-linear-gradient(45deg, var(--surface-alt) 0 4px, #ffffff 4px 8px); }
.dl-filter-waarde.is-aan .dl-filter-staal, .dl-filter-groep.is-kleur input:checked + .dl-filter-staal { box-shadow: 0 0 0 2px #ffffff, 0 0 0 3.5px var(--ink); }
.dl-filter-groep.is-kleur input:focus-visible + .dl-filter-staal { outline: 2px solid var(--ink); outline-offset: 4px; }

.dl-filters-toepassen { margin: .9rem 1rem 1rem; width: calc(100% - 2rem); }

/* De werkbalk met filters: het aantal, de bladzijde, sorteren, per
   bladzijde en raster of lijst, en daaronder wat er gekozen is. */
.dl-toolbar.is-filters { flex-wrap: wrap; gap: .75rem 1rem; }
.dl-toolbar-aantal { margin: 0; color: var(--ink-soft); }
.dl-toolbar-aantal strong { color: var(--ink); }
.dl-toolbar-aantal span { margin-left: .5rem; color: var(--ink-faint); }
.dl-toolbar-keuzes { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }

/* De knop naar de filters is er alleen op een smal scherm, waar de filters
   in een lade zitten; daarbuiten staan ze in de zijbalk. Met de werkbalk
   ervoor, zodat de .btn van een theme hem niet weer laat zien. */
.dl-toolbar .dl-toolbar-filters { display: none; gap: .45rem; }

.dl-weergave { display: inline-flex; overflow: hidden; border: 1px solid var(--line); border-radius: var(--dl-r-btn); background: #ffffff; }

.dl-weergave a {
    display: inline-grid;
    place-items: center;
    width: 2.5rem;
    height: 2.4rem;
    color: var(--ink-faint);
    transition: color .14s ease, background-color .14s ease;
}

.dl-weergave a + a { border-left: 1px solid var(--line); }
.dl-weergave a:hover { color: var(--ink); }
.dl-weergave a.is-nu { background: var(--dl-blue-900); color: #ffffff; }

.dl-blader { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 2.25rem; }
.dl-blader .pager { margin-top: 0; }
.dl-blader-stand { margin: 0; font-size: .88rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

.dl-merkjes { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: -.35rem 0 1.15rem; }
.dl-merkjes-kop { margin-right: .2rem; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }

.dl-merkje {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 2rem;
    padding: .25rem .6rem;
    border: 1px solid var(--dl-blue-900);
    border-radius: var(--dl-r-btn);
    background: var(--dl-blue-900);
    color: #ffffff;
    font-size: .82rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color .14s ease;
}

.dl-merkje:hover { background: var(--dl-blue-800); color: #ffffff; text-decoration: none; }
.dl-merkje svg { opacity: .75; }
.dl-merkje.is-wis { border-style: dashed; border-color: var(--ink-faint); background: transparent; color: var(--ink); }
.dl-merkje.is-wis:hover { border-color: var(--ink); background: transparent; color: var(--ink); }

/* Raster of lijst: als lijst een rij per artikel, met de foto links, de naam
   ernaast en de prijs met het bestellen rechts. Een kaart zonder prijs, voor
   een bezoeker die geen prijzen ziet, is één link: dan de foto en de naam. */
.dl-artikelen.is-lijst { grid-template-columns: minmax(0, 1fr); gap: .6rem; }

.dl-artikelen.is-lijst .dl-art,
.dl-artikelen.is-lijst .dl-art-link {
    grid-template-columns: 9rem minmax(0, 1fr);
    grid-template-rows: none;
    align-items: center;
}

.dl-artikelen.is-lijst .dl-art.is-koop { grid-template-columns: minmax(0, 1fr) min(19rem, 40%); }
.dl-artikelen.is-lijst .dl-art-link { align-self: stretch; border-radius: min(16px, var(--dl-r-max)) 0 0 min(16px, var(--dl-r-max)); }
.dl-artikelen.is-lijst .dl-art-titel { min-height: 0; }

.dl-artikelen.is-lijst .dl-art-koop {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: .9rem 1rem;
    border-top: 0;
    border-left: 1px solid var(--line-soft);
}

@media (max-width: 700px) {
    .dl-artikelen.is-lijst .dl-art.is-koop { grid-template-columns: minmax(0, 1fr); }

    .dl-artikelen.is-lijst .dl-art,
    .dl-artikelen.is-lijst .dl-art-link { grid-template-columns: 6.5rem minmax(0, 1fr); }

    .dl-artikelen.is-lijst .dl-art-link { border-radius: min(16px, var(--dl-r-max)) min(16px, var(--dl-r-max)) 0 0; }

    .dl-artikelen.is-lijst .dl-art-koop {
        padding: .75rem .9rem .9rem;
        border-top: 1px solid var(--line-soft);
        border-left: 0;
    }
}

@media (max-width: 900px) {
    .dl-toolbar .dl-toolbar-filters { display: inline-flex; }

    .dl-filters-paneel { margin: 0; }

    .dl-filters-achter {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 91;
        background: color-mix(in srgb, var(--ink) 50%, transparent);
        opacity: 0;
        visibility: hidden;
        cursor: pointer;
        transition: opacity .25s ease, visibility 0s linear .25s;
    }

    .dl-filters-doos {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 92;
        width: min(24rem, 92vw);
        overflow-y: auto;
        overscroll-behavior: contain;
        background: var(--surface);
        box-shadow: 18px 0 48px color-mix(in srgb, var(--ink) 20%, transparent);
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform .28s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .28s;
    }

    .dl-filters-schakel:checked ~ .side .dl-filters-achter { opacity: 1; visibility: visible; transition-delay: 0s; }
    .dl-filters-schakel:checked ~ .side .dl-filters-doos { transform: none; visibility: visible; transition-delay: 0s; }
    body:has(.dl-filters-schakel:checked) { overflow: hidden; }

    .dl-filters { display: flex; flex-direction: column; min-height: 100%; border: 0; border-radius: 0; }
    .dl-filters-kop { position: sticky; top: 0; z-index: 1; background: var(--surface); }

    .dl-filters-sluit {
        display: inline-grid;
        place-items: center;
        width: 40px;
        height: 40px;
        margin-left: auto;
        border-radius: var(--dl-r-btn);
        background: var(--surface-alt);
        color: var(--dl-blue-900);
        cursor: pointer;
    }

    .dl-filters-voet {
        display: block;
        position: sticky;
        bottom: 0;
        margin-top: auto;
        padding: .9rem 1rem;
        border-top: 1px solid var(--line-soft);
        background: var(--surface);
    }
}

[data-overzicht].is-herstel [data-overzicht-deel] { visibility: hidden; animation: dl-herstel 0s 1.5s forwards; }

/* -- Beoordelingen ---------------------------------------------------
   Met het onderdeel beoordelingen: bij de naam het gemiddelde als link,
   onder de omschrijving het gemiddelde met de verdeling en de
   beoordelingen zelf, en ernaast het formulier.
   --------------------------------------------------------------------- */

.dl-sterren { position: relative; display: inline-flex; flex: none; line-height: 0; vertical-align: middle; }
.dl-sterren svg { display: block; fill: currentColor; }
.dl-sterren-leeg { display: inline-flex; gap: 1px; color: var(--dl-grey-200); }

.dl-sterren-vol {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-flex;
    gap: 1px;
    width: var(--dl-score, 0%);
    overflow: hidden;
    color: var(--dl-ster, #f5a623);
}

.dl-pdp-score {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--ink-soft);
    text-decoration: none;
}

.dl-pdp-score:hover { color: var(--ink); text-decoration: underline; text-underline-offset: .2em; }

/* Op een telefoon staat de naam met de sterren op het donkere vlak. */
@media (max-width: 900px) {
    .dl-pdp-score { color: rgba(255, 255, 255, .82); }
    .dl-pdp-score:hover { color: #ffffff; }
    .dl-pdp-score .dl-sterren-leeg { color: rgba(255, 255, 255, .25); }
}

.dl-details-paneel.dl-beoordelingen {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    border: 0;
    box-shadow: none;
    scroll-margin-top: var(--dl-kop-plak, 9.5rem);
}

.dl-beoordelingen > .dl-kaart { border: 1px solid var(--line-soft); box-shadow: var(--shadow-sm); }

.dl-beoordelingen-leeg { margin: 0; color: var(--ink-soft); }

.dl-beoordelingen-samen {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1.25rem 2rem;
    align-items: center;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid var(--line-soft);
}

.dl-score { display: grid; grid-template-columns: auto auto; align-items: baseline; gap: .1rem .45rem; }
.dl-score > strong { font-size: 2.6rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.dl-score > span:not(.dl-sterren) { font-size: .86rem; color: var(--ink-faint); }
.dl-score .dl-sterren, .dl-score-aantal { grid-column: 1 / -1; }
.dl-score .dl-sterren { margin-top: .35rem; }

.dl-verdeling { display: grid; gap: .3rem; margin: 0; padding: 0; list-style: none; font-size: .8rem; }
.dl-verdeling li { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr) 2rem; align-items: center; gap: .5rem; color: var(--ink-soft); }
.dl-verdeling-balk { display: block; height: 6px; overflow: hidden; border-radius: min(3px, var(--dl-r-max)); background: var(--dl-blue-100); }
.dl-verdeling-balk > span { display: block; height: 100%; background: var(--dl-blue-900); }
.dl-verdeling-n { text-align: right; font-variant-numeric: tabular-nums; }

.dl-beoordeling-rij { margin: 0; padding: 0; list-style: none; }
.dl-beoordeling { padding: 1.05rem 0; border-bottom: 1px solid var(--line-soft); }
.dl-beoordeling:last-child { padding-bottom: 0; border-bottom: 0; }
.dl-beoordeling-kop { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.dl-beoordeling-kop strong { font-size: .95rem; }
.dl-beoordeling-tekst { margin: .5rem 0 0; font-size: .92rem; line-height: 1.65; color: var(--ink-soft); overflow-wrap: anywhere; }
.dl-beoordeling-wie { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .75rem; margin: .55rem 0 0; font-size: .8rem; color: var(--ink-faint); }

.dl-gecontroleerd {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .1rem .45rem;
    border-radius: var(--dl-r-btn);
    background: color-mix(in srgb, #0f7a55 10%, transparent);
    color: #0f7a55;
    font-weight: 600;
}

/* Het formulier, met vijf sterren om te kiezen. De rij staat van vijf naar
   een in de opmaak en wordt omgedraaid getoond: zo kleurt een ster bij het
   aanwijzen de sterren links ervan mee. */
.dl-beoordeel .dl-velden { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1rem; }
.dl-beoordeel .field { margin: 0; }
.dl-beoordeel .field.is-breed { grid-column: 1 / -1; }
.dl-beoordeel textarea { min-height: 8rem; }
.dl-beoordeel input[readonly] { background: var(--surface-alt); color: var(--ink-soft); }

.dl-sterren-kies { margin: 0 0 1rem; padding: 0; border: 0; }
.dl-sterren-kies legend { margin-bottom: .35rem; padding: 0; font-size: .875rem; font-weight: 600; }

.dl-sterren-rij { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: .15rem; }
.dl-sterren-rij input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* Met .dl-sterren-kies ervoor, anders wint de kleur van .field label uit
   een theme en staan alle sterren gekozen. */
.dl-sterren-kies .dl-sterren-rij label {
    display: inline-grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    color: var(--dl-grey-200);
    cursor: pointer;
    transition: color .12s ease, transform .12s ease;
}

.dl-sterren-rij label svg { fill: currentColor; }
.dl-sterren-rij input:checked + label, .dl-sterren-rij input:checked + label ~ label { color: var(--dl-ster, #f5a623); }
.dl-sterren-kies.is-invalid .dl-sterren-rij label { color: color-mix(in srgb, var(--danger) 30%, transparent); }

/* Bij het aanwijzen telt wat de muis aanwijst, niet wat gekozen is. */
.dl-sterren-kies .dl-sterren-rij:hover label { color: var(--dl-grey-200); }
.dl-sterren-kies .dl-sterren-rij label:hover, .dl-sterren-kies .dl-sterren-rij label:hover ~ label { color: var(--dl-ster, #f5a623); }
.dl-sterren-rij input:focus-visible + label { outline: 2px solid var(--ink); outline-offset: 1px; }

.dl-beoordeel-verstuur { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-top: 1.1rem; }
.dl-beoordeel-verstuur span { font-size: .82rem; color: var(--ink-faint); }

.dl-beoordeel-bedankt { display: flex; align-items: flex-start; gap: .8rem; }
.dl-beoordeel-bedankt p { margin: 0; line-height: 1.6; }

.dl-beoordeel-vink {
    display: grid;
    flex: none;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: min(50%, var(--dl-r-max));
    background: color-mix(in srgb, #0f7a55 10%, transparent);
    color: #0f7a55;
}

@media (max-width: 560px) {
    .dl-beoordelingen-samen { grid-template-columns: minmax(0, 1fr); }
    .dl-beoordeel .dl-velden { grid-template-columns: minmax(0, 1fr); }
}

/* -- Op de productpagina ------------------------------------------------
   De voorraad in stuks (voorraad_zichtbaar), het subtotaal onder het
   aantal (subtotaal) en het bedrag met btw voorop (btw "incl" in
   theme.php).
   --------------------------------------------------------------------- */

.dl-stip { display: inline-block; flex: none; width: 7px; height: 7px; border-radius: min(50%, var(--dl-r-max)); background: currentColor; }

.dl-koop-voorraad { display: flex; align-items: center; gap: .5rem; margin: 0 0 .9rem; font-size: .9rem; font-weight: 600; color: #0f7a55; }
.dl-koop-voorraad strong { padding: .1rem .45rem; border-radius: var(--dl-r-btn); background: color-mix(in srgb, #0f7a55 10%, transparent); font-weight: 700; font-variant-numeric: tabular-nums; }
.dl-koop-voorraad.is-niet { color: var(--danger); }
.dl-pdp-koop .dl-koop-voorraad { margin: 1rem 0 .9rem; }

/* Het subtotaal staat in het formulier, op een eigen regel onder het
   aantal en de knop. */
.dl-pdp-leggen:has(.dl-koop-sub) { flex-wrap: wrap; }

.dl-koop-sub {
    display: flex;
    flex-basis: 100%;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin: .6rem 0 0;
    padding-top: .8rem;
    border-top: 1px solid var(--line-soft);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.dl-koop-sub strong { font-size: 1.1rem; font-weight: 800; letter-spacing: -.01em; text-transform: none; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Bij een artikel per verpakking: de eenheid en de inhoud onder de prijs. */
.dl-prijs-eenheid {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: .55rem 0 0;
    font-size: .86rem;
    font-weight: 600;
    color: var(--ink-soft);
}

.dl-prijs-eenheid svg { flex: none; color: var(--dl-blue-700); }

/* Op de kaart: klein onder de prijs. */
.dl-art-eenheid { margin: .3rem 0 0; font-size: .76rem; font-weight: 600; line-height: 1.35; color: var(--ink-faint); }

/* De rekentool bij tegels, boven het aantal. */
.dl-rekentool {
    display: grid;
    gap: .6rem;
    margin: 0 0 1rem;
    padding: .9rem 1rem 1rem;
    border: 1px solid var(--line);
    border-radius: min(12px, var(--dl-r-max));
    background: var(--surface-alt);
}

.dl-rekentool[hidden] { display: none; }

.dl-rekentool-kop {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--dl-blue-900);
}

.dl-rekentool-kop svg { color: var(--dl-blue-700); }

.dl-rekentool-label { font-size: .9rem; font-weight: 600; color: var(--ink); }

.dl-rekentool-veld {
    display: flex;
    align-items: center;
    max-width: 14rem;
    border: 1px solid var(--line);
    border-radius: min(10px, var(--dl-r-max));
    background: var(--surface);
}

.dl-rekentool-veld:focus-within {
    border-color: var(--dl-blue-700);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--dl-blue-700) 18%, transparent);
}

.dl-rekentool-veld input {
    flex: 1 1 auto;
    min-width: 0;
    padding: .55rem .7rem;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

.dl-rekentool-veld input:focus { outline: none; }

.dl-rekentool-veld span { padding: 0 .75rem 0 .2rem; font-weight: 700; color: var(--ink-faint); }

.dl-rekentool-vink {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .88rem;
    color: var(--ink);
    cursor: pointer;
}

.dl-rekentool-vink input { width: 17px; height: 17px; margin: 0; accent-color: var(--dl-blue-700); }

.dl-rekentool-uitkomst { width: 100%; border-collapse: collapse; font-size: .88rem; }

.dl-rekentool-uitkomst th,
.dl-rekentool-uitkomst td { padding: .35rem 0; border-top: 1px solid var(--line-soft); }

.dl-rekentool-uitkomst th { font-weight: 500; text-align: left; color: var(--ink-soft); }
.dl-rekentool-uitkomst td { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }

.dl-rekentool-uitkomst tr.is-totaal th,
.dl-rekentool-uitkomst tr.is-pakken th { font-weight: 700; color: var(--ink); }

.dl-rekentool-uitkomst tr.is-pakken td { font-size: 1.05rem; font-weight: 800; color: var(--dl-blue-900); }

.dl-rekentool-uitleg { margin: 0; font-size: .82rem; font-variant-numeric: tabular-nums; color: var(--ink-faint); }

.dl-rekentool-let {
    margin: 0;
    padding: .55rem .7rem;
    border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent);
    border-radius: min(8px, var(--dl-r-max));
    background: color-mix(in srgb, var(--warn) 8%, transparent);
    font-size: .84rem;
    line-height: 1.5;
    color: var(--ink);
}

/* Het bedrag met btw voorop en groot, zonder btw klein ernaast. */
.dl-prijs-paar.is-incl { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1rem; }
.dl-prijs-paar.is-incl > div:first-child dd { font-size: clamp(1.7rem, 1.4rem + .9vw, 2.1rem); }
.dl-prijs-paar.is-incl > div + div dt,
.dl-prijs-paar.is-incl > div + div dd { font-size: .82rem; font-weight: 500; color: var(--ink-faint); }

/* Op de kaart alleen het bedrag met btw. */
.dl-art-prijzen.is-incl { grid-template-columns: minmax(0, 1fr); }
.dl-art-prijzen.is-incl .is-rechts { padding-left: 0; text-align: left; }

/* -- Bestellen zonder account -------------------------------------------- */

.dl-gast-gegevens { display: grid; gap: 1rem; max-width: 52rem; }
.dl-gast-gegevens .dl-velden { margin-top: .75rem; }
.dl-gast-knoppen { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; }

.dl-geplaatst { display: grid; gap: 1rem; }
.dl-geplaatst-lijf { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.dl-bestel-totaal { font-weight: 700; }

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

/* Het logo als de naam in letters, voor een theme zonder beeldmerk. */
.dl-logo-tekst { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }

/* -- De digitale offerte ------------------------------------------------- */

/* De stand en de geldigheid onder het nummer in de kop. */
.dl-offerte-onder {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem 1rem;
}

.dl-offerte-stand {
    display: inline-flex;
    align-items: center;
    padding: .18rem .6rem;
    border-radius: min(999px, var(--dl-r-max));
    background: color-mix(in srgb, var(--surface) 18%, transparent);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--surface);
}

.dl-offerte-stand.is-getekend { background: color-mix(in srgb, var(--ok) 85%, transparent); }

.dl-offerte-stand.is-verlopen,
.dl-offerte-stand.is-ingetrokken { background: color-mix(in srgb, var(--danger) 80%, transparent); }

/* Het aantal als het niet meer aan te passen is, op de plek van het veld. */
.dl-offerte-aantal {
    min-width: 3.5rem;
    font-size: .95rem;
    font-weight: 600;
    text-align: right;
    color: var(--ink-soft);
}

.dl-offerte-lijst + .dl-offerte-uitleg { border-top: 1px solid var(--line-soft); }

.dl-offerte-uitleg {
    margin: 0;
    padding: .8rem 1rem .95rem;
    border-radius: 0 0 var(--radius) var(--radius);
    background: var(--surface);
    font-size: .84rem;
    line-height: 1.55;
    color: var(--ink-faint);
}

.dl-offerte-tekst {
    margin: 0 0 1rem;
    font-size: .92rem;
    line-height: 1.6;
    color: var(--ink-soft);
}

.dl-offerte-tekst strong { color: var(--ink); }

.dl-offerte-verzoek .field { margin-bottom: .75rem; }
.dl-offerte-verzoek .field textarea { min-height: 6.5rem; }

.dl-offerte-knoppen { display: flex; justify-content: flex-end; }
.dl-offerte-knoppen .btn svg { flex: none; }

.dl-offerte-eerder {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line-soft);
}

.dl-offerte-eerder h3 {
    margin: 0 0 .6rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.dl-offerte-eerder ul { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.dl-offerte-eerder li { display: grid; gap: .15rem; font-size: .9rem; line-height: 1.55; color: var(--ink); }
/* Het nieuwste verzoek dat nog openstaat, krijgt een merkje naast de tijd. */
.dl-offerte-wanneer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .5rem;
    font-size: .78rem;
    color: var(--ink-faint);
}

/* Het akkoord: het label boven het vlak zoals een label van een veld. */
.dl-offerte-label {
    display: block;
    margin-bottom: .35rem;
    font-size: .9rem;
    font-weight: 500;
}

/* Het vlak voor de handtekening: een stippelrand zolang het leeg is, met een
   lijn waar de naam op hoort, zoals op papier. Geen scrollen terwijl de
   vinger tekent (touch-action). */
.dl-handtekening {
    position: relative;
    border: 1.5px dashed var(--line);
    border-radius: min(12px, var(--dl-r-max));
    background: var(--surface);
}

.dl-handtekening::after {
    content: "";
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 2.2rem;
    border-bottom: 1px solid var(--line-soft);
    pointer-events: none;
}

.dl-handtekening.is-getekend {
    border-style: solid;
    border-color: color-mix(in srgb, var(--dl-blue-700) 40%, transparent);
}

.field.is-invalid .dl-handtekening { border-color: var(--danger); }

.dl-handtekening-vlak {
    display: block;
    width: 100%;
    height: 170px;
    touch-action: none;
    cursor: crosshair;
    color: var(--ink);
}

.dl-handtekening-wis {
    position: absolute;
    top: .45rem;
    right: .45rem;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .55rem;
    border: 1px solid var(--line);
    border-radius: min(8px, var(--dl-r-max));
    background: var(--surface);
    font: inherit;
    font-size: .78rem;
    font-weight: 600;
    color: var(--ink-soft);
    cursor: pointer;
}

.dl-handtekening-wis:hover {
    border-color: color-mix(in srgb, var(--danger) 45%, transparent);
    color: var(--danger);
}

.dl-handtekening-wis[hidden] { display: none; }

/* De handtekening na het tekenen, op een lichte ondergrond. */
.dl-offerte-getekend {
    margin: 0 0 1rem;
    padding: .6rem;
    border: 1px solid var(--line-soft);
    border-radius: min(12px, var(--dl-r-max));
    background: var(--surface-alt);
}

.dl-offerte-getekend img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 160px;
    object-fit: contain;
}

.dl-offerte-akkoord .dl-mand-note { margin-top: .75rem; }

@media (max-width: 640px) {
    .dl-handtekening-vlak { height: 150px; }
}