[data-pk-overview] .series-opening-photo img{width:100%;height:100%;object-fit:contain}
[data-pk-overview] .series-project-photo img{object-fit:contain!important}
[data-pk-overview] .r9-series-card[hidden]{display:none!important}
.parket-colour-browser .series-colour-picture{min-height:154px;aspect-ratio:auto;padding:16px}
.parket-colour-browser .series-colour-picture img{width:100%;max-width:154px;height:auto;max-height:154px;object-fit:contain}

main[data-pk-series] .detail-variant-group[aria-label="Uitvoering"] .detail-variant-tile,
main[data-pk-series] .detail-variant-group[aria-label="Afwerking"] .detail-variant-tile{flex:0 1 auto;max-width:100%;min-height:44px;padding:10px 12px}


/* R2: preserve original mobile rendering below 768px. */
[data-vc-desktop-kicker] { display: none !important; }
@media (min-width: 768px) {
/* Shared glass banner, top-left. Kept at the tested XXL specificity to override legacy variants. */
html body #inhoud :is(#xxl-hero, .unified-banner[data-vc-glass]).unified-banner[data-vc-glass] {
  --glass-height: 440px;
  --glass-inset: 32px;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  min-height: var(--glass-height) !important;
  height: auto !important;
  max-height: none !important;
  padding: var(--glass-inset) 0 !important;
  background: transparent !important;
  overflow: visible !important;
}
html body #inhoud :is(#xxl-hero, .unified-banner[data-vc-glass]).unified-banner[data-vc-glass] > .unified-banner-media {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}
html body #inhoud :is(#xxl-hero, .unified-banner[data-vc-glass]).unified-banner[data-vc-glass] > .unified-banner-media img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: var(--banner-pos-desktop, 50% 50%) !important;
}
html body #inhoud :is(#xxl-hero, .unified-banner[data-vc-glass]).unified-banner[data-vc-glass] > .unified-banner-copy {
  position: relative !important;
  inset: auto !important;
  z-index: 2;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 10px !important;
  width: min(520px, var(--site-content-width)) !important;
  max-width: none !important;
  margin: 0 var(--site-content-left) !important;
  padding: 24px 30px 22px !important;
  color: #fff !important;
  background: rgba(16, 77, 118, .82) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid rgba(255, 255, 255, .28) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
html body #inhoud :is(#xxl-hero, .unified-banner[data-vc-glass]).unified-banner[data-vc-glass] .unified-banner-kicker {
  margin: 0 !important;
  font-size: 14px !important;
}
html body #inhoud :is(#xxl-hero, .unified-banner[data-vc-glass]).unified-banner[data-vc-glass] h1 {
  margin: 0 !important;
  font-size: 38px !important;
  line-height: 1.05 !important;
}
html body #inhoud :is(#xxl-hero, .unified-banner[data-vc-glass]).unified-banner[data-vc-glass] h1::after {
  content: none !important;
  display: none !important;
}
html body #inhoud :is(#xxl-hero, .unified-banner[data-vc-glass]).unified-banner[data-vc-glass] .unified-banner-lead {
  max-width: none !important;
  margin: 0 !important;
  color: #fff !important;
  font: 16px / 1.5 VanCalster, Arial, sans-serif !important;
}
html body #inhoud :is(#xxl-hero, .unified-banner[data-vc-glass]).unified-banner[data-vc-glass] .unified-banner-actions {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px 20px !important;
  margin: 4px 0 0 !important;
}
html body #inhoud :is(#xxl-hero, .unified-banner[data-vc-glass]).unified-banner[data-vc-glass] .unified-banner-actions a {
  min-height: 44px !important;
  width: auto !important;
}
html body #inhoud :is(#xxl-hero, .unified-banner[data-vc-glass]).unified-banner[data-vc-glass] .unified-banner-actions a:focus-visible {
  outline: 3px solid white !important;
  outline-offset: 3px !important;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html body #inhoud :is(#xxl-hero, .unified-banner[data-vc-glass]).unified-banner[data-vc-glass] > .unified-banner-copy {
    background: rgba(16, 77, 118, .92) !important;
  }
}
@media (max-width: 1023px) {
  html body #inhoud :is(#xxl-hero, .unified-banner[data-vc-glass]).unified-banner[data-vc-glass] {
    --glass-height: 400px;
    --glass-inset: 24px;
  }
}


html body #inhoud :is(#xxl-hero, .unified-banner[data-vc-glass]).unified-banner[data-vc-glass] { isolation: isolate; box-sizing: border-box; }
html body #inhoud :is(#xxl-hero, .unified-banner[data-vc-glass]).unified-banner[data-vc-glass] > .unified-banner-media { z-index: 0 !important; max-width: none !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; object-fit: cover !important; object-position: var(--banner-pos-desktop, 50% 50%) !important; }
html body #inhoud :is(#xxl-hero, .unified-banner[data-vc-glass]).unified-banner[data-vc-glass]::after,
html body #inhoud :is(#xxl-hero, .unified-banner[data-vc-glass]).unified-banner[data-vc-glass]::before,
html body #inhoud :is(#xxl-hero, .unified-banner[data-vc-glass]).unified-banner[data-vc-glass] > .unified-banner-copy::after,
html body #inhoud :is(#xxl-hero, .unified-banner[data-vc-glass]).unified-banner[data-vc-glass] > .unified-banner-copy::before { content: none !important; display: none !important; }
html body #inhoud :is(#xxl-hero, .unified-banner[data-vc-glass]).unified-banner[data-vc-glass] > .unified-banner-copy { box-sizing: border-box; align-self: flex-start !important; text-align: left !important; }
html body #inhoud :is(#xxl-hero, .unified-banner[data-vc-glass]).unified-banner[data-vc-glass] .unified-banner-kicker { position: static !important; inset: auto !important; padding: 0 !important; width: auto !important; color: #ffda32 !important; }
html body #inhoud :is(#xxl-hero, .unified-banner[data-vc-glass]).unified-banner[data-vc-glass] h1 { color: #fff !important; overflow-wrap: anywhere; }
html body #inhoud :is(#xxl-hero, .unified-banner[data-vc-glass]).unified-banner[data-vc-glass] .unified-banner-actions a { max-width: 100% !important; white-space: normal !important; }
html body #inhoud :is(#xxl-hero, .unified-banner[data-vc-glass]).unified-banner[data-vc-glass] .unified-banner-visit { color: #fff !important; border-color: rgba(255,255,255,.5) !important; }
html body #inhoud :is(#xxl-hero, .unified-banner[data-vc-glass]).unified-banner[data-vc-glass] .unified-banner-visit img { filter: brightness(0) invert(1) !important; }
@media (min-width:768px) {
  html body #inhoud :is(#xxl-hero, .unified-banner[data-vc-glass]).unified-banner[data-vc-glass].unified-banner--long-title h1 { font-size: 34px !important; }
  html body[data-page="vloeren-xxl-tegels"] #inhoud :is(#xxl-hero, .unified-banner[data-vc-glass]).unified-banner[data-vc-glass] > .unified-banner-media img { object-position: 50% 55% !important; }
}


/* The legacy before/after wrapper pins the banner height with two IDs. */
html body #inhoud #vc-voor-na-2026 .unified-banner[data-vc-glass][data-unified-banner][data-edge-banner]:not(.unified-banner--showroom) {
  height: auto !important; min-height: var(--glass-height) !important; max-height: none !important;
}


.unified-banner[data-vc-glass] > .unified-banner-kicker { display: none !important; }
.unified-banner[data-vc-glass] .unified-banner-copy > [data-vc-desktop-kicker] { display: block !important; }

}