/* Diensten en printshop. Gedeelde kleuren/ruimte: site.css. */
.dienstraster {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}

.dienstkaart {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  text-decoration: none;
  color: inherit;
}

.dienstkaart-beeld {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 2px;
  overflow: hidden;
  background: var(--beton);
}

.dienstkaart-beeld img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 620ms var(--veer), filter 320ms var(--veer);
}

.dienstkaart:hover .dienstkaart-beeld img,
.dienstkaart:focus-visible .dienstkaart-beeld img {
  transform: scale(1.04);
  filter: brightness(1.06);
}

.dienstkaart h3 {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 300;
  letter-spacing: -0.01em;
}

.dienstkaart-regel {
  font-size: 0.9375rem;
  color: var(--schemer);
}

.dienstkaart-vanaf {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--leer-diep);
}

/* --- De kop van één soort ----------------------------------------- */

.dienst-hero {
  position: relative;
  overflow: hidden;
}

/* De foto waar je op geklikt hebt, komt hier terug als achtergrond. Dat is
   de hele reden dat je hier bent: je klikte op een familiefoto, dus hoor je
   op een pagina te landen die daar nog steeds naar ruikt. */
.dienst-hero-doek {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  /* Niet scherp: hierboven staat tekst, en die moet leesbaar zijn tegen een
     foto waarvan ik de inhoud niet ken. Vervagen haalt het contrastverschil
     eruit dat losse takken en highlights anders maken. */
  filter: blur(3px) brightness(0.55) saturate(0.85);
  transform: scale(1.06); /* de vervaging vreet aan de randen */
}

/* En dan nog een vaste laag eroverheen. Vervagen alleen is niet genoeg:
   een foto met een witte lucht haalt daarna nog 2,1 op 1 tegen crème, en dat
   is onder de 4,5 die tekst nodig heeft. Deze laag brengt elke foto, hoe
   licht ook, tot onder 0,22 relatieve helderheid. */
.dienst-hero-sluier {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(20, 28, 22, 0.82),
    rgba(20, 28, 22, 0.9)
  );
}

.dienst-hero > .meet {
  position: relative;
  z-index: 1;
}

/* --- Kleine koppen tussen de tekst -------------------------------- */

.kleine-kop {
  margin-top: 2.5rem;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--schemer);
}

.band-nacht .kleine-kop {
  color: var(--salie);
}

/* --- Wat erbij zit ------------------------------------------------- */

.vinklijst {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0.85rem 2rem;
  margin-top: 1.25rem;
  padding: 0;
  list-style: none;
}

.vinklijst li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.9375rem;
  line-height: 1.55;
}

.vinkje {
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.25rem;
  fill: none;
  stroke: var(--leer-diep);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.band-nacht .vinkje {
  stroke: var(--leer);
}

/* --- De pakketten -------------------------------------------------- */

.pakketraster {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  align-items: stretch;
}

.pakketkaart {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.75rem 1.5rem;
  border: 1px solid var(--hairline-donker);
  border-radius: 16px;
  /* Dekkend, geen doorzichtigheid. Zou dit een doorzichtig vlak zijn, dan
     vermenigvuldigt elke laag eroverheen zich met de tekst erin en zakt het
     contrast weg — dezelfde fout die de lenskaarten eerder maakten. */
  background: var(--nacht-zacht);
}

.pakketkaart-uit {
  border-color: var(--leer);
}

.pakketkaart-vlag {
  align-self: flex-start;
  padding: 0.2rem 0.6rem;
  border-radius: var(--pil);
  background: var(--leer);
  color: #2a1a10;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pakketkaart h3 {
  font-family: var(--serif);
  font-size: 1.55rem;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--inkt-op-donker);
}

.pakketkaart-prijs {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}

.pakketkaart-bedrag {
  font-family: var(--serif);
  font-size: 2.6rem;
  font-weight: 300;
  line-height: 1;
  color: var(--leer);
  font-variant-numeric: tabular-nums;
}

.pakketkaart-eenheid {
  font-size: 0.8125rem;
  color: var(--salie);
}

.pakketkaart-feiten {
  margin-top: 0.85rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.4rem;
}

.pakketkaart-feiten li {
  display: flex;
  gap: 0.6rem;
  font-size: 0.875rem;
  color: var(--inkt-op-donker);
}

.pakketkaart-label {
  flex: 0 0 5.5rem;
  color: var(--schemer-op-donker);
}

.pakketkaart-wat {
  margin-top: 0.6rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--schemer-op-donker);
}

/* De knop onderaan, ongeacht hoe lang de tekst erboven is. Anders staan de
   knoppen van drie kaarten naast elkaar op drie verschillende hoogtes en
   oogt de rij scheef. */
.pakketkaart .knop {
  /* auto duwt hem naar de bodem van de kaart. Zonder dit staan de knoppen van
     drie kaarten op drie hoogtes, omdat de tekst erboven niet even lang is. */
  margin-top: auto;
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
}

/* --- Losse bijbestellingen ---------------------------------------- */

.extralijst {
  width: 100%;
  margin-top: 3rem;
  max-width: var(--meet);
}

.extra-regels {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0;
  margin: 1rem 0 0;
}

.extra-regels dt,
.extra-regels dd {
  padding: 0.7rem 0;
  border-top: 1px solid var(--hairline-donker);
  font-size: 0.9375rem;
}

.extra-regels dt {
  color: var(--inkt-op-donker);
}

.extra-regels dd {
  margin: 0;
  text-align: right;
  color: var(--inkt-op-donker);
  font-variant-numeric: tabular-nums;
}

.extra-eenheid {
  color: var(--schemer-op-donker);
  font-size: 0.8125rem;
}

/* --- Veelgestelde vragen ------------------------------------------- */

.vraaglijst {
  margin-top: 1.5rem;
  border-top: 1px solid var(--hairline-donker);
}

.vraag {
  border-bottom: 1px solid var(--hairline-donker);
}

.vraag summary {
  padding: 1.1rem 0;
  cursor: pointer;
  font-size: 1.0625rem;
  color: var(--inkt-op-donker);
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

/* Het standaard driehoekje weg en zelf een plusje ervoor in de plaats: het
   pijltje van de browser staat links en verspringt per browser. */
.vraag summary::-webkit-details-marker {
  display: none;
}

.vraag summary::after {
  content: '+';
  flex: 0 0 auto;
  color: var(--leer);
  font-size: 1.25rem;
  line-height: 1;
  transition: transform 220ms var(--veer);
}

.vraag[open] summary::after {
  content: '−';
}

.vraag summary:focus-visible {
  outline: 2px solid var(--leer);
  outline-offset: 3px;
  border-radius: 4px;
}

.vraag p {
  padding: 0 0 1.2rem;
  max-width: 68ch;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--schemer-op-donker);
}

/* --- Doorklikken naar de andere soorten ---------------------------- */

.dienstrij {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}

.dienstrij-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.55rem 1rem;
  border: 1px solid var(--rand-knop-licht);
  border-radius: var(--pil);
  font-size: 0.9375rem;
  text-decoration: none;
  color: var(--inkt-op-licht);
  transition: border-color 220ms var(--veer), color 220ms var(--veer);
}

.dienstrij-link:hover,
.dienstrij-link:focus-visible {
  border-color: var(--leer-diep);
  color: var(--leer-diep);
}

/* --- De waarschuwing op een donkere band --------------------------- */

/* .nakijken is gemaakt voor de voorwaardenpagina en staat daar op wit. Op de
   donkergroene band verdwijnt hij dan zowat. Alleen de ondergrond en de
   tekstkleur worden hier omgezet; de vorm blijft hetzelfde, zodat het
   herkenbaar hetzelfde soort mededeling is. */
.nakijken-donker {
  margin-top: 1.75rem;
  max-width: 68ch;
  border-color: rgba(226, 183, 88, 0.55);
  border-left-color: #e2b758;
  background: rgba(226, 183, 88, 0.1);
}

.nakijken-donker strong {
  color: #e2b758;
}

.nakijken-donker p {
  color: var(--inkt-op-donker);
}

/* De code-fragmenten in de waarschuwing: een bestandsnaam en een regel JSON.
   Die moeten er als tekst-om-over-te-typen uitzien, want dat is precies wat je
   ermee doet. */
.nakijken code {
  padding: 0.1em 0.35em;
  border-radius: 4px;
  background: rgba(25, 26, 26, 0.08);
  font-size: 0.9em;
}

.nakijken-donker code {
  background: rgba(238, 240, 236, 0.1);
}

/* Op een lichte band staat de waarschuwing in de gewone tekstkolom en hoort
   hij dezelfde lucht boven zich te krijgen als de donkere variant. */
.band .nakijken {
  margin-top: 1.75rem;
  max-width: 68ch;
}

/* ------------------------------------------------------------------ */
/* 22. De shop (shop.html)                                             */
/*                                                                     */
/* Drie onderdelen: het raster met werk dat te koop staat, het paneel   */
/* waarin je maat en afwerking kiest, en de winkelmand met de bestelbon.*/
/*                                                                     */
/* De twee panelen gebruiken dezelfde opzet als het offerteformulier —  */
/* schermvullende laag, kaart erin, js/blad.js maakt hem sleepbaar.     */
/* Alle drie zijn dus op dezelfde manier te sluiten, en dat is precies  */
/* wat je van een site verwacht.                                        */
/* ------------------------------------------------------------------ */

/* --- Het mandje in de balk ----------------------------------------- */

.pil-mand {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding-left: 0.85rem;
  padding-right: 0.95rem;
  border: 1px solid var(--leer);
  background: transparent;
  color: var(--leer);
  cursor: pointer;
}

.pil-mand svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pil-mand:hover,
.pil-mand:focus-visible {
  background: var(--leer);
  color: #2a1a10;
}

/* Tekst die er alleen voor een schermlezer staat. Niet display:none: dan
   leest hij hem juist níét voor. */
.enkel-voorlezen {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Filterbalk ---------------------------------------------------- */

.filterbalk {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.75rem;
}

.filterknop {
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--rand-knop-licht);
  border-radius: var(--pil);
  background: transparent;
  color: var(--inkt-op-licht);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background 200ms var(--veer), border-color 200ms var(--veer),
    color 200ms var(--veer);
}

.filterknop:hover {
  border-color: var(--leer-diep);
  color: var(--leer-diep);
}

.filterknop.aan {
  border-color: var(--accent-diep);
  background: var(--accent-diep);
  color: var(--kalk);
}

/* --- Het printraster ------------------------------------------------ */

.printraster {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 2rem 1.5rem;
}

.printkaart {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.printkaart-beeld {
  /* De verhouding van deze foto, gezet vanuit js/shop.js. Een vaste
     verhouding zou elke foto bijsnijden, en je koopt hier nou juist een
     afdruk van precies dit beeld. */
  aspect-ratio: var(--verhouding, 3 / 2);
  border-radius: 12px;
  overflow: hidden;
  background: var(--beton);
}

.printkaart-beeld img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.printkaart-tekst {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1 1 auto;
}

.printkaart h3 {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.printkaart-meta {
  font-size: 0.8125rem;
  color: var(--schemer);
}

.printkaart-vanaf {
  margin-top: 0.35rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--leer-diep);
}

.printkaart .knop {
  margin-top: auto;
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}

/* --- Hoe het werkt -------------------------------------------------- */

.shop-papier {
  max-width: 62ch;
  margin-top: 1.5rem;
}

.shop-papier p {
  margin-top: 0.5rem;
  color: var(--schemer-op-donker);
  line-height: 1.65;
}

.feitenlijst {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0;
  margin: 2.5rem 0 0;
  max-width: 42rem;
}

.feitenlijst dt,
.feitenlijst dd {
  padding: 0.65rem 0;
  border-top: 1px solid var(--hairline-donker);
  font-size: 0.9375rem;
}

.feitenlijst dt {
  padding-right: 2rem;
  color: var(--schemer-op-donker);
}

.feitenlijst dd {
  margin: 0;
  text-align: right;
  color: var(--inkt-op-donker);
}

.shop-klein {
  margin-top: 2.5rem;
  max-width: 62ch;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--schemer-op-donker);
}

/* .tekstlink heeft een eigen maat (17 px), en die is bedoeld voor een link die
   los in een band staat. Midden in deze alinea van 14 px levert dat twee
   verwijzingen in één zin op die niet even groot zijn — de ene een <a>, de
   andere een <button>. Een link in lopende tekst hoort de maat van die tekst
   te hebben. */
.shop-klein .tekstlink {
  font-size: inherit;
}

/* Een knop die eruitziet als een link. Het is er een omdat er iets gebeurt op
   deze pagina en je niet ergens heen gaat; dat verschil hoort in het element
   te zitten en niet alleen in de opmaak. */
.tekstknop {
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  cursor: pointer;
}

/* --- De twee panelen: gedeelde opzet -------------------------------- */

#kiezer,
#mand {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  opacity: 0;
  pointer-events: none;
  background: rgba(8, 9, 10, 0.86);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: opacity var(--soepel), visibility 0s linear var(--soepel-tijd);
}

#kiezer.open,
#mand.open {
  opacity: 1;
  pointer-events: auto;
  transition: opacity var(--soepel), visibility 0s linear 0s;
}

/* Dicht betekent ook uit de tabvolgorde. Zonder dit belandt de focus in
   knoppen die niemand ziet staan. */
#kiezer:not(.open),
#mand:not(.open) {
  visibility: hidden;
}

.kiezer-binnen,
.mand-binnen {
  display: flex;
  flex-direction: column;
  max-height: 100%;
  background: var(--paneel-vast);
  color: var(--inkt-op-donker);
  box-shadow: var(--schaduw);
}

/* --- Het kiezerpaneel ----------------------------------------------- */

#kiezer {
  place-items: center;
  padding: clamp(0px, 3vh, 2rem) clamp(0px, 3vw, 2rem);
}

.kiezer-binnen {
  width: min(880px, 100%);
  border-radius: clamp(0px, 1.2vw, 16px);
  overflow: hidden;
}

.kiezer-kop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 1.75rem 1.1rem;
  border-bottom: 1px solid var(--hairline-donker);
}

.kiezer-boven {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--salie);
}

.kiezer-kop h2 {
  margin-top: 0.35rem;
  font-family: var(--serif);
  font-size: 1.75rem;
  font-weight: 300;
  letter-spacing: -0.01em;
}

.kiezer-meta {
  margin-top: 0.2rem;
  font-size: 0.8125rem;
  color: var(--schemer-op-donker);
}

.kiezer-inhoud {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  grid-auto-rows: max-content;
  align-content: start;
  min-height: 0;
  gap: 1.75rem;
  padding: 1.75rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.kiezer-beeld {
  align-self: start;
  border-radius: 10px;
  overflow: hidden;
  background: var(--nacht);
}

.kiezer-beeld img {
  width: 100%;
  height: auto;
  display: block;
}

.kiezer-keuzes {
  display: grid;
  gap: 1.75rem;
  align-content: start;
}

.keuzegroep {
  margin: 0;
  padding: 0;
  border: none;
}

.keuzegroep legend {
  padding: 0 0 0.6rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--salie);
}

.keuze {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  /* Geen haarlijn: dit is een keuze waar je op drukt, en dan moet de rand
     zelf te zien zijn. Zie --rand-knop-licht bovenaan voor de reden. */
  border: 1px solid var(--lijn-sterk);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 200ms var(--veer), background 200ms var(--veer);
}

.keuze + .keuze {
  margin-top: 0.5rem;
}

.keuze:hover {
  border-color: rgba(238, 240, 236, 0.62);
}

.keuze.aan {
  border-color: var(--leer);
  background: rgba(210, 142, 102, 0.1);
}

.keuze input {
  flex: 0 0 auto;
  margin-top: 0.2rem;
  accent-color: var(--leer);
}

.keuze-tekst {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.keuze-naam {
  font-size: 0.9375rem;
  color: var(--inkt-op-donker);
}

.keuze-wat {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--schemer-op-donker);
}

.keuze-prijs {
  flex: 0 0 auto;
  font-size: 0.875rem;
  color: var(--leer);
  font-variant-numeric: tabular-nums;
}

/* Niet leverbaar. Geen doorzichtigheid over de hele optie heen: dan zakt ook
   de tekst weg en kun je niet meer lezen waaróm hij niet kan. Alleen het
   prijsje en de rand treden terug. */
.keuze-uit {
  cursor: not-allowed;
  border-style: dashed;
}

.keuze-uit .keuze-prijs {
  color: var(--schemer-op-donker);
  text-decoration: line-through;
}

.kiezer-voet {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.25rem 1.75rem;
  border-top: 1px solid var(--hairline-donker);
  background: var(--nacht);
}

.kiezer-samenvatting {
  flex: 1 1 12rem;
}

.kiezer-regel {
  font-size: 0.8125rem;
  color: var(--schemer-op-donker);
}

.kiezer-bedrag {
  font-family: var(--serif);
  font-size: 1.9rem;
  font-weight: 300;
  line-height: 1.1;
  color: var(--leer);
  font-variant-numeric: tabular-nums;
}

/* --- De stapper ------------------------------------------------------ */

.stapper {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  border: 1px solid var(--lijn-sterk);
  border-radius: var(--pil);
  padding: 0.15rem;
}

.stapper-knop {
  width: 1.9rem;
  height: 1.9rem;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--inkt-op-donker);
  font: inherit;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  transition: background 180ms var(--veer);
}

.stapper-knop:hover {
  background: rgba(238, 240, 236, 0.12);
}

.stapper-getal {
  min-width: 1.6rem;
  text-align: center;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}

.stapper-groot .stapper-knop {
  width: 2.3rem;
  height: 2.3rem;
  font-size: 1.2rem;
}

/* --- De winkelmand --------------------------------------------------- */

/* Van rechts, niet van onderen. Een winkelmand hoort naast de winkel te
   liggen en niet eroverheen: je wilt kunnen zien wat je al hebt terwijl je
   verder kijkt. Op een telefoon is daar geen breedte voor en wordt het
   alsnog schermvullend. */
#mand {
  justify-items: end;
}

.mand-binnen {
  width: min(30rem, 100%);
  height: 100%;
}

.mand-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.35rem 1.5rem;
  border-bottom: 1px solid var(--hairline-donker);
}

.mand-kop h2 {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 300;
}

.mand-inhoud {
  flex: 1 1 auto;
  padding: 1.5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.mand-leeg {
  color: var(--schemer-op-donker);
  line-height: 1.6;
}

.mand-vervallen {
  padding: 0.8rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid rgba(234, 127, 119, 0.5);
  border-radius: 10px;
  font-size: 0.875rem;
  color: var(--inkt-op-donker);
}

.mandregels {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mandregel {
  display: grid;
  grid-template-columns: 4rem 1fr auto;
  gap: 0.9rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--hairline-donker);
}

.mandregel:first-child {
  padding-top: 0;
}

.mandregel-beeld {
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  background: var(--nacht);
}

.mandregel-beeld img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mandregel-tekst {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  align-items: flex-start;
}

.mandregel-titel {
  font-size: 0.9375rem;
  color: var(--inkt-op-donker);
}

.mandregel-maat {
  font-size: 0.8125rem;
  color: var(--schemer-op-donker);
}

.mandregel-rechts {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.4rem;
}

.mandregel-prijs {
  font-size: 0.9375rem;
  color: var(--inkt-op-donker);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mandregel-weg {
  padding: 0;
  border: none;
  background: none;
  color: var(--schemer-op-donker);
  font: inherit;
  font-size: 0.75rem;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.mandregel-weg:hover {
  color: var(--inkt-op-donker);
}

.mandtotaal {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem 1rem;
  margin: 1.25rem 0 0;
  font-size: 0.9375rem;
}

.mandtotaal dt {
  color: var(--schemer-op-donker);
}

.mandtotaal dd {
  margin: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.mandtotaal-groot {
  padding-top: 0.7rem;
  border-top: 1px solid var(--hairline-donker);
  font-size: 1.1rem;
  color: var(--inkt-op-donker);
}

.mand-tip {
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  color: var(--salie);
}

/* --- De bestelbon ---------------------------------------------------- */

.mandbon {
  margin-top: 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--hairline-donker);
}

.mandbon .kleine-kop {
  margin-top: 0;
  color: var(--salie);
}

.veldrij {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0 1rem;
}

.veld-naam {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.88rem;
  font-weight: 500;
}

.veld-bij {
  font-weight: 400;
  color: var(--schemer-op-donker);
}

.veld-kort {
  max-width: 12rem;
}

.veld-vink {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin-top: 1.75rem;
  font-size: 0.875rem;
  line-height: 1.5;
}

.veld-vink input {
  flex: 0 0 auto;
  margin-top: 0.15rem;
  accent-color: var(--leer);
}

/* De valstrik voor robots. Niet display:none en niet hidden: sommige robots
   slaan die juist over. Wél buiten beeld, niet aan te wijzen en niet met de
   tabtoets te bereiken, dus een mens komt er nooit. */
.valstrik {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.mand-uitleg {
  margin-top: 1.25rem;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  background: rgba(238, 240, 236, 0.06);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--inkt-op-donker);
}

.mand-status {
  margin-top: 1rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--salie);
}

.mand-status:empty {
  display: none;
}

.mand-status-fout {
  color: #f0a49d;
}

.mandbon .knop {
  margin-top: 1.25rem;
}

.mand-klaar {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  align-items: flex-start;
}

.mand-klaar h3 {
  font-family: var(--serif);
  font-size: 1.75rem;
  font-weight: 300;
}

.mand-klaar p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--inkt-op-donker);
}

/* --- Smalle schermen -------------------------------------------------- */

@media (max-width: 720px) {
  .kiezer-inhoud {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    padding: 1.25rem;
  }

  /* De foto wordt hier een strook in plaats van een vlak: op een telefoon
     duwt een staande foto de keuzes anders volledig onder de vouw, en dan
     zie je niet meer dat er iets te kiezen valt. */
  .kiezer-beeld {
    height: min(28svh, 240px);
  }

  .kiezer-beeld img {
    height: 100%;
    object-fit: contain;
  }

  .kiezer-voet {
    padding: 1rem 1.25rem;
  }

  .kiezer-voet .knop {
    flex: 1 1 100%;
    order: 3;
  }

  .mand-binnen {
    width: 100%;
  }

  .mandregel {
    grid-template-columns: 3.2rem 1fr auto;
  }
}

/* --- Minder beweging --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .uitkaart-beeld img,
  .uitkaart-beeld canvas,
  .dienstkaart-beeld img {
    transition: filter 320ms linear;
  }

  .uitkaart:hover .uitkaart-beeld img,
  .uitkaart:focus-visible .uitkaart-beeld img,
  .uitkaart:hover .uitkaart-beeld canvas,
  .uitkaart:focus-visible .uitkaart-beeld canvas,
  .dienstkaart:hover .dienstkaart-beeld img,
  .dienstkaart:focus-visible .dienstkaart-beeld img {
    /* Het oplichten blijft: dat is informatie, geen versiering. Alleen het
       inzoomen gaat eruit, want dát is beweging. */
    transform: none;
  }

  .uitkaart-voet span {
    transition: none;
  }
}
/* Afstemming op het actieve portfolio. */
.band .nakijken { background:var(--beton); border-color:var(--hairline-licht); border-left:3px solid var(--leer-diep); color:var(--nacht) }
.band-nacht .nakijken { background:var(--nacht-zacht); border-color:var(--hairline-donker); color:var(--inkt) }
.band .nakijken p,.band .nakijken strong { color:inherit }
.dienstraster,.pakketraster { margin-top:2.5rem }
.printraster { margin-top:2rem }
.filterknop,.dienstrij-link,.tekstknop { min-height:44px }
.band .knop.primair { background:var(--leer); border-color:var(--leer); color:var(--nacht) }