/* ==========================================================================
   public/css/product.css — de productpagina
   ==========================================================================
   Elk product heeft een eigen accentkleur en tint (lib/verhalen.js, thema),
   die als --accent, --tint en --donker op .pp staan.
   ========================================================================== */

.pp { --accent: var(--blauw); --tint: var(--ijs); --donker: var(--nacht); }

/* Kruimelpad -------------------------------------------------------------- */
.kruimel ol { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 1.25rem 0 0; list-style: none; font-size: 0.8125rem; color: var(--tekst-stil); }
.kruimel li + li::before { content: '/'; margin-right: 0.4rem; opacity: 0.5; }
.kruimel a { color: inherit; text-decoration: none; }
.kruimel a:hover { color: var(--tekst); text-decoration: underline; }
.kruimel [aria-current] { color: var(--tekst); }

/* Foto's en kopen --------------------------------------------------------- */
.pp-held {
  display: grid;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
  padding: clamp(1.25rem, 3vw, 2.5rem) 0 clamp(3rem, 8vw, 6rem);
}
@media (min-width: 900px) { .pp-held { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); } }

.pp-galerij { position: relative; min-width: 0; }
.pp-galerij__spoor {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  border-radius: var(--r-xl);
  background: var(--tint);
  scrollbar-width: none;
  outline: none;
}
.pp-galerij__spoor::-webkit-scrollbar { display: none; }
.pp-galerij__spoor:focus-visible { box-shadow: 0 0 0 3px var(--blauw); }
.pp-galerij__dia { flex: 0 0 100%; margin: 0; aspect-ratio: 1 / 1; scroll-snap-align: center; overflow: hidden; }
.pp-galerij__dia img { width: 100%; height: 100%; object-fit: cover; }
.pp-galerij__dia:first-child img { mix-blend-mode: multiply; }
.pp-galerij__dia--tekening { position: relative; display: grid; place-items: center; padding: 8%; }
.pp-galerij__pijl {
  position: absolute;
  top: calc(50% - 48px);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: var(--schaduw-1);
  color: var(--inkt);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.pp-galerij__pijl--vorige { left: 16px; }
.pp-galerij__pijl--volgende { right: 16px; }
.pp-galerij:hover .pp-galerij__pijl, .pp-galerij__pijl:focus-visible { opacity: 1; }
.pp-galerij__pijl:hover { transform: scale(1.06); }
.pp-galerij__pijl[disabled] { opacity: 0 !important; pointer-events: none; }
@media (hover: none) { .pp-galerij__pijl { display: none; } }
.pp-galerij__duimen { display: flex; gap: 0.5rem; margin-top: 0.9rem; overflow-x: auto; padding: 2px; scrollbar-width: none; }
.pp-galerij__duimen::-webkit-scrollbar { display: none; }
.pp-galerij__duim {
  flex: none;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: var(--tint);
  overflow: hidden;
  cursor: pointer;
  opacity: 0.55;
  box-shadow: inset 0 0 0 1px var(--lijn);
  transition: opacity 0.25s, box-shadow 0.25s, transform 0.25s var(--ease);
}
.pp-galerij__duim img { width: 100%; height: 100%; object-fit: cover; }
.pp-galerij__duim:hover { opacity: 0.85; }
.pp-galerij__duim.is-actief { opacity: 1; box-shadow: 0 0 0 2px var(--inkt); }

.pp-koop { padding-top: 0.5rem; }
@media (min-width: 900px) { .pp-koop { position: sticky; top: calc(var(--kop-h) + 28px); } }
.pp-koop .oogje { color: var(--accent); }
.pp-koop__titel { font-size: clamp(2.6rem, 4.8vw, 4.25rem); letter-spacing: -0.048em; margin-bottom: 0.35em; }
.pp-koop__tagline { font-size: clamp(1.0625rem, 1.4vw, 1.25rem); line-height: 1.45; color: var(--tekst-zacht); max-width: 30rem; }
.pp-koop__sterren { display: flex; align-items: center; gap: 0.6rem; font-size: 0.875rem; color: var(--tekst-zacht); }
.pp-koop__sterrenrij { display: inline-flex; gap: 1px; color: #E9A23B; }
.pp-koop__prijsrij { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 1rem; margin-top: 1.75rem; }
.pp-koop__prijs { margin: 0; font-family: var(--font-kop); font-size: 2rem; font-weight: 650; letter-spacing: -0.03em; }
.pp-koop__set { margin: 0; color: var(--tekst-stil); font-size: 0.9375rem; }
.pp-koop__micro { margin: 0.35rem 0 1.5rem; font-size: 0.8125rem; color: var(--tekst-stil); }
.pp-koop__form { display: flex; gap: 0.75rem; align-items: center; }
.pp-koop__knop { flex: 1; }
.pp-koop .bezorgregel { margin: 1.1rem 0 0.3rem; }
.pp-koop__voorraad { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 0.875rem; color: var(--tekst-zacht); }
.pp-koop__voorraad::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--groen); }
.pp-koop__voorraad.is-bijna::before { background: #E9A23B; }
.pp-koop__voorraad.is-uitverkocht::before { background: var(--rood); }
.pp-koop__punten { display: grid; gap: 0.7rem; margin: 1.75rem 0 0; padding: 1.4rem 0 0; border-top: 1px solid var(--lijn); list-style: none; }
.pp-koop__punten li { display: flex; align-items: center; gap: 0.75rem; font-size: 0.9375rem; color: var(--tekst-zacht); }
.pp-koop__punten svg { flex: none; color: var(--accent); }
.pp-koop__sprong { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; }
.pp-koop__sprong a {
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  background: var(--vlak);
  font-size: 0.8125rem;
  font-weight: 550;
  color: var(--tekst-zacht);
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.pp-koop__sprong a:hover { background: var(--tint); color: var(--tekst); }

.wachtlijst { margin-top: 0.5rem; padding: 1.25rem; border-radius: var(--r-m); background: var(--tint); }
.wachtlijst__kop { margin: 0 0 0.75rem; }
.wachtlijst__form { display: grid; gap: 0.6rem; margin-bottom: 0.6rem; }
@media (min-width: 520px) { .wachtlijst__form { grid-template-columns: 1fr auto; } }
.wachtlijst .klein { margin: 0; }

/* De balk onderin ---------------------------------------------------------- */
.pp-balk {
  position: fixed;
  z-index: 45;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));
  width: min(560px, calc(100% - 24px));
  transform: translate3d(-50%, 140%, 0);
  transition: transform 0.6s var(--ease);
  pointer-events: none;
}
.pp-balk.is-zichtbaar { transform: translate3d(-50%, 0, 0); pointer-events: auto; }
.pp-balk__binnen {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.5rem 0.5rem 0.5rem 0.55rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: var(--schaduw-3), inset 0 0 0 1px var(--lijn);
}
.pp-balk__foto { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--tint); overflow: hidden; }
.pp-balk__foto img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.pp-balk__naam { flex: 1; min-width: 0; font-size: 0.9375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-balk__naam span { color: var(--tekst-stil); margin-left: 0.35rem; font-variant-numeric: tabular-nums; }
.pp-balk .knop { min-height: 40px; }

/* Het verhaal in één zin --------------------------------------------------- */
.pp-statement { padding: clamp(4rem, 12vw, 9rem) 0 clamp(3rem, 8vw, 6rem); }
.pp-statement__kop { font-size: clamp(2.4rem, 5.8vw, 5.2rem); letter-spacing: -0.05em; line-height: 1; max-width: 15ch; }
.pp-statement__tekst { max-width: 40rem; margin-top: 1.5rem; }
.pp-statement__beeld { margin-top: clamp(2.5rem, 6vw, 4.5rem); padding: 0; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 16 / 9; box-shadow: var(--schaduw-3); }
.pp-statement__beeld > div { height: 100%; transform: translate3d(0, var(--parallax, 0px), 0) scale(1.14); }
.pp-statement__beeld img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
@media (max-width: 700px) { .pp-statement__beeld { aspect-ratio: 4 / 5; } }

/* Film --------------------------------------------------------------------- */
.pp-film { padding: clamp(4rem, 10vw, 7rem) 0; background: var(--nacht); }
.film--groot { max-width: 1120px; margin: 0 auto; }
.film--groot .film__kader { border-radius: var(--r-xl); }

/* Kenmerken (bento) --------------------------------------------------------- */
.pp-kenmerken { padding: clamp(4rem, 10vw, 8rem) 0 clamp(2rem, 6vw, 4rem); }
.bento { display: grid; gap: clamp(12px, 1.6vw, 20px); grid-template-columns: 1fr; grid-auto-flow: dense; }
@media (min-width: 760px) {
  .bento { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bento__tegel--groot { grid-column: span 2; grid-row: span 2; }
  .bento__tegel:last-child:nth-child(4):not(.bento__tegel--groot) { grid-column: 1 / -1; display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; }
  .bento__tegel:last-child:nth-child(4) .bento__foto { aspect-ratio: 16 / 10; height: 100%; }
}
.bento__tegel {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-xl);
  background: var(--tint);
  overflow: hidden;
  min-height: 260px;
}
.bento__foto { aspect-ratio: 4 / 3; overflow: hidden; }
/* De detailfoto's hebben bovenin hun eigen kop in de foto zelf gedrukt. Door
   onderaan uit te lijnen in een breder kader valt die band erbuiten, zodat er
   niet twee koppen boven elkaar staan. */
.bento__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; transition: transform 1.2s var(--ease); }
.bento__tegel:hover .bento__foto img { transform: scale(1.04); }
.bento__tegel--groot .bento__foto { aspect-ratio: 16 / 10; }
.bento__tegel--groot .bento__tekst { margin-top: auto; }
.bento__tegel--groot .bento__tekst h3 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); }
.bento__tekst { padding: 1.4rem 1.6rem 1.6rem; }
.bento__tekst h3 { margin-bottom: 0.35rem; font-size: clamp(1.1875rem, 1.6vw, 1.4rem); }
.bento__tekst p { margin: 0; color: var(--tekst-zacht); font-size: 0.9375rem; }
.bento__tegel--getal { background: var(--donker); color: #fff; justify-content: space-between; }
.bento__tegel--getal .bento__tekst p { color: rgba(255, 255, 255, 0.7); }
.bento__getal {
  margin: 0;
  padding: 1.6rem 1.6rem 0;
  font-family: var(--font-kop);
  font-size: clamp(4.5rem, 8vw, 7rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.06em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff 30%, var(--gletsjer));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.bento__getal small { font-size: 0.34em; letter-spacing: -0.02em; margin-left: 0.15em; }
.bento__tegel--icoon { justify-content: space-between; }
.bento__icoon { display: block; padding: 1.6rem 1.6rem 0; color: var(--accent); }

/* Widgets ------------------------------------------------------------------ */
.pp-widget { padding: clamp(4rem, 10vw, 8rem) 0; background: var(--tint); margin: clamp(2rem, 6vw, 4rem) 0; }

/* Koord */
.koord__baan { position: relative; max-width: 1000px; margin: 0 auto; touch-action: pan-y; }
.koord__svg { width: 100%; height: auto; overflow: visible; }
.koord__liniaal line { stroke: var(--tekst-stil); stroke-width: 1.5; }
.koord__liniaal text { fill: var(--tekst-stil); font-family: var(--font); font-size: 15px; text-anchor: middle; font-variant-numeric: tabular-nums; }
.koord__kabel { stroke: #8D98A8; stroke-width: 3; stroke-linecap: round; }
.koord__schijf { fill: #111722; }
.koord__rand { fill: none; stroke: #2A3345; stroke-width: 2; }
.koord__lus { fill: #1A202C; }
.koord__berg { fill: none; stroke: #fff; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.koord__merk { fill: #fff; font-family: var(--font-schreef); font-size: 17px; text-anchor: middle; }
.koord__uitgang { fill: #111722; }
.koord__greep {
  --x: 1;
  position: absolute;
  top: 46.2%;
  left: calc(15% + var(--x) * 78%);
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  transform: translate(-6px, -50%);
  cursor: grab;
  touch-action: none;
  outline: none;
  -webkit-user-select: none;
  user-select: none;
}
.koord__greep:active { cursor: grabbing; }
.koord__greep:focus-visible .koord__telefoon { box-shadow: 0 0 0 3px var(--tint), 0 0 0 6px var(--blauw); }
.koord__telefoon {
  position: relative;
  display: block;
  width: clamp(38px, 5.4vw, 54px);
  aspect-ratio: 9 / 18;
  border-radius: clamp(8px, 1.1vw, 12px);
  background: linear-gradient(160deg, #2A3244, #0E131C);
  box-shadow: 0 16px 30px -12px rgba(10, 20, 40, 0.5), inset 0 0 0 1.5px rgba(255, 255, 255, 0.08);
  transition: transform 0.4s var(--veer);
}
.koord__greep:hover .koord__telefoon { transform: rotate(-4deg) scale(1.04); }
.koord__lens { position: absolute; top: 8%; left: 14%; width: 30%; aspect-ratio: 1; border-radius: 30%; background: #1B2230; box-shadow: inset 0 0 0 2px #3A4458; }
.koord__stand {
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: var(--inkt);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.koord__hint { text-align: center; margin-top: 1.5rem; }

/* Pasvorm */
.pasvorm__raster { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 960px) { .pasvorm__raster { grid-template-columns: 1.1fr 0.9fr; } }
.pasvorm__foto { margin: 0; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--schaduw-2); background: #fff; }
.pasvorm__foto img { width: 100%; height: auto; }
.pasvorm__keuze { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; max-width: 760px; margin: 0; padding: 0; border: 0; }
.pasvorm__optie {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  padding: 1.5rem 1rem 1.25rem;
  border-radius: var(--r-l);
  background: #fff;
  box-shadow: inset 0 0 0 1.5px transparent, var(--schaduw-1);
  cursor: pointer;
  text-align: center;
  transition: box-shadow 0.3s var(--ease), transform 0.4s var(--ease);
}
.pasvorm__optie:hover { transform: translateY(-3px); }
.pasvorm__optie input { position: absolute; opacity: 0; pointer-events: none; }
.pasvorm__optie:has(input:checked) { box-shadow: inset 0 0 0 2px var(--accent), var(--schaduw-2); }
.pasvorm__optie:has(input:focus-visible) { outline: 3px solid var(--blauw); outline-offset: 3px; }
.pasvorm__optie svg { width: min(190px, 100%); height: auto; }
.pasvorm__label { font-weight: 600; font-size: 0.9375rem; }
.pv-plaat { fill: #D5DBE3; stroke: #B2BBC7; stroke-width: 2; }
.pv-schroef { fill: #8E98A6; }
.pv-beugel { fill: none; stroke: #9AA4B2; stroke-width: 11; stroke-linecap: round; }
.pv-voet { fill: #AEB7C3; }
.pv-kap { fill: #9AA4B2; }
.pv-pen { fill: #7D8795; }
.pasvorm__antwoord {
  display: none;
  align-items: flex-start;
  gap: 1rem;
  max-width: 760px;
  margin-top: 1rem;
  padding: 1.1rem 1.25rem;
  border-radius: var(--r-m);
  background: #fff;
  animation: antwoord-in 0.5s var(--ease);
}
.pasvorm__antwoord p { margin: 0; }
.pasvorm__icoon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; color: #fff; }
.pasvorm__antwoord--ja .pasvorm__icoon { background: var(--groen); }
.pasvorm__antwoord--nee .pasvorm__icoon { background: var(--rood); }
.pasvorm:has(input[value='ja']:checked) .pasvorm__antwoord--ja { display: flex; }
.pasvorm:has(input[value='nee']:checked) .pasvorm__antwoord--nee { display: flex; }

/* Draagwijze */
.draagwijze__schakelaar {
  position: relative;
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  margin: 0 0 1.75rem;
  padding: 4px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--schaduw-1);
}
.draagwijze__schakelaar label { position: relative; z-index: 1; cursor: pointer; }
.draagwijze__schakelaar input { position: absolute; opacity: 0; pointer-events: none; }
.draagwijze__schakelaar span:not(.draagwijze__pil) {
  display: block;
  padding: 0.65rem clamp(0.8rem, 2vw, 1.4rem);
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 600;
  white-space: nowrap;
  text-align: center;
  color: var(--tekst-zacht);
  transition: color 0.3s;
}
.draagwijze__schakelaar input:checked + span { color: #fff; }
.draagwijze__schakelaar input:focus-visible + span { outline: 3px solid var(--blauw); outline-offset: 2px; }
.draagwijze__pil {
  position: absolute;
  z-index: 0;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc((100% - 8px) / 3);
  border-radius: 999px;
  background: var(--inkt);
  transition: transform 0.55s var(--veer);
}
.draagwijze__schakelaar:has(label:nth-of-type(2) input:checked) .draagwijze__pil { transform: translateX(100%); }
.draagwijze__schakelaar:has(label:nth-of-type(3) input:checked) .draagwijze__pil { transform: translateX(200%); }
@media (max-width: 520px) {
  .draagwijze__schakelaar { display: grid; width: 100%; }
  .draagwijze__schakelaar span:not(.draagwijze__pil) { font-size: 0.8125rem; padding: 0.6rem 0.4rem; }
}
.draagwijze__panelen { display: grid; }
.draagwijze__paneel {
  grid-area: 1 / 1;
  display: grid;
  gap: 1.5rem;
  align-items: center;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.985);
  transition: opacity 0.6s var(--ease), transform 0.8s var(--ease), visibility 0s 0.6s;
}
@media (min-width: 900px) { .draagwijze__paneel { grid-template-columns: 1.2fr 0.8fr; gap: 3rem; } }
.draagwijze__foto { border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--schaduw-2); }
.draagwijze__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.draagwijze__paneel figcaption { font-size: clamp(1.0625rem, 1.5vw, 1.3rem); line-height: 1.5; color: var(--tekst-zacht); }
.draagwijze__paneel figcaption strong { color: var(--tekst); }
.draagwijze:not(:has(input:checked)) .draagwijze__paneel:first-child,
.draagwijze:has(input[value='schouder']:checked) [data-draagwijze='schouder'],
.draagwijze:has(input[value='hand']:checked) [data-draagwijze='hand'],
.draagwijze:has(input[value='samen']:checked) [data-draagwijze='samen'] {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.6s var(--ease), transform 0.8s var(--ease), visibility 0s;
}

/* Zo werkt het ------------------------------------------------------------- */
.pp-stappen { padding: clamp(4rem, 10vw, 8rem) 0; }
.pp-stappen__raster { display: grid; gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
@media (min-width: 900px) {
  .pp-stappen__raster { grid-template-columns: 1fr 1fr; }
  .pp-stappen__beeld { position: sticky; top: calc(var(--kop-h) + 32px); }
}
.stappenlijst { list-style: none; margin: 2rem 0 0; padding: 0; counter-reset: stap; }
.stappenlijst__stap { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; padding: 1.5rem 0; border-top: 1px solid var(--lijn); }
.stappenlijst__stap:last-child { border-bottom: 1px solid var(--lijn); }
.stappenlijst__nummer {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--inkt);
  color: #fff;
  font-family: var(--font-kop);
  font-weight: 650;
  font-size: 1.0625rem;
}
.stappenlijst__stap h3 { margin: 0.5rem 0 0.35rem; }
.stappenlijst__stap p { margin: 0; color: var(--tekst-zacht); }
.pp-stappen__beeld { margin: 0; border-radius: var(--r-xl); overflow: hidden; background: var(--tint); box-shadow: var(--schaduw-2); }
.pp-stappen__beeld img { width: 100%; height: auto; }
.pp-stappen__beeld--tekening { padding: 10%; aspect-ratio: 1 / 1; }

/* Maten en de doos --------------------------------------------------------- */
.pp-specs { padding: clamp(3rem, 8vw, 6rem) 0; }
.pp-specs__raster { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 900px) { .pp-specs__raster { grid-template-columns: 1fr 0.9fr; } }
.specs { margin: 0; border-top: 1px solid var(--lijn); }
.specs__rij { display: grid; grid-template-columns: minmax(8rem, 0.8fr) 1.2fr; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--lijn); }
.specs dt { color: var(--tekst-stil); font-size: 0.9375rem; }
.specs dd { margin: 0; font-weight: 550; }
.pp-specs__beeld { margin: 0; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--schaduw-1); }
.pp-specs__beeld img { width: 100%; height: auto; }
.doos {
  display: grid;
  gap: 2rem;
  align-items: center;
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  padding: clamp(1.25rem, 3vw, 2rem);
  border-radius: var(--r-xl);
  background: var(--tint);
}
@media (min-width: 760px) { .doos { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } }
.doos__foto { border-radius: var(--r-l); overflow: hidden; aspect-ratio: 5 / 4; }
/* Ook hier staat bovenin de foto een eigen kop; onderaan uitlijnen snijdt hem weg. */
.doos__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.doos__foto--vrij { aspect-ratio: 4 / 5; max-width: 360px; }
.doos__foto--vrij img { object-position: 50% 50%; }
.doos__tekst h3 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); }
.doos__tekst ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.6rem; }
.doos__tekst li { display: flex; gap: 0.75rem; align-items: baseline; font-size: 1.0625rem; }
.doos__tekst li::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); transform: translateY(-2px); }

/* Vragen en meer ----------------------------------------------------------- */
.pp-vragen { padding: clamp(3rem, 8vw, 6rem) 0; }
.pp-meer { padding: clamp(3rem, 8vw, 6rem) 0 0; }