/* Nova — de vorm van www.houtjansok.nl, tot op de pixel.
 *
 * Deze bladzijde is opgemeten aan de echte winkel: elke maat hieronder komt
 * uit de browser op die site en niet uit een schatting. Dat is met opzet.
 * "Lijkt erop" is een mening en daar valt over te twisten; een getal niet.
 *
 * Twee dingen om te weten als je hier iets verandert:
 *
 *  1. De maten glijden mee met het venster. De echte site rekent in rem bij
 *     een wortelmaat van 90%; wij rekenen in pixels, want onze rest doet dat
 *     ook en twee rekenmanieren door elkaar is vragen om verschil. De
 *     clamp()-formules hieronder geven op elke breedte hetzelfde getal.
 *  2. Kleuren komen uit het thema, niet uit deze bladzijde. Wat hier staat
 *     is de vorm; de winkel bepaalt de kleur. Vandaar --winkel-accent en
 *     vrienden, met de waarden van de echte winkel als terugval.
 */

.winkel.nova {
  /* De gedempte tekstkleur van het pakket wijkt een tint af van die van
     Nova. Twee grijzen door elkaar zie je wel, ook al kun je het niet
     aanwijzen. Onder Nova is er dus één. */
  --sub: #667085;
  --muted: #98A2B3;
}

/* De basisletter van de winkel. Hun site staat op 13.5 px en de onze stond
   op 14. Dat verschil zie je nergens waar een maat is opgegeven, en overal
   waar dat niet zo is: in een tabelcel, in een keuzelijst, in een melding.
   Precies de plekken waar je niet kijkt tot het opvalt. */
.winkel.nova { font-size: var(--winkel-grootte, 13.5px); line-height: 1.5; }

.winkel {
  --nova-lijn: var(--line, #E5E6E5);
  --nova-vlak: var(--wash2, #F6F6F6);
  --nova-tint: var(--wash, #EEEFED);
  --nova-inkt: var(--ink, #333333);
  --nova-gedempt: #667085;
  --nova-flets: #98A2B3;
  --nova-accent: var(--winkel-accent, #45523C);
  --nova-accent-op: var(--winkel-accent-ink, #fff);
  --nova-groen: #26cb7c;
  --nova-ster: #F6B01E;
  --nova-ster-leeg: #E4E7EC;
  --nova-r-klein: 6px;
  --nova-r-kaart: 9px;
  /* Zijruimte en balkhoogte glijden tussen 390 en 1320 venster. */
  --nova-zij: clamp(15px, 9px + 1.2vw, 32px);
  --nova-balk-h: clamp(57.6px, 54.58px + 0.8602vw, 64.8px);
  --nova-gat: clamp(10.8px, -3.6px + 1.5625vw, 14.4px);
}

.vorm-nova .nova-mid {
  width: 100%;
  max-width: var(--site-breedte);
  margin-inline: auto;
  padding-inline: var(--nova-zij);
}

/* ── De beloftebalk: witte strook met groene vinkjes ──────────────────── */

.shop-usp.vorm-nova {
  background: #fff;
  color: var(--nova-inkt);
  border-bottom: 1px solid var(--nova-lijn);
  padding: 0;
}
.shop-usp.vorm-nova .nova-mid {
  height: 36px;
  padding-block: 0;
  color: var(--nova-inkt);
  flex-wrap: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
  overflow: hidden;
  font-size: 13px;
  line-height: 1;
}
.shop-usp.vorm-nova .usp-punt {
  display: flex;
  align-items: center;
  gap: 7.2px;
  white-space: nowrap;
}
.shop-usp.vorm-nova .usp-punt svg { flex: none; color: var(--nova-groen); }
/* Past het niet naast elkaar (een telefoon), dan één belofte per keer. */
.shop-usp.vorm-nova .nova-mid.wisselt { justify-content: space-between; }
.shop-usp.vorm-nova .nova-mid.wisselt .usp-punt { display: none; }
.shop-usp.vorm-nova .nova-mid.wisselt .usp-punt.aan { display: flex; }
.shop-usp.vorm-nova .usp-stippen { display: flex; gap: 6px; flex: none; }
.shop-usp.vorm-nova .usp-stippen[hidden] { display: none; }
.shop-usp.vorm-nova .usp-stippen i { width: 6px; height: 6px; border-radius: 50%; background: var(--nova-lijn); }
.shop-usp.vorm-nova .usp-stippen i.aan { background: var(--nova-accent); }
/* Het vinkje is een tekening, geen letter: het oude haakje weg. */
.shop-usp.vorm-nova .shop-usp-in span::before { content: none; margin: 0; }

/* ── De menubalk ──────────────────────────────────────────────────────── */

.shop-header.vorm-nova {
  background: #fff;
  color: var(--nova-inkt);
  border-bottom: 1px solid var(--nova-lijn);
  position: sticky;
  top: 0;
  z-index: 33;
  padding: 0;
  box-shadow: none;
}
.shop-header.vorm-nova .shop-header-in {
  width: 100%;
  max-width: var(--site-breedte);
  margin-inline: auto;
  padding-inline: var(--nova-zij);
  padding-block: 0;
  height: var(--nova-balk-h);
  display: flex;
  align-items: center;
  gap: var(--nova-gat);
  /* De balk is één regel. Wat er niet bij past verdwijnt in het mobiele
     menu; hij mag nooit omslaan, want dan verspringt de hele pagina. */
  flex-wrap: nowrap;
}
.shop-header.vorm-nova .logo-beeld { height: auto; max-height: 38px; width: auto; }

/* De knoppen in de balk delen één maat: 39.6 hoog, hoek 6. */
.shop-header.vorm-nova .nova-knop,
.shop-header.vorm-nova .shop-paneel-knop,
.shop-header.vorm-nova .shop-wagen,
.shop-header.vorm-nova .ghost {
  height: 39.6px;
  border-radius: var(--nova-r-klein);
  font-size: 13.5px;
  line-height: 1;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
  text-decoration: none;
  border: 0;
}
/* De stille knoppen in de kop zijn écht stil: geen randje, geen schaduw.
   Alleen de twee die iets doen wat je wilt vinden (assortiment, wagen)
   dragen de huiskleur. Alles ertussenin dezelfde ruimte, anders lijkt de
   balk scheef terwijl alles op zijn plek staat. */
.shop-header.vorm-nova .ghost {
  background: none;
  color: var(--nova-inkt);
  font-weight: 500;
  font-size: 12.6px;
  padding-inline: 10.8px;
  box-shadow: none;
}
.shop-header.vorm-nova .ghost:hover { background: var(--nova-vlak); }
/* Het zoekveld heeft een eigen maat en groeit NIET mee met wat er verder in
   de balk staat. Dat is het verschil tussen een balk die klopt en een balk
   die verspringt: log je in, dan komt je naam erbij, en een meegroeiend
   zoekveld schuift dan een halve centimeter op. Op elke pagina dezelfde
   plek, dezelfde breedte. Alleen als er écht geen ruimte is krimpt hij. */
/* De overgebleven ruimte gaat naar de knoppen rechts, niet naar het veld. */
.shop-header.vorm-nova .shop-kop-rechts { margin-left: auto; }
/* De knoppen rechts staan strak bij elkaar; de winkelwagen krijgt lucht
   ervoor, want dat is het einde van de rij. */
.shop-header.vorm-nova .shop-kop-rechts { gap: 2px; }
.shop-header.vorm-nova .shop-kop-rechts > .shop-wagen { margin-left: 10.8px; }
.shop-header.vorm-nova .shop-koptel { padding-inline: 10.8px; }

/* Assortiment en winkelwagen dragen de huiskleur; de rest is stil. */
.shop-header.vorm-nova .shop-paneel-knop,
.shop-header.vorm-nova .shop-wagen {
  background: var(--nova-accent);
  color: var(--nova-accent-op);
  padding-inline: 21.6px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
.shop-header.vorm-nova .shop-wagen { padding-inline: 14.4px; }
.shop-header.vorm-nova .shop-paneel-knop:hover,
.shop-header.vorm-nova .shop-wagen:hover {
  background: color-mix(in srgb, var(--nova-accent) 85%, #000);
}

/* Zoeken: een vlak veld met een dunne rand, hoogstens 560 breed. */
/* Het zoekveld heeft een eigen maat en groeit NIET mee met wat er verder in
   de balk staat. Dat is het verschil tussen een balk die klopt en een balk
   die verspringt: log je in, dan komt er een knop bij, en een meegroeiend
   veld schuift dan mee. Op elke pagina dezelfde plek en dezelfde breedte;
   alleen als er echt geen ruimte is krimpt hij.
   En margin: 0, want dit is een <form> en die heeft van huis uit ruimte
   onderaan. Daardoor stond hij zeven pixels hoger dan de rest van de balk
   en dat zie je meteen, ook al kun je het niet aanwijzen. */
.shop-header.vorm-nova .shop-zoek {
  flex: 0 1 500px;
  min-width: 200px;
  max-width: 500px;
  height: 39.6px;
  margin: 0;
  background: var(--nova-vlak);
  border: 1px solid var(--nova-lijn);
  border-radius: var(--nova-r-klein);
  display: flex;
  align-items: center;
  position: relative;
  padding: 0;
}
.shop-header.vorm-nova .shop-zoek > svg {
  order: 2;
  position: absolute;
  right: 14.4px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--nova-inkt);
  width: 17px;
  height: 17px;
}
.shop-header.vorm-nova .shop-zoek input {
  width: 100%;
  height: 100%;
  min-width: 0;
  background: none;
  border: 0;
  outline: 0;
  font-size: 12.6px;
  color: var(--nova-inkt);
  padding: 0 43.2px 0 18px;
}
.shop-header.vorm-nova .shop-zoek input::placeholder { color: var(--nova-gedempt); }

/* Telefoon met openingstijden. */
.shop-header.vorm-nova .shop-koptel { gap: 9px; }
.shop-header.vorm-nova .shop-koptel-tekst b { font-size: 12.6px; font-weight: 600; }
.shop-header.vorm-nova .shop-koptel-tekst small { font-size: 10.8px; color: var(--nova-gedempt); }

/* De btw-schakelaar: een schuifje, geen uitklaplijst. */
.shop-header.vorm-nova .shop-btw {
  height: 39.6px;
  padding-inline: 5.4px;
  gap: 7.2px;
  font-size: 12.6px;
  font-weight: 500;
  border-radius: var(--nova-r-klein);
}
.shop-header.vorm-nova .shop-btw-schakel {
  width: 30.6px;
  height: 18px;
  border-radius: 999px;
  background: var(--nova-tint);
  padding: 2px;
}
.shop-header.vorm-nova .shop-btw-schakel::after { width: 14.4px; height: 14.4px; top: 2px; left: 2px; }
.shop-header.vorm-nova .shop-btw.aan .shop-btw-schakel { background: var(--nova-accent); }
.shop-header.vorm-nova .shop-btw.aan .shop-btw-schakel::after { left: 14.2px; }

/* Het rondje op de accountknop als je ingelogd bent. */
.shop-header.vorm-nova .nova-vinkje {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: var(--nova-groen);
  display: grid;
  place-items: center;
  border: 2px solid #fff;
}

/* ── De tweede rij: de categorieën onder de balk ──────────────────────── */

.shop-menu.vorm-nova {
  background: #fff;
  border-bottom: 1px solid var(--nova-lijn);
}
.shop-menu.vorm-nova .nova-mid {
  height: 43.2px;
  display: flex;
  align-items: center;
  gap: 21.6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.shop-menu.vorm-nova .nova-mid::-webkit-scrollbar { display: none; }
.shop-menu.vorm-nova .shop-menu-in { padding-block: 0; }
.shop-menu.vorm-nova .shop-menu-item { display: flex; align-items: center; }
.shop-menu.vorm-nova .shop-menu-kop,
.shop-menu.vorm-nova a {
  display: flex;
  align-items: center;
  gap: 5.4px;
  font-size: 12.6px;
  font-weight: 500;
  line-height: 18.9px;
  color: var(--nova-inkt);
  text-decoration: none;
  white-space: nowrap;
}
.shop-menu.vorm-nova .shop-menu-item:first-child > * { font-weight: 600; }
/* Geen pijltjes achter de koppen in de balk: de eigenaar wil ze niet. */
.shop-menu.vorm-nova .shop-menu-kop { list-style: none; }
.shop-menu.vorm-nova .shop-menu-kop::-webkit-details-marker { display: none; }
.shop-menu.vorm-nova .shop-menu-kop::after,
.shop-menu.vorm-nova .shop-menu-kop::before,
.shop-menu.vorm-nova .shop-menu-kop svg,
.shop-menu.vorm-nova .shop-menu-kop .pijl { display: none !important; content: none; }
.shop-menu.vorm-nova .shop-menu-kop:hover,
.shop-menu.vorm-nova a:hover { color: var(--nova-accent); background: none; }
/* De uitklaplade hangt onder de regel, niet ernaast. */
.shop-menu.vorm-nova .shop-menu-lade { border-radius: var(--nova-r-kaart); border-color: var(--nova-lijn); }

/* ── De productkaart ──────────────────────────────────────────────────── */

.shop-tegels.vorm-nova {
  display: grid;
  /* Zoveel kaarten als er passen: vier op 1280, zes op een breed scherm. */
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}
@media (max-width: 820px)  { .shop-tegels.vorm-nova { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.shop-kaart.vorm-nova {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--nova-lijn);
  border-radius: var(--nova-r-kaart);
  padding: 12px;
  overflow: hidden;
  box-shadow: none;
  color: var(--nova-inkt);
  text-decoration: none;
}
/* Een Nova-kaart zweeft niet bij hover: alleen de rand wordt iets donkerder.
   De oude opmaak schoof de kaart 2 px omhoog, en in een rij die zijwaarts
   schuift wordt de bovenkant dan afgeknipt: de bovenlijn was weg. */
.shop-kaart.vorm-nova:hover { border-color: color-mix(in srgb, var(--nova-lijn) 78%, var(--nova-inkt)); transform: none; box-shadow: none; }
.shop-kaart.vorm-nova > img,
.shop-kaart.vorm-nova .foto-leeg {
  aspect-ratio: 1 / 1;
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: var(--nova-r-klein);
  margin-bottom: 7.2px;
  background: none;
}
.shop-kaart.vorm-nova .nova-body { padding: 0; display: block; flex: 1; }
/* Voorraad, met de kleur die het antwoord al geeft voor je leest. */
.nova-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: var(--nova-r-klein);
  color: #067647;
  background: #E7F8F0;
}
.nova-chip.nova-chip--nee { color: #B42318; background: #FEF3F2; }
.nova-chip.nova-chip--wacht { color: #B54708; background: #FFFAEB; }
.nova-chip.nova-chip--bijna { color: #9a5a05; background: #fdefd9; }
/* De link naar de vestigingen naast de voorraadregel, en de lijst zelf. */
.nova-vestigingen { font-size: 11.5px; font-weight: 600; color: var(--nova-accent); text-decoration: none; white-space: nowrap; }
.nova-vestigingen:hover { text-decoration: underline; }
.winkel.nova .pdp-voorraad { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 4px; }
.winkel.nova .pdp-voorraad-zin { flex-basis: 100%; font-size: 12.6px; color: var(--nova-gedempt); }
.winkel.nova .pdp-vestigingen { flex-basis: 100%; border: 1px solid var(--nova-lijn); border-radius: 8px; background: #fff; margin-top: 4px; }
.winkel.nova .pdp-vestigingen summary { list-style: none; cursor: pointer; padding: 10px 14px; font-weight: 600; font-size: 13px; }
.winkel.nova .pdp-vestigingen summary::-webkit-details-marker { display: none; }
.winkel.nova .pdp-vestigingen summary::after { content: "⌄"; float: right; color: var(--nova-gedempt); }
.winkel.nova .pdp-vestigingen[open] summary { border-bottom: 1px solid var(--nova-lijn); }
.winkel.nova .pdp-vestiging { display: grid; grid-template-columns: 1fr auto; gap: 0 12px; align-items: center; padding: 9px 14px; border-bottom: 1px solid var(--nova-lijn); font-size: 13px; }
.winkel.nova .pdp-vestiging:last-child { border-bottom: 0; }
.winkel.nova .pdp-vestiging small { grid-column: 1; color: var(--nova-gedempt); font-size: 12px; }
.winkel.nova .pdp-vestiging .nova-chip { grid-column: 2; grid-row: 1 / 3; }
.shop-kaart.vorm-nova .nova-chiprij {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5.4px 10.8px;
  margin-bottom: 7.2px;
}
.nova-sterren { display: flex; align-items: center; gap: 8px; height: 18px; }
.nova-sterren .sterren { position: relative; display: flex; width: 80px; height: 16px; }
.nova-sterren .sterren .vol { position: absolute; inset: 0; overflow: hidden; display: flex; color: var(--nova-ster); }
.nova-sterren .sterren .leeg { display: flex; color: var(--nova-ster-leeg); }
.nova-sterren .sterren svg { width: 16px; height: 16px; flex: none; }
.nova-sterren .oordeel { font-size: 12px; line-height: 18px; color: var(--nova-gedempt); white-space: nowrap; }
.shop-kaart.vorm-nova .nova-titel {
  font-size: 14.4px;
  font-weight: 700;
  line-height: 19.44px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Vier px lucht boven de titel, zoals bij hen. Zonder die vier plakt de
     titel tegen de sterrenregel en zakt alles eronder vier px omhoog; over
     een rij van vier kaarten zie je dat als een kaart die niet klopt. */
  margin: 4px 0 0;
}
.shop-kaart.vorm-nova .nova-code { font-size: 12px; line-height: 18px; color: var(--nova-flets); }
.shop-kaart.vorm-nova .nova-specs { display: flex; flex-wrap: wrap; gap: 5.4px; margin-top: 7.2px; }
.nova-spec {
  display: flex;
  align-items: center;
  font-size: 12px;
  line-height: 18px;
  color: rgba(51, 51, 51, .8);
  border: 1px solid var(--nova-lijn);
  border-radius: var(--nova-r-klein);
  padding: 4px 8px;
}
.shop-kaart.vorm-nova .nova-voet {
  margin-top: auto;
  padding-top: 10.8px;
  min-height: 52px;
  display: flex;
  align-items: flex-end;
  gap: 7.2px;
}
.shop-kaart.vorm-nova .nova-prijsvak { flex: 1 1 auto; min-width: 0; }
.shop-kaart.vorm-nova .nova-prijs {
  font-size: 17.28px;
  font-weight: 700;
  line-height: 20.736px;
}
.shop-kaart.vorm-nova .nova-prijs .btw-inline { font-size: 12px; font-weight: 400; color: var(--nova-flets); }
.shop-kaart.vorm-nova .nova-prijs s { font-size: 12.5px; font-weight: 400; color: var(--nova-flets); margin-right: 6px; }
.shop-kaart.vorm-nova .nova-tweedeprijs { font-size: 11px; line-height: 16.5px; color: var(--nova-flets); }
.shop-kaart.vorm-nova .nova-wens,
.shop-kaart.vorm-nova .nova-inwagen {
  width: 39.6px;
  height: 39.6px;
  flex: none;
  border-radius: var(--nova-r-klein);
  display: grid;
  place-items: center;
  border: 0;
  cursor: pointer;
}
.shop-kaart.vorm-nova .nova-wens { background: none; color: var(--nova-inkt); }
.shop-kaart.vorm-nova .nova-wens:hover { background: var(--nova-vlak); }
.shop-kaart.vorm-nova .nova-wens.aan { color: var(--nova-accent); }
.shop-kaart.vorm-nova .nova-inwagen { background: var(--nova-accent); color: var(--nova-accent-op); }
.shop-kaart.vorm-nova .nova-inwagen:hover { background: color-mix(in srgb, var(--nova-accent) 85%, #000); }

/* ── De pagina zelf ───────────────────────────────────────────────────── */

.winkel.nova .shop-body { background: #f5f8f9; }
.winkel.nova .shop-kruimels { font-size: 13px; line-height: 19.5px; gap: 4px; }
.winkel.nova .shop-lijstkop h1 { font-size: 28.8px; line-height: 36px; font-weight: 700; }

/* De knoppen rechts staan als groep bij elkaar, zodat de balk niet
   verspringt zodra er één bij komt of weggaat. */
.shop-kop-rechts {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 7.2px;
  flex: none;
}
.shop-header.vorm-nova .shop-talen { gap: 4px; font-size: 12.6px; }

/* De hele kaart is een link; de knoppen onderin liggen erbovenop. Zo kun je
   op de kaart drukken om te kijken en op het wagentje om mee te nemen. */
.shop-kaart.vorm-nova { isolation: isolate; }
.shop-kaart.vorm-nova .kaart-vlak { position: absolute; inset: 0; z-index: 1; }
.shop-kaart.vorm-nova > *:not(.kaart-vlak) { position: relative; }
.shop-kaart.vorm-nova .nova-knoppen { position: relative; z-index: 2; display: flex; gap: 7.2px; margin: 0; }
/* Het hartje naast het mandje: even groot, wit met een dunne rand. */
.shop-kaart.vorm-nova .nova-hartvorm { position: relative; z-index: 2; margin: 0 0 0 auto; }
.shop-kaart.vorm-nova .nova-hartvorm + .nova-knoppen { margin-left: 7.2px; }
.shop-kaart.vorm-nova .nova-hart {
  width: 39.6px; height: 39.6px; flex: none; border-radius: var(--nova-r-klein);
  display: grid; place-items: center; cursor: pointer;
  background: #fff; color: var(--nova-inkt); border: 1px solid rgba(51, 51, 51, .15);
}
.shop-kaart.vorm-nova .nova-hart:hover { border-color: var(--nova-accent); color: var(--nova-accent); }

/* Het logo krimpt niet mee als de balk vol raakt. Een samengeknepen logo is
   erger dan een knop die naar het mobiele menu verhuist. */
.shop-header.vorm-nova .shop-header-in > a:has(.logo-beeld) { flex: none; }

/* De tweede rij (vaste links) hoort bij dezelfde kop. */
.shop-menu2.vorm-nova { background: #fff; border-bottom: 1px solid var(--nova-lijn); }
.shop-menu2.vorm-nova .shop-menu2-in {
  max-width: var(--site-breedte);
  margin-inline: auto;
  padding: 0 var(--nova-zij);
  height: 36px;
  display: flex;
  align-items: center;
  gap: 21.6px;
}
.shop-menu2.vorm-nova .shop-menu2-in a {
  font-size: 12.6px;
  color: var(--nova-gedempt);
  text-decoration: none;
}
.shop-menu2.vorm-nova .shop-menu2-in a:hover { color: var(--nova-inkt); text-decoration: underline; }

/* ── De productpagina ─────────────────────────────────────────────────── */

.winkel.nova .shop-kruimels {
  display: flex;
  align-items: center;
  gap: 10.8px;
  font-size: 14px;
  line-height: 21px;
  padding-top: 7.2px;
  margin-bottom: 19.8px;
  flex-wrap: wrap;
}
.winkel.nova .shop-kruimels a { color: var(--nova-gedempt); text-decoration: none; }
.winkel.nova .shop-kruimels a:hover { color: var(--nova-inkt); text-decoration: underline; }
.winkel.nova .shop-kruimels a:last-child { color: var(--nova-inkt); font-weight: 600; }
.winkel.nova .shop-kruimels span { color: var(--nova-flets); }
.winkel.nova .kruimel-terug { display: inline-flex; align-items: center; gap: 5.4px; }

.winkel.nova .shop-pdp {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  /* Twee gelijke helften met 57.6 ertussen (gap-16 bij het origineel); de
     foto vult zijn helft, zodat het midden niet als een gat oogt. */
  gap: 21.6px 57.6px;
  align-items: start;
}
.winkel.nova .shop-pdp-beeld { max-width: none; }
.winkel.nova .shop-pdp-beeld { min-width: 0; }
.winkel.nova .pdp-hoofdfoto {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--nova-lijn);
  border-radius: var(--nova-r-klein);
  display: block;
}
.winkel.nova .pdp-geenfoto {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--nova-vlak);
  border: 1px solid var(--nova-lijn);
  border-radius: var(--nova-r-klein);
  display: grid;
  place-items: center;
  color: var(--nova-gedempt);
}
.winkel.nova .pdp-strook { display: flex; gap: 10.8px; margin-top: 10.8px; flex-wrap: wrap; }
.winkel.nova .pdp-strook img {
  width: 79.2px; height: 79.2px; object-fit: cover;
  border: 1px solid var(--nova-lijn); border-radius: var(--nova-r-klein);
  cursor: pointer;
}
.winkel.nova .pdp-strook img:hover { border-color: var(--nova-accent); }

/* De kolom loopt door tot de rand van de pagina, zodat de kenmerkentabel en
   de koopknop uitlijnen met de kop erboven. Alleen de lopende tekst houdt
   zijn eigen maat: een regel van zevenhonderd pixels leest niemand. */
.winkel.nova .shop-pdp-info { padding-left: 0; min-width: 0; }
.winkel.nova .pdp-kort,
/* De titel houdt zijn leesbreedte, het hartje staat aan de rechterkant
   van de kolom. */
.winkel.nova .pdp-titelregel { max-width: none; }
.winkel.nova .pdp-titelregel h1 { max-width: 570px; }
.winkel.nova .pdp-bovenregel {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14.4px;
  margin-bottom: 10.8px;
  flex-wrap: wrap;
}
.winkel.nova .pdp-paden { display: flex; gap: 14.4px; flex-wrap: wrap; }
.winkel.nova .pdp-paden a {
  font-size: 12.6px;
  color: var(--nova-gedempt);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.winkel.nova .pdp-paden a:hover { color: var(--nova-inkt); }
.winkel.nova .pdp-artikelnr { font-size: 12.6px; color: var(--nova-gedempt); white-space: nowrap; }
.winkel.nova .pdp-artikelnr b { color: var(--nova-inkt); font-weight: 600; }

.winkel.nova .pdp-titelregel { display: flex; align-items: flex-start; gap: 10.8px; }
.winkel.nova .pdp-titelregel h1 {
  font-size: 23.4px;
  line-height: 30.42px;
  font-weight: 700;
  margin: 0;
  flex: 1;
  text-wrap: balance;
}
/* Het hartje staat rechts in de kolom, ingelogd (in een formulier) of niet
   (als losse link). */
.winkel.nova .pdp-wensvorm { margin: 0 0 0 auto; flex: none; }
.winkel.nova .pdp-titelregel > .pdp-wens { margin-left: auto; flex: none; }
.winkel.nova .pdp-wens {
  width: 39.6px; height: 39.6px;
  display: grid; place-items: center;
  background: none;
  border: 1px solid var(--nova-lijn);
  border-radius: var(--nova-r-klein);
  color: var(--nova-inkt);
  cursor: pointer;
}
.winkel.nova .pdp-wens:hover { background: var(--nova-vlak); }
.winkel.nova .pdp-wens.aan { color: var(--nova-accent); border-color: var(--nova-accent); }
.winkel.nova .pdp-wens.aan svg { fill: currentColor; }

.winkel.nova .pdp-kort {
  margin: 14.4px 0 0;
  font-size: 14.4px;
  line-height: 1.8;
  color: var(--nova-inkt);
}
.winkel.nova .pdp-prijsvak { margin: 21.6px 0 10.8px; }
.winkel.nova .pdp-prijs { font-size: 19.8px; font-weight: 700; line-height: 1.3; }
.winkel.nova .pdp-prijs .klein { font-size: 11.7px; font-weight: 400; color: var(--nova-inkt); }
.winkel.nova .pdp-prijs s { font-size: 14.4px; font-weight: 400; color: var(--nova-flets); margin-right: 8px; }
.winkel.nova .pdp-tweedeprijs { font-size: 12.6px; color: var(--nova-flets); margin-top: 2px; }

.winkel.nova .pdp-koopvorm { display: flex; flex-direction: column; gap: 10.8px; }
.winkel.nova .pdp-aantal-kop { font-size: 12.6px; color: var(--nova-gedempt); margin-bottom: -4px; }
.winkel.nova .pdp-koopregel { display: flex; gap: 14.4px; align-items: stretch; }
.winkel.nova .pdp-teller {
  display: flex;
  align-items: center;
  height: 58.5px;
  width: 122.4px;
  flex: none;
  background: #fff;
  border: 1px solid var(--nova-lijn);
  border-radius: var(--nova-r-klein);
  overflow: hidden;
}
.winkel.nova .pdp-teller button {
  width: 36px;
  height: 100%;
  border: 0;
  background: none;
  font-size: 18px;
  color: var(--nova-inkt);
  cursor: pointer;
}
.winkel.nova .pdp-teller button:hover { background: var(--nova-vlak); }
.winkel.nova .pdp-teller input {
  width: 100%;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: none;
  text-align: center;
  font-size: 14.4px;
  font-weight: 600;
  color: var(--nova-inkt);
  -moz-appearance: textfield;
}
.winkel.nova .pdp-teller input::-webkit-outer-spin-button,
.winkel.nova .pdp-teller input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.winkel.nova .pdp-koop {
  flex: 1;
  height: 58.5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: var(--nova-accent);
  color: var(--nova-accent-op);
  border: 0;
  border-radius: var(--nova-r-klein);
  font-size: 16.2px;
  font-weight: 700;
  cursor: pointer;
}
.winkel.nova .pdp-koop:hover { background: color-mix(in srgb, var(--nova-accent) 85%, #000); }
.winkel.nova a.pdp-koop { text-decoration: none; }

/* De kenmerkentabel: één regel per kenmerk, naam links en waarde rechts.
   Geen tabelopmaak maar een lijst, want dat leest een schermlezer als een
   lijst van paren en niet als een raster met lege koppen. */
.winkel.nova .pdp-kenmerken {
  margin: 21.6px 0 0;
  border-top: 1px solid var(--nova-lijn);
}
.winkel.nova .pdp-kenmerk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14.4px;
  height: 43.7px;
  padding: 0 14.4px;
  border-bottom: 1px solid var(--nova-lijn);
  font-size: 13.5px;
}
.winkel.nova .pdp-kenmerk dt { color: var(--nova-inkt); margin: 0; }
.winkel.nova .pdp-kenmerk dd { margin: 0; font-weight: 600; text-align: right; }

/* De maten van de winkel waar Nova aan is opgemeten, per paginasoort.
   De meeste pagina's lopen van rand tot rand binnen de sitebreedte; de
   productpagina is daar smaller, en dat is met opzet overgenomen. */
.winkel.nova .shop-main {
  width: 100%;
  max-width: var(--site-breedte);
  margin-inline: auto;
  padding: 21.6px var(--nova-zij) 43.2px;
}
/* Een pagina uit de bewerker: de blokken lopen rand tot rand en zetten
   zelf hun kolom, dus de hoofdkolom houdt zich hier stil. Wat er naast de
   blokken staat (een melding, de kop van een bericht, de reacties) krijgt
   dezelfde kolom als een blok op Vol. */
.winkel.nova .shop-main.site-main { max-width: none; padding-inline: 0; }
.winkel.nova .shop-main.site-main > :not(.site-pagina) {
  max-width: var(--site-breedte);
  margin-inline: auto;
  padding-inline: var(--nova-zij);
  box-sizing: border-box;
}

/* ── De categoriepagina ───────────────────────────────────────────────── */

/* Filters links, artikelen rechts. De filterkolom heeft een vaste maat: hij
   moet leesbaar blijven, ook als er nog maar één artikel over is. */
/* Filters links, artikelen rechts. De verhouding is vast, niet de breedte:
   op een breed scherm hoort de filterkolom mee te groeien, anders wordt hij
   een steeds dunner streepje naast een steeds breder raster. Gemeten aan de
   echte winkel: de kolom is een kleine vijfde van de inhoud. */
.winkel.nova .shop-lijst {
  display: grid;
  grid-template-columns: 1fr 3.9562fr;
  gap: 14.4px 24px;
  align-items: start;
}
.shop-zijbalk.vorm-nova { min-width: 0; width: 100%; flex: none; }
.winkel.nova .shop-lijstkolom { min-width: 0; }
.winkel.nova .shop-lijsttitel {
  font-size: 28.8px;
  line-height: 36px;
  font-weight: 700;
  margin: 0 0 21.6px;
  text-wrap: balance;
}
.winkel.nova .shop-lijstkolom .shop-kruimels { margin-bottom: 18.5px; }

.winkel.nova .shop-lijstbalk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 21.6px;
}
.winkel.nova .shop-telling { font-size: 13.5px; color: #8f8f8f; white-space: nowrap; }
.winkel.nova .shop-inveld {
  flex: 1 1 240px;
  min-width: 0;
  height: 39.6px;
  padding: 0 14.4px;
  background: #fff;
  border: 1px solid var(--nova-lijn);
  border-radius: var(--nova-r-klein);
  font-size: 13.5px;
  color: var(--nova-inkt);
}
.winkel.nova .shop-inveld::placeholder { color: var(--nova-gedempt); }
.winkel.nova .shop-weergave { display: flex; gap: 0; flex: none; }
.winkel.nova .shop-weergave button {
  width: 39.6px;
  height: 39.6px;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid var(--nova-lijn);
  color: var(--nova-gedempt);
  cursor: pointer;
}
.winkel.nova .shop-weergave button:first-child { border-radius: var(--nova-r-klein) 0 0 var(--nova-r-klein); }
.winkel.nova .shop-weergave button:last-child { border-radius: 0 var(--nova-r-klein) var(--nova-r-klein) 0; border-left: 0; }
.winkel.nova .shop-weergave button.aan { background: var(--nova-tint); color: var(--nova-inkt); }
.winkel.nova .shop-select {
  height: 39.6px;
  flex: none;
  padding: 0 32px 0 14.4px;
  background: #fff;
  border: 1px solid var(--nova-lijn);
  border-radius: var(--nova-r-klein);
  font-size: 13.5px;
  color: var(--nova-inkt);
  cursor: pointer;
}

/* Als regels in plaats van tegels: dezelfde kaart, andere richting. */
.winkel.nova .shop-tegels.als-lijst { grid-template-columns: 1fr; gap: 10.8px; }
.winkel.nova .shop-tegels.als-lijst .shop-kaart {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
}
.winkel.nova .shop-tegels.als-lijst .shop-kaart > img,
.winkel.nova .shop-tegels.als-lijst .shop-kaart .foto-leeg { margin: 0; grid-row: span 6; }
.winkel.nova .shop-tegels.als-lijst .nova-voet {
  grid-column: 3;
  grid-row: 1 / -1;
  margin: 0;
  padding: 0;
  min-height: 0;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 10.8px;
}
.winkel.nova .shop-tegels.als-lijst .nova-prijsvak { text-align: right; }

/* De bladerbalk onder de lijst. */
.winkel.nova .shop-blader {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5.4px;
  margin-top: 28.8px;
  flex-wrap: wrap;
}
.winkel.nova .shop-blader a,
.winkel.nova .shop-blader .nu {
  min-width: 39.6px;
  height: 39.6px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--nova-lijn);
  border-radius: var(--nova-r-klein);
  background: #fff;
  color: var(--nova-inkt);
  font-size: 13.5px;
  text-decoration: none;
}
.winkel.nova .shop-blader a:hover { background: var(--nova-vlak); }
.winkel.nova .shop-blader .nu {
  background: var(--nova-accent);
  border-color: var(--nova-accent);
  color: var(--nova-accent-op);
  font-weight: 600;
}

/* De filterkolom staat verderop in dit blad, bij de categorieboom. Hier
   stond een tweede beschrijving van dezelfde kolom: een eigen padding, een
   eigen actief-kleur. Twee beschrijvingen van hetzelfde onderdeel gaan uit
   elkaar lopen, en die van bovenaf won het van de nieuwe zonder dat er iets
   fout leek te zijn: de vakjes werden 2 px breed. Eén plek, één manier.
   Zie "De categorieboom in de zijbalk". */

/* ── De klantomgeving ─────────────────────────────────────────────────── */

.winkel.nova .klant-kop {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 25.2px;
}
.winkel.nova .klant-kaart {
  width: 72px;
  height: 72px;
  flex: none;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid var(--nova-lijn);
  border-radius: var(--nova-r-kaart);
  color: var(--nova-gedempt);
}
.winkel.nova .klant-wie { flex: 1; min-width: 0; }
.winkel.nova .klant-wie h1 { font-size: 23.4px; line-height: 1.25; font-weight: 700; margin: 0 0 1.8px; }
.winkel.nova .klant-wie p { margin: 0; font-size: 13.5px; color: var(--nova-gedempt); }
.winkel.nova .klant-uit { margin: 0; flex: none; }

/* Tabbladen: tekst met een dunne streep eronder. De actieve streep valt
   samen met de lijn van de band, zodat het één geheel blijft. */
.winkel.nova .klant-tabs {
  display: flex;
  gap: 25.2px;
  align-items: flex-end;
  overflow-x: auto;
  scrollbar-width: none;
  margin-bottom: -1px;
}
.winkel.nova .klant-tabs::-webkit-scrollbar { display: none; }
.winkel.nova .klant-tabs a {
  display: inline-flex;
  align-items: center;
  gap: 7.2px;
  padding: 9px 1.8px 12.6px;
  border-bottom: 2px solid transparent;
  font-size: 13.5px;
  color: color-mix(in srgb, var(--nova-inkt) 60%, #fff);
  text-decoration: none;
  white-space: nowrap;
}
.winkel.nova .klant-tabs a:hover { color: var(--nova-inkt); }
.winkel.nova .klant-tabs a.aan {
  color: var(--nova-accent);
  border-bottom-color: var(--nova-accent);
  font-weight: 600;
}
.winkel.nova .klant-teller {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--nova-accent);
  color: var(--nova-accent-op);
  font-size: 11px;
  font-weight: 700;
  display: inline-grid;
  place-items: center;
}
.winkel.nova .klant-band {
  border-top: 1px solid var(--nova-lijn);
  padding-top: 25.2px;
  padding-bottom: 36px;
}
.winkel.nova .klant-melding {
  background: var(--nova-vlak);
  border: 1px solid var(--nova-lijn);
  border-radius: var(--nova-r-kaart);
  padding: 12px 16px;
  font-size: 13.5px;
  margin-bottom: 18px;
}
.winkel.nova .klant-melding.fout { background: #FFE2E2; border-color: #FFE2E2; color: #B42318; }

/* De telvakken bovenaan het overzicht. */
.winkel.nova .klant-vakken {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14.4px;
  margin-bottom: 21.6px;
}
.winkel.nova .klant-vak {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--nova-lijn);
  border-radius: var(--nova-r-kaart);
  text-decoration: none;
  color: var(--nova-inkt);
}
.winkel.nova .klant-vak:hover { border-color: color-mix(in srgb, var(--nova-lijn) 78%, var(--nova-inkt)); }
.winkel.nova .klant-vak .getal { font-size: 25.2px; font-weight: 700; line-height: 1.1; }
.winkel.nova .klant-vak .naam { font-size: 13.5px; font-weight: 600; }
.winkel.nova .klant-vak .sub { font-size: 12px; color: var(--nova-gedempt); }
.winkel.nova .klant-vak.let .getal { color: var(--nova-accent); }

/* Kaarten in de band. */
.winkel.nova .klant-kaart-blok {
  background: #fff;
  border: 1px solid var(--nova-lijn);
  border-radius: var(--nova-r-kaart);
  padding: 18px;
  margin-bottom: 18px;
}
.winkel.nova .klant-kaart-blok h2 { font-size: 16px; font-weight: 600; margin: 0 0 14.4px; }
.winkel.nova .klant-leeg { font-size: 13.5px; color: var(--nova-gedempt); margin: 0; }
.winkel.nova .klant-flets { color: var(--nova-flets); font-weight: 400; }
.winkel.nova .klant-meer {
  display: inline-block;
  margin-top: 12px;
  font-size: 13.5px;
  color: var(--nova-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.winkel.nova .klant-tweekolom {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}
.winkel.nova .klant-tweekolom .klant-kaart-blok { margin-bottom: 0; }
.winkel.nova .klant-adres { font-style: normal; font-size: 13.5px; line-height: 1.7; display: flex; flex-direction: column; }

/* Tabellen: kopregel op het rustige vlak, dunne lijnen tussen de rijen. */
.winkel.nova .klant-tabelvak { overflow-x: auto; margin: 0 -18px; }
.winkel.nova .klant-tabel { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.winkel.nova .klant-tabel thead tr { background: var(--nova-vlak); }
.winkel.nova .klant-tabel th {
  text-align: left;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--nova-gedempt);
  padding: 9px 18px;
  white-space: nowrap;
}
.winkel.nova .klant-tabel td { padding: 12px 18px; border-bottom: 1px solid var(--nova-lijn); }
.winkel.nova .klant-tabel tbody tr:last-child td { border-bottom: 0; }
.winkel.nova .klant-tabel tbody tr:hover { background: var(--nova-vlak); }
.winkel.nova .klant-tabel .rechts { text-align: right; }
.winkel.nova .klant-tabel .getal { font-variant-numeric: tabular-nums; }
.winkel.nova .klant-tabel form { margin: 0; }

/* De stand als stille stip met het woord ernaast. */
.winkel.nova .klant-stand { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.winkel.nova .klant-stand .stip { width: 7px; height: 7px; border-radius: 999px; background: currentColor; flex: none; }
.winkel.nova .stand-af { color: #067647; }
.winkel.nova .stand-wacht { color: #B54708; }
.winkel.nova .stand-weg { color: var(--nova-flets); }
.winkel.nova .stand-bezig { color: var(--nova-gedempt); }

/* De offertepagina. */
.winkel.nova .klant-terugregel { margin-bottom: 14.4px; }
.winkel.nova .klant-terug { display: inline-flex; align-items: center; gap: 5.4px; font-size: 13.5px; color: var(--nova-gedempt); text-decoration: none; }
.winkel.nova .klant-terug:hover { color: var(--nova-inkt); }
.winkel.nova .klant-offertekop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 14.4px;
}
.winkel.nova .klant-offertekop h2 { margin: 0 0 2px; font-size: 19.8px; font-weight: 700; }
.winkel.nova .klant-offertekop p { margin: 0; font-size: 13.5px; color: var(--nova-gedempt); }
.winkel.nova .klant-notitie { font-size: 13.5px; line-height: 1.7; margin: 14.4px 0 0; }
/* De tellingen onderaan de tabel. Ze staan als rijen in de tabel zelf,
   zodat de bedragen in dezelfde kolom uitkomen als de regelbedragen. */
.winkel.nova .klant-telling { font-size: 13.5px; }
.winkel.nova .klant-telling th {
  font-weight: 400;
  color: var(--nova-gedempt);
  padding: 5.4px 14.4px;
  border: 0;
  background: none;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13.5px;
}
.winkel.nova .klant-telling td {
  padding: 5.4px 14.4px;
  border: 0;
  font-variant-numeric: tabular-nums;
}
.winkel.nova .klant-telling tr:first-child th,
.winkel.nova .klant-telling tr:first-child td { padding-top: 12.6px; }
.winkel.nova .klant-telling .totaal th,
.winkel.nova .klant-telling .totaal td {
  border-top: 1px solid var(--nova-lijn);
  padding-top: 10.8px;
  padding-bottom: 14.4px;
  font-size: 16px;
  font-weight: 700;
  color: var(--nova-inkt);
}
.winkel.nova .klant-offerteknoppen { display: flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.winkel.nova .klant-offerteknoppen form { margin: 0; }
.winkel.nova .pdp-koop.klein { height: 44px; font-size: 14.4px; padding-inline: 21.6px; flex: none; }

/* Adressen. */
.winkel.nova .klant-adressen {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14.4px;
}
.winkel.nova .klant-adreskaart {
  border: 1px solid var(--nova-lijn);
  border-radius: var(--nova-r-kaart);
  padding: 14.4px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.winkel.nova .klant-adreskaart.nu { border-color: var(--nova-accent); }
.winkel.nova .klant-adreskop { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.winkel.nova .klant-vlaggen { display: flex; gap: 5.4px; }
.winkel.nova .klant-vlag {
  font-size: 11px;
  padding: 2px 7px;
  border-radius: var(--nova-r-klein);
  background: var(--nova-vlak);
  color: var(--nova-gedempt);
}
.winkel.nova .klant-adresknoppen { display: flex; gap: 7.2px; flex-wrap: wrap; margin-top: auto; }
.winkel.nova .klant-adresknoppen form { margin: 0; }
.winkel.nova .ghost.gevaar { color: #B42318; }

/* Formulieren in de klantomgeving. */
/* ---------------------------------------------------------------
   Formuliervelden, zoals bij hen.

   Hun velden zijn 50 px hoog en het label staat ERIN: rustend op 20 %
   doorzichtig, midden in het veld, zodat het leest als een plaatshouder.
   Zodra je erin klikt of er iets in staat, glijdt het omhoog naar de
   bovenrand, wordt het driekwart zo groot en donker, met een wit streepje
   achter zich zodat het de lijn onderbreekt.

   Dat scheelt een regel hoogte per veld en, belangrijker: het label
   verdwijnt niet zodra je begint te typen, wat bij een plaatshouder wel
   gebeurt. Dan sta je met acht ingevulde vakjes en weet je niet meer welke
   welke is.

   Wij doen het zonder script. Zij hangen er een klikafhandelaar aan; het
   beveiligingsbeleid van de motor laat die niet toe, en met :has() en
   :placeholder-shown is het toch al beter: het werkt ook als je het
   formulier terugkrijgt met alles er nog in.

   Daarvoor moet elk tekstveld een plaatshouder hebben, al is het een
   spatie. Een veld zonder plaatshouder is namelijk NOOIT
   :placeholder-shown, en dan zou het label altijd omhoog staan.
   --------------------------------------------------------------- */
.winkel.nova .klant-vorm {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14.4px;
  align-items: end;
}
.winkel.nova .klant-veld {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.winkel.nova .klant-veld.breed { grid-column: 1 / -1; }
.winkel.nova .klant-veld.smal { max-width: 160px; }

.winkel.nova .klant-veld > label {
  position: absolute;
  left: 8px;
  top: 0;
  z-index: 1;
  padding: 0 8px;
  font-size: 13.5px;
  line-height: 20px;
  color: var(--nova-inkt);
  opacity: .2;
  transform: translateY(15px);
  transform-origin: left center;
  transition: transform .2s ease, opacity .2s ease, font-weight .2s ease;
  pointer-events: none;
  white-space: nowrap;
  max-width: calc(100% - 8px);
  overflow: hidden;
  text-overflow: ellipsis;
}

.winkel.nova .klant-veld input,
.winkel.nova .klant-veld select,
.winkel.nova .klant-veld textarea {
  height: 50px;
  padding: 17px 14.4px 3px;
  background: #fff;
  border: 1px solid var(--nova-lijn);
  border-radius: var(--nova-r-klein);
  font-size: 12.6px;
  color: var(--nova-inkt);
  min-width: 0;
  width: 100%;
}
.winkel.nova .klant-veld textarea {
  height: 200px;
  padding-top: 21px;
  line-height: 1.6;
  resize: vertical;
}
.winkel.nova .klant-veld input[type="file"] {
  height: 94px;
  padding: 26px 14.4px;
  cursor: pointer;
}
/* Eén focus voor elk veld in de winkel: een dunne accentrand met een
   zachte gloed, geen dikke lijn. */
.winkel.nova .klant-veld input:focus,
.winkel.nova .klant-veld select:focus,
.winkel.nova .klant-veld textarea:focus {
  outline: 0;
  border-color: var(--nova-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nova-accent) 14%, transparent);
}

/* Omhoog: zodra je erin staat, zodra er iets in staat, en altijd bij een
   keuzelijst of een bestandsveld, want daar staat altijd al iets. */
.winkel.nova .klant-veld:has(> input:focus) > label,
.winkel.nova .klant-veld:has(> textarea:focus) > label,
.winkel.nova .klant-veld:has(> input:not(:placeholder-shown)) > label,
.winkel.nova .klant-veld:has(> textarea:not(:placeholder-shown)) > label,
.winkel.nova .klant-veld:has(> select) > label,
.winkel.nova .klant-veld:has(> input[type="file"]) > label {
  transform: translateY(-8px) scale(.75);
  opacity: 1;
  font-weight: 600;
  /* Een wit streepje van 10 px achter de onderste helft, zodat het label
     de rand doorsnijdt in plaats van erop te balanceren. */
  background-image: linear-gradient(0deg, #fff 10px, transparent 10px);
}
/* Een veld met een echte hint erin ("Typ een postcode en huisnummer") heeft
   al iets staan. Dan hoort het label meteen omhoog: anders liggen het label
   en de hint over elkaar heen en is geen van beide te lezen. */
.winkel.nova .klant-veld.hint > label,
/* Een tekstvak is te hoog om het label in het midden te zetten; daar staat
   het meteen bovenaan. */
.winkel.nova .klant-veld:has(> textarea) > label {
  transform: translateY(-8px) scale(.75);
  opacity: 1;
  font-weight: 600;
  background-image: linear-gradient(0deg, #fff 10px, transparent 10px);
}
/* De uitleg onder een veld hoort niet achter het label vandaan te komen. */
.winkel.nova .klant-veld > .klant-flets { margin-top: 5px; font-size: 12px; }

.winkel.nova .klant-vast { margin: 0; font-size: 13.5px; }
.winkel.nova .klant-vormknoppen { grid-column: 1 / -1; display: flex; gap: 12px; align-items: center; }

/* ── Smallere schermen ────────────────────────────────────────────────── */
/*
 * De kop verliest onderdelen in de volgorde waarin ze gemist kunnen worden.
 * Eerst het telefoonnummer (staat ook in de voet en op de contactpagina),
 * dan de woorden naast de knoppen (het icoon zegt hetzelfde), dan de
 * offerteknop. Onder de tablet gaat de zoekbalk naar een eigen regel: dat
 * is de enige die niet mag krimpen, want zoeken is op een telefoon vaak de
 * snelste weg naar een artikel.
 *
 * De balk klapt nooit stilletjes om in twee halve regels. Wat niet past
 * gaat weg of naar de tweede regel; het mag nooit half achter de rand
 * verdwijnen, want dan is het niet aan te tikken.
 */

@media (max-width: 1279px) {
  .shop-header.vorm-nova .shop-koptel { display: none; }
  .shop-header.vorm-nova .shop-kopknop { display: none; }
  .shop-header.vorm-nova .shop-wagen .wagen-woord { display: none; }
  .shop-header.vorm-nova .shop-wagen { padding-inline: 12px; }
}

@media (max-width: 1099px) {
  .shop-header.vorm-nova .shop-btw .btw-woord { display: none; }
  .shop-header.vorm-nova .shop-btw { padding-inline: 3px; }
}

/* Tablet en telefoon: het menu zit in de lade, de zoekbalk krijgt een
   eigen regel. */
@media (max-width: 1023px) {
  .shop-header.vorm-nova .shop-header-in {
    flex-wrap: wrap;
    height: auto;
    padding-block: 10.8px;
    row-gap: 10.8px;
  }
  .shop-header.vorm-nova .shop-paneel-knop { display: none; }
  .shop-header.vorm-nova .shop-lade-knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 39.6px;
    height: 39.6px;
    border: 1px solid var(--nova-lijn);
    border-radius: var(--nova-r-klein);
    background: #fff;
    color: var(--nova-inkt);
    cursor: pointer;
    flex: none;
  }
  .shop-header.vorm-nova .shop-zoek {
    order: 10;
    flex: 1 0 100%;
    max-width: none;
  }
  .shop-header.vorm-nova .shop-btw { display: none; }
  .winkel.nova .shop-menu { display: none; }
  /* De filterkolom gaat boven de artikelen staan in plaats van ernaast. */
  .winkel.nova .shop-lijst { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .winkel.nova .shop-pdp { grid-template-columns: minmax(0, 1fr); }
  .winkel.nova .shop-pdp-info { padding-left: 0; max-width: none; }
}

@media (max-width: 767px) {
  .shop-header.vorm-nova .ghost { padding-inline: 8px; }
  .shop-header.vorm-nova .shop-kop-rechts { gap: 4px; }
  .shop-usp.vorm-nova .nova-mid { gap: 18px; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .shop-usp.vorm-nova .nova-mid::-webkit-scrollbar { display: none; }
  .winkel.nova .shop-lijstbalk { gap: 9px; }
  .winkel.nova .shop-inveld { flex: 1 0 100%; }
  .winkel.nova .shop-select { flex: 1 1 auto; }
  .winkel.nova .klant-kop { gap: 12px; }
  .winkel.nova .klant-kaart { width: 54px; height: 54px; }
  .winkel.nova .klant-wie h1 { font-size: 19.8px; }
  .winkel.nova .klant-tabelvak { margin-inline: -14.4px; }
  .winkel.nova .klant-kaart-blok { padding: 14.4px; }
  .winkel.nova .klant-telling { max-width: none; }
  .winkel.nova .pdp-koopregel { flex-wrap: wrap; }
  .winkel.nova .pdp-koop { flex: 1 0 100%; }
  .winkel.nova .shop-tegels.als-lijst .shop-kaart { grid-template-columns: 88px minmax(0, 1fr); }
  .winkel.nova .shop-tegels.als-lijst .nova-voet { grid-column: 1 / -1; grid-row: auto; align-items: stretch; flex-direction: row; justify-content: space-between; }
}

@media (max-width: 520px) {
  .winkel.nova .shop-tegels { grid-template-columns: minmax(0, 1fr); }
  .winkel.nova .shop-lijsttitel { font-size: 23.4px; line-height: 30px; }
  .winkel.nova .pdp-titelregel h1 { font-size: 19.8px; line-height: 26px; }
  .winkel.nova .klant-uit { width: 100%; order: 3; }
  .winkel.nova .klant-kop { flex-wrap: wrap; }
}

/* Naam en artikelnummer in een tabelregel: naast elkaar als het past,
   onder elkaar als het niet past. Nooit over elkaar heen. */
.winkel.nova .klant-regelnaam { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }

/* Het accountpictogram met de naam ernaast. */
.shop-header.vorm-nova .kop-account { gap: 7px; }
.shop-header.vorm-nova .kop-account svg { flex: none; }
/* Alleen het poppetje, zoals de echte winkel: de naam ernaast kost bijna
   honderd pixels en die gaan van het zoekveld af. */
@media (min-width: 0px) {
  .shop-header.vorm-nova .kop-account .kop-woord { display: none; }
  .shop-header.vorm-nova .kop-account { width: 39.6px; justify-content: center; padding-inline: 0; }
}
@media (max-width: 767px) {
  /* Huren en Vragen staan ook in de lade; in de balk is er geen plek meer. */
  .shop-header.vorm-nova .kop-huur,
  .shop-header.vorm-nova .kop-hulp { display: none; }
}

/* ── De voet ──────────────────────────────────────────────────────────── */

.shop-footer.vorm-nova {
  background: linear-gradient(var(--nova-lijn), #fff);
  border-top: 0;
  color: var(--nova-inkt);
  padding: 43.2px 0 0;
}
.shop-footer.vorm-nova .shop-voet-naam {
  padding-inline: var(--nova-zij);
  max-width: var(--site-breedte);
  margin-inline: auto;
  padding-bottom: 43.2px;
  text-align: center;
  font-size: 18px;
  line-height: 27px;
  font-weight: 700;
}
.shop-footer.vorm-nova .shop-footer-in {
  max-width: var(--site-breedte);
  margin-inline: auto;
  padding: 0 var(--nova-zij);
  display: grid;
  /* Vier kolommen zoals het origineel, ook als er maar twee gevuld zijn:
     zo blijft een kolom smal en leest een lijst links als een lijst. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 43.2px clamp(28.8px, calc(-170px + 21.6vw), 86.4px);
  align-items: start;
  font-size: 13.5px;
  line-height: 20.26px;
}
@media (max-width: 1023px) {
  .shop-footer.vorm-nova .shop-footer-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .shop-footer.vorm-nova .shop-footer-in { grid-template-columns: 1fr; text-align: center; }
}
.shop-footer.vorm-nova .shop-footer-in > div > div:first-child,
.shop-footer.vorm-nova .shop-voet-kop {
  font-size: 16.2px;
  line-height: 24.3px;
  font-weight: 700;
  color: var(--nova-inkt);
  margin-bottom: 14.4px;
}
.shop-footer.vorm-nova a { color: var(--nova-inkt); text-decoration: none; }
.shop-footer.vorm-nova a:hover { text-decoration: underline; }
/* De links in een kolom krijgen een pijltje rechts, zoals de echte winkel:
   het zegt dat er nog iets achter zit. */
.shop-footer.vorm-nova .shop-footer-in > div > div > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 3.6px 0;
  font-size: 13.5px;
  font-weight: 400;
}
.shop-footer.vorm-nova .shop-footer-in > div > div > a::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.6px solid currentColor;
  border-top: 1.6px solid currentColor;
  transform: rotate(45deg);
  opacity: .5;
  flex: none;
}
.shop-footer.vorm-nova .shop-voet-contact { display: flex; flex-direction: column; gap: 5.4px; }
.shop-footer.vorm-nova .shop-voet-contact a::after { content: none; }
.shop-footer.vorm-nova .shop-voet-contact .sterk { font-weight: 700; }
.shop-footer.vorm-nova .shop-voet-adres { display: flex; flex-direction: column; margin-top: 14.4px; }
.shop-footer.vorm-nova .shop-voet-onder {
  padding-inline: var(--nova-zij);
  max-width: var(--site-breedte);
  margin-inline: auto;
  border-top: 1px solid var(--nova-lijn);
  margin-top: 43.2px;
  background: none;
}
.shop-footer.vorm-nova .shop-voet-onder-in {
  padding: 28.8px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 12.6px;
  line-height: 18.9px;
  color: color-mix(in srgb, var(--nova-inkt) 60%, #fff);
  max-width: none;
}
@media (max-width: 767px) {
  .shop-footer.vorm-nova .shop-footer-in { gap: 28.8px; }
  .shop-footer.vorm-nova .shop-voet-onder-in { padding: 21.6px 0; }
}

/* ── De winkelwagen ───────────────────────────────────────────────────── */
/*
 * Artikelen links op platte regels, de telling rechts in een kaart die
 * meeschuift. Geen kaartje per regel: dan kijk je op een telefoon naar
 * anderhalf artikel per scherm en weet je nooit hoeveel er nog komt.
 */
.winkel.nova .wagen-terug {
  display: inline-flex;
  align-items: center;
  gap: 7.2px;
  margin-top: 10.8px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--nova-accent);
  text-decoration: none;
}
.winkel.nova .wagen-terug:hover { text-decoration: underline; }
.winkel.nova .wagen-titel {
  font-size: 28.8px;
  line-height: 36px;
  font-weight: 700;
  margin: 10.8px 0 21.6px;
}
.winkel.nova .wagen-aantal {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--nova-gedempt);
  margin-top: 3.6px;
}
.winkel.nova .wagen-vlak {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 28.8px;
  align-items: start;
}
.wagen-regel.vorm-novas { min-width: 0; }
.wagen-regel.vorm-novas .wagen-regel {
  display: flex;
  align-items: center;
  gap: 14.4px;
  padding: 16px 0;
  border-bottom: 1px solid var(--nova-lijn);
  background: none;
}
.wagen-regel.vorm-novas .wagen-regel img,
.wagen-regel.vorm-novas .wagen-regel > div:first-child {
  width: 79.2px !important;
  height: 79.2px !important;
  object-fit: contain;
  border-radius: var(--nova-r-klein);
  border: 1px solid var(--nova-lijn);
  background: #fff;
  flex: none;
}
.wagen-regel.vorm-novas .wagen-kern { flex: 1; min-width: 0; }
.winkel.nova .wagen-telling {
  background: #fff;
  border: 1px solid var(--nova-lijn);
  border-radius: var(--nova-r-kaart);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 7.2px;
  font-size: 13.5px;
  position: sticky;
  top: calc(var(--nova-balk-h) + 14.4px);
}
.winkel.nova .wagen-afrekenen { width: 100%; justify-content: center; margin-top: 10.8px; }
.winkel.nova .wagen-vraag {
  text-align: center;
  font-size: 12.6px;
  color: var(--nova-gedempt);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.winkel.nova .wagen-usps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10.8px;
  padding-top: 14.4px;
  border-top: 1px solid var(--nova-lijn);
  font-size: 12.6px;
}
.winkel.nova .wagen-usps .usp-punt { gap: 8px; }
.winkel.nova .wagen-usps .usp-punt svg { color: var(--nova-groen); flex: none; }
.winkel.nova .wagen-usps .usp-punt span::before { content: none; }

@media (max-width: 900px) {
  .winkel.nova .wagen-vlak { grid-template-columns: minmax(0, 1fr); }
  .winkel.nova .wagen-telling { position: static; }
}

/* Waarmee je kunt betalen, onder de koopknop. */
.winkel.nova .pdp-betalen { display: flex; flex-wrap: wrap; gap: 7.2px; margin-top: 3.6px; }
.winkel.nova .pdp-betaalwijze {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--nova-lijn);
  border-radius: var(--nova-r-klein);
  background: #fff;
  font-size: 11.7px;
  font-weight: 600;
  color: var(--nova-gedempt);
  white-space: nowrap;
}

/* De koopbalk onderin de productpagina: verschijnt zodra de echte knop uit
   beeld is. Hij schuift omhoog in plaats van te knipperen, want een balk
   die er ineens is trekt de aandacht weg van waar je aan het lezen was. */
.winkel.nova .pdp-koopbalk {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  /* Boven alles op de pagina (menupaneel 45, schuifrijen, voet); alleen de
     winkelwagenlade (70) en het mobiele menu (80) mogen erover. */
  z-index: 60;
  background: #fff;
  border-top: 1px solid var(--nova-lijn);
  box-shadow: 0 -8px 24px rgba(15, 17, 20, .08);
  transform: translateY(100%);
  transition: transform .25s ease;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.winkel.nova .pdp-koopbalk.aan { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .winkel.nova .pdp-koopbalk { transition: none; } }
@media print { .winkel.nova .pdp-koopbalk { display: none; } }
.winkel.nova .pdp-koopbalk-in {
  max-width: var(--site-breedte);
  margin-inline: auto;
  padding: 10px var(--nova-zij);
  display: flex;
  align-items: center;
  gap: clamp(10.8px, -3.6px + 1.5625vw, 18px);
  min-height: 61.2px;
}
.winkel.nova .pdp-koopbalk-in img {
  width: 50.4px; height: 50.4px; flex: none;
  object-fit: contain;
  border: 1px solid var(--nova-lijn);
  border-radius: var(--nova-r-klein);
  background: #fff;
}
.winkel.nova .pdp-koopbalk-naam { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.winkel.nova .pdp-koopbalk-naam b {
  font-size: 14px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.winkel.nova .pdp-koopbalk-naam span { font-size: 13.5px; font-weight: 700; }
.winkel.nova .pdp-koopbalk-naam .klein { font-size: 11.5px; font-weight: 400; color: var(--nova-flets); }
.winkel.nova .pdp-koopbalk .pdp-koop { flex: none; }
@media (max-width: 640px) {
  .winkel.nova .pdp-koopbalk-in img { display: none; }
  .winkel.nova .pdp-koopbalk-naam b { display: none; }
  .winkel.nova .pdp-koopbalk .pdp-koop { flex: 1; }
}

/* ── De taalkiezer ────────────────────────────────────────────────────── */

.shop-taalkiezer { position: relative; flex: none; }
.shop-taalkiezer > summary {
  height: 39.6px;
  padding: 0 8px 0 9px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--nova-r-klein);
  font-size: 12.6px;
  font-weight: 500;
  color: var(--nova-inkt);
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}
.shop-taalkiezer > summary::-webkit-details-marker { display: none; }
.shop-taalkiezer > summary::marker { content: ""; }
.shop-taalkiezer > summary:hover { background: var(--nova-vlak); }
.shop-taalkiezer[open] > summary { background: var(--nova-vlak); }
.shop-taalkiezer .taal-pijl { opacity: .55; transition: transform .15s ease; }
.shop-taalkiezer[open] .taal-pijl { transform: rotate(180deg); }
.taal-vlag {
  width: 21px;
  height: 15px;
  flex: none;
  border-radius: 2px;
  /* Een lichte vlag (Polen, Italië) verdwijnt op wit zonder randje. */
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}
.shop-taallade {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 80;
  min-width: 186px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--nova-lijn);
  border-radius: var(--nova-r-kaart);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .12);
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.taal-regel {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: var(--nova-r-klein);
  font-size: 13.5px;
  color: var(--nova-inkt);
  text-decoration: none;
  white-space: nowrap;
}
.taal-regel .taal-naam { flex: 1; }
.taal-regel:hover { background: var(--nova-vlak); }
.taal-regel.aan { font-weight: 600; color: var(--nova-accent); }
@media (max-width: 1099px) {
  .shop-header.vorm-nova .shop-taalkiezer { display: inline-block; }
  .shop-taalkiezer > summary .taal-code { display: none; }
}

/* De strook met eigen pagina's boven de zoekresultaten. Een antwoord op een
   eigen pagina staat er bewust bóven de artikelen: negen van de tien keer
   zoekt iemand die "retour" typt geen product maar een uitleg. */
.shop-zoekpaginas.vorm-nova {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px 18px;
  padding: 12px 18px;
  margin-bottom: 21.6px;
  background: #fff;
  border: 1px solid var(--nova-lijn);
  border-radius: var(--nova-r-kaart);
}
.shop-zoekpaginas.vorm-nova .eyebrow {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--nova-gedempt);
}
.shop-zoekpaginas.vorm-nova a {
  font-size: 13.5px;
  color: var(--nova-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.shop-zoekpaginas.vorm-nova a:hover { color: var(--nova-inkt); }

/* De kop van één verlanglijst: naam, hernoemen en alles in de wagen. */
.winkel.nova .klant-lijstkop {
  display: flex;
  align-items: center;
  gap: 14.4px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.winkel.nova .klant-lijstkop h1 { font-size: 23.4px; line-height: 1.25; font-weight: 700; margin: 0; }
.winkel.nova .klant-hernoem { display: flex; gap: 7.2px; margin: 0; }
.winkel.nova .klant-hernoem input {
  height: 36px;
  padding: 0 12px;
  background: #fff;
  border: 1px solid var(--nova-lijn);
  border-radius: var(--nova-r-klein);
  font-size: 13.5px;
}
.winkel.nova .klant-alles { margin: 0 0 0 auto; }
.winkel.nova .klant-minifoto {
  width: 50.4px; height: 50.4px; object-fit: contain;
  border: 1px solid var(--nova-lijn); border-radius: var(--nova-r-klein); background: #fff;
  display: block;
}

/* Tekstvakken in de klantomgeving volgen dezelfde vorm als de invoervelden. */
.winkel.nova .klant-veld textarea {
  padding: 10px 14.4px;
  background: #fff;
  border: 1px solid var(--nova-lijn);
  border-radius: var(--nova-r-klein);
  font-size: 14px;
  font-family: inherit;
  color: var(--nova-inkt);
  resize: vertical;
  min-width: 0;
}
.winkel.nova .klant-veld textarea:focus { outline: 2px solid var(--nova-accent); outline-offset: -1px; }
.winkel.nova .klant-tabel a { color: inherit; text-decoration: none; }
.winkel.nova .klant-tabel a:hover { text-decoration: underline; }

/* Het gesprek bij een helpdeskvraag: jouw berichten rechts, die van de
   winkel links. Dat is hoe iedereen een gesprek leest. */
.winkel.nova .klant-gesprek { display: flex; flex-direction: column; gap: 12px; margin: 18px 0; }
.winkel.nova .klant-bericht {
  max-width: 78%;
  background: var(--nova-vlak);
  border: 1px solid var(--nova-lijn);
  border-radius: 12px 12px 12px 4px;
  padding: 10px 14px;
}
.winkel.nova .klant-bericht.van-mij {
  align-self: flex-end;
  border-radius: 12px 12px 4px 12px;
  background: color-mix(in srgb, var(--nova-accent) 8%, #fff);
  border-color: color-mix(in srgb, var(--nova-accent) 22%, #fff);
}
.winkel.nova .klant-bericht p { margin: 0; font-size: 13.5px; line-height: 1.6; white-space: pre-line; }
.winkel.nova .klant-bericht span { display: block; margin-top: 4px; font-size: 11.5px; color: var(--nova-gedempt); }
.winkel.nova .klant-antwoord {
  display: flex;
  gap: 10.8px;
  align-items: flex-end;
  padding-top: 14.4px;
  border-top: 1px solid var(--nova-lijn);
}
.winkel.nova .klant-antwoord textarea {
  flex: 1;
  min-width: 0;
  padding: 10px 14.4px;
  background: #fff;
  border: 1px solid var(--nova-lijn);
  border-radius: var(--nova-r-klein);
  font-size: 14px;
  font-family: inherit;
  color: var(--nova-inkt);
  resize: vertical;
}
.winkel.nova .klant-antwoord textarea:focus { outline: 2px solid var(--nova-accent); outline-offset: -1px; }

/* ── Het mobiele menu ─────────────────────────────────────────────────── */
/*
 * Een doorklikmenu, geen uitklaplijst. Wie op een telefoon door zeven
 * categorieën scrolt die allemaal openklappen is de weg kwijt; één lijst
 * per keer met een terugknop houdt het overzicht.
 */
.shop-lade.vorm-nova { background: #fff; }
.shop-lade.vorm-nova .shop-lade-kop {
  min-height: 54px;
  padding: 9px 14.4px;
  background: #fff;
  border-bottom: 1px solid var(--nova-lijn);
  display: flex;
  align-items: center;
  gap: 10.8px;
}
.shop-lade.vorm-nova .shop-lade-titel { flex: 1; text-align: center; font-size: 16px; font-weight: 700; }
.shop-lade.vorm-nova .shop-lade-sluit,
.shop-lade.vorm-nova .shop-lade-terug {
  width: 39.6px;
  height: 39.6px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--nova-lijn);
  border-radius: var(--nova-r-klein);
  background: #fff;
  color: var(--nova-inkt);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.shop-lade.vorm-nova .shop-lade-sluit:hover,
.shop-lade.vorm-nova .shop-lade-terug:hover { background: var(--nova-vlak); }
.shop-lade.vorm-nova .shop-lade-lijst { padding: 6px 0 36px; }
.shop-lade.vorm-nova .shop-lade-regel {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border: 0;
  border-bottom: 1px solid var(--nova-lijn);
  background: none;
  font-size: 15px;
  color: var(--nova-inkt);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.shop-lade.vorm-nova .shop-lade-regel:hover { background: var(--nova-vlak); }
.shop-lade.vorm-nova .shop-lade-pijl { color: var(--nova-flets); font-size: 20px; line-height: 1; }

/* ── De filters ───────────────────────────────────────────────────────── */

.shop-zijbalk.vorm-nova form.card { padding: 0 !important; }
.shop-zijbalk.vorm-nova .eyebrow {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--nova-gedempt);
  padding: 14.4px 14.4px 9px !important;
}
.shop-zijbalk.vorm-nova label {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 2px;
  font-size: 13.5px;
  cursor: pointer;
}
.shop-zijbalk.vorm-nova input[type=checkbox] {
  width: 16px;
  height: 16px;
  flex: none;
  accent-color: var(--nova-accent);
}
.shop-zijbalk.vorm-nova .btn-primary {
  background: var(--nova-accent);
  color: var(--nova-accent-op);
  border: 0;
  border-radius: var(--nova-r-klein);
  height: 39.6px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
/* Elke filtergroep krijgt een dunne scheiding, zoals de echte winkel. */
.shop-zijbalk.vorm-nova form.card > div:not(.eyebrow) { border-top: 1px solid var(--nova-lijn); }
.shop-zijbalk.vorm-nova form.card > div:first-of-type { border-top: 0; }

/* ── De regel in de winkelwagen ───────────────────────────────────────── */

.wagen-regel.vorm-nova input[type=number] {
  width: 72px;
  height: 39.6px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--nova-lijn);
  border-radius: var(--nova-r-klein);
  font-size: 14px;
  color: var(--nova-inkt);
}
.wagen-regel.vorm-nova .wagen-totaal { font-size: 15px; font-weight: 700; min-width: 88px; text-align: right; }
.wagen-regel.vorm-nova .wagen-kern > div:first-child { font-size: 14.4px; font-weight: 600; }
.wagen-regel.vorm-nova .wagen-kern .cell-sub { font-size: 12.6px; color: var(--nova-gedempt); }

/* ── De afrekenpagina ─────────────────────────────────────────────────── */

.shop-stappen.vorm-nova {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.6px;
  color: var(--nova-gedempt);
  margin-bottom: 14.4px;
}
.shop-stappen.vorm-nova b { color: var(--nova-inkt); }
.shop-stappen.vorm-nova i { color: var(--nova-flets); font-style: normal; }

/* ── Uitvoeringen kiezen ──────────────────────────────────────────────── */

.pdp-koopvorm.vorm-nova select,
.winkel.nova .shop-pdp-info select {
  height: 44px;
  padding: 0 32px 0 14.4px;
  background: #fff;
  border: 1px solid var(--nova-lijn);
  border-radius: var(--nova-r-klein);
  font-size: 14px;
  color: var(--nova-inkt);
  text-align: left;
  cursor: pointer;
}
.pdp-koopvorm.vorm-nova .field { display: flex; flex-direction: column; gap: 5px; }
.pdp-koopvorm.vorm-nova .field label { font-size: 12.6px; color: var(--nova-gedempt); }

/* ── Het verhaal onder de foto ────────────────────────────────────────── */
/*
 * Een lang verhaal wordt gevouwen. Niet om het te verstoppen maar omdat de
 * kenmerkentabel er anders drie schermen onder ligt, en dat is precies wat
 * de meeste mensen zoeken.
 */
.winkel.nova .pdp-verhaal { margin-top: 21.6px; position: relative; }
.winkel.nova .pdp-verhaal-tekst {
  /* Hun productverhaal staat op 16 px met 25.6 regelhoogte, in een
     blauwgrijs dat net iets zachter is dan de rest. Dat is met opzet: het
     is het enige stuk lopende tekst op de pagina en het leest een stuk
     rustiger dan de 14.4 die wij hadden. */
  font-size: 16px;
  line-height: 25.6px;
  white-space: pre-line;
  color: #3C4657;
}
.winkel.nova .pdp-verhaal.gevouwen .pdp-verhaal-tekst {
  max-height: 232px;
  overflow: hidden;
  /* Uitvagen naar wit, zodat je ziet dat er meer is in plaats van dat de
     tekst midden in een zin lijkt te stoppen. */
  -webkit-mask-image: linear-gradient(#000 62%, transparent);
  mask-image: linear-gradient(#000 62%, transparent);
}
.winkel.nova .pdp-meer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 9px;
  padding: 0;
  border: 0;
  background: none;
  /* "Meer lezen" staat bij hen in de accentkleur en op 14.4: het is een
     knop en geen bijschrift, en dat moet je kunnen zien zonder hem aan te
     wijzen. */
  font-size: 14.4px;
  line-height: 21.6px;
  font-weight: 600;
  color: var(--winkel-accent);
  cursor: pointer;
}
.winkel.nova .pdp-meer svg { transition: transform .15s ease; }
.winkel.nova .pdp-verhaal:not(.gevouwen) .pdp-meer svg { transform: rotate(180deg); }
.winkel.nova .pdp-verhaal.gevouwen .woord-minder,
.winkel.nova .pdp-verhaal:not(.gevouwen) .woord-meer { display: none; }

/* ── De volledige kenmerkentabel ──────────────────────────────────────── */

.winkel.nova .pdp-specblok { margin-top: 32.4px; }
.winkel.nova .pdp-specblok h2 {
  font-size: 16.2px;
  font-weight: 700;
  margin: 0 0 14.4px;
}
.winkel.nova .pdp-spectabel { margin: 0; }
.winkel.nova .pdp-specregel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 0;
  border-bottom: 1px solid var(--nova-lijn);
  font-size: 13.5px;
}
.winkel.nova .pdp-specregel dt { margin: 0; color: var(--nova-inkt); }
.winkel.nova .pdp-specregel dd { margin: 0; text-align: right; }
.winkel.nova .pdp-specregel dd a {
  color: var(--nova-inkt);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.winkel.nova .pdp-specregel dd a:hover { color: var(--nova-accent); }

/* Een kenmerk waarop je kunt doorklikken krijgt een pijltje; een kenmerk
   waar niets achter zit niet. Het pijltje is de belofte. */
.winkel.nova a.pdp-kenmerk { text-decoration: none; color: inherit; }
.winkel.nova a.pdp-kenmerk:hover { background: var(--nova-vlak); }
.winkel.nova .pdp-kenmerk dd { display: inline-flex; align-items: center; gap: 8px; }
.winkel.nova .pdp-kenmerk dd svg { color: var(--nova-flets); flex: none; }

/* ── De hulpkaart ─────────────────────────────────────────────────────── */

.winkel.nova .pdp-hulp {
  margin-top: 21.6px;
  padding: 18px;
  background: var(--nova-vlak);
  border: 1px solid var(--nova-lijn);
  border-radius: var(--nova-r-kaart);
}
.winkel.nova .pdp-hulp h2 { font-size: 16px; font-weight: 700; margin: 0 0 2px; }
.winkel.nova .pdp-hulp p { margin: 0; font-size: 13.5px; color: var(--nova-gedempt); }
.winkel.nova .pdp-hulp-tel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 16px;
  font-weight: 700;
  color: var(--nova-inkt);
  text-decoration: none;
}
.winkel.nova .pdp-hulp-tel:hover { color: var(--nova-accent); }
.winkel.nova .pdp-hulp-tijd { margin-top: 2px; font-size: 12.6px; }
.winkel.nova .pdp-hulp-mail {
  display: inline-block;
  margin-top: 9px;
  font-size: 13.5px;
  color: var(--nova-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Een rij artikelen onderaan ───────────────────────────────────────── */

.winkel.nova .shop-rij { margin-top: 43.2px; }
.winkel.nova .shop-rij h2 { font-size: 30.24px; line-height: 45.36px; font-weight: 700; margin: 0 0 18px; } /* zelfde kop als de rijen op de startpagina */

/* ── De vakken op het klantoverzicht ──────────────────────────────────── */

/* Wat er op je wacht. Rood alleen voor wat écht niet kan wachten: als
   alles rood is, is niets meer rood. */
.winkel.nova .klant-acties { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.winkel.nova .klant-acties li {
  display: flex;
  align-items: center;
  gap: 10.8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--nova-lijn);
  font-size: 13.5px;
}
.winkel.nova .klant-acties li:last-child { border-bottom: 0; }
.winkel.nova .klant-acties .stip {
  width: 7px; height: 7px; flex: none;
  border-radius: 999px;
  background: var(--nova-gedempt);
}
.winkel.nova .klant-acties li.urgent .stip { background: #B42318; }
.winkel.nova .klant-acties li.urgent .klant-actie-tekst { color: #B42318; font-weight: 600; }
.winkel.nova .klant-actie-tekst { flex: 1; }

/* De kredietruimte als balk: één blik en je weet of er nog ruimte is. */
.winkel.nova .klant-balk {
  height: 10px;
  border-radius: 999px;
  background: var(--nova-tint);
  overflow: hidden;
}
.winkel.nova .klant-balk span {
  display: block;
  height: 100%;
  background: var(--nova-accent);
  border-radius: 999px;
}
.winkel.nova .klant-balk-uitleg { margin: 10px 0 0; font-size: 13.5px; color: var(--nova-gedempt); }
.winkel.nova .klant-balk-uitleg b { color: var(--nova-inkt); }

/* Het jaar in twee getallen. */
.winkel.nova .klant-jaar { display: flex; gap: 36px; flex-wrap: wrap; }
.winkel.nova .klant-jaar .getal { display: block; font-size: 25.2px; font-weight: 700; line-height: 1.1; }
.winkel.nova .klant-jaar .naam { display: block; font-size: 12.6px; color: var(--nova-gedempt); }

/* De uitnodiging om een offerte te vragen. */
.winkel.nova .klant-offertevraag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 21.6px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding: 21.6px;
  background: var(--nova-vlak);
  border: 1px solid var(--nova-lijn);
  border-radius: var(--nova-r-kaart);
}
.winkel.nova .klant-offertevraag h2 { font-size: 16px; font-weight: 700; margin: 0 0 3px; }
.winkel.nova .klant-offertevraag p { margin: 0; font-size: 13.5px; color: var(--nova-gedempt); max-width: 62ch; }

/* De tegels in een kaart houden hun eigen maat, niet die van de kaart. */
.winkel.nova .klant-kaart-blok .shop-tegels { margin-top: 14.4px; }

/* ── De offerteaanvraag ───────────────────────────────────────────────── */

/* De pagina loopt van rand tot rand zoals elke andere; wat er ín staat
   houdt zijn leesmaat. Zo lijnt de kop van de pagina uit met de kop van de
   site, en blijft een formulierregel toch te overzien. */
/* ── Offerte aanvragen (houtjansok: request-quote) ──
   Twee helften over de volle breedte: links wit met de kruimel, de kop op
   37.4, de velden met zwevend etiket op 50 hoog en een stippellijn-vak
   voor de bijlage; rechts een licht vlak met waar het over gaat en de knop. */
/* De twee helften lopen van de menubalk tot de voet en van rand tot rand:
   de hoofdkolom houdt hier zijn lucht voor zich. */
.winkel.nova .shop-main:has(> .offerte-vraag) { padding: 0; }
.winkel.nova:has(> .offerte-vraag), .winkel.nova:has(.offerte-vraag) .shop-footer { margin-top: 0; }
.winkel.nova .offerte-vraag { display: grid; grid-template-columns: 1fr 1fr; margin: 0; min-height: 700px; }
.winkel.nova .offerte-gegevens { background: #fff; padding: 36px 28.8px 57.6px var(--nova-zij); }
.winkel.nova .offerte-kruimels { margin: 0 0 43.2px; }
.winkel.nova .offerte-vraag h1 { font-size: 37.44px; line-height: 48.6px; font-weight: 700; margin: 0 0 7.2px; }
.winkel.nova .offerte-intro { font-size: 13.5px; line-height: 1.6; color: var(--nova-gedempt); margin: 0 0 28.8px; max-width: 640px; }
.winkel.nova .offerte-vraag h2 { font-size: 18px; line-height: 27px; font-weight: 700; margin: 0 0 14.4px; }
.winkel.nova .offerte-kop2 { margin-top: 28.8px !important; }
.winkel.nova .offerte-velden { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 21.6px 14.4px; max-width: 640px; }
.winkel.nova .offerte-velden .klant-veld { grid-column: span 8; }
.winkel.nova .offerte-velden .klant-veld.ov-aanhef { grid-column: span 2; max-width: none; }
.winkel.nova .offerte-velden .klant-veld.ov-naam { grid-column: span 3; }
.winkel.nova .offerte-velden .klant-veld.ov-zes { grid-column: span 6; }
.winkel.nova .offerte-velden .klant-veld.ov-twee { grid-column: span 2; }
.winkel.nova .offerte-upload { grid-column: span 8; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14.4px; padding: 14.4px; border: 1px dashed var(--nova-lijn); border-radius: 6px; cursor: pointer; }
.winkel.nova .offerte-upload input { position: absolute; opacity: 0; width: 0; height: 0; }
.winkel.nova .offerte-upload-icoon { color: var(--nova-inkt); display: grid; }
.winkel.nova .offerte-upload-tekst { display: flex; flex-direction: column; font-size: 13.5px; }
.winkel.nova .offerte-upload-tekst small { font-size: 12px; color: var(--nova-gedempt); }
.winkel.nova .offerte-upload-knop { padding: 10.8px 21.6px; background: var(--nova-vlak, #f6f6f6); border-radius: 6px; font-size: 13.5px; font-weight: 600; }
.winkel.nova .offerte-upload:hover { border-color: var(--nova-inkt); }
.winkel.nova .offerte-bericht { width: 100%; max-width: 640px; min-height: 200px; border: 1px solid var(--nova-lijn); border-radius: 6px; padding: 12.6px; font-size: 13.5px; resize: vertical; }
.winkel.nova .offerte-regels { background: #f6f6f6; padding: 43.2px 28.8px 57.6px; position: sticky; top: 0; align-self: stretch; }
.winkel.nova .offerte-regels > * { max-width: 640px; }
.winkel.nova .offerte-leeg { font-size: 13.5px; color: var(--nova-gedempt); background: #fff; border: 1px solid var(--nova-lijn); border-radius: 6px; padding: 14.4px; }
@media (max-width: 899px) {
  .winkel.nova .offerte-vraag { grid-template-columns: 1fr; }
  .winkel.nova .offerte-gegevens { padding: 21.6px var(--nova-zij) 36px; }
  .winkel.nova .offerte-regels { position: static; padding: 28.8px var(--nova-zij) 43.2px; }
  .winkel.nova .offerte-velden .klant-veld.ov-aanhef, .winkel.nova .offerte-velden .klant-veld.ov-naam, .winkel.nova .offerte-velden .klant-veld.ov-zes, .winkel.nova .offerte-velden .klant-veld.ov-twee { grid-column: span 8; }
}
.winkel.nova .offerte-versturen { margin-top: 21.6px; }
.winkel.nova .offerte-versturen .pdp-koop { width: 100%; }
.winkel.nova .offerte-regel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14.4px;
  padding: 12px 0;
  border-bottom: 1px solid var(--nova-lijn);
}
.winkel.nova .offerte-regel:last-child { border-bottom: 0; padding-bottom: 0; }
.winkel.nova .offerte-regel img,
.winkel.nova .offerte-geenfoto {
  width: 54px; height: 54px; flex: none;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--nova-lijn);
  border-radius: var(--nova-r-klein);
}
.winkel.nova .offerte-regel-naam { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 13.5px; }
.winkel.nova .offerte-aantal { display: flex; flex-direction: column; gap: 4px; flex: none; }
.winkel.nova .offerte-aantal span { font-size: 11.5px; color: var(--nova-gedempt); }
.winkel.nova .offerte-aantal input {
  width: 78px;
  height: 39.6px;
  padding: 0 10px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--nova-lijn);
  border-radius: var(--nova-r-klein);
  font-size: 14px;
}
.winkel.nova .offerte-nr { display: none; }
.winkel.nova .offerte-gegevens .klant-vorm { gap: 14.4px; }
@media (max-width: 560px) {
  .winkel.nova .offerte-regel { flex-wrap: wrap; }
  .winkel.nova .offerte-aantal { width: 100%; flex-direction: row; align-items: center; gap: 9px; }
}
.winkel.nova .offerte-leeg {
  max-width: 760px;
  margin: 0 0 18px;
  padding: 12px 16px;
  background: var(--nova-vlak);
  border: 1px solid var(--nova-lijn);
  border-radius: var(--nova-r-kaart);
  font-size: 13.5px;
}
.winkel.nova .offerte-leeg a { color: var(--nova-accent); text-decoration: underline; text-underline-offset: 3px; margin-left: 6px; }

/* ── Beoordelingen ────────────────────────────────────────────────────── */

/* De samenvatting bij de titel: sterren, cijfer, hoeveel. Klikt door naar
   de beoordelingen zelf, want dat is wat je wilt als je erop kijkt. */
.winkel.nova .pdp-oordeel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 9px;
  font-size: 13.5px;
  color: var(--nova-inkt);
  text-decoration: none;
  width: fit-content;
}
.winkel.nova .pdp-oordeel:hover { opacity: .7; }
.winkel.nova .pdp-oordeel b { font-weight: 600; }
.winkel.nova .pdp-oordeel span { color: color-mix(in srgb, var(--nova-inkt) 60%, #fff); }
.winkel.nova .pdp-oordeel .nova-sterren .oordeel { display: none; }

.winkel.nova .pdp-oordelen { margin-top: 43.2px; }
.winkel.nova .pdp-oordelen h2 { font-size: 23.4px; font-weight: 700; margin: 0 0 18px; }
.winkel.nova .pdp-oordelen-kop { display: flex; align-items: center; gap: 18px; margin-bottom: 21.6px; }
.winkel.nova .pdp-oordelen-kop .cijfer { font-size: 36px; font-weight: 700; line-height: 1; }
.winkel.nova .pdp-oordelen-kop .hoeveel { display: block; font-size: 12.6px; color: var(--nova-gedempt); margin-top: 3px; }
.winkel.nova .pdp-oordelen-kop .nova-sterren .oordeel { display: none; }
.winkel.nova .pdp-oordelen-leeg { font-size: 13.5px; color: var(--nova-gedempt); margin: 0; max-width: 62ch; }
.winkel.nova .pdp-oordelen-leeg a { color: var(--nova-accent); text-decoration: underline; text-underline-offset: 3px; }

.winkel.nova .pdp-oordeel-item { padding: 16px 0; border-top: 1px solid var(--nova-lijn); }
.winkel.nova .pdp-oordeel-item header { display: flex; align-items: center; gap: 10.8px; flex-wrap: wrap; }
.winkel.nova .pdp-oordeel-item header strong { font-size: 14.4px; font-weight: 700; }
.winkel.nova .pdp-oordeel-item .datum { margin-left: auto; font-size: 12.6px; color: var(--nova-flets); }
.winkel.nova .pdp-oordeel-item p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.7; white-space: pre-line; }
.winkel.nova .pdp-oordeel-item .wie { display: block; margin-top: 8px; font-size: 12.6px; color: var(--nova-gedempt); }
.winkel.nova .pdp-oordeel-item .nova-sterren .oordeel { display: none; }

/* Vier beoordelingen, de rest achter een knop. Het vinkje staat verstopt;
   het label eronder is de knop. Geen script, dus het werkt altijd. */
.winkel.nova .pdp-oordelen-vink { position: absolute; opacity: 0; pointer-events: none; }
.winkel.nova .pdp-oordeel-item.extra { display: none; }
.winkel.nova .pdp-oordelen-vink:checked ~ .pdp-oordeel-item.extra { display: block; }
.winkel.nova .pdp-oordelen-meer {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14.4px;
  padding: 9px 14.4px;
  border: 1px solid var(--nova-lijn);
  border-radius: var(--nova-r-klein);
  background: #fff;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--nova-inkt);
  cursor: pointer;
}
.winkel.nova .pdp-oordelen-meer:hover { background: var(--nova-vlak); }
.winkel.nova .pdp-oordelen-meer svg { transition: transform .15s ease; }
.winkel.nova .pdp-oordelen-vink:checked ~ .pdp-oordelen-meer svg { transform: rotate(180deg); }
.winkel.nova .pdp-oordelen-vink:not(:checked) ~ .pdp-oordelen-meer .woord-minder,
.winkel.nova .pdp-oordelen-vink:checked ~ .pdp-oordelen-meer .woord-meer { display: none; }

.winkel.nova .pdp-oordeel-vorm {
  margin-top: 28.8px;
  padding-top: 21.6px;
  border-top: 1px solid var(--nova-lijn);
}
.winkel.nova .pdp-oordeel-vorm h3 { font-size: 16px; font-weight: 700; margin: 0 0 6px; }
.winkel.nova .pdp-oordeel-vorm .klant-vorm { margin-top: 14.4px; }
.winkel.nova .pdp-oordeel-vorm select {
  height: 44px;
  padding: 0 32px 0 14.4px;
  background: #fff;
  border: 1px solid var(--nova-lijn);
  border-radius: var(--nova-r-klein);
  font-size: 14px;
  color: var(--nova-inkt);
}

/* De koopkolom schuift mee als je door het verhaal scrolt. Wie halverwege
   de beschrijving besluit te kopen, hoeft niet terug naar boven. */
@media (min-width: 900px) {
  .winkel.nova .shop-pdp-info {
    position: sticky;
    top: calc(var(--nova-balk-h) + 14.4px);
  }
}

/* ── De contactkaart ──────────────────────────────────────────────────── */
/*
 * Alles wat iemand op een contactpagina komt halen, op één kaart: waar je
 * zit, hoe je bereikbaar bent en wanneer. Foto links, gegevens in het
 * midden, de week rechts.
 */
/* De contactkaart, op hun maten: twee gelijke helften. Links de foto over
   de hele helft, rechts de gegevens en de openingstijden naast elkaar, elk
   289.8 breed met 57.6 ertussen.
   Ons raster was drie ongelijke kolommen; dan is de foto te smal en staan
   de tijden tegen de rand. */
.winkel.nova .site-contactkaart { margin-block: 21.6px; }
.winkel.nova .site-contactkaart-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  background: #fff;
  border: 0;
  border-radius: 5.184px;
  padding: 3.6px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);
  overflow: hidden;
  align-items: stretch;
}
/* De rechterhelft draagt de twee kolommen; de foto vult de linker. */
.winkel.nova .site-contactrechts {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 57.6px;
  padding: 28.8px;
}
.winkel.nova .site-contactfotovak {
  position: relative;
  display: block;
  min-height: 280px;
  border-radius: 3.6px;
  overflow: hidden;
  background: var(--nova-vlak);
}
.winkel.nova .site-contactfoto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.winkel.nova .site-contactwie { padding: 0; }
/* De winkelnaam op hun contactkaart is 21.6 op 32.4, met 21.6 eronder. De
   onze was groter maar met een te krappe regelhoogte, waardoor hij hoger
   leek en de rest naar beneden duwde. */
.winkel.nova .site-contactwie h2 {
  font-size: 21.6px;
  font-weight: 700;
  line-height: 32.4px;
  margin: 0 0 21.6px;
}
.winkel.nova .site-contactadres {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: 14.4px;
  /* Adres, telefoon en e-mail staan bij hen op 16.2 met 24.3 regelhoogte.
     Dat is groter dan de rest van de pagina en dat is met opzet: het is het
     enige op deze pagina waar iemand voor komt. */
  font-size: 16.2px;
  line-height: 24.3px;
}
.winkel.nova .site-contactadres a { color: var(--nova-inkt); text-decoration: none; }
.winkel.nova .site-contactadres a:hover { text-decoration: underline; }
.winkel.nova .site-contactnoot { margin: 18px 0 0; font-size: 13.5px; color: var(--nova-gedempt); }
.winkel.nova .site-tijden { padding: 0; }
/* Hun kop staat op 600 en niet op 700, met 7.2 px eronder in plaats van
   14.4. Dat scheelt bijna een halve regel boven een lijst van zeven dagen. */
.winkel.nova .site-tijden h3 {
  font-size: 18px;
  font-weight: 600;
  line-height: 27px;
  margin: 0;
  padding-bottom: 7.2px;
}
.winkel.nova .site-tijden dl { margin: 0; }
.winkel.nova .site-tijden dl > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  /* Hun dagregel is 31.8 px hoog. De onze was 39.3: acht px per dag, en
     over zeven dagen is dat een halve kaart. */
  padding: 5.775px 0;
  border-bottom: 1px solid var(--nova-lijn);
  font-size: 13.5px;
}
.winkel.nova .site-tijden dl > div:last-child { border-bottom: 0; }
.winkel.nova .site-tijden dt, .winkel.nova .site-tijden dd { margin: 0; }
.winkel.nova .site-tijden dd { font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  .winkel.nova .site-contactkaart-in { grid-template-columns: minmax(0, 1fr); }
  .winkel.nova .site-contactrechts { grid-template-columns: minmax(0, 1fr); gap: 28.8px; }
  .winkel.nova .site-contactfotovak { min-height: 200px; max-height: 280px; }
  .winkel.nova .site-tijden { border-top: 1px solid var(--nova-lijn); padding-top: 21.6px; }
}

/* De verstuurknop staat in de rechterkolom, onder waar het over gaat: dat
   is waar je naar kijkt als je klaar bent met invullen. */

.winkel.nova .offerte-versturen .pdp-koop { width: 100%; justify-content: center; }
.winkel.nova .offerte-versturen p { margin: 10px 0 0; font-size: 12.6px; text-align: center; }
.winkel.nova .klant-veld input[type=file] {
  height: auto;
  padding: 10px 14.4px;
  font-size: 13.5px;
}
@media (min-width: 900px) {
  /* Rechts staan waar het over gaat én de knop, onder elkaar. */
  .winkel.nova .offerte-vorm { grid-template-rows: auto auto; }
  .winkel.nova .offerte-vorm .offerte-gegevens { grid-row: 1 / span 2; }
  .winkel.nova .offerte-vorm .offerte-versturen { order: 3; }
}

/* Keuzelijsten in de klantformulieren dragen dezelfde vorm als de
   invoervelden ernaast; anders staat er één vakje tussen dat er niet
   bijhoort. */
/* Een keuzelijst is even hoog en even rustig als een invoerveld: zelfde
   rand, zelfde etiket erboven, een eigen dun pijltje. */
.winkel.nova .klant-veld select {
  height: 50px;
  padding: 17px 36px 3px 14.4px;
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5l5 5 5-5' fill='none' stroke='%23333' stroke-width='1.5' stroke-linecap='round'/></svg>") no-repeat right 14.4px center;
  border: 1px solid var(--nova-lijn);
  border-radius: var(--nova-r-klein);
  font-size: 12.6px;
  font-family: inherit;
  color: var(--nova-inkt);
  min-width: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.winkel.nova .klant-veld select:focus {
  outline: 0;
  border-color: var(--nova-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nova-accent) 14%, transparent);
}

/* ── Rijen die opzij schuiven ─────────────────────────────────────────── */
/*
 * Een rij artikelen met twee pijltjes naast de titel. De pijlen staan
 * náást de kop en niet over de foto's heen: een pijl bovenop een foto
 * bedekt precies wat je wilt zien.
 */
.winkel.nova .site-rijkop {
  display: flex;
  align-items: center;
  gap: 14.4px;
  margin-bottom: 18px;
}
.winkel.nova .site-rijkop h2 {
  margin: 0;
  font-size: 30.24px;
  font-weight: 700;
  line-height: 45.36px;
  letter-spacing: 0;
}
.winkel.nova .site-rijknop {
  margin-left: auto;
  font-size: 13.5px;
  color: var(--nova-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.winkel.nova .site-rijpijlen { margin-left: auto; display: flex; gap: 7.2px; }
.winkel.nova .site-rijpijlen + .site-rijknop { margin-left: 0; }
.winkel.nova .site-rijpijlen button {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid var(--nova-lijn);
  border-radius: var(--nova-r-klein);
  color: var(--nova-inkt);
  cursor: pointer;
}
.winkel.nova .site-rijpijlen button:hover:not(:disabled) { background: var(--nova-vlak); }
.winkel.nova .site-rijpijlen button:disabled { opacity: .35; cursor: default; }

/* De rij zelf schuift; zonder script doet de vinger of het muiswiel het. */
.winkel.nova .site-producten.carrousel .site-producten-in {
  display: flex;
  gap: 21.6px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* Ruimte onder de rij zodat een schaduw niet wordt afgesneden. */
  padding-bottom: 4px;
}
.winkel.nova .site-producten.carrousel .site-producten-in::-webkit-scrollbar { display: none; }
.winkel.nova .site-producten.carrousel .site-producten-in > * {
  /* Vier kaarten in beeld met 21.6 ertussen, zoals de lijstpagina. */
  flex: 0 0 calc((100% - 64.8px) / 4);
  scroll-snap-align: start;
}
@media (max-width: 700px) {
  .winkel.nova .site-producten.carrousel .site-producten-in > * { flex-basis: 78%; }
}
/* Op een breed scherm houdt een kaart de maat van het origineel (289.8) en
   komen er zoveel in beeld als er passen: vijf op 1536, zes op 1920. */
@media (min-width: 1536px) {
  .winkel.nova .site-producten.carrousel .site-producten-in > * { flex: 0 0 289.8px; }
}

/* ---------------------------------------------------------------
   Hero en categorietegels, op hun maten.

   Hun hero is 22rem hoog en 26rem vanaf tablet. Bij een wortelletter
   van 90% is dat 316.8 en 374.4 px. De tekst staat linksonder met 28.8
   px lucht eromheen (36 vanaf tablet) en 14.4 px tussen de regels en de
   knop. De titel is 36 px wit.
   --------------------------------------------------------------- */
.winkel.nova .site-hero { border-radius: var(--nova-r-kaart); }
.winkel.nova .site-hero-foto { height: 316.8px; }
.winkel.nova .site-hero.metfoto .site-hero-in { padding: 28.8px; gap: 14.4px; }
.winkel.nova .site-hero h1 { font-size: 28.8px; letter-spacing: -.01em; }
.winkel.nova .site-hero-tekst { font-size: 16.2px; }
@media (min-width: 768px) {
  .winkel.nova .site-hero-foto { height: 374.4px; }
  .winkel.nova .site-hero.metfoto .site-hero-in { padding: 36px; }
  .winkel.nova .site-hero h1 { font-size: 36px; }
}
/* De knop in de hero is dezelfde knop als in hun oproepblok: accentvlak,
   witte letters, een pijl erachter. */
.winkel.nova .site-hero-knop {
  border-radius: var(--nova-r-klein);
  padding: 12.6px 21.6px;
  font-size: 14.4px;
  font-weight: 600;
  box-shadow: none;
}

/* De tegel: rand van 10% zwart, ronde hoeken, foto op 16:9, en rechts een
   vierkant knopje van 39.6 px met het pijltje erin. */
.winkel.nova .site-categorien-in { gap: 21.6px; }
.winkel.nova .site-categorie {
  border-color: rgba(51, 51, 51, .1);
  border-radius: var(--nova-r-klein);
  background: #fff;
}
.winkel.nova .site-categorienaam {
  display: flex;
  align-items: center;
  gap: 14.4px;
  padding: 14.4px;
  font-size: 14.4px;
}
.winkel.nova .site-categorienaam b { font-weight: 700; }
.winkel.nova .site-categorienaam small { font-size: 10.8px; padding-top: 7.2px; }
.winkel.nova .site-categoriepijl {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 39.6px;
  width: 39.6px;
  height: 39.6px;
  margin-left: auto;
  border: 1px solid var(--nova-lijn);
  border-radius: var(--nova-r-klein);
  background: #fff;
  color: var(--nova-inkt);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
}
.winkel.nova .site-categorie:hover .site-categoriepijl {
  border-color: var(--winkel-accent);
  color: var(--winkel-accent);
}
/* Als carrousel schuift de rij tegels net zo als de productrij. */
.winkel.nova .site-categorien.carrousel .site-categorien-in {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.winkel.nova .site-categorien.carrousel .site-categorien-in::-webkit-scrollbar { display: none; }
.winkel.nova .site-categorien.carrousel .site-categorien-in > * {
  flex: 0 0 296px;
  scroll-snap-align: start;
}

/* ---------------------------------------------------------------
   De rooilijn van de pagina.

   De blokken op een pagina hadden nog 20 px eigen ruimte aan de zijkant
   bovenop de zijruimte van de pagina zelf. Dan begint de kop van een blok
   20 px verder naar binnen dan het logo en de zoekbalk erboven, en dat is
   precies het scheve dat je wel ziet maar niet kunt aanwijzen. Hun blokken
   staan op dezelfde lijn als de balk; die van ons nu ook.
   --------------------------------------------------------------- */
.winkel.nova .site-blok > section { padding-inline: var(--nova-zij); }

/* De ruimte tussen de blokken.
   Hun blokken hebben zelf geen lucht boven en onder; de ruimte ertussen is
   30 px en komt van de pagina. Bij ons had elk blok 34 px boven en onder,
   dus stond er 68 px tussen twee blokken, plus wat een blok zelf nog aan
   marge had. Dat leest als losse eilanden in plaats van als één pagina.
   Blokken met een eigen vlak (een oproep, een terugbelverzoek) houden hun
   binnenruimte: daar is de lucht onderdeel van het vlak. */
.winkel.nova .site-pagina {
  gap: 30px;
  padding-top: 30px;
}
.winkel.nova .site-blok > section { padding-block: 0; }
.winkel.nova .site-blok > section.site-cta,
.winkel.nova .site-blok > section.site-terugbel { padding-block: 34px; }
/* Een blok met een eigen vlak draagt zijn lucht in het vlak. */
.winkel.nova .site-blok.opm-vlak-grijs > section,
.winkel.nova .site-blok.opm-vlak-accent > section { padding-block: 34px; }
.winkel.nova .site-contactkaart { margin-block: 0; }

/* De categorietegels staan bij hen in een vast raster: vier naast elkaar op
   een breed scherm, drie op een tablet, twee op een grote telefoon, en het
   gat ertussen is 7.2 px. Met een raster dat zich vult naar de ruimte
   werden twee tegels elk 589 px breed; met vaste kolommen houden ze hun
   maat en blijven ze links staan, wat hun site ook doet. */
.winkel.nova .site-categorien-in {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7.2px;
}
@media (min-width: 640px) {
  .winkel.nova .site-categorien-in { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
  .winkel.nova .site-categorien-in { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .winkel.nova .site-categorien-in { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}

/* ---------------------------------------------------------------
   De koppenschaal van hun site, opgemeten op de startpagina.

   Een blokkop boven een productrij is 30.24 px en niet 23.4. Dat is geen
   half verschil: het is het verschil tussen een kop die de rij eronder
   aankondigt en een kop die net iets groter is dan de tekst. De koppen
   binnen een tekstblok hebben hun eigen paar: 30.24 voor een h2 met meer
   regelhoogte omdat er alinea's onder staan, en 23.04 voor een h3.
   --------------------------------------------------------------- */
.winkel.nova .site-blok > section > h2,
.winkel.nova .site-categorien > .site-rijkop h2 {
  font-size: 23.4px;
  font-weight: 700;
  line-height: 30.42px;
  letter-spacing: 0;
  margin: 0 0 14.4px;
}
.winkel.nova .site-producten > .site-rijkop h2,
.winkel.nova .site-tegelrij > .site-rijkop h2 {
  font-size: 30.24px;
  line-height: 45.36px;
}
.winkel.nova .site-tekst h2 {
  font-size: 30.24px;
  font-weight: 700;
  line-height: 48.384px;
  letter-spacing: 0;
}
.winkel.nova .site-tekst h3 {
  font-size: 23.04px;
  font-weight: 700;
  line-height: 36.864px;
  letter-spacing: 0;
}

/* ---------------------------------------------------------------
   De categorieboom in de zijbalk, op hun maten.

   Hun zijbalk toont de indeling twee lagen diep, uitklapbaar, met een
   vakje voor elke naam. Die van ons was een platte lijst van de bovenste
   laag: wie in een winkel met ondercategorieën staat, zag vanaf de zijkant
   niet dat er meer onder zat.

   Openklappen gaat met details/summary en niet met een script. Het
   beveiligingsbeleid van de motor laat geen losse klikafhandelaars toe, en
   een boom die alleen met javascript opengaat is voor een deel van de
   bezoekers geen boom.
   --------------------------------------------------------------- */
.winkel.nova .shop-catgroep {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 18px 0;
  margin-bottom: 0;
}
.winkel.nova .shop-catgroep-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14.4px;
  font-weight: 700;
  color: var(--nova-inkt);
  cursor: pointer;
  list-style: none;
}
.winkel.nova .shop-catgroep-kop::-webkit-details-marker { display: none; }
.winkel.nova .shop-catgroep-kop .chevron { transition: transform .15s ease; }
.winkel.nova .shop-catgroep:not([open]) > .shop-catgroep-kop .chevron {
  transform: rotate(-90deg);
}

.winkel.nova .shop-cat {
  margin-top: 10.8px;
  display: grid;
  gap: 3.6px;
}
/* De regels uit het basisblad tekenen een categorie als een blokje met
   ruimte eromheen. Onder Nova is het een regel met een vakje ervoor, dus
   die ruimte moet expliciet weg; anders staat het vakje scheef en is de
   regelhoogte 10 px te groot. */
.winkel.nova .shop-cat a { padding: 0; border-radius: 0; background: none; display: inline-flex; }
.winkel.nova .shop-cat a:hover { background: none; }
.winkel.nova .shop-cat a.actief { background: none; font-weight: 600; }

.winkel.nova .shop-catregel {
  display: inline-flex;
  align-items: center;
  gap: 10.8px;
  min-height: 24.3px;
  font-size: 13.5px;
  color: var(--nova-inkt);
  text-decoration: none;
}
.winkel.nova .shop-catvak {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  background: #fff;
  border: 1.5px solid var(--nova-lijn);
  border-radius: 3px;
}
.winkel.nova .shop-catregel:hover .shop-catvak { border-color: var(--winkel-accent); }
.winkel.nova .shop-catregel.actief .shop-catvak {
  background-color: var(--winkel-accent);
  border-color: var(--winkel-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1.5 5.2 4.4 8l6-6' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 9.9px;
}

.winkel.nova .shop-cattak { width: 100%; }
.winkel.nova .shop-cattak-rij {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7.2px;
  min-height: 24.3px;
  list-style: none;
  cursor: pointer;
}
.winkel.nova .shop-cattak-rij::-webkit-details-marker { display: none; }
.winkel.nova .shop-cattak-knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 21.6px;
  height: 21.6px;
  flex: 0 0 auto;
  border-radius: 3px;
  color: rgba(51, 51, 51, .55);
}
.winkel.nova .shop-cattak-knop .chevron { transition: transform .15s ease; }
.winkel.nova .shop-cattak[open] > .shop-cattak-rij .shop-cattak-knop .chevron {
  transform: rotate(180deg);
}
.winkel.nova .shop-cattak-rij:hover .shop-cattak-knop {
  background: color-mix(in srgb, var(--winkel-accent) 8%, transparent);
  color: var(--winkel-accent);
}
.winkel.nova .shop-cattak-onder {
  margin: 3.6px 0 5.4px 9px;
  padding-left: 12.6px;
  border-left: 1px solid var(--nova-lijn);
  display: grid;
  gap: 3.6px;
}

/* De filterkaart zelf: één wit vlak van 277 breed met 18 px lucht binnenin
   en een lijn tussen de groepen. Precies hun maten, want de kolom ernaast
   is al op de hun-maat en dan valt een kaart die anders zit meteen op. */
.winkel.nova .shop-filterkaart {
  background: #fff;
  border: 1px solid var(--nova-lijn);
  border-radius: var(--nova-r-kaart);
  padding: 0 18px;
}
.winkel.nova .shop-catgroep + .shop-filtervorm .shop-filtergroep:first-child,
.winkel.nova .shop-filtergroep + .shop-filtergroep {
  border-top: 1px solid var(--nova-lijn);
}
.winkel.nova .shop-filtergroep { padding: 18px 0; }
.winkel.nova .shop-filtereenheid { color: var(--nova-gedempt); font-weight: 400; }

.winkel.nova .shop-filterlijst { display: grid; gap: 3.6px; margin-top: 10.8px; }
.winkel.nova .shop-filterregel {
  display: flex;
  align-items: center;
  gap: 10.8px;
  min-height: 24.3px;
  font-size: 13.5px;
  cursor: pointer;
}
/* Het echte vakje blijft bestaan voor toetsenbord en schermlezer, maar
   staat niet in de weg; wat je ziet is hetzelfde vakje als bij de
   categorieën, zodat de kolom één taal spreekt. */
.winkel.nova .shop-filterregel input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.winkel.nova .shop-filterregel input[type="checkbox"]:checked + .shop-catvak {
  background-color: var(--winkel-accent);
  border-color: var(--winkel-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1.5 5.2 4.4 8l6-6' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 9.9px;
}
.winkel.nova .shop-filterregel input[type="checkbox"]:focus-visible + .shop-catvak {
  outline: 2px solid var(--winkel-accent);
  outline-offset: 2px;
}
.winkel.nova .shop-filterregel:hover .shop-catvak { border-color: var(--winkel-accent); }
.winkel.nova .shop-filternaam { flex: 1; }
.winkel.nova .shop-filteraantal { color: var(--nova-gedempt); font-size: 11.5px; }

.winkel.nova .shop-filterbereik {
  display: flex;
  gap: 7.2px;
  align-items: center;
  margin-top: 10.8px;
}
.winkel.nova .shop-filterbereik input { width: 64px; text-align: right; }
.winkel.nova .shop-filterbereik span { color: var(--nova-gedempt); font-size: 12px; }
.winkel.nova .shop-filterrand { font-size: 11px; color: var(--nova-gedempt); margin-top: 3.6px; }
.winkel.nova .shop-filterknoppen {
  display: flex;
  gap: 7.2px;
  align-items: center;
  padding: 0 0 18px;
}
.winkel.nova .shop-filterknoppen .btn-primary { flex: 1; }

/* ---------------------------------------------------------------
   De offerte zoals de klant hem krijgt.

   Eén blad, gecentreerd, met de winkel eromheen. De maten zijn die van hun
   tekstpagina's: kop 37.44, onderregel 13.5 gedempt, en het blad zelf
   binnen een leesbare breedte in plaats van over de volle 1236.
   --------------------------------------------------------------- */
.winkel.nova .offerte-blad {
  max-width: 860px;
  margin: 0 auto;
  padding: 21.6px 0 43.2px;
}
.winkel.nova .offerte-blad-kop { margin-bottom: 21.6px; }
.winkel.nova .offerte-blad-kop h1 {
  font-size: 37.44px;
  line-height: 48.6px;
  font-weight: 700;
  margin: 3.6px 0 0;
}
.winkel.nova .offerte-blad-sub {
  margin: 3.6px 0 0;
  font-size: 13.5px;
  color: var(--nova-gedempt);
}
.winkel.nova .offerte-blad .card {
  border: 1px solid var(--nova-lijn);
  border-radius: var(--nova-r-kaart);
  background: #fff;
  box-shadow: none;
}
.winkel.nova .offerte-blad table { font-size: 13.5px; }
.winkel.nova .offerte-blad thead th {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--nova-gedempt);
}
.winkel.nova .offerte-blad-knoppen {
  display: flex;
  gap: 10.8px;
  margin-top: 18px;
  align-items: stretch;
}
.winkel.nova .offerte-blad-knoppen form:first-child { flex: 1; }
.winkel.nova .offerte-blad-knoppen .pdp-koop { width: 100%; }
.winkel.nova .offerte-blad-knoppen .ghost {
  height: 100%;
  padding-inline: 21.6px;
  border-radius: var(--nova-r-klein);
}

/* De bijlagen bij een offerte: een korte lijst met de naam als download en
   de grootte ernaast, zodat je weet wat je opent. */
.offerte-bijlagen { padding: 12px 18px; border-top: 1px solid var(--nova-lijn); font-size: 13.5px; }
.offerte-bijlagen .eyebrow { margin-bottom: 6px; }
.offerte-bijlagen ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.offerte-bijlagen li { display: flex; gap: 10px; align-items: baseline; }
.offerte-bijlagen a { color: var(--winkel-accent); text-decoration: underline; text-underline-offset: 2px; }

/* ---------------------------------------------------------------
   De categoriekop, op hun maten.

   Een foto over de hele kolom, 175 / 250 / 325 hoog (klein, normaal,
   groot), met ronde hoeken van het thema. Als de naam in de foto staat,
   ligt er een waas onderin: van doorzichtig op 45 % naar 55 % donker aan
   de onderrand, en met "donker" aan van 25 % bovenaan naar 60 % onderaan.
   De naam is 30 px, gewicht 800, wit, met een lichte schaduw zodat hij ook
   op een lichte plank leesbaar blijft. Padding 20 bij 28.
   --------------------------------------------------------------- */
.winkel.nova .shop-catkop {
  position: relative;
  overflow: hidden;
  border-radius: var(--nova-r-kaart);
  height: 250px;
  margin: 0 0 14.4px;
  background: var(--nova-vlak);
}
.winkel.nova .shop-catkop.hoogte-sm { height: 175px; }
.winkel.nova .shop-catkop.hoogte-lg { height: 325px; }
.winkel.nova .shop-catkop-foto {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.winkel.nova .shop-catkop-waas {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end;
  padding: 20px 28px;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0) 45%, rgba(15, 23, 42, .55));
}
.winkel.nova .shop-catkop.donker .shop-catkop-waas {
  background: linear-gradient(180deg, rgba(15, 23, 42, .25) 0%, rgba(15, 23, 42, .6) 100%);
}
.winkel.nova .shop-catkop-titel {
  margin: 0;
  color: #fff;
  font-size: 30px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -.01em;
  text-shadow: 0 1px 3px rgba(15, 23, 42, .35);
}
/* De tekst onder de titel: hun leesletter, gedempt, en ingeklapt met een
   "Meer lezen" zodra hij lang is; dezelfde vouw als op de productpagina. */
.winkel.nova .shop-cattekst { margin: 0 0 14.4px; }
.winkel.nova .shop-cattekst-in {
  color: var(--nova-gedempt);
  font-size: 14.4px;
  line-height: 1.55;
  white-space: pre-line;
  max-width: 78ch;
}
.winkel.nova .shop-cattekst.gevouwen .shop-cattekst-in {
  max-height: 88px; overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 60%, transparent);
  mask-image: linear-gradient(#000 60%, transparent);
}
@media (max-width: 700px) {
  .winkel.nova .shop-catkop { height: 150px; }
  .winkel.nova .shop-catkop.hoogte-lg { height: 200px; }
  .winkel.nova .shop-catkop-titel { font-size: 22px; }
  .winkel.nova .shop-catkop-waas { padding: 12px 20px; }
}

/* ---------------------------------------------------------------
   Het menupaneel met kolommen, op hun maten (nova-submenu).

   Wit, een lijn erboven, een zachte schaduw eronder, over de volle
   breedte van de balk. Binnenin een raster van vier kolommen met 21.6 px
   ertussen en 21.6 px lucht rondom. De kolomkop is 12.6 px, gewicht 600,
   in de accentkleur en zelf een link; de regels eronder 12.6 px in de
   inktkleur met 7.2 px tussenruimte.
   --------------------------------------------------------------- */
.winkel.nova .shop-menu-item.heeft-kolommen { position: static; }
.winkel.nova .shop-menu-paneel {
  display: none;
  position: absolute;
  left: 0; right: 0; top: 100%;
  z-index: 45;
  background: #fff;
  border-top: 1px solid var(--nova-lijn);
  box-shadow: 0 24px 48px rgba(51, 51, 51, .14);
}
.winkel.nova .shop-menu-item.heeft-kolommen:hover .shop-menu-paneel,
.winkel.nova .shop-menu-item.heeft-kolommen[open] .shop-menu-paneel { display: block; }
.winkel.nova .shop-menu { position: relative; }
.winkel.nova .shop-menu-paneel-in {
  max-width: var(--site-breedte);
  margin: 0 auto;
  padding: 21.6px var(--nova-zij);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 21.6px;
}
.winkel.nova .shop-menu-kolom { display: flex; flex-direction: column; gap: 7.2px; }
.winkel.nova .shop-menu-kolomkop {
  display: block;
  margin-bottom: 3.6px;
  font-size: 12.6px;
  font-weight: 600;
  color: var(--winkel-accent);
  text-decoration: none;
}
.winkel.nova .shop-menu-sublink {
  display: block;
  font-size: 12.6px;
  color: var(--nova-inkt);
  text-decoration: none;
}
.winkel.nova .shop-menu-sublink:hover,
.winkel.nova .shop-menu-kolomkop:hover { color: var(--winkel-accent); text-decoration: underline; }

/* ── Hero met witte kaart (houtjansok: hero-multi full-width met beloftes) ──
   Gemeten op het origineel bij 1440: vlak 396 hoog met ronde hoek 7.2,
   kaart 471 breed op 43.2 van de rand, binnenrand 21.6, kop 21.6/32.4 vet,
   zin 12.6/18.9, beloftes 13.5 halfvet met groen vinkje en 10.8 ertussen,
   knop 43.2 hoog, 12.6 halfvet, hoek 6. De foto krijgt 15% zwart eroverheen. */
.winkel.nova .site-hero.kaart { border-radius: var(--nova-r-kaart); }
.winkel.nova .site-hero.kaart .site-hero-foto { height: 396px; }
.winkel.nova .site-hero.kaart .site-hero-waas { background: rgba(0, 0, 0, .15); }
.winkel.nova .site-hero.kaart .site-hero-in {
  position: absolute; inset: 0; max-width: none; padding: 43.2px;
  display: flex; align-items: flex-start; justify-content: flex-start; gap: 0;
}
.winkel.nova .site-hero-kaart {
  background: #fff; color: #333; border-radius: 5.2px; padding: 21.6px;
  display: grid; gap: 14.4px; max-width: 471px; width: 100%; text-align: left;
}
.winkel.nova .site-hero.kaart h1 { color: #333; text-shadow: none; font-size: 21.6px; line-height: 32.4px; font-weight: 700; margin: 0; letter-spacing: 0; }
.winkel.nova .site-hero.kaart .site-hero-tekst { color: #333; font-size: 12.6px; line-height: 18.9px; margin: 0; max-width: none; }
.winkel.nova .site-hero-usps { list-style: none; margin: 14.4px 0; padding: 0; display: grid; gap: 3.6px; }
.winkel.nova .site-hero-usps li {
  display: flex; align-items: center; gap: 10.8px;
  font-size: 13.5px; line-height: 20.25px; font-weight: 600;
}
.winkel.nova .site-hero-usps li::before {
  content: ""; flex: 0 0 14.4px; width: 14.4px; height: 14.4px; border-radius: 50%;
  background: var(--winkel-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-4.9' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}
.winkel.nova .site-hero.kaart .site-hero-knop {
  justify-self: start; height: 43.2px; padding: 0 14.4px; gap: 18px;
  font-size: 12.6px; line-height: 1; font-weight: 600; border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px rgba(0, 0, 0, .06);
}

/* ── Categorietegels als foto met knop (houtjansok: category-blocks contained) ──
   Vier naast elkaar met 7.2 ertussen, 16:9, hoek 5.4, foto donkerder door
   een verloop van boven (50%) plus 25% zwart, en onderin het midden een
   knop in de accentkleur: 10.8 boven en onder, 14.4 opzij, 13.5 halfvet
   wit, pijltje 21.6 verderop. */
.winkel.nova .site-categorien.foto .site-categorien-in { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7.2px; }
.winkel.nova .site-categorien.foto .site-categorie {
  position: relative; border: 0; border-radius: 5.4px; background: #f3f3f3; aspect-ratio: 16 / 9;
}
.winkel.nova .site-categorien.foto .site-categoriefoto { position: absolute; inset: 0; aspect-ratio: auto; }
.winkel.nova .site-categorien.foto .site-categoriefoto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0) 50%), rgba(0, 0, 0, .25);
}
.winkel.nova .site-categorien.foto .site-categorienaam {
  position: absolute; left: 50%; bottom: 21.6px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 21.6px; padding: 10.8px 14.4px;
  background: var(--winkel-accent); color: #fff; border-radius: 1.8px;
  font-size: 13.5px; line-height: 1.5; font-weight: 600; white-space: nowrap; max-width: calc(100% - 43.2px);
}
.winkel.nova .site-categorien.foto .site-categorienaam b { font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; }
.winkel.nova .site-categorien.foto .site-categorienaam small,
.winkel.nova .site-categorien.foto .site-categoriepijl { display: none; }
.winkel.nova .site-categorien.foto .site-categorieknop-pijl { flex: 0 0 6px; transform: translateY(1px); }
.winkel.nova .site-categorien.foto .site-categorie:hover .site-categorienaam b { color: #fff; }
.winkel.nova .site-categorien.foto .site-categorie:hover .site-categorienaam { filter: brightness(1.08); }

/* ── Terugbelverzoek als kaart (houtjansok: call-me-back met foto) ──
   Een witte kaart van 1207 breed op wit, drie kolommen met 28.8 ertussen en
   28.8 rand opzij, de foto grijs en 216 hoog tot de onderrand, de kop
   21.6 vet, de zin op 60%, het nummerveld met een vierkant knopje van 28.8
   erin op 10.8 van de rand. */
.winkel.nova .site-terugbel.kaart { background: transparent; }
.winkel.nova .site-terugbel.kaart .site-terugbel-in {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28.8px;
  max-width: 1158.6px; padding: 0 28.8px; margin: 0 auto; text-align: left;
  background: #fff; border: 1px solid rgba(51, 51, 51, .1); border-radius: 7.2px;
}
.winkel.nova .site-terugbel-foto { display: flex; justify-content: center; align-items: flex-end; }
.winkel.nova .site-terugbel-foto img {
  height: 216px; width: auto; max-width: 100%; margin-top: -14.4px; display: block;
  filter: grayscale(1) brightness(1.1); mix-blend-mode: multiply;
}
.winkel.nova .site-terugbel.kaart .site-terugbel-tekst { padding: 28.8px 0; display: flex; flex-direction: column; justify-content: center; }
.winkel.nova .site-terugbel.kaart h2 { font-size: 21.6px; line-height: 32.4px; font-weight: 700; margin: 0; }
.winkel.nova .site-terugbel.kaart p { color: rgba(51, 51, 51, .6); margin: 0; font-size: 13.5px; line-height: 20.25px; }
.winkel.nova .site-terugbel.kaart .site-terugbel-form {
  position: relative; margin: 0; padding: 28.8px 0; align-items: center; flex-wrap: nowrap; gap: 0;
}
.winkel.nova .site-terugbel.kaart .site-terugbel-form input { width: 100%; min-width: 0; height: 50.4px; padding-right: 50.4px; }
.winkel.nova .site-terugbel-knop {
  position: absolute; right: 10.8px; top: 50%; transform: translateY(-50%);
  width: 28.8px; height: 28.8px; min-height: 0; padding: 0; border-radius: 3.6px;
  display: inline-flex; align-items: center; justify-content: center;
}
@media (max-width: 1023px) {
  .winkel.nova .site-terugbel.kaart .site-terugbel-in { grid-template-columns: 1fr; }
  .winkel.nova .site-terugbel-foto { display: none; }
  .winkel.nova .site-categorien.foto .site-categorien-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Tekst in het midden (houtjansok: de regel met vinkjes onder de hero). */
.winkel.nova .site-tekst.midden { text-align: center; }
.winkel.nova .site-tekst.midden p { margin-left: auto; margin-right: auto; }

/* Tekst naast foto op een vlak: licht grijs of in de kleur van de winkel
   (houtjansok: image-text met background secondary / primary). Het vlak
   krijgt de kaarthoek, de foto vult de linkerhelft tot de rand. */
.winkel.nova .site-tekstfoto.vlak-grijs,
.winkel.nova .site-tekstfoto.vlak-accent { border-radius: var(--nova-r-kaart); overflow: hidden; }
.winkel.nova .site-tekstfoto.vlak-grijs { background: var(--nova-vlak, #f6f6f6); }
.winkel.nova .site-tekstfoto.vlak-accent { background: var(--winkel-accent); color: #fff; }
.winkel.nova .site-tekstfoto.vlak-accent h2,
.winkel.nova .site-tekstfoto.vlak-accent h3,
.winkel.nova .site-tekstfoto.vlak-accent p,
.winkel.nova .site-tekstfoto.vlak-accent li { color: #fff; }
.winkel.nova .site-tekstfoto.vlak-accent .btn-primary,
.winkel.nova .site-tekstfoto.vlak-accent .site-knop { background: #fff; color: var(--winkel-accent); }
.winkel.nova .site-tekstfoto.vlak-grijs .site-tekstfoto-in,
.winkel.nova .site-tekstfoto.vlak-accent .site-tekstfoto-in { padding: 21.6px; }

/* ── Subcategorieën onder de categoriekop (houtjansok: categories) ──
   Witte kaartjes met een dunne rand, 14.4 rand, fotootje van 57.6 en de
   naam vet; ze wikkelen als een rij met 7.2 ertussen. */
.winkel.nova .shop-subtegels { display: flex; flex-wrap: wrap; gap: 7.2px; margin: 0 0 21.6px; }
.winkel.nova .shop-subtegel { display: inline-flex; align-items: center; gap: 10.8px; padding: 14.4px;
  background: #fff; border: 1px solid var(--nova-lijn, #e5e6e5); border-radius: 3.6px; color: var(--nova-inkt); text-decoration: none; transition: border-color .2s; }
.winkel.nova .shop-subtegel:hover { border-color: var(--nova-accent); }
.winkel.nova .shop-subtegel-beeld { width: 57.6px; height: 57.6px; flex: none; display: grid; place-items: center; mix-blend-mode: multiply; }
.winkel.nova .shop-subtegel-beeld img { max-width: 100%; max-height: 100%; object-fit: contain; }
.winkel.nova .shop-subtegel b { font-size: 13.5px; line-height: 18px; font-weight: 700; }

/* ── Inloggen (houtjansok: account/sign-in) ──
   Links wit met de kop op 37.4/56.2 en velden van 450 x 50; rechts een
   vlak in de vierde kleur (#eeefed) met 86.4 rand boven en links, twee
   knoppen van 251 x 43 en de foto van 370 rechtsonder. */
.winkel.nova .inlog { display: grid; grid-template-columns: 1fr 1fr; min-height: 591px; margin: 0 calc(-1 * var(--nova-zij)); }
.winkel.nova .inlog-links { padding: 32px var(--nova-zij) 43.2px; display: flex; flex-direction: column; }
.winkel.nova .inlog-kruimels { margin: 0; }
.winkel.nova .inlog-vorm { width: 450px; max-width: 100%; margin: 100px auto 0; }
.winkel.nova .inlog-vorm h1 { font-size: 37.44px; line-height: 56.16px; font-weight: 700; margin: 0 0 36px; letter-spacing: 0; }
.winkel.nova .inlog-velden { display: grid; gap: 28.8px; }
.winkel.nova .inlog-rij { display: flex; align-items: center; justify-content: space-between; gap: 14.4px; margin-top: 14.4px; }
.winkel.nova .inlog-vergeten { color: var(--nova-inkt); text-decoration: none; font-size: 13.5px; white-space: nowrap; }
.winkel.nova .inlog-vergeten:hover { text-decoration: underline; }
.winkel.nova .inlog-knop { display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; height: 43.2px; padding: 0 21.6px;
  border-radius: 6px; font-size: 16.2px; font-weight: 600; line-height: 1; text-decoration: none; box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px rgba(0, 0, 0, .06); }
.winkel.nova .inlog-knop-wit { background: #fff; color: var(--nova-inkt); }
.winkel.nova .inlog-knop-wit:hover { background: #fff; filter: brightness(.97); }
.winkel.nova .inlog-rechts { position: relative; overflow: hidden; background: var(--nova-tint, #eeefed); margin-left: 14.4px;
  padding: 86.4px 21.6px 129.6px 86.4px; }
.winkel.nova .inlog-rechts h2 { font-size: 30.24px; line-height: 45.36px; font-weight: 700; margin: 0 0 21.6px; }
.winkel.nova .inlog-rechts p { margin: 0 0 21.6px; max-width: 576px; color: var(--nova-inkt); }
.winkel.nova .inlog-usps { list-style: none; margin: 0 0 28.8px; padding: 0; display: grid; gap: 3.6px; position: relative; z-index: 1; }
.winkel.nova .inlog-usps li { display: flex; align-items: center; gap: 10.8px; font-size: 13.5px; line-height: 20.25px; font-weight: 600; }
.winkel.nova .inlog-usps li::before { content: ""; flex: 0 0 14.4px; width: 14.4px; height: 14.4px; border-radius: 50%;
  background: var(--winkel-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-4.9' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.winkel.nova .inlog-knoppen { display: grid; gap: 14.4px; justify-items: start; position: relative; z-index: 1; }
.winkel.nova .inlog-knoppen .inlog-knop { width: 251px; }
.winkel.nova .inlog-foto { position: absolute; right: -29px; bottom: 0; width: 370px; height: 370px; object-fit: contain; object-position: bottom; pointer-events: none; }
@media (max-width: 1023px) {
  .winkel.nova .inlog { grid-template-columns: 1fr; }
  .winkel.nova .inlog-rechts { margin-left: 0; padding: 43.2px var(--nova-zij) 260px; }
  .winkel.nova .inlog-vorm { margin-top: 43.2px; }
}

/* ── Winkelwagen (houtjansok: checkout/cart) ──
   Links de rijen: foto 57, naam vet, stukprijs, aantal met min en plus in
   een vak van 92 x 38, regeltotaal vet, kruisje. Rechts het besteloverzicht
   op een licht vlak met hoek 14.4, een kop met "Stap 1 / 2", de telling en
   onderin een donkerder band met de knop. */
.winkel.nova .wagen-vlak { display: grid; grid-template-columns: minmax(0, 1fr) 566px; gap: 43.2px; align-items: start; }
.winkel.nova .wagen-regels { display: flex; flex-direction: column; }
.wagen-regel.vorm-nova, .winkel.nova .wagen-regel { display: grid; grid-template-columns: 57.6px minmax(0, 1fr) auto 92px 110px 32px; align-items: center; gap: 21.6px;
  padding: 21.6px 0; border: 0; border-bottom: 1px solid var(--nova-lijn); border-radius: 0; background: transparent; }
.winkel.nova .wagen-foto { width: 57.6px; height: 57.6px; object-fit: contain; display: block; border-radius: 0; }
.winkel.nova .wagen-foto.leeg { background: var(--nova-vlak); border-radius: 6px; }
.winkel.nova .wagen-naam { font-size: 13.5px; font-weight: 700; line-height: 20px; }
.winkel.nova .wagen-regel .cell-sub { font-size: 12.6px; color: var(--nova-gedempt); }
.winkel.nova .wagen-stuk { display: flex; flex-direction: column; align-items: flex-end; white-space: nowrap; }
.winkel.nova .wagen-stuk b { font-size: 17.28px; font-weight: 700; line-height: 1.2; }
.winkel.nova .wagen-stuk small { font-size: 11px; color: var(--nova-gedempt); }
.winkel.nova .wagen-aantalvorm { display: inline-flex; align-items: stretch; height: 38px; border: 1px solid var(--nova-lijn); border-radius: 6px; overflow: hidden; margin: 0; }
.winkel.nova .wagen-aantalvorm input { width: 34px; border: 0; text-align: center; font-size: 13.5px; font-weight: 600; padding: 0; background: transparent; -moz-appearance: textfield; }
.winkel.nova .wagen-aantalvorm input::-webkit-outer-spin-button, .winkel.nova .wagen-aantalvorm input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.winkel.nova .wagen-stap { width: 28px; border: 0; background: transparent; color: var(--nova-gedempt); font-size: 16px; cursor: pointer; }
.winkel.nova .wagen-stap:hover { color: var(--nova-inkt); background: var(--nova-vlak); }
.winkel.nova .wagen-aantalvorm [data-wagen-knop] { display: none; }
.winkel.nova .wagen-totaal { font-size: 17.28px; font-weight: 700; text-align: right; white-space: nowrap; min-width: 0; }
.winkel.nova .wagen-wegvorm { margin: 0; }
.winkel.nova .wagen-weg { width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--nova-vlak); color: var(--nova-gedempt); font-size: 18px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.winkel.nova .wagen-weg:hover { background: var(--nova-lijn); color: var(--nova-inkt); }
.winkel.nova .wagen-telling { position: sticky; top: 14.4px; padding: 0; border: 0; background: #f5f5f4; border-radius: 14.4px; box-shadow: 0 5px 40px rgba(0, 0, 0, .12); overflow: hidden; display: flex; flex-direction: column; gap: 0; }
.winkel.nova .wagen-telling-kop { display: flex; align-items: center; justify-content: space-between; gap: 14.4px; padding: 28.8px 28.8px 0; }
.winkel.nova .wagen-telling-kop h2 { margin: 0; font-size: 18px; line-height: 27px; font-weight: 700; }
.winkel.nova .wagen-telling-lijf { padding: 21.6px 28.8px 28.8px; display: flex; flex-direction: column; gap: 7.2px; }
.winkel.nova .wagen-korting { display: flex; gap: 7.2px; margin: 0 0 10.8px; }
.winkel.nova .wagen-korting input { flex: 1; min-width: 0; height: 40px; background: #fff; text-transform: uppercase; }
.winkel.nova .wagen-rij { display: flex; justify-content: space-between; gap: 14.4px; font-size: 13.5px; padding: 5.4px 10.8px; }
.winkel.nova .wagen-rij.wagen-totaalrij { font-size: 16.2px; font-weight: 600; padding-top: 10.8px; margin-top: 3.6px; border-top: 1px solid rgba(51, 51, 51, .1); }
.winkel.nova .wagen-gratis { font-size: 12.6px; color: var(--nova-gedempt); padding: 0 10.8px; }
.winkel.nova .wagen-telling-voet { background: #e8e8e6; padding: 21.6px 28.8px 28.8px; display: flex; flex-direction: column; align-items: center; gap: 10.8px; }
.winkel.nova .wagen-afrekenen { width: 100%; height: 43.2px; justify-content: center; font-size: 16.2px; font-weight: 600; border-radius: 6px; margin: 0; box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
.winkel.nova .wagen-vraag { display: inline-flex; align-items: center; gap: 5.4px; font-size: 13.5px; color: var(--nova-inkt); text-decoration: none; }
.winkel.nova .wagen-vraag:hover { text-decoration: underline; }
.winkel.nova .wagen-veilig { display: inline-flex; align-items: center; gap: 7.2px; font-size: 12.6px; color: var(--nova-gedempt); }
.winkel.nova .wagen-usps { display: flex; justify-content: space-between; gap: 21.6px; flex-wrap: wrap; margin: 43.2px 0 21.6px; font-size: 13.5px; border-top: 0; padding: 0; }
.winkel.nova .wagen-usps .usp-punt { display: inline-flex; align-items: center; gap: 8px; width: auto; margin: 0; }
.winkel.nova .wagen-usps .usp-punt svg { color: #fff; background: var(--nova-groen, #16a34a); border-radius: 50%; padding: 1px; flex: none; }
@media (max-width: 1099px) { .winkel.nova .wagen-vlak { grid-template-columns: 1fr; } .winkel.nova .wagen-telling { position: static; } }
@media (max-width: 767px) { .winkel.nova .wagen-regel { grid-template-columns: 57.6px minmax(0, 1fr) 32px; } .winkel.nova .wagen-stuk, .winkel.nova .wagen-totaal { grid-column: 2; justify-self: start; text-align: left; } .winkel.nova .wagen-aantalvorm { grid-column: 2; } }

/* ── Afrekenen (houtjansok: checkout/shipping) ── */

/* ── Winkelwagenpaneel (houtjansok: shopping-cart-panel) ──
   470 breed aan de rechterkant, regels als witte kaartjes met 12.6 rand,
   foto 65, kruisje rechtsboven; onderin de telling (Subtotaal 11.7,
   Totaal 15.3 vet), twee tekstknopjes en de knop Afrekenen van 63 hoog. */
.wagen-waas { position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 70; opacity: 0; transition: opacity .25s ease; }
.wagen-waas.open { opacity: 1; }
.wagen-paneel { position: fixed; top: 0; right: 0; bottom: 0; width: 470px; max-width: 100vw; z-index: 71; background: #f4f4f2; color: var(--nova-inkt);
  display: flex; flex-direction: column; transform: translateX(100%); transition: transform .25s ease; box-shadow: -10px 0 40px rgba(0, 0, 0, .12); }
.wagen-paneel.open { transform: none; }
.wagen-paneel[hidden] { display: none; }
.wagen-paneel-kop { display: flex; align-items: center; justify-content: space-between; padding: 14.4px 14.4px 10.8px; font-size: 15.3px; }
.wagen-paneel-sluit { width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; font-size: 22px; line-height: 1; cursor: pointer; color: var(--nova-gedempt); }
.wagen-paneel-sluit:hover { background: rgba(0, 0, 0, .06); color: var(--nova-inkt); }
.wagen-paneel-in { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.wagen-paneel-regels { flex: 1; min-height: 0; overflow-y: auto; padding: 0 14.4px 14.4px; display: flex; flex-direction: column; gap: 10.8px; }
.wagen-paneel-regel { position: relative; display: grid; grid-template-columns: 65px minmax(0, 1fr); gap: 14.4px; padding: 11.7px 12.6px 10.8px; background: #fff; border-radius: 6px; }
.wagen-paneel-weg { position: absolute; top: 9px; right: 9px; width: 22px; height: 22px; border: 0; border-radius: 50%; background: transparent; color: var(--nova-gedempt); font-size: 16px; line-height: 1; cursor: pointer; }
.wagen-paneel-weg:hover { background: var(--nova-vlak); color: var(--nova-inkt); }
.wagen-paneel-foto { width: 65px; height: 65px; object-fit: contain; align-self: center; mix-blend-mode: multiply; }
.wagen-paneel-foto.leeg { background: var(--nova-vlak); border-radius: 6px; }
.wagen-paneel-kern { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-right: 22px; }
.wagen-paneel-kern > b { font-size: 12.6px; font-weight: 700; line-height: 18px; }
.wagen-paneel-kern > small { font-size: 10.8px; color: var(--nova-gedempt); }
.wagen-paneel-onder { display: flex; align-items: flex-end; justify-content: space-between; gap: 10.8px; margin-top: 7.2px; }
.wagen-paneel-stepper { display: inline-flex; align-items: stretch; height: 34px; border: 1px solid var(--nova-lijn); border-radius: 6px; overflow: hidden; background: #fff; }
.wagen-paneel-stepper button { width: 26px; border: 0; background: transparent; color: var(--nova-gedempt); cursor: pointer; font-size: 15px; }
.wagen-paneel-stepper button:hover { background: var(--nova-vlak); color: var(--nova-inkt); }
.wagen-paneel-stepper input { width: 30px; border: 0; text-align: center; font-size: 12.6px; font-weight: 600; padding: 0; -moz-appearance: textfield; }
.wagen-paneel-stepper input::-webkit-outer-spin-button, .wagen-paneel-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wagen-paneel-prijs { display: flex; flex-direction: column; align-items: flex-end; }
.wagen-paneel-prijs b { font-size: 13.5px; font-weight: 700; }
.wagen-paneel-prijs small { font-size: 10.8px; color: var(--nova-gedempt); }
.wagen-paneel-voet { padding: 7.2px 14.4px 14.4px; border-top: 1px solid rgba(0, 0, 0, .06); background: linear-gradient(rgba(244, 244, 242, 0), #f4f4f2 40px); }
.wagen-paneel-telling { padding: 18px; display: flex; flex-direction: column; gap: 4.5px; }
.wagen-paneel-rij { display: flex; justify-content: space-between; gap: 14.4px; font-size: 11.7px; font-weight: 500; }
.wagen-paneel-rij span:last-child { font-weight: 600; }
.wagen-paneel-rij.totaal { font-size: 12.6px; padding-top: 8px; }
.wagen-paneel-rij.totaal span:first-child { font-weight: 900; }
.wagen-paneel-rij.totaal span:last-child { font-size: 15.3px; font-weight: 700; }
.wagen-paneel-rij.totaal small { font-size: 11px; font-weight: 400; }
.wagen-paneel-links { display: flex; justify-content: space-between; align-items: center; gap: 10.8px; padding: 0 0 7.2px; font-size: 11.7px; }
.wagen-paneel-links a, .wagen-paneel-leeg-knop { color: var(--nova-inkt); background: transparent; border: 0; padding: 1.8px 7.2px; font: inherit; font-size: 11.7px; cursor: pointer; text-decoration: none; }
.wagen-paneel-links a:hover, .wagen-paneel-leeg-knop:hover { text-decoration: underline; }
.wagen-paneel-afrekenen { display: flex; width: 100%; height: 63px; align-items: center; justify-content: center; font-size: 16.2px; font-weight: 700; border-radius: 6px; margin: 0; }
.wagen-paneel-leeg { padding: 43.2px 21.6px; text-align: center; display: flex; flex-direction: column; gap: 14.4px; align-items: center; }
html.wagen-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .wagen-paneel, .wagen-waas { transition: none; } }

/* ── Past op elk scherm ──
   De menubalk schuift opzij onder 1280 in plaats van onder de inhoud te
   vallen; de inlogpagina krimpt netjes mee; de kruimel op de inlogpagina
   staat op de lijn van het formulier. */
@media (max-width: 1279px) {
  .shop-menu.vorm-nova .shop-menu-in { overflow-x: auto; overflow-y: visible; scrollbar-width: none; flex-wrap: nowrap; }
  .shop-menu.vorm-nova .shop-menu-in::-webkit-scrollbar { display: none; }
  .shop-menu.vorm-nova .shop-menu-item { flex: none; }
}
.winkel.nova .inlog-vorm { width: 100%; max-width: 450px; }
.winkel.nova .inlog-kruimels { width: 100%; max-width: 450px; margin-left: auto; margin-right: auto; }
.winkel.nova .inlog, .winkel.nova .offerte-vraag { min-width: 0; }
.winkel.nova .inlog-links, .winkel.nova .inlog-rechts, .winkel.nova .offerte-gegevens, .winkel.nova .offerte-regels { min-width: 0; }

/* Tussen 1024 en 1279 past de kop alleen zonder de bijregel onder het
   telefoonnummer en zonder de losse woorden Huren en Vragen. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .shop-header.vorm-nova a[href^="tel:"] small,
  .shop-header.vorm-nova a[href^="tel:"] .kop-sub,
  .shop-header.vorm-nova .kop-huur,
  .shop-header.vorm-nova .kop-hulp { display: none !important; }
  .shop-header.vorm-nova .shop-zoek { min-width: 160px; flex: 1 1 160px; }
  .shop-header.vorm-nova .shop-header-in { gap: 10.8px; }
}
/* ── Mijn account in de stijl van het voorbeeld: tabbladen als woorden op
   60% met het actieve als vlakje in de accentkleur (10%), kaarten met hoek
   14.4 op een licht vlak. */
.winkel.nova .klant-tabs { gap: 3.6px; align-items: center; border-bottom: 0; margin-bottom: 14.4px; }
.winkel.nova .klant-tabs a { padding: 10.8px 14.4px; border-bottom: 0; border-radius: 6px; font-size: 13.5px; font-weight: 600; color: color-mix(in srgb, var(--nova-inkt) 60%, #fff); }
.winkel.nova .klant-tabs a.aan { color: var(--nova-inkt); background: color-mix(in srgb, var(--nova-accent) 10%, #fff); border-bottom-color: transparent; }
.winkel.nova .klant-kaart-blok { border-radius: 14.4px; }
.winkel.nova .klant-vak { border-radius: 14.4px; }

/* Onder 1440 zijn Huren en Vragen in de kop te veel van het goede naast
   telefoon, btw en wagen; ze staan ook in de lade en de voet. */
@media (min-width: 1024px) and (max-width: 1439px) {
  .shop-header.vorm-nova .kop-huur, .shop-header.vorm-nova .kop-hulp { display: none !important; }
}

/* De rijen onder de productpagina (laatst bekeken, gerelateerd) volgen de
   rijen van de startpagina: 21.6 ertussen, vijf in beeld op een breed scherm. */
.winkel.nova .shop-rij .shop-tegels.vorm-nova { gap: 21.6px; }
@media (min-width: 1536px) {
  .winkel.nova .shop-rij .shop-tegels.vorm-nova { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ── Nova: opmaak per blok ── */
.winkel.nova .site-blok.opm-vlak-grijs > section,
.winkel.nova .site-blok.opm-vlak-accent > section { padding-block: 34px; }
.winkel.nova .site-blok.opm-ruimte-ruim > section { padding-block: 57.6px; }
.winkel.nova .site-blok.opm-ruimte-krap > section { padding-block: 0; }
.winkel.nova .site-blok.opm-ruimte-krap > section > h2 { margin-top: 0; }
.winkel.nova .site-blok.opm-vlak-accent .site-knop,
.winkel.nova .site-blok.opm-vlak-accent .btn-primary { background: #fff; color: var(--winkel-accent); }

/* ── De productpagina: koopkaart die blijft staan, of tabbladen ── */
.winkel.nova .shop-pdp.pdp-plak .shop-pdp-info { position: sticky; top: calc(var(--nova-balk-h) + 14.4px); align-self: start; }
.winkel.nova .shop-pdp.pdp-tabs .pdp-tabbalk { display: flex; gap: 4px; border-bottom: 1px solid var(--nova-lijn); margin: 21.6px 0 14.4px; grid-column: 1 / -1; }
.winkel.nova .shop-pdp.pdp-tabs .pdp-tab { border: 0; background: none; font: inherit; font-weight: 600; padding: 9px 14.4px; color: var(--nova-gedempt); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
.winkel.nova .shop-pdp.pdp-tabs .pdp-tab.aan { color: var(--nova-inkt); border-bottom-color: var(--nova-accent); }
.winkel.nova .shop-pdp.pdp-tabs .pdp-tabvak { grid-column: 1 / -1; }
.winkel.nova .shop-pdp.pdp-tabs .pdp-tabvak[hidden] { display: none; }
.winkel.nova .shop-pdp.pdp-tabs .pdp-verhaal-tekst { max-height: none; }

/* ── De categoriepagina: filters boven of achter een knop, kop, tekst ── */
.winkel.nova .shop-lijst.filters-boven { grid-template-columns: 1fr; }
.winkel.nova .shop-lijst.filters-boven .shop-filterkaart { display: flex; flex-wrap: wrap; gap: 8px 21.6px; align-items: start; }
.winkel.nova .shop-lijst.filters-boven .shop-catgroep, .winkel.nova .shop-lijst.filters-boven .shop-filtergroep { flex: 1 1 200px; }
.winkel.nova .shop-lijst.filters-boven .shop-filtervorm { display: contents; }
.winkel.nova .shop-lijst.filters-knop { grid-template-columns: 1fr; }
.winkel.nova .shop-lijst.filters-knop .shop-filterknop { justify-self: start; }
.winkel.nova .shop-lijst.filters-knop .shop-zijbalk { display: none; }
.winkel.nova .shop-lijst.filters-knop.filters-open .shop-zijbalk { display: block; }
.winkel.nova .shop-lijst.catkop-titel .shop-catkop-foto { display: none; }
.winkel.nova .shop-lijst.catkop-titel .shop-catkop { min-height: 0; height: auto; background: transparent; }
.winkel.nova .shop-lijst.catkop-titel .shop-catkop-waas { background: none; padding: 0; }
.winkel.nova .shop-lijst.catkop-titel .shop-catkop-titel { color: var(--nova-inkt); }
.winkel.nova .shop-lijstkolom { display: flex; flex-direction: column; }
.winkel.nova .shop-lijst.cattekst-boven .shop-lijsttekst, .winkel.nova .shop-lijst.cattekst-inklap .shop-lijsttekst { order: -1; margin: 0 0 21.6px; }
.winkel.nova .shop-lijsttekst-inklap > summary { cursor: pointer; font-weight: 600; list-style: none; padding: 10.8px 0; }
.winkel.nova .shop-lijsttekst-inklap > summary::-webkit-details-marker { display: none; }
.winkel.nova .shop-lijsttekst-inklap > summary::after { content: " ▾"; color: var(--nova-gedempt); }

/* ── De productkaart: rustig, of als lijst ── */
.winkel.nova .shop-lijst.kaart-rustig .shop-kaart.vorm-nova { border-color: transparent; }
.winkel.nova .shop-lijst.kaart-rustig .shop-kaart.vorm-nova:hover { border-color: var(--nova-lijn); }
.winkel.nova .shop-lijst.kaart-rustig .shop-kaart.vorm-nova .nova-inwagen { opacity: 0; transition: opacity .15s; }
.winkel.nova .shop-lijst.kaart-rustig .shop-kaart.vorm-nova:hover .nova-inwagen, .winkel.nova .shop-lijst.kaart-rustig .shop-kaart.vorm-nova:focus-within .nova-inwagen { opacity: 1; }
.winkel.nova .shop-lijst.kaart-lijst .shop-raster { grid-template-columns: 1fr !important; }
.winkel.nova .shop-lijst.kaart-lijst .shop-kaart.vorm-nova { display: grid; grid-template-columns: 140px minmax(0, 1fr) auto; grid-template-areas: "foto tekst voet"; gap: 7.2px 21.6px; align-items: center; }
.winkel.nova .shop-lijst.kaart-lijst .shop-kaart.vorm-nova > img, .winkel.nova .shop-lijst.kaart-lijst .shop-kaart.vorm-nova .foto-leeg { grid-area: foto; aspect-ratio: 4 / 3; }
.winkel.nova .shop-lijst.kaart-lijst .shop-kaart.vorm-nova .nova-chiprij, .winkel.nova .shop-lijst.kaart-lijst .shop-kaart.vorm-nova .nova-sterren, .winkel.nova .shop-lijst.kaart-lijst .shop-kaart.vorm-nova .nova-titel, .winkel.nova .shop-lijst.kaart-lijst .shop-kaart.vorm-nova .nova-code, .winkel.nova .shop-lijst.kaart-lijst .shop-kaart.vorm-nova .nova-specs { grid-column: tekst; }
.winkel.nova .shop-lijst.kaart-lijst .shop-kaart.vorm-nova .nova-voet { grid-area: voet; margin-top: 0; padding-top: 0; min-height: 0; flex-direction: column; align-items: flex-end; }

/* ── De voet: twee of drie kolommen ── */
.shop-footer.vorm-nova.voet-k2 .shop-footer-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.shop-footer.vorm-nova.voet-k3 .shop-footer-in { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1023px) { .shop-footer.vorm-nova.voet-k3 .shop-footer-in { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── De voet, onder de kolommen: nieuwsbrief, keurmerk, sociale links ── */
.shop-footer.vorm-nova .shop-voet-strook {
  max-width: var(--site-breedte);
  margin: 43.2px auto 0;
  padding: 28.8px var(--nova-zij) 0;
  border-top: 1px solid var(--nova-lijn);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28.8px 43.2px;
  font-size: 13.5px;
  line-height: 20.26px;
}
.shop-footer.vorm-nova .shop-voet-strook .shop-voet-kop { margin-bottom: 7.2px; }
.shop-footer.vorm-nova .shop-nieuwsbrief { flex: 1 1 360px; max-width: 520px; }
.shop-footer.vorm-nova .shop-nieuwsbrief p { margin: 0 0 10.8px; }
.shop-footer.vorm-nova .shop-nieuwsbrief-rij { display: flex; gap: 8px; }
.shop-footer.vorm-nova .shop-nieuwsbrief-rij input[type="email"] {
  flex: 1 1 auto;
  min-width: 0;
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--nova-lijn);
  border-radius: var(--nova-r-klein);
  background: #fff;
  color: var(--nova-inkt);
  font: inherit;
}
.shop-footer.vorm-nova .shop-nieuwsbrief-rij input[type="email"]:focus { outline: 2px solid var(--nova-accent); outline-offset: 0; border-color: var(--nova-accent); }
.shop-footer.vorm-nova .shop-nieuwsbrief-rij .btn-primary { height: 42px; padding: 0 18px; flex: none; }
.shop-footer.vorm-nova .shop-honing { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.shop-footer.vorm-nova .shop-nieuwsbrief-dank { font-weight: 700; color: var(--nova-inkt); }
.shop-footer.vorm-nova .shop-nieuwsbrief-fout { color: #b3261e; margin-top: 7.2px; }
.shop-footer.vorm-nova .shop-keurmerk { display: flex; align-items: center; gap: 12px; color: var(--nova-inkt); text-decoration: none; font-weight: 600; }
.shop-footer.vorm-nova a.shop-keurmerk:hover { text-decoration: none; }
.shop-footer.vorm-nova .shop-keurmerk img { height: 48px; width: auto; display: block; }
.shop-footer.vorm-nova .shop-socials { display: flex; flex-direction: column; }
.shop-footer.vorm-nova .shop-socials-rij { display: flex; flex-wrap: wrap; gap: 8px; }
.shop-footer.vorm-nova .shop-social {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--nova-lijn);
  border-radius: 999px;
  background: #fff;
  font-size: 12.6px;
  font-weight: 600;
  text-decoration: none;
}
.shop-footer.vorm-nova .shop-social:hover { border-color: var(--nova-accent); text-decoration: none; }
.shop-footer.vorm-nova .shop-betaallogos { display: flex; flex-wrap: wrap; gap: 6px; }
.shop-footer.vorm-nova .shop-betaallogo {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  border: 1px solid var(--nova-lijn);
  border-radius: 4px;
  background: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--nova-inkt);
}
@media (max-width: 639px) {
  .shop-footer.vorm-nova .shop-voet-strook { flex-direction: column; align-items: stretch; text-align: center; }
  .shop-footer.vorm-nova .shop-keurmerk, .shop-footer.vorm-nova .shop-socials-rij { justify-content: center; }
  .shop-footer.vorm-nova .shop-betaallogos { justify-content: center; width: 100%; }
}

/* Met een chatknop rechtsonder krijgt de onderste voetregel ruimte
   eronder, zodat de knop niet over "Contact" valt als je helemaal
   naar beneden bent gescrold. */
body:has(.chat-widget) .shop-footer.vorm-nova .shop-voet-onder-in { padding-bottom: 79.2px; }

/* ── Pagina niet gevonden, in de winkel zelf ── */
.winkel.nova .shop-leeg-pagina { max-width: 640px; padding: 57.6px 16px 86.4px; }
.winkel.nova .shop-leeg-pagina h1 { font-size: 30.24px; margin: 0 0 10.8px; }
.winkel.nova .shop-niet-gevonden-zoek { display: flex; gap: 7.2px; margin: 0 0 21.6px; }
.winkel.nova .shop-niet-gevonden-zoek input { flex: 1; border: 1px solid var(--nova-lijn); border-radius: var(--nova-r-klein); padding: 10.8px 14.4px; font: inherit; }
.winkel.nova .shop-niet-gevonden-links { display: flex; flex-wrap: wrap; gap: 7.2px; justify-content: center; }
.winkel.nova .shop-niet-gevonden-links a { border: 1px solid var(--nova-lijn); border-radius: var(--nova-r-klein); padding: 7.2px 12.6px; color: var(--nova-inkt); text-decoration: none; }
.winkel.nova .shop-niet-gevonden-links a:hover { border-color: var(--nova-accent); color: var(--nova-accent); }

/* ── De boom op een pagina: terugknop en submenu ── */
.winkel.nova .site-boom { display: flex; flex-wrap: wrap; align-items: center; gap: 7.2px 14.4px; padding-top: 21.6px; }
.winkel.nova .site-boom-terug { color: var(--nova-gedempt); text-decoration: none; font-weight: 600; }
.winkel.nova .site-boom-terug:hover { color: var(--nova-accent); }
.winkel.nova .site-boom-links { display: flex; flex-wrap: wrap; gap: 7.2px; }
.winkel.nova .site-boom-link { border: 1px solid var(--nova-lijn); border-radius: var(--nova-r-klein); padding: 5.4px 12.6px; color: var(--nova-inkt); text-decoration: none; font-size: 13px; }
.winkel.nova .site-boom-link:hover { border-color: var(--nova-accent); color: var(--nova-accent); }
.winkel.nova .site-boom-link.aan { background: var(--nova-accent); border-color: var(--nova-accent); color: var(--nova-accent-op); }

/* ── Alle formulieren in de winkel op één lijn ──
   Contact, terugbel, reacties, inloggen, nieuwsbrief en afrekenen delen
   dezelfde velden: 50 hoog, dunne rand, zachte hoek, één focus. Met
   :where() blijft dit de basis; een veld met een eigen regel houdt die. */
.winkel.nova :where(.site-formulier-in, .site-terugbel-form, .site-reactie-form, .inlog-vorm, .shop-footer form, .site-nieuwsbrief) :where(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"], [type="submit"], [type="button"]), select, textarea) {
  height: 50px;
  padding: 0 14.4px;
  background: #fff;
  border: 1px solid var(--nova-lijn);
  border-radius: var(--nova-r-klein);
  font: inherit;
  font-size: 13.5px;
  color: var(--nova-inkt);
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.winkel.nova :where(.site-formulier-in, .site-reactie-form) :where(textarea) { height: auto; min-height: 120px; padding: 12.6px 14.4px; line-height: 1.6; resize: vertical; }
.winkel.nova :where(.site-formulier-in, .site-terugbel-form, .site-reactie-form, .inlog-vorm, .shop-footer form, .site-nieuwsbrief) :where(input, select, textarea):focus {
  outline: 0;
  border-color: var(--nova-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nova-accent) 14%, transparent);
}
.winkel.nova .site-formulier-in label { font-size: 12.6px; color: var(--nova-gedempt); gap: 6px; }
.winkel.nova .site-formulier-in label.site-formulier-vink { color: var(--nova-inkt); font-size: 13.5px; align-self: end; min-height: 50px; justify-content: center; }
.winkel.nova .site-formulier-in select { appearance: none; -webkit-appearance: none; padding-right: 36px; background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5l5 5 5-5' fill='none' stroke='%23333' stroke-width='1.5' stroke-linecap='round'/></svg>") no-repeat right 14.4px center; }

/* ── Afrekenen: de kale schil ──────────────────────────────────────────
   Alleen het logo, de vier stappen en het hulpnummer. Op de afrekenpagina
   is de achtergrond een tint lichter dan wit, zodat de kaarten dragen. */
.winkel.nova.afrekenen { background: #F7F7F5 !important; }
.winkel.nova .afr-kop { background: #fff; border-bottom: 1px solid var(--nova-lijn); }
.winkel.nova .afr-kop-in { max-width: 1240px; margin: 0 auto; padding: 0 var(--nova-zij); height: 68px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
.winkel.nova .afr-logo { display: inline-flex; align-items: center; text-decoration: none; color: var(--nova-inkt); font-weight: 700; font-size: 18px; }
.winkel.nova .afr-logo .logo-beeld { height: 38px; width: auto; display: block; }
.winkel.nova .afr-stappen { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; }
.winkel.nova .afr-stappen li { display: flex; align-items: center; gap: 8px; color: var(--nova-gedempt); font-size: 13px; white-space: nowrap; }
.winkel.nova .afr-stappen li a { display: flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.winkel.nova .afr-stappen li + li::before { content: ""; width: 44px; height: 1px; background: var(--nova-lijn); margin: 0 10px; }
.winkel.nova .afr-stappen li i { font-style: normal; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--nova-lijn); background: #fff; font-size: 12px; font-weight: 600; }
.winkel.nova .afr-stappen li.aan { color: var(--nova-inkt); font-weight: 700; }
.winkel.nova .afr-stappen li.aan i { background: var(--nova-accent); border-color: var(--nova-accent); color: var(--nova-accent-op); }
.winkel.nova .afr-stappen li.klaar { color: var(--nova-accent); }
.winkel.nova .afr-stappen li.klaar i { color: var(--nova-accent); border-color: var(--nova-accent); }
.winkel.nova .afr-hulp { text-align: right; display: flex; flex-direction: column; font-size: 12.6px; color: var(--nova-gedempt); line-height: 1.4; }
.winkel.nova .afr-hulp b { color: var(--nova-inkt); }
.winkel.nova .afr-voet { max-width: 1240px; margin: 0 auto; padding: 18px var(--nova-zij) 28px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--nova-gedempt); font-size: 12px; border-top: 1px solid var(--nova-lijn); }
.winkel.nova .afr-voet-links { display: flex; gap: 14px; flex-wrap: wrap; }
.winkel.nova .afr-voet-links a { color: var(--nova-gedempt); text-decoration: none; }
.winkel.nova .afr-voet-links a:hover { color: var(--nova-inkt); }
.winkel.nova.afrekenen .shop-main { max-width: 1240px; padding: 32px var(--nova-zij) 64px; }

/* ── Afrekenen: de pagina ── */
.winkel.nova .afr { display: flex; flex-direction: column; gap: 14px; }
.winkel.nova .afr-intro { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.winkel.nova .afr-intro h1 { margin: 0; font-size: 30px; letter-spacing: -.01em; }
.winkel.nova .afr-intro span { color: var(--nova-gedempt); }
.winkel.nova .afr a { color: var(--nova-accent); font-weight: 600; text-decoration: none; }
.winkel.nova .afr a:hover { text-decoration: underline; }
.winkel.nova .afr-fout { background: #fdecea; border: 1px solid #f1b8b4; color: #8a1f17; border-radius: 6px; padding: 10.8px 14.4px; font-weight: 500; }
.winkel.nova .afr-vorm { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 32px; align-items: start; }
.winkel.nova .afr-links { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.winkel.nova .afr-sectie { background: #fff; border: 1px solid var(--nova-lijn); border-radius: 9px; padding: 24px; }
.winkel.nova .afr-sectie > header { display: flex; align-items: flex-start; gap: 14px; margin: 0 0 18px; }
.winkel.nova .afr-sectie > header i { font-style: normal; flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--nova-accent); color: var(--nova-accent-op); font-weight: 700; font-size: 13px; }
.winkel.nova .afr-sectie h2 { margin: 2px 0 0; font-size: 18px; }
.winkel.nova .afr-sectie > header p { margin: 2px 0 0; color: var(--nova-gedempt); }
.winkel.nova .afr-seg { display: inline-flex; border: 1px solid var(--nova-lijn); border-radius: 6px; overflow: hidden; margin: 0 0 16px; }
.winkel.nova .afr-seg label { position: relative; }
.winkel.nova .afr-seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.winkel.nova .afr-seg span { display: block; padding: 9px 18px; font-weight: 600; color: var(--nova-gedempt); }
.winkel.nova .afr-seg input:checked + span { background: var(--nova-accent); color: var(--nova-accent-op); }
.winkel.nova .afr-seg input:focus-visible + span { box-shadow: inset 0 0 0 2px var(--nova-inkt); }
.winkel.nova .afr-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; }
.winkel.nova .afr-raster.adres { grid-template-columns: 1fr 1fr 2fr 2fr; }
.winkel.nova .afr-raster.adres .afr-veld:has(#land) { grid-column: 1 / -1; }
.winkel.nova .afr-raster .breed, .winkel.nova .afr-zakelijk { grid-column: 1 / -1; }
.winkel.nova .afr-zakelijk[hidden] { display: none; }
.winkel.nova .afr-veld { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.winkel.nova .afr-label { font-size: 12.6px; color: var(--nova-gedempt); font-weight: 500; }
.winkel.nova .afr-veld input, .winkel.nova .afr-veld select, .winkel.nova .afr-veld textarea { height: 50px; border: 1px solid var(--nova-lijn); border-radius: var(--nova-r-klein); padding: 0 14.4px; background: #fff; color: var(--nova-inkt); font: inherit; font-size: 14px; width: 100%; box-sizing: border-box; min-width: 0; }
.winkel.nova .afr-veld textarea { height: auto; min-height: 110px; padding: 12.6px 14.4px; line-height: 1.6; resize: vertical; }
.winkel.nova .afr-veld select { appearance: none; -webkit-appearance: none; padding-right: 36px; background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5l5 5 5-5' fill='none' stroke='%23333' stroke-width='1.5' stroke-linecap='round'/></svg>") no-repeat right 14.4px center; }
.winkel.nova .afr-veld input:focus, .winkel.nova .afr-veld select:focus, .winkel.nova .afr-veld textarea:focus { outline: 0; border-color: var(--nova-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--nova-accent) 14%, transparent); }
.winkel.nova .afr-veld input:user-invalid { border-color: #b3261e; box-shadow: 0 0 0 3px rgba(179, 38, 30, .10); }
.winkel.nova .afr-hint { color: var(--nova-gedempt); font-size: 12px; line-height: 1.4; }
.winkel.nova .afr-tussenkop { margin: 20px 0 10px; font-size: 14px; }
.winkel.nova .afr-tussenkop small { color: var(--nova-gedempt); font-weight: 400; margin-left: 6px; }
.winkel.nova .afr-keuzes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.winkel.nova .afr-keuze { position: relative; display: grid; grid-template-columns: 18px 1fr auto; gap: 12px; align-items: start; border: 1px solid var(--nova-lijn); border-radius: 8px; padding: 14px; background: #fff; cursor: pointer; }
.winkel.nova .afr-keuze input, .winkel.nova .afr-pm input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.winkel.nova .afr-keuze:has(input:checked), .winkel.nova .afr-pm:has(input:checked) { border-color: var(--nova-accent); box-shadow: inset 0 0 0 1px var(--nova-accent); background: #fbfcfa; }
.winkel.nova .afr-keuze:has(input:focus-visible), .winkel.nova .afr-pm:has(input:focus-visible) { box-shadow: inset 0 0 0 1px var(--nova-accent), 0 0 0 3px color-mix(in srgb, var(--nova-accent) 20%, transparent); }
.winkel.nova .afr-radio { display: inline-block; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #c9cbc6; background: #fff; margin-top: 2px; position: relative; flex: none; }
.winkel.nova :is(.afr-keuze, .afr-pm):has(input:checked) .afr-radio { border-color: var(--nova-accent); }
.winkel.nova :is(.afr-keuze, .afr-pm):has(input:checked) .afr-radio::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--nova-accent); }
.winkel.nova .afr-keuze-in { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.winkel.nova .afr-keuze b { font-size: 14px; }
.winkel.nova .afr-keuze small { color: var(--nova-gedempt); font-size: 12px; line-height: 1.45; }
.winkel.nova .afr-keuze em { font-style: normal; font-weight: 700; white-space: nowrap; }
.winkel.nova .afr-betaal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; }
.winkel.nova .afr-pm { position: relative; display: grid; grid-template-columns: 18px 60px 1fr; gap: 0 10px; align-items: center; border: 1px solid var(--nova-lijn); border-radius: 8px; padding: 12px 14px; background: #fff; cursor: pointer; min-width: 0; }
.winkel.nova .afr-pm.uit { opacity: .65; border-style: dashed; cursor: default; }
.winkel.nova .afr-pm-logo { display: flex; align-items: center; justify-content: center; gap: 4px; width: 60px; height: 28px; }
.winkel.nova .afr-pm-logo img { max-height: 24px; max-width: 60px; width: auto; height: auto; }
.winkel.nova .afr-pm-logo img + img { max-height: 20px; }
.winkel.nova .afr-pm-rek { border: 1px solid var(--nova-lijn); border-radius: 4px; background: var(--nova-vlak); font-weight: 800; font-size: 12px; color: var(--nova-inkt); font-family: Inter, system-ui, sans-serif; }
.winkel.nova .afr-pm-in { display: flex; flex-direction: column; min-width: 0; }
.winkel.nova .afr-pm b { font-size: 13.5px; }
.winkel.nova .afr-pm small { color: var(--nova-gedempt); font-size: 11.5px; line-height: 1.35; }
.winkel.nova .afr-opmerking { margin-top: 6px; }
.winkel.nova .afr-opmerking summary { list-style: none; color: var(--nova-accent); font-weight: 600; cursor: pointer; }
.winkel.nova .afr-opmerking summary::-webkit-details-marker { display: none; }
.winkel.nova .afr-opmerking .afr-veld { margin-top: 12px; }
.winkel.nova .afr-onder { color: var(--nova-gedempt); font-size: 12.6px; margin: 0; }
.winkel.nova .afr-bestelling { background: #fff; border: 1px solid var(--nova-lijn); border-radius: 9px; padding: 22px; position: sticky; top: 24px; display: flex; flex-direction: column; gap: 14px; }
.winkel.nova .afr-bestelling h3 { margin: 0; font-size: 18px; display: flex; align-items: baseline; gap: 8px; }
.winkel.nova .afr-bestelling h3 span { color: var(--nova-gedempt); font-weight: 400; font-size: 13px; }
.winkel.nova .afr-bestelling h3 a { margin-left: auto; font-size: 12.6px; }
.winkel.nova .afr-regels { display: flex; flex-direction: column; gap: 12px; max-height: 340px; overflow: auto; }
.winkel.nova .afr-regel { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; }
.winkel.nova .afr-regel img, .winkel.nova .afr-geenfoto { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; border: 1px solid var(--nova-lijn); background: var(--nova-vlak); display: block; }
.winkel.nova .afr-regel b { display: block; font-size: 12.6px; line-height: 1.35; }
.winkel.nova .afr-regel small { color: var(--nova-gedempt); font-size: 11.5px; }
.winkel.nova .afr-aantal { color: var(--nova-gedempt); font-size: 12.6px; white-space: nowrap; }
.winkel.nova .afr-prijs { font-weight: 700; font-size: 13.5px; min-width: 60px; text-align: right; }
.winkel.nova .afr-totalen { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; margin: 0; border-top: 1px solid var(--nova-lijn); padding-top: 14px; font-size: 13px; }
.winkel.nova .afr-totalen dt { color: var(--nova-gedempt); }
.winkel.nova .afr-totalen dd { margin: 0; text-align: right; }
.winkel.nova .afr-totalen .tot { color: var(--nova-inkt); font-weight: 700; font-size: 18px; border-top: 1px solid var(--nova-lijn); padding-top: 10px; margin-top: 2px; }
.winkel.nova .afr-totalen .tot small { font-size: 11.5px; color: var(--nova-gedempt); font-weight: 400; }
.winkel.nova .afr-knop { display: flex; justify-content: center; align-items: center; gap: 10px; width: 100%; padding: 15px 18px; font-weight: 700; font-size: 15px; border-radius: var(--nova-r-klein); }
.winkel.nova .afr-knop span { opacity: .85; font-weight: 600; }
.winkel.nova .afr-knop.klein { width: auto; padding: 12px 18px; }
.winkel.nova .afr-knop-licht { display: inline-flex; align-items: center; border: 1px solid var(--nova-lijn); border-radius: var(--nova-r-klein); padding: 12px 18px; font-weight: 600; color: var(--nova-inkt) !important; text-decoration: none !important; }
.winkel.nova .afr-veilig { margin: -4px 0 0; display: flex; justify-content: center; align-items: center; gap: 6px; color: var(--nova-gedempt); font-size: 12px; text-align: center; }
.winkel.nova .afr-trust { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--nova-lijn); display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--nova-inkt); }
.winkel.nova .afr-trust li::before { content: "✓"; color: var(--nova-groen); font-weight: 700; margin-right: 7px; }
.winkel.nova .afr-logos { display: flex; flex-wrap: wrap; gap: 6px; }
.winkel.nova .afr-logos img { height: 22px; width: auto; padding: 3px 7px; border: 1px solid var(--nova-lijn); border-radius: 4px; box-sizing: content-box; background: #fff; }
/* bedankt */
.winkel.nova .afr-klaar { max-width: 760px; margin: 0 auto; }
.winkel.nova .afr-bedankt { padding: 40px; display: flex; flex-direction: column; gap: 16px; }
.winkel.nova .afr-vinkgroot { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #eef6f0; color: var(--nova-groen); font-size: 26px; font-weight: 700; }
.winkel.nova .afr-vinkgroot.wacht { background: #fdefd9; color: #9a5a05; }
.winkel.nova .afr-bedankt h1 { margin: 0; font-size: 30px; letter-spacing: -.01em; }
.winkel.nova .afr-bedankt p { margin: 0; max-width: 62ch; font-size: 14px; }
.winkel.nova .afr-volgende { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 8px; }
.winkel.nova .afr-volgende > div { border: 1px solid var(--nova-lijn); border-radius: 8px; padding: 14px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.winkel.nova .afr-volgende small { color: var(--nova-gedempt); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; }
.winkel.nova .afr-volgende b { font-size: 14px; }
.winkel.nova .afr-volgende span { color: var(--nova-gedempt); font-size: 12.6px; }
.winkel.nova .afr-knoppen { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
/* smaller schermen */
@media (max-width: 1099px) { .winkel.nova .afr-vorm { grid-template-columns: 1fr; } .winkel.nova .afr-bestelling { position: static; } .winkel.nova .afr-kop-in { grid-template-columns: auto 1fr; } .winkel.nova .afr-hulp { display: none; } }
@media (max-width: 767px) {
  .winkel.nova .afr-kop-in { height: 56px; grid-template-columns: 1fr; }
  .winkel.nova .afr-stappen { display: none; }
  .winkel.nova .afr-raster, .winkel.nova .afr-raster.adres, .winkel.nova .afr-keuzes, .winkel.nova .afr-betaal, .winkel.nova .afr-volgende { grid-template-columns: 1fr; }
  .winkel.nova .afr-raster.adres .afr-veld:has(.afr-kort) { grid-column: auto; }
  .winkel.nova .afr-sectie { padding: 16px; }
  .winkel.nova .afr-bedankt { padding: 24px 16px; }
  .winkel.nova.afrekenen .shop-main { padding-bottom: 96px; }
  .winkel.nova .afr-bestelling { order: -1; }
}