/* Bijouxie · jewelry with love
   Kleuren en letters: zie :root. Pastelroze is de hoofdkleur, bessenrood voor tekst erop (goed leesbaar). */

@font-face { font-family: "Jost"; src: url("fonts/jost.woff2") format("woff2"); font-weight: 300 600; font-display: swap; }
@font-face { font-family: "Nunito Sans"; src: url("fonts/nunito-sans.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Dancing Script"; src: url("fonts/dancing-script.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
    --wit: #FFFFFF;
    --blush: #FDF1F5;      /* rustige vlakken */
    --pastel: #F8D3E0;     /* hoofdkleur: knoppen, labels */
    --pastel-hover: #F4C2D4;
    --roos: #E9A3BD;       /* hartjes, lijntjes */
    --bes: #7A1F45;        /* logo, prijzen, tekst op pastel */
    --bes-donker: #661939;
    --inkt: #2B1D22;
    --tekst: #4A3A40;
    --zacht: #8C7A80;
    --lijn: #F1E1E7;
    --goud: linear-gradient(135deg, #F0D68C, #C9A04A);
    --zilver: linear-gradient(135deg, #F2F3F5, #B9BDC3);
    --f-kop: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
    --f-tekst: "Nunito Sans", "Segoe UI", system-ui, sans-serif;
    --f-hand: "Dancing Script", "Brush Script MT", cursive;
    --breed: 1160px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--wit); color: var(--inkt); font: 400 16px/1.65 var(--f-tekst); }
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--f-kop); font-weight: 300; letter-spacing: .02em; line-height: 1.15; margin: 0; text-wrap: balance; }
p { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--bes); outline-offset: 2px; }
.in { width: 100%; max-width: var(--breed); margin: 0 auto; padding-inline: max(18px, env(safe-area-inset-left)); }
@media (min-width: 760px) { .in { padding-inline: 40px; } }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Kop ---------- */
.aankondiging { background: var(--pastel); color: var(--bes); font: 500 12px/1.4 var(--f-kop); letter-spacing: .08em; text-align: center; padding: 8px 14px; }
.kop { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.97); border-bottom: 1px solid var(--lijn); backdrop-filter: blur(6px); }
.kop .rij { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; padding-block: 10px; }
.logo { justify-self: center; display: grid; justify-items: center; text-decoration: none; color: var(--bes); }
.logo img { width: 150px; height: auto; }
.logo .sub { font: 500 9px var(--f-kop); letter-spacing: .32em; color: var(--inkt); margin-top: 4px; }
.lijntje { display: flex; align-items: center; gap: 8px; width: 120px; color: var(--roos); margin-top: 3px; }
.lijntje::before, .lijntje::after { content: ""; height: 1px; background: var(--roos); flex: 1; }
.lijntje svg { width: 10px; height: 10px; flex: none; }
.ico { width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; color: var(--bes); cursor: pointer; border-radius: 50%; text-decoration: none; }
.ico:hover { background: var(--blush); }
.ico svg { width: 21px; height: 21px; }
.menu { display: none; justify-content: center; gap: 28px; padding-bottom: 12px; font: 400 12.5px var(--f-kop); letter-spacing: .14em; text-transform: uppercase; }
.menu a { text-decoration: none; padding: 4px 0; border-bottom: 1.5px solid transparent; }
.menu a:hover, .menu a[aria-current="page"] { border-bottom-color: var(--roos); color: var(--bes); }
@media (min-width: 900px) {
    .menu { display: flex; }
    .menuknop { visibility: hidden; }
    .logo img { width: 190px; }
}
.lade { position: fixed; inset: 0; z-index: 50; background: rgba(43,29,34,.3); display: flex; }
.lade-paneel { background: var(--wit); width: 84%; max-width: 340px; height: 100%; overflow-y: auto; padding: 20px 22px calc(20px + env(safe-area-inset-bottom)); display: grid; align-content: start; gap: 2px; }
.lade-paneel .boven { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.lade-paneel .boven img { width: 120px; }
.lade-paneel a { font: 400 15px var(--f-kop); letter-spacing: .12em; text-transform: uppercase; padding: 13px 4px; border-bottom: 1px solid var(--lijn); text-decoration: none; }
.lade-paneel a[aria-current="page"] { color: var(--bes); }

/* ---------- Knoppen, labels, prijzen ---------- */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--pastel); color: var(--bes); border: 0; border-radius: 999px; padding: 13px 24px; font: 500 12px/1.2 var(--f-kop); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; text-decoration: none; }
.knop:hover { background: var(--pastel-hover); }
.knop.donker { background: var(--bes); color: var(--wit); }
.knop.donker:hover { background: var(--bes-donker); }
.knop.rand { background: var(--wit); border: 1.5px solid var(--pastel); padding: 11px 22px; }
.knop.rand:hover { border-color: var(--roos); }
.knop svg { width: 17px; height: 17px; }
.label { font: 500 9.5px/1.3 var(--f-kop); letter-spacing: .14em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; background: var(--pastel); color: var(--bes); }
.label.sale { background: var(--bes); color: var(--wit); }
.label.hand { background: var(--wit); border: 1px solid var(--pastel); }
.prijs { font: 500 14px var(--f-kop); color: var(--bes); display: flex; gap: 8px; justify-content: center; align-items: baseline; flex-wrap: wrap; }
.prijs s { color: var(--zacht); font-weight: 400; font-size: 12.5px; }
.bollen { display: flex; gap: 6px; justify-content: center; }
.bollen i { width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--wit); box-shadow: 0 0 0 1px var(--lijn); }
.bollen .goud, .bol.goud { background: var(--goud); }
.bollen .zilver, .bol.zilver { background: var(--zilver); }
.hand { font-family: var(--f-hand); font-weight: 600; color: var(--bes); font-size: 28px; line-height: 1.1; }

/* ---------- Blokken ---------- */
.blok { padding-block: 52px; }
.blok.blush { background: var(--blush); }
.blok-kop { text-align: center; display: grid; gap: 6px; margin-bottom: 26px; }
.blok-kop h2 { font-size: 28px; }
.blok-kop p { color: var(--zacht); font-size: 14.5px; }
.midden { display: flex; justify-content: center; margin-top: 28px; }
.paginatitel { padding-block: 40px 10px; text-align: center; display: grid; gap: 8px; }
.paginatitel h1 { font-size: 34px; }
.paginatitel p { color: var(--zacht); max-width: 56ch; margin-inline: auto; }
.smal { max-width: 760px; margin-inline: auto; }
.tekstblok { display: grid; gap: 14px; }
.tekstblok p { color: var(--tekst); }

/* Hero */
.hero { position: relative; min-height: 440px; display: grid; align-items: end; background: var(--blush); overflow: hidden; }
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%; }
.hero-tekst { position: relative; padding: 30px 22px 34px; display: grid; gap: 12px; justify-items: start; color: var(--wit); background: linear-gradient(0deg, rgba(43,29,34,.55), rgba(43,29,34,0)); }
.hero-tekst .hand { color: var(--wit); font-size: 32px; }
.hero-tekst h1 { font-size: 32px; max-width: 16ch; color: var(--wit); }
@media (min-width: 760px) {
    .hero { min-height: 580px; }
    .hero-tekst { padding: 64px; background: linear-gradient(90deg, rgba(43,29,34,.5), rgba(43,29,34,0) 70%); }
    .hero-tekst h1 { font-size: 46px; }
}

/* Pluspunten */
.plus { border-bottom: 1px solid var(--lijn); }
.plus .in { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 10px; padding-block: 24px; }
@media (min-width: 760px) { .plus .in { grid-template-columns: repeat(4, 1fr); } }
.plus-item { display: grid; justify-items: center; text-align: center; gap: 2px; }
.plus-item svg { width: 26px; height: 26px; color: var(--bes); margin-bottom: 6px; }
.plus-item h3 { font: 500 11px var(--f-kop); letter-spacing: .16em; text-transform: uppercase; }
.plus-item p { font-size: 13px; color: var(--zacht); }

/* Categorieën op de homepage */
.cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (min-width: 760px) { .cats { grid-template-columns: repeat(6, 1fr); } }
.cat-rond { display: grid; gap: 8px; justify-items: center; min-width: 0; overflow-wrap: anywhere; text-decoration: none; font: 400 11px/1.3 var(--f-kop); letter-spacing: .08em; text-transform: uppercase; text-align: center; }
@media (min-width: 760px) { .cat-rond { font-size: 11.5px; letter-spacing: .14em; } }
.cat-rond span:first-child { width: 100%; aspect-ratio: 1; border-radius: 50%; background: var(--blush) center/cover; border: 3px solid var(--wit); box-shadow: 0 0 0 1px var(--lijn); transition: box-shadow .2s; }
.cat-rond:hover span:first-child { box-shadow: 0 0 0 2px var(--roos); }

/* Productraster */
.raster { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 12px; }
@media (min-width: 760px) { .raster { grid-template-columns: repeat(4, 1fr); gap: 32px 22px; } }
.tegel { display: grid; gap: 6px; min-width: 0; overflow-wrap: anywhere; text-align: center; text-decoration: none; cursor: pointer; align-content: start; }
.tegel-foto { aspect-ratio: 1; background: #FAF7F8; border-radius: 4px; position: relative; overflow: hidden; }
.tegel-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.tegel:hover .tegel-foto img { transform: scale(1.03); }
.tegel-foto .geen { display: grid; place-items: center; height: 100%; color: var(--roos); font: 400 12px var(--f-kop); letter-spacing: .1em; }
.tegel-labels { position: absolute; top: 8px; left: 8px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.tegel-op { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); background: rgba(140,122,128,.88); color: var(--wit); font: 500 10px var(--f-kop); letter-spacing: .16em; text-transform: uppercase; padding: 5px 14px; border-radius: 999px; white-space: nowrap; }
.tegel.op .tegel-foto img { opacity: .72; }
.tegel-naam { font: 400 13.5px/1.35 var(--f-kop); letter-spacing: .03em; margin-top: 4px; }
.item.is-verborgen, .item.is-weg { display: none; }

/* Collectie: filters */
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 14px 2px 8px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
@media (min-width: 760px) { .chips { flex-wrap: wrap; justify-content: center; overflow: visible; } }
.chip { flex: none; font: 400 11.5px var(--f-kop); letter-spacing: .12em; text-transform: uppercase; border: 1px solid var(--lijn); background: var(--wit); padding: 8px 15px; border-radius: 999px; cursor: pointer; text-decoration: none; }
.chip.aan { background: var(--pastel); border-color: var(--pastel); color: var(--bes); }
.filterrij { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; border-block: 1px solid var(--lijn); padding-block: 8px; margin: 10px 0 24px; font-size: 13px; color: var(--zacht); }
.metaal { display: flex; gap: 6px; align-items: center; }
.metaal button { display: flex; gap: 6px; align-items: center; background: none; border: 1px solid transparent; border-radius: 999px; padding: 5px 11px; font: 400 12.5px var(--f-kop); cursor: pointer; }
.metaal button.aan { border-color: var(--roos); color: var(--bes); }
.bol { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.leeg-melding { text-align: center; padding: 40px 10px 60px; color: var(--zacht); }
.custom-band { display: grid; gap: 12px; align-items: center; background: var(--blush); border-radius: 8px; padding: 18px 20px; margin: 6px 0 4px; }
@media (min-width: 760px) { .custom-band { grid-template-columns: 1fr auto; } }
.custom-band p { color: var(--tekst); font-size: 14.5px; }

/* Productdetail (venster over de collectie) */
.detail { position: fixed; inset: 0; z-index: 60; background: rgba(43,29,34,.35); display: flex; justify-content: center; align-items: flex-start; overflow-y: auto; padding: 0; }
.detail-paneel { background: var(--wit); width: 100%; max-width: 1040px; min-height: 100%; position: relative; padding: 18px 18px 40px; }
@media (min-width: 760px) { .detail { padding: 40px 20px; } .detail-paneel { min-height: 0; border-radius: 10px; padding: 34px 40px 44px; } }
.detail-sluit { position: absolute; top: 10px; right: 10px; z-index: 2; background: var(--wit); }
.pdp { display: grid; gap: 24px; }
@media (min-width: 760px) { .pdp { grid-template-columns: 1.1fr 1fr; gap: 46px; align-items: start; } }
.galerij { display: grid; gap: 8px; }
.galerij-groot { aspect-ratio: 1; background: #FAF7F8; border-radius: 4px; overflow: hidden; position: relative; }
.galerij-groot img { width: 100%; height: 100%; object-fit: contain; }
.galerij-klein { display: flex; gap: 8px; flex-wrap: wrap; }
.galerij-klein button { width: 66px; height: 66px; border: 1px solid var(--lijn); border-radius: 4px; padding: 0; overflow: hidden; cursor: pointer; background: #FAF7F8; }
.galerij-klein button img { width: 100%; height: 100%; object-fit: cover; }
.galerij-klein button[aria-current="true"] { border-color: var(--bes); }
.info { display: grid; gap: 15px; align-content: start; }
.info h2 { font-size: 30px; }
.info .prijs { justify-content: flex-start; font-size: 20px; }
.info .prijs s { font-size: 15px; }
.info .labels { display: flex; gap: 6px; flex-wrap: wrap; }
.info .omschrijving { color: var(--tekst); white-space: pre-line; }
.keuzes { display: grid; gap: 6px; }
.keuzes > span { font: 500 11px var(--f-kop); letter-spacing: .16em; text-transform: uppercase; color: var(--zacht); }
.keuzes div { display: flex; gap: 8px; flex-wrap: wrap; }
.keuze { display: inline-flex; gap: 7px; align-items: center; border: 1px solid var(--lijn); background: var(--wit); border-radius: 999px; padding: 7px 14px; font: 400 13px var(--f-kop); cursor: pointer; }
.keuze[aria-pressed="true"] { border-color: var(--bes); color: var(--bes); box-shadow: 0 0 0 1px var(--bes) inset; }
.bestelvak { display: grid; gap: 8px; background: var(--blush); border-radius: 8px; padding: 16px; }
.bestelvak .knop { width: 100%; }
.bestelvak small { color: var(--zacht); font-size: 12.5px; text-align: center; }
.specs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--lijn); }
.specs li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--lijn); font-size: 14px; }
.specs li span:first-child { color: var(--zacht); }
.voordelen { display: grid; gap: 6px; font-size: 13.5px; color: var(--tekst); }
.voordelen div { display: flex; gap: 8px; align-items: center; }
.voordelen svg { width: 15px; height: 15px; color: var(--roos); flex: none; }
.ook { margin-top: 44px; }
.ook h3 { text-align: center; font-size: 24px; margin-bottom: 22px; }

/* Handgemaakt / foto + tekst */
.duo { display: grid; gap: 24px; align-items: center; }
@media (min-width: 760px) { .duo { grid-template-columns: 1fr 1fr; gap: 54px; } }
.foto-slot { position: relative; border-radius: 4px; overflow: hidden; background: var(--blush); aspect-ratio: 4/3; }
.foto-slot img { width: 100%; height: 100%; object-fit: cover; }
.foto-slot.staand { aspect-ratio: 4/5; }
.foto-slot .volgt { position: absolute; inset: 0; display: none; place-items: center; text-align: center; color: var(--bes); font: 400 13px var(--f-kop); letter-spacing: .1em; border: 1.5px dashed var(--roos); border-radius: 4px; }
.duo-tekst { display: grid; gap: 14px; justify-items: start; }
.duo-tekst h2 { font-size: 28px; }
.duo-tekst p { color: var(--tekst); }

/* Reviews */
.reviews { display: grid; gap: 16px; }
@media (min-width: 760px) { .reviews { grid-template-columns: repeat(3, 1fr); gap: 22px; } }
.review { background: var(--wit); border-radius: 6px; padding: 22px; display: grid; gap: 8px; text-align: center; align-content: start; border: 1px solid var(--lijn); }
.blush .review { border-color: transparent; }
.review .sterren { color: var(--roos); letter-spacing: 3px; font-size: 14px; }
.review p { font-size: 15px; color: var(--tekst); white-space: pre-line; }
.review b { font: 500 11px var(--f-kop); letter-spacing: .16em; text-transform: uppercase; color: var(--bes); }

/* Markten */
.markten { display: grid; gap: 10px; max-width: 680px; margin-inline: auto; }
.markt { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; border: 1px solid var(--lijn); border-radius: 6px; padding: 12px; background: var(--wit); }
.markt .datum { display: grid; justify-items: center; background: var(--blush); border-radius: 6px; padding: 7px 0; color: var(--bes); font-family: var(--f-kop); }
.markt .datum b { font-size: 23px; font-weight: 400; line-height: 1; }
.markt .datum span { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.markt strong { font: 500 14.5px var(--f-kop); display: block; }
.markt small { color: var(--zacht); font-size: 13px; display: block; }
.markt a { color: var(--bes); font-size: 13px; }
.markt.is-voorbij { display: none; }

/* Instagram-strook */
.insta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
@media (min-width: 760px) { .insta { grid-template-columns: repeat(6, 1fr); } }
.insta .foto-slot { aspect-ratio: 1; border-radius: 0; }

/* Stappen, verzending, vragen */
.stappen { display: grid; gap: 16px; counter-reset: stap; }
.stap { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; }
.stap::before { counter-increment: stap; content: counter(stap); width: 40px; height: 40px; border-radius: 50%; background: var(--pastel); color: var(--bes); display: grid; place-items: center; font: 500 16px var(--f-kop); }
.stap h3 { font: 500 15.5px var(--f-kop); letter-spacing: .02em; }
.stap p { color: var(--tekst); font-size: 14.5px; }
.verzend { display: grid; gap: 10px; }
@media (min-width: 600px) { .verzend { grid-template-columns: 1fr 1fr; } }
.verzend-optie { border: 1px solid var(--lijn); border-radius: 8px; padding: 16px; display: grid; gap: 4px; align-content: start; }
.verzend-optie h3 { font: 500 15px var(--f-kop); }
.verzend-optie .bedrag { font: 500 18px var(--f-kop); color: var(--bes); }
.verzend-optie p { color: var(--zacht); font-size: 13.5px; }
.tabel { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--lijn); }
.tabel li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--lijn); font-size: 14.5px; }
.let-op { background: var(--blush); border-radius: 8px; padding: 14px 16px; font-size: 14px; color: var(--tekst); }
details.vraag { border-bottom: 1px solid var(--lijn); }
details.vraag summary { cursor: pointer; list-style: none; padding: 15px 32px 15px 0; font: 400 16px var(--f-kop); position: relative; }
details.vraag summary::-webkit-details-marker { display: none; }
details.vraag summary::after { content: "+"; position: absolute; right: 4px; top: 9px; font-size: 24px; color: var(--roos); font-weight: 300; }
details.vraag[open] summary::after { content: "\2013"; }
details.vraag p { padding: 0 0 15px; color: var(--tekst); font-size: 15px; }

/* Cadeau-ideeën */
.ideeen { display: grid; gap: 22px; }
@media (min-width: 760px) { .ideeen { grid-template-columns: repeat(3, 1fr); } }
.idee { display: grid; gap: 10px; align-content: start; }
.idee .foto-slot { aspect-ratio: 4/3; }
.idee h3 { font-size: 19px; font-weight: 400; }
.idee p { color: var(--tekst); font-size: 14.5px; }
.idee a { color: var(--bes); font: 500 12px var(--f-kop); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }

/* Contact */
.contactlijst { display: grid; gap: 12px; }
.contactrij { display: grid; grid-template-columns: 42px 1fr; gap: 14px; align-items: center; border: 1px solid var(--lijn); border-radius: 8px; padding: 12px 14px; text-decoration: none; }
.contactrij .rond { width: 42px; height: 42px; border-radius: 50%; background: var(--blush); display: grid; place-items: center; color: var(--bes); }
.contactrij svg { width: 19px; height: 19px; }
.contactrij h3 { font: 500 14.5px var(--f-kop); }
.contactrij p { color: var(--zacht); font-size: 14px; }

/* Custom-formulier */
.custom { display: grid; gap: 28px; padding-bottom: 56px; }
@media (min-width: 860px) { .custom { grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: start; } }
.cform { display: grid; gap: 20px; background: var(--blush); border-radius: 8px; padding: 22px; }
.veld { display: grid; gap: 7px; border: 0; margin: 0; padding: 0; min-width: 0; }
.veld-naam { font: 500 11px var(--f-kop); letter-spacing: .16em; text-transform: uppercase; color: var(--bes); padding: 0; }
.veld-naam em { font-style: normal; text-transform: none; letter-spacing: 0; color: var(--zacht); font-weight: 400; }
.opties { display: flex; gap: 8px; flex-wrap: wrap; }
.optie { position: relative; }
.optie input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.optie span { display: inline-flex; gap: 7px; align-items: center; border: 1px solid var(--lijn); background: var(--wit); border-radius: 999px; padding: 8px 15px; font: 400 13.5px var(--f-kop); cursor: pointer; }
.optie input:checked + span { border-color: var(--bes); color: var(--bes); box-shadow: 0 0 0 1px var(--bes) inset; }
.optie input:focus-visible + span { outline: 2px solid var(--bes); outline-offset: 2px; }
.cform input[type=text], .cform textarea { width: 100%; font: 400 16px var(--f-tekst); border: 1px solid var(--lijn); border-radius: 8px; padding: 11px 12px; background: var(--wit); color: var(--inkt); resize: vertical; }
.cform input[type=text]:focus, .cform textarea:focus { outline: none; border-color: var(--bes); }
.uitleg-klein { font-size: 12.5px; color: var(--zacht); }
.fotovak { display: flex; gap: 10px; align-items: center; border: 1.5px dashed var(--roos); border-radius: 8px; padding: 14px; background: var(--wit); cursor: pointer; color: var(--bes); font-size: 14.5px; }
.fotovak input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fotovak:focus-within { outline: 2px solid var(--bes); outline-offset: 2px; }
.fotovak svg { width: 22px; height: 22px; flex: none; }
.fotokeuze { display: grid; grid-template-columns: 72px 1fr; gap: 12px; align-items: center; background: var(--wit); border-radius: 8px; padding: 10px; }
.fotokeuze img { width: 72px; height: 72px; object-fit: cover; border-radius: 6px; }
.fotokeuze b { font: 500 13px var(--f-kop); display: block; overflow-wrap: anywhere; }
.fotokeuze small { display: block; color: var(--zacht); font-size: 12.5px; }
.linkknop { background: none; border: 0; padding: 0; margin-top: 4px; color: var(--bes); font: 500 12.5px var(--f-kop); text-decoration: underline; cursor: pointer; }
.fout { color: #A3392E; font-size: 14px; }
.zo-werkt-het { display: grid; gap: 18px; align-content: start; }
.bericht { display: grid; gap: 6px; }
.bericht pre { margin: 0; white-space: pre-wrap; font: 14px/1.5 var(--f-tekst); background: var(--wit); border: 1px solid var(--lijn); border-radius: 8px; padding: 12px 14px; }

/* Melding na kopiëren */
.toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 90; background: var(--inkt); color: var(--wit); border-radius: 12px; padding: 13px 18px; font-size: 14px; line-height: 1.45; width: max-content; max-width: min(92vw, 460px); box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.toast b { color: var(--pastel); }

/* ---------- Voet ---------- */
.voet { background: var(--blush); padding-block: 40px 28px; }
.voet .kolommen { display: grid; gap: 24px; }
@media (min-width: 760px) { .voet .kolommen { grid-template-columns: 1.3fr 1fr 1fr; } }
.voet img.voetlogo { width: 150px; height: auto; }
.voet h2 { font: 500 11px var(--f-kop); letter-spacing: .18em; text-transform: uppercase; color: var(--bes); margin-bottom: 8px; }
.voet ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 14.5px; }
.voet ul a { text-decoration: none; }
.voet ul a:hover { color: var(--bes); }
.voet .over { font-size: 14px; color: var(--tekst); max-width: 34ch; margin-top: 8px; }
.socials { display: flex; gap: 8px; margin-top: 12px; }
.socials a { width: 38px; height: 38px; border-radius: 50%; background: var(--wit); display: grid; place-items: center; color: var(--bes); }
.socials svg { width: 18px; height: 18px; }
.klein-print { margin-top: 28px; font-size: 12px; color: var(--zacht); text-align: center; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }