/* Atelier Basiel, homepage. Huisstijlvariabelen bovenaan, daarna per blok. */

:root {
  --ab-groen: #12211D;
  --ab-groen-vlak: #22362F;
  --ab-groen-lijn: #2C423B;
  --ab-creme: #F6F0E4;
  --ab-wit: #FFFFFF;
  --ab-zand: #E9E4DA;
  --ab-goud-licht: #D4B47A;
  --ab-goud: #B08A45;
  --ab-brons: #7A5A22;
  --ab-grijs: #5B5346;
  --ab-grijs-op-donker: #C9C2B4;
  --ab-lijn: #D9CDB8;
  --ab-lijn-op-wit: #E2D8C6;
  --ab-rand-veld: #8C8273;
  --ab-font-titel: 'Cormorant Garamond', Georgia, serif;
  --ab-font-tekst: 'Outfit', system-ui, sans-serif;
  --ab-radius-veld: 8px;
  --ab-radius-kaart: 12px;
  --ab-radius-knop: 999px;
  --ab-breedte: 1280px;
}

/* Basis */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--ab-font-tekst); font-size: 16px; line-height: 1.6; color: var(--ab-groen); background: var(--ab-creme); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
a { color: var(--ab-brons); }
a:hover { color: var(--ab-groen); }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--ab-goud); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wrap { max-width: var(--ab-breedte); margin: 0 auto; padding-left: 24px; padding-right: 24px; }

/* Typografie */
.titel { font-family: var(--ab-font-titel); font-weight: 600; line-height: 1.04; text-wrap: balance; }
.titel em { font-style: italic; font-weight: 500; }
.titel--xl { font-size: clamp(44px, 5.4vw, 80px); line-height: 1; }
.titel--l { font-size: clamp(38px, 4.2vw, 58px); }
.titel--m { font-size: clamp(34px, 3.6vw, 52px); }
.titel--s { font-size: clamp(30px, 2.8vw, 40px); }
.label { font-size: 12px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ab-brons); }
.tekst { font-size: 17px; line-height: 1.65; color: var(--ab-grijs); }
.nummer { font-family: var(--ab-font-titel); font-style: italic; font-weight: 500; color: var(--ab-brons); }
.link { font-size: 15px; font-weight: 600; }
.ornament { width: 44px; height: 22px; }

/* Knoppen */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 30px; border: 0; border-radius: var(--ab-radius-knop); font-size: 16px; font-weight: 600; text-decoration: none; }
.knop--groen { background: var(--ab-groen); color: var(--ab-creme); }
.knop--groen:hover { background: #1F3E34; color: var(--ab-creme); }
.knop--goud { background: var(--ab-goud-licht); color: var(--ab-groen); }
.knop--goud:hover { background: #E0C594; color: var(--ab-groen); }
.knop--lijn { background: transparent; border: 1.5px solid var(--ab-groen); color: var(--ab-groen); }
.knop--klein { min-height: 44px; padding: 0 16px; font-size: 14px; }
.chip { display: inline-flex; align-items: center; min-height: 46px; padding: 0 20px; border: 1px solid var(--ab-lijn); border-radius: var(--ab-radius-knop); background: var(--ab-wit); color: var(--ab-groen); font-size: 15px; font-weight: 500; text-decoration: none; }
.chip:hover { border-color: var(--ab-groen); }

/* Fotoplaatsen: vervang elke .foto door een echte <img> of <picture> */
.foto { display: flex; align-items: center; justify-content: center; padding: 24px; border-radius: var(--ab-radius-kaart); background: var(--ab-zand); color: var(--ab-grijs); text-align: center; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.foto img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

/* Meldingsbalk */
.topbalk { background: var(--ab-groen); color: var(--ab-creme); font-size: 13px; font-weight: 500; }
.topbalk__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 28px; padding-top: 9px; padding-bottom: 9px; }
.topbalk__groep { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 26px; }
.topbalk__score { display: flex; align-items: center; gap: 7px; }
.topbalk a { color: var(--ab-goud-licht); }

/* Header */
.kop { background: var(--ab-creme); }
.kop__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 32px; padding-top: 18px; padding-bottom: 16px; }
.logo { display: flex; align-items: center; gap: 15px; color: var(--ab-groen); text-decoration: none; }
.logo__merk { width: 28px; height: 37px; margin-top: 5px; }
.logo__tekst { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.logo__naam { font-family: var(--ab-font-titel); font-weight: 600; font-size: 32px; line-height: 1; }
.logo__slogan { font-size: 7px; font-weight: 600; line-height: 1; letter-spacing: 0.26em; padding-left: 0.26em; color: var(--ab-brons); }
.logo--donker { color: var(--ab-creme); }
.logo--donker .logo__slogan { color: var(--ab-goud-licht); }
.zoek { flex: 1 1 320px; max-width: 480px; min-width: 0; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 6px 0 18px; border: 1.5px solid var(--ab-rand-veld); border-radius: var(--ab-radius-knop); background: var(--ab-wit); }
.zoek input { flex: 1 1 0; min-width: 0; height: 100%; border: 0; background: transparent; font: inherit; font-size: 15px; color: var(--ab-groen); }
.zoek input:focus { outline: none; }
.zoek:focus-within { outline: 2px solid var(--ab-goud); outline-offset: 2px; }
.kop__acties { display: flex; align-items: center; gap: 4px; }
.kop__icoon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--ab-groen); }
.kop__mand { margin-left: 8px; min-height: 44px; padding: 0 18px; font-size: 15px; }
.menu { border-top: 1px solid var(--ab-lijn-op-wit); }
.menu__in { display: flex; align-items: center; gap: 28px; overflow-x: auto; white-space: nowrap; font-size: 15px; font-weight: 500; }
.menu a { display: flex; align-items: center; gap: 6px; min-height: 48px; color: var(--ab-groen); text-decoration: none; }
.menu a:hover { color: var(--ab-brons); }
.menu a.menu__accent { color: var(--ab-brons); font-weight: 600; }
.menu a.menu__maat { margin-left: auto; color: var(--ab-brons); font-weight: 600; text-decoration: underline; }

/* Slider */
.slider { background: var(--ab-groen); color: var(--ab-creme); }
.slide { display: none; flex-wrap: wrap; align-items: stretch; gap: 0 56px; }
.slide.is-actief { display: flex; }
.slide__tekst { flex: 1 1 420px; min-width: 0; padding: 64px 0 56px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 22px; }
.slide__label { padding: 7px 14px; border-radius: var(--ab-radius-knop); background: var(--ab-goud-licht); color: var(--ab-groen); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.5; }
.slide__label--trending { background: var(--ab-creme); }
.slide__intro { max-width: 500px; font-size: 18px; color: var(--ab-grijs-op-donker); }
.slide__prijs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.slide__prijs strong { font-size: 26px; font-weight: 600; }
.slide__prijs span { font-size: 15px; color: var(--ab-grijs-op-donker); }
.slide__acties { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.slide__acties .link { color: var(--ab-goud-licht); }
.slide__acties .knop { min-height: 54px; padding: 0 32px; }
.vinkjes { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 4px 0 0; padding: 0; list-style: none; font-size: 14px; color: var(--ab-grijs-op-donker); }
.vinkjes li { display: flex; align-items: center; gap: 7px; }
.vinkjes svg { color: var(--ab-goud-licht); }
.slide__beeld { flex: 1.25 1 480px; min-width: 0; position: relative; margin: 40px 0; min-height: 520px; }
.slide__beeld .foto { position: absolute; inset: 0; background: var(--ab-groen-vlak); color: var(--ab-grijs-op-donker); font-size: 13px; }
.slider__pijlen { position: absolute; right: 16px; bottom: 16px; display: flex; gap: 10px; }
.slider__pijl { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: var(--ab-wit); color: var(--ab-groen); }
.slider__balk { border-top: 1px solid var(--ab-groen-lijn); }
.slider__tabs { display: flex; align-items: stretch; gap: 20px; overflow-x: auto; }
.slider__tab { flex: 1 0 170px; min-height: 76px; padding: 14px 0 16px; border: 0; border-top: 3px solid transparent; background: transparent; color: var(--ab-grijs-op-donker); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; text-align: left; }
.slider__tab small { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.slider__tab span { font-size: 16px; font-weight: 500; white-space: nowrap; }
.slider__tab.is-actief { border-top-color: var(--ab-goud-licht); color: var(--ab-goud-licht); }
.slider__pauze { flex: 0 0 auto; align-self: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--ab-groen-lijn); border-radius: var(--ab-radius-knop); background: transparent; color: var(--ab-grijs-op-donker); font-size: 13px; font-weight: 500; white-space: nowrap; }

/* Zekerheden */
.zekerheden { border-bottom: 1px solid var(--ab-lijn); }
.zekerheden__in { display: flex; flex-wrap: wrap; gap: 16px 32px; padding-top: 24px; padding-bottom: 24px; margin-top: 0; margin-bottom: 0; list-style: none; font-size: 15px; line-height: 1.4; }
.zekerheden li { flex: 1 1 230px; min-width: 0; display: flex; align-items: center; gap: 12px; }
.zekerheden svg { flex: 0 0 auto; color: var(--ab-brons); }
.zekerheden strong { display: block; font-weight: 600; }
.zekerheden span { font-size: 13px; color: var(--ab-grijs); }

/* Intro en cadeauzoeker */
.intro { padding-top: 96px; display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.intro .titel { max-width: 900px; }
.intro .tekst { max-width: 600px; }
.intro__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 980px; margin: 6px 0 0; padding: 0; list-style: none; }

/* Basiels favorieten */
.favorieten { padding-top: 96px; padding-bottom: 112px; display: flex; flex-direction: column; gap: 36px; }
.blokkop { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.blokkop--lijn { border-bottom: 1px solid var(--ab-lijn); padding-bottom: 22px; }
.blokkop__titel { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 20px; }
.blokkop__sub { font-family: var(--ab-font-titel); font-style: italic; font-weight: 500; font-size: 22px; color: var(--ab-brons); }
.favorieten__raster { display: flex; flex-wrap: wrap; align-items: stretch; gap: 28px; }
.uitgelicht { flex: 1.1 1 440px; min-width: 0; position: relative; min-height: 620px; }
.uitgelicht > .foto { position: absolute; inset: 0; padding-bottom: 220px; font-size: 13px; }
.uitgelicht__kaart { position: absolute; left: 20px; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 10px; padding: 22px 24px; border-radius: var(--ab-radius-kaart); background: var(--ab-wit); }
.uitgelicht__kop, .product__kop { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.uitgelicht__kop .nummer { font-size: 20px; }
.product__label { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ab-brons); }
.uitgelicht__naam { font-family: var(--ab-font-titel); font-weight: 600; font-size: 36px; line-height: 1.05; }
.kleuren { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ab-grijs); }
.kleuren i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid transparent; }
.kleuren i.is-licht { border-color: var(--ab-rand-veld); }
.kleuren span { margin-left: 6px; }
.uitgelicht__voet { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
.uitgelicht__voet strong { font-size: 20px; font-weight: 600; }
.uitgelicht__voet .knop { min-height: 48px; padding: 0 24px; font-size: 15px; }
.producten { flex: 1 1 480px; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 28px; }
.product { min-width: 0; display: flex; flex-direction: column; gap: 12px; color: var(--ab-groen); text-decoration: none; }
.product .foto { aspect-ratio: 1 / 1; padding: 16px; }
.product__kop .nummer { font-size: 18px; }
.product__naam { font-family: var(--ab-font-titel); font-weight: 600; font-size: 26px; line-height: 1.1; }
.product__voet { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--ab-lijn); padding-top: 12px; }
.product__voet strong { font-size: 16px; font-weight: 600; }
.product__actie { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--ab-brons); }
.product:hover .product__naam { color: var(--ab-brons); }

/* Seizoen: boogvormen */
.seizoen { background: var(--ab-zand); }
.seizoen__in { padding-top: 104px; padding-bottom: 104px; display: flex; flex-direction: column; align-items: center; gap: 48px; }
.seizoen__kop { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.seizoen__kop .titel { max-width: 760px; }
.seizoen__kop .tekst { max-width: 540px; }
.bogen { width: 100%; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 32px 28px; }
.boog { flex: 1 1 240px; max-width: 330px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; color: var(--ab-groen); text-align: center; text-decoration: none; }
.boog .foto { width: 100%; height: 400px; border-radius: 999px 999px 12px 12px; background: var(--ab-creme); }
.boog--groot { flex: 1.15 1 260px; max-width: 380px; }
.boog--groot .foto { height: 500px; }
.boog__naam { font-family: var(--ab-font-titel); font-weight: 600; font-size: 26px; line-height: 1.1; }
.boog--groot .boog__naam { font-size: 30px; }
.boog__prijs { margin-top: 4px; font-size: 15px; color: var(--ab-grijs); }
.seizoen__voet { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.seizoen__datum { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; line-height: 1.5; }
.seizoen__datum svg { color: var(--ab-brons); }
.seizoen__acties { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 24px; }

/* Feestmomenten: typografische lijst */
.momenten { background: var(--ab-wit); }
.momenten__in { padding-top: 104px; padding-bottom: 104px; display: flex; flex-wrap: wrap; align-items: stretch; gap: 48px 72px; }
.momenten__tekst { flex: 1.25 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.momenten__kop { display: flex; flex-direction: column; gap: 10px; }
.momenten__lijst { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--ab-lijn-op-wit); }
.moment { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 22px; padding: 18px 0; border-top: 1px solid var(--ab-lijn-op-wit); color: var(--ab-groen); text-decoration: none; }
.moment .nummer { flex: 0 0 34px; font-size: 20px; }
.moment__naam { font-family: var(--ab-font-titel); font-weight: 600; font-size: 32px; line-height: 1.1; }
.moment__info { flex: 1 1 200px; min-width: 0; font-size: 15px; line-height: 1.4; color: var(--ab-grijs); }
.moment svg { flex: 0 0 auto; align-self: center; color: var(--ab-brons); transition: transform 0.2s; }
.moment:hover .moment__naam { color: var(--ab-brons); }
.moment:hover svg { transform: translateX(4px); }
.momenten__foto { flex: 1 1 380px; min-width: 0; min-height: 560px; font-size: 13px; }

/* Budget */
.budget { padding-top: 44px; padding-bottom: 44px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 32px; }
.budget__sub { font-size: 15px; color: var(--ab-grijs); }
.budget__chips { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; }
.budget__chips .chip { min-height: 52px; padding: 0 24px; font-size: 16px; font-weight: 600; }
.budget__chips .chip--groen { background: var(--ab-groen); border-color: var(--ab-groen); color: var(--ab-creme); }
.bijkoop { flex: 1 1 100%; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; padding: 22px 0; border-top: 1px solid var(--ab-lijn); border-bottom: 1px solid var(--ab-lijn); }
.bijkoop__titel { flex: 0 1 190px; font-family: var(--ab-font-titel); font-style: italic; font-weight: 500; font-size: 22px; line-height: 1.15; color: var(--ab-brons); }
.bijkoop__item { flex: 1 1 250px; min-width: 0; display: flex; align-items: center; gap: 14px; }
.bijkoop__item .foto { flex: 0 0 auto; width: 68px; height: 68px; padding: 0; border-radius: 8px; font-size: 10px; }
.bijkoop__item div { flex: 1 1 0; min-width: 0; line-height: 1.4; }
.bijkoop__item strong { display: block; font-weight: 600; }
.bijkoop__item span { font-size: 14px; color: var(--ab-grijs); }

/* Stappen: tijdlijn op groen */
.stappen { margin-top: 60px; background: var(--ab-groen); color: var(--ab-creme); }
.stappen__in { padding-top: 104px; padding-bottom: 104px; display: flex; flex-direction: column; align-items: center; gap: 56px; }
.stappen__kop { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.stappen .label { color: var(--ab-goud-licht); }
.stappen__lijst { width: 100%; display: flex; flex-wrap: wrap; gap: 40px 0; margin: 0; padding: 0; list-style: none; }
.stap { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.stap__lijn { display: flex; align-items: center; }
.stap__cijfer { flex: 0 0 auto; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--ab-goud-licht); border-radius: 50%; font-family: var(--ab-font-titel); font-style: italic; font-weight: 500; font-size: 30px; color: var(--ab-goud-licht); }
.stap__lijn::after { content: ''; flex: 1 1 0; height: 1px; background: var(--ab-goud-licht); }
.stap:last-child .stap__lijn::after { display: none; }
.stap:last-child .stap__cijfer { background: var(--ab-goud-licht); color: var(--ab-groen); }
.stap__tekst { padding-right: 40px; display: flex; flex-direction: column; gap: 10px; }
.stap h3 { font-family: var(--ab-font-titel); font-weight: 600; font-size: 30px; line-height: 1.1; }
.stap p { line-height: 1.65; color: var(--ab-grijs-op-donker); }

/* Pakket en extra's */
.samen { padding-top: 112px; padding-bottom: 112px; display: flex; flex-wrap: wrap; gap: 28px 56px; }
.pakket { flex: 1.5 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 26px; padding: 36px; border: 1px solid var(--ab-lijn-op-wit); border-radius: var(--ab-radius-kaart); background: var(--ab-wit); }
.pakket__kop { display: flex; flex-direction: column; gap: 8px; }
.pakket__kop p { color: var(--ab-grijs); }
.pakket__stukken { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.pakket__stuk { flex: 1 1 140px; min-width: 0; display: flex; flex-direction: column; gap: 10px; line-height: 1.4; }
.pakket__stuk .foto { aspect-ratio: 1 / 1; }
.pakket__stuk strong { display: block; font-size: 15px; font-weight: 600; }
.pakket__stuk span { font-size: 14px; color: var(--ab-grijs); }
.pakket__plus { padding-bottom: 44px; font-family: var(--ab-font-titel); font-size: 34px; line-height: 1; color: var(--ab-brons); }
.voortgang { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.voortgang__tekst { display: flex; justify-content: space-between; gap: 12px; }
.voortgang__tekst strong { font-weight: 600; }
.voortgang__tekst span { color: var(--ab-grijs); }
.voortgang__balk { height: 6px; border-radius: 999px; background: var(--ab-zand); overflow: hidden; }
.voortgang__balk i { display: block; height: 100%; border-radius: 999px; background: var(--ab-goud); }
.pakket__voet { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
.pakket__voet strong { font-size: 20px; font-weight: 600; }
.extras { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.extras .titel { margin-bottom: 22px; }
.extras__lijst { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--ab-lijn); }
.extra { display: flex; align-items: center; gap: 18px; padding: 22px 0; border-top: 1px solid var(--ab-lijn); color: var(--ab-groen); text-decoration: none; }
.extra svg { flex: 0 0 auto; color: var(--ab-brons); }
.extra strong { display: block; font-family: var(--ab-font-titel); font-weight: 600; font-size: 24px; line-height: 1.15; }
.extra span { display: block; margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--ab-grijs); }
.extra:hover strong { color: var(--ab-brons); }

/* Categorieën */
.categorieen { padding-bottom: 112px; display: flex; flex-wrap: wrap; align-items: stretch; gap: 32px 28px; }
.categorie { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 16px; color: var(--ab-groen); text-decoration: none; }
.categorie--breed { flex: 1.5 1 400px; }
.categorie .foto { flex: 1 1 auto; min-height: 440px; }
.categorie__tekst { display: flex; flex-direction: column; gap: 4px; }
.categorie__naam { font-family: var(--ab-font-titel); font-weight: 600; font-size: 36px; line-height: 1.05; }
.categorie__info { font-size: 15px; color: var(--ab-grijs); }
.categorie:hover .categorie__naam { color: var(--ab-brons); }
.ook { flex: 0.8 1 240px; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; }
.ook .label { margin-bottom: 14px; }
.ook ul { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--ab-lijn); }
.ook li { border-top: 1px solid var(--ab-lijn); }
.ook a { display: block; padding: 16px 0; color: var(--ab-groen); font-family: var(--ab-font-titel); font-weight: 600; font-size: 28px; line-height: 1.1; text-decoration: none; }
.ook a:hover { color: var(--ab-brons); }
.ook a.link { font-family: var(--ab-font-tekst); font-size: 15px; color: var(--ab-brons); text-decoration: underline; }

/* Relatiegeschenken en op maat */
.zakelijk { background: var(--ab-wit); }
.zakelijk__in { padding-top: 104px; padding-bottom: 104px; display: flex; flex-wrap: wrap; align-items: stretch; gap: 48px 72px; }
.zakelijk__foto { flex: 1 1 420px; min-width: 0; min-height: 520px; font-size: 13px; }
.zakelijk__tekst { flex: 1.1 1 460px; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 22px; }
.zakelijk__tekst .tekst { max-width: 540px; }
.regels { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--ab-lijn-op-wit); }
.regels li { display: flex; align-items: baseline; gap: 20px; padding: 16px 0; border-top: 1px solid var(--ab-lijn-op-wit); }
.regels .nummer { flex: 0 0 28px; font-size: 22px; }
.regels strong { font-weight: 600; }
.regels span { color: var(--ab-grijs); }
.zakelijk__acties { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 4px; }

/* Over het atelier */
.atelier { padding-top: 112px; padding-bottom: 112px; display: flex; flex-direction: column; align-items: center; gap: 44px; }
.atelier__kop { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.atelier__kop .tekst { max-width: 660px; font-size: 18px; line-height: 1.7; }
.atelier__video { width: 100%; position: relative; aspect-ratio: 21 / 9; min-height: 300px; font-size: 13px; }
.atelier__video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.atelier__badge { position: absolute; left: 18px; bottom: 18px; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px; border-radius: var(--ab-radius-knop); background: var(--ab-groen); color: var(--ab-creme); font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.atelier__punten { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 44px; margin: 0; padding: 0; list-style: none; font-size: 15px; font-weight: 500; }
.atelier__punten li { display: flex; align-items: center; gap: 8px; }
.atelier__punten svg { color: var(--ab-brons); }

/* Reviews */
.reviews { background: var(--ab-wit); }
.reviews__in { padding-top: 104px; padding-bottom: 104px; display: flex; flex-wrap: wrap; align-items: stretch; gap: 40px 72px; }
.score { flex: 0 1 340px; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; padding: 40px 36px; border-radius: var(--ab-radius-kaart); background: var(--ab-groen); color: var(--ab-creme); }
.score__top { display: flex; flex-direction: column; gap: 14px; }
.score .label, .score a { color: var(--ab-goud-licht); }
.score__cijfer { font-family: var(--ab-font-titel); font-weight: 600; font-size: 84px; line-height: 0.9; color: var(--ab-goud-licht); }
.sterren { display: flex; gap: 4px; color: var(--ab-goud-licht); }
.score__aantal { font-size: 15px; color: var(--ab-grijs-op-donker); }
.citaten { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.citaat { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.citaat p { font-family: var(--ab-font-titel); font-style: italic; font-weight: 500; font-size: 21px; line-height: 1.35; }
.citaat footer { font-size: 14px; font-weight: 600; color: var(--ab-grijs); }
.citaat--groot { gap: 14px; padding-bottom: 32px; }
.citaat--groot::before { content: '\201C'; height: 30px; font-family: var(--ab-font-titel); font-weight: 600; font-size: 72px; line-height: 0.6; color: var(--ab-goud); }
.citaat--groot p { font-size: 30px; line-height: 1.3; }
.citaten__rij { display: flex; flex-wrap: wrap; gap: 28px 48px; padding-top: 32px; border-top: 1px solid var(--ab-lijn-op-wit); }
.citaten__rij .citaat { flex: 1 1 240px; min-width: 0; }

/* Veelgestelde vragen */
.vragen { padding-top: 104px; padding-bottom: 104px; display: flex; flex-wrap: wrap; gap: 32px 72px; }
.vragen__kop { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.vragen__kop p { color: var(--ab-grijs); }
.vragen__lijst { flex: 2 1 520px; min-width: 0; border-top: 1px solid var(--ab-lijn); }
.vraag { border-bottom: 1px solid var(--ab-lijn); }
.vraag summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 68px; padding: 14px 0; font-family: var(--ab-font-titel); font-weight: 600; font-size: 26px; line-height: 1.2; cursor: pointer; list-style: none; }
.vraag summary::-webkit-details-marker { display: none; }
.vraag summary::after { content: '+'; flex: 0 0 auto; font-weight: 500; font-size: 32px; line-height: 1; color: var(--ab-brons); }
.vraag[open] summary::after { content: '\2212'; }
.vraag p { padding: 0 48px 24px 0; line-height: 1.65; color: var(--ab-grijs); }

/* Nieuwsbrief */
.nieuwsbrief { background: var(--ab-goud-licht); }
.nieuwsbrief__in { padding-top: 72px; padding-bottom: 72px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px 56px; }
.nieuwsbrief__tekst { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.nieuwsbrief__tekst p { font-size: 17px; line-height: 1.55; }
.nieuwsbrief__tekst p.klein { margin-top: 4px; font-size: 13px; }
.nieuwsbrief a { color: var(--ab-groen); }
.nieuwsbrief__form { flex: 1 1 420px; min-width: 0; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.veld { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.veld label { font-size: 14px; font-weight: 600; }
.veld input { height: 52px; padding: 0 14px; border: 1.5px solid var(--ab-groen); border-radius: var(--ab-radius-veld); background: var(--ab-wit); font: inherit; color: var(--ab-groen); }

/* Footer */
.voet { background: var(--ab-groen); color: var(--ab-creme); }
.voet__in { padding-top: 72px; padding-bottom: 32px; display: flex; flex-direction: column; gap: 48px; }
.voet__kolommen { display: flex; flex-wrap: wrap; gap: 40px; }
.voet__merk { flex: 1.3 1 260px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.voet__merk p { font-size: 15px; color: var(--ab-grijs-op-donker); }
.voet__sociaal { display: flex; gap: 18px; font-size: 15px; }
.voet__sociaal a { color: var(--ab-goud-licht); }
.voet__kolom { flex: 1 1 160px; min-width: 0; font-size: 15px; }
.voet__kolom--contact { flex-basis: 210px; line-height: 1.5; }
.voet__kolom h2 { margin-bottom: 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ab-goud-licht); }
.voet__kolom ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.voet__kolom a { color: var(--ab-creme); text-decoration: none; }
.voet__kolom a:hover { color: var(--ab-goud-licht); }
.voet__kolom p { margin-top: 10px; color: var(--ab-grijs-op-donker); }
.voet__kolom--contact a { text-decoration: underline; }
.voet__onder { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 24px; border-top: 1px solid var(--ab-groen-lijn); font-size: 13px; color: var(--ab-grijs-op-donker); }
.voet__onder ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.voet__betaal li { padding: 4px 10px; border: 1px solid var(--ab-groen-lijn); border-radius: 6px; }
.voet__juridisch { gap: 16px !important; }
.voet__juridisch a { color: var(--ab-grijs-op-donker); }

/* Mobiel */
@media (max-width: 720px) {
  .wrap { padding-left: 16px; padding-right: 16px; }
  .topbalk__groep:last-child { display: none; }
  .logo__naam { font-size: 28px; }
  .zoek { order: 3; flex-basis: 100%; max-width: none; }
  .kop__mand span { display: none; }
  .menu a.menu__maat { margin-left: 0; }
  .slide__tekst { padding: 44px 0 8px; }
  .slide__beeld { min-height: 320px; margin: 24px 0 32px; }
  .intro, .favorieten { padding-top: 64px; }
  .favorieten { padding-bottom: 72px; }
  .uitgelicht { min-height: 560px; }
  .producten { gap: 28px 16px; }
  .product__naam { font-size: 22px; }
  .product__voet { flex-direction: column; align-items: flex-start; }
  .seizoen__in, .momenten__in, .stappen__in, .zakelijk__in, .reviews__in { padding-top: 72px; padding-bottom: 72px; }
  .boog, .boog--groot { max-width: none; }
  .boog .foto, .boog--groot .foto { height: 380px; }
  .moment__naam { font-size: 26px; }
  .momenten__foto, .zakelijk__foto { min-height: 320px; }
  .stap__lijn::after { display: none; }
  .stap__tekst { padding-right: 0; }
  .samen, .atelier, .vragen { padding-top: 72px; padding-bottom: 72px; }
  .pakket { padding: 24px 20px; }
  .pakket__plus { display: none; }
  .pakket__stuk { flex: 1 1 28%; }
  .product__kop { flex-wrap: wrap; gap: 2px 10px; }
  .score { flex-basis: 100%; }
  .score__cijfer { font-size: 64px; }
  .categorieen { padding-bottom: 72px; }
  .categorie .foto { min-height: 300px; }
  .citaat--groot p { font-size: 24px; }
  .vraag summary { font-size: 22px; }
  .vraag p { padding-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .moment svg { transition: none; }
}

/* Bovenste laagje van het beeldmerk: kleur via --laag op de <svg> */
.laag { stroke: var(--laag, #B08A45); }

/* =====================================================================
   Onderliggende pagina's: gedeeld
   ===================================================================== */
[hidden] { display: none !important; }
.pagina { padding-top: 28px; padding-bottom: 104px; }
.kruimel { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; font-size: 14px; color: var(--ab-grijs); }
.kruimel li + li::before { content: '/'; margin-right: 8px; }
.paginakop { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; }
.paginakop__tekst { display: flex; flex-direction: column; gap: 8px; max-width: 720px; }
.pil-info { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 1px solid var(--ab-lijn); border-radius: var(--ab-radius-knop); background: var(--ab-wit); font-size: 14px; font-weight: 500; }
.pil-info svg { color: var(--ab-brons); }
.vinklijst { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: 15px; line-height: 1.5; }
.vinklijst li { display: flex; gap: 10px; }
.vinklijst svg { flex: 0 0 auto; margin-top: 3px; color: var(--ab-brons); }
.betaal { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--ab-grijs); }
.betaal li { padding: 4px 10px; border: 1px solid var(--ab-lijn); border-radius: 6px; }

/* Keuzerondjes als kleurstaal: verborgen radio + zichtbaar label */
.staal { position: relative; display: inline-flex; }
.staal input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.staal span { width: 44px; height: 44px; border: 1.5px solid var(--ab-rand-veld); border-radius: 50%; background: var(--staal); }
.staal input:checked + span { box-shadow: 0 0 0 3px var(--ab-creme), 0 0 0 5px var(--ab-groen); }
.staal input:focus-visible + span { outline: 2px solid var(--ab-goud); outline-offset: 6px; }
.stalen { display: flex; flex-wrap: wrap; gap: 12px; }

/* Keuzepil: verborgen radio of checkbox + label als knop */
.keuze { position: relative; display: inline-flex; }
.keuze input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.keuze span { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--ab-lijn); border-radius: var(--ab-radius-knop); background: var(--ab-wit); font-size: 14px; font-weight: 500; }
.keuze input:checked + span { border-color: var(--ab-groen); background: var(--ab-groen); color: var(--ab-creme); }
.keuze input:focus-visible + span { outline: 2px solid var(--ab-goud); outline-offset: 3px; }
.keuzes { display: flex; flex-wrap: wrap; gap: 8px; }

/* Aantal: - [n] + */
.aantal { display: inline-flex; align-items: center; border: 1.5px solid var(--ab-rand-veld); border-radius: var(--ab-radius-knop); background: var(--ab-wit); }
.aantal button { width: 44px; height: 44px; border: 0; background: transparent; color: var(--ab-groen); font-size: 20px; line-height: 1; }
.aantal input { width: 36px; height: 44px; border: 0; background: transparent; text-align: center; font: inherit; font-weight: 600; color: var(--ab-groen); -moz-appearance: textfield; }
.aantal input::-webkit-outer-spin-button, .aantal input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.aantal--groot button { width: 48px; height: 54px; }
.aantal--groot input { height: 54px; }

/* Productkaart in rasters (shop, gerelateerd) */
.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 44px 28px; margin: 0; padding: 0; list-style: none; }
.kaart { min-width: 0; display: flex; flex-direction: column; gap: 12px; color: var(--ab-groen); text-decoration: none; }
.kaart__beeld { position: relative; }
.kaart__beeld .foto { aspect-ratio: 4 / 5; }
.kaart__badge { position: absolute; top: 12px; left: 12px; padding: 6px 12px; border-radius: var(--ab-radius-knop); background: var(--ab-groen); color: var(--ab-creme); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.kaart__kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bolletjes { display: flex; gap: 5px; margin: 0; padding: 0; list-style: none; }
.bolletjes li { width: 12px; height: 12px; border-radius: 50%; border: 1px solid transparent; background: var(--staal); }
.bolletjes li.is-licht { border-color: var(--ab-rand-veld); }
.kaart__naam { font-family: var(--ab-font-titel); font-weight: 600; font-size: 28px; line-height: 1.08; }
.kaart:hover .kaart__naam { color: var(--ab-brons); }
.kaart .product__voet strong { font-size: 17px; }
.raster--vier { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 36px 28px; }
.raster--vier .kaart__beeld .foto { aspect-ratio: 1 / 1; }
.raster--vier .kaart__naam { font-size: 26px; }

/* Brede band onderaan */
.band { background: var(--ab-zand); }
.band__in { padding-top: 64px; padding-bottom: 64px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; }
.band__tekst { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }

/* =====================================================================
   Shopoverzicht
   ===================================================================== */
.shoptabs { display: flex; gap: 28px; margin: 22px 0 0; padding: 0; list-style: none; overflow-x: auto; white-space: nowrap; border-bottom: 1px solid var(--ab-lijn); }
.shoptabs a { display: flex; align-items: center; min-height: 52px; border-bottom: 3px solid transparent; color: var(--ab-grijs); font-family: var(--ab-font-titel); font-weight: 600; font-size: 24px; text-decoration: none; }
.shoptabs a:hover { color: var(--ab-groen); }
.shoptabs a[aria-current="page"] { border-bottom-color: var(--ab-goud); color: var(--ab-groen); }

.shop { padding-top: 36px; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 36px 56px; }
.filters { flex: 1 1 240px; max-width: 300px; min-width: 0; }
.filters__open { display: none; }
.filters__kop { display: flex; align-items: center; justify-content: space-between; padding-bottom: 6px; }
.filters__wis { min-height: 44px; display: inline-flex; align-items: center; font-size: 14px; font-weight: 600; }
.filter { margin: 0; padding: 20px 0; border: 0; border-top: 1px solid var(--ab-lijn); }
.filters .stalen { gap: 8px; }
.filters .staal span { width: 40px; height: 40px; }
.filter:last-of-type { border-bottom: 1px solid var(--ab-lijn); }
.filter legend { float: left; width: 100%; margin-bottom: 10px; padding: 0; font-family: var(--ab-font-titel); font-weight: 600; font-size: 24px; }
.filter legend small { font-family: var(--ab-font-tekst); font-weight: 400; font-size: 14px; color: var(--ab-grijs); }
.filter > * { clear: both; }
.vink { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: 16px; cursor: pointer; }
.vink input { width: 20px; height: 20px; margin: 0; accent-color: var(--ab-groen); }
.vink span { flex: 1 1 0; }
.vink small { font-size: 14px; color: var(--ab-grijs); }
.filters__toepassen { margin-top: 20px; width: 100%; }
.promo { margin-top: 28px; display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: var(--ab-radius-kaart); background: var(--ab-groen); color: var(--ab-creme); text-decoration: none; }
.promo:hover { color: var(--ab-creme); background: #1F3E34; }
.promo .label { color: var(--ab-goud-licht); letter-spacing: 0.2em; }
.promo strong { font-family: var(--ab-font-titel); font-weight: 600; font-size: 26px; line-height: 1.1; }
.promo strong em { font-style: italic; font-weight: 500; }
.promo span:last-child { font-size: 14px; line-height: 1.5; color: var(--ab-grijs-op-donker); }

.shop__resultaten { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.shop__balk { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.shop__actief { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.shop__aantal { font-size: 15px; font-weight: 600; }
.filterchip { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px 0 14px; border: 1px solid var(--ab-lijn); border-radius: var(--ab-radius-knop); background: var(--ab-wit); color: var(--ab-groen); font-size: 14px; text-decoration: none; }
.filterchip svg { color: var(--ab-brons); }
.sorteer { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ab-grijs); }
.select { height: 44px; padding: 0 12px; border: 1.5px solid var(--ab-rand-veld); border-radius: var(--ab-radius-veld); background: var(--ab-wit); font: inherit; font-size: 15px; color: var(--ab-groen); }
.meer { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 12px; font-size: 14px; color: var(--ab-grijs); }
.leeg { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 48px 32px; border: 1px solid var(--ab-lijn); border-radius: var(--ab-radius-kaart); background: var(--ab-wit); text-align: center; }
.leeg p { max-width: 480px; color: var(--ab-grijs); }
.leeg__acties { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* =====================================================================
   Productdetail
   ===================================================================== */
.pd { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 40px 64px; }
.galerij { flex: 1.15 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.voorbeeld { position: relative; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; padding: 32px; border-radius: var(--ab-radius-kaart); background: var(--ab-zand); overflow: hidden; }
.voorbeeld > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.voorbeeld__label { position: absolute; top: 18px; left: 20px; z-index: 1; padding: 7px 14px; border-radius: var(--ab-radius-knop); background: var(--ab-groen); color: var(--ab-creme); font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.voorbeeld__noot { position: absolute; left: 20px; right: 20px; bottom: 16px; text-align: center; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ab-grijs); }
/* De sleutelhanger zelf: vervang door een overlay op de productfoto als het product dat vraagt */
.hanger { position: relative; z-index: 1; display: flex; align-items: center; max-width: 100%; }
.hanger__ring { flex: 0 0 auto; width: 76px; height: 76px; margin-right: -20px; border: 7px solid var(--ab-rand-veld); border-radius: 50%; }
.hanger__plaat { min-width: 320px; max-width: 100%; height: 140px; padding: 0 44px 0 38px; display: flex; align-items: center; gap: 22px; border-radius: var(--ab-radius-knop); background: var(--hanger-kleur, #1F3E34); color: var(--hanger-tekst, #F6F0E4); transition: background 0.2s, color 0.2s; }
.hanger__gat { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--ab-zand); }
.hanger__naam { flex: 1 1 auto; text-align: center; font-family: var(--hanger-font, var(--ab-font-titel)); font-weight: 600; font-size: var(--hanger-grootte, 68px); line-height: 1; white-space: nowrap; }
.duimen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.duimen button { width: 100%; aspect-ratio: 1 / 1; padding: 0; border: 2px solid transparent; border-radius: 8px; background: var(--ab-zand); overflow: hidden; }
.duimen button[aria-current="true"] { border-color: var(--ab-groen); }
.duimen .foto { width: 100%; height: 100%; padding: 6px; border-radius: 6px; font-size: 10px; }

.pd__info { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.pd__kop { display: flex; flex-direction: column; gap: 10px; }
.pd__labels { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ab-brons); }
.pd__labels li + li::before { content: '·'; margin-right: 14px; }
.pd__prijs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.pd__prijs strong { font-size: 28px; font-weight: 600; }
.pd__prijs span { font-size: 14px; color: var(--ab-grijs); }
.pd__score { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.pd__score svg { color: var(--ab-goud); }

.personaliseer { display: flex; flex-direction: column; gap: 24px; padding-top: 22px; border-top: 1px solid var(--ab-lijn); }
.pstap { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pstap__titel { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0; font-size: 16px; font-weight: 600; }
.pstap__titel > span { display: flex; align-items: baseline; gap: 12px; }
.pstap__titel .nummer { font-size: 22px; }
.pstap__titel small { font-weight: 400; font-size: 14px; color: var(--ab-grijs); }
.teller { font-size: 13px; font-weight: 400; color: var(--ab-grijs); }
.invoer { height: 52px; padding: 0 14px; border: 1.5px solid var(--ab-rand-veld); border-radius: var(--ab-radius-veld); background: var(--ab-wit); font: inherit; font-size: 17px; color: var(--ab-groen); }
.fontkeuze { display: flex; flex-wrap: wrap; gap: 10px; }
.fontkeuze .keuze { flex: 1 1 110px; }
.fontkeuze .keuze span { width: 100%; min-height: 60px; flex-direction: column; gap: 2px; border-color: var(--ab-rand-veld); border-radius: var(--ab-radius-veld); }
.fontkeuze .keuze b { max-width: 100%; overflow: hidden; white-space: nowrap; font-family: var(--f); font-weight: 600; font-size: var(--fs, 22px); line-height: 1; }
.fontkeuze .keuze small { font-size: 12px; font-weight: 500; }
.akkoord { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; border: 1px solid var(--ab-lijn-op-wit); border-radius: var(--ab-radius-kaart); background: var(--ab-wit); font-size: 15px; line-height: 1.5; cursor: pointer; }
.akkoord input { flex: 0 0 auto; width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--ab-groen); }
.koop { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.koop .knop { flex: 1 1 220px; min-height: 56px; font-size: 17px; }
.melding { padding: 14px 18px; border-radius: var(--ab-radius-kaart); background: var(--ab-groen); color: var(--ab-creme); font-size: 15px; }
.melding[hidden] { display: none; }
.pd__details { border-top: 1px solid var(--ab-lijn); }
.pd__details .vraag summary { min-height: 60px; font-size: 24px; }
.pd__details .vraag p { padding-right: 32px; font-size: 15px; }
.pd__details dl { margin: 0 0 20px; display: grid; grid-template-columns: max-content 1fr; gap: 6px 20px; font-size: 15px; color: var(--ab-grijs); }
.pd__details dt { font-weight: 600; color: var(--ab-groen); }
.pd__details dd { margin: 0; }

.verwant { background: var(--ab-wit); }
.verwant__in { padding-top: 88px; padding-bottom: 88px; display: flex; flex-direction: column; gap: 32px; }
.verwant .blokkop--lijn { border-color: var(--ab-lijn-op-wit); }
.verwant .product__voet { border-color: var(--ab-lijn-op-wit); }
.pd-reviews { padding-top: 88px; padding-bottom: 104px; display: flex; flex-wrap: wrap; gap: 32px 72px; }
.pd-reviews__kop { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.pd-reviews__kop p { font-size: 15px; color: var(--ab-grijs); }
.pd-reviews__lijst { flex: 2 1 480px; min-width: 0; display: flex; flex-wrap: wrap; gap: 28px 48px; padding-top: 28px; border-top: 1px solid var(--ab-lijn); }
.pd-reviews__lijst .citaat { flex: 1 1 240px; min-width: 0; }
.pd-reviews__lijst .citaat p { font-size: 23px; }

/* =====================================================================
   Winkelmand
   ===================================================================== */
.bestelstappen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 32px; padding: 0; list-style: none; font-size: 15px; color: var(--ab-grijs); }
.bestelstappen li { display: flex; align-items: center; gap: 10px; }
.bestelstappen li + li::before { content: ''; width: 56px; height: 1px; margin-right: 6px; background: var(--ab-lijn); }
.bestelstappen li[aria-current="step"] { color: var(--ab-groen); font-weight: 600; }
.bestelstappen li[aria-current="step"] + li::before { background: var(--ab-goud); }
.bestelstappen b { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--ab-rand-veld); border-radius: 50%; font-family: var(--ab-font-titel); font-style: italic; font-weight: 500; font-size: 18px; }
.bestelstappen li[aria-current="step"] b { border-color: var(--ab-groen); background: var(--ab-groen); color: var(--ab-creme); }
.mandkop { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 32px; }
.mandkop .titel em { color: var(--ab-brons); }

.mand { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 40px 56px; }
.mand__links { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 36px; }
.mand .voortgang { padding: 20px 24px; border: 1px solid var(--ab-lijn-op-wit); border-radius: var(--ab-radius-kaart); background: var(--ab-wit); gap: 12px; }
.mand .voortgang__tekst { flex-wrap: wrap; align-items: center; }
.mand .voortgang__tekst strong { display: flex; align-items: center; gap: 12px; font-size: 16px; }
.mand .voortgang__tekst svg { color: var(--ab-brons); }

.regels-mand { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--ab-lijn); }
.mandregel { display: flex; flex-wrap: wrap; gap: 16px 24px; padding: 24px 0; border-top: 1px solid var(--ab-lijn); }
.mandregel > .foto { flex: 0 0 112px; height: 132px; padding: 0; font-size: 11px; }
.mandregel__info { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.mandregel__naam { font-family: var(--ab-font-titel); font-weight: 600; font-size: 28px; line-height: 1.08; }
.mandregel__naam a { color: inherit; text-decoration: none; }
.mandregel__keuze { margin: 0; display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 15px; color: var(--ab-grijs); }
.mandregel__keuze div { display: flex; gap: 6px; }
.mandregel__keuze dt { font-weight: 600; color: var(--ab-groen); }
.mandregel__keuze dd { margin: 0; }
.mandregel__levering { font-size: 14px; color: var(--ab-grijs); }
.mandregel__acties { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 4px; font-size: 14px; font-weight: 600; }
.mandregel__acties a, .mandregel__acties button { min-height: 32px; display: inline-flex; align-items: center; }
.mandregel__acties button { padding: 0; border: 0; background: transparent; color: var(--ab-grijs); font-size: 14px; font-weight: 500; text-decoration: underline; }
.mandregel__rechts { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 14px; }
.mandregel__prijs { font-size: 19px; font-weight: 600; }

.tip { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; padding: 22px 24px; border-radius: var(--ab-radius-kaart); background: var(--ab-zand); }
.tip > .foto { flex: 0 0 76px; height: 76px; padding: 0; border-radius: 8px; background: var(--ab-creme); font-size: 10px; }
.tip__tekst { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tip__kop { font-family: var(--ab-font-titel); font-style: italic; font-weight: 500; font-size: 19px; color: var(--ab-brons); }
.tip__naam { font-family: var(--ab-font-titel); font-weight: 600; font-size: 26px; line-height: 1.1; }
.tip__sub { font-size: 15px; color: var(--ab-grijs); }
.tip .knop { min-height: 48px; padding: 0 24px; font-size: 15px; }

.opties { margin: 0; padding: 0; border: 0; }
.opties legend { margin-bottom: 14px; padding: 0; }
.optie { display: flex; align-items: center; gap: 16px; padding: 18px 0; border-top: 1px solid var(--ab-lijn); cursor: pointer; }
.optie:last-of-type { border-bottom: 1px solid var(--ab-lijn); }
.optie input { flex: 0 0 auto; width: 22px; height: 22px; margin: 0; accent-color: var(--ab-groen); }
.optie__tekst { flex: 1 1 0; min-width: 0; }
.optie__tekst strong { display: block; font-size: 17px; font-weight: 600; }
.optie__tekst span { display: block; font-size: 14px; line-height: 1.5; color: var(--ab-grijs); }
.optie__prijs { font-size: 16px; font-weight: 600; white-space: nowrap; }
.optie__extra { display: none; flex-direction: column; gap: 6px; padding: 0 0 20px 38px; }
.optie:has(input:checked) + .optie__extra { display: flex; }
.optie__extra label { font-size: 14px; font-weight: 600; }
.optie__extra textarea { padding: 12px 14px; border: 1.5px solid var(--ab-rand-veld); border-radius: var(--ab-radius-veld); background: var(--ab-wit); font: inherit; color: var(--ab-groen); resize: vertical; }

.overzicht { flex: 1 1 340px; max-width: 440px; min-width: 0; position: sticky; top: 24px; display: flex; flex-direction: column; gap: 20px; padding: 32px 30px; border: 1px solid var(--ab-lijn-op-wit); border-radius: var(--ab-radius-kaart); background: var(--ab-wit); }
.overzicht__regels { margin: 0; display: flex; flex-direction: column; gap: 12px; font-size: 16px; }
.overzicht__regels div { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.overzicht__regels dt { display: flex; align-items: center; gap: 10px; }
.overzicht__regels dd { margin: 0; font-weight: 600; }
.overzicht__regels dd.is-gratis { color: var(--ab-brons); }
.overzicht__regels .select { height: 40px; padding: 0 8px; }
.code { display: flex; flex-direction: column; gap: 6px; }
.code label { font-size: 14px; font-weight: 600; }
.code div { display: flex; gap: 8px; }
.code input { flex: 1 1 0; min-width: 0; height: 48px; padding: 0 14px; border: 1.5px solid var(--ab-rand-veld); border-radius: var(--ab-radius-veld); background: var(--ab-wit); font: inherit; color: var(--ab-groen); }
.code .knop { min-height: 48px; padding: 0 18px; font-size: 15px; }
.overzicht__totaal { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-top: 18px; border-top: 1px solid var(--ab-lijn-op-wit); }
.overzicht__totaal span { font-size: 17px; font-weight: 600; }
.overzicht__totaal small { font-size: 13px; font-weight: 400; color: var(--ab-grijs); }
.overzicht__totaal strong { font-family: var(--ab-font-titel); font-weight: 600; font-size: 40px; line-height: 1; }
.overzicht > .knop { min-height: 56px; font-size: 17px; }
.overzicht__gast { font-size: 14px; color: var(--ab-grijs); text-align: center; }
.overzicht .betaal { justify-content: center; }
.overzicht .vinklijst { padding-top: 18px; border-top: 1px solid var(--ab-lijn-op-wit); font-size: 14px; }

/* =====================================================================
   Mobiel, onderliggende pagina's
   ===================================================================== */
@media (max-width: 720px) {
  .pagina { padding-bottom: 72px; }
  .shoptabs a { font-size: 21px; }
  .filters { max-width: none; flex-basis: 100%; }
  .filters__open { display: inline-flex; width: 100%; }
  .filters__paneel { display: none; padding-top: 16px; }
  .filters .promo { display: none; }
  .filters.is-open .filters__paneel { display: block; }
  .shop__balk { flex-direction: column; align-items: flex-start; }
  .raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 14px; }
  .kaart__naam, .raster--vier .kaart__naam { font-size: 21px; }
  .kaart__kop { flex-direction: column; align-items: flex-start; gap: 6px; }
  .kaart .product__voet { flex-direction: column; align-items: flex-start; gap: 4px; }
  .hanger__ring { width: 48px; height: 48px; border-width: 5px; margin-right: -14px; }
  .hanger__plaat { min-width: 0; height: 96px; padding: 0 26px 0 22px; gap: 14px; }
  .hanger__gat { width: 18px; height: 18px; }
  .voorbeeld { padding: 16px; }
  .pd-reviews, .verwant__in { padding-top: 64px; padding-bottom: 64px; }
  .bestelstappen li + li::before { width: 20px; }
  .bestelstappen li:not([aria-current="step"]) span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .mandregel > .foto { flex-basis: 84px; height: 100px; }
  .mandregel__rechts { flex-basis: 100%; flex-direction: row; align-items: center; }
  .overzicht { max-width: none; position: static; padding: 24px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .hanger__plaat { transition: none; }
}