/* Raamdecoland - productpagina (alleen geladen op body.rdl-pp, na Extra CSS van de Customizer).
   De basisopmaak van de stapkaarten, velden en het bestelblok staat in Extra CSS; dit bestand vult die aan. */

/* ===== Indeling (okt 2026) =====
   Desktop: grid van max. 1280px, links de galerij (div.rdl-pp-media: foto + miniaturen) 1,15fr, rechts de calculator
   1fr, gap 48px. De galerij is sticky (alleen CSS): hij blijft staan tot het eind van de rij met de calculator.
   #wrapper van Kadence heeft overflow: hidden (oude browsers) / clip; hidden breekt sticky, dus alleen hier clip. */
body.rdl-pp #wrapper { overflow: visible; overflow-x: clip; }
body.rdl-pp .site-main > div.product { max-width: 1280px; margin-left: auto; margin-right: auto; }
body.rdl-pp .rdl-pp-media { min-width: 0; }
body.rdl-pp .rdl-pp-media .woocommerce-product-gallery { float: none !important; width: 100% !important; margin: 0 !important; }
@media (min-width: 1024px) {
  body.rdl-pp .site-main > div.product { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 48px; align-items: start; }
  body.rdl-pp .site-main > div.product::before, body.rdl-pp .site-main > div.product::after { display: none; }
  body.rdl-pp .site-main > div.product > * { grid-column: 1 / -1; min-width: 0; }
  /* Sticky op de binnenste div: een sticky grid-item zelf blijft in Chrome plakken tot het eind van de hele grid
     (over de banden eronder heen). De buitenste div rekt mee met rij 1 en begrenst zo de sticky. */
  body.rdl-pp .site-main > div.product > .rdl-pp-media { grid-column: 1; grid-row: 1; align-self: stretch; }
  body.rdl-pp .rdl-pp-media > .rdl-pp-plak { position: sticky; top: calc(16px + var(--rdl-kop-vast, 0px)); }
  body.rdl-pp .site-main > div.product > .summary { grid-column: 2; grid-row: 1; float: none !important; width: 100% !important; }
}
@media (max-width: 1023px) {
  body.rdl-pp .site-main > div.product > .summary { float: none !important; width: 100% !important; }
  body.rdl-pp .site-main > div.product > .summary { margin-bottom: 12px; }
}

/* ===== Regel onder de titel: score, reviews, leverdatum ===== */
body.rdl-pp div.product div.summary p.rdl-pp-regel { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin: 0 0 10px; font-size: 13px; line-height: 1.4; color: #4a5246; }
body.rdl-pp .rdl-pp-regel > span { white-space: nowrap; }
body.rdl-pp .rdl-pp-regel > span + span::before { content: "\00b7"; margin-right: 8px; color: #4a5246; }
body.rdl-pp .rdl-pp-regel__score { display: inline-flex; align-items: center; gap: 6px; }
body.rdl-pp .rdl-pp-regel .rdlh-sterren { display: inline-flex; gap: 1px; }
body.rdl-pp .rdl-pp-regel .rdlh-sterren svg { width: 13px; height: 13px; }
body.rdl-pp .rdl-pp-regel strong { font-weight: 800; color: var(--rdl-ink); }
body.rdl-pp .rdl-pp-regel a { padding: 13px 0; margin: -13px 0; color: var(--rdl-magenta-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* ===== Stap 1: link "Gratis kleurstaal" rechts in de kopregel ===== */
body.rdl-pp .rdl-kleuren__label { flex-wrap: wrap; row-gap: 4px; }
body.rdl-pp .rdl-kleuren__staal { margin: -12px 0 -12px auto; padding: 12px 0; font-family: Figtree, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.4; white-space: nowrap; color: var(--rdl-magenta-ink); text-decoration: underline; text-underline-offset: 2px; }
body.rdl-pp .rdl-kleuren__staal:hover { color: #8a0050; }
body.rdl-pp .rdl-kleuren__staal.is-erin { color: var(--rdl-ink); text-decoration: none; }

/* ===== Stap 2: melding bij een maat die niet leverbaar is (productpagina.js) ===== */
body.rdl-pp .pewc-product-extra-groups > li.rdl-niet-leverbaar { grid-column: 1 / -1; list-style: none; }
body.rdl-pp .pewc-product-extra-groups > li.rdl-niet-leverbaar[hidden] { display: none !important; }
/* Het losse "Let op"-veld: de tekst staat in de melding hierboven. */
body.rdl-pp .pewc-item.rdl-letop-verborgen { display: none !important; }

/* Waarschuwing bij een maat in centimeters (maatcontrole.js) */
body.rdl-pp .pewc-product-extra-groups > li.rdl-maatcontrole { grid-column: 1 / -1; display: grid; gap: 8px; margin: -6px 0 16px; padding: 0; list-style: none; }
body.rdl-pp .rdl-maatcontrole:empty { display: none; }
body.rdl-pp .rdl-maatcontrole__melding { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--rdl-magenta-ink); border-radius: 12px; background: #fdeef5; }
body.rdl-pp .rdl-maatcontrole__melding p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--rdl-ink); }
body.rdl-pp .rdl-maatcontrole__knop { flex: none; min-width: 64px; min-height: 44px; margin: 0; padding: 0 14px; border: 0; border-radius: 10px; background: var(--rdl-magenta-ink) !important; box-shadow: none !important; color: #fff !important; font-family: Figtree, sans-serif; font-size: 16px; font-weight: 700; line-height: 1; white-space: nowrap; cursor: pointer; }
body.rdl-pp .rdl-maatcontrole__knop:hover { background: #a00057 !important; }
body.rdl-pp .rdl-maatcontrole__knop:focus-visible { outline: 3px solid var(--rdl-ink); outline-offset: 2px; }
body.rdl-pp .pewc-item .pewc-number-field[aria-invalid="true"] { border: 2px solid var(--rdl-magenta-ink) !important; }

/* ===== Keuzevelden: één vaste vorm per soort veld (klassen uit productpagina.js) =====
   rdl-tegels  = korte keuzes (2 of 3 opties), kleine tegels naast elkaar
   rdl-kaarten = montagemethode, 4 of meer opties of lange namen: kaarten in 2 kolommen
   In beide: naam, kleine uitlegregel (de tekst tussen haakjes) en de meerprijs rechtsonder. */
body.rdl-pp .pewc-item.rdl-tegels .pewc-checkbox-group-wrapper,
body.rdl-pp .pewc-item.rdl-kaarten .pewc-checkbox-group-wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
body.rdl-pp .pewc-item.rdl-tegels--3 .pewc-checkbox-group-wrapper { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.rdl-pp .pewc-item.rdl-tegels .pewc-checkbox-group-wrapper li,
body.rdl-pp .pewc-item.rdl-kaarten .pewc-checkbox-group-wrapper li { display: flex; min-width: 0; }
body.rdl-pp .pewc-item.rdl-tegels .pewc-radio-form-label,
body.rdl-pp .pewc-item.rdl-kaarten .pewc-radio-form-label { flex: 1 1 auto; align-items: stretch; gap: 0; min-width: 0; box-sizing: border-box; border-radius: 12px; font-size: 0; }
body.rdl-pp .pewc-item.rdl-tegels .pewc-radio-form-label { min-height: 44px; padding: 6px 10px; }
body.rdl-pp .pewc-item.rdl-kaarten .pewc-radio-form-label { min-height: 60px; padding: 10px 12px; }
body.rdl-pp .pewc-item.rdl-tegels .pewc-radio-form-label::before,
body.rdl-pp .pewc-item.rdl-kaarten .pewc-radio-form-label::before { content: none; }
/* Gekozen: rand van 2px; de padding een halve pixel kleiner, zodat de tegel niet verspringt */
body.rdl-pp .pewc-item.rdl-tegels .pewc-radio-form-label:has(input:checked) { padding: 5.5px 9.5px; border: 2px solid var(--rdl-ink); background: var(--rdl-lime-tint); }
body.rdl-pp .pewc-item.rdl-kaarten .pewc-radio-form-label:has(input:checked) { padding: 9.5px 11.5px; border: 2px solid var(--rdl-ink); background: var(--rdl-lime-tint); }
body.rdl-pp .pewc-item.rdl-tegels .pewc-radio-option-text,
body.rdl-pp .pewc-item.rdl-kaarten .pewc-radio-option-text { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: center; gap: 2px 8px; width: 100%; min-width: 0; }
body.rdl-pp .rdl-optie__naam { grid-column: 1 / -1; font-size: 15px; font-weight: 700; line-height: 1.25; color: var(--rdl-ink); overflow-wrap: anywhere; }
body.rdl-pp .pewc-item.rdl-tegels .rdl-optie__naam { font-size: 14px; }
body.rdl-pp .rdl-optie__uitleg { grid-column: 1; font-size: 13px; font-weight: 400; line-height: 1.3; color: #4a5246; overflow-wrap: anywhere; }
body.rdl-pp .pewc-item.rdl-tegels .pewc-separator,
body.rdl-pp .pewc-item.rdl-kaarten .pewc-separator { display: none; }
body.rdl-pp .pewc-item.rdl-tegels .pewc-option-cost-label,
body.rdl-pp .pewc-item.rdl-kaarten .pewc-option-cost-label,
body.rdl-pp .pewc-item.rdl-kaarten--montage .pewc-radio-option-text:not(:has(.pewc-option-cost-label))::after { grid-column: 2; align-self: end; justify-self: end; font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--rdl-ink); white-space: nowrap; }
body.rdl-pp .pewc-item.rdl-tegels .pewc-option-cost-label::before,
body.rdl-pp .pewc-item.rdl-kaarten .pewc-option-cost-label::before { content: "+ "; }
body.rdl-pp .pewc-item.rdl-kaarten--montage .pewc-radio-option-text:not(:has(.pewc-option-cost-label))::after { content: "inbegrepen"; font-weight: 400; color: #4a5246; }

/* ===== Eén optie (bijv. Uitvoering): compacte regel "Uitvoering: Met greep ✓"; de radio blijft gekozen ===== */
body.rdl-pp .pewc-item.rdl-enkel { position: relative; margin-bottom: 14px; }
body.rdl-pp .pewc-item.rdl-enkel .pewc-field-label { margin: 0; }
body.rdl-pp .pewc-item.rdl-enkel .pewc-field-label .required { display: none; }
body.rdl-pp .pewc-item.rdl-enkel .pewc-checkbox-group-wrapper { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body.rdl-pp .rdl-enkel__vink { color: #3f7a00; font-weight: 700; }

/* ===== Uitvoering wisselen: met greep / met koord (de andere tegel is een link naar het gekoppelde product) ===== */
body.rdl-pp .rdl-wissel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
body.rdl-pp .rdl-wissel__tegel { display: flex; align-items: center; min-height: 44px; box-sizing: border-box; padding: 6px 10px; border: 1.5px solid #e1e4dd; border-radius: 12px; background: #fff; font-size: 14px; font-weight: 700; line-height: 1.25; color: var(--rdl-ink); text-decoration: none; }
body.rdl-pp a.rdl-wissel__tegel:hover { border-color: #c9cec3; color: var(--rdl-ink); }
body.rdl-pp a.rdl-wissel__tegel:focus-visible { outline: 3px solid var(--rdl-magenta-ink); outline-offset: 2px; }
body.rdl-pp .rdl-wissel__tegel.is-actief { padding: 5.5px 9.5px; border: 2px solid var(--rdl-ink); background: var(--rdl-lime-tint); }
body.rdl-pp div.product div.summary p.rdl-wissel__vanaf,
body.rdl-pp div.product div.summary p.rdl-systeem { margin: 6px 0 0; font-size: 13px; line-height: 1.45; color: #4a5246; }

/* ===== Kleurvelden als ronde bolletjes (klasse en kleur komen uit productpagina.js) ===== */
body.rdl-pp .pewc-item.rdl-bolletjes .pewc-checkbox-group-wrapper { display: flex; flex-wrap: wrap; gap: 12px; }
body.rdl-pp .pewc-item.rdl-bolletjes .pewc-radio-form-label { display: block; width: 44px; height: 44px; box-sizing: border-box; padding: 0; border: 1px solid rgba(22, 32, 26, 0.28); border-radius: 50%; background: var(--rdl-bol, #e1e4dd); font-size: 0; }
body.rdl-pp .pewc-item.rdl-bolletjes .pewc-radio-form-label::before { content: none; }
body.rdl-pp .pewc-item.rdl-bolletjes .pewc-radio-form-label:hover { border-color: var(--rdl-ink); }
/* Gekozen: rand van 2px, met een witte ring ertussen zodat de keuze ook bij donkere kleuren zichtbaar is */
body.rdl-pp .pewc-item.rdl-bolletjes .pewc-radio-form-label:has(input:checked) { border: 2px solid var(--rdl-ink); background: var(--rdl-bol, #e1e4dd); box-shadow: inset 0 0 0 3px #fff, 0 0 0 3px var(--rdl-lime); }
body.rdl-pp .pewc-item.rdl-bolletjes .pewc-radio-form-label:has(input:focus-visible) { outline: 3px solid var(--rdl-magenta-ink); outline-offset: 2px; }
body.rdl-pp .pewc-item.rdl-bolletjes .pewc-radio-option-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body.rdl-pp .rdl-keuze { font-weight: 400; }

/* ===== Uitleg bij keuzevelden: i-knop en venster in de vorm van het meetvenster (handleidingen.php) ===== */
body.rdl-pp .rdl-uitleg__tekst { margin: 0 0 16px; font-size: 16px; line-height: 1.5; color: #3c4438; }
body.rdl-pp dialog.rdl-uitleg .rdl-meet__volledig[hidden] { display: none; }
body.rdl-pp .pewc-field-label.rdl-met-meetknop .rdl-keuze { white-space: normal; }

/* "Ruimte in huis" is niet verplicht: "(optioneel)" wordt door productpagina.js toegevoegd (vertaalbaar, .rdl-optioneel) */

/* ===== Bestelblok ===== */
body.rdl-pp .rdl-bestelblok__vanaf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 16px; }
body.rdl-pp .rdl-bestelblok__vanaf strong { font-size: 15px; font-weight: 400; color: #c9d1c4; }
body.rdl-pp .rdl-bestelblok__vanaf strong .amount { margin-left: 2px; font-family: Sora, sans-serif; font-weight: 700; font-size: 36px; line-height: 1.1; color: #fff; }
body.rdl-pp .rdl-bestelblok__vanaf > span { font-size: 13px; line-height: 1.35; color: #c9d1c4; }
body.rdl-pp .rdl-bestelblok.is-prijs .rdl-bestelblok__vanaf,
body.rdl-pp .rdl-bestelblok.heeft-vanaf:not(.is-prijs) .pewc-total-only { display: none; }
/* De knoptekst past op een smal scherm op twee regels in plaats van afgekapt te worden */
body.rdl-pp .rdl-bestelblok .single_add_to_cart_button { height: auto; min-height: 56px; padding: 8px 12px; line-height: 1.2 !important; white-space: normal; }
body.rdl-pp div.product div.summary p.rdl-bestelblok__levering { flex: 1 1 100%; margin: 0; font-size: 14px; line-height: 1.4; color: #c9d1c4; }
body.rdl-pp .rdl-bestelblok__levering strong { font-weight: 700; color: #fff; }

/* ===== Vaste bestelbalk (onder 1024px) ===== */
.rdl-bestelbalk { display: none; }

@media (max-width: 1023px) {
  /* Ruimte nuttig gebruiken: zijmarge 16px, 12px tussen de kaarten, 14px in de kaarten */
  body.rdl-pp .content-container.site-container { padding-left: 16px; padding-right: 16px; }
  body.rdl-pp .summary p.price { margin-bottom: 12px; }

  body.rdl-pp { padding-bottom: var(--rdl-balk, 72px); }
  .rdl-bestelbalk { display: flex; align-items: center; gap: 12px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 999; box-sizing: border-box; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--rdl-border); background: #fff; color: var(--rdl-ink); box-shadow: 0 -4px 16px rgba(22, 32, 26, 0.12); transition: transform 0.2s ease, visibility 0.2s; }
  .rdl-bestelbalk.is-verborgen { transform: translateY(110%); visibility: hidden; }
  .rdl-bestelbalk__prijs { flex: none; min-width: 0; display: flex; flex-direction: column; }
  .rdl-bestelbalk__prijs span { font-size: 12px; font-weight: 500; line-height: 1.3; color: var(--rdl-ink-muted); }
  .rdl-bestelbalk__prijs strong, .rdl-bestelbalk__prijs strong .amount { font-family: Sora, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.1; color: var(--rdl-ink); white-space: nowrap; }
  .rdl-bestelbalk__prijs small { font-family: Figtree, sans-serif; font-size: 13px; font-weight: 500; color: var(--rdl-ink-muted); }
  .rdl-bestelbalk.is-prijs .rdl-bestelbalk__vanaf,
  .rdl-bestelbalk.heeft-vanaf:not(.is-prijs) .rdl-bestelbalk__totaal,
  .rdl-bestelbalk [hidden] { display: none !important; }
  .rdl-bestelbalk__knop { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; margin: 0; padding: 0 16px; border: 0; border-radius: 12px; background: var(--rdl-lime) !important; box-shadow: none !important; color: var(--rdl-ink) !important; font-family: Figtree, sans-serif; font-size: 16px; font-weight: 700; line-height: 1.2; cursor: pointer; }
  .rdl-bestelbalk__knop:hover { background: #69b00b !important; }
  .rdl-bestelbalk__knop:focus-visible { outline: 2px solid var(--rdl-ink); outline-offset: 2px; }
  .rdl-bestelbalk__knop[aria-disabled="true"] { background: var(--rdl-border) !important; color: var(--rdl-ink-muted) !important; }
  .rdl-bestelbalk__knop[aria-disabled="true"]::before { opacity: .45; }
  /* Het pilletje "Kleurstalen (n)" blijft boven de balk */
  body.rdl-pp .rdl-stalen.is-zwevend { bottom: calc(var(--rdl-balk, 72px) + 12px); }
}
@media (max-width: 599px) {
  /* Mobiel: montagekaarten onder elkaar; drie tegels met een uitlegregel ook */
  body.rdl-pp .pewc-item.rdl-kaarten--montage .pewc-checkbox-group-wrapper,
  body.rdl-pp .pewc-item.rdl-tegels--3:has(.rdl-optie__uitleg) .pewc-checkbox-group-wrapper { grid-template-columns: minmax(0, 1fr); }
  body.rdl-pp .pewc-item.rdl-kaarten--montage .pewc-radio-form-label { min-height: 52px; }
}
@media (max-width: 479px) {
  /* Smal scherm: de levering op een eigen regel */
  body.rdl-pp .rdl-pp-regel__levering { flex-basis: 100%; }
  body.rdl-pp .rdl-pp-regel > span.rdl-pp-regel__levering::before { content: none; }
}
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  .rdl-bestelbalk { transition: none; }
}

/* ===== Ombouw naar het canvas "Productpagina boven de vouw" =====
   Titel in twee regels (soort klein, kleur + code groot), scoreregel van WebwinkelKeur, stappen met nummers,
   latere stappen ingeklapt tot stap 1 en 2 klaar zijn, en onder het bestelblok de beloftes en het kleurstaal. */
body.rdl-pp .rdl-pp-regel .rdl-pp-regel__score { gap: 8px; padding: 13px 0; margin: -13px 0; font-size: 14px; font-weight: 400; color: var(--rdl-ink-muted); text-decoration: none; }
body.rdl-pp .rdl-pp-regel .rdl-pp-regel__score > span::before { content: none; }
body.rdl-pp .rdl-pp-regel a.rdl-pp-regel__score:hover > span { text-decoration: underline; text-underline-offset: 2px; }
/* De prijs onder de titel vervalt: "vanaf" en de echte prijs staan in het bestelblok */
body.rdl-pp div.product div.summary:has(.rdl-bestelblok.heeft-vanaf) > p.price { display: none; }
body.rdl-pp .rdl-kleuren__alle { font-weight: 600; color: var(--rdl-magenta-ink); text-decoration: underline; text-underline-offset: 2px; }

/* Stappen (klassen uit productpagina.js) */
body.rdl-pp form.rdl-stappen .pewc-group-heading-wrapper { display: none; }
body.rdl-pp .pewc-product-extra-groups > li.rdl-stapkop { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin: 0; padding: 0; list-style: none; font-size: 15px; line-height: 1.3; color: var(--rdl-ink); }
/* Stapnummers: bolletjes uit productpagina.js (.rdl-stapnr), zie "Kleurronde" onderaan */
body.rdl-pp .rdl-optioneel { font-weight: 400; color: var(--rdl-ink-muted); }

/* Onder de prijskaart: het gratis kleurstaal van deze kleur (knop van de productkaart) */
body.rdl-pp .rdl-pp-staal { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--rdl-tint); }
body.rdl-pp div.product div.summary .rdl-pp-staal p { flex: 1 1 200px; margin: 0; font-size: 14px; line-height: 1.4; color: var(--rdl-ink); }
body.rdl-pp .rdl-pp-staal .rdl-lp-kaart__staal { flex: none; margin: 0; }
body.rdl-pp .rdl-pp-staal .rdl-lp-kaart__staalknop { padding: 6px 16px; }

/* ===== Correcties na de test van 12 okt =====
   Stapnummers: alleen de stappen van de calculator tellen (1. Je maat, 2. Montagemethode, ...). Het nummer dat
   Extra CSS van de Customizer vóór "Stofkleur" zet (teller rdlstap) vervalt; Uitvoering heeft er geen. */
body.rdl-pp .rdl-kleuren__label::before { content: none !important; display: none !important; }
/* De regel "Jouw prijs" onder de maatvelden vervalt: de prijs staat in het bestelblok. Het veld zelf blijft
   bestaan (verborgen), want de calculator en de controle "niet leverbaar" lezen de waarde. */
body.rdl-pp .pewc-product-extra-groups > li.pewc-item-calculation { display: none !important; }

/* Hoofdfoto: de ruimte is vooraf gereserveerd in de verhouding van de foto (4:3), zodat er niets verspringt en er
   geen lege ruimte boven of onder de foto staat (de galerij van WooCommerce zet anders zelf een hoogte en maakt de
   foto pas zichtbaar als zijn script klaar is). */
/* Altijd 4:3 (canvas), voor elk product gelijk: greep en koord hebben soms een andere fotoverhouding (1:1 of 4:3),
   dus bij wisselen verspringt er niets. De productfoto wordt nooit bijgesneden (contain op het fotovlak), zodat het
   hele raam met de onderkant van het product zichtbaar is. De inline --rdl-verhouding (functions.php) telt hier niet. */
body.rdl-pp .woocommerce-product-gallery { opacity: 1 !important; }
body.rdl-pp .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper,
body.rdl-pp .woocommerce-product-gallery .flex-viewport { height: auto !important; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 12px; background: var(--rdl-foto-vlak, #e9ebe6); }
body.rdl-pp .woocommerce-product-gallery .woocommerce-product-gallery__image,
body.rdl-pp .woocommerce-product-gallery .woocommerce-product-gallery__image > a { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--rdl-foto-vlak, #e9ebe6); }
body.rdl-pp .woocommerce-product-gallery .woocommerce-product-gallery__image img { display: block; width: 100% !important; height: 100% !important; aspect-ratio: 4 / 3; object-fit: contain; object-position: center; }
body.rdl-pp .woocommerce-product-gallery .rdl-galerij-staal,
body.rdl-pp .woocommerce-product-gallery .rdl-galerij-staal > a { background: #fff; }
/* Zonder slider staan alle foto's in de lijst: alleen de actieve (zonder script: de eerste) is zichtbaar, altijd op volle
   breedte (WooCommerce maakt van foto 2 en verder anders kleine tegels van 25%). */
body.rdl-pp .woocommerce-product-gallery { padding-bottom: 0; }
body.rdl-pp .rdl-pp-media .woocommerce-product-gallery__image { width: 100% !important; height: auto !important; margin: 0 !important; } /* WC-regel nth-child(n+2): height 65px + margin-top -31px */
body.rdl-pp .rdl-pp-media .woocommerce-product-gallery__image ~ .woocommerce-product-gallery__image,
body.rdl-pp .rdl-pp-media.is-klaar .woocommerce-product-gallery__image { display: none !important; }
body.rdl-pp .rdl-pp-media.is-klaar .woocommerce-product-gallery__image.is-actief { display: block !important; }

/* Kruimelpad tot 767px: alleen "← {bovenliggende categorie}" (productpagina.php); daarboven het volledige pad */
body.rdl-pp .rdl-pp-terug { display: none; }
@media (max-width: 767px) {
  body.rdl-pp .kadence-breadcrumbs { display: none; }
  body.rdl-pp .rdl-pp-terug { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 44px; font-size: 14px; font-weight: 600; line-height: 1.2; color: #4a5246; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ===== Stappen: afstandsschaal (8 / 16 / 24 px); de opbouw van de kaart staat onderaan (canvas okt 2026) ===== */
body.rdl-pp form.rdl-stappen { --rdl-ruimte-s: 8px; --rdl-ruimte-m: 16px; --rdl-ruimte-l: 24px; }
/* ===== Herontwerp fase 4 (okt 2026) =====
   Montagestap "Hoe hang je hem op?", maat achter "Jouw prijs", andere kleuren, veelgestelde vragen, reviews als
   uitklapblok op mobiel, galerij zonder vegen en één focusrand (2px donker + offset, tokens.css). */

/* Galerij: geen vegen tussen foto's (flexslider touch uit, productpagina.php); de pagina scrolt gewoon verticaal */
body.rdl-pp .woocommerce-product-gallery .flex-viewport { touch-action: pan-y; }

/* Montagestap: vaste melding onder de keuzes (rdl_pp_montage()) */
body.rdl-pp div.product div.summary p.rdl-montage-melding { grid-column: 1 / -1; margin: var(--rdl-ruimte-s, 8px) 0 0; padding: 10px 12px; border-radius: var(--rdl-radius, 12px); background: var(--rdl-vlak); font-size: 14px; line-height: 1.45; color: var(--rdl-tekst); }
body.rdl-pp .rdl-montage-melding a { display: inline-block; padding: 12px 0; margin: -12px 0; color: var(--rdl-magenta-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* Kop van een sectie onder de kolommen, met rechts een link ("Alle 16 kleuren →") */
body.rdl-pp .rdl-pp-sectie__kop { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin: 0 0 16px; }
body.rdl-pp .rdl-pp-sectie__kop h2 { margin: 0; font-family: var(--rdl-font-kop, Sora, sans-serif); font-size: 22px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; color: var(--rdl-tekst); }
body.rdl-pp a.rdl-pp-sectie__link { display: inline-flex; align-items: center; min-height: var(--rdl-tik, 44px); font-size: 15px; font-weight: 700; color: var(--rdl-magenta-ink); text-decoration: none; }
body.rdl-pp a.rdl-pp-sectie__link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Andere kleuren in deze uitvoering: 2 kolommen mobiel, 4 vanaf 768px */
body.rdl-pp .rdl-pp-kleuren { clear: both; margin: 0 0 32px; }
body.rdl-pp ul.rdl-pp-kleuren__lijst { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { body.rdl-pp ul.rdl-pp-kleuren__lijst { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }

/* Veelgestelde vragen (rdl_faq_html(), opmaak in onderdelen.css) */
body.rdl-pp .rdl-pp-faq { clear: both; margin: 0 0 32px; }

/* Reviews: mobiel een uitklapblok, vanaf 768px open (productpagina.js zet is-open) */
body.rdl-pp .rdl-pp-uitklap > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; cursor: pointer; list-style: none; }
body.rdl-pp .rdl-pp-uitklap > summary::-webkit-details-marker { display: none; }
body.rdl-pp .rdl-pp-uitklap > summary h2 { margin: 0; }
body.rdl-pp .rdl-pp-uitklap > summary::after { content: ""; flex: none; width: 9px; height: 9px; margin-right: 6px; border-right: 2px solid var(--rdl-ink); border-bottom: 2px solid var(--rdl-ink); transform: translateY(-2px) rotate(45deg); transition: transform .2s ease; }
body.rdl-pp .rdl-pp-uitklap[open] > summary { margin-bottom: 12px; }
body.rdl-pp .rdl-pp-uitklap[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
body.rdl-pp .rdl-pp-reviews.is-open .rdl-pp-uitklap > summary { cursor: default; pointer-events: none; min-height: 0; margin-bottom: 16px; }
body.rdl-pp .rdl-pp-reviews.is-open .rdl-pp-uitklap > summary::after { display: none; }
@media (prefers-reduced-motion: reduce) { body.rdl-pp .rdl-pp-uitklap > summary::after { transition: none; } }

/* Eén focusrand op de hele productpagina: 2px donker met offset (wit op de donkere bestelbalk) */
body.rdl-pp :is(a, button, summary, input, select, textarea, .rdl-kleur, [tabindex]):focus-visible { outline: var(--rdl-focus, 2px solid var(--rdl-ink)); outline-offset: var(--rdl-focus-offset, 2px); }
body.rdl-pp .pewc-item.rdl-bolletjes .pewc-radio-form-label:has(input:focus-visible),
body.rdl-pp .pewc-item.rdl-tegels .pewc-radio-form-label:has(input:focus-visible),
body.rdl-pp .pewc-item.rdl-kaarten .pewc-radio-form-label:has(input:focus-visible) { outline: var(--rdl-focus, 2px solid var(--rdl-ink)); outline-offset: var(--rdl-focus-offset, 2px); }
body.rdl-pp .rdl-kleur:focus-visible { outline-offset: 5px; }
body.rdl-pp .rdl-meet-knop:focus-visible { outline-offset: -6px; }
body.rdl-pp .rdl-bestelbalk .rdl-bestelbalk__knop:focus-visible { outline: 2px solid var(--rdl-ink); outline-offset: 2px; }

/* =====================================================================================================================
   Gelijk aan het canvas Product.dc.html (desktop 1440) en ProductMobiel.dc.html (mobiel 390), okt 2026.
   Alleen opmaak, volgorde en zichtbaarheid: de velden en de prijsberekening van Plugin Republic blijven gelijk.
   Kleuren: tekst var(--rdl-ink), grijs var(--rdl-ink-muted), rand var(--rdl-border), invoerrand var(--rdl-border-control), band var(--rdl-tint), actief var(--rdl-lime-tint). Radius 12px.
   ===================================================================================================================== */

/* ----- Galerij: hoofdfoto 4:3 met radius 12px op #ecebe7 (contain: niets bijgesneden, ook niet de staande houtfoto's),
   miniaturen ONDER de foto: knoppen van 96px breed (4:3), gap 8px, doorlopend op een nieuwe regel (geen scroll) ----- */
body.rdl-pp .woocommerce-product-gallery { --rdl-foto-vlak: #ecebe7; }
body.rdl-pp .woocommerce-product-gallery .woocommerce-product-gallery__wrapper,
body.rdl-pp .woocommerce-product-gallery .woocommerce-product-gallery__image,
body.rdl-pp .woocommerce-product-gallery .woocommerce-product-gallery__image img { border-radius: 12px; }
body.rdl-pp .rdl-pp-duimen { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
body.rdl-pp .rdl-pp-media button.rdl-pp-duim { display: block; flex: none; width: 96px; aspect-ratio: 4 / 3; box-sizing: border-box; margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--rdl-border); border-radius: 12px; background: var(--rdl-foto-vlak, #ecebe7) !important; box-shadow: none !important; cursor: pointer; }
body.rdl-pp .rdl-pp-media button.rdl-pp-duim:hover { border-color: var(--rdl-border-control); }
body.rdl-pp .rdl-pp-media button.rdl-pp-duim.is-actief { border: 2px solid var(--rdl-ink); }
body.rdl-pp .rdl-pp-duim__img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 479px) {
  /* Op een smal scherm 4 per rij (96px past niet altijd 4 keer naast elkaar op 360px); tikvlak blijft ruim boven 44px */
  body.rdl-pp .rdl-pp-media button.rdl-pp-duim { width: calc((100% - 24px) / 4); min-width: 64px; }
}

/* ----- Kop: kicker (hoofdcategorie), h1 (kleur + code; het type is visueel verborgen), reviewregel ----- */
body.rdl-pp .screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
body.rdl-pp div.product div.summary .rdl-pp-kicker { display: inline-block; padding: 13px 0; margin: -13px 0; font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--rdl-ink-muted); text-decoration: none; }
body.rdl-pp div.product div.summary a.rdl-pp-kicker:hover { color: var(--rdl-ink); text-decoration: underline; text-underline-offset: 2px; }
body.rdl-pp div.product div.summary h1.product_title { margin: 2px 0 6px; font-family: Sora, sans-serif; font-size: 32px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; color: var(--rdl-ink); }
body.rdl-pp h1.product_title .rdl-h1-code { font-size: 22px; font-weight: 600; letter-spacing: 0; color: var(--rdl-ink-muted); }
body.rdl-pp div.product div.summary p.rdl-pp-regel { margin: 0 0 20px; font-size: 14px; color: var(--rdl-ink); }
body.rdl-pp .rdl-pp-regel .rdl-pp-regel__score { gap: 8px; padding: 12px 0; margin: -12px 0; font-size: 14px; color: var(--rdl-ink); text-decoration: none; }
body.rdl-pp .rdl-pp-regel__sterren { color: #b7791f; letter-spacing: 1px; }
body.rdl-pp .rdl-pp-regel strong { font-weight: 700; color: var(--rdl-ink); }
body.rdl-pp .rdl-pp-regel .rdl-pp-regel__bron { color: var(--rdl-ink-muted); }
body.rdl-pp .rdl-pp-regel a.rdl-pp-regel__score:hover .rdl-pp-regel__bron { text-decoration: underline; text-underline-offset: 2px; }

/* ----- Kleuren: label, stalen van 32px in een tikvlak van 44px (vierkant met radius 8: vaste regel), achterkantregel ----- */
body.rdl-pp div.product div.summary .rdl-kleuren { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; }
body.rdl-pp div.product div.summary .rdl-kleuren__label { display: block; margin: 0 0 6px; font-family: Figtree, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.4; color: var(--rdl-ink); }
body.rdl-pp div.product div.summary .rdl-kleuren__label strong { font-family: inherit; font-size: inherit; font-weight: 700; }
body.rdl-pp .rdl-kleuren__lijst { gap: 4px; }
body.rdl-pp .rdl-kleuren__lijst .rdl-kleur { width: 44px; height: 44px; box-sizing: border-box; padding: 6px; border-radius: 14px; background-origin: content-box !important; background-clip: content-box !important; box-shadow: none; }
body.rdl-pp .rdl-kleuren__lijst .rdl-kleur::before { content: ""; position: absolute; inset: 6px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(22, 32, 26, 0.18); pointer-events: none; }
body.rdl-pp .rdl-kleuren__lijst .rdl-kleur.is-actief { box-shadow: none; }
body.rdl-pp .rdl-kleuren__lijst .rdl-kleur.is-actief::before { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--rdl-ink); }
body.rdl-pp .rdl-kleuren__lijst .rdl-kleur:focus-visible { outline-offset: 0; }
body.rdl-pp div.product div.summary p.rdl-pp-achterkant { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 6px 0 0; padding: 0; font-size: 13px; line-height: 1.45; color: var(--rdl-ink-muted); }
body.rdl-pp .rdl-pp-achterkant strong { font-weight: 600; color: var(--rdl-ink-muted); }
body.rdl-pp div.product div.summary form.cart { margin-top: 20px; }

/* ----- Configurator: één kaart, stappen gescheiden door lijnen, padding 24px ----- */
body.rdl-pp form.cart .pewc-product-extra-groups-wrap { margin: 0; border: 1px solid var(--rdl-border); border-radius: 12px; background: #fff; }
body.rdl-pp form.cart .pewc-group-wrap { counter-increment: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; }
body.rdl-pp form.cart .pewc-group-wrap .pewc-group-content-wrapper { margin: 0; padding: 0; }
body.rdl-pp form.cart .pewc-product-extra-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; row-gap: 0; margin: 0; padding: 0; }
body.rdl-pp form.cart .pewc-product-extra-groups > li { grid-column: 1 / -1; margin: 0 !important; padding: 0 24px; }
body.rdl-pp form.cart .pewc-product-extra-groups > li .pewc-item-field-wrapper { margin: 0; }
body.rdl-pp form.cart .pewc-product-extra-groups > li[data-rdl-stap],
body.rdl-pp form.cart .pewc-product-extra-groups > li.rdl-stapkop { border-top: 1px solid var(--rdl-border); }
body.rdl-pp form.cart .pewc-product-extra-groups > li[data-rdl-stap] { padding: 24px; }
body.rdl-pp form.cart .first-group .pewc-product-extra-groups > li.rdl-stapkop:first-child,
body.rdl-pp form.cart .first-group .pewc-product-extra-groups > li[data-rdl-stap]:first-child { border-top: 0; }
body.rdl-pp form.cart .pewc-field-label .required { display: none; }

/* Stapkoppen: Sora 600 18px, genummerd; rechts de meetlink of de i-knop */
body.rdl-pp form.cart .pewc-product-extra-groups > li.rdl-stapkop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; padding: 24px 24px 12px; font-size: 18px; line-height: 1.3; }
body.rdl-pp li.rdl-stapkop strong,
body.rdl-pp form.cart li[data-rdl-stap] .pewc-field-label { font-family: Sora, sans-serif; font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--rdl-ink); }
body.rdl-pp form.cart li[data-rdl-stap] .pewc-field-label { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
body.rdl-pp form.cart li[data-rdl-stap] .pewc-field-label .rdl-uitleg-knop { margin-left: auto; }
body.rdl-pp button.rdl-meetlink { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; padding: 0; border: 0; border-radius: 0; background: none !important; box-shadow: none !important; font-family: Figtree, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--rdl-ink) !important; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
body.rdl-pp button.rdl-meetlink:hover { color: var(--rdl-magenta-ink) !important; }

/* Uitvoering (greep / koord): segmentknop bovenin de kaart; de andere uitvoering is een link met haar prijs */
body.rdl-pp form.cart .pewc-product-extra-groups > li.rdl-enkel { position: relative; padding: 24px 24px 20px; }
body.rdl-pp form.cart li.rdl-enkel--wissel .pewc-field-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body.rdl-pp .rdl-wissel { gap: 8px; margin: 0; }
body.rdl-pp .rdl-wissel__tegel { flex-direction: column; justify-content: center; align-items: center; gap: 0; min-height: 44px; padding: 6px 10px; border: 1px solid var(--rdl-border-control); border-radius: 12px; text-align: center; }
body.rdl-pp .rdl-wissel__tegel.is-actief { padding: 5px 9px; border: 2px solid var(--rdl-ink); background: var(--rdl-lime-tint); }
body.rdl-pp .rdl-wissel__vanaf { display: block; font-size: 12px; font-weight: 400; line-height: 1.3; color: var(--rdl-ink-muted); }

/* 1. Je maat: Breedte en Hoogte naast elkaar, bereik eronder */
body.rdl-pp form.cart .pewc-product-extra-groups > li.rdl-maatveld { padding-bottom: 24px; }
body.rdl-pp form.cart .pewc-product-extra-groups > li.rdl-maatveld--links { grid-column: 1; padding-right: 0; }
body.rdl-pp form.cart .pewc-product-extra-groups > li.rdl-maatveld--rechts { grid-column: 2; padding-left: 0; }
body.rdl-pp form.cart li.rdl-maatveld .pewc-field-label { margin: 0 0 4px; font-family: Figtree, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.4; }
body.rdl-pp form.cart li.rdl-maatveld input.pewc-number-field { width: 100%; min-height: 44px; box-sizing: border-box; margin: 0; padding: 10px 12px; border: 1px solid var(--rdl-border-control); border-radius: 12px; background: #fff; font-size: 16px; line-height: 1.4; color: var(--rdl-ink); }
body.rdl-pp form.cart li.rdl-maatveld .pewc-description { display: none; }
body.rdl-pp .rdl-bereik { display: block; margin-top: 4px; font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--rdl-ink-muted); }
body.rdl-pp form.cart .pewc-product-extra-groups > li.rdl-maatcontrole,
body.rdl-pp form.cart .pewc-product-extra-groups > li.rdl-niet-leverbaar { margin: 0 0 16px !important; }

/* 2. Hoe hang je hem op?: tegels naast elkaar met icoon, titel en één regel uitleg */
body.rdl-pp .pewc-item.rdl-kaarten--montage .pewc-checkbox-group-wrapper { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; align-items: stretch; gap: 12px; }
body.rdl-pp .pewc-item.rdl-kaarten--montage .pewc-checkbox-group-wrapper > * { height: 100%; }
body.rdl-pp .pewc-item.rdl-kaarten--montage .pewc-radio-form-label { box-sizing: border-box; height: 100%; min-height: 0; padding: 12px; border: 1px solid var(--rdl-border-control); border-radius: 12px; }
body.rdl-pp .pewc-item.rdl-kaarten--montage .pewc-radio-form-label:has(input:checked) { padding: 11px; border: 2px solid var(--rdl-ink); background: var(--rdl-lime-tint); }
body.rdl-pp .pewc-item.rdl-kaarten--montage .pewc-radio-option-text { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
body.rdl-pp .pewc-item.rdl-kaarten--montage .pewc-radio-option-text:not(:has(.pewc-option-cost-label))::after { content: none; }
body.rdl-pp .rdl-optie__icoon { display: block; width: 28px; height: 28px; color: var(--rdl-ink); }
body.rdl-pp .rdl-optie__icoon svg { display: block; }
body.rdl-pp .pewc-item.rdl-kaarten--montage .rdl-optie__naam { font-size: 14px; line-height: 1.3; }
body.rdl-pp .pewc-item.rdl-kaarten--montage .rdl-optie__uitleg { font-size: 13px; line-height: 1.4; color: var(--rdl-ink-muted); }
body.rdl-pp .pewc-item.rdl-kaarten--montage .pewc-option-cost-label { align-self: flex-start; font-size: 13px; font-weight: 600; }
body.rdl-pp div.product div.summary p.rdl-montage-melding { margin: 10px 0 0; padding: 0; border-radius: 0; background: none; font-size: 13px; line-height: 1.45; color: var(--rdl-ink-soft); }
body.rdl-pp .rdl-montage-melding a { color: var(--rdl-ink); }

/* 3. Profielkleur, 4. Bedieningskant, …: ingeklapte rij met rechts de keuze en ▾ */
body.rdl-pp form.cart .pewc-product-extra-groups > li.rdl-inklap { padding: 20px 24px; }
body.rdl-pp form.cart li.rdl-inklap .pewc-field-label { margin: 0; cursor: pointer; }
body.rdl-pp form.cart li.rdl-inklap:not(.is-dicht) .pewc-field-label { margin-bottom: 12px; }
body.rdl-pp li.rdl-inklap .rdl-keuze { display: none; }
body.rdl-pp li.rdl-inklap.is-dicht .pewc-checkbox-group-wrapper,
body.rdl-pp li.rdl-inklap.is-dicht .pewc-description,
body.rdl-pp li.rdl-inklap.is-dicht select { display: none !important; }
body.rdl-pp button.rdl-stap-open { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: -12px 0 -12px auto; padding: 0; border: 0; background: none !important; box-shadow: none !important; font-family: Figtree, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.3; color: var(--rdl-ink-muted) !important; cursor: pointer; }
body.rdl-pp li.rdl-inklap .rdl-uitleg-knop + button.rdl-stap-open { margin-left: 0; }
body.rdl-pp .rdl-stap-open__pijl { transition: transform .2s ease; }
body.rdl-pp li.rdl-inklap:not(.is-dicht) .rdl-stap-open__pijl { transform: rotate(180deg); }
body.rdl-pp li.rdl-inklap.is-wacht .pewc-field-label { color: var(--rdl-ink-muted); cursor: default; }
body.rdl-pp li.rdl-inklap.is-wacht button.rdl-stap-open { cursor: default; }
body.rdl-pp li.rdl-inklap.is-wacht .rdl-stap-open__pijl { display: none; }

/* Ruimte in huis: geen stap, een klein ingeklapt regeltje onderaan de kaart */
body.rdl-pp form.cart .pewc-product-extra-groups > li.rdl-ruimte { padding: 4px 24px; border-top: 1px solid var(--rdl-border); }
body.rdl-pp form.cart .pewc-product-extra-groups > li.rdl-ruimte:not(.is-dicht) { padding-bottom: 20px; }
body.rdl-pp li.rdl-ruimte.is-dicht > .pewc-item-field-wrapper { display: none; }
body.rdl-pp li.rdl-ruimte .pewc-field-label { margin: 0 0 8px; font-size: 14px; font-weight: 700; }
body.rdl-pp li.rdl-ruimte input[type="text"] { width: 100%; min-height: 44px; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--rdl-border-control); border-radius: 12px; font-size: 16px; }
body.rdl-pp button.rdl-ruimte-open { display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: 0; border: 0; background: none !important; box-shadow: none !important; font-family: Figtree, sans-serif; font-size: 14px; font-weight: 600; color: var(--rdl-ink) !important; cursor: pointer; }
body.rdl-pp button.rdl-ruimte-open:hover { text-decoration: underline; text-underline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { body.rdl-pp .rdl-stap-open__pijl { transition: none; } }

/* ----- Prijskaart onder de configurator (canvas "Productpagina · nieuw prijsblok", ProductPrijs/ProductPrijsMobiel) -----
   Vlak surface-tint, radius 12, padding 24 (mobiel 16), 16 tussen de rijen. Rij 1: "Jouw prijs" + keuzes links, prijs
   (Sora 30, mobiel 26) met "incl. btw" rechts; rij 2: levertijd met vrachtwagen; rij 3: knop "In winkelwagen" (lime,
   52px, icoon links); rij 4: beloftes 2×2 met ronde lime vinkjes. Prijs altijd van #pewc-grand-total (2 decimalen). */
body.rdl-pp div.product div.summary .rdl-bestelblok { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-4, 16px); margin: var(--space-6, 24px) 0 0; padding: var(--space-6, 24px); border: 0; border-radius: var(--rdl-radius, 12px); background: var(--rdl-vlak); color: var(--rdl-ink); }
body.rdl-pp .rdl-prijskaart__rij { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
body.rdl-pp .rdl-prijskaart__links { display: flex; flex-direction: column; min-width: 0; }
body.rdl-pp .rdl-bestelblok .rdl-bestelblok__label { font-family: Figtree, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.4; color: var(--rdl-ink); }
body.rdl-pp .rdl-prijskaart__keuzes { font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--rdl-ink-muted); overflow-wrap: anywhere; }
body.rdl-pp .rdl-bestelblok .rdl-bestelblok__prijs { display: flex; flex: none; flex-direction: column; align-items: flex-end; gap: 0; min-width: 0; text-align: right; }
body.rdl-pp .rdl-prijskaart__btw { font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--rdl-ink-muted); }
body.rdl-pp .rdl-bestelblok .rdl-bestelblok__vanaf { display: flex; align-items: baseline; gap: 6px; }
body.rdl-pp .rdl-bestelblok .rdl-bestelblok__vanaf small { font-size: 14px; font-weight: 500; color: var(--rdl-ink-muted); }
body.rdl-pp .rdl-bestelblok .rdl-bestelblok__vanaf strong,
body.rdl-pp .rdl-bestelblok .rdl-bestelblok__vanaf strong .amount,
body.rdl-pp .rdl-bestelblok #pewc-grand-total,
body.rdl-pp .rdl-bestelblok #pewc-grand-total .amount { margin: 0; font-family: Sora, sans-serif; font-size: 30px; font-weight: 700; line-height: 1.1; color: var(--rdl-ink); white-space: nowrap; }
body.rdl-pp .rdl-bestelblok .pewc-total-only { margin: 0; padding: 0; border: 0; }
body.rdl-pp .rdl-bestelblok.is-prijs .rdl-bestelblok__vanaf,
body.rdl-pp .rdl-bestelblok.heeft-vanaf:not(.is-prijs) .pewc-total-only { display: none; }
body.rdl-pp div.product div.summary .rdl-bestelblok p.rdl-prijskaart__levering { margin: 0; font-size: 15px; line-height: 1.4; color: var(--rdl-ink); }
body.rdl-pp .rdl-bestelblok .quantity { display: none; }
body.rdl-pp div.product div.summary .rdl-bestelblok p.rdl-bestelblok__levering { display: none; }
/* Knop: volle breedte, 52px, lime met donkere tekst, winkelwagenicoon links (CSS, want Plugin Republic zet de knoptekst zelf) */
body.rdl-pp div.product div.summary .rdl-bestelblok .single_add_to_cart_button { display: flex; flex: none; align-items: center; justify-content: center; gap: 10px; width: 100%; height: auto; min-height: 52px; margin: 0; padding: 8px 16px; border: 0; border-radius: var(--rdl-radius, 12px); background: var(--rdl-lime); box-shadow: none; color: var(--rdl-ink); font-family: Figtree, sans-serif; font-size: 16px; font-weight: 700; line-height: 1.2 !important; }
body.rdl-pp .rdl-bestelblok .single_add_to_cart_button::before,
.rdl-bestelbalk .rdl-bestelbalk__knop::before { content: ""; flex: none; width: 20px; height: 20px; background: no-repeat center / 20px 20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316201a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.5 11h11L21 8H7'/%3E%3Ccircle cx='9' cy='19.5' r='1.5'/%3E%3Ccircle cx='17' cy='19.5' r='1.5'/%3E%3C/svg%3E"); }
body.rdl-pp .rdl-bestelblok .single_add_to_cart_button:hover { background: #69b00b; color: var(--rdl-ink); }
body.rdl-pp .rdl-bestelblok .single_add_to_cart_button:focus-visible { outline: 2px solid var(--rdl-ink); outline-offset: 2px; }
body.rdl-pp .rdl-bestelblok .single_add_to_cart_button:disabled,
body.rdl-pp .rdl-bestelblok .single_add_to_cart_button.disabled { background: var(--rdl-border); color: var(--rdl-ink-muted); cursor: not-allowed; opacity: 1; }
body.rdl-pp .rdl-bestelblok .single_add_to_cart_button:disabled::before,
body.rdl-pp .rdl-bestelblok .single_add_to_cart_button.disabled::before { opacity: .45; }
/* Beloftes 2×2 */
body.rdl-pp .rdl-bestelblok ul.rdl-pp-beloftes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin: 0; padding: 0; list-style: none; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--rdl-ink-soft); }
body.rdl-pp .rdl-bestelblok ul.rdl-pp-beloftes li { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; }
body.rdl-pp .rdl-bestelblok ul.rdl-pp-beloftes li::before { content: none; }
body.rdl-pp .rdl-bestelblok ul.rdl-pp-beloftes svg { flex: none; }

/* ----- Kleurstaal onder de prijskaart: wit met rand (geen tweede tintvlak tegen de prijskaart, geen roze) ----- */
body.rdl-pp .rdl-pp-staal { gap: 12px; margin: var(--space-4, 16px) 0 0; padding: 12px 16px; border: 1px solid var(--rdl-rand); border-radius: 12px; background: #fff; }
body.rdl-pp .rdl-pp-staal .rdl-lp-kaart__staalknop { min-height: 44px; padding: 0 16px; }

@media (max-width: 767px) {
  body.rdl-pp div.product div.summary .rdl-bestelblok { padding: var(--space-4, 16px); }
  body.rdl-pp .rdl-bestelblok .rdl-bestelblok__vanaf strong,
  body.rdl-pp .rdl-bestelblok .rdl-bestelblok__vanaf strong .amount,
  body.rdl-pp .rdl-bestelblok #pewc-grand-total,
  body.rdl-pp .rdl-bestelblok #pewc-grand-total .amount { font-size: 26px; }
  body.rdl-pp div.product div.summary .rdl-bestelblok p.rdl-prijskaart__levering { font-size: 14px; }
  body.rdl-pp .rdl-bestelblok ul.rdl-pp-beloftes { font-size: 13px; }
}

/* ----- Band onder de hoofdsectie: Eigenschappen & stof (tint van rand tot rand, inhoud max. 1280px) ----- */
/* De tint loopt van rand tot rand (box-shadow + clip-path), zonder horizontale scroll. */
body.rdl-pp .rdl-pp-band,
body.rdl-pp .rdl-pp-reviews { background: var(--rdl-tint); box-shadow: 0 0 0 100vmax var(--rdl-tint); clip-path: inset(0 -100vmax); }
/* Afstanden uit tokens.css: witte secties elk de helft van --rdl-sectie, een band (tint) --rdl-sectie binnenin. */
body.rdl-pp .rdl-pp-band { clear: both; margin: calc(var(--rdl-sectie, 40px) / 2) 0 0; padding: var(--rdl-sectie, 40px) 0; }
body.rdl-pp .rdl-pp-band__in { max-width: 1280px; margin: 0 auto; }
body.rdl-pp .rdl-pp-band h2 { margin: 0 0 var(--space-6, 24px); font-family: Sora, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.25; color: var(--rdl-ink); }
/* Eigenschappen naast elkaar: mobiel 2, tablet 3, desktop 5 kolommen; elke cel een witte kaart */
body.rdl-pp dl.rdl-pp-eig__rijen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; font-size: 15px; line-height: 1.45; }
body.rdl-pp .rdl-pp-eig__cel { min-width: 0; padding: var(--space-4, 16px); border-radius: 12px; background: #fff; }
body.rdl-pp dl.rdl-pp-eig__rijen dt { margin: 0 0 4px; font-size: 13px; font-weight: 500; color: var(--rdl-ink-muted); }
body.rdl-pp dl.rdl-pp-eig__rijen dd { margin: 0; font-weight: 600; color: var(--rdl-ink); overflow-wrap: anywhere; }
@media (min-width: 768px) { body.rdl-pp dl.rdl-pp-eig__rijen { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1024px) { body.rdl-pp dl.rdl-pp-eig__rijen { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
body.rdl-pp ul.rdl-pp-eig__lijst { margin: var(--space-6, 24px) 0 0; padding: 0 0 0 20px; font-size: 15px; line-height: 1.55; color: var(--rdl-ink-soft); }
body.rdl-pp .rdl-pp-eig__lijst li { margin: 0 0 4px; }
/* Over deze kleur, De stof, Onderhoud: naast elkaar vanaf 768px */
body.rdl-pp .rdl-pp-eig__teksten { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6, 24px); margin-top: var(--rdl-blok, 32px); font-size: 15px; line-height: 1.55; color: var(--rdl-ink-soft); }
@media (min-width: 768px) { body.rdl-pp .rdl-pp-eig__teksten { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px; } }
body.rdl-pp .rdl-pp-eig__tekst h3 { margin: 0 0 6px; font-family: Figtree, sans-serif; font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--rdl-ink); }
body.rdl-pp .rdl-pp-eig__tekst p { margin: 0 0 10px; }
body.rdl-pp .rdl-pp-eig__tekst > *:last-child { margin-bottom: 0; }
body.rdl-pp .rdl-pp-eig__link { margin-top: var(--space-6, 24px); }
body.rdl-pp .rdl-pp-band a { color: var(--rdl-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* ----- Meten & monteren (wit, na Andere kleuren): twee kaarten naast elkaar vanaf 768px ----- */
body.rdl-pp .rdl-pp-mm { clear: both; margin: 0; padding: calc(var(--rdl-sectie, 40px) / 2) 0; }
body.rdl-pp .rdl-pp-mm__raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 768px) { body.rdl-pp .rdl-pp-mm__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
body.rdl-pp .rdl-pp-mm__kaart { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: var(--rdl-kaart-pad, 24px); border: 1px solid var(--rdl-border); border-radius: 12px; background: #fff; }
body.rdl-pp .rdl-pp-mm__kaart h3 { margin: 0; font-family: Sora, sans-serif; font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--rdl-ink); }
body.rdl-pp .rdl-pp-mm p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--rdl-ink-soft); }
body.rdl-pp ul.rdl-pp-mm__links { margin: 4px 0 0; padding: 0; list-style: none; }
body.rdl-pp ul.rdl-pp-mm__links li { margin: 0; }
body.rdl-pp ul.rdl-pp-mm__links a { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--rdl-ink); text-decoration: none; }
body.rdl-pp ul.rdl-pp-mm__links a:hover span { text-decoration: underline; text-underline-offset: 2px; }
body.rdl-pp ul.rdl-pp-mm__links svg { flex: none; }
body.rdl-pp .rdl-pp-mm p.rdl-pp-mm__noot { font-size: 14px; color: var(--rdl-ink-muted); }
body.rdl-pp a.rdl-pp-mm__bel { color: var(--rdl-ink); }

/* ----- Andere kleuren, veelgestelde vragen, reviews (band) ----- */
body.rdl-pp .rdl-pp-kleuren { margin: 0; padding: calc(var(--rdl-sectie, 40px) / 2) 0; }
body.rdl-pp .rdl-pp-sectie__kop h2 { font-size: 24px; }
body.rdl-pp .rdl-pp-faq { margin: 0; padding: calc(var(--rdl-sectie, 40px) / 2) 0; }
body.rdl-pp .rdl-pp-reviews { clear: both; margin: 0; padding: var(--rdl-sectie, 40px) 0; border-radius: 0; scroll-margin-top: 16px; }
body.rdl-pp .rdl-pp-reviews h2 { margin: 0; font-family: Sora, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.25; color: var(--rdl-ink); }
body.rdl-pp .rdl-pp-reviews h2 span { font-family: Figtree, sans-serif; font-size: 15px; font-weight: 400; color: var(--rdl-ink-muted); white-space: nowrap; }
body.rdl-pp .rdl-pp-reviews__lijst { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
body.rdl-pp .rdl-pp-review { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 24px; border: 0; border-radius: 12px; background: #fff; }
body.rdl-pp .rdl-pp-review .rdlh-sterren { display: inline-flex; gap: 2px; }
body.rdl-pp .rdl-pp-review blockquote { margin: 0; padding: 0; border: 0; font-size: 15px; font-style: normal; line-height: 1.5; color: var(--rdl-ink); quotes: none; }
body.rdl-pp .rdl-pp-review blockquote::before, body.rdl-pp .rdl-pp-review blockquote::after { content: none; }
body.rdl-pp .rdl-pp-review figcaption { margin-top: auto; font-size: 13px; color: var(--rdl-ink-muted); }

/* ----- Mobiel (tot 1023px): zelfde volgorde onder elkaar ----- */
@media (max-width: 1023px) {
  body.rdl-pp .site-main > div.product > .summary { margin-top: 16px; }
  body.rdl-pp .rdl-pp-band h2 { font-size: 20px; }
  body.rdl-pp .rdl-pp-mm__kaart { padding: var(--space-4, 16px); }
  body.rdl-pp .rdl-pp-reviews h2 { font-size: 20px; }
  body.rdl-pp .rdl-pp-reviews__lijst { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  body.rdl-pp .rdl-pp-review { padding: 16px; }
}
@media (max-width: 767px) {
  body.rdl-pp div.product div.summary h1.product_title { font-size: 26px; }
  body.rdl-pp h1.product_title .rdl-h1-code { font-size: 18px; }
  body.rdl-pp div.product div.summary p.rdl-pp-regel { margin-bottom: 16px; font-size: 13px; }
  body.rdl-pp form.cart .pewc-product-extra-groups { column-gap: 10px; }
  body.rdl-pp form.cart .pewc-product-extra-groups > li { padding-left: 16px; padding-right: 16px; }
  body.rdl-pp form.cart .pewc-product-extra-groups > li[data-rdl-stap] { padding: 20px 16px; }
  body.rdl-pp form.cart .pewc-product-extra-groups > li.rdl-enkel { padding: 20px 16px 16px; }
  body.rdl-pp form.cart .pewc-product-extra-groups > li.rdl-stapkop { padding: 20px 16px 10px; }
  body.rdl-pp form.cart .pewc-product-extra-groups > li.rdl-inklap { padding: 18px 16px; }
  body.rdl-pp form.cart .pewc-product-extra-groups > li.rdl-ruimte { padding: 4px 16px; }
  body.rdl-pp form.cart .pewc-product-extra-groups > li.rdl-maatveld { padding-bottom: 20px; }
  body.rdl-pp form.cart .pewc-product-extra-groups > li.rdl-maatveld--links { padding-right: 0; }
  body.rdl-pp form.cart .pewc-product-extra-groups > li.rdl-maatveld--rechts { padding-left: 0; }
  body.rdl-pp li.rdl-stapkop strong,
  body.rdl-pp form.cart li[data-rdl-stap] .pewc-field-label { font-size: 17px; }
  body.rdl-pp form.cart li.rdl-maatveld .pewc-field-label { font-size: 13px; }
  body.rdl-pp .rdl-pp-staal { padding: 12px; }
  body.rdl-pp div.product div.summary .rdl-pp-staal p { font-size: 13px; }
  body.rdl-pp dl.rdl-pp-eig__rijen { font-size: 14px; }
  body.rdl-pp .rdl-pp-eig__cel { padding: 12px; }
}
@media (max-width: 599px) {
  /* Montagetegels onder elkaar: icoon links, titel en uitleg ernaast */
  body.rdl-pp .pewc-item.rdl-kaarten--montage .pewc-checkbox-group-wrapper { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  body.rdl-pp .pewc-item.rdl-kaarten--montage .pewc-radio-option-text { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 2px 12px; }
  body.rdl-pp .pewc-item.rdl-kaarten--montage .rdl-optie__icoon { grid-column: 1; grid-row: 1 / span 3; }
  body.rdl-pp .pewc-item.rdl-kaarten--montage .rdl-optie__naam,
  body.rdl-pp .pewc-item.rdl-kaarten--montage .rdl-optie__uitleg,
  body.rdl-pp .pewc-item.rdl-kaarten--montage .pewc-option-cost-label { grid-column: 2; justify-self: start; }
  body.rdl-pp div.product div.summary p.rdl-montage-melding { font-size: 12px; }
}

/* ----- Montage met precies één optie (productpagina.js, bouwMontageEnkel): een eigen genummerde stap met één tegel die
   al gekozen is: vinkje, titel, uitleg, rechts "Inbegrepen" (of de meerprijs). Geen losse regel meer. ----- */
body.rdl-pp .pewc-item.rdl-kaarten--montage.rdl-montage-enkel .pewc-checkbox-group-wrapper { grid-template-columns: minmax(0, 1fr); }
body.rdl-pp .pewc-item.rdl-kaarten--montage.rdl-montage-enkel .pewc-radio-form-label { cursor: default; }
body.rdl-pp .pewc-item.rdl-kaarten--montage.rdl-montage-enkel .rdl-optie__icoon { display: none; }
body.rdl-pp .pewc-item.rdl-kaarten--montage.rdl-montage-enkel .pewc-radio-option-text { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; }
body.rdl-pp .pewc-item.rdl-kaarten--montage.rdl-montage-enkel .rdl-optie__vink { grid-column: 1; grid-row: 1 / span 2; display: block; width: 20px; height: 20px; }
body.rdl-pp .pewc-item.rdl-kaarten--montage.rdl-montage-enkel .rdl-optie__vink svg { display: block; }
body.rdl-pp .pewc-item.rdl-kaarten--montage.rdl-montage-enkel .rdl-optie__naam,
body.rdl-pp .pewc-item.rdl-kaarten--montage.rdl-montage-enkel .rdl-optie__uitleg { grid-column: 2; justify-self: start; }
body.rdl-pp .pewc-item.rdl-kaarten--montage.rdl-montage-enkel .rdl-optie__naam { font-size: 15px; }
body.rdl-pp .pewc-item.rdl-kaarten--montage.rdl-montage-enkel .rdl-optie__inbegrepen,
body.rdl-pp .pewc-item.rdl-kaarten--montage.rdl-montage-enkel .pewc-option-cost-label { grid-column: 3; grid-row: 1 / span 2; align-self: center; justify-self: end; font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--rdl-ink); white-space: nowrap; }

/* Eigenschappen-band herzien (17 okt): specificatietabel + kindveilig-kaartje i.p.v. raster van losse tegels.
   Groepsomschrijvingen van Plugin Republic (interne namen als "… – maten en prijs") niet tonen. */
body.rdl-pp .pewc-group-description { display: none !important; }
body.rdl-pp .rdl-pp-eig__boven { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@media (min-width: 900px) { body.rdl-pp .rdl-pp-eig__boven { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 24px; } }
body.rdl-pp dl.rdl-pp-eig__tabel { margin: 0; padding: 4px 20px; border-radius: 12px; background: #fff; font-size: 15px; line-height: 1.45; }
@media (min-width: 1100px) { body.rdl-pp dl.rdl-pp-eig__tabel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; } }
body.rdl-pp .rdl-pp-eig__rij { display: grid; grid-template-columns: minmax(110px, 40%) minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid #e6e8e2; }
@media (min-width: 1100px) { body.rdl-pp .rdl-pp-eig__rij:nth-last-child(-n+2):nth-child(odd), body.rdl-pp .rdl-pp-eig__rij:last-child { border-bottom: 0; } }
@media (max-width: 1099px) { body.rdl-pp .rdl-pp-eig__rij:last-child { border-bottom: 0; } }
body.rdl-pp .rdl-pp-eig__rij dt { margin: 0; font-size: 14px; font-weight: 500; color: var(--rdl-ink-muted); }
body.rdl-pp .rdl-pp-eig__rij dd { margin: 0; font-weight: 600; color: var(--rdl-ink); overflow-wrap: anywhere; }
body.rdl-pp .rdl-pp-eig__kind { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: 12px; background: #fff; border-left: 4px solid var(--rdl-lime); }
body.rdl-pp .rdl-pp-eig__kind-ico { flex: 0 0 auto; color: var(--rdl-ink); margin-top: 2px; }
body.rdl-pp .rdl-pp-eig__kind p { margin: 0; }
body.rdl-pp .rdl-pp-eig__kind-kop { font-family: Figtree, sans-serif; font-size: 16px; font-weight: 700; color: var(--rdl-ink); }
body.rdl-pp .rdl-pp-eig__kind-tekst { margin-top: 2px !important; font-size: 15px; line-height: 1.45; color: var(--rdl-ink); }
body.rdl-pp .rdl-pp-eig__kind-advies { margin-top: 8px !important; font-size: 13px; line-height: 1.5; color: var(--rdl-ink-muted); }
@media (max-width: 599px) { body.rdl-pp dl.rdl-pp-eig__tabel { padding: 2px 16px; font-size: 14px; } body.rdl-pp .rdl-pp-eig__rij { grid-template-columns: minmax(96px, 42%) minmax(0, 1fr); padding: 10px 0; } }

/* ===== Kleurronde (17 okt 2026): lime = actief/bevestigd, magenta = rand/accent, ink = anker =====
   Stapnummers (productpagina.js, .rdl-stapnr met data-staat): leeg = 1,5px grijze rand + grijs cijfer, huidige stap =
   ink bolletje met wit cijfer, ingevuld = lime bolletje met ink vinkje (cijfer weg; schermlezer: "Stap n, ingevuld"). */
body.rdl-pp .rdl-stapnr { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 28px; height: 28px; box-sizing: border-box; margin-right: 10px; border: 1.5px solid var(--rdl-border-control); border-radius: 50%; background: #fff; font-family: Figtree, sans-serif; font-size: 14px; font-weight: 700; line-height: 1; color: var(--rdl-ink-muted); vertical-align: middle; }
body.rdl-pp form.cart li[data-rdl-stap] .pewc-field-label .rdl-stapnr { margin-right: 2px; } /* het label heeft zelf al gap 8px */
body.rdl-pp .rdl-stapnr[hidden] { display: none; }
body.rdl-pp .rdl-stapnr[data-staat="huidig"] { border-color: var(--rdl-ink); background: var(--rdl-ink); color: #fff; }
body.rdl-pp .rdl-stapnr[data-staat="klaar"] { border-color: var(--rdl-lime); background: var(--rdl-lime) var(--rdl-vink) center / 100% no-repeat; color: transparent; }
body.rdl-pp li.rdl-stapkop strong { display: inline-flex; align-items: center; }
body.rdl-pp .rdl-stapkop__samen { margin-left: auto; font-family: Figtree, sans-serif; font-size: 14px; font-weight: 600; color: var(--rdl-ink-muted); white-space: nowrap; }
body.rdl-pp .rdl-stapkop__samen[hidden] { display: none; }
body.rdl-pp .rdl-stapkop__samen + .rdl-meetlink { margin-left: 4px; }

/* Gekozen optie: lime-tint + 2px ink rand (bestond al) + lime vinkbolletje vóór de naam; montagetegels rechtsboven */
body.rdl-pp .pewc-item.rdl-tegels .pewc-radio-form-label:has(input:checked) .rdl-optie__naam::before,
body.rdl-pp .pewc-item.rdl-kaarten:not(.rdl-kaarten--montage) .pewc-radio-form-label:has(input:checked) .rdl-optie__naam::before { content: ""; display: inline-block; width: 18px; height: 18px; margin: 0 6px 0 0; border-radius: 50%; background: var(--rdl-lime) var(--rdl-vink) center / 100% no-repeat; vertical-align: -3px; }
body.rdl-pp .pewc-item.rdl-kaarten--montage:not(.rdl-montage-enkel) .pewc-radio-form-label { position: relative; }
body.rdl-pp .pewc-item.rdl-kaarten--montage:not(.rdl-montage-enkel) .pewc-radio-form-label:has(input:checked)::after { content: ""; position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; border-radius: 50%; background: var(--rdl-lime) var(--rdl-vink) center / 100% no-repeat; }

/* Segmentknop greep / koord: de actieve uitvoering krijgt het vinkbolletje links */
body.rdl-pp .rdl-wissel__tegel { position: relative; }
body.rdl-pp .rdl-wissel__tegel.is-actief::before { content: ""; position: absolute; top: 50%; left: 10px; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: var(--rdl-lime) var(--rdl-vink) center / 100% no-repeat; }
body.rdl-pp .rdl-wissel__tegel.is-actief { padding-left: 34px; padding-right: 34px; }

/* Gekozen kleur: bestaande ink-ring + klein lime vinkbolletje rechtsboven (18px, witte rand 2px) */
.rdl-kleur__vink { position: absolute; top: -6px; right: -6px; z-index: 2; width: 18px; height: 18px; box-sizing: border-box; border: 2px solid #fff; border-radius: 50%; background: var(--rdl-lime) var(--rdl-vink) center / 100% no-repeat; pointer-events: none; }
body.rdl-pp .rdl-kleuren__lijst .rdl-kleur__vink { top: 0; right: 0; }
body.rdl-pp .pewc-item.rdl-bolletjes .pewc-radio-form-label { position: relative; }
body.rdl-pp .pewc-item.rdl-bolletjes .pewc-radio-form-label:has(input:checked) { box-shadow: inset 0 0 0 3px #fff, 0 0 0 2px #fff, 0 0 0 4px var(--rdl-ink); }
body.rdl-pp .pewc-item.rdl-bolletjes .pewc-radio-form-label:has(input:checked)::after { content: ""; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; box-sizing: border-box; border: 2px solid #fff; border-radius: 50%; background: var(--rdl-lime) var(--rdl-vink) center / 100% no-repeat; }

/* Kicker boven de productnaam: #C4006A */
body.rdl-pp div.product div.summary .rdl-pp-kicker { color: var(--rdl-magenta-ink); }
body.rdl-pp div.product div.summary a.rdl-pp-kicker:hover { color: var(--rdl-magenta-ink); }

/* Staalblok onder de prijskaart: neutraal (wit met rand), de knop zelf magenta (productkaart.css) */
body.rdl-pp .rdl-pp-staal .rdl-lp-kaart__staalknop .is-aan { gap: 6px; }

/* ----- 18 okt 2026: Profielkleur (en andere kleurvelden) als staalvierkantjes, zelfde vorm als de stofkleuren: swatch 32px (radius 8,
   inwendige rand) in een tikvlak van 44px; gekozen = ink ring met witte tussenring + lime vinkbolletje. Altijd open (geen inklaprij). ----- */
body.rdl-pp .pewc-item.rdl-bolletjes .pewc-checkbox-group-wrapper { gap: 4px; align-items: flex-start; }
body.rdl-pp .pewc-item.rdl-bolletjes .pewc-checkbox-group-wrapper > li { display: flex; flex-direction: column; align-items: center; margin: 0; }
body.rdl-pp .pewc-item.rdl-bolletjes .pewc-radio-form-label,
body.rdl-pp .pewc-item.rdl-bolletjes .pewc-radio-form-label:has(input:checked) { position: relative; width: 44px; height: 44px; box-sizing: border-box; padding: 6px; border: 0; border-radius: 14px; background: var(--rdl-bol, #e1e4dd); background-origin: content-box !important; background-clip: content-box !important; box-shadow: none; font-size: 0; }
body.rdl-pp .pewc-item.rdl-bolletjes .pewc-radio-form-label::before { content: ""; position: absolute; inset: 6px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(22, 32, 26, 0.28); pointer-events: none; }
body.rdl-pp .pewc-item.rdl-bolletjes .pewc-radio-form-label:hover::before { box-shadow: inset 0 0 0 1px var(--rdl-ink); }
body.rdl-pp .pewc-item.rdl-bolletjes .pewc-radio-form-label:has(input:checked)::before { box-shadow: inset 0 0 0 1px rgba(22, 32, 26, 0.28), 0 0 0 2px #fff, 0 0 0 4px var(--rdl-ink); }
body.rdl-pp .pewc-item.rdl-bolletjes .pewc-radio-form-label:has(input:checked)::after { top: 0; right: 0; }
body.rdl-pp .pewc-item.rdl-bolletjes .pewc-radio-form-label:has(input:focus-visible) { outline-offset: 0; border-radius: 14px; }
body.rdl-pp .pewc-item.rdl-bolletjes .rdl-bol__prijs { display: block; margin-top: 2px; font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--rdl-ink); white-space: nowrap; }

/* ----- 18 okt 2026: ophangkaarten "Hoe hang je hem op?" altijd in gelijke rijen, nooit één kaart alleen (data-aantal uit productpagina.js).
   Zes kolommen: smal (container < 480px, mobiel) 2 per rij met bij een oneven aantal de laatste over de volle breedte;
   breed: 2 → 2 · 3 → 3 · 4 → 2+2 · 5 → 3+2 · 6 → 3+3. Rijen even hoog (grid-auto-rows: 1fr). ----- */
body.rdl-pp .pewc-item.rdl-kaarten--montage { container-type: inline-size; container-name: rdl-montage; }
body.rdl-pp .pewc-item.rdl-kaarten--montage .pewc-checkbox-group-wrapper { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
body.rdl-pp .pewc-item.rdl-kaarten--montage .pewc-checkbox-group-wrapper > li { grid-column: span 3; }
body.rdl-pp .pewc-item.rdl-kaarten--montage .pewc-checkbox-group-wrapper > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
body.rdl-pp .pewc-item.rdl-kaarten--montage .rdl-optie__naam,
body.rdl-pp .pewc-item.rdl-kaarten--montage .rdl-optie__uitleg { min-width: 0; overflow-wrap: normal; word-break: normal; hyphens: manual; }
@container rdl-montage (min-width: 480px) {
  body.rdl-pp .pewc-item.rdl-kaarten--montage[data-aantal="3"] .pewc-checkbox-group-wrapper > li,
  body.rdl-pp .pewc-item.rdl-kaarten--montage[data-aantal="3"] .pewc-checkbox-group-wrapper > li:last-child:nth-child(odd),
  body.rdl-pp .pewc-item.rdl-kaarten--montage[data-aantal="6"] .pewc-checkbox-group-wrapper > li,
  body.rdl-pp .pewc-item.rdl-kaarten--montage[data-aantal="5"] .pewc-checkbox-group-wrapper > li:nth-child(-n+3) { grid-column: span 2; }
  body.rdl-pp .pewc-item.rdl-kaarten--montage[data-aantal="5"] .pewc-checkbox-group-wrapper > li:nth-child(n+4),
  body.rdl-pp .pewc-item.rdl-kaarten--montage[data-aantal="5"] .pewc-checkbox-group-wrapper > li:nth-child(n+4):last-child { grid-column: span 3; }
  /* 19 okt 2026: zeven of meer opties: drie per rij (mobiel blijft 2 per rij, met bij oneven de laatste over de volle breedte) */
  body.rdl-pp .pewc-item.rdl-kaarten--montage[data-veel] .pewc-checkbox-group-wrapper > li,
  body.rdl-pp .pewc-item.rdl-kaarten--montage[data-veel] .pewc-checkbox-group-wrapper > li:last-child:nth-child(odd) { grid-column: span 2; }
}
/* QuickFit-regel onder de uitleg: muted, kleine tekst */
body.rdl-pp .pewc-item.rdl-kaarten--montage .rdl-optie__noot { font-size: 13px; color: var(--rdl-ink-muted); }
@media (max-width: 599px) {
  /* Smalle kaarten (2 per rij): icoon boven, titel en uitleg eronder */
  body.rdl-pp .pewc-item.rdl-kaarten--montage .pewc-checkbox-group-wrapper { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
  body.rdl-pp .pewc-item.rdl-kaarten--montage .pewc-radio-option-text { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
  body.rdl-pp .pewc-item.rdl-kaarten--montage .rdl-optie__icoon { grid-column: auto; grid-row: auto; }
  body.rdl-pp .pewc-item.rdl-kaarten--montage .rdl-optie__naam,
  body.rdl-pp .pewc-item.rdl-kaarten--montage .rdl-optie__uitleg,
  body.rdl-pp .pewc-item.rdl-kaarten--montage .pewc-option-cost-label { grid-column: auto; justify-self: auto; }
}
body.rdl-pp .pewc-item.rdl-bolletjes .pewc-theme-element { display: none; }
body.rdl-pp .pewc-item.rdl-bolletjes .pewc-field-label .rdl-keuze { margin-left: -8px; font-weight: 600; }
body.rdl-pp .pewc-item.rdl-bolletjes .pewc-radio-form-label::before,
body.rdl-pp .pewc-item.rdl-bolletjes .pewc-radio-form-label:has(input:checked)::before { width: auto; height: auto; margin: 0; border: 0; background: transparent; transform: none; opacity: 1; }
@container rdl-montage (min-width: 480px) {
  /* Drie per rij: iets strakker, zodat ook "Spanschoenmontage" zonder afbreken past */
  body.rdl-pp .pewc-item.rdl-kaarten--montage .pewc-checkbox-group-wrapper { gap: 8px; }
  body.rdl-pp .pewc-item.rdl-kaarten--montage .pewc-radio-form-label { padding: 10px; }
  body.rdl-pp .pewc-item.rdl-kaarten--montage .pewc-radio-form-label:has(input:checked) { padding: 9px; }
}

/* Meten & monteren: rechts in de kop bellen + de compacte DM-knop (onderdelen.css); breekt mobiel onder de kop */
body.rdl-pp .rdl-pp-mm__hulp { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
body.rdl-pp .rdl-meet__dm { margin-top: 12px; }