/** Shopify CDN: Minification failed

Line 1944:79 Expected identifier but found whitespace
Line 1945:5 Expected identifier but found "%"
Line 1946:4 Unexpected "<"
Line 1950:4 Unexpected "<"
Line 1951:3 Expected identifier but found "%"
Line 1952:2 Unexpected "<"
Line 1952:27 Expected identifier but found "%"
Line 1952:64 Unexpected "="
Line 1952:72 Expected identifier but found "%"
Line 1952:83 Unexpected "{"
... and 52 more hidden warnings

**/
/* Generated by scripts/bundle-head-css.mjs — niet handmatig editen. Bron: pdp-blocks.css, component-pdp-ux.css, component-afwerking.css, component-volume-pricing.css */

/* === pdp-blocks.css === */
/* PDP-blokken (SHO-9768): {% stylesheet %} van free-gifts, buybox-summary,
   pdp-unit-price en wallpaper-plan. Die blokken staan alleen in templates/product.json;
   hun CSS hoort niet in de theme-brede compiled styles.css die elke pagina blokkeert.
   Geladen in snippets/stylesheets.liquid, alleen op het product-template. */

/* --- uit blocks/free-gifts.liquid --- */
  .fg {
    /* Zelfde oranje als de actiebanner en het productlabel: de klant moet de lijmactie
       op alle drie de plekken als één ding herkennen. */
    --fg-actie: #ff8833;
    --fg-actie-tekst: #e8740d;
    --fg-actie-vlak: #fff8f0;

    display: block;
  }

  .fg[hidden] {
    display: none;
  }

  .fg__panel {
    display: block;
  }

  /* ---------- Ingeklapte kop (zelfde maatvoering als .vap__summary) ---------- */
  .fg__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    box-sizing: border-box;
    /* Vaste hoogte, gelijk aan .vap__summary en .wpp__row: de drie regels staan onder
       elkaar en een paar pixels verschil in tekstmetriek valt daar meteen op. */
    min-height: 66px;
    padding: 13px 14px;
    border: 1px solid var(--hds-choice-border, #e6e6e6);
    border-radius: 14px;
    background: var(--hds-choice-bg, #fff);
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: border-color 0.15s ease, background-color 0.15s ease;
  }

  .fg__summary::-webkit-details-marker {
    display: none;
  }

  .fg__summary:hover,
  .fg__panel[open] .fg__summary {
    border-color: var(--hds-choice-hover-border, #d9d9d9);
  }

  .fg__thumbs {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
  }

  .fg__thumbs:empty {
    display: none;
  }

  .fg__thumbs img {
    display: block;
    width: 34px;
    height: 34px;
    border-radius: 7px;
    border: 2px solid var(--hds-choice-bg, #fff);
    background: var(--hds-choice-bg, #fff);
    object-fit: cover;
  }

  .fg__thumb-actie {
    display: grid;
    box-sizing: border-box;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1.5px solid var(--fg-actie);
    border-radius: 7px;
    background: var(--fg-actie-vlak);
    color: var(--fg-actie-tekst);
  }

  /* Gold voor foto's én tegels: de kop kan er allebei tonen. */
  .fg__thumbs > * + * {
    margin-inline-start: -12px;
  }

  .fg__text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
  }

  .fg__sub {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
  }

  .fg__sub-label {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--hds-choice-text, #333);
  }

  /* Eén badge voor het hele blok, mét aantal. Per regel een campagnenaam tonen levert
     twee labels onder elkaar op en dat leest als twee losse acties. */
  .fg__badge {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    line-height: 1;
    padding: 4px 7px;
    border-radius: 999px;
    color: var(--hds-gift-accent-text, #1b5e34);
    background: var(--hds-gift-accent-bg, #e8f4ec);
  }

  .fg__badge[hidden] {
    display: none;
  }

  .fg__names {
    font-size: 12px;
    line-height: 1.3;
    color: var(--hds-choice-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .fg__names:empty {
    display: none;
  }

  .fg__meta {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex: 0 0 auto;
  }

  .fg__count {
    font-size: 13px;
    font-weight: 600;
    color: var(--hds-choice-sel-accent, #333);
    white-space: nowrap;
  }

  .fg__count[hidden] {
    display: none;
  }

  .fg__chevron {
    color: rgb(51 51 51 / 0.55);
    transition: transform 0.18s ease;
    flex: 0 0 auto;
  }

  .fg__panel[open] .fg__chevron {
    transform: rotate(180deg);
  }

  /* Uitklapdeel aan de kop vast — zie .vap__body in het toebehoren-blok. */
  .fg__panel[open] .fg__summary {
    border-end-start-radius: 0;
    border-end-end-radius: 0;
  }

  .fg__panel[open] .fg__body {
    border: 1px solid var(--hds-choice-border, #e6e6e6);
    border-block-start: 0;
    border-end-start-radius: 14px;
    border-end-end-radius: 14px;
    background: var(--hds-choice-bg, #fff);
    overflow: hidden;
  }

  .fg__intro,
  .fg__note {
    margin: 0;
    padding: 12px 14px;
    font-size: 12px;
    line-height: 1.35;
    color: var(--hds-choice-muted);
  }

  .fg__intro {
    padding-block-end: 0;
  }

  /* Haarlijn tussen de tekstregels en de lijst, gelijk aan die tussen de rijen. */
  .fg__intro + .fg__list {
    margin-block-start: 12px;
    border-block-start: 1px solid var(--hds-choice-border, #e6e6e6);
  }

  .fg__list + .fg__note {
    border-block-start: 1px solid var(--hds-choice-border, #e6e6e6);
  }

  /* Zelfde lijstvorm als het toebehoren-blok: haarlijntjes tussen de rijen, geen kaart
     per cadeau. De twee blokken staan onder elkaar en zijn hetzelfde soort ding — dan
     moeten ze er ook hetzelfde uitzien. Het kader zit op .fg__body. */
  .fg__list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .fg__note {
    margin: 8px 0 0;
  }

  /* ---------- Rij ---------- */
  .fg-item {
    position: relative;
    display: grid;
    grid-template-columns: 28px 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    cursor: pointer;
    transition: box-shadow 0.15s ease, background-color 0.15s ease;
  }

  /* Ingesprongen scheidingslijn — zie .vap-item in het toebehoren-blok. */
  .fg-item + .fg-item::before {
    content: '';
    position: absolute;
    inset-block-start: 0;
    inset-inline: 14px;
    border-block-start: 1px solid var(--hds-choice-border, #e6e6e6);
  }

  .fg-item:hover {
    background: rgb(0 0 0 / 0.02);
  }

  .fg-item--selected {
    box-shadow: inset 3px 0 0 0 var(--hds-choice-sel-accent, #333);
    background: var(--hds-choice-sel-bg, #f5f5f5);
  }

  .fg-item--unavailable {
    opacity: 0.55;
    cursor: default;
    pointer-events: none;
  }

  /* ---------- Vinkje (identiek aan toebehoren-blok) ---------- */
  .fg-item__check {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    cursor: pointer;
    margin: 0;
  }

  .fg-item__check-box {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    border: 1px solid var(--hds-choice-border, #e6e6e6);
    border-radius: 5px;
    background: var(--hds-choice-bg, #fff);
    transition: background-color 0.15s ease, border-color 0.15s ease;
  }

  .fg-item__check-box .icon-checkmark {
    width: 20px;
    height: 20px;
    display: block;
  }

  .fg-item__check-box .icon-checkmark path,
  .fg-item__check-box .icon-checkmark use {
    stroke: #fff;
    opacity: 0;
    transition: opacity 0.15s ease;
  }

  .fg-item__check:has(input:checked) .fg-item__check-box {
    background: var(--hds-choice-sel-accent, #333);
    border-color: var(--hds-choice-sel-accent, #333);
  }

  .fg-item__check:has(input:checked) .fg-item__check-box .icon-checkmark path,
  .fg-item__check:has(input:checked) .fg-item__check-box .icon-checkmark use {
    opacity: 1;
  }

  .fg-item__check [data-fg-check]:focus,
  .fg-item__check [data-fg-check]:focus-visible {
    outline: none;
  }

  /* ---------- Thumb ---------- */
  .fg-item__thumb {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    overflow: hidden;
    background: rgb(0 0 0 / 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
  }

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

  /* De actieregel staat niet voor één artikel: de engine kiest de emmers pas als de
     hele mand bekend is, dus elke packshot zou een formaat tonen dat de klant misschien
     niet krijgt. Het cadeau-teken in het oranje van de actie zegt wat het is zonder dat
     te suggereren. Elke andere regel houdt zijn eigen foto. */
  .fg-item__thumb--actie {
    box-sizing: border-box;
    border: 1.5px solid var(--fg-actie);
    background: var(--fg-actie-vlak);
    color: var(--fg-actie-tekst);
  }

  /* ---------- Tekst ---------- */
  .fg-item__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  .fg-item__name {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.25;
    color: var(--hds-choice-text, #333);
  }

  .fg-item__note {
    font-size: 12px;
    line-height: 1.3;
    color: var(--hds-choice-muted);
  }

  .fg-item__note[hidden] {
    display: none;
  }

  /* ---------- Prijs ---------- */
  .fg-item__price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    white-space: nowrap;
  }

  .fg-item__was {
    font-size: 12px;
    color: var(--hds-choice-muted);
  }

  .fg-item__was[hidden] {
    display: none;
  }

  .fg-item__now {
    font-size: 13px;
    font-weight: 600;
    color: var(--hds-choice-text, #222);
  }

  .fg-item__now[hidden],
  .fg-item__free[hidden] {
    display: none;
  }

  .fg-item__free {
    font-size: 13px;
    font-weight: 600;
    color: var(--hds-gift-accent-text, #1b5e34);
  }

  @media screen and (max-width: 480px) {
    .fg-item {
      grid-template-columns: 24px 40px minmax(0, 1fr) auto;
      gap: 10px;
      padding: 10px 12px;
    }
  }

/* --- uit blocks/buybox-summary.liquid --- */
  .bbv-summary {
    --bbv-sum-gap: 0.25rem;
    --bbv-sum-pad: 0.75rem;
    --bbv-sum-font: 0.9375rem;
    --bbv-sum-label: 1rem;
    --bbv-sum-sum: 1.375rem;

    display: flex;
    flex-direction: column;
    gap: var(--bbv-sum-gap);
    font-size: var(--bbv-sum-font);
  }

  .bbv-summary:not(.bbv-summary--omit) {
    min-height: calc(var(--bbv-sum-sum) * 1.2);
  }

  .bbv-summary--pending {
    visibility: hidden;
  }

  .bbv-summary--omit {
    display: none;
  }

  .bbv-summary__row,
  .bbv-summary__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
  }

  .bbv-summary__row-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .bbv-summary__row > :last-child {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .bbv-summary__total {
    border-block-start: 1px solid rgb(var(--color-foreground-rgb) / 0.12);
    padding-block-start: var(--bbv-sum-pad);
    margin-block-start: var(--bbv-sum-gap);
  }

  .bbv-summary:not(.bbv-summary--split) .bbv-summary__lines {
    display: none;
  }

  .bbv-summary:not(.bbv-summary--split) .bbv-summary__total {
    border-block-start: none;
    padding-block-start: 0;
    margin-block-start: 0;
  }

  .bbv-summary__total-label {
    font-size: var(--bbv-sum-label);
    font-weight: 700;
  }

  .bbv-summary__total-sum {
    font-size: var(--bbv-sum-sum);
    font-weight: 700;
  }

  .bbv-summary__free {
    color: #1b5e34;
    font-weight: 700;
  }

/* --- uit blocks/pdp-unit-price.liquid --- */
  .pdp-unit {
    --pdp-unit-sale: #ff8833;
    --pdp-unit-sale-bg: #fff0e6;

    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    width: 100%;
  }

  .pdp-unit__value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-foreground);
  }

  .pdp-unit__was {
    font-size: 0.875rem;
    font-weight: 400;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text, 0.6));
    text-decoration-thickness: 1px;
  }

  .pdp-unit__badge {
    align-self: center;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--pdp-unit-sale);
    background-color: var(--pdp-unit-sale-bg);
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
  }

  .pdp-unit__note {
    font-size: 0.875rem;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text, 0.6));
  }

  /* De prijs onder de titel toont al bedrag + korting. Het native prijsblok
     tussen varianten en aantal is dezelfde informatie nog een keer. */
  .product-details:has(.pdp-unit) product-price:not(.bbv-qty-price) {
    display: none;
  }

/* --- uit blocks/wallpaper-plan.liquid --- */
  /* Host bestaat alleen als Liquid de calculator-capability zag. Dan meteen in de
     flow — niet wachten op de app-knop (die hydratie is CLS). */
  wallpaper-plan.wpp {
    display: block;
  }

  /* De kale knop van de app zou een tweede, kalere ingang naast deze regel zijn.
     Zelfde #id.class als de app-CSS, anders wint hun `display: inline-flex`. */
  .group-block-content:has(wallpaper-plan.wpp) #wallpaper-calculator-button.wallpaper-calculator__trigger {
    display: none;
  }

  /* Zelfde maatvoering als .vap__summary en .fg__summary — de drie regels vormen één rij. */
  .wpp__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    box-sizing: border-box;
    /* Vaste hoogte, gelijk aan .fg__summary en .vap__summary — zie daar. */
    min-height: 66px;
    margin: 0;
    padding: 13px 14px;
    border: 1px solid var(--hds-choice-border, #e6e6e6);
    border-radius: 14px;
    background: var(--hds-choice-bg, #fff);
    font: inherit;
    text-align: start;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
  }

  .wpp__row:hover {
    border-color: var(--hds-choice-hover-border, #d9d9d9);
  }

  .wpp__thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 7px;
    background: rgb(0 0 0 / 0.04);
    color: var(--hds-choice-text, #333);
  }

  .wpp__text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
  }

  .wpp__title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--hds-choice-text, #333);
  }

  .wpp__sub {
    font-size: 12px;
    line-height: 1.3;
    color: var(--hds-choice-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .wpp__meta {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
  }

  /* `hidden` moet het winnen van de display-regel hierboven; die is even specifiek. */
  .wpp__row[hidden] {
    display: none;
  }

  /* Bevestiging: zelfde regel, zelfde hoogte — alleen de kleur zegt dat het gelukt is.
     Een aparte, groter opgemaakte melding zou de rij eronder wegduwen. */
  .wpp__row--done {
    border-color: var(--hds-wpp-done-border, #cfe3d3);
    background: var(--hds-wpp-done-bg, #f4f9f5);
  }

  .wpp__row--done:hover {
    border-color: var(--hds-wpp-done-border-hover, #b6d6bf);
  }

  .wpp__thumb--done {
    background: var(--hds-wpp-done-icon-bg, #dcedde);
    color: var(--hds-wpp-done-icon, #1b7f43);
  }

  /* Geen pijl maar een woord: "opnieuw rekenen" is een andere belofte dan "hier begint
     het", en die moet je kunnen lezen. */
  .wpp__redo {
    font-size: 12px;
    line-height: 1.3;
    color: var(--hds-wpp-done-icon, #1b7f43);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  /* Pijl naar rechts in plaats van een chevron: deze regel klapt niet open maar
     opent de calculator. */
  .wpp__arrow {
    flex: 0 0 auto;
    color: rgb(51 51 51 / 0.55);
    transition: transform 0.15s ease;
  }

  .wpp__row:hover .wpp__arrow {
    transform: translateX(2px);
  }

  @media (prefers-reduced-motion: reduce) {
    .wpp__arrow {
      transition: none;
    }
  }

/* === component-pdp-ux.css === */
/* SHO-10264: component CSS, loaded once from the host snippet/section. */
/* ============================================================
   B+ PoC — Afwerking als kaarten (iteratie 1, TIJDELIJK)
   Data komt nu uit snippet 'afwerking-poc-fields' (placeholder);
   later vervangen door echte metaobject-velden.
   ============================================================ */
.variant-option--afwerking-cards {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  gap: 10px !important;
  width: 100%;
}
.variant-picker .variant-option--afwerking-cards .variant-option__button-label {
  position: relative;
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  flex: 0 0 auto !important;
  grid-column: auto !important;
  gap: 8px;
  width: 100% !important;
  max-width: 100%;
  min-width: 0;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  text-align: left;
  padding: 16px 18px;
  border: 1px solid var(--hds-choice-border);
  border-radius: 14px;
  background: var(--hds-choice-bg);
  cursor: pointer;
  text-align: left;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.variant-option--afwerking-cards .variant-option__button-label:hover {
  border-color: var(--hds-choice-hover-border);
}
.variant-option--afwerking-cards .variant-option__button-label:has(input:checked) {
  border-color: var(--hds-choice-sel-accent);
  box-shadow: inset 0 0 0 1px var(--hds-choice-sel-accent);
  background: var(--hds-choice-sel-bg);
}
/* Radio weg: selectie via rand + vinkje (col 1). Niet-geselecteerd = leeg. */
.variant-option--afwerking-cards .variant-option__button-label input[type="radio"] {
  display: none !important;
}
.variant-picker .variant-option--afwerking-cards .variant-option__button-label::before {
  content: none !important;
  display: none !important;
  position: absolute !important;
  left: 18px !important;
  top: 19px !important;
  right: auto !important;
  bottom: auto !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box !important;
  width: 20px !important;
  height: 20px !important;
  border: none !important;
  border-radius: 50%;
  background: transparent;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
/* Alleen de geselecteerde kaart toont een indicator (vinkje); niet-geselecteerd = leeg, geen radio */
.variant-option--afwerking-cards .variant-option__button-label:has(input:checked)::before {
  content: "✓";
  background: var(--hds-choice-sel-accent);
  border-color: var(--hds-choice-sel-accent) !important;
  color: #fff;
}
.variant-option--afwerking-cards .variant-option__button-label__pill { display: none; }
.variant-option--afwerking-cards .variant-option__button-label__text {
  grid-column: 2;
  grid-row: 1;
  justify-self: start;
  text-align: left;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.25;        /* strakker → tagline iets dichter onder de titel */
  color: var(--hds-choice-text);
}
.afwerking-card__tagline {
  display: none; /* tagline verborgen — attribuut-regel staat direct onder de titel */
  margin-top: -6px;
  font-size: 12px;
  color: #333333B3;
}
.afwerking-card__badge {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: end;
  padding: 4px 11px;
  border-radius: 999px;
  background: #ededed;
  color: #555555;
  font-size: 12px;
  white-space: nowrap;
}
.afwerking-card__panel {
  grid-column: 1 / -1;
  min-width: 0;
  display: none;
  white-space: normal;
}
.afwerking-card__panel > * { max-width: 100%; }
/* thema zet white-space:nowrap op het label → forceer normaal binnen de kaart-tekst */
.variant-option--afwerking-cards .afwerking-card__tagline,
.variant-option--afwerking-cards .afwerking-card__panel,
.variant-option--afwerking-cards .afwerking-card__tags,
.variant-option--afwerking-cards .afwerking-card__desc,
.variant-option--afwerking-cards .afwerking-card__suitable {
  white-space: normal !important;
}
.variant-option--afwerking-cards .variant-option__button-label:has(input:checked) .afwerking-card__panel {
  display: block;
}
/* Attribuut-regel — altijd zichtbaar onder de titel; platte tekst met • als scheiding (geen pills) */
.afwerking-card__tags {
  display: block;
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: #555555;
}
.afwerking-card__tag {
  display: inline;
  padding: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  white-space: nowrap;
}
.afwerking-card__tag + .afwerking-card__tag::before {
  content: "•";
  margin: 0 7px;
  color: #c9c9c9;
}
.afwerking-card__desc {
  display: block; /* toont alleen in het paneel → zichtbaar zodra de kaart is uitgeklapt/geselecteerd */
  margin-bottom: 0;
  font-size: 13px;
  line-height: 1.55;
  color: #4a443b;
}
.afwerking-card__suitable {
  display: block;
  font-size: 13px;
  color: #333333B3;
}
.afwerking-card__suitable strong { color: #333333; font-weight: 600; }
/* Geselecteerde kaart toont de uitstraling al als eerste tag in het paneel → rechter badge weg */
.variant-option--afwerking-cards .variant-option__button-label:has(input:checked) .afwerking-card__badge {
  display: none;
}
/* prijs-strikethrough niet tonen binnen afwerking-kaart (prijs hangt aan inhoud) */
.variant-option--afwerking-cards .variant-option__button-label [class*="strikethrough"] {
  display: none;
}
/* Ruimte-filter: respecteer de hidden/filtered-states van variant-picker.js.
   Onze display:grid !important op het label moet wijken voor het filter — daarom
   een hogere-specificiteit-regel die de gefilterde kaarten écht verbergt. */
.variant-picker .variant-option--afwerking-cards .variant-option__button-label.variant-option--hidden-by-liquid,
.variant-picker .variant-option--afwerking-cards .variant-option__button-label.variant-option--filtered-out,
.variant-picker .variant-option--afwerking-cards .variant-option__button-label.afw-ruimte-hidden {
  display: none !important;
}

/* ---- Lange afwerking-lijst inklappen (eerste 3 + "Bekijk alle …") ---- */
/* Overflow-kaarten verborgen tot uitgeklapt; hogere specificiteit dan het label-display. */
.variant-picker .variant-option--afwerking-cards .variant-option__button-label.afw-collapsed-overflow {
  display: none !important;
}
.afw-show-all {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: space-between;   /* tekst links, chevron rechts */
  gap: 6px;
  margin: 0;
  padding: 14px 18px;               /* gelijk aan de kaart-padding */
  background: transparent;
  border: 1px solid var(--hds-choice-border);
  border-radius: 14px;
  font: inherit;
  font-size: 15px;                  /* gelijk aan de afwerking-kaarttitel */
  font-weight: 600;
  text-align: left;
  color: var(--hds-choice-text);
  cursor: pointer;
  transition: border-color .15s ease;
}
.afw-show-all[hidden] { display: none !important; }
.afw-show-all:hover { border-color: var(--hds-choice-hover-border); }
.afw-show-all__chevron {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  transition: transform .15s ease;
}
.afw-show-all[aria-expanded="true"] .afw-show-all__chevron { transform: rotate(180deg); }

/* ---- Gelijk verticaal ritme boven de PDP-stappen ----
   Geschikte ruimte / Afwerking / Inhoud / Toebehoren krijgen ~20px ruimte erboven.
   Toebehoren stond te ver (40px), de variant-stappen juist te dicht (12–16px). */
paint-application-filter { margin-top: 8px !important; }                                  /* 12 → 20 */
.variant-picker .variant-option--afwerking-cards { margin-top: 8px !important; }          /* 12 → 20 */
.variant-picker .variant-option[data-option-name="Inhoud"] { margin-top: 20px !important; } /* 16 → 20 */
/* Toebehoren stuurt zijn eigen ruimte via de blok-padding in het template: het staat nu
   in een rij met behangplan en cadeaus, en die moeten onderling gelijk staan. */

/* ---- Genummerde stap-koppen (1 · GESCHIKTE RUIMTE / 2 · AFWERKING / 3 · INHOUD) ---- */
.variant-option__legend-row--stepped {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin-bottom: 10px;
}
.variant-option__legend-row--stepped .variant-option__legend-label {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
}
/* Geen stapnummers, geen hoofdletters: erf de standaard thema-titelstijl (kleur + font-weight:700 van de legend) */
.vp-step-num { display: none; }
.afwerking-count {
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  font-weight: 400;
  color: var(--hds-choice-muted);
  white-space: nowrap;
}

/* ---- Geschikte ruimte: B+ pill-vorm, auto-breedte, wrappend ---- */
.paint-application-filter .variant-option--buttons {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
  grid-template-columns: none !important;
}
.paint-application-filter .variant-option__button-label {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  max-width: none !important;
  min-height: 3.25em !important;        /* gelijk aan de Inhoud-knoppen (thema-default) */
  height: auto !important;
  padding: var(--padding-xs) var(--variant-option-padding-inline) !important;
  border: 1px solid var(--hds-choice-border);
  border-radius: var(--options-border-radius);
  background: var(--hds-choice-bg);
  line-height: 1.2;                     /* font-size erft van thema → gelijk aan Inhoud */
  color: var(--hds-choice-text);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.paint-application-filter .variant-option__button-label:hover {
  border-color: var(--hds-choice-hover-border);
}
.paint-application-filter .variant-option__button-label:has(input:checked) {
  background: var(--hds-choice-sel-bg);
  border-color: var(--hds-choice-sel-accent);
  box-shadow: inset 0 0 0 1px var(--hds-choice-sel-accent);
  color: var(--hds-choice-sel-accent);
}
.paint-application-filter .variant-option__button-label__pill { display: none; }
.paint-application-filter .variant-option__button-label input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ---- Inhoud-selectie: zelfde subtiele vulling + rand als afwerking-kaart ---- */
body:has(.variant-option--afwerking-cards) .variant-picker .variant-option[data-option-name="Inhoud"] .variant-option__button-label:has(input:checked) {
  background: var(--hds-choice-sel-bg) !important;
  border-color: var(--hds-choice-sel-accent) !important;
  box-shadow: inset 0 0 0 1px var(--hds-choice-sel-accent);
  color: var(--hds-choice-sel-accent) !important;
}
/* Inhoud rendert als één schone kaart-rand (zoals afwerking): verberg de thema-pill én de
   ::before/::after fake-borders, zodat alléén de label-rand telt — geen dubbele/rare rand */
body:has(.variant-option--afwerking-cards) .variant-picker .variant-option[data-option-name="Inhoud"] .variant-option__button-label__pill { display: none !important; }
body:has(.variant-option--afwerking-cards) .variant-picker .variant-option[data-option-name="Inhoud"] .variant-option__button-label::before,
body:has(.variant-option--afwerking-cards) .variant-picker .variant-option[data-option-name="Inhoud"] .variant-option__button-label::after { display: none !important; }
/* Niet-leverbare inhouden volledig verbergen i.p.v. doorgestreept tonen */
body:has(.variant-option--afwerking-cards) .variant-picker .variant-option[data-option-name="Inhoud"] .variant-option__button-label:has(input[data-option-available="false"]) {
  display: none !important;
}
/* Inhoud uitlijnen zoals Geschikte ruimte: content-breedte pillen (flex-wrap, links gepakt)
   i.p.v. het equal-width grid. Overschrijft .variant-option--equal-width-buttons. */
body:has(.variant-option--afwerking-cards) .variant-picker .variant-option[data-option-name="Inhoud"] {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
  grid-template-columns: none !important;
}
body:has(.variant-option--afwerking-cards) .variant-picker .variant-option[data-option-name="Inhoud"] .variant-option__button-label {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: fit-content !important;
}

/* ---- Prijs/cart-gate voor de verf-PDP ----
   Staat wordt door afwerking-selection.js bijgehouden op <body>:
   • .verf-incomplete    — geen afwerking ÓF geen inhoud gekozen (o.a. na een
                           ruimte-switch) → prijs weg + cart op slot.
   • .verf-price-pending — er loopt een variant-fetch; prijs even verborgen zodat je
                           niet de oude→nieuwe waarde ziet flippen (cart blijft actief).
   De :has()-regels eronder zijn een no-JS fallback voor de afwerking-gate. */
body:has(.variant-option--afwerking-cards):not(:has(.variant-option--afwerking-cards input:checked)) .product-information product-price,
body:has(.variant-option--afwerking-cards):not(:has(.variant-option--afwerking-cards input:checked)) .sticky-add-to-cart__price,
body.verf-incomplete .product-information product-price,
body.verf-incomplete .sticky-add-to-cart__price,
body.verf-price-pending .product-information product-price,
body.verf-price-pending .sticky-add-to-cart__price {
  visibility: hidden;
}

/* Cart blokkeren zolang de selectie incompleet is (niet tijdens een prijs-refresh).
   Geldt voor de hoofd-ATC, de verf-calculator-knop en de sticky balk. 'Gratis staal' blijft. */
body:has(.variant-option--afwerking-cards):not(:has(.variant-option--afwerking-cards input:checked)) button[name="add"],
body:has(.variant-option--afwerking-cards):not(:has(.variant-option--afwerking-cards input:checked)) .hds-calculator__button--primary,
body:has(.variant-option--afwerking-cards):not(:has(.variant-option--afwerking-cards input:checked)) .sticky-add-to-cart__cta-row button,
body.verf-incomplete button[name="add"],
body.verf-incomplete .hds-calculator__button--primary,
body.verf-incomplete .sticky-add-to-cart__cta-row button {
  pointer-events: none;
  opacity: 0.45;
  cursor: not-allowed;
}

/* (Teaser én scheidingslijn zijn nu uniform voor verf + configurator-PDP's geregeld in
   het buybox-blok verderop: teaser → pill, lijn → border-top op de "configureer"-zone
   die start bij de verf-filter of de variant-picker. Zie SHO-8247.) */

/* Alleen de verplaatste legend-link blijft een tekstlink. De standalone
   instapkaart (zelfde vorm als behangplan) mag hier niet platgeslagen worden. */
body:has(.variant-option--afwerking-cards) .hds-calculator__trigger--inline {
  display: inline;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  color: var(--color-primary);
  font: inherit;
  font-weight: 400;
  text-decoration-line: underline;
  text-decoration-color: currentColor;
  text-underline-offset: 0.125em;
}
body:has(.variant-option--afwerking-cards) .hds-calculator__trigger--inline:hover {
  background: none;
  color: var(--color-primary-hover);
  text-decoration-color: transparent;
}
/* ============================================================
   PDP buybox — configurator uitlijnen op de kolomkantlijn (SHO-8247).
   Type/Lengte (variant-picker) staan strak op de kolomkantlijn, maar de
   configurator wikkelt z'n velden in witte kaarten met 16px padding +
   border, waardoor de labels inspringen (Aantal op 757, Montage op 789
   i.p.v. 740). Richting "plat & uitgelijnd": de wikkel-kaarten weg zodat
   alle labels/controls op één kantlijn komen. Functionele boxen — de
   quantity-stepper en de groene advieskaart — behouden bewust hun eigen
   omranding als accent.
   NB: generieke configurator-classes → geldt voor álle configurator-PDP's
   (laminaat, gordijnrails, …), niet alleen Orac. Bedoeld als consistente look.
   ============================================================ */

/* !important is hier nodig: de configurator-styling komt uit een externe
   app-extensie-stylesheet (cdn.shopify.com/extensions/.../configurator-styles.css)
   die ná ux-fixes.css laadt en CORS-geblokkeerd is. Bij gelijke specificiteit
   wint die app-CSS op bron-volgorde; gerichte !important overrulet dat
   volgorde-onafhankelijk zonder de selectors kunstmatig zwaar te maken. */

/* "Aantal"-blok: geen wikkelende kaart; compacte stepper + bereken-rij. */
.configurator-unit-switcher-block {
  padding-inline: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

/* "Montageproducten"-stap: wikkelende witte kaart weg → titel + uitklap-box.
   De advieskaart (.advice-bundle-card) wordt gelijkgetrokken met het verf-
   toebehoren-design (zie het advice-bundle-blok verderop).

   Uitgezonderd: [data-step-box]. Dat is de keuze-box-kop die de app zélf rendert
   (deurmat → "Ophoging deurmat", SHO-8851) — die ís al de box uit het design en
   moet z'n kader, radius en padding houden. Zonder deze uitzondering strippen de
   regels hieronder precies wat de app tekent en blijft er een kale kop over. */
.config-step:not([data-step-box]) {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.config-step:not([data-step-box]):not([data-has-advice-bundle]) .step-header {
  padding-inline: 0 !important;
  padding-block-start: 0;
}

/* "Montageproducten": het ronde stap-status-icoon verbergen zodat de titel
   strak op de kolomkantlijn staat (consistent met Type/Lengte/Aantal en
   conform het design dat geen icoon toont). */
.config-step .step-status-icon {
  display: none !important;
}

/* ---------- PDP buybox — afmeting als badge (SHO-8247) ---------- */

/* De teaser onder de titel als grijze pill — op álle PDP's: de afmeting
   ("200 × 25 × 1,6 cm") bij configurator-producten én de kleur-/sfeertekst bij
   verf. Scope = het custom <variant-teaser-text> element op de PDP (de dynamische,
   variant-volgende versie); de platte .variant-teaser-text div op collectie-/
   zoekkaarten blijft ongemoeid (element-selector matcht die div niet). */
variant-teaser-text:not(.variant-teaser-text--has-content):not(:has(.variant-teaser-text__heading)),
variant-teaser-text[hidden] {
  display: none !important;
}

variant-teaser-text.variant-teaser-text--has-content .variant-teaser-text__content {
  display: inline-block;
  background: rgb(var(--color-foreground-rgb) / 0.06);
  color: rgb(var(--color-foreground-rgb) / 0.75);
  border-radius: 8px;
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
  line-height: 1.2;
}

variant-teaser-text .variant-teaser-text__content[hidden] {
  display: none !important;
}

variant-teaser-text .variant-teaser-text__content p {
  margin: 0;
  display: inline;
}

/* De chip-rij onder de titel (Dikte-pill + meetverzekering) mag wrappen: het
   group-block kent geen flex-wrap-instelling, en op smalle schermen passen twee
   chips niet altijd naast elkaar. Zonder dit lopen ze over de kolom heen. */
.product-details .group-block:has(> .group-block-content > .mv__chip) > .group-block-content {
  flex-wrap: wrap;
}

/* variant-teaser-text staat op width:100% (nodig waar het blok alleen staat, bv.
   op productkaarten). In de chip-rij claimt het daarmee de hele regel en wipt de
   meetverzekering-chip naar de volgende. Hier dus fit-content. */
.product-details .group-block:has(> .group-block-content > .mv__chip) > .group-block-content > variant-teaser-text {
  width: auto;
  flex: 0 0 auto;
}

/* Design zet de CTA op font-weight 700; .button erft alleen family/case en komt
   daardoor op 400 uit. Scope = de buybox + de sticky koopbalk, zodat knoppen
   elders op de site op hun eigen gewicht blijven. Geldt voor "In winkelwagen"
   (.button) én "Gratis staal aanvragen" (.button-secondary). */
.product-details add-to-cart-component .button,
.product-details .product-button-add-to-cart,
.sticky-add-to-cart__cta-row .button {
  font-weight: 700;
}

/* Buybox breder: 400px (--sidebar-width, 25rem) → 480px, met de linkerrand op zijn
   plek zodat alleen de rechterkant opschuift.

   Waarom niet gewoon --sidebar-width ophogen: dat token is globaal
   (theme-styles-variables.liquid) en stuurt óók de winkelwagen-kolom en de breedte
   van de header-drawer. Hier dus alleen de PDP-cap.

   De linker-padding houdt de buybox precies waar hij nu staat: _product-details.liquid
   zet justify-content:center, wat neerkomt op een offset van (kolom − 400px) / 2.
   Die formule staat hier letterlijk, zodat de linkerrand meebeweegt met de kolom
   (140px op 1440, 160px op 1728) in plaats van een hardgecodeerde waarde die maar
   op één schermbreedte klopt. Wordt de kolom smaller dan 400px, dan klapt de calc
   negatief en zet de browser 'm op 0 — precies goed, dan is er niets te verankeren.

   Pas vanaf 1400px, niet vanaf 750px. De buybox heeft een min-content van ~434px
   en de kolom is de helft van de pagina, dus onder 1400px is er geen 80px te halen
   zonder de rechtermarge op te eten: op 1200px (kolom 560) staat hij dan strak
   tegen de paginarand. Op 1400px (kolom 660) blijft er 50px over, op 1440px 60px.
   Onder deze grens verandert er dus niets t.o.v. nu.

   (Los hiervan: tussen 750 en ~1000px steekt de buybox nu al buiten zijn kolom —
   400px cap in een kolom van 335px. Dat is bestaand gedrag en staat hier los van.)

   De .product-information-ouder staat er puur voor de specificiteit. Dit bestand
   laadt vóór compiled_assets/styles.css (waar de {% stylesheet %} van secties in
   belandt), dus bij gelijke specificiteit wint het thema. De originele regel is
   (0,3,0); met deze ouder erbij zitten we op (0,4,0) en winnen we zonder
   !important. Geldt voor elke regel hier die een sectie-stylesheet overschrijft. */
@media screen and (min-width: 1400px) {
  .product-information .product-information__grid--limit-details .product-details {
    justify-content: flex-start;
    padding-inline-start: calc((100% - var(--sidebar-width)) / 2);
  }

  .product-information .product-information__grid--limit-details .product-details > .group-block {
    max-width: 30rem;
  }
}

/* ---------- PDP buybox — vervolg (SHO-8247) ---------- */

/* Configurator-prijs in de configurator-sectie verbergen: de per-stuk productprijs
   staat onder de titel (pdp-unit-price) wanneer showFixedProductPrice aan staat.
   Voorkomt dubbele prijs; sticky-balk-prijs blijft ongemoeid. */
.product-configurator-section .configurator-fixed-product-price {
  display: none !important;
}

/* Scheidingslijn boven de "configureer"-zone (onder de teaser-pill). Die zone start
   bij de verf-ruimtefilter op verf-PDP's, bij de variant-picker (Type/Lengte) op
   PDP's met theme-varianten, en bij de configurator/placeholder wanneer de variant
   picker ontbreekt (alle opties in de configurator). De lijn volgt dus de eerste
   configureer-zone, niet de teaser. Op verf zit de lijn op <paint-application-filter>
   i.p.v. de variant-picker (die staat ná de filter, dat zou een lijn middenin geven). */
paint-application-filter,
body:not(:has(paint-application-filter)) .variant-picker,
body:not(:has(paint-application-filter)):not(:has(.product-information .variant-picker))
  .product-information .product-configurator-section,
body:not(:has(paint-application-filter)):not(:has(.product-information .variant-picker))
  .product-information .hds-pdp-configurator-placeholder {
  border-top: 1px solid rgb(var(--color-foreground-rgb) / 0.12);
  padding-top: 1rem !important;
  padding-bottom: 8px !important;
}
/* custom element is van zichzelf inline → block maken zodat de border-top volle breedte krijgt. */
paint-application-filter {
  display: block;
}

/* Aantal-kop: label links, compacte stepper rechts. */
.configurator-field-header-row {
  justify-content: space-between !important;
}

/* 4px extra tussen de quantity-rij en de volgende configurator-rij. */
.product-configurator-section .configurator-field--compact-quantity,
.product-configurator-section .configurator-field--has-unit-switcher {
  margin-block-end: 4px !important;
}

/* Compacte configurator-stepper = buybox `.bbv-qty-row .quantity-selector--buttons`.
   !important: app-CSS laadt ná het thema (zie comment onderaan dit blok). */
.product-configurator-section .configurator-quantity-stepper--compact {
  --quantity-selector-width: 124px;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
  width: var(--quantity-selector-width) !important;
  min-width: var(--quantity-selector-width) !important;
  max-width: none !important;
  min-height: 0 !important;
  height: auto !important;
  border-width: var(--style-border-width-inputs, 1.5px) !important;
  border-style: solid !important;
  border-color: var(--color-input-border, #dfe3e6) !important;
  border-radius: var(--style-border-radius-buttons-primary, var(--style-border-radius-inputs, 999px)) !important;
  overflow: hidden !important;
  background: var(--color-input-background, #fff) !important;
}

.product-configurator-section .configurator-quantity-stepper--compact:focus-within {
  border-color: var(--color-input-border, #dfe3e6) !important;
  box-shadow: none !important;
}

.product-configurator-section .configurator-quantity-stepper--compact .configurator-qty-minus,
.product-configurator-section .configurator-quantity-stepper--compact .configurator-qty-plus {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 var(--minimum-touch-target, 44px) !important;
  align-self: center !important;
  min-width: var(--minimum-touch-target, 44px) !important;
  width: var(--minimum-touch-target, 44px) !important;
  height: var(--minimum-touch-target, 44px) !important;
  min-height: var(--minimum-touch-target, 44px) !important;
  padding: 0 !important;
  line-height: 1 !important;
}

.product-configurator-section .configurator-quantity-stepper--compact .configurator-qty-minus__icon,
.product-configurator-section .configurator-quantity-stepper--compact .configurator-qty-plus__icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--icon-size-xs, 0.85rem) !important;
  height: var(--icon-size-xs, 0.85rem) !important;
  font-size: 0 !important;
  line-height: 0 !important;
  color: var(--color-input-text, #1a1a1a) !important;
}

.product-configurator-section .configurator-quantity-stepper--compact .configurator-qty-minus__icon svg,
.product-configurator-section .configurator-quantity-stepper--compact .configurator-qty-plus__icon svg {
  display: block !important;
  width: var(--icon-size-xs, 0.85rem) !important;
  height: var(--icon-size-xs, 0.85rem) !important;
}

.product-configurator-section .configurator-quantity-stepper--compact .configurator-qty-minus:focus-visible,
.product-configurator-section .configurator-quantity-stepper--compact .configurator-qty-plus:focus-visible {
  outline: 2px solid #0056b3;
  outline-offset: 2px;
}

.product-configurator-section .configurator-quantity-stepper--compact input[type='number'] {
  width: calc(var(--quantity-selector-width) - var(--minimum-touch-target, 44px) * 2) !important;
  min-width: 0 !important;
  max-width: calc(var(--quantity-selector-width) - var(--minimum-touch-target, 44px) * 2) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  text-align: center !important;
  appearance: none !important;
  background: transparent !important;
  font-size: var(--font-paragraph--size) !important;
  font-weight: inherit !important;
  line-height: var(--font-paragraph--line-height) !important;
  color: var(--color-input-text) !important;
}

.product-configurator-section .configurator-unit-calc .configurator-dependency-calculate-hint--unit-switcher-foot,
.product-configurator-section .configurator-unit-calc .configurator-dependency-calculate-hint {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  color: #15803d !important;
}

.product-configurator-section .configurator-unit-switcher-foot:empty {
  display: none !important;
}

/* Eén witte kaart: rand/radius op de wrapper, niet op header én body apart.
   !important: app-CSS laadt ná het thema. */
.product-configurator-section .configurator-unit-calc {
  border: 1px solid var(--hds-choice-border, #e6e6e6) !important;
  border-radius: 14px !important;
  background: var(--hds-choice-bg, #fff) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.product-configurator-section .configurator-unit-calc__trigger {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  padding: 12px 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--hds-choice-text, #333) !important;
  text-align: left !important;
  font-family: inherit !important;
}

.product-configurator-section .configurator-unit-calc .configurator-unit-mode-panel:not([hidden]) {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  padding: 0 14px 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.product-configurator-section .configurator-unit-calc .configurator-unit-mode-panel[hidden] {
  display: none !important;
}

/* Strakker, gelijkmatig verticaal ritme in de configurator (~12px, gelijk aan de
   buybox-kolom-gap). Bron van de 28px-gaten: .configurator-display heeft
   margin 16/16 en .product-configurator-section margin-bottom 16. */
.product-configurator-section,
.configurator-display {
  margin-block: 0 !important;
}

.configurator-display {
  gap: 12px !important;
}

.configurator-loose-fields-outside {
  gap: 12px !important;
  margin-block-end: 0 !important;
}

.configurator-fields-container {
  gap: 12px !important;
}

.product-configurator-section .configurator-field {
  gap: 8px !important;
}

.config-step {
  margin-block: 0 !important;
}

/* Een keuze-box krijgt wél lucht bovenop: hij staat direct onder de maatvelden
   (Breedte/Lengte) en leest als een eigen blok, niet als het volgende veld. De 12px
   hierboven is de flex-gap van .configurator-display, dus 14px erbij komt uit op de
   26px die het design tekent. !important omdat de regel hierboven margin-block hard
   nulzet voor álle stappen; dit is de uitzondering daarop. */
.product-configurator-section .config-step[data-step-box] {
  margin-block-start: 14px !important;
}

/* De placeholder begint op dezelfde plek als de echte configurator (de echte
   .configurator-display heeft nu geen margin-top meer, dus deze ook niet) →
   voorkomt de verticale sprong bij de placeholder→configurator-wissel. */
.hds-pdp-configurator-placeholder {
  margin-block-start: 0 !important;
}

/* Placeholder-skelet volgt de snapshot-UI (aantal velden/stappen), niet één
   vaste kolomhoogte. Ritme gelijk trekken met de live configurator (12px-gap,
   platte stappen) zodat de wissel per product ongeveer dezelfde hoogte heeft. */
.hds-pdp-configurator-display--placeholder,
.hds-pdp-ph-loose-fields,
.hds-pdp-ph-step-body {
  gap: 12px !important;
}

.hds-pdp-ph-step {
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

.hds-pdp-ph-step--collapsed {
  padding-block-end: 0 !important;
}

/* Hint onder de stepper mag inklappen; geen vaste 148px meer (die was voor
   label + toggle + volle-breedte-stepper). */
.configurator-field--has-unit-switcher {
  min-height: 0 !important;
}

/* ---------- PDP buybox — Orac/configurator-detailafwerking (review 25-6) ----------
   App-gerenderde configurator: de cross-origin app-CSS laadt ná ons, dus !important
   + .product-configurator-section-scope nodig om te winnen. Selectors live geverifieerd
   tegen de gerenderde configurator-DOM. ---------- */

/* Veld-validatie-vinkje (groene tick) achter de veld-labels (Aantal e.d.) weg — ruis. */
.product-configurator-section .configurator-field-label-container svg.icon-tick-small {
  display: none !important;
}

/* Stap-kop gelijktrekken met variant-tussenkoppen (Type/Lengte: 14px/700).
   Niet in een keuze-box of adviesbundel: dáár is de titel de kop ín de kaart
   (14px/600, gelijk aan .vap__sub). */
.product-configurator-section
  .config-step:not([data-step-box]):not([data-has-advice-bundle])
  .step-header
  h3 {
  font-size: 14px !important;
  font-weight: 700 !important;
}

/* Veld-labels (Breedte, Lengte, Ophoging deurmat, Rolbreedte) om dezelfde reden
   gelijktrekken: de app levert 600/#4B5563, terwijl elke kop ernaast — de
   variant-legend en .vap__heading — 700/foreground is. Raakt elk
   configurator-product, dus ook Orac. */
.product-configurator-section .configurator-field-label-container label {
  font-weight: 700 !important;
  color: var(--color-foreground, #333) !important;
}

/* De ingevulde maat is het antwoord op de vraag die de buybox stelt, maar stond
   op 14px/500 — even zwaar als de "cm" ernaast. Naar 17px/600, suffix naar 15px.
   Onder 16px zoomt iOS Safari bij focus in; 17px haalt die zoom weg.
   Hoogte hier vastgezet omdat de app 'm anders uit padding + line-height afleidt
   en het veld zou meegroeien: 46px = hds_input_h in
   snippets/configurator-storefront-placeholder-field.liquid, dus placeholder en
   veld sluiten nu exact aan (was 47,6 vs 46). */
.product-configurator-section .configurator-field-input {
  font-size: 17px !important;
  font-weight: 600 !important;
  height: 46px !important;
  line-height: normal !important;
}

.product-configurator-section .configurator-input-suffix {
  font-size: 15px !important;
}

/* Uitklapdeel gelijk aan verf (.vap__summary): alleen stappen zónder
   keuze-box én zónder adviesbundel stapelen (titel boven een losse pill). */
.product-configurator-section
  .config-step:not([data-step-box]):not([data-has-advice-bundle])
  .step-header-content {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 8px !important;
}
.product-configurator-section
  .config-step:not([data-step-box]):not([data-has-advice-bundle])
  .step-header-advice-pill-wrap {
  width: 100% !important;
}
.product-configurator-section
  .config-step:not([data-step-box]):not([data-has-advice-bundle])
  .step-summary-advice-pill {
  display: flex !important;
  width: 100% !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 13px 14px !important;
  border: 1px solid var(--hds-choice-border, #e6e6e6) !important;
  border-radius: 14px !important;
  background: var(--hds-choice-bg, #fff) !important;
  color: var(--hds-choice-text, #333) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: border-color 0.15s ease !important;
}
.product-configurator-section
  .config-step:not([data-step-box]):not([data-has-advice-bundle])
  .step-summary-advice-pill:hover {
  background: var(--hds-choice-bg, #fff) !important;
  border-color: var(--hds-choice-hover-border, #d9d9d9) !important;
  color: var(--hds-choice-text, #333) !important;
  text-decoration: none !important;
}
.product-configurator-section
  .config-step:not([data-step-box]):not([data-has-advice-bundle])
  .step-summary-advice-pill-chevron {
  display: inline-flex !important;
  align-items: center !important;
  color: rgb(51 51 51 / 0.5) !important;
}

/* SHO-9127: completed.collapsed advice-bundle blijft VAP-pill; geen Wijzig/
   tekstmuur/prijs. App-CSS dekt dit ook; !important wint van late app-load. */
.product-configurator-section
  .config-step.completed.collapsed[data-has-advice-bundle]
  .step-summary {
  display: none !important;
}
.product-configurator-section
  .config-step.completed.collapsed[data-has-advice-bundle]
  .step-main-title {
  display: block !important;
}
.product-configurator-section
  .config-step.completed.collapsed[data-has-advice-bundle]
  .step-header-actions,
.product-configurator-section
  .config-step.completed.collapsed[data-has-advice-bundle]
  .step-edit-btn,
.product-configurator-section
  .config-step.completed.collapsed[data-has-advice-bundle]
  .step-summary-price {
  display: none !important;
}

/* Montageproducten: één kopregel (icoon, titel, subtitel, chevron rechts).
   Geen extra “Bekijk advies”-rij — die chevron hoort op de kaart zelf. */
.product-configurator-section .config-step[data-has-advice-bundle] .step-header {
  align-items: center !important;
  gap: 12px !important;
  padding: 13px 14px !important;
  border: 1px solid var(--hds-choice-border, #e6e6e6) !important;
  border-radius: 14px !important;
  background: var(--hds-choice-bg, #fff) !important;
}

.product-configurator-section .config-step[data-has-advice-bundle] .step-header-content {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 12px !important;
}

.product-configurator-section .config-step[data-has-advice-bundle] .step-header-text-stack {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.product-configurator-section
  .config-step[data-has-advice-bundle]
  .step-header-advice-pill-wrap {
  display: none !important;
}

.product-configurator-section .config-step[data-has-advice-bundle] .step-header-chevron {
  display: flex !important;
  flex: 0 0 auto !important;
  margin-inline-start: auto !important;
}

.product-configurator-section
  .config-step[data-has-advice-bundle]
  .step-header-thumbs
  img:nth-child(n + 2) {
  display: none !important;
}

.product-configurator-section .config-step[data-has-advice-bundle]:not(.collapsed) .step-header {
  border-end-start-radius: 0 !important;
  border-end-end-radius: 0 !important;
  padding-bottom: 13px !important;
}

.product-configurator-section .config-step[data-has-advice-bundle]:not(.collapsed) .step-content {
  margin-top: 0 !important;
  padding: 0 !important;
}

.product-configurator-section .config-step[data-has-advice-bundle]:not(.collapsed) .advice-bundle-card {
  border-top: 0 !important;
  border-start-start-radius: 0 !important;
  border-start-end-radius: 0 !important;
}

/* ============================================================
   Montageproducten-advies (configurator .advice-bundle-card) → zelfde
   lijst-in-één-kader als verf-toebehoren (.vap__body / .vap-item).
   App-CSS laadt cross-origin ná ux-fixes, dus !important waar we de
   oude "losse kaarten"-look moeten overschrijven tot de app-deploy live is.
   ============================================================ */

.product-configurator-section .advice-bundle-card {
  border: 1px solid var(--hds-choice-border, #e6e6e6) !important;
  background: var(--hds-choice-bg, #fff) !important;
  border-radius: 14px !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.product-configurator-section .advice-bundle-card__badge,
.product-configurator-section .advice-bundle-card__subtitle,
.product-configurator-section .advice-bundle-card__title {
  display: none !important;
}

.product-configurator-section .advice-bundle-card__rows {
  border-top: 0 !important;
  padding-top: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

.product-configurator-section .advice-bundle-card__row {
  position: relative !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: box-shadow 0.15s ease, background-color 0.15s ease !important;
}

.product-configurator-section .advice-bundle-card__row + .advice-bundle-card__row::before {
  content: '' !important;
  position: absolute !important;
  inset-block-start: 0 !important;
  inset-inline: 14px !important;
  border-block-start: 1px solid var(--hds-choice-border, #e6e6e6) !important;
}

.product-configurator-section .advice-bundle-card__row:hover {
  background: rgb(0 0 0 / 0.02) !important;
  border-color: transparent !important;
}

.product-configurator-section .advice-bundle-card__row--selected {
  box-shadow: inset 3px 0 0 0 var(--hds-choice-sel-accent, #333) !important;
  background: var(--hds-choice-sel-bg, #f5f5f5) !important;
  border-color: transparent !important;
}

/* Thumb → 44×44, radius 8px, neutrale achtergrond (verf). */
.product-configurator-section .advice-bundle-card__thumb {
  width: 44px !important;
  height: 44px !important;
  border-radius: 8px !important;
  border: 0 !important;
  background: rgb(0 0 0 / 0.04) !important;
}

/* Titel/sub in keuzekaarten → zelfde typografie als adviesbundel-rijen. */
.product-configurator-section [data-select-style="buttons"] .configurator-field .button-option .button-text {
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  color: var(--hds-choice-text, #333) !important;
}

.product-configurator-section [data-select-style="buttons"] .configurator-field .button-option .button-price {
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
  color: var(--hds-choice-muted) !important;
}

/* Titel → 14px/500, max 2 regels (i.p.v. nowrap-ellipsis). */
.product-configurator-section .advice-bundle-card__row-title {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--hds-choice-text, #333) !important;
  white-space: normal !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

/* Sub → 13px grijs (verf unit-regel). */
.product-configurator-section .advice-bundle-card__row-sub {
  font-size: 13px !important;
  color: var(--hds-choice-muted) !important;
}

/* Lijnprijs → neutrale choice-text. */
.product-configurator-section .advice-bundle-card__row-price {
  color: var(--hds-choice-text, #333) !important;
}

/* Stepper → ronde pill (verf .vap-stepper); specificiteit matcht de app-regel. */
.product-configurator-section .advice-bundle-card .advice-bundle-card__qty-stepper.configurator-quantity-stepper {
  border-radius: 999px !important;
  border: 1px solid var(--hds-choice-border, #e6e6e6) !important;
  background: #fff !important;
}
.product-configurator-section .advice-bundle-card .advice-bundle-card__qty-stepper.configurator-quantity-stepper:focus-within {
  border-color: var(--hds-choice-sel-accent, #333) !important;
  box-shadow: none !important;
}

/* × verwijderen → subtiel grijs (zoals verf's losse actie-icoon). */
.product-configurator-section .advice-bundle-card__row-remove {
  color: rgb(51 51 51 / 0.4) !important;
}
.product-configurator-section .advice-bundle-card__row-remove:hover {
  color: var(--hds-choice-text, #333) !important;
}

/* Footer-totaal → neutrale rand + tekstkleuren. */
.product-configurator-section .advice-bundle-card__footer {
  border-top: 1px solid var(--hds-choice-border, #e6e6e6) !important;
  margin-top: 0 !important;
  padding: 12px 14px !important;
}
.product-configurator-section .advice-bundle-card__total-label {
  color: var(--hds-choice-muted) !important;
}
.product-configurator-section .advice-bundle-card__total-price {
  color: var(--hds-choice-text, #333) !important;
}

/* CTA "Selecteer advies" → groen weg, donker keuze-accent (verf-palet). Deze knop
   is functioneel (past het advies toe op de configurator-velden → gaat mee met
   "In winkelwagen"); verf heeft 'm niet omdat daar de steppers direct meegaan.
   Daarom behouden, maar neutraal gestyled zodat hij niet meer als groen accent
   schreeuwt. De --selected/--loading-varianten erven dit. */
.product-configurator-section .advice-bundle-card__cta {
  background: var(--hds-choice-sel-accent, #333) !important;
  border-color: var(--hds-choice-sel-accent, #333) !important;
  color: #fff !important;
}

/* Ruimte tussen stap-kop en inhoud. Adviesbundel én keuze-box (ophoging)
   hangen aan de kop vast — zelfde één-kaart als toebehoren. */
.product-configurator-section
  .config-step:not([data-has-advice-bundle]):not([data-step-box])
  .step-content {
  margin-top: 8px !important;
  padding: 0;
}

.product-configurator-section .config-step[data-step-box] .step-header {
  align-items: center !important;
  gap: 12px !important;
  padding: 13px 14px !important;
  border: 1px solid var(--hds-choice-border, #e6e6e6) !important;
  border-radius: 14px !important;
  background: var(--hds-choice-bg, #fff) !important;
}

.product-configurator-section .config-step[data-step-box]:not(.collapsed) .step-header {
  border-end-start-radius: 0 !important;
  border-end-end-radius: 0 !important;
}

.product-configurator-section .config-step[data-step-box]:not(.collapsed) .step-content {
  margin-top: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--hds-choice-border, #e6e6e6) !important;
  border-top: 0 !important;
  border-end-start-radius: 14px !important;
  border-end-end-radius: 14px !important;
  background: var(--hds-choice-bg, #fff) !important;
}

/* Ophoging: rijen in hetzelfde kader, geen nested kaarten.
   App-CSS (.button-option rand/radius) laadt later → !important. */
.product-configurator-section .config-step[data-step-box] .configurator-button-group,
.product-configurator-section .config-step[data-step-box] .button-group {
  gap: 0 !important;
}

.product-configurator-section .config-step[data-step-box] .button-option {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 12px 14px !important;
  transform: none !important;
}

.product-configurator-section .config-step[data-step-box] .button-option + .button-option {
  border-top: 1px solid var(--hds-choice-border, #e6e6e6) !important;
}

.product-configurator-section .config-step[data-step-box] .button-option:hover,
.product-configurator-section .config-step[data-step-box] .button-option.selected,
.product-configurator-section
  .config-step[data-step-box]
  .button-option.button-option--default-value,
.product-configurator-section
  .config-step[data-step-box]
  .button-option.button-option--default-value:hover,
.product-configurator-section
  .config-step[data-step-box]
  .button-option.button-option--default-value.selected {
  border-left: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.product-configurator-section .config-step[data-step-box] .button-option:hover {
  background: var(--hds-choice-bg, #fff) !important;
}

.product-configurator-section .config-step[data-step-box] .button-option.selected {
  background: var(--hds-choice-sel-bg, #f5f5f5) !important;
}

.product-configurator-section .config-step[data-step-box] .button-option:focus-visible {
  outline: 2px solid #0056b3;
  outline-offset: -2px;
}

/* Invoervelden (Breedte/Lengte) op de designwaarde 10px. De app zet 6px via haar
   eigen token --border-radius-sm (configurator.css: .configurator-field-input),
   waardoor de velden zichtbaar strakker afgerond waren dan alles eromheen — de
   kaarten staan op 12px, de chips op 8px. Bewust een override: de app blijft zelf
   6px zeggen, dus dit hoort op termijn in dat token thuis.

   Géén !important hier, in tegenstelling tot de rest van dit blok. Deze selector
   is met vier klassen al specifieker dan de app-regel (.configurator-field-input),
   en zónder !important blijft de app-regel voor de quantity-stepper — die nóg
   specifieker is en het inner-veld bewust plat zet, want het kader eromheen levert
   de rand — gewoon winnen. Met !important overrulede deze regel die stepper wél,
   en kreeg je ronde hoeken bínnen het stepper-kader (gezien op de Orac-PDP).
   Checkboxes dragen dezelfde klasse en moeten wél expliciet uitgezonderd: 10px
   maakt van een vakje van 20px bijna een cirkel. */
.product-configurator-section .configurator-field-input:not([type='checkbox']):not([type='radio']) {
  border-radius: 10px;
  border-width: 1.5px;
  border-color: #dfe3e6;
}

/* Aantal-veld naast "In winkelwagen" op dezelfde rand als de maatvelden hierboven,
   conform design (1.5px #dfe3e6). Het erft normaal --style-border-width-inputs (1px)
   en --color-input-border (#f5f5f5) — thema-brede input-tokens, dus veel lichter en
   dunner dan alles eromheen. Die tokens blijven bewust ongemoeid: ze gelden voor elk
   invoerveld op de site (cart, formulieren, zoeken); alleen de PDP wijkt af.

   NB: Chrome vloert border-width 1.5px naar 1px — op DPR 1 én 2, gemeten. Firefox
   rendert 'm wel fractioneel. De 1.5px staat er dus als designwaarde; in Chrome zie
   je 1px. Dat is precies goed: de VAP-kaart ernaast is ook 1px. Niet "fixen" door
   er 2px van te maken, dan is het weer zwaarder dan de rest. */
.product-details .quantity-selector {
  border-width: 1.5px;
  border-color: #dfe3e6;
}

/* De stap zónder adviesbundel (Ophoging deurmat) had hier een kaart-styling:
   rand + radius 12px + chevron + label-hider, conform Buybox.dc.html. Verwijderd
   zonder ooit geshipt te zijn — het was een thema-workaround voor een app-gat.
   Het design zet de titel bóven de box en noemt de box zelf "Kies opvulmat (2)";
   die ondertitel zit in de app achter de adviesbundel (formManager.js: alleen
   binnen `if (showBundle)`), dus zonder app-werk klopte de kop sowieso niet.
   Hoort in de app thuis: zie SHO-8851. Terug te halen uit git history als het
   thema-kant tóch nodig blijkt. */

/* ---------- Variant-keuze (Type/Lengte e.d.) — verf's clean knop-lijn als
   algemene standaard (vervangt de eerdere ○/✓-restyle, keuze 25-6).
   Clean pill, géén rondje-vinkje, geselecteerd = donkere rand + zachte vulling.
   Scope: NIET op verf-PDP's (die hebben hun eigen afwerking/ruimte/inhoud-regels);
   geldt dus voor configurator-PDP's (Orac e.a.) en gewone variant-PDP's. ---------- */
body:not(:has(paint-application-filter)) .variant-picker[data-template-product-match="true"] .variant-option__button-label {
  border: 1px solid var(--hds-choice-border) !important;
  background: var(--hds-choice-bg) !important;
  color: var(--hds-choice-text) !important;
  justify-content: center !important;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
/* schuivende thema-pill + animatie-pseudo's uit → één schone rand, geen rondje */
body:not(:has(paint-application-filter)) .variant-picker[data-template-product-match="true"] .variant-option__button-label__pill,
body:not(:has(paint-application-filter)) .variant-picker[data-template-product-match="true"] .variant-option__button-label svg,
body:not(:has(paint-application-filter)) .variant-picker[data-template-product-match="true"] .variant-option__button-label::before,
body:not(:has(paint-application-filter)) .variant-picker[data-template-product-match="true"] .variant-option__button-label::after {
  display: none !important;
}
body:not(:has(paint-application-filter)) .variant-picker[data-template-product-match="true"] .variant-option__button-label:not(:has(:checked)):hover {
  border-color: var(--hds-choice-hover-border) !important;
}
/* geselecteerd: donkere rand + zachte vulling + vet, géén vinkje */
body:not(:has(paint-application-filter)) .variant-picker[data-template-product-match="true"] .variant-option__button-label:has(:checked) {
  background: var(--hds-choice-sel-bg) !important;
  border-color: var(--hds-choice-sel-accent) !important;
  box-shadow: inset 0 0 0 1px var(--hds-choice-sel-accent);
  color: var(--hds-choice-sel-accent) !important;
  font-weight: 600;
}

.modal-content ul,
.modal-content h3,
.modal-content p {
  margin-top: 0;
}

/* Quantity buybox row — was {% stylesheet %} (styles.css dump). */
in de head
      kan ná first paint binnenkomen — dan zie je Totaal en springt hij weg.
    {%- endcomment -%}
    <style>
      .product-details:has(.bbv-qty-row[data-bbv-qty-price='true']) .bbv-summary:not(.bbv-summary--show) {
        display: none;
      }
    </style>
  {%- endif -%}
  <div class="bbv-qty-row"{% if show_price %} data-bbv-qty-price="true"{% endif %} {{ block.shopify_attributes }}>
    <div class="bbv-qty-copy">
      <label class="bbv-qty-label" for="{{ quantity_input_id }}">
        {%- render 'selling-unit', product: product, formaat: 'label' -%}
      </label>
      {%- if show_price -%}
        <product-price
          class="bbv-qty-price"
          data-block-id="{{ block.id }}"
          data-product-id="{{ product.id }}"
        >
          <div class="bbv-qty-price__line" ref="priceContainer">
            <span class="bbv-qty-price__offer">
              {%- if qty_on_sale -%}
                <span class="visually-hidden">{{ 'content.price_sale' | t }}&nbsp;</span>
              {%- endif -%}
              <span class="bbv-qty-price__now" data-bbv-unit-cents="{{ qty_price }}">{{ qty_price_fmt }}</span>
              <span class="bbv-qty-price__pack">
                {%- if pack_caption != blank %} {{ pack_caption | escape }}{% endif -%}
              </span>
            </span>
            {%- if qty_on_sale -%}
              <span class="bbv-qty-price__sale">
                <span class="visually-hidden">{{ 'content.price_regular' | t }}&nbsp;</span>
                <s class="bbv-qty-price__was">{{ qty_compare_fmt }}</s>
                {%- if qty_discount > 0 -%}
                  <span class="bbv-qty-price__badge">-{{ qty_discount }}%</span>
                {%- endif -%}
              </span>
            {%- endif -%}
          </div>
        </product-price>
      {%- endif -%}
    </div>
    {% render 'quantity-selector',
      product: product,
      use_buttons: true,
      form_id: quantity_form_id,
      input_id: quantity_input_id,
      skip_block_attributes: true
    %}
  </div>
{% else %}
  {% render 'quantity-selector', product: product, use_buttons: true %}
{% endif %}

{% stylesheet %}
  /* Rij-layout hier (block-CSS, in de head), niet in buybox-column-style onderaan
     de body: anders is de stepper eerst display:flex + volle breedte onder het
     label en schuift hij pas naar rechts als die late <style> binnenkomt. */
  .bbv-qty-row {
    --bbv-qty-row-gap-extra: 4px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-block-end: var(--bbv-qty-row-gap-extra);
  }

  .bbv-qty-copy {
    --bbv-qty-label-size: 0.875rem;
    --bbv-qty-now-size: var(--bbv-sum-sum, 1.375rem);
    --bbv-qty-meta-size: 0.8125rem;
    --bbv-qty-badge-size: 0.75rem;
    --bbv-qty-line-gap: 0.5rem;
    --bbv-qty-sale-gap: 6px;
    --bbv-qty-line-offset: 0.3125rem;
    --bbv-qty-meta: rgb(var(--color-foreground-rgb) / 0.55);
    --bbv-qty-was: rgb(var(--color-foreground-rgb) / 0.4);
    --bbv-qty-badge: #d2650f;
    --bbv-qty-badge-bg: #ffefe2;

    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
  }

  .bbv-qty-row .quantity-selector,
  .bbv-qty-row quantity-selector-component {
    --quantity-selector-width: 150px;

    flex: 0 0 var(--quantity-selector-width);
    align-self: center;
    width: var(--quantity-selector-width);
    min-width: var(--quantity-selector-width);
    max-width: 100%;
  }

  .bbv-qty-label {
    font-size: var(--bbv-qty-label-size);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-foreground);
    white-space: nowrap;
  }

  .bbv-qty-price {
    display: block;
    width: auto;
    margin: 0;
    line-height: 1.2;
  }

  .bbv-qty-price__line {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--bbv-qty-line-gap);
    margin-block-start: var(--bbv-qty-line-offset);
    font-size: var(--bbv-qty-meta-size);
    font-weight: 400;
    color: var(--bbv-qty-meta);
  }

  .bbv-qty-price__now {
    font-size: var(--bbv-qty-now-size);
    font-weight: 700;
    color: var(--color-foreground);
  }

  .bbv-qty-price__pack {
    font-weight: 400;
  }

  .bbv-qty-price__sale {
    display: inline-flex;
    align-items: baseline;
    gap: var(--bbv-qty-sale-gap);
  }

  .bbv-qty-price__was {
    text-decoration: line-through;
    color: var(--bbv-qty-was);
  }

  .bbv-qty-price__badge {
    font-size: var(--bbv-qty-badge-size);
    font-weight: 700;
    line-height: 1;
    color: var(--bbv-qty-badge);
    background-color: var(--bbv-qty-badge-bg);
    border-radius: 5px;
    padding: 3px 7px;
  }


/* Meetverzekering-chip + zichtbare prijs-strip (host, niet alleen pdp-dump). */
.mv__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.375rem 0.75rem;
  border: 1px solid #d5ecdd;
  border-radius: 8px;
  background: #f2faf5;
  color: #1a7a43;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
}

.mv__chip:hover {
  border-color: #b9e0c8;
}

.mv__chip--static,
.mv__chip--static:hover {
  border-color: #d5ecdd;
  cursor: default;
}

.mv__icon {
  flex: 0 0 auto;
}

.mv__panel {
  flex: 0 0 100%;
  order: 99;
  padding: 14px 16px;
  border: 1.5px solid #d5ecdd;
  border-radius: 12px;
  background: #f2faf5;
  color: #56606a;
  font-size: 0.8125rem;
  line-height: 1.5;
}

.mv__panel[hidden] {
  display: none;
}

.mv__claim {
  margin: 0 0 4px;
  color: #1a7a43;
  font-weight: 700;
}

.mv__body p {
  margin: 0;
}

.mv__body p + p {
  margin-block-start: 0.5em;
}

.mv__link {
  display: inline-block;
  margin-block-start: 8px;
  color: #1a7a43;
  font-weight: 600;
  text-decoration: underline;
}

.configurator-price-summary__assurance {
  display: block;
  visibility: visible;
  content-visibility: visible;
  border-top: 1px solid #dbeee2;
  background: #f4faf6;
}

.configurator-price-summary__assurance-row,
.configurator-price-summary__assurance-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.625rem;
  padding: 0.6875rem 1.125rem;
  border: 0;
  background: transparent;
  color: #14663f;
  font: inherit;
  text-align: left;
}

.configurator-price-summary__assurance-icon {
  display: flex;
  flex: none;
  align-items: center;
}

.configurator-price-summary__assurance-label {
  flex: 1;
  min-width: 0;
  font-size: 0.8125rem;
  font-weight: 700;
}

/* === component-afwerking.css === */
/* SHO-10264: component CSS, loaded once from the host snippet/section. */
/* ============================================================
   B+ PoC — Afwerking als kaarten (iteratie 1, TIJDELIJK)
   Data komt nu uit snippet 'afwerking-poc-fields' (placeholder);
   later vervangen door echte metaobject-velden.
   ============================================================ */
.variant-option--afwerking-cards {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  gap: 10px !important;
  width: 100%;
}
.variant-picker .variant-option--afwerking-cards .variant-option__button-label {
  position: relative;
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  flex: 0 0 auto !important;
  grid-column: auto !important;
  gap: 8px;
  width: 100% !important;
  max-width: 100%;
  min-width: 0;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  text-align: left;
  padding: 16px 18px;
  border: 1px solid var(--hds-choice-border);
  border-radius: 14px;
  background: var(--hds-choice-bg);
  cursor: pointer;
  text-align: left;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.variant-option--afwerking-cards .variant-option__button-label:hover {
  border-color: var(--hds-choice-hover-border);
}
.variant-option--afwerking-cards .variant-option__button-label:has(input:checked) {
  border-color: var(--hds-choice-sel-accent);
  box-shadow: inset 0 0 0 1px var(--hds-choice-sel-accent);
  background: var(--hds-choice-sel-bg);
}
/* Radio weg: selectie via rand + vinkje (col 1). Niet-geselecteerd = leeg. */
.variant-option--afwerking-cards .variant-option__button-label input[type="radio"] {
  display: none !important;
}
.variant-picker .variant-option--afwerking-cards .variant-option__button-label::before {
  content: none !important;
  display: none !important;
  position: absolute !important;
  left: 18px !important;
  top: 19px !important;
  right: auto !important;
  bottom: auto !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box !important;
  width: 20px !important;
  height: 20px !important;
  border: none !important;
  border-radius: 50%;
  background: transparent;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
/* Alleen de geselecteerde kaart toont een indicator (vinkje); niet-geselecteerd = leeg, geen radio */
.variant-option--afwerking-cards .variant-option__button-label:has(input:checked)::before {
  content: "✓";
  background: var(--hds-choice-sel-accent);
  border-color: var(--hds-choice-sel-accent) !important;
  color: #fff;
}
.variant-option--afwerking-cards .variant-option__button-label__pill { display: none; }
.variant-option--afwerking-cards .variant-option__button-label__text {
  grid-column: 2;
  grid-row: 1;
  justify-self: start;
  text-align: left;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.25;        /* strakker → tagline iets dichter onder de titel */
  color: var(--hds-choice-text);
}
.afwerking-card__tagline {
  display: none; /* tagline verborgen — attribuut-regel staat direct onder de titel */
  margin-top: -6px;
  font-size: 12px;
  color: #333333B3;
}
.afwerking-card__badge {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: end;
  padding: 4px 11px;
  border-radius: 999px;
  background: #ededed;
  color: #555555;
  font-size: 12px;
  white-space: nowrap;
}
.afwerking-card__panel {
  grid-column: 1 / -1;
  min-width: 0;
  display: none;
  white-space: normal;
}
.afwerking-card__panel > * { max-width: 100%; }
/* thema zet white-space:nowrap op het label → forceer normaal binnen de kaart-tekst */
.variant-option--afwerking-cards .afwerking-card__tagline,
.variant-option--afwerking-cards .afwerking-card__panel,
.variant-option--afwerking-cards .afwerking-card__tags,
.variant-option--afwerking-cards .afwerking-card__desc,
.variant-option--afwerking-cards .afwerking-card__suitable {
  white-space: normal !important;
}
.variant-option--afwerking-cards .variant-option__button-label:has(input:checked) .afwerking-card__panel {
  display: block;
}
/* Attribuut-regel — altijd zichtbaar onder de titel; platte tekst met • als scheiding (geen pills) */
.afwerking-card__tags {
  display: block;
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: #555555;
}
.afwerking-card__tag {
  display: inline;
  padding: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  white-space: nowrap;
}
.afwerking-card__tag + .afwerking-card__tag::before {
  content: "•";
  margin: 0 7px;
  color: #c9c9c9;
}
.afwerking-card__desc {
  display: block; /* toont alleen in het paneel → zichtbaar zodra de kaart is uitgeklapt/geselecteerd */
  margin-bottom: 0;
  font-size: 13px;
  line-height: 1.55;
  color: #4a443b;
}
.afwerking-card__suitable {
  display: block;
  font-size: 13px;
  color: #333333B3;
}
.afwerking-card__suitable strong { color: #333333; font-weight: 600; }
/* Geselecteerde kaart toont de uitstraling al als eerste tag in het paneel → rechter badge weg */
.variant-option--afwerking-cards .variant-option__button-label:has(input:checked) .afwerking-card__badge {
  display: none;
}
/* prijs-strikethrough niet tonen binnen afwerking-kaart (prijs hangt aan inhoud) */
.variant-option--afwerking-cards .variant-option__button-label [class*="strikethrough"] {
  display: none;
}
/* Ruimte-filter: respecteer de hidden/filtered-states van variant-picker.js.
   Onze display:grid !important op het label moet wijken voor het filter — daarom
   een hogere-specificiteit-regel die de gefilterde kaarten écht verbergt. */
.variant-picker .variant-option--afwerking-cards .variant-option__button-label.variant-option--hidden-by-liquid,
.variant-picker .variant-option--afwerking-cards .variant-option__button-label.variant-option--filtered-out,
.variant-picker .variant-option--afwerking-cards .variant-option__button-label.afw-ruimte-hidden {
  display: none !important;
}

/* ---- Lange afwerking-lijst inklappen (eerste 3 + "Bekijk alle …") ---- */
/* Overflow-kaarten verborgen tot uitgeklapt; hogere specificiteit dan het label-display. */
.variant-picker .variant-option--afwerking-cards .variant-option__button-label.afw-collapsed-overflow {
  display: none !important;
}
.afw-show-all {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: space-between;   /* tekst links, chevron rechts */
  gap: 6px;
  margin: 0;
  padding: 14px 18px;               /* gelijk aan de kaart-padding */
  background: transparent;
  border: 1px solid var(--hds-choice-border);
  border-radius: 14px;
  font: inherit;
  font-size: 15px;                  /* gelijk aan de afwerking-kaarttitel */
  font-weight: 600;
  text-align: left;
  color: var(--hds-choice-text);
  cursor: pointer;
  transition: border-color .15s ease;
}
.afw-show-all[hidden] { display: none !important; }
.afw-show-all:hover { border-color: var(--hds-choice-hover-border); }
.afw-show-all__chevron {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  transition: transform .15s ease;
}
.afw-show-all[aria-expanded="true"] .afw-show-all__chevron { transform: rotate(180deg); }

/* ---- Gelijk verticaal ritme boven de PDP-stappen ----
   Geschikte ruimte / Afwerking / Inhoud / Toebehoren krijgen ~20px ruimte erboven.
   Toebehoren stond te ver (40px), de variant-stappen juist te dicht (12–16px). */
paint-application-filter { margin-top: 8px !important; }                                  /* 12 → 20 */
.variant-picker .variant-option--afwerking-cards { margin-top: 8px !important; }          /* 12 → 20 */
.variant-picker .variant-option[data-option-name="Inhoud"] { margin-top: 20px !important; } /* 16 → 20 */
/* Toebehoren stuurt zijn eigen ruimte via de blok-padding in het template: het staat nu
   in een rij met behangplan en cadeaus, en die moeten onderling gelijk staan. */

/* ---- Genummerde stap-koppen (1 · GESCHIKTE RUIMTE / 2 · AFWERKING / 3 · INHOUD) ---- */
.variant-option__legend-row--stepped {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin-bottom: 10px;
}
.variant-option__legend-row--stepped .variant-option__legend-label {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
}
/* Geen stapnummers, geen hoofdletters: erf de standaard thema-titelstijl (kleur + font-weight:700 van de legend) */
.vp-step-num { display: none; }
.afwerking-count {
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  font-weight: 400;
  color: var(--hds-choice-muted);
  white-space: nowrap;
}

/* ---- Geschikte ruimte: B+ pill-vorm, auto-breedte, wrappend ---- */
.paint-application-filter .variant-option--buttons {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
  grid-template-columns: none !important;
}
.paint-application-filter .variant-option__button-label {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  max-width: none !important;
  min-height: 3.25em !important;        /* gelijk aan de Inhoud-knoppen (thema-default) */
  height: auto !important;
  padding: var(--padding-xs) var(--variant-option-padding-inline) !important;
  border: 1px solid var(--hds-choice-border);
  border-radius: var(--options-border-radius);
  background: var(--hds-choice-bg);
  line-height: 1.2;                     /* font-size erft van thema → gelijk aan Inhoud */
  color: var(--hds-choice-text);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.paint-application-filter .variant-option__button-label:hover {
  border-color: var(--hds-choice-hover-border);
}
.paint-application-filter .variant-option__button-label:has(input:checked) {
  background: var(--hds-choice-sel-bg);
  border-color: var(--hds-choice-sel-accent);
  box-shadow: inset 0 0 0 1px var(--hds-choice-sel-accent);
  color: var(--hds-choice-sel-accent);
}
.paint-application-filter .variant-option__button-label__pill { display: none; }
.paint-application-filter .variant-option__button-label input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ---- Inhoud-selectie: zelfde subtiele vulling + rand als afwerking-kaart ---- */
body:has(.variant-option--afwerking-cards) .variant-picker .variant-option[data-option-name="Inhoud"] .variant-option__button-label:has(input:checked) {
  background: var(--hds-choice-sel-bg) !important;
  border-color: var(--hds-choice-sel-accent) !important;
  box-shadow: inset 0 0 0 1px var(--hds-choice-sel-accent);
  color: var(--hds-choice-sel-accent) !important;
}
/* Inhoud rendert als één schone kaart-rand (zoals afwerking): verberg de thema-pill én de
   ::before/::after fake-borders, zodat alléén de label-rand telt — geen dubbele/rare rand */
body:has(.variant-option--afwerking-cards) .variant-picker .variant-option[data-option-name="Inhoud"] .variant-option__button-label__pill { display: none !important; }
body:has(.variant-option--afwerking-cards) .variant-picker .variant-option[data-option-name="Inhoud"] .variant-option__button-label::before,
body:has(.variant-option--afwerking-cards) .variant-picker .variant-option[data-option-name="Inhoud"] .variant-option__button-label::after { display: none !important; }
/* Niet-leverbare inhouden volledig verbergen i.p.v. doorgestreept tonen */
body:has(.variant-option--afwerking-cards) .variant-picker .variant-option[data-option-name="Inhoud"] .variant-option__button-label:has(input[data-option-available="false"]) {
  display: none !important;
}
/* Inhoud uitlijnen zoals Geschikte ruimte: content-breedte pillen (flex-wrap, links gepakt)
   i.p.v. het equal-width grid. Overschrijft .variant-option--equal-width-buttons. */
body:has(.variant-option--afwerking-cards) .variant-picker .variant-option[data-option-name="Inhoud"] {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
  grid-template-columns: none !important;
}
body:has(.variant-option--afwerking-cards) .variant-picker .variant-option[data-option-name="Inhoud"] .variant-option__button-label {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: fit-content !important;
}

/* ---- Prijs/cart-gate voor de verf-PDP ----
   Staat wordt door afwerking-selection.js bijgehouden op <body>:
   • .verf-incomplete    — geen afwerking ÓF geen inhoud gekozen (o.a. na een
                           ruimte-switch) → prijs weg + cart op slot.
   • .verf-price-pending — er loopt een variant-fetch; prijs even verborgen zodat je
                           niet de oude→nieuwe waarde ziet flippen (cart blijft actief).
   De :has()-regels eronder zijn een no-JS fallback voor de afwerking-gate. */
body:has(.variant-option--afwerking-cards):not(:has(.variant-option--afwerking-cards input:checked)) .product-information product-price,
body:has(.variant-option--afwerking-cards):not(:has(.variant-option--afwerking-cards input:checked)) .sticky-add-to-cart__price,
body.verf-incomplete .product-information product-price,
body.verf-incomplete .sticky-add-to-cart__price,
body.verf-price-pending .product-information product-price,
body.verf-price-pending .sticky-add-to-cart__price {
  visibility: hidden;
}

/* Cart blokkeren zolang de selectie incompleet is (niet tijdens een prijs-refresh).
   Geldt voor de hoofd-ATC, de verf-calculator-knop en de sticky balk. 'Gratis staal' blijft. */
body:has(.variant-option--afwerking-cards):not(:has(.variant-option--afwerking-cards input:checked)) button[name="add"],
body:has(.variant-option--afwerking-cards):not(:has(.variant-option--afwerking-cards input:checked)) .hds-calculator__button--primary,
body:has(.variant-option--afwerking-cards):not(:has(.variant-option--afwerking-cards input:checked)) .sticky-add-to-cart__cta-row button,
body.verf-incomplete button[name="add"],
body.verf-incomplete .hds-calculator__button--primary,
body.verf-incomplete .sticky-add-to-cart__cta-row button {
  pointer-events: none;
  opacity: 0.45;
  cursor: not-allowed;
}

/* (Teaser én scheidingslijn zijn nu uniform voor verf + configurator-PDP's geregeld in
   het buybox-blok verderop: teaser → pill, lijn → border-top op de "configureer"-zone
   die start bij de verf-filter of de variant-picker. Zie SHO-8247.) */

/* Alleen de verplaatste legend-link blijft een tekstlink. De standalone
   instapkaart (zelfde vorm als behangplan) mag hier niet platgeslagen worden. */
body:has(.variant-option--afwerking-cards) .hds-calculator__trigger--inline {
  display: inline;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  color: var(--color-primary);
  font: inherit;
  font-weight: 400;
  text-decoration-line: underline;
  text-decoration-color: currentColor;
  text-underline-offset: 0.125em;
}
body:has(.variant-option--afwerking-cards) .hds-calculator__trigger--inline:hover {
  background: none;
  color: var(--color-primary-hover);
  text-decoration-color: transparent;
}

/* === component-volume-pricing.css === */
.volume-pricing-info {
    display: inline-flex;
  }

  .volume-pricing-info__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    color: var(--color-foreground-secondary);
    cursor: pointer;
    transition: color var(--animation-speed) var(--animation-easing);
    flex-shrink: 0;
  }

  .volume-pricing-info__button:hover {
    color: var(--color-foreground);
  }

  .volume-pricing-info__button .svg-wrapper {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  .volume-pricing-info__button--with-label {
    width: auto;
    gap: var(--gap-sm);
  }

  .volume-pricing-info__popover {
    --volume-pricing-popover-max-width: 320px;
    --volume-pricing-popover-spacing: 8px;
    --volume-pricing-popover-viewport-margin: 16px;

    min-inline-size: 280px;
    max-inline-size: var(--volume-pricing-popover-max-width);
    background: var(--color-background);
    border: var(--style-border-popover);
    border-radius: var(--style-border-radius-popover, 0);
    box-shadow: var(--shadow-popover);
    overflow: hidden;
    padding: 0;
    margin: 0;
    transition-property: display, opacity, translate;
    transition-duration: 0.3s;
    transition-timing-function: var(--ease-out-quad);
    transition-behavior: allow-discrete;
    translate: 0 20px;
    opacity: 0;
  }

  /* Native anchor positioning for supported browsers */
  .volume-pricing-info__popover {
    inset: unset;
    top: calc(anchor(bottom) + var(--volume-pricing-popover-spacing));
    left: anchor(left);
  }

  @supports (position-try-fallbacks: --top-left) {
    .volume-pricing-info__popover {
      position-try-fallbacks: --top-left;
    }

    @position-try --top-left {
      top: calc(anchor(top) - var(--volume-pricing-popover-spacing));
      bottom: auto;
      transform: translateY(-100%);
    }
  }

  /* Fallback positioning using custom properties */
  @supports not (position-anchor: --volume-pricing-trigger) {
    .volume-pricing-info__popover {
      position: fixed;
      top: calc(var(--anchor-bottom) * 1px + var(--volume-pricing-popover-spacing));
      left: max(
        var(--volume-pricing-popover-viewport-margin),
        min(
          var(--anchor-left) * 1px,
          100vw - var(--volume-pricing-popover-max-width) - var(--volume-pricing-popover-viewport-margin)
        )
      );
    }
  }

  .volume-pricing-info__popover:popover-open {
    translate: 0 0;
    opacity: 1;
  }

  @starting-style {
    .volume-pricing-info__popover:popover-open {
      translate: 0 20px;
      opacity: 0;
    }
  }

  .volume-pricing-info__rules {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
    padding: var(--padding-md);
    font-size: var(--font-size--xs);
  }

  .volume-pricing-info__rules,
  .volume-pricing-info__rules > span {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .volume-pricing-info__table {
    display: flex;
    flex-direction: column;
  }

  .volume-pricing-info__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--padding-sm) var(--padding-md);
    font-size: var(--font-size--sm);
    background: var(--color-background);
    border-inline-start: 3px solid transparent;
    transition: border-color var(--animation-speed) var(--animation-easing);
  }

  .volume-pricing-info__row:nth-child(odd) {
    background: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .volume-pricing-info__row--active {
    border-inline-start-color: var(--color-foreground);
    font-weight: var(--font-weight-medium);
  }

  .volume-pricing-info__quantity {
    color: var(--color-foreground);
  }

  .volume-pricing-info__price {
    display: flex;
    align-items: center;
    color: var(--color-foreground);
  }

  .volume-pricing-info__checkmark {
    display: none;
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    color: var(--color-primary);
  }

  .volume-pricing-info__row--active .volume-pricing-info__checkmark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }