/** Shopify CDN: Minification failed

Line 335:0 Expected "*/" to terminate multi-line comment

**/
/* SHO-10264: component CSS, loaded once from the host snippet/section. */
/* ============================================================
   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;
}

/* ============================================================
   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.