@view-transition { navigation: auto; }

.configurator {
    --configurator-blue: #0056b8;
    --configurator-line: #e1e4e8;
    --configurator-header: 6rem;
    --configurator-footer: 5.5rem;
    background: #f5f5f5;
}

.configurator-header { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2.5rem); padding: 1.25rem 2rem; height: var(--configurator-header); background: #fff; border-bottom: 1px solid var(--configurator-line); }
.configurator-logo { flex: 0 0 10rem; }
.configurator-logo img { width: 100%; max-height: 3rem; object-fit: contain; }
.configurator-steps { display: flex; gap: 1.5rem; overflow-x: auto; flex: 1; scrollbar-width: thin; }
.configurator-steps.has-more-left { --configurator-fade-left: 3rem; }
.configurator-steps.has-more-right { --configurator-fade-right: 3rem; }
.configurator-steps:is(.has-more-left, .has-more-right) { mask-image: linear-gradient(to right, transparent, #000 var(--configurator-fade-left, 0px), #000 calc(100% - var(--configurator-fade-right, 0px)), transparent); }
.configurator-steps-mobile { display: none; }
.configurator-consulting { flex: 0 0 auto; }
.configurator-step { display: grid; justify-items: center; gap: .35rem; white-space: nowrap; font-size: .8rem; padding-block: .3rem; color: inherit; text-decoration: none; }
.configurator-step:hover { color: var(--configurator-blue); text-decoration: none; }
.configurator-step:focus-visible { outline: 2px solid var(--configurator-blue); outline-offset: -2px; }
.configurator-step-marker { display: grid; place-items: center; border-radius: 50%; width: 1.2rem; height: 1.2rem; background: #eef0f2; color: #8a9199; }
.configurator-step-marker > span, .configurator-selected-marker > span { display: flex; width: .65rem; height: .65rem; color: inherit; }
.configurator-step-marker svg, .configurator-selected-marker svg { width: 100%; height: 100%; top: 0; }
.configurator-step-marker path, .configurator-selected-marker path { fill: currentColor; }
.configurator-step.is-complete .configurator-step-marker { background: var(--configurator-blue); color: #fff; }
.configurator-step.is-current { color: var(--configurator-blue); font-weight: 700; }
.configurator-close.btn-close { display: grid; place-items: center; color: var(--bs-btn-close-color); text-decoration: none; background: rgba(0, 0, 0, .06); border-radius: 100%; width: 2rem; height: 2rem; padding: 0; flex: 0 0 auto; opacity: 1; }
.configurator-close > span { display: flex; width: 20px; height: 20px; color: inherit; }
.configurator-close > span > svg { top: 0; }

.configurator-main { display: grid; grid-template-columns: minmax(0, 2fr) minmax(28rem, 1fr); height: calc(100svh - var(--configurator-header)); padding-bottom: var(--configurator-footer-height, var(--configurator-footer)); }
.configurator-stage { position: relative; grid-area: 1 / 1; display: grid; grid-template-rows: minmax(0, 1fr); place-items: center; min-height: 0; padding: 3rem; overflow: hidden; view-transition-name: configurator-preview; }
.configurator-poster { display: grid; place-items: center; width: 100%; height: 100%; min-height: 0; }
.configurator-stage.has-model .configurator-poster { visibility: hidden; }
.configurator-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.configurator-stage [hidden] { display: none !important; }
.configurator-viewer-controls { position: absolute; inset: auto 1.5rem 1.5rem; display: flex; justify-content: space-between; pointer-events: none; }
.configurator-viewer-controls button { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 1px solid var(--configurator-line); border-radius: .35rem; background: #fff; pointer-events: auto; }
.configurator-viewer-controls img { width: 1.25rem; height: 1.25rem; }
.configurator-model-loading { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; padding: 1.5rem; background: #14243b1f; pointer-events: none; }
.configurator-model-loading-panel, .configurator-navigation-loading-panel { display: grid; justify-items: center; gap: 1rem; max-width: 100%; padding: 1.5rem 2rem; border: 1px solid var(--configurator-line); border-radius: .75rem; background: #fff; box-shadow: 0 .5rem 2rem #14243b26; color: #111; font-size: 1rem; font-weight: 600; text-align: center; }
.configurator-model-loading .spinner-border, .configurator-navigation-loading .spinner-border { width: 2.5rem; height: 2.5rem; color: var(--configurator-blue); }
.configurator-stage:fullscreen { width: 100vw; height: 100dvh; background: #f5f5f5; }
.configurator-transition { view-transition-name: none; }
.configurator-transition .configurator-stage, .configurator-transition .configurator-footer { view-transition-name: none; }
.configurator-transition .configurator-panel { view-transition-name: var(--configurator-panel-name, configurator-panel); }
.configurator-transition::view-transition { pointer-events: none; clip-path: inset(0 0 var(--configurator-transition-bottom, 0px)); }
.configurator-transition[data-configurator-direction='forward'] { --configurator-slide-start: 100%; --configurator-slide-end: -100%; }
.configurator-transition[data-configurator-direction='backward'] { --configurator-slide-start: -100%; --configurator-slide-end: 100%; }
.configurator-transition[data-configurator-direction]::view-transition-group(*) { overflow: hidden; animation-duration: .32s; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
.configurator-transition[data-configurator-direction]::view-transition-old(*), .configurator-transition[data-configurator-direction]::view-transition-new(*) { animation-duration: inherit; animation-timing-function: inherit; animation-fill-mode: both; mix-blend-mode: normal; }
.configurator-transition[data-configurator-direction]::view-transition-old(*) { animation-name: configurator-panel-leave; }
.configurator-transition[data-configurator-direction]::view-transition-new(*) { animation-name: configurator-panel-enter; }
@keyframes configurator-panel-leave {
    from { transform: translateX(0); }
    to { transform: translateX(var(--configurator-slide-end)); }
}
@keyframes configurator-panel-enter {
    from { transform: translateX(var(--configurator-slide-start)); }
    to { transform: translateX(0); }
}
.configurator-preview { width: 100%; height: 100%; min-height: 0; max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.configurator-stage-intro { color: #6b737d; text-align: center; }
.configurator-stage-intro > span { display: block; width: 4rem; margin: 0 auto 1.5rem; }
.configurator-panel { grid-area: 1 / 2; background: #fff; padding: 1.5rem; margin: 1.5rem 1.5rem 0 0; border-radius: .75rem .75rem 0 0; min-width: 0; overflow-y: auto; overscroll-behavior: contain; }
.configurator-navigation-loading { grid-area: 1 / 2; z-index: 20; display: grid; place-items: center; min-height: 0; min-width: 0; padding: 1.5rem; margin: 1.5rem 1.5rem 0 0; border-radius: .75rem .75rem 0 0; background: #ffffffb3; cursor: progress; }
.configurator-navigation-loading[hidden] { display: none; }
.configurator-step-navigation { display: flex; flex: 0 0 auto; justify-content: flex-end; gap: .5rem; }
.configurator-step-arrow { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--configurator-line); border-radius: .35rem; background: #fff; color: #111; font-size: 1.5rem; line-height: 1; text-decoration: none; }
.configurator-step-arrow img { width: 1rem; height: auto; }
.configurator-step-arrow:hover { color: var(--configurator-blue); border-color: var(--configurator-blue); }
.configurator-step-arrow:disabled { opacity: .3; }
.configurator-step-arrow:focus-visible { outline: 2px solid var(--configurator-blue); outline-offset: 2px; }
.configurator-panel-header { display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between; margin-bottom: 2rem; }
.configurator-panel-header > div { display: grid; gap: .5rem; min-width: 0; }
.configurator-panel-header h1 { font-size: 1.5rem; font-weight: 500; margin: 0; }
.configurator-panel-header > div > span { font-size: .8rem; }
.configurator-header-actions { display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; }
.configurator-save { position: relative; z-index: 40; font-size: .8rem; }
.configurator-save-button { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0; border: 0; border-radius: .25rem; color: #111; background: transparent; cursor: pointer; }
.configurator-save-button[hidden] { display: none; }
.configurator-save-button:focus-visible { outline: 2px solid var(--configurator-blue); outline-offset: 2px; }
.configurator-save-button[aria-expanded='true'] { background: #f2f2f2; }
.configurator-share { position: relative; z-index: 40; flex: 0 0 auto; font-size: .8rem; }
.configurator-share > summary { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: .25rem; color: #111; cursor: pointer; list-style: none; }
.configurator-share > summary::-webkit-details-marker { display: none; }
.configurator-share > summary .icon { width: 1.25rem; height: 1.25rem; color: inherit; }
.configurator-share > summary .icon > svg { top: 0; }
.configurator-share[open] > summary { background: #f2f2f2; color: var(--configurator-blue); }
.configurator-share > summary:focus-visible { outline: 2px solid var(--configurator-blue); outline-offset: 2px; }
.configurator-share-popup { position: absolute; top: calc(100% + .5rem); right: 0; width: min(26rem, calc(100vw - 2.5rem)); padding: 1rem; border: 1px solid var(--configurator-line); border-radius: .5rem; background: #fff; box-shadow: 0 .25rem 1rem #0002; }
.configurator-save .configurator-share-popup { width: min(20rem, calc(100vw - 2.5rem)); }
.configurator-share-title { margin: 0 0 .75rem; font-size: .9rem; font-weight: 600; }
.configurator-share-controls { display: flex; gap: .5rem; margin-top: .5rem; }
.configurator-share-controls input { flex: 1; min-width: 0; font-size: .8rem; }
.configurator-share-controls .btn { flex-shrink: 0; font-size: .8rem; }
.configurator-share-status { margin: .5rem 0 0; }
.configurator-share-status:empty { display: none; }

.configurator-product { position: relative; display: grid; grid-template-columns: 4rem minmax(0, 1fr) max-content; grid-template-areas: 'image title price' 'image controls details'; align-items: center; gap: 1.25rem 1rem; padding: 1.5rem; border: 1px solid var(--configurator-line); border-radius: .5rem; margin-bottom: 1.5rem; background: #fff; }
.configurator-product.is-selected { border-color: var(--configurator-blue); }
.configurator-product.is-incompatible { background: #fafafa; }
.configurator-product-image { grid-area: image; width: 4rem; height: 4.5rem; object-fit: contain; }
.configurator-product h2, .configurator-summary-product h2 { margin: 0; font-size: 1rem; line-height: 1.35; font-weight: 700; }
.configurator-product h2 { grid-area: title; }
.configurator-product-price { grid-area: price; display: grid; gap: .2rem; align-self: start; white-space: nowrap; }
.configurator-product-price strong { font-size: 1.25rem; line-height: 1.25; }
.configurator-product-price small { font-size: .7rem; line-height: 1.25; font-weight: 400; }
.configurator-product-form { display: contents; }
.configurator-product-select { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; border: 0; border-radius: inherit; padding: 0; background: transparent; cursor: pointer; }
.configurator-product-select:focus-visible { outline: 2px solid var(--configurator-blue); outline-offset: 3px; }
.configurator-product-select:disabled { cursor: default; }
.configurator-product-controls { grid-area: controls; position: relative; z-index: 2; display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; }
.configurator-owned { margin: 0; }
.configurator-quantity { display: flex; align-items: center; gap: .4rem; margin: 0; font-size: .75rem; line-height: 1.35; }
.configurator-quantity input { width: 3.5rem; padding: .15rem .3rem; min-height: 1.75rem; font-size: .8rem; }
.configurator-product-details { grid-area: details; position: relative; z-index: 2; justify-self: end; color: var(--configurator-blue); font-size: .85rem; font-weight: 600; text-decoration: none; }
.configurator a.configurator-product-details { text-decoration: none; }
.configurator a.configurator-product-details:is(:hover, :focus) { text-decoration: underline; }
.configurator-selected-marker { position: absolute; top: 0; right: 0; z-index: 3; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--configurator-blue); border: 2px solid #fff; color: #fff; transform: translate(25%, -40%); pointer-events: none; }
.configurator-selected-marker > span { width: .75rem; height: .75rem; }
.configurator-product > .configurator-conflict { grid-column: 1 / -1; }
.configurator-conflict { margin: 0; padding: .65rem; background: #fff0ef; color: #a72835; font-size: .8rem; border-radius: .25rem; }
.configurator-conflict-list { margin: .35rem 0 0; padding-inline-start: 1.25rem; }

.configurator .cms-element-product-listing .cms-listing-row { grid-template-columns: repeat(auto-fit, minmax(min(310px, 100%), max-content)); justify-content: center; max-width: calc(6 * 340px + 5 * 1rem); margin-inline: auto; }
.configurator .cms-element-product-listing .cms-listing-col { width: 100%; max-width: 340px; }
.configurator-listing-product { position: relative; min-width: 0; height: 100%; }
.configurator-listing-product > .configurator-selected-marker { transform: translateY(-40%); }
.configurator-listing-product .product-box { height: 100%; }
.configurator-listing-product.is-selected .product-box { border-color: var(--configurator-blue); }
.configurator-listing-product.is-incompatible .product-box { background: #fafafa; }
.configurator-listing-product .card-body { grid-template-rows: auto 1fr; }
.configurator-listing-product .product-info-grid { display: flex; flex-direction: column; justify-content: space-between; }
.configurator-listing-product .product-name { grid-area: auto; justify-self: stretch; position: static; z-index: auto; color: inherit; font-size: 1rem; text-align: left; text-decoration: none; }
.configurator-listing-product .product-actions { flex-wrap: wrap; }
.configurator-listing-product .product-price-info { flex: 1; min-width: 0; }
.configurator-listing-product .configurator-conflict { flex-basis: 100%; }
.configurator-listing-form .configurator-product-controls { grid-area: auto; flex-basis: 100%; justify-content: space-between; }
.configurator-listing-product .configurator-listing-select { --bs-btn-bg: #fff; --bs-btn-border-color: #000; --bs-btn-hover-bg: #f6f6f6; --bs-btn-hover-border-color: #000; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 3.25rem; width: 3.25rem; height: 2.25rem; padding: 0; }
.configurator-listing-select .sauter-icon { display: inline-flex; width: 1.25rem; height: 1.25rem; }
.configurator-listing-select svg { width: 100%; height: 100%; }

.configurator-summary-product { display: grid; grid-template-columns: 4rem minmax(0, 1fr) max-content 1.5rem; grid-template-areas: 'image description price remove'; align-items: center; gap: 1rem; padding: 1.5rem; border: 1px solid var(--configurator-line); border-radius: .5rem; margin-bottom: 1rem; }
.configurator-summary-description { grid-area: description; display: grid; gap: .5rem; font-size: .8rem; }
.configurator-summary-product .configurator-product-price { align-self: center; }
.configurator-product-sku, .configurator-delivery { font-size: .75rem; margin: 0; }
.configurator-summary-product > form { grid-area: remove; }
.configurator-remove { display: grid; place-items: center; border: 0; padding: 0; color: #000; background: none; }
.configurator-remove > span { display: flex; color: inherit; }

.configurator-footer { position: fixed; inset: auto 0 0; z-index: 30; display: flex; align-items: center; gap: 1.5rem; min-height: var(--configurator-footer); padding: 1rem 2rem max(1rem, env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--configurator-line); view-transition-name: configurator-footer; }
.configurator-footer-title { margin-right: auto; font-size: 1.15rem; }
.configurator-benefit { display: flex; align-items: center; gap: .6rem; min-width: 0; padding: .85rem 1rem; border: 1px solid #a6efbf; border-radius: .5rem; background: #dcfce7; color: #111; font-size: .85rem; }
.configurator-benefit .icon { flex: 0 0 1.1rem; width: 1.1rem; height: 1.1rem; color: inherit; }
.configurator-benefit .icon > svg { top: 0; }
.configurator-benefit strong { white-space: nowrap; }
.configurator-footer-price { display: flex; align-items: baseline; flex-wrap: wrap; justify-content: flex-end; gap: .15rem .65rem; }
.configurator-footer-amount { display: flex; align-items: center; gap: .5rem; white-space: nowrap; }
.configurator-footer-amount > strong { font-size: 1.4rem; line-height: 1.3; }
.configurator-footer-price > small { font-size: .75rem; }
.configurator-price-loading { display: inline-flex; color: var(--configurator-blue); }
.configurator-price-loading[hidden] { display: none; }
.configurator-actions { display: flex; flex: 0 0 auto; gap: .75rem; }
.configurator-actions .btn { min-width: 14rem; border-radius: .4rem; }
.configurator-actions .configurator-back { min-width: 6rem; }
.configurator-empty { padding: 3rem; }
.configurator-main.is-summary { grid-template-columns: minmax(0, 1fr) minmax(28rem, 1fr); }
.configurator-main.is-product-grid { grid-template-columns: minmax(0, 1fr); }
.is-product-grid .configurator-stage { display: none; }
.is-product-grid .configurator-panel, .is-product-grid .configurator-navigation-loading { grid-area: 1 / 1; margin-inline: 1.5rem; }

@media (min-width: 992px) and (max-width: 1399px) {
    .configurator-footer-title { display: none; }
    .configurator-footer { gap: 1rem; padding-inline: 1.5rem; }
    .configurator-footer-price { flex-direction: column; align-items: flex-start; margin-left: auto; }
}

@media (max-width: 991px) {
    .configurator { --configurator-header: 3.25rem; --configurator-footer: 5rem; }
    .configurator-header { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; padding: .4rem 1rem; gap: .75rem; }
    .configurator-logo { grid-column: 2; width: 9rem; }
    .configurator-close { grid-column: 3; justify-self: end; }
    .configurator-header .configurator-header-actions { position: absolute; top: calc(100% + .5rem); right: 1.25rem; z-index: 40; gap: 0; }
    .configurator-header-actions .configurator-share, .configurator-header-actions .configurator-save { position: static; }
    .configurator-header.has-no-preview .configurator-header-actions { position: relative; top: auto; right: auto; grid-column: 1; grid-row: 1; justify-self: start; }
    .configurator-header.has-no-preview .configurator-share-popup { left: 0; right: auto; }
    .configurator-steps-desktop { display: none; }
    .configurator-consulting { display: none; }
    .configurator-steps-mobile { display: flex; min-height: 4rem; padding: .6rem 1.25rem 0; background: #fff; border-bottom: 1px solid var(--configurator-line); }
    .configurator-main, .configurator-main.is-summary { display: block; height: auto; min-height: calc(100svh - var(--configurator-header)); padding-bottom: var(--configurator-footer-height, calc(var(--configurator-footer) + env(safe-area-inset-bottom) + 3rem)); }
    .configurator-stage { min-height: 18rem; height: 38svh; padding: 1.5rem; }
    .configurator-preview { max-height: 100%; }
    .configurator-panel { margin: 0; padding: 1.25rem; border-radius: 0; overflow: visible; }
    .configurator-navigation-loading { position: fixed; inset: calc(var(--configurator-header) + 1rem) 1rem auto; z-index: 50; width: fit-content; padding: 0; margin: 0 auto; border-radius: .75rem; }
    .configurator-navigation-loading-panel { display: flex; align-items: center; gap: .75rem; padding: 1rem; }
    .configurator-navigation-loading .spinner-border { width: 1.5rem; height: 1.5rem; flex: 0 0 auto; }
    .configurator-step-arrow { width: 2.5rem; height: 2.5rem; }
    .configurator-panel-header { margin-bottom: 1.5rem; }
    .configurator-product { grid-template-areas: 'image title title' 'image price details' 'image controls controls'; gap: .4rem .75rem; padding: .65rem .8rem; margin-bottom: .9rem; }
    .configurator-product-price { align-self: center; }
    .configurator-product-price strong { font-size: 1.15rem; }
    .configurator-product-details { align-self: end; }
    .configurator-summary-product { grid-template-columns: 4rem minmax(0, 1fr) 1.5rem; grid-template-areas: 'image description description' 'image price remove'; gap: .75rem; padding: 1rem; }
    .is-summary .configurator-stage, .is-summary .configurator-steps-mobile { display: none; }
    .is-product-grid .configurator-panel { margin: 0; padding-inline: clamp(0px, calc((100vw - 310px) / 2), 1.25rem); }
    .is-product-grid .configurator-navigation-loading { margin-inline: auto; }
    .configurator-footer { padding-inline: 1.25rem; gap: .75rem; }
    .configurator-footer-title { display: none; }
    .configurator-benefit { position: absolute; inset: auto 1.25rem calc(100% - .5rem); width: fit-content; max-width: calc(100% - 2.5rem); margin-inline: auto; padding: .4rem .65rem; gap: .45rem; font-size: .72rem; }
    .configurator-footer-price { flex: 1; flex-direction: column; align-items: flex-start; margin: 0; gap: .15rem; }
    .configurator-footer-amount > strong { font-size: clamp(1rem, 5.5vw, 1.4rem); }
    .configurator-footer-price > small { font-size: .75rem; }
    .configurator-actions { flex: 0 1 auto; }
    .configurator-actions .btn { width: min(12.5rem, 52vw); min-width: 0; padding-inline: .75rem; white-space: normal; }
    .configurator-actions .configurator-back { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*) { animation-duration: 0s; }
    .configurator-price-loading .spinner-border, .configurator-model-loading .spinner-border, .configurator-navigation-loading .spinner-border { animation: none; }
}
.configurator-totals { width: min(100%, 22rem); margin: 2rem 0 1rem auto; }
.configurator-totals > div { display: grid; grid-template-columns: minmax(0, 1fr) max-content; gap: 1rem; padding-block: .4rem; }
.configurator-totals dt { font-weight: 400; }
.configurator-totals dd { margin: 0; white-space: nowrap; text-align: right; }
.configurator-totals .configurator-total { display: block; margin-top: 1.5rem; padding: 0; }
.configurator-total dd { display: grid; justify-items: end; gap: .25rem; }
.configurator-total strong { font-size: 1.5rem; line-height: 1.25; }
.configurator-total small { font-size: .8rem; font-weight: 400; }
.configurator-actions form { margin: 0; }