/* ═══════════════════════════════════════════════════════════════
   MorphiHome — sculpturaal & organisch
   Design-studio-thema: Fraunces display, warme neutralen,
   beweging via GSAP (transform/opacity only).
   ═══════════════════════════════════════════════════════════════ */
:root {
    --creme: #FAF6EF; --beige: #EFE6D8; --beige-diep: #E3D5BF;
    --inkt: #23201B; --inkt-zacht: #4A4439;
    --terra: #C26A45; --terra-diep: #A14E2C;
    --groen: #2E4036; --groen-licht: #44584A;
    --zand: #D9BE94; --grijs: #6F685C; --rand: #E7DECD;
    /* component-aliassen */
    --ivoor: var(--creme); --ivoor-diep: var(--beige); --salie: #7E8E72; --salie-diep: #5F7055;
    --klei: var(--terra); --klei-tekst: var(--terra-diep);
    --schaduw: 0 24px 60px rgba(35, 32, 27, .13);
    --schaduw-zacht: 0 12px 32px rgba(35, 32, 27, .09);
    --radius: 20px;
    --vloei: cubic-bezier(.22, .9, .32, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { font-family: 'Plus Jakarta Sans', sans-serif; color: var(--inkt); background: var(--creme);
    line-height: 1.7; font-size: 16px; }
h1, h2, .serif { font-family: 'Fraunces', serif; font-weight: 450; line-height: 1.04;
    letter-spacing: -.01em; }
h3, h4 { font-weight: 600; }
a { color: var(--terra-diep); text-decoration: none; }
img { max-width: 100%; display: block; }
a, button, input, select, textarea, summary { touch-action: manipulation; }
::selection { background: var(--terra); color: #fff; }

/* Toetsenbord-focus altijd zichtbaar */
:focus-visible { outline: 3px solid var(--terra-diep); outline-offset: 3px; border-radius: 4px; }
.proces :focus-visible, .site-footer :focus-visible, .topbar :focus-visible,
.menu-overlay :focus-visible { outline-color: var(--zand); }

/* Skip-link */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 300; background: var(--inkt);
    color: var(--creme); font: 600 13.5px 'Plus Jakarta Sans'; padding: 12px 22px;
    border-radius: 0 0 12px 0; }
.skip-link:focus { left: 0; }

.icoon { flex: none; vertical-align: -.18em; }

/* ── Animatie-grondregels ──
   [data-anim] wordt alleen verborgen als JS actief is; GSAP maakt zichtbaar.
   Bij reduced-motion of zonder JS is alles direct zichtbaar. */
html.js [data-anim] { opacity: 0; }
html.js [data-anim="kop"] .kop-regel { display: inline-block; }
/* Het masker verbergt de tekst tot de animatie hem omhoog schuift. Zonder extra
   ruimte onderin knipt het de staarten van j, p en g eraf. De padding maakt het
   masker lager, de negatieve marge haalt die ruimte weer uit de opmaak, zodat er
   niets verschuift. De tekst start ver genoeg onder de rand om niet voortijdig
   in die strook zichtbaar te worden. */
.kop-mask { display: inline-block; overflow: hidden; vertical-align: bottom;
    padding-bottom: .2em; margin-bottom: -.2em; }
.kop-mask .kop-regel { display: inline-block; will-change: transform; }
.beeld-mask { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    html.js [data-anim] { opacity: 1 !important; transform: none !important; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ── Laadscherm ── */
.laadscherm { position: fixed; inset: 0; z-index: 250; background: var(--inkt);
    display: flex; align-items: center; justify-content: center; }
html:not(.js) .laadscherm { display: none; }
.laadscherm .laad-logo { font-family: 'Fraunces', serif; font-size: clamp(30px, 5vw, 52px);
    color: var(--creme); opacity: 0; }
.laadscherm .laad-logo em { font-style: italic; color: var(--zand); }

/* ── Topbar ── */
.topbar { background: var(--inkt); color: #D6CDBC; font-size: 12.5px; font-weight: 500;
    letter-spacing: .4px; display: flex; gap: 34px; justify-content: center; padding: 9px 16px;
    position: relative; z-index: 60; }
.topbar .icoon { vertical-align: -.22em; margin-right: 6px; color: var(--zand); }
.topbar.aankondiging { background: var(--terra); color: #fff; font-weight: 600; }
@media (max-width: 720px) { .topbar-extra { display: none; } }

/* ── Header: start transparant, frosted bij scroll ── */
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 20px;
    padding-block: 22px; padding-inline: max(5vw, calc((100% - var(--kolom)) / 2 + 6vw));
    position: sticky; top: 0; z-index: 50;
    background: transparent; border-bottom: 1px solid transparent;
    transition: padding .35s var(--vloei), background .35s, border-color .35s, box-shadow .35s,
                backdrop-filter .35s; }
.site-header.scrolled { padding-block: 12px; background: rgba(250, 246, 239, .78);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom-color: var(--rand); box-shadow: 0 8px 30px rgba(35, 32, 27, .06); }
.logo { display: flex; align-items: center; gap: 10px; font-family: 'Fraunces', serif;
    font-weight: 500; font-size: 27px; color: var(--inkt); letter-spacing: .2px; }
.logo em { font-style: italic; color: var(--terra-diep); }
.logo-icon { display: inline-flex; transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.logo:hover .logo-icon { transform: rotate(-10deg) translateY(-3px); }
.hoofdnav { display: flex; gap: 30px; font-weight: 600; font-size: 13px; letter-spacing: 1px;
    text-transform: uppercase; }
.hoofdnav a { color: var(--inkt); position: relative; padding: 12px 2px; }
.hoofdnav a::after { content: ''; position: absolute; left: 2px; right: 2px; bottom: 6px;
    height: 1.5px; background: var(--terra); transform: scaleX(0); transform-origin: left;
    transition: transform .35s var(--vloei); }
.hoofdnav a:hover::after, .hoofdnav a.actief::after { transform: scaleX(1); }
.header-acties { display: flex; align-items: center; gap: 8px; }
.cart-knop { position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 50%; color: var(--inkt);
    transition: transform .2s, background .2s; }
.cart-knop:hover { transform: translateY(-2px); background: var(--beige); }
.cart-teller { position: absolute; top: 0; right: -2px; background: var(--terra-diep); color: #fff;
    font: 700 11px 'Plus Jakarta Sans'; border-radius: 50%; min-width: 19px; height: 19px;
    display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; }
.menu-knop { display: none; width: 44px; height: 44px; align-items: center; justify-content: center;
    background: none; border: none; cursor: pointer; color: var(--inkt); border-radius: 50%;
    position: relative; z-index: 220; }
.menu-knop:hover { background: var(--beige); }

/* ── Mobiel menu: fullscreen overlay met staggered items ── */
.menu-overlay { position: fixed; inset: 0; z-index: 210; background: var(--inkt); color: var(--creme);
    display: flex; flex-direction: column; justify-content: center; padding: 0 9vw;
    visibility: hidden; pointer-events: none; }
.menu-overlay.open { visibility: visible; pointer-events: auto; }
html:not(.js) .menu-overlay.open { opacity: 1; }
.menu-overlay nav { display: flex; flex-direction: column; gap: 4px; }
.menu-overlay a { font-family: 'Fraunces', serif; font-size: clamp(34px, 9vw, 56px);
    color: var(--creme); padding: 6px 0; display: inline-flex; align-items: baseline; gap: 16px; }
.menu-overlay a .nr { font: 500 13px 'Plus Jakarta Sans'; color: var(--zand); letter-spacing: 1px; }
.menu-overlay a:hover { color: var(--zand); font-style: italic; }
.menu-overlay .menu-voet { margin-top: 9vh; color: #B5AC9A; font-size: 13.5px;
    display: flex; gap: 26px; flex-wrap: wrap; }
.menu-overlay .menu-voet a { font: 600 13.5px 'Plus Jakarta Sans'; color: var(--zand); padding: 8px 0; }
@media (max-width: 860px) {
    .menu-knop { display: inline-flex; }
    .hoofdnav { display: none; }
}

/* ── Knoppen (magnetisch via JS, .btn-kern beweegt mee) ── */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center;
    gap: 9px; font: 600 13.5px 'Plus Jakarta Sans'; letter-spacing: .8px; text-transform: uppercase;
    border-radius: 999px; padding: 16px 32px; min-height: 50px; border: 1.5px solid transparent;
    cursor: pointer; overflow: hidden;
    transition: background .3s var(--vloei), color .3s var(--vloei), border-color .3s, box-shadow .3s; }
.btn::after { content: '→'; font-size: 15px; transition: transform .3s var(--vloei); }
.btn:hover::after { transform: translateX(5px); }
.btn:hover { box-shadow: var(--schaduw-zacht); }
.btn-primair { background: var(--inkt); color: var(--creme); }
.btn-primair:hover { background: var(--terra-diep); color: #fff; }
.btn-secundair { background: var(--groen); color: var(--creme); }
.btn-secundair:hover { background: var(--terra-diep); }
.btn-ghost { border-color: var(--inkt); color: var(--inkt); background: transparent; }
.btn-ghost:hover { background: var(--inkt); color: var(--creme); }
.btn-groot { padding: 18px 38px; font-size: 14.5px; }

/* ── Hero: fullscreen ── */
.hero { position: relative; min-height: 100svh; display: grid;
    grid-template-columns: 1.05fr .95fr; align-items: center; gap: 20px;
    padding: 90px max(6vw, calc((100% - var(--kolom)) / 2 + 6vw)) 110px; overflow: hidden; margin-top: calc(-1 * var(--header-h, 89px));
    background: linear-gradient(168deg, var(--creme) 30%, var(--beige) 78%, var(--beige-diep) 100%); }
.hero-tekst { position: relative; z-index: 3; max-width: 660px; }
/* Regelhoogte stond op 1,04. Fraunces heeft lange staarten, dus de j, p en g van
   de ene regel botsten op de ascenders van de volgende. 1,14 geeft ze net genoeg
   lucht zonder dat de kop los oogt. */
.hero h1 { font-size: clamp(46px, 7vw, 96px); line-height: 1.14; margin: 22px 0 26px; font-weight: 420; }
.hero h1 .accent { display: block; font-style: italic; color: var(--terra-diep); font-weight: 400; }
.hero p { font-size: 17.5px; color: var(--inkt-zacht); max-width: 46ch; }
.hero-badge { display: inline-flex; align-items: center; gap: 9px; background: rgba(194, 106, 69, .1);
    color: var(--terra-diep); font: 600 11.5px 'Plus Jakarta Sans'; letter-spacing: 1.6px;
    text-transform: uppercase; padding: 9px 18px; border-radius: 999px;
    border: 1px solid rgba(194, 106, 69, .3); }
.hero-badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--terra);
    animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .3; transform: scale(.75); } }
.hero-knoppen { display: flex; gap: 16px; margin-top: 36px; flex-wrap: wrap; }

/* hero-visual: productfotografie in boogvorm */
.hero-visual { position: relative; z-index: 1; height: clamp(340px, 52vw, 640px);
    display: flex; align-items: flex-end; justify-content: center; }
.hero-boog { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
    width: clamp(280px, 36vw, 480px); height: 94%; margin: 0;
    border-radius: 999px 999px 24px 24px; overflow: hidden;
    background: var(--inkt); box-shadow: var(--schaduw); }
.hero-boog::after { content: ''; position: absolute; inset: 14px; z-index: 2; pointer-events: none;
    border-radius: 999px 999px 14px 14px; border: 1px solid rgba(250, 246, 239, .28); }
.hero-boog img { width: 100%; height: 100%; object-fit: cover; object-position: center;
    will-change: transform; }
.hero-ring { position: absolute; border: 1.5px solid var(--zand); border-radius: 50%; opacity: .6; }
.hero-ring.r1 { width: 90px; height: 90px; top: 12%; left: 6%; }
.hero-ring.r2 { width: 46px; height: 46px; bottom: 18%; right: 8%; }
.scroll-cue { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
    font: 600 10.5px 'Plus Jakarta Sans'; letter-spacing: 3px; text-transform: uppercase;
    color: var(--grijs); display: flex; flex-direction: column; align-items: center; gap: 10px; z-index: 3; }
.scroll-cue::after { content: ''; width: 1.5px; height: 38px; background: var(--terra);
    border-radius: 2px; animation: cue 2s var(--vloei) infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 55% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
@media (max-width: 900px) {
    .hero { grid-template-columns: 1fr; min-height: auto; padding-top: 40px; padding-bottom: 90px; }
    .hero-visual { height: 320px; order: -1; margin-top: 30px; }
    .scroll-cue { display: none; }
}

/* ── Marquee ── */
.marquee { background: var(--groen); color: var(--beige); overflow: hidden; padding: 17px 0;
    font-family: 'Fraunces', serif; font-size: 20px; font-style: italic; letter-spacing: .4px; }
.marquee-baan { display: flex; width: max-content; will-change: transform;
    animation: marquee 36s linear infinite; }
.marquee:hover .marquee-baan { animation-play-state: paused; }
.marquee span { padding: 0 28px; white-space: nowrap; }
.marquee span::after { content: '✦'; margin-left: 56px; font-size: 12px; color: var(--zand); font-style: normal; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ── Secties ── */
/* Eén bron voor de breedte van de inhoudskolom. De koptekst en de hero hebben
   geen max-width omdat hun achtergrond over de volle breedte moet lopen; die
   lijnen uit met dezelfde binnenmarge in plaats van met een max-width. */
:root { --kolom: 1360px; }
.sectie { padding: 96px 6vw; max-width: var(--kolom); margin: 0 auto; }
.sectie.smal { max-width: 800px; padding-top: 70px; padding-bottom: 70px; }
.sectie h2 { font-size: clamp(34px, 4.2vw, 60px); margin-bottom: 16px; font-weight: 440; }
.sectie h2 em, .sier { font-style: italic; color: var(--terra-diep); font-weight: 400; }
.sectie-kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px;
    flex-wrap: wrap; margin-bottom: 48px; }
.sectie-kop h2 { margin-bottom: 8px; }
.sectie-kop p { color: var(--grijs); max-width: 52ch; }
.sectie-kop .alles-link { font: 600 12.5px 'Plus Jakarta Sans'; letter-spacing: 1.4px;
    text-transform: uppercase; color: var(--inkt); white-space: nowrap; position: relative;
    padding: 8px 0 10px; }
.sectie-kop .alles-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: 4px;
    height: 1.5px; background: var(--terra); transform: scaleX(1); transform-origin: right;
    transition: transform .35s var(--vloei); }
.sectie-kop .alles-link:hover::after { transform: scaleX(0); transform-origin: right; }
.centreer { text-align: center; }
.kruimels { font: 600 11px 'Plus Jakarta Sans'; letter-spacing: 1.8px; text-transform: uppercase;
    color: var(--grijs); margin-bottom: 24px; }
.kruimels a { color: var(--grijs); }
.kruimels a:hover { color: var(--terra-diep); }

/* ── Manifest + parallax ── */
.manifest { position: relative; overflow: hidden; background: var(--creme); }
.manifest-inhoud { display: grid; grid-template-columns: 1.1fr .9fr; gap: 7vw; align-items: center;
    max-width: 1360px; margin: 0 auto; padding: 110px 6vw; }
.manifest blockquote { font-family: 'Fraunces', serif; font-size: clamp(28px, 3.6vw, 52px);
    line-height: 1.18; font-weight: 420; color: var(--inkt); }
.manifest blockquote em { font-style: italic; color: var(--terra-diep); }
.manifest .manifest-sub { margin-top: 26px; color: var(--grijs); max-width: 46ch; }
.parallax-stapel { position: relative; height: clamp(380px, 42vw, 560px); }
.parallax-tegel { position: absolute; border-radius: var(--radius); overflow: hidden;
    box-shadow: var(--schaduw); will-change: transform; display: flex; align-items: center;
    justify-content: center; }
.parallax-tegel svg { width: 58%; height: auto; }
.parallax-tegel.p1 { width: 56%; aspect-ratio: .8; top: 0; left: 0;
    background: linear-gradient(165deg, var(--beige), var(--beige-diep)); }
.parallax-tegel.p2 { width: 44%; aspect-ratio: .85; top: 34%; right: 0;
    background: linear-gradient(165deg, #DCE3D6, #B9C5AC); }
.parallax-tegel.p3 { width: 38%; aspect-ratio: .9; bottom: 0; left: 14%;
    background: linear-gradient(165deg, var(--groen), #233129); }
@media (max-width: 900px) { .manifest-inhoud { grid-template-columns: 1fr; }
    .parallax-stapel { height: 64vw; } }

/* ── Categorie-/collectietegels ── */
.categorie-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 1000px) { .categorie-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .categorie-grid { grid-template-columns: 1fr; } }
.categorie-kaart { position: relative; min-height: 340px; border-radius: var(--radius);
    padding: 30px 26px; display: flex; flex-direction: column; justify-content: flex-end;
    overflow: hidden; color: var(--inkt);
    transition: transform .45s var(--vloei), box-shadow .45s; will-change: transform; }
.categorie-kaart:hover { transform: translateY(-10px); box-shadow: var(--schaduw); }
.categorie-kaart:nth-child(1) { background: linear-gradient(160deg, #F2EADC, #E2D2B6); }
.categorie-kaart:nth-child(2) { background: linear-gradient(160deg, #E0E6DA, #B7C4AA); }
.categorie-kaart:nth-child(3) { background: linear-gradient(160deg, #EFDFCE, #DBB888); }
.categorie-kaart:nth-child(4) { background: linear-gradient(160deg, var(--groen-licht), var(--groen)); color: var(--creme); }
.categorie-kaart .tegel-label { font: 600 10.5px 'Plus Jakarta Sans'; letter-spacing: 2.2px;
    text-transform: uppercase; opacity: .7; margin-bottom: 8px; }
.categorie-kaart h3 { font-family: 'Fraunces', serif; font-size: 32px; font-weight: 460; margin-bottom: 5px; }
.categorie-kaart p { font-size: 13.5px; opacity: .78; max-width: 26ch; }
.categorie-kaart .pijl { position: absolute; top: 22px; right: 22px; width: 44px; height: 44px;
    border: 1.5px solid currentColor; border-radius: 50%; display: flex; align-items: center;
    justify-content: center; font-size: 17px; opacity: .55;
    transition: opacity .35s, transform .45s var(--vloei); }
.categorie-kaart:hover .pijl { opacity: 1; transform: rotate(-45deg); }
.categorie-kaart .tegel-emoji { position: absolute; top: 36%; left: 50%;
    transform: translate(-50%, -50%); opacity: .32;
    transition: transform .55s var(--vloei), opacity .35s; }
.categorie-kaart:hover .tegel-emoji { transform: translate(-50%, -60%) scale(1.1); opacity: .5; }

/* Foto-gevulde categorietegel met leesbaarheids-overlay */
.categorie-kaart.met-foto { color: var(--creme); }
.categorie-kaart .tegel-foto { position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: 0; transition: transform .55s var(--vloei); }
.categorie-kaart.met-foto::after { content: ''; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(35,32,27,.05) 30%, rgba(35,32,27,.78) 100%); }
.categorie-kaart.met-foto:hover .tegel-foto { transform: scale(1.06); }
.categorie-kaart.met-foto .tegel-label,
.categorie-kaart.met-foto h3,
.categorie-kaart.met-foto p,
.categorie-kaart.met-foto .pijl { position: relative; z-index: 2; }
.categorie-kaart.met-foto p { opacity: .92; }

/* ── "In jouw interieur"-strip ── */
.interieur-grid { display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: repeat(2, 1fr);
    gap: 16px; }
.interieur-foto { position: relative; margin: 0; border-radius: var(--radius); overflow: hidden;
    background: var(--beige); aspect-ratio: 4/3; }
.interieur-foto.groot { grid-row: span 2; aspect-ratio: auto; }
.interieur-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--vloei); }
.interieur-foto:hover img { transform: scale(1.05); }
.interieur-foto figcaption { position: absolute; left: 16px; bottom: 14px; right: 16px; z-index: 2;
    color: var(--creme); font: 600 12.5px 'Plus Jakarta Sans'; letter-spacing: .3px;
    text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.interieur-foto::after { content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(35,32,27,.5)); opacity: 0; transition: opacity .4s; }
.interieur-foto:has(figcaption)::after { opacity: 1; }
@media (max-width: 760px) {
    .interieur-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
    .interieur-foto.groot { grid-column: span 2; grid-row: auto; aspect-ratio: 16/10; }
}

/* ── Productkaarten ── */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 28px; }
.product-kaart { position: relative; color: var(--inkt); will-change: transform; }
.product-foto { position: relative; background: linear-gradient(168deg, var(--beige), var(--beige-diep));
    border-radius: var(--radius); aspect-ratio: .88; display: flex; align-items: center;
    justify-content: center; overflow: hidden; margin-bottom: 16px;
    transition: box-shadow .45s, transform .45s var(--vloei); }
.product-kaart:hover .product-foto { box-shadow: var(--schaduw); transform: translateY(-6px); }
.product-foto img { object-fit: contain; width: 86%; height: 86%;
    transition: transform .5s var(--vloei), opacity .5s var(--vloei); will-change: transform; }
.product-kaart:hover .product-foto img.foto-a { transform: scale(1.05); }
.product-foto img.foto-b { position: absolute; inset: 7%; width: 86%; height: 86%; opacity: 0; }
.product-kaart:hover .product-foto.heeft-b img.foto-a { opacity: 0; }
.product-kaart:hover .product-foto.heeft-b img.foto-b { opacity: 1; transform: scale(1.05); }
.foto-placeholder { color: var(--terra-diep); opacity: .4; transition: transform .5s var(--vloei); }
.product-kaart:hover .foto-placeholder { transform: scale(1.1) translateY(-4px); }
.kaart-cta { position: absolute; left: 14px; right: 14px; bottom: 14px; background: rgba(35, 32, 27, .92);
    color: var(--creme); font: 600 11.5px 'Plus Jakarta Sans'; letter-spacing: 1.6px;
    text-transform: uppercase; text-align: center; padding: 14px; border-radius: 14px;
    opacity: 0; transform: translateY(14px); transition: opacity .35s, transform .35s var(--vloei);
    backdrop-filter: blur(4px); }
.product-kaart:hover .kaart-cta, .product-kaart:focus-visible .kaart-cta { opacity: 1; transform: translateY(0); }
.sale-badge { position: absolute; top: 14px; left: 14px; background: var(--terra-diep); color: #fff;
    font: 700 10.5px 'Plus Jakarta Sans'; letter-spacing: 1px; text-transform: uppercase;
    padding: 6px 13px; border-radius: 999px; z-index: 2; }
.product-kaart h3 { font-family: 'Fraunces', serif; font-size: 21px; font-weight: 500; margin-bottom: 2px; }
.prijs { font-weight: 600; color: var(--inkt-zacht); font-size: 14.5px; }
.prijs s { color: var(--grijs); font-weight: 400; margin-right: 7px; }
.prijs.groot { font-size: 32px; margin: 10px 0; color: var(--inkt); font-family: 'Fraunces', serif; }
.prijs-noot { font-size: 13px; color: var(--grijs); margin: -4px 0 14px; }

/* ── Shop bij kleur ── */
.kleuren { transition: background-color .7s var(--vloei); border-radius: 28px;
    max-width: 1360px; margin: 0 auto; }
.kleur-rij { display: flex; gap: 14px; min-height: 320px; }
.kleur-tegel { position: relative; flex: 1; border-radius: var(--radius); overflow: hidden;
    display: flex; flex-direction: column; justify-content: flex-end; padding: 24px 22px;
    transition: flex .55s var(--vloei), box-shadow .45s; cursor: pointer; min-width: 0; }
.kleur-tegel:hover, .kleur-tegel:focus-visible { flex: 2.2; box-shadow: var(--schaduw); }
.kleur-tegel .kleur-naam { font-family: 'Fraunces', serif; font-size: 24px; font-weight: 500;
    white-space: nowrap; }
.kleur-tegel .kleur-sub { font: 600 11px 'Plus Jakarta Sans'; letter-spacing: 1.6px;
    text-transform: uppercase; opacity: 0; transform: translateY(8px);
    transition: opacity .35s .12s, transform .35s .12s var(--vloei); white-space: nowrap; }
.kleur-tegel:hover .kleur-sub, .kleur-tegel:focus-visible .kleur-sub { opacity: .8; transform: none; }
.kleur-tegel.licht { color: var(--inkt); }
.kleur-tegel.donker { color: var(--creme); }
@media (max-width: 860px) {
    .kleur-rij { flex-direction: column; }
    .kleur-tegel { min-height: 86px; flex: none; }
    .kleur-tegel:hover { flex: none; }
    .kleur-tegel .kleur-sub { opacity: .8; transform: none; }
}

/* ── Proces ── */
.proces { background: var(--groen); color: var(--creme); border-radius: 28px; max-width: 1280px;
    margin: 0 auto; padding: 80px 6vw; }
.proces h2 { color: var(--creme); }
.proces h2 em { color: var(--zand); }
.proces-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 48px; }
@media (max-width: 860px) { .proces-grid { grid-template-columns: 1fr; } }
.stap { position: relative; padding-top: 16px; border-top: 1px solid rgba(250, 246, 239, .22); }
.stap .nummer { font-family: 'Fraunces', serif; font-size: 66px; font-style: italic;
    color: var(--zand); line-height: 1; font-weight: 400; }
.stap h3 { margin: 12px 0 6px; font-size: 17px; color: var(--creme); }
.stap p { color: #C0C9BB; font-size: 14.5px; }

/* ── Quote ── */
.quote { text-align: center; max-width: 920px !important; }
.quote blockquote { font-family: 'Fraunces', serif; font-size: clamp(28px, 3.6vw, 46px);
    font-style: italic; font-weight: 420; line-height: 1.3; color: var(--inkt); }
.quote .bron { display: block; margin-top: 20px; font: 600 11.5px 'Plus Jakarta Sans';
    letter-spacing: 2.2px; text-transform: uppercase; color: var(--grijs); }

/* ── Filterbalk / shop ── */
.filterbalk { display: flex; gap: 10px; flex-wrap: wrap; margin: 22px 0 40px; }
.filter { font: 600 11.5px 'Plus Jakarta Sans'; letter-spacing: 1.2px; text-transform: uppercase;
    padding: 12px 22px; border-radius: 999px; border: 1.5px solid var(--rand);
    color: var(--inkt-zacht); transition: all .25s var(--vloei); }
.filter:hover { border-color: var(--inkt); color: var(--inkt); transform: translateY(-2px); }
.filter.actief { background: var(--inkt); color: var(--creme); border-color: var(--inkt); }
.categorie-intro { color: var(--grijs); max-width: 64ch; margin-bottom: 8px; }

/* ── Productdetail ── */
.product-kolommen { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; margin-top: 8px; }
@media (max-width: 860px) { .product-kolommen { grid-template-columns: 1fr; } }
.product-galerij img#hoofdfoto, .product-foto.groot { background: linear-gradient(168deg, var(--beige), var(--beige-diep));
    border-radius: var(--radius); aspect-ratio: 1; object-fit: contain; width: 100%; }
.product-foto.groot { display: flex; align-items: center; justify-content: center; }
.thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.thumbs button { background: var(--beige); border: 1.5px solid transparent; border-radius: 12px;
    cursor: pointer; padding: 0; transition: border-color .2s, transform .2s; }
.thumbs button:hover { border-color: var(--terra); transform: translateY(-3px); }
.thumbs img { width: 76px; height: 76px; object-fit: contain; border-radius: 11px; }
.product-info h1 { font-size: clamp(34px, 4vw, 54px); font-weight: 440; }
.voorraad-info { color: var(--salie-diep); font: 600 13px 'Plus Jakarta Sans'; margin: 8px 0 16px;
    display: flex; align-items: center; gap: 8px; }
.korte-beschrijving { margin-bottom: 22px; color: var(--inkt-zacht); }
.koop-form label { display: block; font: 600 11.5px 'Plus Jakarta Sans'; letter-spacing: 1.2px;
    text-transform: uppercase; margin-bottom: 16px; color: var(--inkt-zacht); }
.koop-form select { display: block; box-sizing: border-box; margin-top: 8px; width: 100%; max-width: 340px;
    min-height: 52px; padding: 14px 46px 14px 16px; border-radius: 14px; border: 1.5px solid var(--rand);
    font: 600 15px 'Plus Jakarta Sans'; color: var(--inkt); cursor: pointer;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    background: var(--creme) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23A14E2C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center;
    box-shadow: 0 1px 2px rgba(35, 32, 27, .05); transition: border-color .18s var(--vloei), box-shadow .18s var(--vloei), background-color .18s var(--vloei); }
.koop-form select:hover { border-color: var(--terra); background-color: #fff; }
.koop-form select:focus-visible { outline: none; border-color: var(--terra-diep); box-shadow: 0 0 0 3px rgba(161, 78, 44, .18); }
.koop-form select option { background: var(--creme); color: var(--inkt); font-weight: 500; }
/* Custom variant-dropdown: huisstijl incl. gestylede open lijst (JS-enhancement) */
.koop-form .mh-select__native { display: none; }
.mh-select { position: relative; max-width: 340px; margin-top: 8px; }
.mh-select__trigger { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    width: 100%; min-height: 52px; box-sizing: border-box; padding: 14px 16px; border-radius: 14px;
    border: 1.5px solid var(--rand); background: var(--creme); color: var(--inkt);
    font: 600 15px 'Plus Jakarta Sans'; text-align: left; cursor: pointer;
    box-shadow: 0 1px 2px rgba(35, 32, 27, .05);
    transition: border-color .18s var(--vloei), box-shadow .18s var(--vloei), background-color .18s var(--vloei); }
.mh-select__trigger:hover { border-color: var(--terra); background: #fff; }
.mh-select__trigger:focus-visible { outline: none; border-color: var(--terra-diep); box-shadow: 0 0 0 3px rgba(161, 78, 44, .18); }
.mh-select[data-open="true"] .mh-select__trigger { border-color: var(--terra-diep); box-shadow: 0 0 0 3px rgba(161, 78, 44, .18); }
.mh-select__chevron { flex: none; width: 14px; height: 9px; color: var(--terra-diep); transition: transform .2s var(--vloei); }
.mh-select[data-open="true"] .mh-select__chevron { transform: rotate(180deg); }
.mh-select__panel { position: absolute; z-index: 60; inset: calc(100% + 8px) 0 auto 0; margin: 0; padding: 6px;
    list-style: none; border-radius: 14px; border: 1.5px solid var(--rand); background: var(--creme);
    box-shadow: 0 18px 44px rgba(35, 32, 27, .18); max-height: 320px; overflow-y: auto;
    opacity: 0; transform: translateY(-6px); pointer-events: none;
    transition: opacity .16s var(--vloei), transform .16s var(--vloei); }
.mh-select[data-open="true"] .mh-select__panel { opacity: 1; transform: translateY(0); pointer-events: auto; }
.mh-select__option { display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 12px 14px; border-radius: 10px; font: 500 14.5px 'Plus Jakarta Sans'; color: var(--inkt); cursor: pointer;
    transition: background-color .12s var(--vloei), color .12s var(--vloei); }
.mh-select__option[aria-selected="true"] { font-weight: 600; }
.mh-select__option[aria-selected="true"]::after { content: '\2713'; color: var(--terra-diep); font-size: 13px; }
.mh-select__option:hover, .mh-select__option.is-active { background: var(--terra-diep); color: #fff; }
.mh-select__option:hover::after, .mh-select__option.is-active::after { color: #fff; }
/* Twee-assige variant-kiezer (kleur + maat als knoppen) */
.variant-kiezer { display: flex; flex-direction: column; gap: 20px; margin: 8px 0 4px; }
.variant-groep { display: flex; flex-direction: column; gap: 10px; }
.variant-label { font: 600 11.5px 'Plus Jakarta Sans'; letter-spacing: 1.2px; text-transform: uppercase; color: var(--inkt-zacht); }
.variant-opties { display: flex; flex-wrap: wrap; gap: 10px; }
.variant-knop { min-height: 46px; padding: 11px 18px; border-radius: 12px; border: 1.5px solid var(--rand);
    background: var(--creme); color: var(--inkt); font: 600 14.5px 'Plus Jakarta Sans'; cursor: pointer;
    transition: border-color .15s var(--vloei), background-color .15s var(--vloei), color .15s var(--vloei), box-shadow .15s var(--vloei); }
.variant-knop:hover { border-color: var(--terra); }
.variant-knop.actief { border-color: var(--terra-diep); background: var(--terra-diep); color: #fff; box-shadow: 0 4px 14px rgba(161, 78, 44, .22); }
.variant-knop:focus-visible { outline: none; border-color: var(--terra-diep); box-shadow: 0 0 0 3px rgba(161, 78, 44, .18); }
.variant-knop.niet-beschikbaar { opacity: .35; cursor: not-allowed; text-decoration: line-through; }
.koop-rij { display: flex; gap: 12px; flex-wrap: wrap; }
.koop-rij input { width: 88px; padding: 13px; border-radius: 14px; border: 1.5px solid var(--rand);
    font: 700 16px 'Plus Jakarta Sans'; text-align: center; background: var(--creme); min-height: 50px; }
.product-usps { list-style: none; margin-top: 28px; display: grid; gap: 10px; font-size: 13.5px;
    color: var(--inkt-zacht); }
.product-usps li { display: flex; align-items: center; gap: 10px; }
.product-usps .icoon { color: var(--salie-diep); }
.product-beschrijving { margin-top: 64px; max-width: 760px; }
.product-beschrijving h2 { font-size: 32px; margin-bottom: 14px; }
.gerelateerd { margin-top: 70px; }
.gerelateerd h2 { font-size: 34px; margin-bottom: 30px; }

/* ── Cart & checkout ── */
.cart-tabel { width: 100%; border-collapse: collapse; margin-top: 20px; }
.cart-tabel th { text-align: left; font: 600 10.5px 'Plus Jakarta Sans'; letter-spacing: 1.8px;
    text-transform: uppercase; color: var(--grijs); padding: 12px 10px;
    border-bottom: 1.5px solid var(--rand); }
.cart-tabel td { padding: 16px 10px; border-bottom: 1px solid var(--rand); }
.cart-product { display: flex; align-items: center; gap: 16px; }
.cart-product img { width: 68px; height: 68px; object-fit: contain; background: var(--beige); border-radius: 12px; }
.cart-product small { display: block; color: var(--grijs); }
.cart-tabel input { width: 72px; padding: 10px 8px; border-radius: 10px; border: 1.5px solid var(--rand);
    text-align: center; background: var(--creme); font: 700 15px 'Plus Jakarta Sans'; min-height: 44px; }
.cart-onder { display: flex; justify-content: space-between; align-items: flex-start; gap: 30px;
    margin-top: 26px; flex-wrap: wrap; }
.cart-totalen { min-width: 320px; background: var(--beige); border-radius: var(--radius); padding: 28px; }
.cart-totalen p { display: flex; justify-content: space-between; margin-bottom: 9px; font-size: 14.5px; }
.cart-totalen .totaal { font: 500 22px 'Fraunces'; border-top: 1.5px solid var(--beige-diep); padding-top: 12px; }
.cart-totalen .btn { width: 100%; margin-top: 14px; }
.gratis-hint { color: var(--terra-diep); font: 600 12.5px 'Plus Jakarta Sans'; }
.korting-regel { color: var(--salie-diep); font-weight: 600; }
.korting-blok { margin-top: 18px; display: flex; justify-content: flex-end; }
.korting-blok form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.korting-blok input { padding: 12px 18px; border-radius: 999px; border: 1.5px solid var(--rand);
    font: 13.5px 'Plus Jakarta Sans'; background: var(--creme); min-height: 44px; }
.lege-cart { text-align: center; padding: 70px 0; }
.lege-icoon { display: inline-flex; color: var(--terra-diep); opacity: .6; margin-bottom: 14px; }
.lege-cart .btn { margin-top: 18px; }
.afrekenen-kolommen { display: grid; grid-template-columns: 1.3fr .7fr; gap: 44px; }
@media (max-width: 860px) { .afrekenen-kolommen { grid-template-columns: 1fr; } }
.afreken-form h2 { font-size: 28px; margin: 26px 0 14px; }
.afreken-form label, .contact-form label { display: block; font: 600 11.5px 'Plus Jakarta Sans';
    letter-spacing: 1px; text-transform: uppercase; color: var(--inkt-zacht); margin-bottom: 15px; }
.afreken-form input, .afreken-form textarea, .contact-form input, .contact-form textarea {
    display: block; width: 100%; margin-top: 6px; padding: 13px 15px; border-radius: 14px;
    border: 1.5px solid var(--rand); font: 15px 'Plus Jakarta Sans'; background: var(--creme);
    min-height: 48px; transition: border-color .2s, box-shadow .2s; }
.afreken-form textarea, .contact-form textarea { min-height: 0; }
.afreken-form input:focus, .contact-form input:focus, .afreken-form textarea:focus, .contact-form textarea:focus {
    outline: none; border-color: var(--terra); box-shadow: 0 0 0 4px rgba(194, 106, 69, .13); }
.veld-rij { display: flex; gap: 14px; flex-wrap: wrap; } .veld-rij label { flex: 1; min-width: 130px; }
.veld-fout input { border-color: #B0442E; background: #FBF1EE; }
.veld-fout .veld-melding { display: block; color: #B0442E; font: 600 12px 'Plus Jakarta Sans'; margin-top: 4px; }
.bestel-overzicht { background: var(--beige); border-radius: var(--radius); padding: 28px; height: fit-content; }
.bestel-overzicht h2 { font-size: 26px; margin-bottom: 16px; }
.overzicht-regel { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0;
    border-bottom: 1px solid var(--beige-diep); font-size: 14px; }
.overzicht-regel.totaal { font: 500 19px 'Fraunces'; border: none; padding-top: 14px; }
.melding { border-radius: 14px; padding: 14px 18px; margin-bottom: 18px; font: 600 13.5px 'Plus Jakarta Sans'; }
.melding.ok { background: #E9F0E3; color: var(--salie-diep); }
.melding.fout { background: #F7E8E2; color: #B0442E; }
.klein { font-size: 13px; color: var(--grijs); margin: 14px 0; }
.hp { position: absolute; left: -9999px; }

/* ── Bedankt / 404 ── */
.bedankt-kaart { background: var(--beige); border-radius: 28px; padding: 64px 44px; max-width: 680px; margin: 0 auto; }
.bedankt-icoon { display: inline-flex; align-items: center; justify-content: center; width: 78px; height: 78px;
    border-radius: 50%; background: var(--groen); color: var(--creme); margin-bottom: 12px; }
.bedankt-kaart .btn { margin-top: 22px; }
.cart-tabel.compact { max-width: 480px; margin: 24px auto; }

/* ── FAQ / juridisch / contact / verhaal ── */
.faq-item { border-bottom: 1px solid var(--rand); padding: 0 4px; }
.faq-item summary { font: 600 16px 'Plus Jakarta Sans'; padding: 22px 0; cursor: pointer; list-style: none;
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    transition: color .2s; min-height: 44px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--terra-diep); }
.faq-item summary::after { content: '+'; font-family: 'Fraunces'; font-size: 28px;
    color: var(--terra-diep); transition: transform .35s var(--vloei); flex: none; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { padding-bottom: 22px; color: var(--inkt-zacht); }
.juridisch h2 { font-size: 26px; margin: 28px 0 8px; }
.contact-info { margin-top: 38px; padding-top: 24px; border-top: 1px solid var(--rand); }
.intro { font-family: 'Fraunces', serif; font-size: 25px; font-style: italic; line-height: 1.4; }
.over-beeld { margin: 30px 0; border-radius: var(--radius); overflow: hidden; background: var(--beige); }
.over-beeld img { width: 100%; height: auto; display: block; }
.verhaal { background: transparent; text-align: center; }
.verhaal p { max-width: 62ch; margin: 0 auto 26px; color: var(--inkt-zacht); }
.verhaal .btn { margin: 4px 6px; }

/* ── Footer ── */
.site-footer { background: var(--inkt); color: #B5AC9A; margin-top: 110px; position: relative;
    overflow: hidden; }
.footer-merk { font-family: 'Fraunces', serif; font-size: clamp(58px, 11vw, 170px); font-weight: 420;
    color: rgba(250, 246, 239, .07); line-height: 1; white-space: nowrap; text-align: center;
    padding: 40px 0 0; user-select: none; pointer-events: none; }
.footer-kolommen { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 38px; padding: 30px 6vw 50px; max-width: 1360px; margin: 0 auto; }
.site-footer h3 { color: var(--creme); font-family: 'Fraunces', serif; font-size: 30px; font-weight: 460; }
.site-footer h3 em { font-style: italic; color: var(--zand); }
.site-footer h4 { color: var(--creme); margin-bottom: 14px; font: 600 11px 'Plus Jakarta Sans';
    letter-spacing: 1.8px; text-transform: uppercase; }
.site-footer a { color: #B5AC9A; display: inline-block; margin-bottom: 9px; position: relative;
    padding: 2px 0; transition: color .25s; }
.site-footer a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: var(--zand); transform: scaleX(0); transform-origin: left;
    transition: transform .35s var(--vloei); }
.site-footer a:hover { color: var(--zand); }
.site-footer a:hover::after { transform: scaleX(1); }
.site-footer .socials a { display: inline; }
.kvk { font-size: 12px; opacity: .65; }
.footer-onder { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    padding: 20px 6vw; border-top: 1px solid rgba(250, 246, 239, .1); font-size: 12.5px;
    max-width: 1360px; margin: 0 auto; }

/* ── Reviews ── */
.sterren { display: inline-flex; gap: 2px; vertical-align: middle; }
.sterren .ster { width: 16px; height: 16px; }
.sterren.groot .ster { width: 22px; height: 22px; }
.ster-vol { fill: var(--terra); }
.ster-half { fill: var(--terra); opacity: .55; }
.ster-leeg { fill: none; stroke: var(--terra); stroke-width: 1.5; opacity: .5; }
.review-samenvatting { display: inline-flex; align-items: center; gap: 9px; margin: 4px 0 10px;
    font: 600 13px 'Plus Jakarta Sans'; color: var(--inkt-zacht); }
.review-samenvatting:hover { color: var(--terra-diep); }
.reviews-blok { margin-top: 70px; max-width: 820px; }
.reviews-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
    flex-wrap: wrap; border-bottom: 1px solid var(--rand); padding-bottom: 18px; margin-bottom: 26px; }
.reviews-kop h2 { font-size: clamp(28px, 3.4vw, 40px); }
.reviews-gemiddelde { display: flex; align-items: center; gap: 10px; }
.reviews-gemiddelde strong { font: 500 24px 'Fraunces'; }
.reviews-gemiddelde span { color: var(--grijs); font-size: 13.5px; }
.review-lijst { list-style: none; display: grid; gap: 22px; margin-bottom: 44px; }
.review { border: 1px solid var(--rand); border-radius: var(--radius); padding: 22px 24px; background: var(--creme); }
.review-top { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.review-titel { font: 600 16px 'Plus Jakarta Sans'; }
.review p { color: var(--inkt-zacht); margin-bottom: 10px; }
.review-meta { font-size: 13px; color: var(--grijs); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.review-meta .geverifieerd { display: inline-flex; align-items: center; gap: 4px; color: var(--salie-diep);
    font-weight: 600; }
.reviews-leeg { color: var(--grijs); margin-bottom: 40px; }
.review-formulier { background: var(--beige); border-radius: var(--radius); padding: 30px 28px; }
.review-formulier h3 { font-family: 'Fraunces'; font-size: 24px; font-weight: 500; margin-bottom: 16px; }
.review-formulier label { display: block; font: 600 12px 'Plus Jakarta Sans'; letter-spacing: 1px;
    text-transform: uppercase; color: var(--inkt-zacht); margin-bottom: 15px; }
.review-formulier input, .review-formulier textarea { display: block; width: 100%; margin-top: 6px;
    padding: 13px 15px; border-radius: 14px; border: 1.5px solid var(--rand); background: var(--creme);
    font: 15px 'Plus Jakarta Sans'; transition: border-color .2s, box-shadow .2s; }
.review-formulier textarea { resize: vertical; }
.review-formulier input:focus, .review-formulier textarea:focus { outline: none; border-color: var(--terra);
    box-shadow: 0 0 0 4px rgba(194, 106, 69, .13); }
.ster-keuze { border: none; display: inline-flex; gap: 4px; margin-bottom: 18px; padding: 0; }
.ster-keuze label { margin: 0; cursor: pointer; line-height: 0; }
.ster-keuze input { position: absolute; opacity: 0; width: 0; height: 0; }
.ster-keuze svg { fill: none; stroke: var(--terra); stroke-width: 1.5; opacity: .5; transition: fill .15s, opacity .15s; }
.ster-keuze label.aan svg { fill: var(--terra); stroke: var(--terra); opacity: 1; }
.ster-keuze input:focus-visible + svg { outline: 3px solid var(--terra-diep); outline-offset: 2px; border-radius: 4px; }

/* ── Legacy reveal (binnenpagina's, IO-fallback) ── */
.reveal { opacity: 0; transform: translateY(28px);
    transition: opacity .8s var(--vloei), transform .8s var(--vloei);
    transition-delay: var(--vertraging, 0s); }
.reveal.zichtbaar { opacity: 1; transform: none; }
html:not(.js) .reveal { opacity: 1; transform: none; }

/* ── Cookiebanner ── */
#cookie-banner { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 200;
    background: var(--inkt); color: var(--creme); border-radius: 22px; padding: 24px 28px; max-width: 640px;
    width: calc(100% - 28px); box-shadow: 0 22px 64px rgba(0, 0, 0, .5); display: flex; gap: 16px 24px;
    align-items: center; flex-wrap: wrap; animation: cookie-in .55s cubic-bezier(.2, .9, .3, 1) both; }
#cookie-banner[hidden] { display: none !important; }   /* anders overrulet display:flex het hidden-attribuut */
@keyframes cookie-in { from { opacity: 0; transform: translate(-50%, 28px); } to { opacity: 1; transform: translate(-50%, 0); } }
#cookie-banner .cookie-tekst { flex: 1 1 300px; }
#cookie-banner .cookie-tekst strong { display: block; font: 700 18px/1.3 'Plus Jakarta Sans'; margin-bottom: 5px; }
#cookie-banner .cookie-tekst p { margin: 0; font: 400 14.5px/1.55 'Plus Jakarta Sans'; opacity: .88; }
#cookie-banner .cookie-tekst a { color: var(--creme); text-decoration: underline; }
#cookie-banner .cookie-knoppen { display: flex; gap: 12px; flex: 0 0 auto; }
#cookie-banner .btn { padding: 14px 28px; font-size: 15px; min-height: 50px; font-weight: 700; }
#cookie-banner .btn-ghost { background: transparent; border: 2px solid rgba(255, 255, 255, .55); color: var(--creme); }
#cookie-banner .btn-ghost:hover { border-color: var(--creme); background: rgba(255, 255, 255, .08); }
@media (max-width: 560px) {
    #cookie-banner { padding: 20px 20px; }
    #cookie-banner .cookie-knoppen { flex: 1 1 100%; flex-direction: column-reverse; align-items: stretch; gap: 10px; }
    #cookie-banner .cookie-knoppen .btn { width: 100%; flex: none; }
    #cookie-banner .cookie-link { align-self: center; padding-top: 4px; }
}

/* Cookie: beheer-link, weiger-knop + voorkeuren-modal */
#cookie-banner .cookie-link { background: none; border: none; color: var(--creme); text-decoration: underline;
    font: 600 14px 'Plus Jakarta Sans'; cursor: pointer; padding: 8px 4px; align-self: center; }
#cookie-banner .cookie-link:hover { opacity: .8; }
#cookie-banner .cookie-accept { background: #A14E2C; color: #fff; border: none; box-shadow: 0 6px 18px rgba(161, 78, 44, .5); }
#cookie-banner .cookie-accept:hover { background: #b85835; }
#cookie-banner .cookie-weiger { background: transparent; color: var(--creme); border: 1.5px solid rgba(255, 255, 255, .45); font-weight: 600; }
#cookie-banner .cookie-weiger:hover { border-color: var(--creme); background: rgba(255, 255, 255, .08); }
#cookie-modal { position: fixed; inset: 0; z-index: 300; }
#cookie-modal[hidden] { display: none !important; }
.cookie-overlay { position: absolute; inset: 0; background: rgba(20, 16, 12, .55); }
.cookie-paneel { position: relative; max-width: 520px; margin: 7vh auto 0; background: #fff; color: var(--inkt);
    border-radius: 20px; padding: 30px 32px; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); max-height: 86vh; overflow-y: auto;
    animation: cookie-in .4s cubic-bezier(.2, .9, .3, 1) both; }
@media (prefers-reduced-motion: reduce) { .cookie-paneel { animation: none; } }
.cookie-x { position: absolute; top: 14px; right: 16px; background: none; border: none; font-size: 28px; line-height: 1;
    color: #8B8472; cursor: pointer; padding: 4px 8px; }
.cookie-x:hover { color: var(--inkt); }
.cookie-paneel h2 { font: 700 22px 'Fraunces', serif; margin: 0 0 8px; color: var(--inkt); }
.cookie-paneel #cm-intro { margin: 0 0 6px; font-size: 14px; color: #6F685C; }
.cookie-rij { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; padding: 18px 0; border-top: 1px solid #EFE9DD; }
.cookie-rij-tekst { flex: 1; }
.cookie-rij-tekst strong { display: block; font: 700 15px 'Plus Jakarta Sans'; margin-bottom: 3px; }
.cookie-rij-tekst p { margin: 0; font-size: 13px; line-height: 1.5; color: #6F685C; }
.cookie-toggle { position: relative; display: inline-flex; align-items: center; gap: 8px; flex: none; cursor: pointer; }
.cookie-toggle input { position: absolute; opacity: 0; width: 46px; height: 26px; margin: 0; cursor: pointer; }
.cookie-toggle input:disabled { cursor: default; }
.cookie-schuif { width: 46px; height: 26px; background: #cfc7ba; border-radius: 999px; position: relative; transition: background .2s; flex: none; }
.cookie-schuif::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .2s; }
.cookie-toggle input:checked + .cookie-schuif { background: #A14E2C; }
.cookie-toggle input:checked + .cookie-schuif::after { transform: translateX(20px); }
.cookie-toggle input:disabled + .cookie-schuif { opacity: .5; }
.cookie-toggle input:focus-visible + .cookie-schuif { outline: 3px solid #A14E2C; outline-offset: 2px; }
.cookie-toggle-tekst { font-size: 12px; color: #8B8472; font-weight: 600; }
.cookie-modal-knoppen { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; flex-wrap: wrap; }
.cookie-modal-knoppen .btn { min-height: 46px; }

/* Berekend prijsvoordeel (voordeelsets: oude_prijs − prijs) */
.prijs-voordeel { display: inline-block; margin: 4px 0 0; font: 700 14px 'Plus Jakarta Sans'; color: #1E7A46; background: #E7F5EC; padding: 5px 13px; border-radius: 999px; }

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; }
    .laadscherm { display: none !important; }
}

/* ── Paginering (shop) ── */
.paginering { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 10px; margin: 16px 0 8px; }
.paginering .pag-nummers { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.pag-knop, .pag-nr { font: 600 13px 'Plus Jakarta Sans'; border-radius: 999px;
    border: 1.5px solid var(--rand); color: var(--inkt-zacht);
    padding: 10px 16px; min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all .25s var(--vloei); }
.pag-knop:hover, .pag-nr:hover { border-color: var(--inkt); color: var(--inkt); transform: translateY(-2px); }
.pag-nr.actief { background: var(--inkt); color: var(--creme); border-color: var(--inkt); cursor: default; }
.pag-ellips { padding: 10px 4px; color: var(--grijs); display: inline-flex; align-items: flex-end; }
.pag-telling { flex-basis: 100%; text-align: center; color: var(--grijs);
    font: 500 12.5px 'Plus Jakarta Sans'; letter-spacing: .3px; margin-top: 6px; }
@media (max-width: 560px) { .pag-knop, .pag-nr { padding: 9px 13px; min-width: 40px; min-height: 40px; } }

/* Uitlegtekst onder het productraster op categoriepagina's */
.categorie-tekst { max-width: 68ch; margin: 56px auto 0; padding-top: 32px;
    border-top: 1px solid var(--rand); color: var(--inkt-zacht); }
.categorie-tekst h2 { font: 500 clamp(20px, 2.4vw, 26px)/1.25 'Fraunces', Georgia, serif;
    color: var(--inkt); margin: 28px 0 10px; }
.categorie-tekst h2:first-child { margin-top: 0; }
.categorie-tekst h3 { font: 600 16px 'Plus Jakarta Sans'; color: var(--inkt); margin: 22px 0 8px; }
.categorie-tekst p { margin: 0 0 14px; line-height: 1.75; }
.categorie-tekst ul { margin: 0 0 16px; padding-left: 20px; }
.categorie-tekst li { margin-bottom: 7px; line-height: 1.65; }
.categorie-tekst strong { color: var(--inkt); font-weight: 600; }

/* Winkelbrede reviews onder de productreviews: gaan over de service, niet over
   dit artikel. Visueel iets rustiger zodat het onderscheid duidelijk is. */
.shop-reviews { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--rand); }
.shop-reviews h3 { font: 500 clamp(17px, 2vw, 21px)/1.3 'Fraunces', Georgia, serif;
    color: var(--inkt); margin: 0 0 6px; }
.shop-reviews-intro { color: var(--grijs); font-size: 14px; margin: 0 0 18px; max-width: 62ch; }
.shop-reviews .review { background: transparent; }
.shop-reviews .review-meta a { color: var(--grijs); text-decoration: underline; }
.shop-reviews .review-meta a:hover { color: var(--inkt); }

/* ── Zoeken in de koptekst ─────────────────────────────────────── */
.vph{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
     clip:rect(0 0 0 0);white-space:nowrap;border:0}
.zoek-form{display:flex;align-items:center;gap:0;border:1px solid var(--rand,#E7DECD);
     border-radius:999px;background:#fff;overflow:hidden;height:38px;transition:border-color .18s}
.zoek-form:focus-within{border-color:var(--terra,#C26A45)}
.zoek-form input[type=search]{border:0;outline:0;background:transparent;font:inherit;font-size:.92rem;
     padding:0 .35rem 0 .9rem;width:8.5rem;color:inherit;transition:width .22s}
.zoek-form input[type=search]:focus{width:12rem}
.zoek-form input[type=search]::-webkit-search-cancel-button{cursor:pointer}
.zoek-form button{border:0;background:transparent;cursor:pointer;color:var(--grijs,#6F685C);
     display:flex;align-items:center;padding:0 .7rem 0 .35rem;height:100%}
.zoek-form button:hover{color:var(--terra,#C26A45)}
.cat-knoppen{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
@media (max-width:860px){
    .zoek-form input[type=search]{width:6.5rem}
    .zoek-form input[type=search]:focus{width:8.5rem}
}
@media (max-width:520px){ .zoek-form{display:none} }

/* ── Kleurtegels met sfeerbeeld ───────────────────────────────────
   Het kleurvlak blijft de boodschap; de foto zit eronder en is bewust
   ingetogen. Productfoto's horen bij een product, niet bij een variant,
   dus het is geen foto ván die kleur en dat mag hij ook niet suggereren. */
.kleur-tegel { position: relative; overflow: hidden; isolation: isolate; }
.kleur-foto { position: absolute; inset: 0; z-index: -1; display: block;
    opacity: .3; transition: opacity .45s var(--vloei), transform .6s var(--vloei); }
.kleur-foto img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* Verloop van onder, zodat de naam leesbaar blijft over elke foto. */
.kleur-tegel::before { content: ''; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(to top, rgba(0,0,0,.34) 0%, rgba(0,0,0,.06) 52%, transparent 78%); }
.kleur-tegel.licht::before {
    background: linear-gradient(to top, rgba(255,255,255,.5) 0%, rgba(255,255,255,.12) 52%, transparent 78%); }
.kleur-tegel:hover .kleur-foto { opacity: .46; transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) { .kleur-tegel:hover .kleur-foto { transform: none; } }