/* nodarness.live
   Wit, inkt, grote afgeronde foto's en één serifwoord waar het telt. Amber alleen waar
   er licht is. Het woordmerk (breed Archivo, de "o" is een spot van onderen gezien)
   is hetzelfde als op No Darkness Pro. */
:root {
  --inkt: #0d0c0a; --inkt-2: #3a3631; --grijs: #6b645a; --lijn: #e8e3db; --lijn-2: #d7d0c5;
  --papier: #fff; --mist: #f6f3ee; --tegel: #f3eee7;
  --gloed: #ffb547; --gloed-diep: #f0960e; --gloed-tekst: #8a4b00; --gloed-zacht: #fff1db;
  --nacht: #0c0b09; --nacht-tekst: #f3eee5; --nacht-grijs: #a49b8e;
  --ok: #1b7f4b;
  --f-logo: 'Archivo Woordmerk', 'Archivo', 'Geist', ui-sans-serif, system-ui, sans-serif; /* alleen voor breedte 125% en dikte 800 */
  --f-archivo: 'Archivo', 'Geist', ui-sans-serif, system-ui, sans-serif;
  --f-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --f-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --r-groot: 24px; --r-kaart: 18px; --r-ctl: 12px; --breed: 82rem;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papier); color: var(--inkt); font-family: var(--f-sans); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { margin: 0; letter-spacing: -.035em; line-height: 1.05; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
img { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gloed-diep); outline-offset: 3px; border-radius: 6px; }
.serif { font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.klein { font-size: 13.5px; color: var(--grijs); }
.verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: var(--breed); margin-inline: auto; padding-inline: clamp(16px, 3vw, 32px); }
.wrap.smal { max-width: 64rem; }
main { padding-bottom: 64px; min-height: 50vh; }
.sectie { padding-block: clamp(3rem, 2rem + 4vw, 6rem); }
.sectie-kop { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.sectie-kop h2 { font-size: clamp(1.8rem, 1.4rem + 1.5vw, 2.6rem); }
.sectie-kop a { font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.pagina-titel { font-size: clamp(2rem, 1.6rem + 1.4vw, 2.8rem); margin: 1.6rem 0 1.4rem; }

/* woordmerk */
.logo { display: inline-flex; align-items: baseline; font-family: var(--f-logo); font-stretch: 125%; font-weight: 800; font-size: 23px; letter-spacing: -.05em; line-height: 1; text-decoration: none; color: inherit; white-space: nowrap; }
.logo .o { display: inline-block; width: .57em; height: .57em; border-radius: 50%; border: .13em solid currentColor; background: radial-gradient(circle, #fff8e6 0 22%, var(--gloed) 58%, var(--gloed-diep) 100%); box-shadow: 0 0 .5em .02em rgb(255 181 71 / .5); margin: 0 .015em 0 .025em; }
.logo .pro { font-family: 'Archivo Pro', var(--f-archivo); font-weight: 300; color: var(--gloed); margin-left: .28em; letter-spacing: -.03em; }

/* knoppen */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; border: 0; border-radius: 999px; padding: .8rem 1.3rem; font-weight: 600; font-size: 15px; cursor: pointer; text-decoration: none; transition: background .2s, box-shadow .2s, transform .2s; white-space: nowrap; }
.knop:active { transform: scale(.98); }
.knop:disabled { opacity: .45; cursor: not-allowed; }
.knop-inkt { background: var(--inkt); color: var(--papier); }
.knop-inkt:hover:not(:disabled) { background: #2a2723; }
.knop-wit { background: var(--papier); color: var(--inkt); }
.knop-gloed { background: var(--gloed); color: var(--nacht); }
.knop-gloed:hover { background: #ffc46a; }
.knop-rand { background: transparent; box-shadow: inset 0 0 0 1.5px var(--lijn-2); }
.knop-klein { padding: .5rem .95rem; font-size: 14px; }
.knop-blok { width: 100%; white-space: normal; text-wrap: balance; line-height: 1.3; }
.knop > svg { flex-shrink: 0; }
.tekstknop { background: none; border: 0; padding: 0; cursor: pointer; font-size: 13.5px; color: var(--grijs); text-decoration: underline; text-underline-offset: 3px; }

/* voorbeeldstrook en promo */
.voorbeeld { background: var(--gloed-zacht); color: var(--gloed-tekst); font-size: 12.5px; text-align: center; padding: .35rem 1rem; }
.promo { background: var(--inkt); color: #e9e4dc; font-size: 13px; }
.promo .wrap { display: flex; gap: 2.2rem; justify-content: center; padding-block: .5rem; overflow: hidden; white-space: nowrap; }
.promo a { color: var(--gloed); text-decoration: none; }

/* kop */
.kop { position: sticky; top: 0; z-index: 30; background: rgb(255 255 255 / .94); backdrop-filter: blur(14px); border-bottom: 1px solid var(--lijn); }
.kop .wrap { display: flex; align-items: center; gap: 1.25rem; height: 70px; }
.menu { display: flex; gap: 1.3rem; font-size: 15px; font-weight: 500; }
.menu a { text-decoration: none; white-space: nowrap; }
.menu a:hover, .menu a[aria-current] { color: var(--gloed-tekst); }
.menu-knop { display: none; border: 0; background: none; padding: 8px; cursor: pointer; }
.mand-knop { position: relative; height: 42px; padding: 0 .55rem; border-radius: 999px; display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; flex: none; font-size: 14.5px; font-weight: 600; }
.mand-knop:hover { background: var(--mist); }
.mand-ikoon { position: relative; display: grid; place-items: center; }
.mand-knop .badge { position: absolute; top: -7px; right: -9px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--gloed); color: var(--inkt); font-size: 11px; font-weight: 700; display: grid; place-items: center; padding: 0 5px; box-shadow: 0 0 0 2px var(--papier); }
.mand-tekst { white-space: nowrap; }
/* Het woord naast de kar alleen als het menu ingeklapt is: met het volle menu is de kop (max 82rem)
   in elke taal te smal, en Duitse menunamen zijn het langst. */
@media (min-width: 1281px), (max-width: 760px) { .mand-knop .mand-tekst { display: none; } }
/* Net boven het inklappunt is het volle menu krap in het Italiaans en Duits (gemeten 10-10-2026:
   12 en 1 px te breed op 1281 px): daar iets minder lucht tussen de woorden. */
@media (min-width: 1281px) and (max-width: 1420px) { .menu { gap: 1rem; font-size: 14.5px; } .kop .wrap { gap: 1rem; } }

/* zoeken */
.zoek { position: relative; margin-left: auto; width: min(380px, 38vw); min-width: 200px; }
.zoek label { display: flex; align-items: center; gap: .6rem; background: var(--mist); border-radius: 999px; padding: .55rem 1rem; color: var(--grijs); cursor: text; }
.zoek input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font-size: 14px; color: var(--inkt); }
.zoek input::-webkit-search-cancel-button { display: none; }
.zoek kbd { font-family: var(--f-mono); font-size: 11px; border: 1px solid var(--lijn-2); border-radius: 6px; padding: 0 .35rem; background: var(--papier); }
.zoek-groot { margin: 1.4rem 0 0; width: min(560px, 100%); }
.zoek-groot label { padding: .9rem 1.2rem; }
/* zoekpaneel (zoals Tropaholic): groot, opent bij de eerste klik */
.zoek label:focus-within { background: var(--papier); box-shadow: inset 0 0 0 1.5px var(--inkt), 0 0 0 4px rgb(13 12 10 / .06); }
.zoek-wis { border: 0; background: var(--lijn); width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--inkt-2); flex: none; }
.zoekt .zoek label kbd { display: none; }
.zoekt .kop { backdrop-filter: none; background: var(--papier); } /* backdrop-filter maakt van de kop het kader voor position: fixed */
.zp-dim { position: fixed; inset: 0; z-index: 25; background: rgb(13 12 10 / .28); backdrop-filter: blur(2px); }
.zp { position: absolute; right: 0; top: calc(100% + 10px); width: min(60rem, calc(100vw - 32px)); background: var(--papier); border-radius: 24px; box-shadow: 0 40px 80px -30px rgb(0 0 0 / .45), 0 0 0 1px var(--lijn); z-index: 60; overflow: hidden; display: flex; flex-direction: column; max-height: calc(100dvh - 110px); }
.zp-binnen { overflow-y: auto; overscroll-behavior: contain; padding: 22px 22px 12px; }
.zp-laden { padding: 2rem; color: var(--grijs); font-size: 14px; }
.zp-blok { margin-bottom: 1.4rem; }
.zp-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0 4px .6rem; }
.zp-kop b { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--grijs); font-weight: 600; }
.zp-kop .tekstknop { font-size: 12.5px; }
.zp-recent { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.zp-rij-tekst { display: inline-flex; align-items: center; gap: .55rem; padding: .5rem .8rem; border-radius: 12px; text-decoration: none; font-size: 15px; color: var(--inkt); }
.zp-rij-tekst svg { color: var(--grijs); }
.zp-rij-tekst:hover, .zp-rij-tekst.actief { background: var(--mist); }
.zp-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.zp-cat { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: .8rem; align-items: center; padding: 8px; border-radius: 16px; text-decoration: none; }
.zp-cat:hover, .zp-cat.actief { background: var(--mist); }
.zp-cat-foto { width: 56px; height: 56px; border-radius: 12px; overflow: hidden; background: var(--tegel); position: relative; display: block; }
.zp-cat-foto img { width: 100%; height: 100%; object-fit: cover; }
.zp-cat-foto.los img { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain; mix-blend-mode: multiply; }
.zp-cat b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.zp-cat small { color: var(--grijs); font-size: 12.5px; }
.zp-twee { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.zp-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 4px; }
.zp-chip { border-radius: 999px; padding: .45rem .85rem; font-size: 14px; background: var(--mist); text-decoration: none; box-shadow: inset 0 0 0 1px transparent; }
.zp-chip:hover, .zp-chip.actief { background: var(--papier); box-shadow: inset 0 0 0 1.5px var(--inkt); }
.zp-merk { font-weight: 600; letter-spacing: -.01em; }
.zp-res { display: grid; grid-template-columns: 1fr; gap: 20px; }
.zp-res.met-zij { grid-template-columns: minmax(0, 1fr) 16rem; }
.zp-rij { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: .9rem; align-items: center; padding: 8px; border-radius: 14px; text-decoration: none; }
.zp-rij:hover, .zp-rij.actief { background: var(--mist); }
.zp-rij .t { width: 56px; height: 56px; border-radius: 12px; background: var(--tegel); display: grid; place-items: center; overflow: hidden; }
.zp-rij .t img { width: 86%; height: 86%; object-fit: contain; mix-blend-mode: multiply; }
.zp-rij-tekst2 { min-width: 0; }
.zp-rij-tekst2 b { display: block; font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.01em; }
.zp-rij-tekst2 small { display: block; font-size: 12.5px; color: var(--grijs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zp-rij .pr { font-weight: 700; font-size: 15px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.zp-zij { background: var(--mist); border-radius: 18px; padding: 12px 8px; align-self: start; }
.zp-zij .zp-kop { padding-top: .2rem; }
.zp-zij-link { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .5rem; align-items: center; padding: .6rem .6rem; border-radius: 12px; text-decoration: none; font-size: 15px; font-weight: 600; }
.zp-zij-link small { color: var(--grijs); font-weight: 400; font-size: 12.5px; }
.zp-zij-link svg { color: var(--grijs); transition: transform .2s; }
.zp-zij-link:hover, .zp-zij-link.actief { background: var(--papier); }
.zp-zij-link:hover svg, .zp-zij-link.actief svg { transform: translateX(2px); color: var(--inkt); }
.zp-niets { padding: .5rem 4px 0; }
.zp-niets > b { font-size: 16px; }
.zp-niets > p { color: var(--grijs); font-size: 14px; margin: .3rem 0 1.2rem; }
.zp-alles { display: flex; justify-content: space-between; align-items: center; margin: 14px 0 8px; padding: .8rem 1rem; border-radius: 14px; box-shadow: inset 0 0 0 1.5px var(--lijn); text-decoration: none; font-weight: 600; font-size: 15px; }
.zp-alles:hover, .zp-alles.actief { box-shadow: inset 0 0 0 1.5px var(--inkt); }
.zp-voet { display: flex; gap: 1.2rem; align-items: center; padding: .65rem 1.2rem; background: var(--mist); border-top: 1px solid var(--lijn); font-size: 12px; color: var(--grijs); }
.zp-voet kbd { font-family: var(--f-sans); background: var(--papier); border-radius: 6px; padding: .05rem .4rem; box-shadow: inset 0 0 0 1px var(--lijn-2); }
.zp-status { margin-left: auto; }
@media (max-width: 1000px) { .zp-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px) {
  .zp { position: fixed; left: 0; right: 0; width: auto; top: var(--zp-top, 80px); bottom: 0; max-height: none; border-radius: 20px 20px 0 0; }
  .zp-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zp-twee, .zp-res.met-zij { grid-template-columns: 1fr; }
  .zp-voet { display: none; }
}

/* voorpagina */
.deuren { display: grid; grid-template-columns: 1.22fr 1fr; gap: 14px; padding-top: 18px; }
.deur { position: relative; border-radius: var(--r-groot); overflow: hidden; min-height: clamp(470px, 52vw, 640px); color: #fff; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(22px, 3vw, 40px); isolation: isolate; text-decoration: none; background: var(--inkt); }
.deur > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.4s cubic-bezier(.2, .8, .2, 1); }
.deur:hover > img { transform: scale(1.035); }
.deur::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(12 11 9 / .55) 0%, rgb(12 11 9 / .05) 42%, rgb(12 11 9 / .1) 62%, rgb(12 11 9 / .7) 100%); }
.deur-pro::after { background: linear-gradient(180deg, rgb(12 11 9 / .72) 0%, rgb(12 11 9 / .25) 45%, rgb(12 11 9 / .82) 100%); }
.deur h1, .deur h2 { font-size: clamp(2.3rem, 1.3rem + 3.2vw, 4rem); line-height: .96; letter-spacing: -.05em; max-width: 12ch; }
.deur p { max-width: 36ch; margin-top: 1rem; color: rgb(255 255 255 / .84); font-size: clamp(15px, 1.2vw, 17px); }
.deur .logo { font-size: 15px; margin-bottom: 1.1rem; color: #fff; }
.ruimtes { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(180px, 1fr); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; }
.ruimte { position: relative; aspect-ratio: 3 / 4; border-radius: 20px; overflow: hidden; scroll-snap-align: start; color: #fff; text-decoration: none; background: var(--tegel); }
.ruimte img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2, .8, .2, 1); }
.ruimte:hover img { transform: scale(1.05); }
.ruimte::after { content: ""; position: absolute; inset: 50% 0 0; background: linear-gradient(transparent, rgb(12 11 9 / .7)); }
.ruimte span { position: absolute; z-index: 1; left: 15px; right: 15px; bottom: 13px; display: flex; flex-direction: column; }
.ruimte b { font-weight: 600; font-size: 17px; letter-spacing: -.02em; }
.ruimte small { font-size: 13px; opacity: .85; }
.advies { display: grid; grid-template-columns: 1fr 1.05fr; border-radius: var(--r-groot); overflow: hidden; background: var(--mist); }
.advies-tekst { padding: clamp(24px, 4vw, 56px); display: flex; flex-direction: column; gap: 1.2rem; justify-content: center; min-width: 0; }
.advies-tekst h2 { font-size: clamp(1.8rem, 1.4rem + 1.5vw, 2.6rem); }
.advies-tekst > p { color: var(--inkt-2); max-width: 44ch; }
.advies > img { width: 100%; height: 100%; object-fit: cover; min-height: 340px; }
.segment { display: flex; flex-wrap: wrap; gap: .4rem; }
.segment button { border: 0; border-radius: 999px; padding: .5rem .9rem; background: var(--papier); box-shadow: inset 0 0 0 1px var(--lijn); cursor: pointer; font-size: 14px; font-weight: 500; }
.segment button[aria-pressed="true"] { background: var(--inkt); color: var(--papier); box-shadow: none; }
.schuif { display: flex; align-items: center; gap: 1rem; }
.schuif input { flex: 1; accent-color: var(--gloed-diep); }
.lumen-uit { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.lumen-uit b { font-size: clamp(2.4rem, 2rem + 2vw, 3.4rem); letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.lumen-uit span { color: var(--grijs); font-size: 14px; }
.merkenrij { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2.4rem; align-items: center; padding-block: 2.2rem; border-block: 1px solid var(--lijn); }
.merkenrij a { font-weight: 700; font-size: clamp(16px, 1.5vw, 21px); letter-spacing: -.03em; color: var(--grijs); text-decoration: none; }
.merkenrij a:hover { color: var(--inkt); }
.proband { display: grid; grid-template-columns: 1.1fr 1fr; border-radius: var(--r-groot); overflow: hidden; background: var(--nacht); color: var(--nacht-tekst); }
.proband-tekst { padding: clamp(26px, 4vw, 60px); display: flex; flex-direction: column; gap: 1.1rem; justify-content: center; align-items: flex-start; }
.proband h2 { font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.9rem); }
.proband p { color: var(--nacht-grijs); max-width: 44ch; }
.proband > img { width: 100%; height: 100%; object-fit: cover; min-height: 320px; }

/* schakelaar */
.schakelaar { display: inline-flex; align-items: center; gap: .65rem; border: 0; background: none; cursor: pointer; font-size: 14.5px; font-weight: 600; padding: .3rem 0; }
.baan { width: 42px; height: 24px; border-radius: 12px; background: var(--lijn-2); position: relative; transition: background .25s; flex: none; display: inline-block; }
.baan::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .25); transition: transform .25s; }
[aria-pressed="true"] > .baan { background: var(--gloed); }
[aria-pressed="true"] > .baan::after { transform: translateX(18px); }

/* producttegels */
.raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 16px; }
.raster-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kaart { position: relative; min-width: 0; }
.kaart-link { display: flex; flex-direction: column; gap: .65rem; text-decoration: none; margin-top: .7rem; }
.kaart-foto { display: block; text-decoration: none; }
/* staaltjes: de andere uitvoeringen als kleine foto, onderaan in de tegel (niet eronder:
   dan staan tegels met en zonder uitvoeringen niet meer op één lijn). Wijzen = de grote
   foto wisselt (winkel.js), klikken = naar die uitvoering. */
.kaart-beeld { position: relative; }
.stalen { position: absolute; left: 10px; bottom: 10px; right: 10px; display: flex; gap: 5px; align-items: center; pointer-events: none; }
.staal, .staal-meer { pointer-events: auto; }
.staal { width: 32px; height: 32px; border-radius: 9px; background: var(--papier); display: grid; place-items: center; overflow: hidden; flex: none;
  box-shadow: 0 1px 3px rgb(0 0 0 / .12), inset 0 0 0 1px transparent; transition: box-shadow .15s, transform .15s; }
.staal img { width: 82%; height: 82%; object-fit: contain; }
.staal:hover { transform: translateY(-1px); }
.staal:hover, .staal.aan { box-shadow: 0 1px 3px rgb(0 0 0 / .12), inset 0 0 0 1.5px var(--inkt); }
.staal-meer { height: 32px; min-width: 32px; padding-inline: .45rem; border-radius: 9px; background: var(--papier); display: grid; place-items: center;
  font-size: 12px; font-weight: 600; color: var(--inkt-2); text-decoration: none; font-variant-numeric: tabular-nums; box-shadow: 0 1px 3px rgb(0 0 0 / .12); }
.staal-meer:hover { color: var(--inkt); }
@media (max-width: 560px) { .staal, .staal-meer { width: 26px; height: 26px; min-width: 26px; border-radius: 7px; } .stalen { left: 7px; bottom: 7px; gap: 4px; } }
/* kleurstipjes: de kleur van de lamp zelf, gemeten op de foto (WebshopFotos::staalKleur);
   twee tinten = half/half */
/* De knop is 24 x 24 (tikdoel, WCAG 2.5.8); de stip erin tekent ::before. Zelfde plek en afstand als de kale stip. */
.stalen.stippen { left: 11px; bottom: 11px; gap: 4px; }
.stalen.stippen .staal, .stalen.stippen .staal:hover, .stalen.stippen .staal.aan { width: 24px; height: 24px; border-radius: 50%; background: none; box-shadow: none; overflow: visible; transform: none; transition: none; }
.stalen.stippen .staal::before { content: ""; width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgb(255 255 255 / .38), rgb(255 255 255 / 0) 46%), linear-gradient(135deg, var(--k1) 0 50%, var(--k2) 50% 100%);
  box-shadow: 0 0 0 2px var(--papier), 0 1px 5px rgb(0 0 0 / .22); transition: box-shadow .2s, transform .2s cubic-bezier(.3, 1.6, .5, 1); }
.stalen.stippen .staal:hover::before { transform: scale(1.18); }
.stalen.stippen .staal.aan::before { box-shadow: 0 0 0 2px var(--papier), 0 0 0 3.5px var(--inkt), 0 1px 5px rgb(0 0 0 / .22); }
.stalen.stippen .staal-meer { height: 24px; min-width: 0; padding-inline: .5rem; border-radius: 999px; font-size: 11.5px; background: rgb(255 255 255 / .85); box-shadow: none; }
@media (max-width: 560px) { .stalen.stippen { left: 6px; bottom: 6px; gap: 0; } .stalen.stippen .staal, .stalen.stippen .staal:hover, .stalen.stippen .staal.aan { width: 24px; height: 24px; min-width: 24px; border-radius: 50%; } .stalen.stippen .staal::before { width: 15px; height: 15px; } }
/* overvloeien naar een andere uitvoering (winkel.js) */
.tegel img.wissel { opacity: 0; transition: opacity .35s ease; }
.tegel img.wissel.toon { opacity: 1; }
.tegel img.weg { opacity: 0 !important; transition: opacity .35s ease; }
.kaart-spec { min-height: 1.45em; transition: color .2s; }
.kaart.kiest .kaart-spec { color: var(--inkt); }
.tegel { position: relative; aspect-ratio: 1; border-radius: 20px; overflow: hidden; background: var(--tegel); }
.tegel img { position: absolute; inset: 7%; width: 86%; height: 86%; object-fit: contain; mix-blend-mode: multiply; transition: opacity .7s ease; }
.tegel .aan { opacity: 0; }
.tegel.geen-uit .aan, .kaart:hover .tegel .aan, .licht-aan .tegel .aan, .kaart.aan .tegel .aan { opacity: 1; }
.geen-foto { position: absolute; inset: 0; }
.mini { position: absolute; top: 10px; right: 10px; z-index: 2; border: 0; background: none; padding: 4px; cursor: pointer; }
.mini .baan { width: 34px; height: 20px; }
.mini .baan::after { width: 14px; height: 14px; }
.mini[aria-pressed="true"] .baan::after { transform: translateX(14px); }
.kaart-tekst { display: flex; flex-direction: column; gap: .12rem; padding-inline: 2px; min-width: 0; }
.kaart-merk { font-size: 12px; color: var(--grijs); letter-spacing: .06em; text-transform: uppercase; }
.kaart-naam { font-weight: 600; font-size: 15.5px; letter-spacing: -.015em; text-decoration: none; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kaart-spec { font-size: 13px; color: var(--grijs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kaart-onder { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; margin-top: .35rem; }
.kaart-prijs { font-weight: 700; font-size: 15.5px; font-variant-numeric: tabular-nums; }
.kaart-prijs small { font-weight: 500; color: var(--grijs); font-size: 13px; }
.kaart-prijs s { font-weight: 400; color: var(--grijs); font-size: 13.5px; margin-left: .35rem; }
.kaart-var { font-size: 12.5px; color: var(--grijs); }

/* lijstpagina */
.kruimel { font-size: 13.5px; color: var(--grijs); padding-top: 1.4rem; }
.kruimel a { text-decoration: none; }
.kruimel a:hover { color: var(--inkt); }
.lijst { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 32px; align-items: start; padding-top: 1rem; }
.lijst-kop { display: flex; justify-content: space-between; align-items: end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.lijst-kop h1 { font-size: clamp(2rem, 1.5rem + 1.6vw, 2.8rem); }
.lijst-kop p { color: var(--grijs); margin-top: .35rem; }
.lijst-acties { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; min-width: 0; }
/* Soorten als fototegels bovenaan een categorie (lijst.php, WebshopIndeling::keuzes). Op de gsm één
   rij die zijdelings schuift; contain: inline-size zodat die rij de kolom niet breder duwt dan het
   scherm (de les van de kassaknop, 19-10-2026). */
.soorten { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin: -.2rem 0 1.8rem; }
.soort { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: .9rem; align-items: center; padding: 8px 16px 8px 8px; border-radius: 18px; background: var(--mist); text-decoration: none; transition: background .15s, box-shadow .15s; }
.soort:hover { background: var(--lijn); }
.soort.aan { background: var(--papier); box-shadow: inset 0 0 0 2px var(--inkt); }
.soort-foto { width: 64px; height: 64px; border-radius: 12px; overflow: hidden; background: var(--tegel); position: relative; display: block; }
.soort-foto img { width: 100%; height: 100%; object-fit: cover; }
.soort-foto.los img { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain; mix-blend-mode: multiply; }
.soort-tekst b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
.soort-tekst small { display: block; margin-top: .15rem; color: var(--grijs); font-size: 12.5px; }
.filter-optie.filter-sub { padding-left: 1.4rem; font-size: 13.5px; }
@media (max-width: 1000px) {
  .soorten { display: flex; overflow-x: auto; contain: inline-size; scrollbar-width: none; gap: 8px; margin-bottom: 1.4rem; }
  .soorten::-webkit-scrollbar { display: none; }
  .soort { flex: 0 0 auto; width: 210px; }
}

/* Mega-menu (layout.php, _menupaneel.php; Egon 20-10-2026). Links de categorie met "Alles bekijken" en
   "Bijpassend", rechts dezelfde fototegels als bovenaan haar lijst. Openen en sluiten doet winkel.js
   (.mm.open, met een korte vertraging, en niet opnieuw zolang de muis na een klik nog op het item
   staat); met het toetsenbord opent :focus-visible het. .menu rekt op tot de hoogte van de kop, zodat
   de muis van het item naar het paneel kan zonder het kwijt te raken. */
.menu { align-self: stretch; }
.menu > a { display: flex; align-items: center; }   /* Merken, Outlet: midden, net als de items met een paneel */
.mm { display: flex; align-items: center; }
.mm-knop { display: none; }
.mm-paneel { display: none; }
.mm-titel { display: block; font-size: 28px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; text-decoration: none; color: var(--inkt); }
.mm-tel { display: block; margin-top: .35rem; color: var(--grijs); font-size: 14px; font-weight: 400; }
.mm-alles { display: inline-flex; gap: .4rem; align-items: center; margin-top: 1.1rem; padding: .55rem 1.05rem; border: 1.5px solid var(--lijn-2); border-radius: 999px; font-size: 14px; font-weight: 600; text-decoration: none; color: var(--inkt); }
.mm-alles:hover { border-color: var(--inkt); }
.mm-bij { margin-top: 1.6rem; padding-top: 1rem; border-top: 1px solid var(--lijn); display: flex; flex-direction: column; gap: .15rem; }
.mm-bij b { font-size: 11.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--grijs); margin-bottom: .3rem; }
.mm-bij a { font-size: 14.5px; font-weight: 400; color: var(--inkt-2); text-decoration: none; padding: .18rem 0; }
.mm-tegels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.mm-tegel { display: block; text-decoration: none; color: var(--inkt); }
.mm-tegel-foto { display: block; position: relative; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: var(--tegel); }
.mm-tegel-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.mm-tegel-foto.los img { position: absolute; inset: 10%; width: 80%; height: 80%; object-fit: contain; mix-blend-mode: multiply; }
.mm-tegel:hover .mm-tegel-foto img { transform: scale(1.04); }
.mm-tegel-tekst { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; margin-top: .6rem; }
.mm-tegel-tekst b { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.mm-tegel-tekst small { color: var(--grijs); font-size: 12.5px; font-weight: 400; font-variant-numeric: tabular-nums; }
@keyframes mm-in { from { opacity: 0; transform: translateY(-6px); } }
@media (min-width: 1281px) {
  .mm.open > .mm-paneel, .mm:has(> .mm-kop:focus-visible) > .mm-paneel, .mm-paneel:focus-within { display: block; }
  .mm.open > .mm-kop { color: var(--gloed-tekst); }
  .mm-paneel { position: absolute; left: 0; right: 0; top: calc(100% - 1px); z-index: 31; background: var(--papier); border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); box-shadow: 0 34px 50px -34px rgb(13 12 10 / .28); animation: mm-in .18s ease; }
  .mm-binnen { max-width: var(--breed); margin-inline: auto; padding: 32px clamp(16px, 3vw, 32px) 38px; display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 56px; align-items: start; }
}
@media (max-width: 1280px) {
  .kop.menu-open .menu { max-height: calc(100vh - 70px); overflow-y: auto; }
  .kop.menu-open .menu .mm { flex-wrap: wrap; border-bottom: 1px solid var(--lijn); }
  .kop.menu-open .menu .mm > .mm-kop { flex: 1; border-bottom: 0; }
  .mm-knop { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-right: -10px; border: 0; background: none; color: var(--inkt-2); cursor: pointer; }
  .mm-knop svg { transition: transform .2s; }
  .mm.open > .mm-knop svg { transform: rotate(180deg); }
  .mm.open > .mm-paneel { display: block; flex-basis: 100%; padding: .2rem 0 1.1rem; }
  .mm-binnen { display: flex; flex-direction: column; gap: 1rem; }
  .mm-tegels { order: 1; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .mm-intro { order: 2; }
  .mm-titel, .mm-tel { display: none; }
  .mm-alles { margin-top: 0; }
  .mm-bij { margin-top: 1rem; }
  .kop.menu-open .menu .mm-paneel a { border-bottom: 0; white-space: normal; padding: 0; }
  .kop.menu-open .menu .mm-paneel .mm-alles { padding: .5rem 1rem; }
  .kop.menu-open .menu .mm-paneel .mm-bij a { padding: .3rem 0; }
  .mm-tegel-foto { border-radius: 12px; }
  .mm-tegel-tekst { display: block; margin-top: .35rem; }
  .mm-tegel-tekst b { display: block; font-size: 13.5px; line-height: 1.25; }
}
@media (max-width: 560px) {
  .mm-tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.sorteer select { border: 1.5px solid var(--lijn-2); border-radius: 999px; padding: .5rem 2rem .5rem .9rem; font-size: 14px; background: var(--papier); cursor: pointer; }
.filters-open { display: none; }
.filters { position: sticky; top: 90px; display: flex; flex-direction: column; gap: .4rem; max-height: calc(100vh - 110px); overflow: auto; padding-right: 4px; }
.filters-kop { display: none; }
.filter { border-bottom: 1px solid var(--lijn); padding: .6rem 0 .8rem; }
.filter summary { font-weight: 600; font-size: 14.5px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; padding: .2rem 0 .5rem; }
.filter summary::-webkit-details-marker { display: none; }
.filter summary::after { content: "–"; color: var(--grijs); }
.filter:not([open]) summary::after { content: "+"; }
.filter-optie { display: grid; grid-template-columns: 18px 1fr auto; gap: .6rem; align-items: center; font-size: 14px; padding: .28rem 0; text-decoration: none; color: var(--inkt-2); }
.filter-optie small { color: var(--grijs); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.filter-optie:hover { color: var(--inkt); }
.filter-optie .vink { width: 16px; height: 16px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--lijn-2); display: inline-block; }
.filter-optie .bol { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--lijn-2); display: inline-block; }
.filter-optie.aan { color: var(--inkt); font-weight: 600; }
.filter-optie.aan .vink { background: var(--inkt); box-shadow: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E"); }
.filter-optie.aan .bol { box-shadow: inset 0 0 0 5px var(--inkt); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 1.2rem; }
.chip { border-radius: 999px; padding: .35rem .75rem; font-size: 13px; background: var(--mist); text-decoration: none; }
.chip:hover { background: var(--lijn); }
.chip-leeg { background: none; text-decoration: underline; text-underline-offset: 3px; color: var(--grijs); }
.paginas { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-top: 3rem; }
.paginas a, .paginas span { min-width: 40px; height: 40px; padding: 0 .75rem; border-radius: 999px; display: grid; place-items: center; text-decoration: none; font-size: 14px; }
.paginas a:hover { background: var(--mist); }
.paginas a[aria-current] { background: var(--inkt); color: #fff; }
.leeg { padding: 3rem 0; }
.leeg h2 { font-size: 1.6rem; margin-bottom: .6rem; }
.leeg p { color: var(--grijs); }

/* productpagina */
.pdp { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(24px, 4vw, 56px); padding-top: 1rem; align-items: start; }
.galerij { position: sticky; top: 90px; }
.galerij-hoofd { position: relative; aspect-ratio: 1; border-radius: var(--r-groot); background: var(--tegel); overflow: hidden; }
.galerij-hoofd img { position: absolute; inset: 6%; width: 88%; height: 88%; object-fit: contain; mix-blend-mode: multiply; }
.galerij-hoofd img.sfeer { inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: normal; }
.schakelaar.op-foto { position: absolute; left: 16px; top: 14px; z-index: 2; background: rgb(255 255 255 / .88); border-radius: 999px; padding: .35rem .75rem .35rem .4rem; font-size: 13px; }
.duimen { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.duimen button { aspect-ratio: 1; border-radius: 12px; border: 0; padding: 0; overflow: hidden; background: var(--tegel); cursor: pointer; position: relative; }
.duimen button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--inkt); }
.duimen img { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain; mix-blend-mode: multiply; }
.duimen img.sfeer { inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: normal; }
.pdp-info { display: flex; flex-direction: column; gap: 1.6rem; min-width: 0; }
.pdp-bovenaan { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pdp-merk { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--grijs); text-decoration: none; }
.pdp-info h1 { font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.8rem); letter-spacing: -.045em; margin-top: .35rem; }
.codes { font-family: var(--f-mono); font-size: 12.5px; color: var(--grijs); display: flex; gap: 1.2rem; flex-wrap: wrap; margin-top: .7rem; }
.prijsblok { padding: 22px; border-radius: var(--r-kaart); background: var(--mist); display: flex; flex-direction: column; gap: 1rem; }
.prijs-groot { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.prijs-groot b { font-size: clamp(2rem, 1.6rem + 1.2vw, 2.6rem); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.prijs-groot s { color: var(--grijs); font-size: 17px; }
.prijs-groot span { color: var(--grijs); font-size: 14px; }
.varianten { display: flex; flex-direction: column; gap: .5rem; }
.varianten > div { display: flex; flex-wrap: wrap; gap: 6px; }
.variant { display: grid; grid-template-columns: 46px auto; grid-template-rows: auto auto; column-gap: .6rem; align-items: center; padding: 5px 14px 5px 5px; border-radius: 14px; background: var(--papier); box-shadow: inset 0 0 0 1px var(--lijn); text-decoration: none; font-size: 13.5px; min-height: 56px; }
.variant img { grid-row: span 2; width: 46px; height: 46px; object-fit: contain; border-radius: 10px; background: var(--tegel); mix-blend-mode: multiply; }
.variant.zonder-prijs img { grid-row: auto; }
.variant small { color: var(--grijs); font-size: 12px; }
.variant.aan { box-shadow: inset 0 0 0 2px var(--inkt); }
.variant:hover:not(.aan) { box-shadow: inset 0 0 0 1px var(--lijn-2), 0 6px 16px -10px rgb(0 0 0 / .35); }
.variant span { line-height: 1.25; }
.varianten { gap: 1rem; }
.as { display: flex; flex-direction: column; gap: .45rem; }
.as > .klein b { color: var(--inkt); font-weight: 600; }
.as-waarden, .as > div { display: flex; flex-wrap: wrap; gap: 6px; }
.optie { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-width: 46px; height: 42px; padding: 0 14px; border-radius: 12px;
  background: var(--papier); box-shadow: inset 0 0 0 1px var(--lijn); text-decoration: none; font-size: 14px; font-variant-numeric: tabular-nums; }
.optie.met-foto { height: 52px; padding: 4px 14px 4px 4px; }
.optie.met-foto img { width: 44px; height: 44px; object-fit: contain; border-radius: 9px; background: var(--tegel); mix-blend-mode: multiply; }
.optie:hover:not(.aan) { box-shadow: inset 0 0 0 1px var(--lijn-2), 0 6px 16px -10px rgb(0 0 0 / .35); }
.optie.aan { box-shadow: inset 0 0 0 2px var(--inkt); font-weight: 600; }
.optie.anders { color: var(--grijs); box-shadow: inset 0 0 0 1px var(--lijn), inset 0 0 0 1px transparent; border: 1px dashed var(--lijn-2); }
/* De grote voorproef bij hover op een uitvoering (winkel.js) */
.voorproef { position: fixed; left: 0; top: 0; z-index: 70; width: 260px; padding: 10px; border-radius: 20px; pointer-events: none;
  background: var(--papier); box-shadow: 0 34px 70px -24px rgb(0 0 0 / .5), 0 0 0 1px var(--lijn);
  opacity: 0; scale: .94; transition: opacity .16s ease, scale .2s ease; will-change: transform; }
.voorproef.toon { opacity: 1; scale: 1; }
.vp-foto { aspect-ratio: 1; border-radius: 13px; background: var(--tegel); overflow: hidden; }
.vp-foto img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; display: block; }
.voorproef span { display: block; padding: 9px 4px 2px; font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--inkt); }
.voorproef span:empty { display: none; }
.varianten-n { font-family: var(--f-mono); font-size: 11.5px; color: var(--grijs); margin-left: .25rem; }
.varianten-meer summary { cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--inkt-2); list-style: none; display: inline-flex; align-items: center; gap: .35rem; padding: .35rem 0; }
.varianten-meer summary::-webkit-details-marker { display: none; }
.varianten-meer summary::after { content: '+'; font-family: var(--f-mono); color: var(--grijs); }
.varianten-meer[open] summary::after { content: '−'; }
.varianten-meer > div { display: flex; flex-wrap: wrap; gap: 6px; margin-top: .4rem; max-height: 420px; overflow-y: auto; padding: 2px; }
.koop { display: flex; gap: 8px; flex-wrap: wrap; }
.koop .knop { flex: 1; min-width: 180px; }
.aantal { display: inline-flex; align-items: center; border-radius: 999px; background: var(--papier); box-shadow: inset 0 0 0 1px var(--lijn-2); height: 48px; }
.aantal button { width: 40px; height: 48px; border: 0; background: none; cursor: pointer; font-size: 18px; }
.aantal input { width: 48px; border: 0; background: transparent; text-align: center; font-family: var(--f-mono); font-size: 15px; -moz-appearance: textfield; }
.aantal input::-webkit-inner-spin-button { -webkit-appearance: none; }
.beloftes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; font-size: 14px; }
.beloftes li { display: flex; gap: .55rem; align-items: center; }
.stip { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; }
.kop-klein { font-size: 17px; letter-spacing: -.02em; margin-bottom: .5rem; }
.specs { width: 100%; border-collapse: collapse; font-size: 14px; color: var(--inkt); }
.specs td { padding: .6rem 0; border-bottom: 1px solid var(--lijn); vertical-align: top; }
.specs td:first-child { color: var(--grijs); width: 44%; padding-right: 1rem; }
.docs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.docs a { display: flex; justify-content: space-between; align-items: center; padding: .75rem .9rem; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--lijn); text-decoration: none; font-size: 14px; }
.docs a:hover { box-shadow: inset 0 0 0 1px var(--inkt); }
.docs small { font-family: var(--f-mono); font-size: 11.5px; color: var(--grijs); }
.omschrijving { max-width: 46rem; padding-top: 3.5rem; }
.omschrijving h2 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); margin-bottom: 1rem; }
.tekst { color: var(--inkt-2); font-size: 16.5px; line-height: 1.65; }
.tekst p, .tekst ul, .tekst ol { margin: 0 0 1rem; }
.tekst h2, .tekst h3, .tekst h4 { font-size: 18px; letter-spacing: -.02em; margin: 1.4rem 0 .5rem; color: var(--inkt); }

/* kassa: winkelmand en afrekenen (opzet zoals Tropaholic) */
.knop-groot { padding: 1rem 1.6rem; font-size: 16px; }
.tekstlink { display: inline-flex; align-items: center; gap: .4rem; background: none; border: 0; padding: 0; cursor: pointer; font-size: 14px; font-weight: 500; color: var(--inkt-2); text-decoration: underline; text-decoration-color: var(--lijn-2); text-underline-offset: 4px; }
.tekstlink:hover { color: var(--inkt); text-decoration-color: var(--inkt); }
.kassa-wrap { padding-top: 2.2rem; }
.kassa-kop { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 2rem; }
.kassa-kop h1 { font-size: clamp(2.1rem, 1.6rem + 1.8vw, 3.1rem); }
.kassa-kop h1 small { font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--grijs); vertical-align: middle; margin-left: .3rem; }
.stappen { font-size: 13.5px; font-weight: 500; color: var(--grijs); margin-bottom: .8rem; display: flex; gap: .45rem; align-items: center; }
.stappen b { color: var(--inkt); font-weight: 600; }
.stappen span { color: var(--lijn-2); }
.stappen a { text-decoration: none; }
.stappen a:hover { color: var(--inkt); }
.kassa { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 48px; align-items: start; }
.kassa-som { position: sticky; top: 96px; }
.som-kaart { background: var(--mist); border-radius: var(--r-groot); padding: 28px; }
.som-kaart h2 { font-size: 19px; letter-spacing: -.02em; margin-bottom: 1.2rem; }
.som-kaart dl { display: grid; grid-template-columns: 1fr auto; gap: .55rem 1rem; margin: 0; font-size: 15px; }
.som-kaart dt { color: var(--grijs); }
.som-kaart dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.som-totaal { display: flex; justify-content: space-between; align-items: baseline; margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--lijn-2); }
.som-totaal span { font-weight: 600; }
.som-totaal b { font-size: 26px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.som-btw { text-align: right; font-size: 12.5px; color: var(--grijs); margin: .25rem 0 1.4rem; }
.vertrouwen { margin-top: 1.5rem; padding-top: 1.3rem; border-top: 1px solid var(--lijn-2); }
.vertrouwen ul { list-style: none; margin: 0; padding: 0; }
.vertrouwen .betaal { display: flex; flex-wrap: wrap; gap: 5px; }
.vertrouwen .betaal li { font-size: 11px; font-weight: 600; padding: .28rem .5rem; border-radius: 7px; background: var(--papier); box-shadow: inset 0 0 0 1px var(--lijn); color: var(--inkt-2); }
.geruststel { margin-top: 1.1rem !important; display: flex; flex-direction: column; gap: .6rem; font-size: 14px; color: var(--inkt-2); }
.geruststel li { display: flex; gap: .6rem; align-items: center; }
.let-op { background: var(--gloed-zacht); color: var(--gloed-tekst); padding: .9rem 1.1rem; border-radius: 14px; margin-bottom: 1.4rem; }
.let-op-klein { color: var(--gloed-tekst); margin-top: .7rem; }
.gratis { border-radius: 18px; box-shadow: inset 0 0 0 1px var(--lijn); padding: 16px 18px; margin-bottom: 8px; }
.gratis p { display: flex; gap: .6rem; align-items: center; font-size: 14.5px; }
.balk { height: 6px; border-radius: 3px; background: var(--mist); overflow: hidden; margin-top: .75rem; }
.balk span { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--gloed-diep), var(--gloed)); transition: width .5s cubic-bezier(.2, .8, .2, 1); }
.mandlijst { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--lijn); }
.mandregel { display: flex; gap: 22px; padding: 24px 0; border-top: 1px solid var(--lijn); }
.mandlijst .mandregel:first-child { border-top: 0; }
.mr-foto { flex: none; width: 128px; height: 128px; border-radius: 18px; background: var(--tegel); display: grid; place-items: center; overflow: hidden; }
.mr-foto img { width: 86%; height: 86%; object-fit: contain; mix-blend-mode: multiply; }
.mr-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mr-boven { display: flex; justify-content: space-between; gap: 1rem; align-items: start; }
.mr-naam { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.mr-naam > a { font-weight: 600; font-size: 16.5px; letter-spacing: -.015em; text-decoration: none; }
.mr-naam > a:hover { text-decoration: underline; text-underline-offset: 3px; }
.mr-stuk { font-size: 14px; color: var(--grijs); margin-top: .2rem; }
.mr-lampen, .pdp-lampen { display: inline-flex; gap: .45rem; align-items: center; font-size: 13px; color: var(--gloed-tekst); margin-top: .35rem; }
.pdp-lampen { align-items: flex-start; font-size: 14px; line-height: 1.45; margin: 0; }
.mr-staffel { font-size: 13px; color: var(--ok); margin-top: .2rem; }
.pdp-staffel { list-style: none; margin: .7rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.pdp-staffel button { display: grid; grid-template-columns: auto auto; column-gap: .6rem; align-items: baseline; padding: .45rem .75rem; border: 1px solid var(--lijn); border-radius: var(--r-ctl); background: var(--papier); font: inherit; color: inherit; text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.pdp-staffel button:hover { border-color: var(--inkt-2); }
.pdp-staffel button:focus-visible { outline: 2px solid var(--inkt); outline-offset: 2px; }
.pdp-staffel button[aria-pressed="true"] { border-color: var(--ok); box-shadow: inset 0 0 0 1px var(--ok); }
.pdp-staffel span { font-size: 13px; color: var(--inkt-2); }
.pdp-staffel b { font-size: 15.5px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; justify-self: end; }
.pdp-staffel small { grid-column: 1 / -1; font-size: 12px; color: var(--ok); }
.pdp-lampen svg { flex: none; margin-top: 2px; }
.pdp-lampen a { color: inherit; font-weight: 600; }
/* accessoires uit de reeks, onder de koop (product.php) */
.pdp-acc { border-top: 1px solid var(--lijn); padding-top: 1.1rem; margin-top: .2rem; }
.pdp-acc-lijst { display: flex; flex-direction: column; gap: 8px; }
.pdp-acc .sug { background: var(--papier); border-radius: 14px; padding: 8px; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.acc-kleuren { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.acc-kleur { position: relative; }
.acc-kleur input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.acc-kleur span { display: inline-block; font-size: 12px; line-height: 1; padding: 5px 9px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--lijn-2); cursor: pointer; color: var(--inkt-2); }
.acc-kleur span:hover { box-shadow: inset 0 0 0 1px var(--inkt); }
.acc-kleur input:checked + span { box-shadow: inset 0 0 0 1.5px var(--inkt); color: var(--inkt); font-weight: 600; }
.acc-kleur input:focus-visible + span { outline: 2px solid var(--inkt); outline-offset: 2px; }
.pdp-acc-meer { margin-top: 8px; }
.pdp-acc-meer summary { cursor: pointer; font-size: 14px; font-weight: 600; padding: .3rem 0; list-style: none; display: inline-flex; align-items: center; gap: .35rem; }
.pdp-acc-meer summary::-webkit-details-marker { display: none; }
.pdp-acc-meer summary::after { content: '+'; color: var(--grijs); font-weight: 400; }
.pdp-acc-meer[open] summary::after { content: '−'; }
.pdp-acc-meer[open] summary { margin-bottom: 8px; }
/* hulp onder de koopknop: lamp, IP, driver (_pdp-hulp.php) en de zaagmaat erboven (23-10-2026) */
.pdp-maat { display: flex; gap: .5rem; align-items: center; margin: 0; padding: 9px 12px; border-radius: 12px; background: var(--papier);
  box-shadow: inset 0 0 0 1px var(--lijn); font-size: 14.5px; color: var(--inkt-2); }
.pdp-maat svg { flex: none; color: var(--gloed-tekst); }
.pdp-maat b { color: var(--inkt); font-variant-numeric: tabular-nums; }
.pdp-hulp { display: flex; flex-direction: column; gap: 8px; }
/* Zoom: de inzetring is verplicht, en de vaste pakketten (ZoomGamma) */
.optie.niet { opacity: .38; cursor: not-allowed; text-decoration: line-through; filter: grayscale(1); }
.optie.niet:hover { box-shadow: inset 0 0 0 1px var(--lijn); }
.pdp-verplicht { display: flex; padding: 10px 12px; border-radius: 12px; background: var(--gloed-zacht); }
.pdp-verplicht b { font-weight: 700; }
.pdp-zoom-kop { margin-top: 6px; font-weight: 600; }
a.pdp-pakket { color: inherit; text-decoration: none; }
a.pdp-pakket:hover { box-shadow: inset 0 0 0 1px var(--lijn); }
a.pdp-pakket .sug-tekst b { display: block; font-weight: 600; font-size: 13px; line-height: 1.35; }
.pdp-hulp .sug, .pdp-hulp-rij { background: var(--papier); border-radius: 14px; padding: 8px; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px;
  align-items: center; box-shadow: inset 0 0 0 1px var(--lijn); }
.pdp-hulp .acc-kleuren { margin-top: 5px; }
.pdp-hulp-meter { margin-top: 6px; justify-content: flex-start; }
.pdp-hulp-meter + small { display: block; margin-top: 3px; }
.pdp-ip { color: var(--inkt-2); }
.pdp-ip svg { color: var(--inkt-2); }
.pdp-ip b { color: var(--inkt); }
.pdp-faq { margin: 0; }
.pdp-faq summary { font-size: 15px; padding: .8rem 2rem .8rem 0; }
.pdp-faq summary::after { top: 1.1rem; }
.pdp-faq details[open] summary::after { top: 1.35rem; }
.pdp-faq details > div { font-size: 14.5px; color: var(--inkt-2); }
/* railverlichting: wat heb je nodig (_rail.php, RailSysteem, 23-10-2026) */
.pdp-rail { border-top: 1px solid var(--lijn); padding-top: 1.1rem; margin-top: .2rem; }
.rail-intro { font-size: 14px; line-height: 1.5; color: var(--inkt-2); margin: 0 0 .8rem; }
.rail-stappen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.rail-stap-kop { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 7px; }
.rail-stap-kop > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rail-stap-kop b { font-size: 14.5px; letter-spacing: -.01em; }
.rail-stap-kop span:not(.rail-nr) { font-size: 13px; line-height: 1.45; color: var(--grijs); }
.rail-nr { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--inkt); color: var(--papier); font-size: 12px; font-weight: 700; display: grid; place-items: center; margin-top: 1px; }
.rail-los .rail-stap-kop { padding-left: 0; }
.pdp-rail .sug { background: var(--papier); border-radius: 14px; padding: 8px; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px; align-items: center; box-shadow: inset 0 0 0 1px var(--lijn); }
.rail-as { margin-top: 5px; }
.rail-as + .rail-as { margin-top: 4px; }
.rail-of { font-size: 13.5px; font-weight: 600; margin: 14px 0 8px; color: var(--inkt-2); }
.rail-ook { font-size: 13.5px; line-height: 1.5; color: var(--inkt-2); margin: 12px 0 0; }
.rail-ook a { color: inherit; font-weight: 600; }
.rail-meer { margin-top: 12px; }
.rail-reken { background: var(--papier); border-radius: 14px; padding: 12px; box-shadow: inset 0 0 0 1px var(--lijn); margin: 0 0 16px; }
.rail-reken-kop { display: flex; gap: .45rem; align-items: center; margin-bottom: 10px; font-size: 14.5px; }
.rail-reken-kop svg { color: var(--gloed-tekst); flex: none; }
.rail-reken-velden { display: flex; flex-direction: column; gap: 8px; }
.rr-veld { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; font-size: 13.5px; color: var(--inkt-2); }
.rr-veld .acc-kleuren { margin-top: 0; }
.rr-invoer { display: inline-flex; align-items: center; gap: 6px; }
.rr-invoer input { width: 76px; padding: 6px 8px; border: 1px solid var(--lijn-2); border-radius: 9px; font: inherit; color: var(--inkt); background: var(--papier); text-align: right; }
.rail-reken-lijst { list-style: none; margin: 12px 0 0; padding: 10px 0 0; border-top: 1px solid var(--lijn); display: flex; flex-direction: column; gap: 5px; font-size: 13.5px; }
.rail-reken-lijst:empty { display: none; }
.rail-reken-lijst li { display: grid; grid-template-columns: 2.6em minmax(0, 1fr) auto; gap: 8px; align-items: baseline; }
.rail-reken-lijst a { color: var(--inkt); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-reken-lijst a:hover { text-decoration: underline; }
.rr-n { color: var(--grijs); font-variant-numeric: tabular-nums; }
.rr-b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rail-reken-noot { font-size: 12.5px; color: var(--grijs); margin: 6px 0 0; }
.rail-reken-noot:empty { display: none; }
.rail-reken-voet { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; font-size: 15px; font-variant-numeric: tabular-nums; }
.rail-check { display: flex; gap: .45rem; align-items: flex-start; margin: 14px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--inkt-2); }
.rail-check svg { flex: none; margin-top: 2px; color: var(--gloed-tekst); }
.rail-meer summary { white-space: normal; }
.rail-alle { margin-top: 1.2rem; }
.rail-alle > summary { list-style: none; cursor: pointer; display: inline-flex; }
.rail-alle > summary::-webkit-details-marker { display: none; }
.rail-alle[open] > summary { display: none; }
/* outletstuk als kleine eigen keuze naast de gewone prijs (product.php, 19-10-2026) */
.outlet-optie { display: flex; align-items: center; gap: .55rem; margin: 0; padding: 6px 6px 6px 12px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--lijn); font-size: 13px; color: var(--inkt-2); }
.outlet-optie svg { flex: none; color: var(--gloed-tekst); }
.outlet-optie span { flex: 1; min-width: 0; }
.mr-totaal { font-size: 17px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mr-onder { margin-top: auto; padding-top: 1rem; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem 1rem; }
.stapper { display: inline-flex; align-items: center; height: 44px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--lijn-2); background: var(--papier); }
.stapper button { width: 44px; height: 44px; border: 0; background: none; border-radius: 50%; cursor: pointer; font-size: 18px; display: grid; place-items: center; }
.stapper button:hover { background: var(--mist); }
.stapper input { width: 40px; border: 0; background: transparent; text-align: center; font-family: var(--f-mono); font-size: 15px; -moz-appearance: textfield; }
.stapper input::-webkit-inner-spin-button { -webkit-appearance: none; }
.stapper.klein { height: 34px; }
.stapper.klein button { width: 34px; height: 34px; }
.stapper.klein span { min-width: 22px; text-align: center; font-size: 14px; }
.bezig { opacity: .55; pointer-events: none; transition: opacity .15s; }
.lampen-sug { margin-top: 28px; border-radius: var(--r-groot); background: var(--gloed-zacht); padding: 22px; }
.lampen-sug-kop { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 1rem; }
.lampen-sug-icoon { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--papier); display: grid; place-items: center; color: var(--gloed-tekst); }
.lampen-sug h2 { font-size: 18px; letter-spacing: -.02em; }
.lampen-sug p { font-size: 14px; color: var(--inkt-2); margin-top: .2rem; }
.lampen-sug-lijst { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 1rem; }
.lampen-sug .sug { background: var(--papier); border-radius: 16px; padding: 10px; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 4px 10px; align-items: center; }
.lampen-sug .sug form { grid-column: 1 / -1; }
.lampen-sug .sug .knop { width: 100%; }
.sug-foto { width: 52px; height: 52px; border-radius: 10px; background: var(--tegel); display: grid; place-items: center; overflow: hidden; }
.sug-foto img { width: 86%; height: 86%; object-fit: contain; mix-blend-mode: multiply; }
.sug-tekst { min-width: 0; display: flex; flex-direction: column; font-size: 13.5px; }
.sug-tekst a { text-decoration: none; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; }
.sug-tekst small { color: var(--grijs); margin-top: .15rem; font-size: 13px; }
.mand-leeg { display: flex; flex-direction: column; align-items: center; text-align: center; background: var(--mist); border-radius: var(--r-groot); padding: clamp(3rem, 2rem + 5vw, 6rem) 1.5rem; }
.mand-leeg-icoon { width: 80px; height: 80px; border-radius: 50%; background: var(--papier); display: grid; place-items: center; box-shadow: 0 12px 30px -16px rgb(0 0 0 / .3); margin-bottom: 1.8rem; }
.mand-leeg h2 { font-size: clamp(1.8rem, 1.4rem + 1.2vw, 2.4rem); }
.mand-leeg p { color: var(--grijs); margin-top: .7rem; }
.mand-leeg .knoppen { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: 1.8rem; }

/* afrekenen */
.af { display: flex; flex-direction: column; gap: 16px; }
.af-blok { border-radius: var(--r-groot); box-shadow: inset 0 0 0 1px var(--lijn); padding: clamp(20px, 3vw, 32px); display: flex; flex-direction: column; gap: 14px; }
.af-blok h2 { font-size: 19px; letter-spacing: -.02em; display: flex; align-items: center; gap: .75rem; margin-bottom: .4rem; }
.nr { width: 28px; height: 28px; border-radius: 50%; background: var(--inkt); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 600; letter-spacing: 0; }
.af-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.af-rij-post { grid-template-columns: 1fr 2fr; }
.veld { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.veld label { font-size: 14px; font-weight: 500; }
.optioneel { color: var(--grijs); font-weight: 400; font-size: 12.5px; }
.veld input, .kies select, .af-opmerking textarea { height: 48px; border: 1.5px solid var(--lijn-2); border-radius: var(--r-ctl); padding: 0 .95rem; font-size: 15px; background: var(--papier); color: var(--inkt); transition: border-color .15s, box-shadow .15s; width: 100%; }
.af-opmerking textarea { height: auto; padding: .8rem .95rem; resize: vertical; margin-top: .6rem; }
.veld input:hover, .kies select:hover { border-color: var(--grijs); }
.veld input:focus, .kies select:focus, .af-opmerking textarea:focus { outline: none; border-color: var(--inkt); box-shadow: 0 0 0 4px rgb(13 12 10 / .06); }
.veld.fout input { border-color: #c2410c; background: #fff8f5; }
.veld-fout { color: #c2410c; font-size: 13px; }
.veld-hint { color: var(--grijs); font-size: 13px; }
.veld-hint a { color: var(--inkt); }
.kies { position: relative; }
.kies select { appearance: none; padding-right: 2.4rem; cursor: pointer; }
.kies::after { content: ""; position: absolute; right: 1rem; top: 50%; width: 8px; height: 8px; border-right: 1.8px solid var(--grijs); border-bottom: 1.8px solid var(--grijs); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.vast { height: 48px; display: flex; align-items: center; padding: 0 .95rem; border-radius: var(--r-ctl); background: var(--mist); font-size: 15px; }
.vink { display: flex; gap: .7rem; align-items: flex-start; font-size: 14.5px; color: var(--inkt-2); cursor: pointer; }
.vink input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--inkt); flex: none; }
.vink a { color: var(--inkt); }
.vink.fout span { color: #c2410c; }
.af-bedrijf { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 16px; background: var(--mist); }
.af-opmerking summary { cursor: pointer; font-size: 14px; font-weight: 500; color: var(--inkt-2); text-decoration: underline; text-decoration-color: var(--lijn-2); text-underline-offset: 4px; width: fit-content; }
.keuze { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .9rem; align-items: center; padding: 14px 16px; border-radius: 16px; box-shadow: inset 0 0 0 1.5px var(--lijn); cursor: pointer; }
.keuze.aan { box-shadow: inset 0 0 0 2px var(--inkt); }
.keuze input, .methode input { accent-color: var(--inkt); width: 18px; height: 18px; }
.keuze-tekst { display: flex; flex-direction: column; }
.keuze-tekst small { color: var(--grijs); font-size: 13.5px; }
.keuze-prijs { font-variant-numeric: tabular-nums; }
/* Thuislevering of Mondial Relay in de kassa (ook in Pro; pro.css zet daar het donker eroverheen). */
.af-leveringen { display: grid; gap: 10px; }
.af-leveringen .keuze:has(input:checked) { box-shadow: inset 0 0 0 2px var(--inkt); }
.af-leveringen.fout .keuze { box-shadow: inset 0 0 0 1.5px #c0392b; }
.af-punten { display: grid; gap: .7rem; margin-top: 10px; padding: 14px 16px; border-radius: 16px; background: var(--mist); box-shadow: inset 0 0 0 1px var(--lijn); }
.af-punt-zoek { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .6rem; align-items: end; }
.af-punt-zoek .veld { margin: 0; }
.af-punt-melding { margin: 0; font-size: 13.5px; color: var(--grijs); }
.af-punt-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 340px; overflow-y: auto; }
.af-punt { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: .7rem; align-items: start; padding: 10px 12px; border-radius: 12px; background: var(--papier); box-shadow: inset 0 0 0 1px var(--lijn); cursor: pointer; }
.af-punt:hover { box-shadow: inset 0 0 0 1px var(--grijs); }
.af-punt:has(input:checked) { box-shadow: inset 0 0 0 2px var(--inkt); }
.af-punt input { accent-color: var(--inkt); width: 16px; height: 16px; margin: 2px 0 0; }
.af-punt-tekst { display: flex; flex-direction: column; min-width: 0; font-size: 14px; }
.af-punt-tekst span, .af-punt-tekst small { color: var(--grijs); }
.af-punt-tekst small { font-size: 12.5px; }
.af-punt-afstand { font-size: 13px; color: var(--grijs); white-space: nowrap; }
.af-punt-lijst.fout .af-punt { box-shadow: inset 0 0 0 1px #c0392b; }
/* Enter in een veld = bestellen: de eerste verzendknop is onzichtbaar maar telt als standaard. */
.verborgen-standaard { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.methodes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.methode { display: flex; gap: .65rem; align-items: center; padding: 14px; border-radius: 14px; box-shadow: inset 0 0 0 1.5px var(--lijn); cursor: pointer; font-size: 14.5px; font-weight: 600; }
.methode.aan { box-shadow: inset 0 0 0 2px var(--inkt); background: var(--mist); }
.methodes.fout .methode { box-shadow: inset 0 0 0 1.5px #f3b8a0; }
.af-knop { margin-top: .4rem; }
.af-onder { text-align: center; }
.melding-blok { display: flex; gap: 14px; align-items: flex-start; padding: 16px 20px; border-radius: 18px; margin-bottom: 1.6rem; }
.melding-blok b { display: block; }
.melding-blok p { font-size: 14px; margin-top: .15rem; }
.melding-blok.goed { background: #e8f5ec; color: #14532d; }
.melding-blok.fout { background: #fdeee6; color: #7c2d12; }
.melding-icoon { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--papier); display: grid; place-items: center; }
.som-regels { list-style: none; margin: 0 0 1.2rem; padding: 0 0 1.2rem; border-bottom: 1px solid var(--lijn-2); display: flex; flex-direction: column; gap: 12px; }
.som-regels li { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: 14px; }
.som-foto { position: relative; width: 56px; height: 56px; border-radius: 12px; background: var(--papier); display: grid; place-items: center; }
.som-foto img { width: 84%; height: 84%; object-fit: contain; mix-blend-mode: multiply; }
.som-foto i { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; border-radius: 10px; background: var(--inkt); color: #fff; font-style: normal; font-size: 11px; font-weight: 600; display: grid; place-items: center; padding: 0 5px; }
.som-naam { display: flex; flex-direction: column; font-weight: 600; line-height: 1.3; min-width: 0; }
.som-naam small { font-weight: 400; color: var(--grijs); font-size: 12.5px; }
.som-prijs { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* het mandpaneel dat rechts inschuift */
.lade-dim { position: fixed; inset: 0; z-index: 80; background: rgb(13 12 10 / 0); transition: background .25s; }
.lade-dim.open { background: rgb(13 12 10 / .35); }
.lade { position: fixed; top: 0; right: 0; bottom: 0; z-index: 90; width: min(460px, 100vw); background: var(--papier); display: flex; flex-direction: column; box-shadow: -30px 0 60px -30px rgb(0 0 0 / .4); transform: translateX(100%); transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.lade.open { transform: none; }
.lade-open { overflow: hidden; }
.lade-kop { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--lijn); }
.lade-kop h2 { font-size: 20px; letter-spacing: -.02em; }
.lade-kop small { font-size: 14px; font-weight: 500; color: var(--grijs); letter-spacing: 0; }
.lade-sluit { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--mist); cursor: pointer; display: grid; place-items: center; }
.lade-sluit:hover { background: var(--lijn); }
.lade-inhoud { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 14px 22px 20px; }
.lade-nieuw { display: flex; gap: .6rem; align-items: center; font-size: 14px; font-weight: 600; color: #14532d; background: #e8f5ec; border-radius: 12px; padding: .65rem .85rem; margin-bottom: 6px; }
.lade-regels { list-style: none; margin: 0; padding: 0; }
.lade-regel { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--lijn); }
.lade-regel.net .lade-foto { box-shadow: 0 0 0 2px var(--gloed); }
.lade-foto { width: 76px; height: 76px; border-radius: 14px; background: var(--tegel); display: grid; place-items: center; overflow: hidden; }
.lade-foto img { width: 86%; height: 86%; object-fit: contain; mix-blend-mode: multiply; }
.lade-tekst { display: flex; flex-direction: column; min-width: 0; gap: .1rem; }
.lade-naam { font-weight: 600; font-size: 14.5px; text-decoration: none; line-height: 1.3; }
.lade-lampen { font-size: 12.5px; color: var(--gloed-tekst); }
.lade-staffel { font-size: 12.5px; color: var(--ok); }
.lade-onder { display: flex; justify-content: space-between; align-items: center; gap: .6rem; margin-top: .55rem; }
.lade-onder b { font-variant-numeric: tabular-nums; font-size: 15px; }
.lade-weg { width: 30px; height: 30px; border: 0; background: none; border-radius: 50%; cursor: pointer; color: var(--grijs); display: grid; place-items: center; }
.lade-weg:hover { background: var(--mist); color: var(--inkt); }
.lade-sug { margin-top: 18px; border-radius: 18px; background: var(--gloed-zacht); padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.lade-sug-kop { display: flex; gap: .7rem; align-items: flex-start; color: var(--gloed-tekst); }
.lade-sug-kop b { display: block; color: var(--inkt); font-size: 14.5px; }
.lade-sug-kop span { font-size: 13px; color: var(--inkt-2); }
.lade-sug .sug { background: var(--papier); border-radius: 14px; padding: 8px; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.lade-voet { border-top: 1px solid var(--lijn); padding: 16px 22px calc(18px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 10px; }
.klein-gratis { padding: 0; box-shadow: none; margin: 0; }
.klein-gratis p { font-size: 13.5px; }
.klein-gratis .balk { margin-top: .45rem; }
.lade-som { display: flex; justify-content: space-between; align-items: baseline; font-size: 16px; }
.lade-som b { font-size: 22px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.lade-btw { font-size: 12.5px; color: var(--grijs); margin-top: -4px; }
.lade-naar { text-align: center; font-size: 14px; font-weight: 500; padding: .3rem; }
.lade-leeg { padding: 2.5rem 0; text-align: center; }
.lade-leeg p { color: var(--grijs); font-size: 14px; margin-top: .4rem; }
.merken { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.merken a { display: flex; flex-direction: column; gap: .2rem; padding: 18px; border-radius: var(--r-kaart); background: var(--mist); text-decoration: none; }
.merken b { font-size: 19px; letter-spacing: -.03em; }
.merken small { color: var(--grijs); }

/* voet */
.voet { border-top: 1px solid var(--lijn); }
.voet-top { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); gap: 2rem; padding-block: 3.2rem 2.4rem; }
.voet-merk p { color: var(--grijs); font-size: 14px; margin-top: .9rem; max-width: 34ch; }
.nieuwsbrief { margin-top: 1.4rem; }
.nieuwsbrief b { display: block; font-size: 14px; margin-bottom: .5rem; }
.nieuwsbrief form { display: flex; gap: 6px; max-width: 360px; }
.nieuwsbrief input { flex: 1; min-width: 0; border: 1.5px solid var(--lijn-2); border-radius: 999px; padding: .55rem 1rem; font-size: 14px; }
.nieuwsbrief small { display: block; color: var(--grijs); font-size: 12px; margin-top: .5rem; }
.voet-kol b { display: block; font-size: 14px; margin-bottom: .7rem; }
.voet-kol a { display: block; text-decoration: none; color: var(--grijs); font-size: 14px; padding-block: .18rem; }
.voet-kol a:hover { color: var(--inkt); }
.volgt { cursor: default; }
.voet-mid { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.2rem 2rem; padding-block: 1.6rem; border-top: 1px solid var(--lijn); }
.voet-contact { display: flex; flex-wrap: wrap; gap: .4rem 2rem; font-size: 14px; color: var(--grijs); }
.voet-contact b { color: var(--inkt); font-weight: 600; }
.betaal { display: flex; flex-wrap: wrap; gap: 6px; }
.betaal span { font-size: 11.5px; font-weight: 600; padding: .3rem .55rem; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--lijn-2); color: var(--inkt-2); }
.voet-onder { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .8rem 2rem; padding-block: 1.2rem 2rem; border-top: 1px solid var(--lijn); font-size: 13px; color: var(--grijs); }
.voet-onder nav { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }
.voet-onder a { text-decoration: none; display: inline-block; padding-block: 3px; }

.melding { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%) translateY(10px); opacity: 0; pointer-events: none; z-index: 100; background: var(--inkt); color: #fff; padding: .8rem 1.1rem; border-radius: 14px; font-size: 14px; box-shadow: 0 20px 40px -16px rgb(0 0 0 / .45); transition: .3s; max-width: calc(100vw - 32px); display: flex; gap: 1rem; align-items: center; }
.melding.toon { opacity: 1; transform: translateX(-50%); pointer-events: auto; }
.melding a { color: var(--gloed); font-weight: 600; white-space: nowrap; }

@media (max-width: 1280px) {
  .menu { display: none; }
  .menu-knop { display: block; }
  .kop.menu-open .menu { display: flex; position: absolute; top: 70px; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--papier); border-bottom: 1px solid var(--lijn); padding: .5rem clamp(16px, 3vw, 32px) 1rem; }
  .kop.menu-open .menu a { padding: .7rem 0; border-bottom: 1px solid var(--lijn); }
}
@media (max-width: 1000px) {
  .raster, .raster-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lijst { grid-template-columns: 1fr; }
  .filters { display: none; }
  .filters-open { display: inline-flex; }
  .lijst.filters-zichtbaar .filters { display: flex; position: fixed; inset: 0; z-index: 60; background: var(--papier); max-height: none; padding: 16px; }
  .filters-kop { display: flex; justify-content: space-between; align-items: center; padding-bottom: .6rem; border-bottom: 1px solid var(--lijn); }
  .voet-top { grid-template-columns: 1fr 1fr 1fr; }
  .voet-merk { grid-column: 1 / -1; }
  .kassa { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .kassa-som { position: static; }
  .lampen-sug-lijst { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .deuren, .advies, .proband, .pdp { grid-template-columns: 1fr; }
  .deur { min-height: 440px; }
  .galerij { position: static; }
  .zoek { width: auto; flex: 1; min-width: 0; }
  .zoek kbd { display: none; }
  .kop .wrap { gap: .8rem; }
  .voet-top { grid-template-columns: 1fr 1fr; }
  .mandregel { gap: 14px; }
  .mr-foto { width: 88px; height: 88px; }
  .methodes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .docs { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .kop .logo { font-size: 19px; }
  .promo .wrap { justify-content: flex-start; }
  .af-rij, .af-rij-post { grid-template-columns: minmax(0, 1fr); }
  .raster, .raster-3 { gap: 22px 10px; }
  .kaart-naam { font-size: 14.5px; }
}
@media (max-width: 400px) { .methodes { grid-template-columns: minmax(0, 1fr); } }
@media (hover: none) {
  .kaart:hover .tegel .aan { opacity: 0; }
  .tegel.geen-uit .aan, .licht-aan .tegel .aan, .kaart.aan .tegel .aan { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* taalkeuze (winkel en Pro) */
.talen { position: relative; flex: none; }
.talen summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; height: 38px; padding: 0 .6rem 0 .65rem; border-radius: 999px;
  font: 600 12.5px var(--f-mono); letter-spacing: .04em; color: var(--inkt-2); box-shadow: inset 0 0 0 1px var(--lijn-2); user-select: none; }
.talen summary::-webkit-details-marker { display: none; }
.talen summary svg:last-child { opacity: .55; transition: transform .15s; }
.talen summary:hover, .talen[open] summary { color: var(--inkt); background: var(--mist); }
.talen[open] summary svg:last-child { transform: rotate(180deg); }
.talen summary:focus-visible { outline: 2px solid var(--gloed-diep); outline-offset: 2px; }
.talen-lijst { position: absolute; right: 0; top: calc(100% + 8px); min-width: 210px; background: var(--papier); border-radius: 16px;
  box-shadow: 0 24px 50px -18px rgb(0 0 0 / .35), 0 0 0 1px var(--lijn); padding: 6px; z-index: 45; }
.talen-lijst a { display: flex; gap: .75rem; align-items: center; padding: .55rem .7rem; border-radius: 10px; text-decoration: none; font-size: 14px; color: var(--inkt); }
.talen-lijst a:hover { background: var(--mist); }
.talen-lijst a[aria-current] { font-weight: 600; background: var(--gloed-zacht); }
.talen-lijst a svg { margin-left: auto; color: var(--gloed-tekst); }
.talen-lijst .mono { font: 500 11.5px var(--f-mono); color: var(--grijs); width: 1.7em; }
@media (max-width: 520px) { .talen summary svg:first-child, .talen summary svg:last-child { display: none; } .talen summary { padding: 0 .6rem; } }

/* kortingscodes en cadeaubonnen (WebshopCodes) */
.goed-klein { background: #e8f5ec; color: #14532d; border-radius: 14px; padding: 12px 16px; font-size: 14.5px; margin-bottom: 1.4rem; }
.som-af { color: var(--ok); }
.som-bon { margin-top: .9rem; }
.som-tebetalen { margin-top: .2rem; }
.som-codes { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--lijn); display: flex; flex-direction: column; gap: 10px; }
.som-code { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--mist); font-size: 14px; }
.som-code.niet { background: #fff6ec; }
.som-code p { grid-column: 1 / -1; font-size: 13px; color: var(--grijs); }
.som-code.niet p { color: var(--gloed-tekst); }
.som-code-tag { display: inline-flex; align-items: center; gap: .45rem; min-width: 0; }
.som-code .tekstlink { font-size: 13px; }
.som-code-veld summary { cursor: pointer; font-size: 14px; font-weight: 500; color: var(--inkt-2); text-decoration: underline; text-decoration-color: var(--lijn-2); text-underline-offset: 4px; width: fit-content; }
.code-invoer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: .7rem; }
.code-invoer input { height: 42px; border: 1.5px solid var(--lijn-2); border-radius: var(--r-ctl); padding: 0 .8rem; font-family: var(--f-mono); letter-spacing: .06em; text-transform: uppercase; min-width: 0; background: var(--papier); }
.code-invoer input:focus { outline: none; border-color: var(--inkt); }
.mr-bon { background: var(--nacht); color: var(--gloed); }
.som-bon-foto { background: var(--nacht); color: var(--gloed); display: grid; place-items: center; }

.bon-pagina { padding-top: 1rem; }
.bon-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); gap: clamp(2rem, 4vw, 4.5rem); align-items: start; margin-top: 1.2rem; }
.bon-links h1, .bon-saldo h1 { font-size: clamp(2.4rem, 1.8rem + 2.4vw, 4rem); }
.bon-lead { font-size: 17px; color: var(--inkt-2); margin-top: 1rem; max-width: 34em; }
.bon-kaart { position: relative; overflow: hidden; margin-top: 2rem; aspect-ratio: 1.6; max-width: 34rem; border-radius: 26px; background: var(--nacht); color: var(--nacht-tekst);
  padding: clamp(20px, 3.5vw, 34px); display: flex; flex-direction: column; box-shadow: 0 30px 60px -32px rgb(0 0 0 / .55); }
.bon-gloed { position: absolute; right: -16%; top: -45%; width: 72%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgb(255 181 71 / .5), rgb(255 181 71 / 0) 65%); pointer-events: none; }
.bon-kaart-boven { display: flex; justify-content: space-between; align-items: baseline; position: relative; }
.bon-woordmerk { font-family: var(--f-archivo); font-weight: 800; font-stretch: 112%; font-size: 21px; letter-spacing: -.03em; }
.bon-label { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--gloed); }
.bon-kaart-bedrag { font-family: var(--f-serif); font-style: italic; font-size: clamp(3.4rem, 2.4rem + 4vw, 5.6rem); line-height: 1; margin-top: auto; position: relative; }
.bon-kaart-voor { color: #d9d2c6; margin-top: .4rem; min-height: 1.5em; position: relative; }
.bon-kaart-boodschap { font-size: 14px; line-height: 1.45; color: var(--nacht-tekst); margin-top: .5rem; max-height: 4.4em; overflow: hidden; position: relative; white-space: pre-line; }
.bon-kaart-onder { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1rem; padding-top: .8rem; border-top: 1px solid #2a2622; font-size: 12.5px; color: var(--nacht-grijs); position: relative; }
.bon-feiten { list-style: none; padding: 0; margin: 1.8rem 0 1rem; display: flex; flex-direction: column; gap: .55rem; font-size: 15px; color: var(--inkt-2); }
.bon-feiten li { display: flex; gap: .6rem; align-items: flex-start; }
.bon-feiten svg { flex: none; margin-top: 3px; color: var(--ok); }
.bon-form fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.bon-form legend { font-size: 14px; font-weight: 600; margin-bottom: .55rem; padding: 0; }
.bon-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.bon-chip { position: relative; }
.bon-chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.bon-chip span { display: grid; place-items: center; height: 48px; border-radius: 14px; box-shadow: inset 0 0 0 1.5px var(--lijn-2); font-weight: 600; font-variant-numeric: tabular-nums; font-size: 15px; cursor: pointer; transition: box-shadow .15s, background .15s; }
.bon-chip:nth-last-child(1) { grid-column: span 2; }
.bon-chip input:checked + span { box-shadow: inset 0 0 0 2px var(--inkt); background: var(--mist); }
.bon-chip input:focus-visible + span { outline: 2px solid var(--gloed-diep); outline-offset: 2px; }
.bon-bedragen.fout .bon-chip span { box-shadow: inset 0 0 0 1.5px #f3b8a0; }
.bon-ontvanger { display: flex; flex-direction: column; gap: 14px; }
.bon-form textarea { border: 1.5px solid var(--lijn-2); border-radius: var(--r-ctl); padding: .8rem .95rem; font-size: 15px; resize: vertical; width: 100%; background: var(--papier); }
.bon-form textarea:focus { outline: none; border-color: var(--inkt); box-shadow: 0 0 0 4px rgb(13 12 10 / .06); }
.bon-vragen { margin-top: clamp(3rem, 2rem + 4vw, 5rem); }
.bon-vragen h2 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); margin-bottom: 1.4rem; }
.bon-vragen-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.bon-vragen-raster > div { background: var(--mist); border-radius: var(--r-kaart); padding: 20px; }
.bon-vragen h3 { font-size: 16px; letter-spacing: -.01em; margin-bottom: .5rem; }
.bon-vragen p { font-size: 14.5px; color: var(--inkt-2); }
.bon-saldo { padding-top: 1rem; max-width: 40rem; }
.bon-saldo-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; margin-top: 2rem; }
.bon-saldo-form input { letter-spacing: .08em; text-transform: uppercase; }
.bon-uitkomst { margin-top: 1.6rem; padding: 22px 24px; border-radius: var(--r-kaart); background: var(--nacht); color: var(--nacht-tekst); }
.bon-uitkomst.niet { background: var(--mist); color: var(--inkt); }
.bon-uitkomst-bedrag { font-family: var(--f-serif); font-style: italic; font-size: 3rem; line-height: 1; }
.bon-uitkomst p { margin-top: .5rem; color: inherit; opacity: .85; }
@media (max-width: 960px) {
  .bon-raster { grid-template-columns: 1fr; }
  .bon-vragen-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .bon-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bon-chip:nth-last-child(1) { grid-column: span 3; }
  .bon-vragen-raster { grid-template-columns: 1fr; }
  .bon-saldo-form { grid-template-columns: 1fr; }
}

/* inhoud: lichtadvies, blog, rekentools, info en juridisch (WebshopInhoud, views/inhoud.php) */
.inhoud-wrap { padding-bottom: 2rem; }
.i-kop { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: end; margin: 1.6rem 0 2.4rem; }
.i-kop.met-beeld { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.i-soort { font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--gloed-tekst); font-weight: 600; margin-bottom: .9rem; }
.i-kop h1 { font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.6rem); letter-spacing: -.04em; line-height: 1.02; max-width: 18em; }
.i-meta { margin-top: 1.1rem; font-size: 14px; color: var(--grijs); }
.i-kop-beeld { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-groot); overflow: hidden; background: var(--tegel); }
.i-kop-beeld img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.i-raster { display: grid; grid-template-columns: minmax(0, 44rem); justify-content: center; gap: 3.5rem; }
.i-raster.met-toc { grid-template-columns: 15rem minmax(0, 44rem); justify-content: start; }
.i-toc { position: sticky; top: 92px; align-self: start; font-size: 14px; }
.i-toc summary { font-weight: 600; cursor: pointer; list-style: none; margin-bottom: .8rem; }
.i-toc summary::-webkit-details-marker { display: none; }
.i-toc ol { list-style: none; margin: 0; padding: 0 0 0 .9rem; border-left: 1.5px solid var(--lijn); display: flex; flex-direction: column; gap: .55rem; }
.i-toc a { color: var(--grijs); text-decoration: none; line-height: 1.35; display: block; }
.i-toc a:hover, .i-toc a.hier { color: var(--inkt); }
.i-tekst { font-size: 17px; line-height: 1.68; color: var(--inkt-2); min-width: 0; }
.i-tekst h2 { font-size: clamp(1.45rem, 1.2rem + .8vw, 1.85rem); color: var(--inkt); margin: 2.6rem 0 .9rem; letter-spacing: -.03em; line-height: 1.15; scroll-margin-top: 96px; }
.i-tekst h3 { font-size: 1.18rem; color: var(--inkt); margin: 1.8rem 0 .6rem; letter-spacing: -.02em; line-height: 1.25; }
.i-tekst p { margin: 0 0 1.05rem; }
.i-tekst ul, .i-tekst ol { margin: 0 0 1.2rem; padding-left: 1.3rem; }
.i-tekst li { margin-bottom: .45rem; }
.i-tekst li::marker { color: var(--gloed-diep); }
.i-tekst a { color: var(--inkt); text-decoration-color: var(--gloed); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.i-tekst a:hover { text-decoration-color: var(--inkt); }
.i-tekst strong { color: var(--inkt); font-weight: 600; }
.i-tekst blockquote { margin: 1.6rem 0; padding: .2rem 0 .2rem 1.2rem; border-left: 3px solid var(--gloed); font-family: var(--f-serif); font-style: italic; font-size: 1.3rem; color: var(--inkt); line-height: 1.4; }
.i-taalmelding { font-size: 13px; color: var(--inkt-2); background: var(--mist); border-radius: 10px; padding: .6rem .85rem; margin: 0 0 1.2rem; }
.i-samenvatting { background: var(--gloed-zacht); border-radius: var(--r-kaart); padding: 1.3rem 1.5rem; margin-bottom: 2rem; }
.i-samenvatting b { display: block; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--gloed-tekst); margin-bottom: .45rem; }
.i-samenvatting p { margin: 0; color: var(--inkt); font-size: 17.5px; line-height: 1.6; }
.i-kader { margin: 1.8rem 0; padding: 1.2rem 1.4rem; border-radius: var(--r-kaart); background: var(--mist); font-size: 16px; }
.i-kader > b { display: block; color: var(--inkt); margin-bottom: .35rem; }
.i-kader p:last-child { margin-bottom: 0; }
.i-kader.i-let-op { background: #fff4ec; box-shadow: inset 3px 0 0 #e97b2c; }
.i-kader.i-rekenvoorbeeld { background: var(--papier); box-shadow: inset 0 0 0 1.5px var(--lijn); font-variant-numeric: tabular-nums; }
.i-tabel { margin: 1.8rem 0; }
.i-tabel-schuif { overflow-x: auto; border-radius: var(--r-kaart); box-shadow: inset 0 0 0 1px var(--lijn); }
.i-tabel table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.i-tabel th, .i-tabel td { text-align: left; padding: .75rem 1rem; border-bottom: 1px solid var(--lijn); vertical-align: top; }
.i-tabel thead th { font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--grijs); font-weight: 600; background: var(--mist); }
.i-tabel tbody th { color: var(--inkt); font-weight: 600; }
.i-tabel tr:last-child th, .i-tabel tr:last-child td { border-bottom: 0; }
.i-tabel figcaption { font-size: 13.5px; color: var(--grijs); margin-top: .6rem; }
.i-stappen ol { list-style: none; padding: 0; counter-reset: stap; }
.i-stappen li { counter-increment: stap; position: relative; padding: 0 0 1.1rem 3rem; }
.i-stappen li::before { content: counter(stap); position: absolute; left: 0; top: 0; width: 2rem; height: 2rem; border-radius: 50%; background: var(--inkt); color: #fff; display: grid; place-items: center; font-size: 14px; font-weight: 600; }
.i-stappen li > b { display: block; color: var(--inkt); margin-bottom: .2rem; }
.i-producten { margin: 2.4rem 0; }
.i-producten-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .4rem; }
.i-producten-kop h3 { margin: 0; }
.i-producten > p { font-size: 15px; color: var(--grijs); }
.i-producten .raster { margin-top: 1rem; gap: 20px 14px; }
.i-product { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1.1rem; align-items: center; margin: 1.6rem 0; padding: .8rem; border-radius: var(--r-kaart); box-shadow: inset 0 0 0 1px var(--lijn); text-decoration: none; color: var(--inkt); transition: box-shadow .2s; }
.i-tekst a.i-product { text-decoration: none; }
.i-product:hover { box-shadow: inset 0 0 0 1.5px var(--inkt); }
.i-product-foto { position: relative; aspect-ratio: 1; border-radius: 14px; background: var(--tegel); overflow: hidden; }
.i-product-foto img { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain; mix-blend-mode: multiply; }
.i-product-tekst { display: flex; flex-direction: column; gap: .2rem; font-size: 15px; line-height: 1.4; }
.i-product-tekst b { font-size: 16px; }
.i-waarom { color: var(--inkt-2); }
.i-beeld { margin: 2rem 0; }
.i-beeld img { width: 100%; height: auto; border-radius: var(--r-groot); display: block; background: var(--tegel); }
.i-beeld figcaption { font-size: 14px; color: var(--grijs); margin-top: .6rem; }
.i-faq { margin: 2.8rem 0 1rem; }
.i-faq details { border-bottom: 1px solid var(--lijn); }
.i-faq summary { cursor: pointer; list-style: none; padding: 1rem 2rem 1rem 0; font-weight: 600; color: var(--inkt); position: relative; font-size: 16.5px; line-height: 1.4; }
.i-faq summary::-webkit-details-marker { display: none; }
.i-faq summary::after { content: ""; position: absolute; right: .3rem; top: 1.35rem; width: 9px; height: 9px; border-right: 1.8px solid var(--grijs); border-bottom: 1.8px solid var(--grijs); transform: rotate(45deg); transition: transform .2s; }
.i-faq details[open] summary::after { transform: rotate(225deg); top: 1.6rem; }
.i-faq details > div { padding: 0 0 1rem; font-size: 16px; }
.i-links ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .2rem; }
.i-links li { margin: 0; }
.i-links a { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--lijn); text-decoration: none; font-weight: 500; }
.i-links a:hover { color: var(--gloed-tekst); }
.i-bronnen { margin-top: 2.6rem; font-size: 14px; line-height: 1.55; }
.i-bronnen h2 { font-size: 1.05rem; margin: 0 0 .7rem; }
.i-bronnen ol { padding-left: 1.2rem; color: var(--grijs); }
.i-bronnen a { color: var(--inkt-2); text-decoration-thickness: 1px; text-decoration-color: var(--lijn-2); }
.i-verwant { margin-top: 4rem; }
.i-verwant h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin-bottom: 1.3rem; }
.i-kaarten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.artikelkaart { display: flex; flex-direction: column; gap: .9rem; text-decoration: none; color: var(--inkt); }
.ak-beeld { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-kaart); overflow: hidden; background: var(--tegel); display: grid; place-items: center; }
.ak-beeld img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.artikelkaart:hover .ak-beeld img { transform: scale(1.03); }
.zonder-beeld .ak-beeld { background: radial-gradient(120% 90% at 70% 10%, #ffe2ae 0%, var(--tegel) 55%); color: var(--gloed-tekst); }
.ak-tekst { display: flex; flex-direction: column; gap: .3rem; }
.ak-tekst small { font-size: 12.5px; color: var(--grijs); letter-spacing: .04em; }
.ak-tekst b { font-size: 18px; letter-spacing: -.02em; line-height: 1.25; }
.ak-tekst span { font-size: 14.5px; color: var(--grijs); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.i-lijst-kop { margin: 1.6rem 0 2.6rem; max-width: 46rem; }
.i-lijst-kop h1 { font-size: clamp(2.6rem, 1.8rem + 3vw, 4.6rem); letter-spacing: -.045em; }
.i-lijst-kop p { margin-top: 1rem; font-size: 18px; color: var(--inkt-2); }
.i-kaarten-groot { margin-bottom: 3.5rem; row-gap: 38px; }
.i-tools { margin-bottom: 3.5rem; }
.i-tools-kop { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem 1.5rem; margin-bottom: 1.2rem; }
.i-tools-kop h2 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); }
.i-tools-kop p { margin: 0; color: var(--grijs); font-size: 15px; }
.i-tools-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.i-tool { display: flex; flex-direction: column; border-radius: 22px; background: var(--papier); box-shadow: inset 0 0 0 1px var(--lijn); overflow: hidden; text-decoration: none; color: var(--inkt);
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s; }
.i-tool:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--lijn-2), 0 24px 40px -28px rgb(13 12 10 / .4); }
.i-tool-beeld { display: block; aspect-ratio: 16 / 9; background: radial-gradient(120% 90% at 50% 0%, #fff7ea, var(--mist) 70%); border-bottom: 1px solid var(--lijn); }
.i-tool-beeld svg { width: 100%; height: 100%; display: block; padding: 6% 10%; }
.i-tool-tekst { display: flex; flex-direction: column; gap: .3rem; padding: 16px 18px 18px; flex: 1; }
.i-tool-tekst b { font-size: 17px; font-weight: 650; letter-spacing: -.02em; }
.i-tool-tekst > span { font-size: 14.5px; color: var(--grijs); line-height: 1.45; }
.i-tool-tekst em { margin-top: auto; padding-top: .7rem; font-style: normal; font-weight: 600; font-size: 14px; color: var(--gloed-tekst); display: inline-flex; align-items: center; gap: .35rem; }
.i-tool:hover .i-tool-tekst em svg { transform: translateX(3px); }
.i-tool-tekst em svg { transition: transform .2s; }
@media (max-width: 900px) { .i-tools-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .i-tools-raster { grid-template-columns: minmax(0, 1fr); } .i-tool { flex-direction: row; } .i-tool-beeld { width: 38%; aspect-ratio: auto; border-bottom: 0; border-right: 1px solid var(--lijn); } }
.lijst-intro { max-width: 52rem; margin-top: .7rem; font-size: 15.5px; color: var(--inkt-2); line-height: 1.55; }
.lijst-intro a { color: var(--inkt); white-space: nowrap; }
/* Linkrij met de landingen (/hanglampen/zwart) onder een lijst: _landingen.php */
.landingen { margin-top: 2.6rem; padding-top: 1.6rem; border-top: 1px solid var(--lijn); display: grid; gap: .7rem; }
.landingen h2 { font-size: 1.05rem; margin: 0 0 .2rem; }
.landingen-rij { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .9rem; font-size: 14.5px; line-height: 1.5; }
.landingen-rij b { flex: 0 0 6.5rem; color: var(--grijs); font-weight: 500; }
.landingen-rij a { color: var(--inkt-2); text-decoration: none; border-bottom: 1px solid var(--lijn-2); padding-block: 2px; min-width: 24px; text-align: center; }
.landingen-rij a:hover, .landingen-rij a[aria-current] { color: var(--inkt); border-bottom-color: var(--inkt); }
@media (max-width: 560px) { .landingen-rij b { flex-basis: 100%; } }
.merk-tekst { margin-top: clamp(3rem, 2rem + 4vw, 5rem); padding-top: 2.5rem; border-top: 1px solid var(--lijn); }
.merk-tekst-kop { margin-top: 0 !important; font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.5rem) !important; }
@media (max-width: 1100px) {
  .i-raster.met-toc { grid-template-columns: minmax(0, 44rem); justify-content: center; }
  .i-toc { position: static; background: var(--mist); border-radius: var(--r-kaart); padding: 1rem 1.2rem; }
  .i-toc details:not([open]) summary { margin-bottom: 0; }
}
@media (max-width: 860px) {
  .i-kop.met-beeld { grid-template-columns: 1fr; }
  .i-kaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .i-tekst { font-size: 16.5px; }
  .i-kaarten { grid-template-columns: 1fr; }
  .i-product { grid-template-columns: 5.5rem minmax(0, 1fr); }
}

/* hulp van Franky (views/_hulp.php) */
.hulp { margin: 2.4rem 0; padding: 1.4rem 1.5rem; border-radius: var(--r-groot); background: var(--nacht); color: var(--nacht-tekst); display: flex; flex-wrap: wrap; gap: 1.2rem 2rem; align-items: center; justify-content: space-between; }
.hulp-wie { display: flex; gap: 1rem; align-items: flex-start; max-width: 34rem; }
.hulp-letter { flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--gloed); color: var(--nacht); display: grid; place-items: center; font-family: var(--f-serif); font-style: italic; font-size: 26px; }
.hulp b { display: block; font-size: 17px; color: #fff; letter-spacing: -.01em; }
.hulp p { margin: .25rem 0 0; font-size: 15px; color: var(--nacht-grijs); line-height: 1.5; }
.hulp-knoppen { display: flex; flex-wrap: wrap; gap: .5rem; }
.hulp .knop { gap: .5rem; }
.hulp .knop-inkt { background: var(--gloed); color: var(--nacht); }
.hulp .knop-inkt:hover:not(:disabled) { background: #ffc46a; color: var(--nacht); }
.hulp .knop-rand { color: var(--nacht-tekst); box-shadow: inset 0 0 0 1px #3a352f; }
.hulp .knop-rand:hover { box-shadow: inset 0 0 0 1px var(--nacht-tekst); }
.i-tekst .hulp a { text-decoration: none; }

/* rekentools (views/_rekentool.php, assets/rekentools.js). Herwerkt 10-10-2026 (Egon: "niet super
   overzichtelijk en modern"): links een lichte invoer met segmentknoppen en schuiven, rechts een donker
   resultaatvlak waarin de tekening echt licht geeft, één groot getal, tegels voor de rest en meldingen
   als kaders. Naast elkaar alleen als er plaats is (containerquery): in de smalle tekstkolom van een
   gids staan ze onder elkaar, op een rekentoolpagina staat de tool over de volle breedte (.rt-boven). */
.rt-boven, .i-tekst { container-type: inline-size; }
.rt-boven { margin: .5rem 0 3.2rem; }
.rt { margin: 2.2rem 0; display: grid; grid-template-columns: minmax(0, 1fr); border-radius: 24px; overflow: hidden; background: var(--papier);
  box-shadow: 0 0 0 1px var(--lijn), 0 40px 80px -48px rgb(13 12 10 / .45); font-size: 15px; line-height: 1.45; color: var(--inkt); }
.rt-boven .rt { margin: 0; }
@container (min-width: 780px) { .rt { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.rt-invoer { padding: clamp(20px, 3vw, 30px); display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.rt-titel { display: flex; gap: .75rem; align-items: center; font-weight: 650; font-size: 18px; letter-spacing: -.02em; color: var(--inkt); margin: 0 0 .3rem !important; line-height: 1.25; }
.rt-titel svg { flex: none; box-sizing: content-box; padding: 8px; border-radius: 11px; background: var(--gloed-zacht); color: var(--gloed-diep); }
.rt-label { font-size: 13px; font-weight: 600; color: var(--inkt-2); margin: .1rem 0 -.5rem !important; }
.rt-keuze { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 14px; background: var(--mist); box-shadow: inset 0 0 0 1px var(--lijn); }
.rt-keuze label { position: relative; flex: 1 1 auto; display: flex; }
.rt-keuze input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.rt-keuze span { flex: 1; text-align: center; padding: .55rem .8rem; border-radius: 10px; font-size: 14px; font-weight: 500; color: var(--inkt-2); cursor: pointer; transition: background .15s, color .15s, box-shadow .15s; white-space: nowrap; }
.rt-keuze label:hover span { color: var(--inkt); }
.rt-keuze input:checked + span { background: var(--papier); color: var(--inkt); font-weight: 600; box-shadow: 0 1px 2px rgb(13 12 10 / .08), 0 0 0 1px var(--lijn-2); }
.rt-keuze input:focus-visible + span { outline: 2px solid var(--gloed-diep); outline-offset: 1px; }
.rt-rij { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); gap: 12px; }
.rt-veld { display: flex; flex-direction: column; gap: .4rem; font-size: 13px; font-weight: 600; color: var(--inkt-2); min-width: 0; }
.rt-veld[hidden] { display: none; }
.rt-in { display: flex; align-items: center; background: var(--papier); border-radius: 12px; box-shadow: inset 0 0 0 1px var(--lijn-2); padding-right: .8rem; transition: box-shadow .15s; min-width: 0; }
.rt-in:hover { box-shadow: inset 0 0 0 1px var(--grijs); }
.rt-in:focus-within { box-shadow: inset 0 0 0 1.5px var(--inkt), 0 0 0 4px var(--gloed-zacht); }
.rt-in input, .rt-in select { flex: 1; min-width: 0; width: 100%; border: 0; background: transparent; height: 44px; padding: 0 .8rem; font: 500 15.5px var(--f-sans); color: var(--inkt); font-variant-numeric: tabular-nums; text-overflow: ellipsis; }
.rt-in input:focus, .rt-in select:focus { outline: none; }
.rt-in i { font-style: normal; color: var(--grijs); font-size: 13px; font-weight: 500; white-space: nowrap; }
.rt-schuif { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; margin: 0; background: transparent; cursor: pointer; }
.rt-schuif::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--gloed-diep) var(--p, 50%), var(--lijn) var(--p, 50%)); }
.rt-schuif::-moz-range-track { height: 4px; border-radius: 2px; background: var(--lijn); }
.rt-schuif::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--gloed-diep); }
.rt-schuif::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; border-radius: 50%; background: var(--papier); box-shadow: 0 0 0 2px var(--gloed-diep), 0 2px 6px rgb(13 12 10 / .25); }
.rt-schuif::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: var(--papier); box-shadow: 0 0 0 2px var(--gloed-diep), 0 2px 6px rgb(13 12 10 / .25); }
.rt-schuif:focus-visible { outline: none; }
.rt-schuif:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--gloed-diep), 0 0 0 6px var(--gloed-zacht); }
.rt-vink { display: flex; gap: .6rem; align-items: center; font-size: 14px; font-weight: 500; color: var(--inkt-2); align-self: end; padding-bottom: .7rem; }
.rt-vink input { width: 18px; height: 18px; accent-color: var(--inkt); }

/* het resultaat: donker, het licht in de tekening is het enige dat gloeit */
.rt-uitkomst { --rt-tekst: #f3eee5; --rt-zacht: #a49b8e; --rt-vlak: rgb(255 255 255 / .06); --rt-rand: rgb(255 255 255 / .1);
  padding: clamp(20px, 3vw, 30px); display: flex; flex-direction: column; gap: 16px; background: var(--nacht); color: var(--rt-tekst); min-width: 0; }
.rt-uit-lbl { margin: 0 !important; font: 500 11.5px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--rt-zacht); }
.rt-tekening { width: 100%; height: auto; max-height: 300px; border-radius: 16px; background: rgb(255 255 255 / .03); box-shadow: inset 0 0 0 1px var(--rt-rand); }
.rt-cijfers { display: flex; flex-direction: column; gap: 12px; }
.rt-groot { display: flex; flex-direction: column; gap: .2rem; }
.rt-groot span { font-size: 13px; color: var(--rt-zacht); }
.rt-groot b { font-family: var(--f-sans); font-weight: 650; font-size: clamp(2.4rem, 1.8rem + 2vw, 3.4rem); letter-spacing: -.045em; line-height: 1.02; color: #fff; font-variant-numeric: tabular-nums; }
.rt-groot small { font-size: 14.5px; color: var(--rt-tekst); opacity: .85; }
.rt-dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: 8px; margin: 0; }
.rt-dl > div { padding: .7rem .85rem; border-radius: 12px; background: var(--rt-vlak); box-shadow: inset 0 0 0 1px var(--rt-rand); min-width: 0; }
.rt-dl dt { font-size: 12.5px; color: var(--rt-zacht); line-height: 1.3; }
.rt-dl dd { margin: .25rem 0 0; color: #fff; font-weight: 600; font-size: 16.5px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.rt-opties { list-style: none; margin: 0 !important; padding: 0 !important; display: flex; flex-direction: column; gap: 6px; }
.rt-opties li { margin: 0 !important; display: flex; justify-content: space-between; gap: .8rem; align-items: baseline; padding: .65rem .85rem; border-radius: 12px; background: var(--rt-vlak); box-shadow: inset 0 0 0 1px var(--rt-rand); font-size: 14px; color: var(--rt-tekst); }
.rt-opties li::before { content: none !important; }
.rt-opties li.aanbevolen { background: rgb(255 181 71 / .12); box-shadow: inset 0 0 0 1px rgb(255 181 71 / .45); color: #fff; }
.rt-opties li.niet { color: var(--rt-zacht); }
.rt-opties em { font-style: normal; font-size: 11.5px; font-weight: 600; white-space: nowrap; color: var(--gloed); text-transform: uppercase; letter-spacing: .04em; }
.rt-opties li.niet em { color: var(--rt-zacht); }
.rt-melding { margin: 0 !important; display: flex; gap: .6rem; align-items: flex-start; padding: .7rem .85rem; border-radius: 12px; font-size: 13.5px; line-height: 1.45;
  background: rgb(255 181 71 / .1); box-shadow: inset 0 0 0 1px rgb(255 181 71 / .35); color: #ffe2b8; }
.rt-melding::before { content: "!"; flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: var(--gloed); color: var(--nacht); font: 700 12px/18px var(--f-sans); text-align: center; }
.rt-melding.zacht { background: var(--rt-vlak); box-shadow: inset 0 0 0 1px var(--rt-rand); color: var(--rt-tekst); }
.rt-melding.zacht::before { content: "i"; background: rgb(255 255 255 / .16); color: #fff; font-style: italic; font-family: var(--f-serif); font-size: 13px; }
.rt-cta { align-self: flex-start; display: inline-flex; align-items: center; gap: .5rem; margin-top: .2rem; padding: .75rem 1.15rem; border-radius: 999px; background: var(--gloed); color: var(--nacht);
  font-weight: 600; font-size: 14.5px; text-decoration: none; transition: background .2s, transform .2s; }
.rt-cta:hover { background: #ffc46a; transform: translateX(2px); }
.rt-binnenkort { padding: 22px; grid-column: 1 / -1; }

/* de tekening op donker */
.rt-lijn { stroke: rgb(255 255 255 / .22); stroke-width: 1.5; }
.rt-tafel { fill: #8f877c; }
.rt-snoer { stroke: #cfc7bb; stroke-width: 1; }
.rt-lamp { fill: #ece6dc; }
.rt-gloed { fill: rgb(255 181 71 / .6); filter: blur(4px); }
.rt-maat { stroke: var(--gloed); stroke-width: 1.2; stroke-dasharray: 3 3; }
.rt-maat.zacht { stroke: rgb(255 255 255 / .3); }
.rt-maattekst { font: 600 11px var(--f-sans); fill: #ffcf8a; }
.rt-maattekst.zacht { fill: #a49b8e; font-weight: 500; }
.rt-kamer { fill: rgb(255 255 255 / .03); stroke: rgb(255 255 255 / .2); stroke-width: 1.5; }
.rt-poel { fill: rgb(255 181 71 / .15); stroke: rgb(255 181 71 / .4); stroke-width: 1; }
.rt-spot { fill: #fff3dc; stroke: var(--gloed); stroke-width: 2; }
.rt-muur { fill: rgb(255 255 255 / .16); }
.rt-band { fill: none; stroke: #fff; stroke-width: 1.5; stroke-dasharray: 4 3; }
.rt-strip { fill: #2c2824; stroke: rgb(255 255 255 / .22); }
.rt-led { fill: var(--gloed); filter: drop-shadow(0 0 3px rgb(255 181 71 / .9)); }
.rt-psu { fill: #f3eee5; }
.rt-psutekst { font: 600 11px var(--f-sans); fill: var(--nacht); }
.rt-kabel { fill: none; stroke: #cfc7bb; stroke-width: 1.4; }
.rt-balk-oud { fill: rgb(255 255 255 / .22); }
.rt-balk-led { fill: var(--gloed); }
.i-tekst .rt p, .i-tekst .rt ul { margin: 0; }

/* outlet: het artikel staat in korting voor de stuks uit het magazijn (WebshopCatalogus::product) */
.outlet-noot { display: flex; gap: .55rem; align-items: flex-start; margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--gloed-zacht);
  box-shadow: inset 0 0 0 1px rgb(240 150 14 / .35); font-size: 14px; color: var(--inkt); line-height: 1.45; }
.outlet-noot svg { flex: none; margin-top: 2px; color: var(--gloed-tekst); }
/* aantal: + gaat uit op het maximum (outletstuks), − op het minimum */
.aantal button:disabled, .stapper button:disabled { opacity: .3; cursor: not-allowed; }
.stapper button:disabled:hover { background: none; }

/* nieuwsbrief: melding onder het formulier, en de pagina voor bevestigen en uitschrijven */
.nieuwsbrief small.fout { color: #b3261e; }
.nb-pagina { padding-block: clamp(48px, 8vw, 110px); display: grid; place-items: center; }
.nb-kaart { width: min(34rem, 100%); padding: clamp(24px, 4vw, 40px); border-radius: var(--r-groot); background: var(--mist); box-shadow: inset 0 0 0 1px var(--lijn); display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.nb-label { margin: 0; display: inline-flex; gap: .45rem; align-items: center; font-size: 13px; font-weight: 600; color: var(--gloed-tekst); }
.nb-kaart h1 { font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.5rem); }
.nb-kaart p { margin: 0; color: var(--inkt-2); font-size: 16px; line-height: 1.55; }

/* Bestelling: bedankt, wachten op de betaling, niet gelukt (webshop/views/bestelling.php) */
.bestel-kop { max-width: 42rem; margin: clamp(8px, 2vw, 24px) 0 clamp(28px, 4vw, 44px); display: grid; gap: .75rem; justify-items: start; }
.bestel-kop h1 { font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.8rem); letter-spacing: -.02em; }
.bestel-kop p { margin: 0; color: var(--inkt-2); font-size: 16px; line-height: 1.55; }
.bestel-label { font-size: 13px; font-weight: 600; color: var(--grijs); font-variant-numeric: tabular-nums; }
.bestel-icoon { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--mist); color: var(--inkt); }
.bestel-icoon.goed { background: #e8f5ec; color: #14532d; }
.bestel-icoon.fout { background: #fdeee6; color: #7c2d12; }
.bestel-icoon .laden { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--lijn); border-top-color: var(--inkt); animation: bestel-draai .8s linear infinite; }
@keyframes bestel-draai { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .bestel-icoon .laden { animation-duration: 2.4s; } }
.bestel-info { display: grid; gap: 16px; align-content: start; min-width: 0; }
.bestel-blok { background: var(--mist); border-radius: var(--r-groot); padding: 22px 24px; }
.bestel-blok h2 { font-size: 17px; letter-spacing: -.015em; margin-bottom: .6rem; }
.bestel-blok p { margin: 0 0 .5rem; line-height: 1.55; }
.bestel-blok p:last-child { margin-bottom: 0; }

/* Herroepen (webshop/views/herroepen.php) en de wettelijke garantie */
.herroep { max-width: 40rem; }
.herroep .veld textarea { min-height: 6rem; }
.garantie-kennisgeving { display: block; max-width: 100%; height: auto; border-radius: 12px; }
.garantie-link { display: inline-flex; gap: .45rem; align-items: center; }
.voet-garantie { padding-block: 1.2rem; border-top: 1px solid var(--lijn); display: grid; gap: .8rem; justify-items: start; }
.voet-garantie .garantie-kennisgeving { width: min(640px, 100%); }
.voet-garantie p { margin: 0; font-size: 13.5px; color: var(--inkt-2); }
.voet-garantie a { color: inherit; }

/* Outlet in de lijsten (19-10-2026): een label op de tegel als er van (een uitvoering van) het
   artikel een stuk met korting in het magazijn ligt; /outlet toont de outletprijs. Klein gehouden
   (Franky: "ik zou de outlet klein maken"). Outlet in de kop alleen in het ingeklapte menu: met het
   volle menu is de kop al krap; daar staat het in de promobalk, die onder 1100 px te smal is. */
.kaart-label { position: absolute; top: 12px; left: 12px; z-index: 2; pointer-events: none; padding: 3px 9px; border-radius: 999px;
  background: var(--gloed); color: var(--inkt); font-size: 11.5px; font-weight: 700; letter-spacing: .02em; line-height: 1.4; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .kaart-label { top: 8px; left: 8px; padding: 2px 7px; font-size: 11px; } }
@media (min-width: 1281px) { .menu .menu-ingeklapt { display: none; } }
@media (max-width: 1100px) { .promo .promo-outlet { display: none; } }

/* Voorpagina (20-10-2026): één hero voor de winkel, met de ruimtes erin (Egon: "mss moet daar
   direct die ruimtes in zitten"). Pro staat er niet meer even groot naast; die zit in de promobalk
   en onderaan (.proband). Op de gsm valt de grote foto weg: de ruimtes dragen het beeld. */
/* .thuis-held, niet .held: Pro heeft zelf een .held (pro/landing.php) en laadt winkel.css ook */
.thuis-held { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 14px; padding-top: 18px; }
.held-tekst { --held-pad: clamp(24px, 3vw, 40px); background: var(--mist); border-radius: var(--r-groot); padding: var(--held-pad); display: flex; flex-direction: column; gap: 1.1rem; min-width: 0; }
.held-tekst h1 { font-size: clamp(2.3rem, 1.3rem + 3vw, 3.8rem); line-height: .96; letter-spacing: -.05em; max-width: 13ch; }
.held-tekst > p { color: var(--inkt-2); max-width: 44ch; font-size: clamp(15px, 1.2vw, 17px); }
/* meer ruimte voor de ruimtes (Egon) zonder de lijn met de titel te breken: vierkant, en de linkerkolom
   iets breder. Tot in de zijmarge doorlopen is geprobeerd en weer weggehaald (lijn met de titel weg). */
.held-ruimtes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: auto; padding-top: .6rem; }
.held-ruimte { position: relative; aspect-ratio: 1 / 1; border-radius: 16px; overflow: hidden; color: #fff; text-decoration: none; background: var(--tegel); isolation: isolate; }
.held-ruimte img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1s cubic-bezier(.2, .8, .2, 1); }
.held-ruimte:hover img { transform: scale(1.05); }
.held-ruimte::after { content: ""; position: absolute; inset: 35% 0 0; z-index: -1; background: linear-gradient(transparent, rgb(12 11 9 / .72)); }
.held-ruimte span { position: absolute; left: 12px; right: 10px; bottom: 9px; display: flex; flex-direction: column; line-height: 1.25; }
.held-ruimte b { font-weight: 600; font-size: 15px; letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.held-ruimte small { font-size: 12px; opacity: .85; }
/* rechts een slider met sfeerfoto's, elk met naam en prijs van de lamp (scroll-snap; winkel.js
   schuift om de 6 s door, niet bij aanwijzen, focus of "beweging beperken") */
.held-slider { position: relative; border-radius: var(--r-groot); overflow: hidden; min-height: clamp(440px, 40vw, 560px); background: var(--inkt); }
.held-slides { position: absolute; inset: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.held-slides::-webkit-scrollbar { display: none; }
.held-slide { position: relative; flex: 0 0 100%; scroll-snap-align: start; display: block; color: var(--inkt); text-decoration: none; overflow: hidden; }
.held-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(.2, .8, .2, 1); }
.held-slide:hover img { transform: scale(1.03); }
.held-lamp { position: absolute; left: 18px; bottom: 18px; max-width: min(340px, calc(100% - 36px)); display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: .9rem; align-items: center;
  padding: .75rem 1rem .8rem 1.05rem; border-radius: 16px; background: rgb(255 255 255 / .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 6px 24px rgb(0 0 0 / .18); }
.held-lamp > small { grid-column: 1; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--grijs); }
.held-lamp > b { grid-column: 1; font-size: 15.5px; letter-spacing: -.015em; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.held-prijs { grid-column: 1; margin-top: .15rem; font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }
.held-prijs small { font-weight: 500; color: var(--grijs); font-size: 12.5px; }
.held-prijs s { font-weight: 400; color: var(--grijs); font-size: 13px; margin-left: .3rem; }
.held-pijl { grid-column: 2; grid-row: 1 / span 3; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--inkt); color: var(--papier); transition: transform .2s; }
.held-slide:hover .held-pijl { transform: translateX(3px); }
.held-stippen { position: absolute; z-index: 3; right: 10px; bottom: 18px; display: flex; }
.held-stippen button { width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.held-stippen button::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: rgb(255 255 255 / .55); transition: width .25s, background .25s; }
.held-stippen button[aria-current="true"]::before { width: 22px; background: #fff; }
/* Pro: een smalle strook onder de hero */
.pro-strook { margin-top: 14px; display: flex; align-items: center; gap: 1.2rem 1.6rem; flex-wrap: wrap; padding: 16px 18px 16px 24px; border-radius: var(--r-groot);
  background: var(--nacht); color: var(--nacht-tekst); text-decoration: none; }
.pro-strook .logo { color: #fff; font-size: 17px; }
.pro-strook-tekst { flex: 1 1 24rem; min-width: 0; font-size: 14.5px; color: var(--nacht-grijs); line-height: 1.45; }
.pro-strook-tekst b { color: var(--nacht-tekst); font-weight: 600; margin-right: .3rem; }
.pro-strook:hover .knop-gloed { background: #ffc46a; }
@media (max-width: 820px) { .thuis-held { grid-template-columns: minmax(0, 1fr); } .held-ruimte { aspect-ratio: 4 / 3; } .held-slider { min-height: 0; aspect-ratio: 4 / 3; } .held-stippen { bottom: auto; top: 8px; right: 8px; } }
@media (max-width: 520px) { .held-lamp { left: 12px; bottom: 12px; max-width: calc(100% - 24px); padding: .6rem .8rem; } .pro-strook { padding: 16px 18px; } .pro-strook .knop { width: 100%; } }
@media (max-width: 520px) { .held-ruimtes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Ledstrip op maat (webshop/views/ledstrip.php, ledstrip.js): links de stappen, rechts tekening, lijst en mand. */
.ls-pagina { padding-bottom: 3rem; }
.ls-kop { margin: .6rem 0 1.4rem; max-width: 46rem; }
.ls-kop h1 { margin-bottom: .5rem; }
.ls-lead { font-size: 16px; line-height: 1.55; color: var(--inkt-2); }
.ls { display: grid; grid-template-columns: minmax(0, 25rem) minmax(0, 1fr); gap: 28px; align-items: start; }
.ls-invoer { display: flex; flex-direction: column; gap: 14px; }
.ls-stap { border: 0; margin: 0; padding: 14px; border-radius: 16px; background: var(--papier); box-shadow: inset 0 0 0 1px var(--lijn); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ls-stap legend { float: left; width: 100%; display: flex; gap: 8px; align-items: center; font-weight: 600; font-size: 15px; letter-spacing: -.01em; margin-bottom: 2px; padding: 0; }
.ls-stap legend + * { clear: both; }
.ls-vormen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ls-vorm { position: relative; }
.ls-vorm input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ls-vorm span { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px 9px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--lijn-2); cursor: pointer; color: var(--inkt-2); text-align: center; }
.ls-vorm span:hover { box-shadow: inset 0 0 0 1px var(--inkt); }
.ls-vorm b { font-size: 12.5px; font-weight: 500; line-height: 1.2; }
.ls-vorm svg { color: var(--grijs); }
.ls-vorm input:checked + span { box-shadow: inset 0 0 0 1.5px var(--inkt); background: var(--gloed-zacht); color: var(--inkt); }
.ls-vorm input:checked + span svg { color: var(--gloed-diep); }
.ls-vorm input:checked + span b { font-weight: 650; }
.ls-vorm input:focus-visible + span { outline: 2px solid var(--gloed-diep); outline-offset: 2px; }
.ls-maten { display: flex; flex-direction: column; gap: 8px; }
.ls-los { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ls-los li { display: flex; align-items: center; gap: 10px; }
.ls-letter { width: 22px; height: 22px; border-radius: 6px; background: var(--mist); font-size: 12px; font-weight: 700; display: grid; place-items: center; color: var(--inkt-2); }
.ls-weg { margin-left: auto; width: 28px; height: 28px; border-radius: 8px; border: 0; background: transparent; color: var(--grijs); font-size: 18px; line-height: 1; cursor: pointer; }
.ls-weg:hover { background: var(--mist); color: var(--inkt); }
.ls-keuze { align-items: flex-start; }
.ls-keuze .acc-kleuren { display: flex; flex-wrap: wrap; gap: 6px; }
.ls-hint { font-size: 12.5px; line-height: 1.45; color: var(--grijs); margin: 0; }
.ls-knip { display: flex; flex-direction: column; gap: 8px; }
.ls-knipkeuze { position: relative; display: block; }
.ls-knipkeuze input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ls-knipkeuze span { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--lijn-2); cursor: pointer; }
.ls-knipkeuze b { font-size: 14px; font-weight: 600; }
.ls-knipkeuze em { font-style: normal; font-weight: 500; color: var(--grijs); margin-left: .3em; }
.ls-knipkeuze small { font-size: 12.5px; line-height: 1.45; color: var(--grijs); }
.ls-knipkeuze input:checked + span { box-shadow: inset 0 0 0 1.5px var(--inkt); background: var(--gloed-zacht); }
.ls-knipkeuze input:focus-visible + span { outline: 2px solid var(--gloed-diep); outline-offset: 2px; }
.ls-uitkomst { position: sticky; top: 92px; background: var(--papier); border-radius: 18px; box-shadow: inset 0 0 0 1px var(--lijn); padding: 16px; min-width: 0; }
.ls-tekenvlak { background: var(--mist); border-radius: 14px; padding: 8px 10px 10px; }
.ls-tekening { display: block; width: 100%; height: auto; max-height: 320px; }
.ls-strip { stroke: var(--gloed); stroke-width: 7; stroke-linecap: round; filter: drop-shadow(0 0 5px rgb(255 181 71 / .55)); }
.ls-draad { fill: none; stroke: var(--inkt-2); stroke-width: 1.6; stroke-dasharray: 4 3; }
.ls-maat { font-size: 13px; fill: var(--inkt-2); font-variant-numeric: tabular-nums; }
.ls-mk-voeding { fill: var(--inkt); stroke: var(--gloed); stroke-width: 2.5; }
.ls-mk-hoek, .ls-mk-t { fill: var(--inkt); }
.ls-mk-draad { fill: var(--papier); stroke: var(--inkt); stroke-width: 2; }
.ls-legende { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--inkt-2); }
.ls-legende:empty { display: none; }
.ls-legende li { display: flex; align-items: center; gap: 6px; }
.ls-legende i { display: inline-block; width: 10px; height: 10px; flex: none; }
.ls-l-voeding { border-radius: 50%; background: var(--inkt); box-shadow: 0 0 0 2px var(--gloed); }
.ls-l-hoek, .ls-l-t { background: var(--inkt); border-radius: 2px; }
.ls-l-draad { border-radius: 2px; box-shadow: inset 0 0 0 2px var(--inkt); background: var(--papier); }
.ls-fout { color: #a3311f; font-size: 13.5px; margin: 10px 0 0; }
.ls-fout:empty { display: none; }
.ls-lijst { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ls-lijst:empty { display: none; }
.ls-lijst li { display: grid; grid-template-columns: 44px 3.2em minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 14px; }
.ls-foto { width: 44px; height: 44px; border-radius: 9px; background: var(--tegel); overflow: hidden; }
.ls-foto img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.ls-n { color: var(--grijs); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ls-naam { display: flex; flex-direction: column; min-width: 0; }
.ls-naam a, .ls-naam > span { color: var(--inkt); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ls-naam a:hover { text-decoration: underline; }
.ls-naam small { font-size: 12px; color: var(--grijs); line-height: 1.35; }
.ls-b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ls-noten { list-style: none; margin: 12px 0 0; padding: 10px 0 0; border-top: 1px solid var(--lijn); display: flex; flex-direction: column; gap: 4px; font-size: 13px; line-height: 1.45; color: var(--inkt-2); }
.ls-noten:empty { display: none; }
.ls-plan { font-size: 13px; line-height: 1.45; color: var(--inkt-2); margin-top: 10px; }
.ls-plan:empty { display: none; }
.ls-plan ul { margin: 4px 0 0; padding-left: 1.1rem; }
.ls-plan p { margin: 4px 0 0; color: var(--grijs); }
.ls-voet { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--lijn); font-size: 17px; font-variant-numeric: tabular-nums; }
.ls-uitleg { margin-top: 2.6rem; }
.ls-uitleg-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.ls-uitleg h3 { font-size: 15px; margin-bottom: .35rem; }
.ls-uitleg p { font-size: 14px; line-height: 1.55; color: var(--inkt-2); }
.ls:not(.ls-js) .ls-uitkomst { display: none; }
@media (max-width: 900px) {
  .ls { grid-template-columns: minmax(0, 1fr); }
  .ls-uitkomst { position: static; }
  .ls-uitleg-raster { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
  .ls-vormen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ls-lijst li { grid-template-columns: 36px 2.8em minmax(0, 1fr) auto; gap: 8px; }
  .ls-foto { width: 36px; height: 36px; }
  .ls-voet { flex-direction: column; align-items: stretch; }
  .ls-voet .knop { width: 100%; }
}
.ls-link { display: flex; align-items: center; gap: 12px; margin: 14px 0 0; padding: 12px 14px; border-radius: 14px; background: var(--gloed-zacht); color: var(--inkt); text-decoration: none; box-shadow: inset 0 0 0 1px rgb(240 150 14 / .25); }
.ls-link:hover { box-shadow: inset 0 0 0 1.5px var(--gloed-diep); }
.ls-link > svg:first-child { color: var(--gloed-tekst); flex: none; }
.ls-link > svg:last-child { margin-left: auto; flex: none; }
.ls-link span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ls-link b { font-size: 14.5px; }
.ls-link small { font-size: 12.5px; color: var(--inkt-2); line-height: 1.4; }
.lijst-kop .ls-link { max-width: 34rem; }

/* Black November als eerste slide van de hero (WebshopProActie, 01-11-2026). Twee stijlen, de setting kiest:
   amber (de slide in de merkkleur, foto als kader eronder) en poster (foto over de hele slide). */
.actie-gk { font-family: var(--f-logo); font-stretch: 125%; font-weight: 800; letter-spacing: -.06em; line-height: .86; text-transform: uppercase; }
.actie-klein { font-size: 12px; line-height: 1.4; }
.promo .promo-actie a { color: var(--gloed); font-weight: 600; }
/* Dezelfde actie als poster onder de prijs op de productpagina (webshop/views/_actie-pro-balk.php): het woordmerk over de
   volle breedte (de cqw volgt de breedte van de kolom, 32px = de binnenruimte), daaronder de prijs en de knop. */
.pdp-actie-plek { container-type: inline-size; display: flex; flex-direction: column; gap: 8px; }
.pdp-actie { display: block; padding: 15px 16px 14px; border-radius: var(--r-ctl); background: var(--gloed); color: var(--nacht); text-decoration: none; }
.pdp-actie:hover .actie-knop { background: #2a2723; }
.pdp-actie:focus-visible { outline: 2px solid var(--inkt); outline-offset: 2px; }
.pdp-actie .actie-gk { display: block; font-size: calc((100cqw - 32px) * .085); line-height: .84; white-space: nowrap; }
.pdp-actie-rij { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; margin-top: 11px; padding-top: 10px; border-top: 1.5px solid var(--nacht); }
.pdp-actie-deal { flex: 999 1 auto; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.pdp-actie-deal small { font-size: 13px; font-weight: 600; line-height: 1.15; }
.pdp-actie-prijs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; line-height: 1; }
.pdp-actie-prijs b { font-size: 26px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pdp-actie-prijs span { font-size: 13px; font-weight: 600; white-space: nowrap; }
.pdp-actie .actie-knop { flex: 1 0 auto; padding: .62rem 1.05rem; font-size: 14px; }
.pdp-actie-klein { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--inkt-2); }
.pdp-actie-klein b { color: var(--inkt); font-weight: 600; }
@container (max-width: 460px) { .pdp-actie .actie-knop { flex: 1 1 100%; } }
/* amber: een kolom, de foto vult wat er onder de tekst overblijft (de slide is niet altijd even hoog) */
.held-slide.actie-amber { display: flex; flex-direction: column; background: var(--gloed); color: var(--nacht); padding: clamp(20px, 2.4vw, 30px) clamp(20px, 2.6vw, 32px) 22px; }
.actie-amber .actie-tekst { display: flex; flex-direction: column; align-items: flex-start; }
.actie-amber .actie-label { font-size: 13px; font-weight: 700; }
.actie-amber .actie-gk { font-size: clamp(2.6rem, 1.4rem + 2.9vw, 4.25rem); margin: 14px 0 16px; }
.actie-amber .actie-sub { font-size: 18px; font-weight: 600; letter-spacing: -.015em; line-height: 1.3; margin-bottom: 18px; }
.actie-amber .actie-sub b { font-family: var(--f-logo); font-stretch: 125%; font-weight: 800; }
.actie-amber .actie-klein { color: rgb(12 11 9 / .66); margin-top: 10px; }
.held-slide.actie-amber img { position: static; flex: 1 1 auto; min-height: 120px; width: auto; height: auto; margin: 20px 0 0; border-radius: 16px; object-fit: cover; object-position: 50% 45%; }
.held-slide.actie-amber:hover img { transform: none; }
.held-actie.actie-amber:hover .actie-knop { background: #2a2723; }
/* poster: de foto over de hele slide, donker boven (kop) en onder (tekst) */
.actie-poster { color: #fff; }
.actie-poster .actie-gk, .actie-poster .actie-zin { text-shadow: 0 1px 14px rgb(12 11 9 / .55); }
/* één laag over de foto: twee aparte verlopen lieten in Chrome rechts een lichter randje (de foto heeft een overgang voor de hover) */
.actie-poster::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(rgb(12 11 9 / .7), transparent 45%, transparent 45%, rgb(12 11 9 / .9)); pointer-events: none; }
.actie-poster .actie-gk { position: absolute; left: clamp(20px, 2.4vw, 28px); top: clamp(18px, 2.2vw, 26px); z-index: 2; font-size: clamp(2.6rem, 1.3rem + 3.3vw, 4.4rem); }
.actie-poster .actie-tekst { position: absolute; left: clamp(20px, 2.4vw, 30px); right: clamp(20px, 2.4vw, 30px); bottom: clamp(20px, 2.4vw, 30px); z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.actie-poster .actie-zin { font-size: clamp(1.25rem, .9rem + 1vw, 1.65rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.08; max-width: 22ch; }
.actie-poster .actie-rij { display: flex; align-items: flex-end; gap: 18px; }
.actie-poster .actie-pct { display: flex; flex-direction: column; font-family: var(--f-logo); font-stretch: 125%; font-weight: 800; font-size: clamp(2.4rem, 1.5rem + 2vw, 4rem); letter-spacing: -.055em; line-height: .82; color: var(--gloed); white-space: nowrap; }
.actie-poster .actie-pct small { font: 600 14px var(--f-sans); letter-spacing: 0; color: #fff; margin-bottom: 6px; }
.actie-poster .actie-klein { color: rgb(255 255 255 / .62); }
.held-actie.actie-poster:hover .actie-knop { background: #f3eee5; }
@media (max-width: 520px) {
  .held-slide.actie-amber { flex-direction: row; align-items: stretch; gap: 12px; padding: 16px; }
  .actie-amber .actie-tekst { flex: 1 1 auto; min-width: 0; justify-content: center; }
  .actie-amber .actie-label { font-size: 11.5px; }
  .actie-amber .actie-gk { font-size: 1.65rem; margin: 8px 0 8px; }
  .actie-amber .actie-sub { font-size: 14px; margin-bottom: 12px; }
  .actie-amber .actie-klein { display: none; }
  .held-slide.actie-amber img { flex: 0 0 36%; min-height: 0; width: 36%; margin: 0; border-radius: 12px; }
  .actie-knop { padding: .6rem .9rem; font-size: 13.5px; }
  .actie-poster .actie-gk { font-size: 2.1rem; left: 14px; top: 14px; }
  .actie-poster .actie-tekst { left: 14px; right: 14px; bottom: 14px; gap: 8px; }
  .actie-poster .actie-zin { font-size: 1.05rem; max-width: none; }
  .actie-poster .actie-rij { gap: 12px; align-items: center; }
  .actie-poster .actie-pct { font-size: 1.9rem; }
  .actie-poster .actie-pct small { font-size: 11.5px; margin-bottom: 3px; }
  .actie-klein { font-size: 10.5px; }
}

/* Op de gsm krijgt het zoekveld een eigen rij (05-11-2026, Franky: "waar kan je zoeken?"). Naast logo, kar, taal en
   menu bleef er op 390 px 12 px over om te typen en op 320 px niets: een grijs bolletje dat bij een tik de categorieën
   opende. 16 px in het veld, want daaronder zoomt iOS de hele pagina in. Alleen .kop: Pro laadt dit stijlblad ook en
   heeft een eigen kop. Deze regels staan onderaan omdat ze regels van verderop in dit bestand moeten overschrijven. */
@media (max-width: 640px) {
  .kop .wrap { flex-wrap: wrap; height: auto; gap: 0 .8rem; padding-block: 3px 8px; }
  .kop .logo { margin-right: auto; }
  .kop .zoek { order: 1; flex: 0 0 100%; min-width: 0; margin: 2px 0 0; }
  .kop .zoek label { padding-block: .6rem; }
  .kop .zoek input { font-size: 16px; text-overflow: ellipsis; }
  .kop .zoek input::placeholder { font-size: 14.5px; }
  .kop.menu-open .menu { top: 100%; max-height: calc(100dvh - 140px); }
  .i-tekst h2 { scroll-margin-top: 116px; }
  /* Het paneel dat dan opent: twee kolommen met een lang woord liepen over de rand. */
  .zp-binnen { padding: 16px 12px 10px; }
  .zp-cats { gap: 4px; }
  .zp-cat { grid-template-columns: 44px minmax(0, 1fr); gap: .6rem; padding: 6px; }
  .zp-cat-foto { width: 44px; height: 44px; }
  .zp-cat b { font-size: 14px; hyphens: auto; overflow-wrap: anywhere; }
  .zp-cat small { display: block; }
}


/* Velden op de gsm (05-11-2026): onder 16 px zoomt iOS de hele pagina in zodra je in een veld tikt. De kassa stond op 15 px,
   sorteren en de nieuwsbrief op 14. Geldt ook voor Pro: dat is dezelfde ergernis, en verder verandert er niets. */
@media (max-width: 960px) {
  input, select, textarea { font-size: 16px !important; }
}

/* gsm-versie (05-11-2026, Egon: "de knop zit heel laag"). Alles hieronder hangt aan body.gsm2 (Webshop::gsmOntwerp): live met
   de setting webshop_gsm_ontwerp, vooraf bekijken met ?gsmproef=1. De koopknop stond op een iPhone op 1276 tot 1347 px,
   terwijl je 664 px ziet. Kleuren, letters en knoppen blijven die van de winkel; de foto blijft even groot. */
.koopbalk { display: none; }
@keyframes aandacht { 0%, 60% { box-shadow: 0 0 0 3px var(--gloed); } 100% { box-shadow: 0 0 0 3px transparent; } }
.aandacht { border-radius: 12px; animation: aandacht 1.5s ease-out; }
@media (max-width: 820px) {
  body.gsm2.v-product { padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }
  body.gsm2 .koopbalk:not([hidden]) { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--papier); border-top: 1px solid var(--lijn); box-shadow: 0 -6px 20px rgb(13 12 10 / .06); }
  .koopbalk-prijs { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
  .koopbalk-prijs b { font-size: 20px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .koopbalk-prijs small { color: var(--grijs); font-size: 12.5px; }
  .koopbalk .knop { flex: 0 1 auto; min-width: 0; padding: .85rem 1.3rem; white-space: nowrap; }
  /* eerste scherm: kruimelpad op één regel, kleinere fotoduimen op één rij */
  body.gsm2 .kruimel { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-top: .7rem; }
  /* minmax(0, ...): een rij duimen op één lijn duwde de hele pagina anders breder dan het scherm (612 px op een iPhone). */
  body.gsm2 .pdp { grid-template-columns: minmax(0, 1fr); gap: 14px; padding-top: .6rem; }
  body.gsm2 .pdp-info { gap: 1.1rem; }
  body.gsm2 .duimen { display: flex; overflow-x: auto; padding: 2px; scrollbar-width: none; }
  body.gsm2 .duimen::-webkit-scrollbar { display: none; }
  body.gsm2 .duimen button { flex: 0 0 52px; width: 52px; height: 52px; aspect-ratio: auto; border-radius: 10px; }
}
@media (max-width: 640px) {
  /* kop: de zoekrij verdwijnt bij omlaag scrollen (winkel.js); in de kassa staat de kop niet vast en is er geen zoekveld */
  body.gsm2 .kop.klein .zoek { display: none; }
  body.gsm2.v-afrekenen .kop { position: static; }
  body.gsm2.v-afrekenen .kop .zoek { display: none; }
}


/* Op 320 px stak "+n" bij de kleurstipjes buiten de tegel, en daardoor werd de hele pagina te breed. */
@media (max-width: 340px) { .staal-meer { display: none; } }

/* Momenteel niet leverbaar (NietLeverbaar): de pagina blijft staan, op de plaats van de koopknop staat dit. */
.niet-leverbaar { padding: .85rem 1rem; border-radius: var(--r-ctl); background: var(--mist); color: var(--inkt); font-weight: 600; text-align: center; }