.payment-methods--logos>div{display:flex;align-items:center;flex-wrap:nowrap;min-width:0;max-width:100%;overflow:hidden}.payment-methods--logos>div img{width:37px;height:24px;margin-right:4px;flex-shrink:1;min-width:0;max-width:100%}.payment-methods--logos-count{width:38px;height:24px;background-color:rgba(117,117,117,.1);color:var(--wp--preset--color--contrast, #1e1e1e);text-align:center;line-height:24px;box-shadow:0 0 0 1px rgba(0,0,0,.1);border-radius:4.6875%/7.5%;font-size:11px;font-weight:600;white-space:nowrap;flex-shrink:1;text-overflow:ellipsis;overflow:hidden}.logo-popover{background-color:#fff;border:1px solid #ddd;border-radius:3px;padding:8px;box-sizing:border-box;box-shadow:0 0 10px 0 rgba(0,0,0,.1);display:grid;gap:8px;justify-content:center;cursor:pointer;width:fit-content}.logo-popover>img{width:38px;height:24px;box-shadow:0 0 0 1px rgba(0,0,0,.1);border-radius:4.6875%/7.5%}.payment-methods--logos-popover>img{object-position:center !important;object-fit:cover !important}
.wc-block-components-express-payment-continue-rule--cart{margin:24px 0 !important;height:20px}.wp-block-woocommerce-cart-express-payment-block,.wp-block-woocommerce-checkout-express-payment-block{overflow:visible !important}.wc-block-components-express-payment .wc-block-components-express-payment__content{overflow:visible !important}.wc-block-components-express-payment .wc-block-components-express-payment__event-buttons{overflow:visible !important;padding:0 4px}.wc-block-components-express-payment .wc-block-components-express-payment__event-buttons>li{overflow:visible !important}@supports not (-webkit-appearance: -apple-pay-button){#express-payment-method-woocommerce_payments_express_checkout_applePay:has(#express-checkout-button-preview-applePay){display:none}}#express-checkout-button-preview-googlePay .gpay-card-info-container{min-width:auto}
#payment .payment_method_woocommerce_payments .woocommerce-error{margin:1rem 0}.js-woopayments-copy-test-number{line-height:1.2em;vertical-align:middle;border-radius:0;border:none !important;background-color:transparent !important;font-weight:normal;display:inline-flex;cursor:pointer;color:inherit !important;font-family:inherit !important;font-size:inherit;padding:2px 1px !important;align-items:center;box-shadow:none !important}.js-woopayments-copy-test-number span{margin-right:4px}.js-woopayments-copy-test-number i{order:1;display:block;width:1.2em;height:1.2em;mask-image:url(//fdm-3d-druck.de/wp-content/plugins/woocommerce-payments/assets/images/icons/copy.svg?ver=14a3a00de64a8c0c151c);mask-size:contain;mask-repeat:no-repeat;mask-position:center;background-color:currentColor}.js-woopayments-copy-test-number:hover{background-color:transparent;opacity:.7}.js-woopayments-copy-test-number:hover i{opacity:.7}.js-woopayments-copy-test-number:active i{transform:scale(0.9)}.js-woopayments-copy-test-number:focus{outline:none}.js-woopayments-copy-test-number.state--success i{mask-image:url(//fdm-3d-druck.de/wp-content/plugins/woocommerce-payments/assets/images/icons/check-green.svg?ver=488deef5db84c71239e1)}.wcpay-payment-element-wrapper{position:relative}.wcpay-payment-element-wrapper.is-apm{min-height:100px}.wcpay-payment-element-skeleton{position:absolute;top:0;left:0;right:0;z-index:1;opacity:1;transition:opacity 300ms ease-out;margin-bottom:2rem}.wcpay-payment-element-skeleton.is-hidden{opacity:0;pointer-events:none}.wcpay-skeleton-row{display:flex;gap:12px;margin-top:12px}.wcpay-payment-element{margin-bottom:1rem}#express-payment-method-woopay{width:100%}.wc-block-checkout__payment-method .wc-block-components-payment-method-label.wc-block-components-payment-method-label--with-icon{display:flex;align-items:center;width:100%}.wc-block-checkout__payment-method .wc-block-components-payment-method-label.wc-block-components-payment-method-label--with-icon .wcpay-payment-method-icon{height:24px;width:auto;order:2;margin-left:auto}.wc-block-checkout__payment-method .wc-block-components-payment-method-label.wc-block-components-payment-method-label--with-icon .payment-methods--logos{height:24px;order:2;margin-left:auto}.wc-block-checkout__payment-method .wc-block-components-payment-method-label.wc-block-components-payment-method-label--with-icon .payment-methods--logos>div{overflow:visible}.wc-block-checkout__payment-method .wc-block-components-payment-method-label.wc-block-components-payment-method-label--with-icon .payment-methods--logos>div img{width:38px;object-fit:cover;box-shadow:0 0 0 1px rgba(0,0,0,.1);border-radius:4.6875%/7.5%}.wc-block-checkout__payment-method .wc-block-components-payment-method-label.wc-block-components-payment-method-label--with-icon .test-mode.badge{background-color:#fff2d7;border-radius:4px;padding:4px 6px;font-size:12px;font-weight:400;line-height:16px;color:#4d3716;margin-left:8px;display:none;order:1}.wc-block-checkout__payment-method input:checked~div .wc-block-components-radio-control__label:where([id^="radio-control-wc-payment-method-options-woocommerce_payments"][id$="__label"])>.wc-block-components-payment-method-label .test-mode.badge{display:inline-block}#remember-me:empty{margin-bottom:0}#wcpay-woopay-button{container-type:inline-size;container-name:woopay-button}#wcpay-woopay-button a.woopay-express-button{text-decoration:none}#wcpay-woopay-button a.woopay-express-button,#wcpay-woopay-button a.woopay-express-button:hover,#wcpay-woopay-button a.woopay-express-button:focus,#wcpay-woopay-button a.woopay-express-button:visited,#wcpay-woopay-button a.woopay-express-button:active{text-decoration:none;color:#000}#wcpay-woopay-button a.woopay-express-button[data-theme=dark],#wcpay-woopay-button a.woopay-express-button[data-theme=dark]:hover,#wcpay-woopay-button a.woopay-express-button[data-theme=dark]:focus,#wcpay-woopay-button a.woopay-express-button[data-theme=dark]:visited,#wcpay-woopay-button a.woopay-express-button[data-theme=dark]:active{color:#fff}#wcpay-woopay-button .woopay-express-button{box-sizing:border-box;font-size:18px;font-weight:500;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue","Helvetica","Roboto","Arial",sans-serif;letter-spacing:.8px;height:40px;width:100%;background:#fff;border-radius:4px;border:none;color:#000;display:flex;align-items:center;justify-content:center;white-space:nowrap;text-transform:none;list-style-type:none;min-height:auto;overflow:hidden;position:relative}#wcpay-woopay-button .woopay-express-button .button-content{display:flex;align-items:center;justify-content:center;transform:scale(0.9);max-width:100%;padding:0 12px}#wcpay-woopay-button .woopay-express-button .woopay-button-separator{display:inline-block;width:1px;height:1.2em;background-color:rgba(0,0,0,.3);margin:0 10px 0 4px}#wcpay-woopay-button .woopay-express-button .woopay-button-card-brand{height:18px;width:auto;margin-right:4px;vertical-align:middle}#wcpay-woopay-button .woopay-express-button .woopay-button-last4{font-size:.75em;letter-spacing:.5px}#wcpay-woopay-button .woopay-express-button[data-size=small] .woopay-button-card-brand{height:14px}#wcpay-woopay-button .woopay-express-button[data-size=small] .woopay-button-last4{font-size:.7em}#wcpay-woopay-button .woopay-express-button[data-size=large] .woopay-button-card-brand{height:22px}#wcpay-woopay-button .woopay-express-button[data-size=large] .woopay-button-last4{font-size:.8em}#wcpay-woopay-button .woopay-express-button:not(:disabled):not(.is-placeholder):focus-visible{box-shadow:inset 0 0 0 2px #6108ce;outline:none}#wcpay-woopay-button .woopay-express-button:not(:disabled):not(.is-placeholder):hover{cursor:pointer}#wcpay-woopay-button .woopay-express-button:disabled,#wcpay-woopay-button .woopay-express-button[aria-disabled=true],#wcpay-woopay-button .woopay-express-button.is-placeholder{opacity:.5;cursor:not-allowed}#wcpay-woopay-button .woopay-express-button.is-loading,#wcpay-woopay-button .woopay-express-button.is-loading:hover,#wcpay-woopay-button .woopay-express-button.is-loading:disabled{opacity:1 !important}#wcpay-woopay-button .woopay-express-button svg{fill:#6108ce;width:99px}#wcpay-woopay-button .woopay-express-button[data-type=buy],#wcpay-woopay-button .woopay-express-button[data-type=book],#wcpay-woopay-button .woopay-express-button[data-type=donate]{min-width:150px}#wcpay-woopay-button .woopay-express-button[data-type=buy] svg,#wcpay-woopay-button .woopay-express-button[data-type=book] svg,#wcpay-woopay-button .woopay-express-button[data-type=donate] svg{margin-left:5px}@container woopay-button (max-width: 280px){#wcpay-woopay-button .woopay-express-button[data-type=buy],#wcpay-woopay-button .woopay-express-button[data-type=book],#wcpay-woopay-button .woopay-express-button[data-type=donate]{font-size:14px;letter-spacing:.5px}#wcpay-woopay-button .woopay-express-button[data-type=buy] svg,#wcpay-woopay-button .woopay-express-button[data-type=book] svg,#wcpay-woopay-button .woopay-express-button[data-type=donate] svg{width:88px;margin-left:4px}}@container woopay-button (max-width: 240px){#wcpay-woopay-button .woopay-express-button[data-type=buy],#wcpay-woopay-button .woopay-express-button[data-type=book],#wcpay-woopay-button .woopay-express-button[data-type=donate]{font-size:12px;letter-spacing:.3px}#wcpay-woopay-button .woopay-express-button[data-type=buy] svg,#wcpay-woopay-button .woopay-express-button[data-type=book] svg,#wcpay-woopay-button .woopay-express-button[data-type=donate] svg{width:84px;margin-left:3px}}@container woopay-button (max-width: 200px){#wcpay-woopay-button .woopay-express-button[data-type=buy],#wcpay-woopay-button .woopay-express-button[data-type=book],#wcpay-woopay-button .woopay-express-button[data-type=donate]{font-size:10px;letter-spacing:.2px}#wcpay-woopay-button .woopay-express-button[data-type=buy] svg,#wcpay-woopay-button .woopay-express-button[data-type=book] svg,#wcpay-woopay-button .woopay-express-button[data-type=donate] svg{width:80px;margin-left:2px}}#wcpay-woopay-button .woopay-express-button[data-theme=dark]{background:#873eff;color:#fff;border-color:#873eff}#wcpay-woopay-button .woopay-express-button[data-theme=dark] svg{fill:#fff}#wcpay-woopay-button .woopay-express-button[data-theme=dark] .woopay-button-separator{background-color:rgba(255,255,255,.4)}#wcpay-woopay-button .woopay-express-button[data-theme=dark]:not(:disabled):not(.is-placeholder):hover{border-color:#a77eff;background:#a77eff}#wcpay-woopay-button .woopay-express-button[data-theme=dark]:not(:disabled):not(.is-placeholder):focus-visible{box-shadow:none;outline:2px solid #3c087e;outline-offset:2px}#wcpay-woopay-button .woopay-express-button[data-theme=light-outline]{border:1px solid #000}#wcpay-woopay-button .woopay-express-button[data-theme=light-outline]:not(:disabled):not(.is-placeholder):hover{background:#e0e0e0}#wcpay-woopay-button .woopay-express-button[data-theme=light-outline]:not(:disabled):not(.is-placeholder):focus-visible{box-shadow:inset 0 0 0 2px #000}#wcpay-woopay-button .woopay-express-button[data-size=medium]{height:48px}#wcpay-woopay-button .woopay-express-button[data-size=medium][data-type=buy],#wcpay-woopay-button .woopay-express-button[data-size=medium][data-type=book],#wcpay-woopay-button .woopay-express-button[data-size=medium][data-type=donate]{min-width:150px}@container woopay-button (max-width: 280px){#wcpay-woopay-button .woopay-express-button[data-size=medium][data-type=buy],#wcpay-woopay-button .woopay-express-button[data-size=medium][data-type=book],#wcpay-woopay-button .woopay-express-button[data-size=medium][data-type=donate]{font-size:15px;letter-spacing:.5px}#wcpay-woopay-button .woopay-express-button[data-size=medium][data-type=buy] svg,#wcpay-woopay-button .woopay-express-button[data-size=medium][data-type=book] svg,#wcpay-woopay-button .woopay-express-button[data-size=medium][data-type=donate] svg{width:90px;margin-left:4px}}@container woopay-button (max-width: 240px){#wcpay-woopay-button .woopay-express-button[data-size=medium][data-type=buy],#wcpay-woopay-button .woopay-express-button[data-size=medium][data-type=book],#wcpay-woopay-button .woopay-express-button[data-size=medium][data-type=donate]{font-size:13px;letter-spacing:.3px}#wcpay-woopay-button .woopay-express-button[data-size=medium][data-type=buy] svg,#wcpay-woopay-button .woopay-express-button[data-size=medium][data-type=book] svg,#wcpay-woopay-button .woopay-express-button[data-size=medium][data-type=donate] svg{width:86px;margin-left:3px}}@container woopay-button (max-width: 200px){#wcpay-woopay-button .woopay-express-button[data-size=medium][data-type=buy],#wcpay-woopay-button .woopay-express-button[data-size=medium][data-type=book],#wcpay-woopay-button .woopay-express-button[data-size=medium][data-type=donate]{font-size:11px;letter-spacing:.2px}#wcpay-woopay-button .woopay-express-button[data-size=medium][data-type=buy] svg,#wcpay-woopay-button .woopay-express-button[data-size=medium][data-type=book] svg,#wcpay-woopay-button .woopay-express-button[data-size=medium][data-type=donate] svg{width:82px;margin-left:2px}}#wcpay-woopay-button .woopay-express-button[data-size=medium] .button-content{transform:scale(1)}#wcpay-woopay-button .woopay-express-button[data-size=large]{height:55px}#wcpay-woopay-button .woopay-express-button[data-size=large][data-type=buy],#wcpay-woopay-button .woopay-express-button[data-size=large][data-type=book],#wcpay-woopay-button .woopay-express-button[data-size=large][data-type=donate]{min-width:150px}@container woopay-button (max-width: 280px){#wcpay-woopay-button .woopay-express-button[data-size=large][data-type=buy],#wcpay-woopay-button .woopay-express-button[data-size=large][data-type=book],#wcpay-woopay-button .woopay-express-button[data-size=large][data-type=donate]{font-size:16px;letter-spacing:.6px}#wcpay-woopay-button .woopay-express-button[data-size=large][data-type=buy] svg,#wcpay-woopay-button .woopay-express-button[data-size=large][data-type=book] svg,#wcpay-woopay-button .woopay-express-button[data-size=large][data-type=donate] svg{width:93px;margin-left:4px}}@container woopay-button (max-width: 240px){#wcpay-woopay-button .woopay-express-button[data-size=large][data-type=buy],#wcpay-woopay-button .woopay-express-button[data-size=large][data-type=book],#wcpay-woopay-button .woopay-express-button[data-size=large][data-type=donate]{font-size:14px;letter-spacing:.4px}#wcpay-woopay-button .woopay-express-button[data-size=large][data-type=buy] svg,#wcpay-woopay-button .woopay-express-button[data-size=large][data-type=book] svg,#wcpay-woopay-button .woopay-express-button[data-size=large][data-type=donate] svg{width:89px;margin-left:3px}}@container woopay-button (max-width: 200px){#wcpay-woopay-button .woopay-express-button[data-size=large][data-type=buy],#wcpay-woopay-button .woopay-express-button[data-size=large][data-type=book],#wcpay-woopay-button .woopay-express-button[data-size=large][data-type=donate]{font-size:12px;letter-spacing:.3px}#wcpay-woopay-button .woopay-express-button[data-size=large][data-type=buy] svg,#wcpay-woopay-button .woopay-express-button[data-size=large][data-type=book] svg,#wcpay-woopay-button .woopay-express-button[data-size=large][data-type=donate] svg{width:85px;margin-left:2px}}#wcpay-woopay-button .woopay-express-button[data-size=large] .button-content{transform:scale(1.1)}@media screen and (min-width: 785px)and (max-width: 850px){#wcpay-woopay-button .woopay-express-button[data-size=large]{font-size:22px}}#contact_details{float:none}#contact_details+#customer_details{display:block}#contact-fields .wc-block-components-text-input,#contact-fields .woocommerce-input-wrapper,.woopay-billing-email .wc-block-components-text-input,.woopay-billing-email .woocommerce-input-wrapper{display:inline-block;position:relative;width:100%}#contact-fields .wc-block-components-text-input .wc-block-components-spinner,#contact-fields .woocommerce-input-wrapper .wc-block-components-spinner,.woopay-billing-email .wc-block-components-text-input .wc-block-components-spinner,.woopay-billing-email .woocommerce-input-wrapper .wc-block-components-spinner{right:10px;width:24px}.wc-block-components-address-form__email{position:relative}.wc-block-components-address-form__email .wc-block-components-spinner{top:50%;left:auto;right:10px;width:24px;height:24px;transform:translateY(-50%)}.woopay-login-session-iframe{width:100%;height:100vh;position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);z-index:355000;border:0;background:#fff;visibility:hidden}.woopay-login-session-iframe.open{transition:top 500ms;visibility:visible}@media screen and (min-width: 768px){.woopay-login-session-iframe-wrapper{position:fixed;background:rgba(117,117,117,.6);top:0;left:0;width:100vw;height:100vh;content:" ";display:block;z-index:355000}.woopay-login-session-iframe-wrapper .woopay-login-session-iframe{transition:none;height:90vh;max-height:520px;position:absolute;max-width:374px;border-radius:8px}}.woopay-otp-iframe{transition:top 500ms;width:100%;height:100dvh;position:fixed;top:100%;left:0;z-index:355000;border:0;background:#fff}.woopay-otp-iframe.open{top:0}.woopay-otp-iframe-wrapper .arrow{position:fixed;top:100%}@media screen and (min-width: 768px){.woopay-otp-iframe-wrapper{position:fixed;background:rgba(117,117,117,.6);top:0;left:0;width:100vw;height:100vh;content:" ";display:block;z-index:355000}.woopay-otp-iframe-wrapper .woopay-otp-iframe{transition:none;height:90vh;max-height:650px;position:absolute;max-width:374px;border-radius:8px;right:50px;left:auto}.woopay-otp-iframe-wrapper .arrow{position:absolute;right:7.5px;background:transparent;width:0;height:0;z-index:355001;border-top:15px solid transparent;border-bottom:15px solid transparent;border-right:15px solid #fff}}@keyframes spinner__animation{0%{animation-timing-function:cubic-bezier(0.5856, 0.0703, 0.4143, 0.9297);transform:rotate(0deg)}100%{transform:rotate(360deg)}}.woopay-billing-email .wc-block-components-spinner,.wcpay-express-checkout-wrapper .wc-block-components-spinner,#wcpay-woopay-button .wc-block-components-spinner{position:absolute;width:100%;height:100%;color:inherit;box-sizing:content-box;text-align:center;font-size:1.25em;top:initial;left:initial}.woopay-billing-email .wc-block-components-spinner::after,.wcpay-express-checkout-wrapper .wc-block-components-spinner::after,#wcpay-woopay-button .wc-block-components-spinner::after{content:" ";position:absolute;top:50%;left:50%;margin:-0.5em 0 0 -0.5em;width:1em;height:1em;box-sizing:border-box;transform-origin:50% 50%;transform:translateZ(0) scale(0.5);backface-visibility:hidden;border-radius:50%;border:.2em solid currentColor;border-left-color:transparent;animation:spinner__animation 1s infinite linear}
.is-loadable-placeholder{animation:loading-fade 1.6s ease-in-out infinite;background-color:#e2e4e7;color:transparent;display:inline-block}@media screen and (prefers-reduced-motion: reduce){.is-loadable-placeholder{animation:none}}.is-loadable-placeholder.is-inline{display:inline}.is-loadable-placeholder.is-block{display:block;margin-top:1em}.is-loadable-placeholder.is-block:first-child{margin-top:0}.is-loadable-placeholder.is-block p{margin:0}
.wcpay-skeleton__element{background:color-mix(in srgb, currentColor 5%, transparent);border:none;border-radius:4px;overflow:hidden;position:relative}.wcpay-skeleton__element::after{animation:wcpay-skeleton-shimmer 1.25s infinite;background:linear-gradient(90deg, transparent 0%, color-mix(in srgb, currentColor 5%, transparent) 50%, transparent 100%);content:"";inset:0;position:absolute;transform:translateX(-100%)}@media(prefers-reduced-motion: reduce){.wcpay-skeleton__element::after{animation:none}}.wcpay-skeleton__element--static::after{display:none}@keyframes wcpay-skeleton-shimmer{100%{transform:translateX(100%)}}.os-configurator {
--os-bg: #f8fafc;
--os-surface: #ffffff;
--os-surface-subtle: #f1f5f9;
--os-border: #e2e8f0;
--os-border-strong: #cbd5e1;
--os-text: #0f172a;
--os-text-muted: #64748b;
--os-accent: #0f766e;
--os-accent-hover: #0d625b;
--os-accent-soft: #f0fdfa;
--os-accent-ring: rgba(15, 118, 110, 0.16);
--os-radius: 14px;
--os-radius-sm: 9px;
--os-font: inherit;
font-family: var(--os-font);
color: var(--os-text);
max-width: 1280px;
margin: 0 auto;
padding: 8px 0 32px;
line-height: 1.45;
}
#os-konfigurator.os-configurator *,
#os-konfigurator.os-configurator *::before,
#os-konfigurator.os-configurator *::after {
box-sizing: border-box;
} #os-konfigurator.os-configurator button {
text-transform: none;
letter-spacing: normal;
font-family: inherit;
text-decoration: none;
box-shadow: none;
margin: 0;
line-height: 1.25;
min-height: 0;
min-width: 0;
}
#os-konfigurator.os-configurator button:focus-visible {
outline: 2px solid var(--os-accent);
outline-offset: 2px;
} .os-layout {
display: grid;
grid-template-columns: minmax(0, 1.45fr) minmax(320px, 390px);
gap: 24px;
align-items: start;
}
.os-stage-col {
display: flex;
flex-direction: column;
gap: 14px;
min-width: 0;
}
.os-sidebar-col {
position: sticky;
top: 20px;
min-width: 0;
} .os-stage-card {
background: var(--os-surface);
border: 1px solid var(--os-border);
border-radius: var(--os-radius);
overflow: hidden;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.os-stage-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
padding: 12px 16px;
border-bottom: 1px solid var(--os-border);
background: var(--os-surface);
}
.os-view-switch {
display: inline-flex;
padding: 3px;
background: var(--os-surface-subtle);
border-radius: 999px;
border: 1px solid var(--os-border);
gap: 2px;
}
#os-konfigurator.os-configurator .os-view-btn {
appearance: none;
border: none;
background: transparent;
color: var(--os-text-muted);
font-size: 13px;
font-weight: 600;
padding: 6px 14px;
border-radius: 999px;
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
line-height: 1.25;
}
#os-konfigurator.os-configurator .os-view-btn:hover {
background: rgba(255, 255, 255, 0.5);
color: var(--os-text);
}
#os-konfigurator.os-configurator .os-view-btn.is-active {
background: var(--os-surface);
color: var(--os-text);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
.os-stage-meta {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--os-text-muted);
font-variant-numeric: tabular-nums;
}
.os-meta-chip {
font-weight: 500;
color: var(--os-text);
}
.os-meta-dot {
color: var(--os-border-strong);
} .os-canvas-wrap {
position: relative;
width: 100%;
height: 460px;
background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}
.os-viewport-pane {
display: none;
position: relative;
width: 100%;
height: 100%;
}
.os-viewport-pane.is-active {
display: block;
}
#os-canvas-3d {
display: block;
width: 100%;
height: 100%;
cursor: grab;
touch-action: none;
}
#os-canvas-3d:active {
cursor: grabbing;
}
.os-camera-bar {
position: absolute;
left: 14px;
bottom: 14px;
display: inline-flex;
flex-wrap: wrap;
gap: 4px;
padding: 4px;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(8px);
border: 1px solid var(--os-border);
border-radius: 10px;
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}
#os-konfigurator.os-configurator .os-cam-btn {
appearance: none;
border: none;
background: transparent;
color: var(--os-text-muted);
font-size: 12px;
font-weight: 600;
padding: 5px 10px;
border-radius: 7px;
cursor: pointer;
transition: background-color 0.14s ease, color 0.14s ease;
}
#os-konfigurator.os-configurator .os-cam-btn:hover {
background: var(--os-surface-subtle);
color: var(--os-text);
}
#os-konfigurator.os-configurator .os-cam-btn.is-active {
background: var(--os-accent);
color: #ffffff;
}
.os-canvas-hint {
position: absolute;
right: 14px;
bottom: 16px;
font-size: 11px;
color: var(--os-text-muted);
background: rgba(255, 255, 255, 0.82);
padding: 4px 9px;
border-radius: 6px;
pointer-events: none;
} .os-svg-stage {
display: block;
width: 100%;
height: 100%;
padding: 16px;
background: #ffffff;
overflow: auto;
}
.os-svg-stage svg {
display: block;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
} .os-stage-caption {
display: flex;
align-items: center;
gap: 9px;
padding: 10px 16px;
background: var(--os-accent-soft);
border-top: 1px solid #ccfbf1;
font-size: 12.5px;
color: #115e59;
}
.os-stage-caption[hidden] {
display: none;
}
.os-caption-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--os-accent);
flex-shrink: 0;
} .os-details-card {
background: var(--os-surface);
border: 1px solid var(--os-border);
border-radius: var(--os-radius);
overflow: hidden;
}
.os-details-summary {
display: flex;
align-items: center;
justify-content: space-between;
padding: 13px 16px;
font-size: 13.5px;
font-weight: 600;
color: var(--os-text);
cursor: pointer;
list-style: none;
user-select: none;
}
.os-details-summary::-webkit-details-marker {
display: none;
}
.os-details-summary::after {
content: '▾';
font-size: 12px;
color: var(--os-text-muted);
margin-left: 8px;
transition: transform 0.16s ease;
}
.os-details-card[open] .os-details-summary::after {
transform: rotate(180deg);
}
.os-details-meta {
margin-left: auto;
font-size: 12px;
font-weight: 500;
color: var(--os-text-muted);
}
.os-details-body {
border-top: 1px solid var(--os-border);
padding: 4px 16px 14px;
}
.os-parts-table table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.os-parts-table th {
text-align: left;
font-weight: 600;
color: var(--os-text-muted);
font-size: 11.5px;
text-transform: uppercase;
letter-spacing: 0.03em;
padding: 9px 6px;
border-bottom: 1px solid var(--os-border);
}
.os-parts-table td {
padding: 8px 6px;
border-bottom: 1px solid var(--os-surface-subtle);
color: var(--os-text);
}
.os-parts-table tr:last-child td {
border-bottom: none;
} .os-panel {
background: var(--os-surface);
border: 1px solid var(--os-border);
border-radius: var(--os-radius);
padding: 18px 20px;
box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
display: flex;
flex-direction: column;
gap: 16px;
}
.os-panel-head {
border-bottom: 1px solid var(--os-surface-subtle);
padding-bottom: 12px;
}
.os-panel-title {
margin: 0;
font-size: 19px;
font-weight: 700;
letter-spacing: -0.015em;
color: var(--os-text);
}
.os-panel-sub {
margin: 2px 0 0;
font-size: 13px;
color: var(--os-text-muted);
}
.os-section {
display: flex;
flex-direction: column;
gap: 9px;
}
.os-section-top {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
}
.os-section-label {
font-size: 13px;
font-weight: 600;
color: var(--os-text);
}
.os-section-hint,
.os-section-value {
font-size: 12px;
font-weight: 500;
color: var(--os-text-muted);
} .os-dims-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.os-input-box {
display: flex;
flex-direction: column;
gap: 4px;
padding: 8px 11px;
border: 1px solid var(--os-border-strong);
border-radius: var(--os-radius-sm);
background: var(--os-surface);
cursor: text;
transition: border-color 0.14s ease, box-shadow 0.14s ease;
}
.os-input-box:focus-within {
border-color: var(--os-accent);
box-shadow: 0 0 0 3px var(--os-accent-ring);
}
.os-input-title {
font-size: 11px;
font-weight: 500;
color: var(--os-text-muted);
}
.os-input-inner {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 4px;
}
.os-input-inner input {
width: 100%;
min-width: 0;
border: none !important;
outline: none !important;
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
box-shadow: none !important;
font-size: 17px;
font-weight: 700;
color: var(--os-text);
font-variant-numeric: tabular-nums;
}
.os-unit {
font-size: 12px;
font-weight: 500;
color: var(--os-text-muted);
flex-shrink: 0;
} .os-swatch-grid {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
#os-konfigurator.os-configurator .os-swatch {
position: relative;
width: 30px;
height: 30px;
border-radius: 50%;
border: 2px solid rgba(15, 23, 42, 0.14);
padding: 0;
cursor: pointer;
transition: transform 0.12s ease, box-shadow 0.12s ease;
}
#os-konfigurator.os-configurator .os-swatch:hover {
transform: scale(1.07);
}
#os-konfigurator.os-configurator .os-swatch.is-selected {
border-color: #ffffff;
box-shadow: 0 0 0 2.5px var(--os-accent);
transform: scale(1.07);
} .os-advanced {
border-top: 1px solid var(--os-surface-subtle);
border-bottom: 1px solid var(--os-surface-subtle);
padding: 8px 0;
}
.os-advanced-trigger {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
font-size: 13px;
font-weight: 600;
color: var(--os-text);
cursor: pointer;
list-style: none;
padding: 4px 0;
user-select: none;
}
.os-advanced-trigger::-webkit-details-marker {
display: none;
}
.os-advanced-summary-tag {
font-size: 11.5px;
font-weight: 500;
color: var(--os-text-muted);
margin-left: auto;
}
.os-advanced-trigger::after {
content: '▾';
font-size: 11px;
color: var(--os-text-muted);
transition: transform 0.16s ease;
}
.os-advanced[open] .os-advanced-trigger::after {
transform: rotate(180deg);
}
.os-advanced-body {
display: flex;
flex-direction: column;
gap: 10px;
padding-top: 10px;
}
.os-adv-row {
display: flex;
flex-direction: column;
gap: 4px;
}
.os-adv-label {
font-size: 12px;
font-weight: 500;
color: var(--os-text-muted);
}
.os-select {
width: 100%;
padding: 7px 10px;
font-size: 13px;
color: var(--os-text);
background: var(--os-surface);
border: 1px solid var(--os-border-strong);
border-radius: 8px;
}
.os-select:focus {
outline: none;
border-color: var(--os-accent);
box-shadow: 0 0 0 3px var(--os-accent-ring);
} .os-messages:empty {
display: none;
}
.os-msg {
padding: 8px 11px;
border-radius: 8px;
font-size: 12.5px;
line-height: 1.4;
}
.os-msg-info {
background: #f0f9ff;
border: 1px solid #bae6fd;
color: #0369a1;
}
.os-msg-warning {
background: #fffbeb;
border: 1px solid #fde68a;
color: #92400e;
}
.os-msg-error {
background: #fef2f2;
border: 1px solid #fecaca;
color: #991b1b;
} .os-checkout-box {
display: flex;
flex-direction: column;
gap: 12px;
}
.os-price-lines {
display: flex;
flex-direction: column;
gap: 5px;
font-size: 13px;
color: var(--os-text-muted);
}
.os-price-row {
display: flex;
justify-content: space-between;
gap: 8px;
font-variant-numeric: tabular-nums;
}
.os-total-row {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 10px;
border-top: 1px solid var(--os-border);
}
.os-total-label {
font-size: 14px;
font-weight: 700;
color: var(--os-text);
}
.os-total-sub {
font-size: 11.5px;
color: var(--os-text-muted);
}
.os-total-amount {
font-size: 24px;
font-weight: 800;
letter-spacing: -0.02em;
color: var(--os-text);
font-variant-numeric: tabular-nums;
}
.os-action-row {
display: flex;
gap: 10px;
align-items: stretch;
}
.os-qty-control {
display: inline-flex;
align-items: center;
border: 1px solid var(--os-border-strong);
border-radius: var(--os-radius-sm);
background: var(--os-surface);
overflow: hidden;
flex-shrink: 0;
}
#os-konfigurator.os-configurator .os-qty-btn {
appearance: none;
border: none;
background: transparent;
width: 32px;
height: 44px;
padding: 0;
font-size: 16px;
font-weight: 600;
color: var(--os-text);
cursor: pointer;
}
#os-konfigurator.os-configurator .os-qty-btn:hover {
background: var(--os-surface-subtle);
color: var(--os-text);
}
.os-qty-control input {
width: 34px;
text-align: center;
border: none !important;
outline: none !important;
background: transparent !important;
box-shadow: none !important;
padding: 0 !important;
font-size: 14px;
font-weight: 600;
color: var(--os-text);
-moz-appearance: textfield;
}
.os-qty-control input::-webkit-inner-spin-button,
.os-qty-control input::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
#os-konfigurator.os-configurator .os-btn-primary {
flex: 1;
appearance: none;
border: none;
border-radius: var(--os-radius-sm);
background: var(--os-accent);
color: #ffffff;
font-size: 15px;
font-weight: 700;
min-height: 44px;
padding: 10px 18px;
cursor: pointer;
transition: background-color 0.15s ease, transform 0.08s ease;
}
#os-konfigurator.os-configurator .os-btn-primary:hover {
background: var(--os-accent-hover);
color: #ffffff;
}
#os-konfigurator.os-configurator .os-btn-primary:active {
transform: translateY(1px);
}
#os-konfigurator.os-configurator .os-btn-primary:disabled {
opacity: 0.65;
cursor: wait;
}
.os-secondary-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
min-height: 20px;
}
#os-konfigurator.os-configurator .os-link-btn {
appearance: none;
border: none;
background: transparent;
padding: 0;
font-size: 12.5px;
font-weight: 500;
color: var(--os-text-muted);
cursor: pointer;
text-decoration: underline;
text-underline-offset: 3px;
}
#os-konfigurator.os-configurator .os-link-btn:hover {
background: transparent;
color: var(--os-accent);
}
.os-share-feedback {
font-size: 12px;
color: var(--os-accent);
}
.os-cart-feedback:empty {
display: none;
}
.os-cart-feedback {
padding: 9px 12px;
border-radius: 8px;
font-size: 13px;
background: var(--os-accent-soft);
border: 1px solid #99f6e4;
color: #115e59;
}
.os-cart-feedback.is-error {
background: #fef2f2;
border-color: #fecaca;
color: #991b1b;
}
.os-cart-feedback a {
color: inherit;
font-weight: 700;
text-decoration: underline;
} .os-mobile-bar {
display: none;
}
@media (max-width: 1023px) {
.os-configurator {
padding-bottom: 84px;
}
.os-layout {
grid-template-columns: 1fr;
gap: 16px;
}
.os-sidebar-col {
position: static;
}
.os-canvas-wrap {
height: 360px;
}
.os-canvas-hint {
display: none;
}
.os-mobile-bar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 9990;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 10px 16px;
background: rgba(255, 255, 255, 0.96);
backdrop-filter: blur(10px);
border-top: 1px solid var(--os-border);
box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.08);
}
.os-mobile-price {
display: flex;
flex-direction: column;
}
.os-mobile-label {
font-size: 11px;
color: var(--os-text-muted);
}
.os-mobile-amount {
font-size: 18px;
font-weight: 800;
color: var(--os-text);
font-variant-numeric: tabular-nums;
}
.os-mobile-cta {
flex: 0 1 220px;
}
}