/* =========================================================
   HUUN – PREMIUM VARIATIONS v12.0.0
   ========================================================= */

body.huun-premium-variations-active .variations_form {
    --huun-navy: #083251;
    --huun-text: #12283a;
    --huun-copy: #4d5963;
    --huun-muted: #73808a;
    --huun-line: #dde5eb;
    --huun-line-soft: #edf2f5;
    --huun-soft: #f5f7f9;
    --huun-soft-2: #eef3f6;
    --huun-white: #ffffff;
    --huun-shadow: 0 14px 34px rgba(8, 50, 81, .055);
    font-family: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
}

body.huun-premium-variations-active .variations_form .huun-config-card {
    box-sizing: border-box !important;
    width: 100% !important;
    margin: 0 0 24px !important;
    border: 1px solid var(--huun-line) !important;
    border-radius: 24px !important;
    background: #fff !important;
    box-shadow: var(--huun-shadow) !important;
    overflow: hidden !important;
}

body.huun-premium-variations-active .variations_form .huun-config-head {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 18px 20px !important;
    background: #fff !important;
}

body.huun-premium-variations-active .variations_form .huun-config-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    flex: 0 0 56px !important;
    border-radius: 17px !important;
    background: var(--huun-navy) !important;
    color: #fff !important;
}

body.huun-premium-variations-active .variations_form .huun-config-icon svg {
    width: 24px !important;
    height: 24px !important;
}

body.huun-premium-variations-active .variations_form .huun-config-copy {
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

body.huun-premium-variations-active .variations_form .huun-config-title {
    all: unset !important;
    display: block !important;
    color: var(--huun-text) !important;
    font-family: inherit !important;
    font-size: 15px !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
    letter-spacing: -.02em !important;
}

body.huun-premium-variations-active .variations_form .huun-config-summary {
    all: unset !important;
    display: block !important;
    margin-top: 5px !important;
    color: var(--huun-muted) !important;
    font-family: inherit !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    font-weight: 500 !important;
}

body.huun-premium-variations-active .variations_form .huun-config-body {
    border-top: 1px solid var(--huun-line-soft) !important;
}

body.huun-premium-variations-active .variations_form .huun-config-group {
    box-sizing: border-box !important;
    width: 100% !important;
    padding: 20px !important;
    border-bottom: 1px solid var(--huun-line-soft) !important;
    background: #fff !important;
}

body.huun-premium-variations-active .variations_form .huun-config-group:last-child {
    border-bottom: 0 !important;
}

body.huun-premium-variations-active .variations_form .huun-config-label {
    all: unset !important;
    display: block !important;
    margin-bottom: 14px !important;
    color: var(--huun-copy) !important;
    font-family: inherit !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
    font-weight: 500 !important;
}

body.huun-premium-variations-active .variations_form .huun-config-label strong {
    color: #101820 !important;
    font-weight: 700 !important;
}

body.huun-premium-variations-active .variations_form .huun-config-options {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 10px !important;
}

body.huun-premium-variations-active .variations_form table.variations.huun-original-variations {
    position: absolute !important;
    left: -99999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    clip-path: inset(50%) !important;
}

body.huun-premium-variations-active .variations_form button.huun-option {
    all: unset !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
    position: relative !important;
    cursor: pointer !important;
    user-select: none !important;
    font-family: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
    transition: transform .16s ease, border-color .16s ease, background-color .16s ease, box-shadow .16s ease, opacity .16s ease !important;
}

body.huun-premium-variations-active .variations_form button.huun-option:focus-visible {
    outline: 3px solid rgba(8,50,81,.16) !important;
    outline-offset: 3px !important;
}

body.huun-premium-variations-active .variations_form button.huun-option--text {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 82px !important;
    min-height: 50px !important;
    padding: 0 20px !important;
    border: 1px solid var(--huun-line) !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: #3f4952 !important;
    font-size: 15px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
}

body.huun-premium-variations-active .variations_form button.huun-option--text:hover {
    border-color: #c9d3db !important;
    background: #f8fafb !important;
    transform: translateY(-1px) !important;
}

body.huun-premium-variations-active .variations_form button.huun-option--text.is-selected {
    border-color: var(--huun-navy) !important;
    background: var(--huun-navy) !important;
    color: #fff !important;
    box-shadow: 0 9px 20px rgba(8,50,81,.15) !important;
}

body.huun-premium-variations-active .variations_form .huun-cq-size-groups {
    display: grid !important;
    gap: 10px !important;
    width: 100% !important;
}

body.huun-premium-variations-active .variations_form .huun-cq-size-row {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: minmax(130px, 165px) minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 14px !important;
    width: 100% !important;
    padding: 10px !important;
    border: 1px solid var(--huun-line-soft) !important;
    border-radius: 18px !important;
    background: #fbfcfd !important;
}

body.huun-premium-variations-active .variations_form .huun-cq-lamella-label {
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    min-height: 46px !important;
    padding: 0 12px !important;
    border-radius: 13px !important;
    background: #fff !important;
    border: 1px solid var(--huun-line) !important;
}

body.huun-premium-variations-active .variations_form .huun-cq-lamella-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    border-radius: 9px !important;
    background: rgba(8,50,81,.07) !important;
    color: var(--huun-navy) !important;
}

body.huun-premium-variations-active .variations_form .huun-cq-lamella-icon svg {
    width: 15px !important;
    height: 15px !important;
    display: block !important;
}

body.huun-premium-variations-active .variations_form .huun-cq-lamella-copy {
    min-width: 0 !important;
}

body.huun-premium-variations-active .variations_form .huun-cq-lamella-value {
    display: block !important;
    color: var(--huun-navy) !important;
    font-size: 14px !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
}

body.huun-premium-variations-active .variations_form .huun-cq-lamella-caption {
    display: block !important;
    margin-top: 3px !important;
    color: var(--huun-muted) !important;
    font-size: 10.5px !important;
    line-height: 1.15 !important;
    font-weight: 600 !important;
    letter-spacing: .01em !important;
}

body.huun-premium-variations-active .variations_form .huun-cq-size-options {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(72px, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
}

body.huun-premium-variations-active .variations_form .huun-cq-size-options button.huun-option--text {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    padding: 0 10px !important;
    border-radius: 14px !important;
    font-size: 14px !important;
}

body.huun-premium-variations-active .variations_form button.huun-option--color {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    width: 82px !important;
    min-width: 82px !important;
    text-align: center !important;
}

body.huun-premium-variations-active .variations_form .huun-color-ring {
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 58px !important;
    height: 58px !important;
    padding: 5px !important;
    border: 1px solid var(--huun-line) !important;
    border-radius: 50% !important;
    background: #fff !important;
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease !important;
}

body.huun-premium-variations-active .variations_form .huun-color-fill {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.065) !important;
}

body.huun-premium-variations-active .variations_form .huun-color-name {
    display: block !important;
    width: 100% !important;
    color: #66737e !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
}

body.huun-premium-variations-active .variations_form button.huun-option--color:hover .huun-color-ring {
    transform: translateY(-1px) !important;
    border-color: #c9d3db !important;
}

body.huun-premium-variations-active .variations_form button.huun-option--color.is-selected .huun-color-ring {
    border-color: var(--huun-navy) !important;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--huun-navy) !important;
}

body.huun-premium-variations-active .variations_form button.huun-option--color.is-selected .huun-color-name {
    color: var(--huun-navy) !important;
    font-weight: 700 !important;
}

body.huun-premium-variations-active .variations_form button.huun-option--image {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    width: 130px !important;
    min-width: 130px !important;
}

body.huun-premium-variations-active .variations_form .huun-image-card {
    box-sizing: border-box !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 130px !important;
    height: 110px !important;
    padding: 8px !important;
    border: 1px solid var(--huun-line) !important;
    border-radius: 20px !important;
    background: #fff !important;
    overflow: hidden !important;
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease !important;
}

body.huun-premium-variations-active .variations_form .huun-image-card img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 14px !important;
    object-fit: contain !important;
    background: #fff !important;
}

body.huun-premium-variations-active .variations_form .huun-option-check {
    position: absolute !important;
    top: 7px !important;
    right: 7px !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    background: var(--huun-navy) !important;
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(8,50,81,.18) !important;
}

body.huun-premium-variations-active .variations_form .huun-option-check svg {
    width: 13px !important;
    height: 13px !important;
}

body.huun-premium-variations-active .variations_form .huun-image-name {
    display: block !important;
    width: 100% !important;
    color: #56636e !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
    text-align: center !important;
}

body.huun-premium-variations-active .variations_form button.huun-option--image:hover .huun-image-card {
    transform: translateY(-1px) !important;
    border-color: #c9d3db !important;
}

body.huun-premium-variations-active .variations_form button.huun-option--image.is-selected .huun-image-card {
    border-color: var(--huun-navy) !important;
    box-shadow: 0 0 0 1px var(--huun-navy), 0 10px 24px rgba(8,50,81,.10) !important;
}

body.huun-premium-variations-active .variations_form button.huun-option--image.is-selected .huun-option-check {
    display: inline-flex !important;
}

body.huun-premium-variations-active .variations_form button.huun-option--image.is-selected .huun-image-name {
    color: var(--huun-navy) !important;
    font-weight: 700 !important;
}

body.huun-premium-variations-active .variations_form .huun-image-fallback {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 14px !important;
    background: #f4f7f9 !important;
    color: #66737e !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

body.huun-premium-variations-active .variations_form button.huun-option.is-disabled {
    cursor: not-allowed !important;
    opacity: .34 !important;
    filter: grayscale(.2) !important;
    transform: none !important;
    box-shadow: none !important;
}

body.huun-premium-variations-active .variations_form .huun-original-variations .reset_variations {
    display: none !important;
}

@media (max-width: 767px) {
    body.huun-premium-variations-active .variations_form .huun-config-card {
        border-radius: 20px !important;
        margin-bottom: 18px !important;
    }

    body.huun-premium-variations-active .variations_form .huun-config-head {
        padding: 15px !important;
        gap: 13px !important;
    }

    body.huun-premium-variations-active .variations_form .huun-config-icon {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        flex-basis: 48px !important;
        border-radius: 15px !important;
    }

    body.huun-premium-variations-active .variations_form .huun-config-title {
        font-size: 13px !important;
    }

    body.huun-premium-variations-active .variations_form .huun-config-summary {
        font-size: 12.5px !important;
    }

    body.huun-premium-variations-active .variations_form .huun-config-group {
        padding: 17px 15px !important;
    }

    body.huun-premium-variations-active .variations_form .huun-config-label {
        margin-bottom: 12px !important;
        font-size: 15px !important;
    }

    body.huun-premium-variations-active .variations_form button.huun-option--text {
        min-width: 68px !important;
        min-height: 45px !important;
        padding: 0 15px !important;
        font-size: 14px !important;
    }

    body.huun-premium-variations-active .variations_form .huun-cq-size-groups {
        gap: 9px !important;
    }

    body.huun-premium-variations-active .variations_form .huun-cq-size-row {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        padding: 9px !important;
        border-radius: 16px !important;
    }

    body.huun-premium-variations-active .variations_form .huun-cq-lamella-label {
        min-height: 40px !important;
        padding: 0 10px !important;
        border-radius: 12px !important;
    }

    body.huun-premium-variations-active .variations_form .huun-cq-lamella-icon {
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
        border-radius: 8px !important;
    }

    body.huun-premium-variations-active .variations_form .huun-cq-lamella-value {
        font-size: 13px !important;
    }

    body.huun-premium-variations-active .variations_form .huun-cq-lamella-caption {
        font-size: 10px !important;
    }

    body.huun-premium-variations-active .variations_form .huun-cq-size-options {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }

    body.huun-premium-variations-active .variations_form .huun-cq-size-options button.huun-option--text {
        min-height: 43px !important;
        padding: 0 5px !important;
        border-radius: 12px !important;
        font-size: 13px !important;
    }

    body.huun-premium-variations-active .variations_form button.huun-option--color {
        width: 72px !important;
        min-width: 72px !important;
    }

    body.huun-premium-variations-active .variations_form .huun-color-ring {
        width: 52px !important;
        height: 52px !important;
    }

    body.huun-premium-variations-active .variations_form button.huun-option--image {
        width: 105px !important;
        min-width: 105px !important;
    }

    body.huun-premium-variations-active .variations_form .huun-image-card {
        width: 105px !important;
        height: 92px !important;
        padding: 6px !important;
        border-radius: 17px !important;
    }

    body.huun-premium-variations-active .variations_form .huun-image-name {
        font-size: 11px !important;
    }
}

@media (max-width: 370px) {
    body.huun-premium-variations-active .variations_form .huun-cq-size-options {
        gap: 6px !important;
    }

    body.huun-premium-variations-active .variations_form .huun-cq-size-options button.huun-option--text {
        min-height: 41px !important;
        font-size: 12px !important;
        padding: 0 3px !important;
    }
}


/* =========================================================
   HUUN – MOBILE LIVE PRODUCT PREVIEW v1.8.0
   Mobilde ALTTA DEĞİL; sticky header'ın hemen altında sabitlenir.
   ========================================================= */

.huun-mobile-live-preview {
    display: none;
}

@media (max-width: 900px) {
    body.huun-premium-variations-active .huun-mobile-live-preview {
        box-sizing: border-box !important;
        position: fixed !important;
        left: 10px !important;
        right: 10px !important;
        top: var(--huun-live-preview-top, 126px) !important;
        z-index: 80 !important;
        display: block !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 1px solid rgba(221, 229, 235, .96) !important;
        border-radius: 18px !important;
        background: rgba(255,255,255,.94) !important;
        -webkit-backdrop-filter: blur(16px) saturate(1.15) !important;
        backdrop-filter: blur(16px) saturate(1.15) !important;
        box-shadow:
            0 14px 38px rgba(8, 50, 81, .13),
            0 2px 8px rgba(8, 50, 81, .05) !important;
        overflow: hidden !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translateY(-10px) scale(.985) !important;
        transform-origin: top center !important;
        transition:
            opacity .2s ease,
            transform .2s ease,
            visibility .2s ease !important;
        font-family: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
    }

    body.huun-premium-variations-active .huun-mobile-live-preview.is-visible {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateY(0) scale(1) !important;
    }

    body.huun-premium-variations-active .huun-live-preview-main {
        box-sizing: border-box !important;
        display: grid !important;
        grid-template-columns: 62px minmax(0, 1fr) auto 30px !important;
        align-items: center !important;
        gap: 10px !important;
        min-height: 78px !important;
        padding: 8px 9px !important;
        background: transparent !important;
    }

    body.huun-premium-variations-active .huun-live-preview-thumb {
        all: unset !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        box-sizing: border-box !important;
        display: block !important;
        position: relative !important;
        width: 62px !important;
        height: 62px !important;
        min-width: 62px !important;
        cursor: pointer !important;
        border: 1px solid #e4e9ed !important;
        border-radius: 13px !important;
        background: #f7f9fa !important;
        overflow: hidden !important;
    }

    body.huun-premium-variations-active .huun-live-preview-thumb img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        object-fit: contain !important;
        background: #fff !important;
    }

    body.huun-premium-variations-active .huun-live-preview-meta {
        min-width: 0 !important;
        align-self: center !important;
    }

    body.huun-premium-variations-active .huun-live-preview-title {
        display: block !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #10273a !important;
        font-size: 13.5px !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
        letter-spacing: -.01em !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body.huun-premium-variations-active .huun-live-preview-selection {
        display: -webkit-box !important;
        max-width: 100% !important;
        margin: 5px 0 0 !important;
        padding: 0 !important;
        color: #73808a !important;
        font-size: 11.5px !important;
        line-height: 1.28 !important;
        font-weight: 500 !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    body.huun-premium-variations-active .huun-live-preview-price {
        min-width: 70px !important;
        max-width: 105px !important;
        color: #083251 !important;
        font-size: 14px !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
        text-align: right !important;
        white-space: nowrap !important;
    }

    body.huun-premium-variations-active .huun-live-preview-price .price,
    body.huun-premium-variations-active .huun-live-preview-price .woocommerce-Price-amount,
    body.huun-premium-variations-active .huun-live-preview-price ins {
        color: #083251 !important;
        font-size: inherit !important;
        line-height: inherit !important;
        font-weight: 700 !important;
        text-decoration: none !important;
    }

    body.huun-premium-variations-active .huun-live-preview-price del {
        display: block !important;
        margin-bottom: 2px !important;
        color: #9aa4ac !important;
        font-size: 10.5px !important;
        line-height: 1 !important;
        font-weight: 500 !important;
    }

    body.huun-premium-variations-active .huun-live-preview-toggle {
        all: unset !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        box-sizing: border-box !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 30px !important;
        height: 30px !important;
        border-radius: 50% !important;
        background: #eef3f6 !important;
        color: #083251 !important;
        cursor: pointer !important;
    }

    body.huun-premium-variations-active .huun-live-preview-toggle svg {
        display: block !important;
        width: 15px !important;
        height: 15px !important;
        transition: transform .2s ease !important;
    }

    body.huun-premium-variations-active .huun-mobile-live-preview.is-expanded .huun-live-preview-toggle svg {
        transform: rotate(180deg) !important;
    }

    body.huun-premium-variations-active .huun-live-preview-expanded {
        display: none !important;
        box-sizing: border-box !important;
        padding: 0 10px 10px !important;
        border-top: 1px solid #edf2f5 !important;
        background: rgba(255,255,255,.97) !important;
    }

    body.huun-premium-variations-active .huun-mobile-live-preview.is-expanded .huun-live-preview-expanded {
        display: block !important;
    }

    body.huun-premium-variations-active .huun-live-preview-large {
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: min(245px, 34vh) !important;
        margin-top: 10px !important;
        padding: 8px !important;
        border: 1px solid #e7ecef !important;
        border-radius: 15px !important;
        background: #fff !important;
        overflow: hidden !important;
    }

    body.huun-premium-variations-active .huun-live-preview-large img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: contain !important;
    }

    body.huun-premium-variations-active .huun-live-preview-expanded-footer {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        margin-top: 9px !important;
        padding: 0 3px 1px !important;
    }

    body.huun-premium-variations-active .huun-live-preview-expanded-selection {
        min-width: 0 !important;
        flex: 1 1 auto !important;
        color: #66737e !important;
        font-size: 11.5px !important;
        line-height: 1.3 !important;
        font-weight: 500 !important;
    }

    body.huun-premium-variations-active .huun-mobile-live-preview.is-expanded {
        max-height: calc(100vh - var(--huun-live-preview-top, 126px) - 12px) !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
    }
}

@media (max-width: 370px) {
    body.huun-premium-variations-active .huun-live-preview-main {
        grid-template-columns: 56px minmax(0, 1fr) auto 28px !important;
        gap: 8px !important;
        min-height: 72px !important;
        padding: 7px 8px !important;
    }

    body.huun-premium-variations-active .huun-live-preview-thumb {
        width: 56px !important;
        height: 56px !important;
        min-width: 56px !important;
    }

    body.huun-premium-variations-active .huun-live-preview-title {
        font-size: 12.5px !important;
    }

    body.huun-premium-variations-active .huun-live-preview-selection {
        font-size: 10.5px !important;
    }

    body.huun-premium-variations-active .huun-live-preview-price {
        min-width: 60px !important;
        max-width: 86px !important;
        font-size: 12.5px !important;
    }
}




/* =========================================================
   HUUN – PIANO 3x3 FR AR PILOT v1.8.0
   Mobile only. CTA lives inside the existing live preview.
   ========================================================= */

.huun-live-preview-ar-row,
.huun-ar-modal {
    display: none;
}

@media (max-width: 900px) {
    body.huun-premium-variations-active .huun-live-preview-ar-row {
        box-sizing: border-box !important;
        display: none !important;
        padding: 0 9px 9px !important;
        background: rgba(255,255,255,.96) !important;
    }

    body.huun-premium-variations-active .huun-live-preview-ar-row.is-available {
        display: block !important;
    }

    body.huun-premium-variations-active .huun-live-preview-ar-button {
        all: unset !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 9px !important;
        width: 100% !important;
        min-height: 42px !important;
        padding: 0 14px !important;
        border-radius: 13px !important;
        background: linear-gradient(180deg, #0b3c61 0%, #083251 100%) !important;
        color: #fff !important;
        cursor: pointer !important;
        box-shadow: 0 9px 20px rgba(8,50,81,.16) !important;
        font-family: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
        font-size: 13px !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        letter-spacing: -.01em !important;
    }

    body.huun-premium-variations-active .huun-live-preview-ar-button svg {
        display: block !important;
        width: 18px !important;
        height: 18px !important;
        flex: 0 0 18px !important;
    }

    body.huun-premium-variations-active .huun-live-preview-ar-badge {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 27px !important;
        height: 20px !important;
        padding: 0 7px !important;
        margin-left: auto !important;
        border: 1px solid rgba(255,255,255,.26) !important;
        border-radius: 999px !important;
        background: rgba(255,255,255,.10) !important;
        color: #fff !important;
        font-size: 9px !important;
        line-height: 1 !important;
        font-weight: 800 !important;
        letter-spacing: .08em !important;
    }

    body.huun-ar-open {
        overflow: hidden !important;
        touch-action: none !important;
    }

    body.huun-premium-variations-active .huun-ar-modal {
        box-sizing: border-box !important;
        position: fixed !important;
        inset: 0 !important;
        z-index: 2147483000 !important;
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: 100dvh !important;
        background: #f4f6f7 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: opacity .2s ease, visibility .2s ease !important;
        font-family: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
    }

    body.huun-premium-variations-active .huun-ar-modal.is-open {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    body.huun-premium-variations-active .huun-ar-modal-head {
        box-sizing: border-box !important;
        display: grid !important;
        grid-template-columns: 44px minmax(0, 1fr) 44px !important;
        align-items: center !important;
        gap: 10px !important;
        min-height: 72px !important;
        padding: max(10px, env(safe-area-inset-top)) 12px 10px !important;
        border-bottom: 1px solid #e2e7eb !important;
        background: rgba(255,255,255,.96) !important;
        -webkit-backdrop-filter: blur(14px) !important;
        backdrop-filter: blur(14px) !important;
    }

    body.huun-premium-variations-active .huun-ar-modal-logo {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        border-radius: 14px !important;
        background: #083251 !important;
        color: #fff !important;
    }

    body.huun-premium-variations-active .huun-ar-modal-logo svg {
        width: 21px !important;
        height: 21px !important;
    }

    body.huun-premium-variations-active .huun-ar-modal-copy {
        min-width: 0 !important;
    }

    body.huun-premium-variations-active .huun-ar-modal-title {
        display: block !important;
        color: #10273a !important;
        font-size: 16px !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
        letter-spacing: -.02em !important;
    }

    body.huun-premium-variations-active .huun-ar-modal-subtitle {
        display: block !important;
        margin-top: 4px !important;
        color: #72808b !important;
        font-size: 11px !important;
        line-height: 1.25 !important;
        font-weight: 500 !important;
    }

    body.huun-premium-variations-active .huun-ar-close {
        all: unset !important;
        box-sizing: border-box !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        border-radius: 50% !important;
        background: #eaf0f3 !important;
        color: #083251 !important;
        cursor: pointer !important;
    }

    body.huun-premium-variations-active .huun-ar-close svg {
        width: 17px !important;
        height: 17px !important;
    }

    body.huun-premium-variations-active .huun-ar-viewer-wrap {
        position: relative !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        padding: 10px !important;
        background:
            radial-gradient(circle at 50% 36%, #fff 0%, #f5f7f8 48%, #e9eef1 100%) !important;
    }

    body.huun-premium-variations-active .huun-ar-model-viewer {
        touch-action: none !important;
        -webkit-user-select: none !important;
        user-select: none !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 360px !important;
        border: 1px solid #dfe6eb !important;
        border-radius: 20px !important;
        background: transparent !important;
        overflow: hidden !important;
        --poster-color: transparent;
        --progress-bar-color: #083251;
    }

    body.huun-premium-variations-active .huun-ar-error {
        position: absolute !important;
        left: 50% !important;
        top: 18px !important;
        transform: translateX(-50%) !important;
        display: none !important;
        max-width: calc(100% - 36px) !important;
        padding: 8px 12px !important;
        border-radius: 999px !important;
        background: rgba(255,255,255,.96) !important;
        color: #60717e !important;
        box-shadow: 0 5px 16px rgba(8,50,81,.08) !important;
        font-size: 10.5px !important;
        line-height: 1.2 !important;
        font-weight: 600 !important;
        text-align: center !important;
        pointer-events: none !important;
        z-index: 3 !important;
    }

    body.huun-premium-variations-active .huun-ar-modal-foot {
        box-sizing: border-box !important;
        padding: 10px 12px max(12px, env(safe-area-inset-bottom)) !important;
        border-top: 1px solid #e2e7eb !important;
        background: #fff !important;
    }

    body.huun-premium-variations-active .huun-ar-note {
        display: block !important;
        margin: 0 0 8px !important;
        color: #73808a !important;
        font-size: 10.5px !important;
        line-height: 1.3 !important;
        font-weight: 500 !important;
        text-align: center !important;
    }

    body.huun-premium-variations-active .huun-ar-native-button {
        all: unset !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 9px !important;
        width: calc(100% - 24px) !important;
        min-height: 52px !important;
        position: fixed !important;
        left: 12px !important;
        bottom: max(12px, env(safe-area-inset-bottom)) !important;
        z-index: 2 !important;
        border-radius: 16px !important;
        background: #083251 !important;
        color: #fff !important;
        box-shadow: 0 12px 28px rgba(8,50,81,.20) !important;
        font-family: inherit !important;
        font-size: 14px !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        cursor: pointer !important;
    }

    body.huun-premium-variations-active .huun-ar-native-button svg {
        width: 19px !important;
        height: 19px !important;
    }

    body.huun-premium-variations-active .huun-ar-modal-foot-spacer {
        height: 58px !important;
    }
}


/* =========================================================
   HUUN – SCREEN ROLLO CONFIGURATOR v12.6.5
   Equa / CQ + Piano / CP
   ========================================================= */

body.huun-premium-variations-active .huun-screen-configurator[hidden] {
    display: none !important;
}

body.huun-premium-variations-active .huun-screen-configurator {
    box-sizing: border-box !important;
    width: 100% !important;
    margin: 20px 0 18px !important;
    border: 1px solid var(--huun-line, #dde5eb) !important;
    border-radius: 22px !important;
    background: #fff !important;
    box-shadow: 0 12px 30px rgba(8, 50, 81, .05) !important;
    overflow: hidden !important;
    font-family: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
}

body.huun-premium-variations-active .huun-screen-head {
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 17px 18px !important;
    border-bottom: 1px solid #edf2f5 !important;
    background: #fff !important;
}

body.huun-premium-variations-active .huun-screen-head-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    border-radius: 14px !important;
    background: #083251 !important;
    color: #fff !important;
}

body.huun-premium-variations-active .huun-screen-head-icon svg {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
}

body.huun-premium-variations-active .huun-screen-head-copy {
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

body.huun-premium-variations-active .huun-screen-title {
    display: block !important;
    margin: 0 !important;
    color: #12283a !important;
    font-size: 15px !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
    letter-spacing: -.02em !important;
}

body.huun-premium-variations-active .huun-screen-subtitle {
    display: block !important;
    margin-top: 4px !important;
    color: #75818b !important;
    font-size: 12.5px !important;
    line-height: 1.35 !important;
    font-weight: 500 !important;
}

body.huun-premium-variations-active .huun-screen-auto {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-height: 32px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    background: #eef3f6 !important;
    color: #526b7e !important;
    font-size: 10.5px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
}

body.huun-premium-variations-active .huun-screen-auto::before {
    content: "" !important;
    display: block !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: #2f8b57 !important;
    box-shadow: 0 0 0 3px rgba(47,139,87,.09) !important;
}

body.huun-premium-variations-active .huun-screen-body {
    padding: 14px !important;
    background: #fbfcfd !important;
}

body.huun-premium-variations-active .huun-screen-groups {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

body.huun-premium-variations-active .huun-screen-group {
    box-sizing: border-box !important;
    min-width: 0 !important;
    padding: 11px !important;
    border: 1px solid #e6ecef !important;
    border-radius: 17px !important;
    background: #fff !important;
}

body.huun-premium-variations-active .huun-screen-group.is-split {
    grid-column: 1 / -1 !important;
}

body.huun-premium-variations-active .huun-screen-group-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin-bottom: 9px !important;
}

body.huun-premium-variations-active .huun-screen-side-name {
    min-width: 0 !important;
    color: #283c4d !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
}

body.huun-premium-variations-active .huun-screen-length-badge {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 26px !important;
    padding: 0 8px !important;
    border-radius: 999px !important;
    background: #f0f4f7 !important;
    color: #607483 !important;
    font-size: 10.5px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
}

body.huun-premium-variations-active .huun-screen-slots {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
}

body.huun-premium-variations-active .huun-screen-group.is-split .huun-screen-slots {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body.huun-premium-variations-active button.huun-screen-slot {
    all: unset !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
    position: relative !important;
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 9px !important;
    width: 100% !important;
    min-height: 58px !important;
    padding: 8px 9px !important;
    border: 1px solid #e1e8ed !important;
    border-radius: 13px !important;
    background: #fff !important;
    cursor: pointer !important;
    transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease, transform .16s ease !important;
}

body.huun-premium-variations-active button.huun-screen-slot:hover {
    border-color: #cad5dd !important;
    transform: translateY(-1px) !important;
}

body.huun-premium-variations-active button.huun-screen-slot.is-selected {
    border-color: #083251 !important;
    background: #f7fafc !important;
    box-shadow: 0 0 0 1px #083251, 0 8px 18px rgba(8,50,81,.07) !important;
}

body.huun-premium-variations-active button.huun-screen-slot.is-disabled {
    cursor: not-allowed !important;
    opacity: .45 !important;
    transform: none !important;
    box-shadow: none !important;
}

body.huun-premium-variations-active .huun-screen-check {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    border: 1px solid #d9e2e8 !important;
    border-radius: 10px !important;
    background: #f5f8fa !important;
    color: transparent !important;
}

body.huun-premium-variations-active button.huun-screen-slot.is-selected .huun-screen-check {
    border-color: #083251 !important;
    background: #083251 !important;
    color: #fff !important;
}

body.huun-premium-variations-active .huun-screen-check svg {
    width: 15px !important;
    height: 15px !important;
    display: block !important;
}

body.huun-premium-variations-active .huun-screen-slot-copy {
    min-width: 0 !important;
}

body.huun-premium-variations-active .huun-screen-slot-title {
    display: block !important;
    color: #2d404f !important;
    font-size: 11.5px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
}

body.huun-premium-variations-active .huun-screen-slot-meta {
    display: block !important;
    margin-top: 3px !important;
    color: #859099 !important;
    font-size: 9.5px !important;
    line-height: 1.2 !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body.huun-premium-variations-active .huun-screen-slot-price {
    color: #083251 !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
}

body.huun-premium-variations-active .huun-screen-slot-unavailable {
    color: #9a6a54 !important;
    font-size: 9.5px !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
    text-align: right !important;
}

body.huun-premium-variations-active .huun-screen-summary {
    display: none !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-top: 12px !important;
    padding: 11px 12px !important;
    border-radius: 14px !important;
    background: #083251 !important;
    color: #fff !important;
}

body.huun-premium-variations-active .huun-screen-summary.is-visible {
    display: flex !important;
}

body.huun-premium-variations-active .huun-screen-summary-copy {
    min-width: 0 !important;
}

body.huun-premium-variations-active .huun-screen-summary-count {
    display: block !important;
    color: #fff !important;
    font-size: 11.5px !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
}

body.huun-premium-variations-active .huun-screen-summary-total {
    display: block !important;
    margin-top: 3px !important;
    color: rgba(255,255,255,.72) !important;
    font-size: 9.5px !important;
    line-height: 1.15 !important;
    font-weight: 500 !important;
}

body.huun-premium-variations-active button.huun-screen-reset {
    all: unset !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    flex: 0 0 auto !important;
    min-height: 30px !important;
    padding: 0 9px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.12) !important;
    color: #fff !important;
    cursor: pointer !important;
    font-size: 9.5px !important;
    line-height: 30px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
}

body.huun-premium-variations-active .huun-screen-note {
    margin: 10px 2px 0 !important;
    color: #87939c !important;
    font-size: 9.5px !important;
    line-height: 1.35 !important;
    font-weight: 500 !important;
}

@media (max-width: 767px) {
    body.huun-premium-variations-active .huun-screen-configurator {
        margin: 16px 0 15px !important;
        border-radius: 19px !important;
    }

    body.huun-premium-variations-active .huun-screen-head {
        align-items: flex-start !important;
        gap: 11px !important;
        padding: 14px !important;
    }

    body.huun-premium-variations-active .huun-screen-head-icon {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        border-radius: 13px !important;
    }

    body.huun-premium-variations-active .huun-screen-title {
        font-size: 13px !important;
    }

    body.huun-premium-variations-active .huun-screen-subtitle {
        font-size: 11px !important;
    }

    body.huun-premium-variations-active .huun-screen-auto {
        display: none !important;
    }

    body.huun-premium-variations-active .huun-screen-body {
        padding: 10px !important;
    }

    body.huun-premium-variations-active .huun-screen-groups {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    body.huun-premium-variations-active .huun-screen-group {
        padding: 8px !important;
        border-radius: 15px !important;
    }

    body.huun-premium-variations-active .huun-screen-group-head {
        margin-bottom: 7px !important;
    }

    body.huun-premium-variations-active .huun-screen-side-name {
        font-size: 11.5px !important;
    }

    body.huun-premium-variations-active .huun-screen-length-badge {
        min-height: 23px !important;
        padding: 0 7px !important;
        font-size: 9.5px !important;
    }

    body.huun-premium-variations-active .huun-screen-group.is-split .huun-screen-slots {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.huun-premium-variations-active button.huun-screen-slot {
        grid-template-columns: 30px minmax(0, 1fr) !important;
        gap: 7px !important;
        min-height: 57px !important;
        padding: 7px !important;
        border-radius: 12px !important;
    }

    body.huun-premium-variations-active .huun-screen-check {
        width: 30px !important;
        height: 30px !important;
        border-radius: 9px !important;
    }

    body.huun-premium-variations-active .huun-screen-slot-price,
    body.huun-premium-variations-active .huun-screen-slot-unavailable {
        grid-column: 2 !important;
        justify-self: start !important;
        margin-top: -2px !important;
        font-size: 9.5px !important;
    }

    body.huun-premium-variations-active .huun-screen-slot-title {
        font-size: 10.5px !important;
    }

    body.huun-premium-variations-active .huun-screen-slot-meta {
        font-size: 8.5px !important;
    }

    body.huun-premium-variations-active .huun-screen-summary {
        padding: 10px !important;
        border-radius: 13px !important;
    }

    body.huun-premium-variations-active .huun-screen-summary-count {
        font-size: 10.5px !important;
    }

    body.huun-premium-variations-active .huun-screen-summary-total {
        font-size: 9px !important;
    }

    body.huun-premium-variations-active button.huun-screen-reset {
        font-size: 8.5px !important;
        padding: 0 8px !important;
    }
}

@media (max-width: 370px) {
    body.huun-premium-variations-active .huun-screen-groups {
        grid-template-columns: 1fr !important;
    }

    body.huun-premium-variations-active .huun-screen-group.is-split .huun-screen-slots {
        grid-template-columns: 1fr !important;
    }
}


/* =========================================================
   HUUN – SCREEN TYPE SELECTOR v2.3.0
   Ohne / Solar / Manuell
   ========================================================= */

body.huun-premium-variations-active .huun-screen-slot-card {
    box-sizing: border-box !important;
    width: 100% !important;
    padding: 9px !important;
    border: 1px solid #e5ebef !important;
    border-radius: 13px !important;
    background: #fbfcfd !important;
}

body.huun-premium-variations-active .huun-screen-slot-card + .huun-screen-slot-card {
    margin-top: 7px !important;
}

body.huun-premium-variations-active .huun-screen-slot-card-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin-bottom: 7px !important;
}

body.huun-premium-variations-active .huun-screen-slot-position {
    min-width: 0 !important;
    color: #344958 !important;
    font-size: 10.5px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
}

body.huun-premium-variations-active .huun-screen-slot-size {
    flex: 0 0 auto !important;
    color: #7b8993 !important;
    font-size: 9.5px !important;
    line-height: 1 !important;
    font-weight: 600 !important;
}

body.huun-premium-variations-active .huun-screen-type-choices {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
}

body.huun-premium-variations-active button.huun-screen-choice {
    all: unset !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    min-width: 0 !important;
    min-height: 47px !important;
    padding: 6px 5px !important;
    border: 1px solid #cdd8df !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    color: #263d4e !important;
    cursor: pointer !important;
    text-align: center !important;
    transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease, transform .16s ease !important;
}

body.huun-premium-variations-active button.huun-screen-choice:hover {
    border-color: #9fb2bf !important;
    background: #f8fafb !important;
    transform: translateY(-1px) !important;
}

body.huun-premium-variations-active button.huun-screen-choice.is-selected {
    border-color: #083251 !important;
    background: #083251 !important;
    color: #fff !important;
    box-shadow: 0 7px 16px rgba(8,50,81,.12) !important;
}

body.huun-premium-variations-active button.huun-screen-choice.is-disabled {
    cursor: not-allowed !important;
    opacity: .62 !important;
    transform: none !important;
    box-shadow: none !important;
}

body.huun-premium-variations-active button.huun-screen-choice--none.is-selected {
    background: #e8eef2 !important;
    border-color: #c2d0d9 !important;
    color: #385064 !important;
    box-shadow: none !important;
}

body.huun-premium-variations-active .huun-screen-choice-title {
    display: block !important;
    max-width: 100% !important;
    color: inherit !important;
    font-size: 10.5px !important;
    line-height: 1.05 !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body.huun-premium-variations-active .huun-screen-choice-price {
    display: block !important;
    max-width: 100% !important;
    color: #083251 !important;
    font-size: 9px !important;
    line-height: 1.05 !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body.huun-premium-variations-active button.huun-screen-choice.is-selected .huun-screen-choice-price {
    color: rgba(255,255,255,.78) !important;
}

body.huun-premium-variations-active button.huun-screen-choice--none.is-selected .huun-screen-choice-price {
    color: #73838e !important;
}

body.huun-premium-variations-active .huun-screen-choice-price--off {
    color: #9b7563 !important;
    font-size: 7.5px !important;
}

@media (max-width: 767px) {
    body.huun-premium-variations-active .huun-screen-slot-card {
        padding: 7px !important;
        border-radius: 12px !important;
    }

    body.huun-premium-variations-active .huun-screen-type-choices {
        gap: 5px !important;
    }

    body.huun-premium-variations-active button.huun-screen-choice {
        min-height: 44px !important;
        padding: 5px 3px !important;
        border-radius: 9px !important;
    }

    body.huun-premium-variations-active .huun-screen-choice-title {
        font-size: 9.5px !important;
    }

    body.huun-premium-variations-active .huun-screen-choice-price {
        font-size: 7.8px !important;
    }
}


/* v2.1.1 – choices should look active, not washed out */
body.huun-premium-variations-active button.huun-screen-choice:not(.is-selected):not(.is-disabled) {
    box-shadow: 0 2px 7px rgba(8, 50, 81, .035) !important;
}

body.huun-premium-variations-active button.huun-screen-choice:not(.is-disabled) .huun-screen-choice-title {
    opacity: 1 !important;
}

body.huun-premium-variations-active button.huun-screen-choice:not(.is-disabled) .huun-screen-choice-price {
    opacity: 1 !important;
}


/* =========================================================
   HUUN – MOBILE LIVE PREVIEW + SCREEN TOTAL v12.6.5
   ========================================================= */

@media (max-width: 900px) {
    body.huun-premium-variations-active .huun-live-preview-accessories {
        display: none !important;
        max-width: 100% !important;
        margin-top: 3px !important;
        color: #2f6f50 !important;
        font-size: 10px !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body.huun-premium-variations-active .huun-live-preview-accessories.is-visible {
        display: block !important;
    }

    body.huun-premium-variations-active .huun-live-preview-price {
        max-width: 120px !important;
    }

    body.huun-premium-variations-active .huun-live-preview-price-label {
        display: block !important;
        margin-bottom: 3px !important;
        color: #7a8790 !important;
        font-size: 8.5px !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: .05em !important;
    }

    body.huun-premium-variations-active .huun-live-preview-total-amount {
        display: block !important;
        color: #083251 !important;
        font-size: 14px !important;
        line-height: 1.1 !important;
        font-weight: 800 !important;
        white-space: nowrap !important;
    }

    body.huun-premium-variations-active .huun-live-preview-expanded-screens {
        display: none !important;
        box-sizing: border-box !important;
        margin: 9px 10px 0 !important;
        padding: 9px 10px !important;
        border: 1px solid #e7ecef !important;
        border-radius: 12px !important;
        background: #f8fafb !important;
    }

    body.huun-premium-variations-active .huun-live-preview-expanded-screens.is-visible {
        display: block !important;
    }

    body.huun-premium-variations-active .huun-live-preview-expanded-screens-title {
        display: block !important;
        margin-bottom: 4px !important;
        color: #083251 !important;
        font-size: 10px !important;
        line-height: 1.1 !important;
        font-weight: 800 !important;
    }

    body.huun-premium-variations-active .huun-live-preview-expanded-screens-list {
        display: -webkit-box !important;
        color: #697984 !important;
        font-size: 9.5px !important;
        line-height: 1.3 !important;
        font-weight: 500 !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }
}

@media (max-width: 370px) {
    body.huun-premium-variations-active .huun-live-preview-accessories {
        font-size: 9px !important;
    }

    body.huun-premium-variations-active .huun-live-preview-total-amount {
        font-size: 12.5px !important;
    }

    body.huun-premium-variations-active .huun-live-preview-price {
        max-width: 100px !important;
    }
}


/* =========================================================
   HUUN – MOBILE SCREEN ACCORDION v12.0.0
   ========================================================= */

/* Desktop: toggle behaves as the old static group header */
body.huun-premium-variations-active button.huun-screen-group-toggle {
    all: unset !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    width: 100% !important;
    margin-bottom: 9px !important;
    cursor: default !important;
    font-family: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
}

body.huun-premium-variations-active .huun-screen-group-toggle-main,
body.huun-premium-variations-active .huun-screen-group-toggle-side {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
}

body.huun-premium-variations-active .huun-screen-group-mobile-summary,
body.huun-premium-variations-active .huun-screen-group-chevron {
    display: none !important;
}

@media (max-width: 767px) {
    body.huun-premium-variations-active .huun-screen-configurator {
        margin: 16px 0 15px !important;
        border-radius: 20px !important;
    }

    body.huun-premium-variations-active .huun-screen-head {
        padding: 14px !important;
        border-bottom: 1px solid #edf2f5 !important;
    }

    body.huun-premium-variations-active .huun-screen-body {
        padding: 9px !important;
    }

    body.huun-premium-variations-active .huun-screen-groups {
        display: block !important;
    }

    body.huun-premium-variations-active .huun-screen-group,
    body.huun-premium-variations-active .huun-screen-group.is-split {
        box-sizing: border-box !important;
        width: 100% !important;
        margin: 0 0 7px !important;
        padding: 0 !important;
        border: 1px solid #e1e8ed !important;
        border-radius: 14px !important;
        background: #fff !important;
        overflow: hidden !important;
    }

    body.huun-premium-variations-active .huun-screen-group:last-child {
        margin-bottom: 0 !important;
    }

    body.huun-premium-variations-active button.huun-screen-group-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        min-height: 62px !important;
        margin: 0 !important;
        padding: 10px 11px !important;
        cursor: pointer !important;
        background: #fff !important;
    }

    body.huun-premium-variations-active .huun-screen-group.is-open button.huun-screen-group-toggle {
        background: #f8fafb !important;
        border-bottom: 1px solid #e8eef2 !important;
    }

    body.huun-premium-variations-active .huun-screen-group-toggle-main {
        display: block !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    body.huun-premium-variations-active .huun-screen-side-name {
        display: block !important;
        color: #1d3547 !important;
        font-size: 13px !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
    }

    body.huun-premium-variations-active .huun-screen-group-mobile-summary {
        display: block !important;
        max-width: 100% !important;
        margin-top: 4px !important;
        color: #71808b !important;
        font-size: 10.5px !important;
        line-height: 1.2 !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body.huun-premium-variations-active .huun-screen-group.is-open .huun-screen-group-mobile-summary {
        color: #426176 !important;
    }

    body.huun-premium-variations-active .huun-screen-group-toggle-side {
        flex: 0 0 auto !important;
        gap: 7px !important;
    }

    body.huun-premium-variations-active .huun-screen-length-badge {
        min-height: 25px !important;
        padding: 0 8px !important;
        background: #eef3f6 !important;
        color: #5d7383 !important;
        font-size: 9.5px !important;
    }

    body.huun-premium-variations-active .huun-screen-group-chevron {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 26px !important;
        height: 26px !important;
        color: #6d7f8b !important;
    }

    body.huun-premium-variations-active .huun-screen-group-chevron svg {
        display: block !important;
        width: 15px !important;
        height: 15px !important;
        transition: transform .18s ease !important;
    }

    body.huun-premium-variations-active .huun-screen-group.is-open .huun-screen-group-chevron svg {
        transform: rotate(180deg) !important;
    }

    body.huun-premium-variations-active .huun-screen-slots {
        display: none !important;
        padding: 9px !important;
        background: #fff !important;
    }

    body.huun-premium-variations-active .huun-screen-group.is-open .huun-screen-slots {
        display: block !important;
    }

    body.huun-premium-variations-active .huun-screen-slot-card {
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
    }

    body.huun-premium-variations-active .huun-screen-slot-card + .huun-screen-slot-card {
        margin-top: 10px !important;
        padding-top: 10px !important;
        border-top: 1px solid #edf2f5 !important;
    }

    body.huun-premium-variations-active .huun-screen-slot-card-head {
        margin: 0 1px 7px !important;
    }

    body.huun-premium-variations-active .huun-screen-slot-position {
        color: #526776 !important;
        font-size: 10.5px !important;
    }

    body.huun-premium-variations-active .huun-screen-slot-size {
        padding: 3px 6px !important;
        border-radius: 999px !important;
        background: #f2f5f7 !important;
        color: #7a8790 !important;
        font-size: 8.5px !important;
    }

    body.huun-premium-variations-active .huun-screen-type-choices {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }

    body.huun-premium-variations-active button.huun-screen-choice {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        min-height: 46px !important;
        padding: 0 11px !important;
        border: 1px solid #dfe7ec !important;
        border-radius: 11px !important;
        background: #fff !important;
        text-align: left !important;
    }

    body.huun-premium-variations-active button.huun-screen-choice--none {
        min-height: 42px !important;
    }

    body.huun-premium-variations-active button.huun-screen-choice.is-selected {
        border-color: #083251 !important;
        background: #083251 !important;
        color: #fff !important;
        box-shadow: 0 7px 16px rgba(8,50,81,.10) !important;
    }

    body.huun-premium-variations-active button.huun-screen-choice--none.is-selected {
        border-color: #c8d5dd !important;
        background: #eef3f6 !important;
        color: #445d6d !important;
        box-shadow: none !important;
    }

    body.huun-premium-variations-active .huun-screen-choice-title {
        font-size: 11.5px !important;
        line-height: 1.1 !important;
        text-align: left !important;
    }

    body.huun-premium-variations-active .huun-screen-choice-price {
        font-size: 10px !important;
        line-height: 1 !important;
        text-align: right !important;
    }

    body.huun-premium-variations-active .huun-screen-summary {
        margin-top: 9px !important;
        padding: 10px 11px !important;
    }

    body.huun-premium-variations-active .huun-screen-note {
        margin: 8px 3px 1px !important;
        font-size: 9px !important;
    }
}

@media (max-width: 370px) {
    body.huun-premium-variations-active button.huun-screen-group-toggle {
        min-height: 59px !important;
        padding: 9px 10px !important;
    }

    body.huun-premium-variations-active .huun-screen-side-name {
        font-size: 12px !important;
    }

    body.huun-premium-variations-active .huun-screen-group-mobile-summary {
        font-size: 9.8px !important;
    }

    body.huun-premium-variations-active button.huun-screen-choice {
        min-height: 44px !important;
        padding: 0 9px !important;
    }
}


/* =========================================================
   HUUN – PIANO LOUVER OPEN/CLOSE TEST v12.0.0
   ========================================================= */

@media (max-width: 900px) {
    body.huun-premium-variations-active .huun-ar-louver-controls {
        box-sizing: border-box !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto 10px !important;
        padding: 10px 12px !important;
        border: 1px solid rgba(207,218,225,.96) !important;
        border-radius: 16px !important;
        background: rgba(255,255,255,.98) !important;
        box-shadow: 0 8px 24px rgba(8,50,81,.08) !important;
        font-family: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
    }

    body.huun-premium-variations-active .huun-ar-louver-controls.is-unavailable {
        display: none !important;
    }

    body.huun-premium-variations-active .huun-ar-louver-head {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        margin-bottom: 9px !important;
    }

    body.huun-premium-variations-active .huun-ar-louver-label {
        color: #536876 !important;
        font-size: 10px !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    body.huun-premium-variations-active .huun-ar-louver-value {
        color: #083251 !important;
        font-size: 10px !important;
        line-height: 1 !important;
        font-weight: 800 !important;
        white-space: nowrap !important;
    }

    body.huun-premium-variations-active .huun-ar-louver-slider-wrap {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 9px !important;
    }

    body.huun-premium-variations-active .huun-ar-louver-side-label {
        color: #7a8790 !important;
        font-size: 8.5px !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    body.huun-premium-variations-active .huun-ar-louver-slider {
        -webkit-appearance: none !important;
        appearance: none !important;
        width: 100% !important;
        height: 4px !important;
        margin: 0 !important;
        border-radius: 999px !important;
        background: linear-gradient(90deg, #083251 0%, #6e8392 100%) !important;
        outline: none !important;
    }

    body.huun-premium-variations-active .huun-ar-louver-slider::-webkit-slider-runnable-track {
        height: 4px !important;
        border-radius: 999px !important;
        background: linear-gradient(90deg, #083251 0%, #6e8392 100%) !important;
    }

    body.huun-premium-variations-active .huun-ar-louver-slider::-webkit-slider-thumb {
        -webkit-appearance: none !important;
        appearance: none !important;
        width: 20px !important;
        height: 20px !important;
        margin-top: -8px !important;
        border: 2px solid #ffffff !important;
        border-radius: 50% !important;
        background: #083251 !important;
        box-shadow: 0 4px 12px rgba(8,50,81,.18) !important;
    }

    body.huun-premium-variations-active .huun-ar-louver-slider::-moz-range-track {
        height: 4px !important;
        border: 0 !important;
        border-radius: 999px !important;
        background: linear-gradient(90deg, #083251 0%, #6e8392 100%) !important;
    }

    body.huun-premium-variations-active .huun-ar-louver-slider::-moz-range-thumb {
        width: 20px !important;
        height: 20px !important;
        border: 2px solid #ffffff !important;
        border-radius: 50% !important;
        background: #083251 !important;
        box-shadow: 0 4px 12px rgba(8,50,81,.18) !important;
    }
}

@media (max-width: 370px) {
    body.huun-premium-variations-active .huun-ar-louver-controls {
        padding: 9px 10px !important;
    }

    body.huun-premium-variations-active .huun-ar-louver-label,
    body.huun-premium-variations-active .huun-ar-louver-value {
        font-size: 9px !important;
    }

    body.huun-premium-variations-active .huun-ar-louver-side-label {
        font-size: 8px !important;
    }

    body.huun-premium-variations-active .huun-ar-louver-slider-wrap {
        gap: 7px !important;
    }
}


/* v6.0.0 — one native cart submission */
body.huun-premium-variations-active
.variations_form
.single_add_to_cart_button.huun-native-cart-submitting {
    opacity: .72 !important;
}


/* =========================================================
   HUUN – DESKTOP LIVE PRODUCT PREVIEW v12.6.5
   Mobil: üstteki mevcut yapı aynen korunur.
   Masaüstü: aynı live-preview ekranın ALTINDA sabit durur.
   ========================================================= */

@media (min-width: 901px) {
    body.huun-premium-variations-active .huun-mobile-live-preview {
        box-sizing: border-box !important;
        position: fixed !important;
        left: auto !important;
        /*
         * Align to the right edge of the HUUN desktop content area instead of
         * floating in the visual center of the page.
         *
         * On ~1400 px viewports this is ~24 px from the right edge.
         * On wider monitors it follows the centered ~1410 px site container.
         */
        right: max(
            24px,
            calc((100vw - 1410px) / 2 + 14px)
        ) !important;
        top: auto !important;
        bottom: 20px !important;
        z-index: 80 !important;

        display: block !important;
        width: min(620px, calc(100vw - 48px)) !important;
        max-width: 620px !important;
        margin: 0 !important;
        padding: 0 !important;

        border: 1px solid rgba(218, 227, 233, .96) !important;
        border-radius: 20px !important;
        background: rgba(255, 255, 255, .95) !important;

        -webkit-backdrop-filter: blur(18px) saturate(1.15) !important;
        backdrop-filter: blur(18px) saturate(1.15) !important;

        box-shadow:
            0 20px 58px rgba(8, 50, 81, .15),
            0 3px 12px rgba(8, 50, 81, .06) !important;

        overflow: hidden !important;

        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;

        transform: translateY(12px) scale(.99) !important;
        transform-origin: bottom right !important;

        transition:
            opacity .2s ease,
            transform .2s ease,
            visibility .2s ease !important;

        font-family:
            "Outfit",
            -apple-system,
            BlinkMacSystemFont,
            "Segoe UI",
            Arial,
            sans-serif !important;
    }

    body.huun-premium-variations-active .huun-mobile-live-preview.is-visible {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateY(0) scale(1) !important;
    }

    body.huun-premium-variations-active .huun-live-preview-main {
        box-sizing: border-box !important;
        display: grid !important;
        grid-template-columns: 68px minmax(0, 1fr) auto 34px !important;
        align-items: center !important;
        gap: 14px !important;
        min-height: 86px !important;
        padding: 9px 11px !important;
        background: transparent !important;
    }

    body.huun-premium-variations-active .huun-live-preview-thumb {
        all: unset !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        box-sizing: border-box !important;
        display: block !important;
        position: relative !important;
        width: 68px !important;
        height: 68px !important;
        min-width: 68px !important;
        cursor: pointer !important;
        border: 1px solid #e3e9ed !important;
        border-radius: 14px !important;
        background: #f7f9fa !important;
        overflow: hidden !important;
    }

    body.huun-premium-variations-active .huun-live-preview-thumb img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        object-fit: contain !important;
        background: #fff !important;
    }

    body.huun-premium-variations-active .huun-live-preview-meta {
        min-width: 0 !important;
        align-self: center !important;
    }

    body.huun-premium-variations-active .huun-live-preview-title {
        display: block !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #10273a !important;
        font-size: 14px !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
        letter-spacing: -.01em !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body.huun-premium-variations-active .huun-live-preview-selection {
        display: block !important;
        max-width: 100% !important;
        margin: 5px 0 0 !important;
        padding: 0 !important;
        color: #73808a !important;
        font-size: 11.5px !important;
        line-height: 1.3 !important;
        font-weight: 500 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body.huun-premium-variations-active .huun-live-preview-accessories {
        display: none !important;
        max-width: 100% !important;
        margin-top: 4px !important;
        color: #2f6f50 !important;
        font-size: 10px !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body.huun-premium-variations-active .huun-live-preview-accessories.is-visible {
        display: block !important;
    }

    body.huun-premium-variations-active .huun-live-preview-price {
        min-width: 110px !important;
        max-width: 155px !important;
        color: #083251 !important;
        font-size: 15px !important;
        line-height: 1.15 !important;
        font-weight: 800 !important;
        text-align: right !important;
        white-space: nowrap !important;
    }

    body.huun-premium-variations-active .huun-live-preview-price .price,
    body.huun-premium-variations-active .huun-live-preview-price .woocommerce-Price-amount,
    body.huun-premium-variations-active .huun-live-preview-price ins {
        color: #083251 !important;
        font-size: inherit !important;
        line-height: inherit !important;
        font-weight: 800 !important;
        text-decoration: none !important;
    }

    body.huun-premium-variations-active .huun-live-preview-price del {
        display: block !important;
        margin-bottom: 3px !important;
        color: #9aa4ac !important;
        font-size: 10.5px !important;
        line-height: 1 !important;
        font-weight: 500 !important;
    }

    body.huun-premium-variations-active .huun-live-preview-price-label {
        display: block !important;
        margin-bottom: 3px !important;
        color: #7a8790 !important;
        font-size: 8.5px !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: .05em !important;
    }

    body.huun-premium-variations-active .huun-live-preview-total-amount {
        display: block !important;
        color: #083251 !important;
        font-size: 15px !important;
        line-height: 1.1 !important;
        font-weight: 800 !important;
        white-space: nowrap !important;
    }

    body.huun-premium-variations-active .huun-live-preview-toggle {
        all: unset !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        box-sizing: border-box !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 34px !important;
        height: 34px !important;
        border-radius: 50% !important;
        background: #eef3f6 !important;
        color: #083251 !important;
        cursor: pointer !important;
        transition: background .18s ease !important;
    }

    body.huun-premium-variations-active .huun-live-preview-toggle:hover {
        background: #e3ebf0 !important;
    }

    body.huun-premium-variations-active .huun-live-preview-toggle svg {
        display: block !important;
        width: 16px !important;
        height: 16px !important;
        transition: transform .2s ease !important;
    }

    body.huun-premium-variations-active .huun-mobile-live-preview.is-expanded
    .huun-live-preview-toggle svg {
        transform: rotate(180deg) !important;
    }

    body.huun-premium-variations-active .huun-live-preview-expanded {
        display: none !important;
        box-sizing: border-box !important;
        padding: 0 12px 12px !important;
        border-top: 1px solid #edf2f5 !important;
        background: rgba(255,255,255,.98) !important;
    }

    body.huun-premium-variations-active .huun-mobile-live-preview.is-expanded
    .huun-live-preview-expanded {
        display: block !important;
    }

    body.huun-premium-variations-active .huun-mobile-live-preview.is-expanded {
        max-height: calc(100vh - 40px) !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
    }

    body.huun-premium-variations-active .huun-live-preview-large {
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: min(320px, 42vh) !important;
        margin-top: 12px !important;
        padding: 10px !important;
        border: 1px solid #e7ecef !important;
        border-radius: 16px !important;
        background: #fff !important;
        overflow: hidden !important;
    }

    body.huun-premium-variations-active .huun-live-preview-large img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: contain !important;
    }

    body.huun-premium-variations-active .huun-live-preview-expanded-screens {
        display: none !important;
        box-sizing: border-box !important;
        margin: 10px 0 0 !important;
        padding: 10px 12px !important;
        border: 1px solid #e7ecef !important;
        border-radius: 12px !important;
        background: #f8fafb !important;
    }

    body.huun-premium-variations-active .huun-live-preview-expanded-screens.is-visible {
        display: block !important;
    }

    body.huun-premium-variations-active .huun-live-preview-expanded-screens-title {
        display: block !important;
        margin-bottom: 4px !important;
        color: #083251 !important;
        font-size: 10px !important;
        line-height: 1.1 !important;
        font-weight: 800 !important;
    }

    body.huun-premium-variations-active .huun-live-preview-expanded-screens-list {
        display: block !important;
        color: #697984 !important;
        font-size: 10px !important;
        line-height: 1.35 !important;
        font-weight: 500 !important;
    }

    body.huun-premium-variations-active .huun-live-preview-expanded-footer {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 14px !important;
        margin-top: 10px !important;
        padding: 0 3px 1px !important;
    }

    body.huun-premium-variations-active .huun-live-preview-expanded-selection {
        min-width: 0 !important;
        flex: 1 1 auto !important;
        color: #66737e !important;
        font-size: 11px !important;
        line-height: 1.35 !important;
        font-weight: 500 !important;
    }

    /*
     * AR stays mobile-only.
     * Desktop sticky preview intentionally has no AR CTA.
     */
    body.huun-premium-variations-active .huun-live-preview-ar-row {
        display: none !important;
    }
}

@media (min-width: 901px) and (max-width: 1100px) {
    body.huun-premium-variations-active .huun-mobile-live-preview {
        right: 18px !important;
        width: min(600px, calc(100vw - 36px)) !important;
        max-width: 600px !important;
        bottom: 16px !important;
    }
}


/* =========================================================
   HUUN – PIANO DESKTOP AR QR HANDOFF v12.6.5
   ========================================================= */

.huun-desktop-ar-qr-card {
    display: none;
}

@media (min-width: 901px) {
    body.huun-premium-variations-active
    .huun-desktop-ar-qr-card {
        box-sizing: border-box !important;
        display: none !important;
        grid-template-columns: minmax(0, 1fr) 142px !important;
        align-items: center !important;
        gap: 16px !important;
        margin: 12px 0 0 !important;
        padding: 18px 18px 18px 20px !important;
        border: 1px solid #dfe7ec !important;
        border-radius: 16px !important;
        background:
            linear-gradient(135deg, rgba(247,250,252,.98), rgba(240,245,248,.98)) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.85) !important;
    }

    body.huun-premium-variations-active
    .huun-desktop-ar-qr-card.is-available {
        display: grid !important;
    }

    body.huun-premium-variations-active
    .huun-desktop-ar-qr-copy {
        min-width: 0 !important;
    }

    body.huun-premium-variations-active
    .huun-desktop-ar-qr-eyebrow {
        display: inline-flex !important;
        align-items: center !important;
        min-height: 22px !important;
        margin: 0 0 9px !important;
        padding: 0 9px !important;
        border: 1px solid rgba(8,50,81,.12) !important;
        border-radius: 999px !important;
        background: rgba(8,50,81,.06) !important;
        color: #083251 !important;
        font-size: 9px !important;
        line-height: 1 !important;
        font-weight: 800 !important;
        letter-spacing: .10em !important;
    }

    body.huun-premium-variations-active
    .huun-desktop-ar-qr-title {
        margin: 0 !important;
        color: #0c2c45 !important;
        font-size: 17px !important;
        line-height: 1.2 !important;
        font-weight: 800 !important;
        letter-spacing: -.02em !important;
    }

    body.huun-premium-variations-active
    .huun-desktop-ar-qr-text {
        max-width: 480px !important;
        margin: 7px 0 0 !important;
        color: #657681 !important;
        font-size: 12px !important;
        line-height: 1.45 !important;
        font-weight: 500 !important;
    }

    body.huun-premium-variations-active
    .huun-desktop-ar-qr-selection {
        display: inline-flex !important;
        align-items: center !important;
        max-width: 100% !important;
        margin-top: 12px !important;
        padding: 7px 10px !important;
        border-radius: 9px !important;
        background: #ffffff !important;
        color: #083251 !important;
        font-size: 10.5px !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
        box-shadow: 0 1px 0 rgba(8,50,81,.04) !important;
    }

    body.huun-premium-variations-active
    .huun-desktop-ar-qr-hint {
        margin-top: 7px !important;
        color: #85919a !important;
        font-size: 9.5px !important;
        line-height: 1.35 !important;
        font-weight: 500 !important;
    }

    body.huun-premium-variations-active
    .huun-desktop-ar-qr-code {
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 142px !important;
        height: 142px !important;
        padding: 8px !important;
        border: 1px solid #dbe3e8 !important;
        border-radius: 14px !important;
        background: #fff !important;
        box-shadow: 0 8px 22px rgba(8,50,81,.08) !important;
        overflow: hidden !important;
    }

    body.huun-premium-variations-active
    .huun-desktop-ar-qr-code .huun-qr-svg {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
    }

    body.huun-premium-variations-active
    .huun-desktop-ar-qr-error {
        padding: 8px !important;
        color: #8a4b42 !important;
        font-size: 10px !important;
        line-height: 1.35 !important;
        font-weight: 600 !important;
        text-align: center !important;
    }
}

@media (min-width: 901px) and (max-width: 1100px) {
    body.huun-premium-variations-active
    .huun-desktop-ar-qr-card {
        grid-template-columns: minmax(0, 1fr) 136px !important;
        gap: 16px !important;
        padding: 16px !important;
    }

    body.huun-premium-variations-active
    .huun-desktop-ar-qr-code {
        width: 136px !important;
        height: 136px !important;
    }
}

@media (max-width: 900px) {
    body.huun-premium-variations-active
    .huun-desktop-ar-qr-card {
        display: none !important;
    }
}


/* =========================================================
   HUUN – PIANO DESKTOP AR DISCOVERY TEASER v12.6.5
   Visible BEFORE the desktop preview is opened.
   ========================================================= */

.huun-desktop-ar-teaser {
    display: none;
}

@media (min-width: 901px) {
    body.huun-premium-variations-active
    .huun-desktop-ar-teaser {
        all: unset !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        box-sizing: border-box !important;

        display: grid !important;
        grid-template-columns: 42px minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 12px !important;

        width: calc(100% - 20px) !important;
        min-height: 62px !important;
        margin: 0 10px 10px !important;
        padding: 9px 11px !important;

        border: 1px solid rgba(20, 104, 153, .16) !important;
        border-radius: 14px !important;

        background:
            linear-gradient(
                105deg,
                rgba(8, 50, 81, .98) 0%,
                rgba(10, 67, 105, .97) 52%,
                rgba(15, 91, 137, .95) 100%
            ) !important;

        color: #fff !important;
        box-shadow:
            0 8px 22px rgba(8, 50, 81, .15),
            inset 0 1px 0 rgba(255,255,255,.08) !important;

        cursor: default !important;
        overflow: hidden !important;
        position: relative !important;
        font-family:
            "Outfit",
            -apple-system,
            BlinkMacSystemFont,
            "Segoe UI",
            Arial,
            sans-serif !important;
    }

    body.huun-premium-variations-active
    .huun-desktop-ar-teaser::after {
        content: "" !important;
        position: absolute !important;
        top: -44px !important;
        right: 105px !important;
        width: 130px !important;
        height: 130px !important;
        border-radius: 50% !important;
        background: rgba(255,255,255,.05) !important;
        pointer-events: none !important;
    }

    body.huun-premium-variations-active
    .huun-desktop-ar-teaser.is-ready {
        cursor: pointer !important;
        border-color: rgba(110, 205, 255, .30) !important;
    }

    body.huun-premium-variations-active
    .huun-desktop-ar-teaser.is-ready:hover {
        transform: translateY(-1px) !important;
        box-shadow:
            0 12px 28px rgba(8, 50, 81, .22),
            inset 0 1px 0 rgba(255,255,255,.10) !important;
    }

    body.huun-premium-variations-active
    .huun-desktop-ar-teaser-icon {
        box-sizing: border-box !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 42px !important;
        height: 42px !important;
        border: 1px solid rgba(255,255,255,.18) !important;
        border-radius: 12px !important;
        background: rgba(255,255,255,.10) !important;
        color: #fff !important;
    }

    body.huun-premium-variations-active
    .huun-desktop-ar-teaser-icon svg {
        display: block !important;
        width: 22px !important;
        height: 22px !important;
    }

    body.huun-premium-variations-active
    .huun-desktop-ar-teaser-copy {
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }

    body.huun-premium-variations-active
    .huun-desktop-ar-teaser-kicker {
        display: block !important;
        margin: 0 0 3px !important;
        color: #9ed9ff !important;
        font-size: 8.5px !important;
        line-height: 1 !important;
        font-weight: 800 !important;
        letter-spacing: .13em !important;
    }

    body.huun-premium-variations-active
    .huun-desktop-ar-teaser-title {
        display: block !important;
        margin: 0 !important;
        color: #fff !important;
        font-size: 13px !important;
        line-height: 1.18 !important;
        font-weight: 800 !important;
        letter-spacing: -.01em !important;
    }

    body.huun-premium-variations-active
    .huun-desktop-ar-teaser-text {
        display: block !important;
        margin-top: 3px !important;
        color: rgba(255,255,255,.72) !important;
        font-size: 9.5px !important;
        line-height: 1.25 !important;
        font-weight: 500 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body.huun-premium-variations-active
    .huun-desktop-ar-teaser-action {
        position: relative !important;
        z-index: 1 !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 7px !important;
        min-height: 36px !important;
        padding: 0 9px 0 11px !important;
        border: 1px solid rgba(255,255,255,.14) !important;
        border-radius: 10px !important;
        background: rgba(255,255,255,.08) !important;
        color: rgba(255,255,255,.60) !important;
        white-space: nowrap !important;
    }

    body.huun-premium-variations-active
    .huun-desktop-ar-teaser.is-ready
    .huun-desktop-ar-teaser-action {
        background: #fff !important;
        border-color: #fff !important;
        color: #083251 !important;
        box-shadow: 0 4px 12px rgba(0,0,0,.10) !important;
    }

    body.huun-premium-variations-active
    .huun-desktop-ar-teaser-action-label {
        font-size: 10px !important;
        line-height: 1 !important;
        font-weight: 800 !important;
    }

    body.huun-premium-variations-active
    .huun-desktop-ar-teaser-qr {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 20px !important;
        min-width: 25px !important;
        padding: 0 5px !important;
        border-radius: 6px !important;
        background: rgba(255,255,255,.12) !important;
        color: inherit !important;
        font-size: 8px !important;
        line-height: 1 !important;
        font-weight: 900 !important;
        letter-spacing: .05em !important;
    }

    body.huun-premium-variations-active
    .huun-desktop-ar-teaser.is-ready
    .huun-desktop-ar-teaser-qr {
        background: #eaf4fa !important;
    }

    body.huun-premium-variations-active
    .huun-desktop-ar-teaser-arrow {
        font-size: 15px !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        transition: transform .18s ease !important;
    }

    body.huun-premium-variations-active
    .huun-desktop-ar-teaser.is-ready:hover
    .huun-desktop-ar-teaser-arrow {
        transform: translateX(2px) !important;
    }

    body.huun-premium-variations-active
    .huun-desktop-ar-qr-card.huun-qr-attention {
        animation: huunDesktopQrAttention .9s ease both !important;
    }

    @keyframes huunDesktopQrAttention {
        0% {
            box-shadow: 0 0 0 0 rgba(33, 132, 190, .00) !important;
        }
        35% {
            box-shadow: 0 0 0 5px rgba(33, 132, 190, .14) !important;
        }
        100% {
            box-shadow: 0 0 0 0 rgba(33, 132, 190, .00) !important;
        }
    }

    body.huun-premium-variations-active
    .huun-mobile-live-preview.is-expanded
    .huun-desktop-ar-teaser {
        margin-bottom: 0 !important;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }
}

@media (min-width: 901px) and (max-width: 1100px) {
    body.huun-premium-variations-active
    .huun-desktop-ar-teaser-text {
        max-width: 310px !important;
    }

    body.huun-premium-variations-active
    .huun-desktop-ar-teaser-action-label {
        display: none !important;
    }
}

@media (max-width: 900px) {
    body.huun-premium-variations-active
    .huun-desktop-ar-teaser {
        display: none !important;
    }
}


/* =========================================================
   HUUN – EQUA WM MONTAGERICHTUNG v12.6.5
   ========================================================= */

body.huun-premium-variations-active .huun-screen-wall-direction {
    box-sizing: border-box !important;
    margin: 0 0 12px !important;
    padding: 15px !important;
    border: 1px solid #dbe6ec !important;
    border-radius: 17px !important;
    background:
        linear-gradient(135deg, #f8fbfc 0%, #f2f7f9 100%) !important;
}

body.huun-premium-variations-active .huun-screen-wall-direction-head {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 16px !important;
    margin-bottom: 12px !important;
}

body.huun-premium-variations-active .huun-screen-wall-direction-title {
    display: block !important;
    color: #12314e !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    letter-spacing: -.01em !important;
}

body.huun-premium-variations-active .huun-screen-wall-direction-text {
    display: block !important;
    max-width: 680px !important;
    margin-top: 4px !important;
    color: #72808a !important;
    font-size: 10.5px !important;
    line-height: 1.4 !important;
    font-weight: 500 !important;
}

body.huun-premium-variations-active .huun-screen-wall-direction-required {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    min-height: 23px !important;
    padding: 0 8px !important;
    border-radius: 999px !important;
    background: rgba(8,50,81,.07) !important;
    color: #416078 !important;
    font-size: 8px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: .07em !important;
}

body.huun-premium-variations-active .huun-screen-wall-options {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
}

body.huun-premium-variations-active .huun-screen-wall-option {
    all: unset !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;

    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 11px !important;

    min-width: 0 !important;
    min-height: 78px !important;
    padding: 10px 11px !important;

    border: 1px solid #e0e8ed !important;
    border-radius: 14px !important;
    background: #fff !important;
    color: #153149 !important;

    cursor: pointer !important;
    transition:
        border-color .17s ease,
        box-shadow .17s ease,
        transform .17s ease,
        background .17s ease !important;
}

body.huun-premium-variations-active .huun-screen-wall-option:hover {
    border-color: #b8cad6 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 7px 18px rgba(8,50,81,.07) !important;
}

body.huun-premium-variations-active .huun-screen-wall-option.is-selected {
    border-color: #083251 !important;
    background: #f5f9fb !important;
    box-shadow:
        0 0 0 1px #083251,
        0 8px 20px rgba(8,50,81,.08) !important;
}

body.huun-premium-variations-active .huun-screen-wall-option-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 52px !important;
    height: 52px !important;
    border-radius: 12px !important;
    background: #eef4f7 !important;
    color: #466a83 !important;
}

body.huun-premium-variations-active
.huun-screen-wall-option.is-selected
.huun-screen-wall-option-icon {
    background: #083251 !important;
    color: #fff !important;
}

body.huun-premium-variations-active .huun-screen-wall-option-icon svg {
    display: block !important;
    width: 38px !important;
    height: 25px !important;
}

body.huun-premium-variations-active .huun-screen-wall-option-copy {
    min-width: 0 !important;
}

body.huun-premium-variations-active .huun-screen-wall-option-title {
    display: block !important;
    color: #153149 !important;
    font-size: 11.5px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
}

body.huun-premium-variations-active .huun-screen-wall-option-desc {
    display: block !important;
    margin-top: 4px !important;
    color: #7a8790 !important;
    font-size: 9.5px !important;
    line-height: 1.3 !important;
    font-weight: 500 !important;
}

body.huun-premium-variations-active .huun-screen-wall-option-size {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 43px !important;
    min-height: 28px !important;
    padding: 0 8px !important;
    border-radius: 999px !important;
    background: #edf3f6 !important;
    color: #526a7b !important;
    font-size: 9.5px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
}

body.huun-premium-variations-active
.huun-screen-wall-option.is-selected
.huun-screen-wall-option-size {
    background: #dfeaf0 !important;
    color: #083251 !important;
}

body.huun-premium-variations-active .huun-screen-wall-waiting {
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 52px !important;
    margin: 0 !important;
    padding: 11px 14px !important;
    border: 1px dashed #cbd9e2 !important;
    border-radius: 13px !important;
    background: rgba(255,255,255,.7) !important;
    color: #70808b !important;
    font-size: 10.5px !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
    text-align: center !important;
}

body.huun-premium-variations-active .huun-screen-groups.is-waiting {
    display: none !important;
}

@media (max-width: 767px) {
    body.huun-premium-variations-active .huun-screen-wall-direction {
        padding: 12px !important;
        margin-bottom: 10px !important;
    }

    body.huun-premium-variations-active .huun-screen-wall-direction-head {
        gap: 10px !important;
        margin-bottom: 10px !important;
    }

    body.huun-premium-variations-active .huun-screen-wall-direction-required {
        display: none !important;
    }

    body.huun-premium-variations-active .huun-screen-wall-options {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    body.huun-premium-variations-active .huun-screen-wall-option {
        grid-template-columns: 44px minmax(0, 1fr) auto !important;
        min-height: 68px !important;
        padding: 8px 9px !important;
    }

    body.huun-premium-variations-active .huun-screen-wall-option-icon {
        width: 44px !important;
        height: 44px !important;
        border-radius: 11px !important;
    }

    body.huun-premium-variations-active .huun-screen-wall-option-icon svg {
        width: 32px !important;
        height: 22px !important;
    }

    body.huun-premium-variations-active .huun-screen-wall-option-title {
        font-size: 11px !important;
    }

    body.huun-premium-variations-active .huun-screen-wall-option-desc {
        font-size: 9px !important;
    }
}


/* =========================================================
   HUUN – PIANO AR PERFORMANCE / LAZY LOAD v12.6.5
   ========================================================= */

body.huun-premium-variations-active
.huun-live-preview-ar-button.is-loading {
    opacity: .72 !important;
    cursor: wait !important;
    pointer-events: none !important;
}

body.huun-premium-variations-active
.huun-desktop-ar-qr-loading {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 90px !important;
    padding: 10px !important;
    color: #677985 !important;
    font-size: 10px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
    text-align: center !important;
}

body.huun-premium-variations-active
.huun-desktop-ar-teaser[aria-busy="true"] {
    cursor: wait !important;
}


/* =========================================================
   HUUN – SCREEN GROUP VISUAL EQUALITY v12.6.5
   ========================================================= */

body.huun-premium-variations-active .huun-screen-group {
    /*
     * The first non-split group (e.g. Vorderseite) previously occupied only
     * one half of the 2-column grid while split groups spanned the full row.
     * This made the whole configurator look visually uneven.
     *
     * Force every top-level group to span the full row so all side sections
     * look consistent.
     */
    grid-column: 1 / -1 !important;
}

body.huun-premium-variations-active .huun-screen-slots {
    align-items: stretch !important;
}

body.huun-premium-variations-active .huun-screen-group.is-split .huun-screen-slots {
    align-items: stretch !important;
}

body.huun-premium-variations-active .huun-screen-slot-card {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

body.huun-premium-variations-active .huun-screen-type-choices {
    flex: 1 1 auto !important;
}

@media (max-width: 900px) {
    body.huun-premium-variations-active .huun-screen-group {
        grid-column: auto !important;
    }
}


/* =========================================================
   HUUN – SPLIT SLOT TRUE ALIGNMENT FIX v12.6.5
   ========================================================= */

body.huun-premium-variations-active .huun-screen-group.is-split .huun-screen-slots {
    gap: 14px !important;
    align-items: stretch !important;
}

body.huun-premium-variations-active .huun-screen-group.is-split .huun-screen-slot-card + .huun-screen-slot-card {
    /*
     * The generic sibling spacing rule added margin-top to every slot card
     * after the first one. In a 2-column split grid this also pushed the
     * RIGHT card down, making the pair look unequal.
     */
    margin-top: 0 !important;
}

body.huun-premium-variations-active .huun-screen-group.is-split .huun-screen-slot-card {
    align-self: stretch !important;
}