/* VipConfig v0.12.0 - extracted static buybox/configurator styles.
   No Twig variables; rendering logic remains in Twig. */

/* VipConfig Layout-Auswahl – zentriert, groß, responsive */
#vipconfig-category-slider {
    width: 100%;
    max-width: 1180px;
    margin: 34px auto 40px auto !important;
    text-align: center;
    display: block;
}

#vipconfig-category-slider::before {
    content: "WÄHLE DEIN LAYOUT";
    display: block;
    font-size: 28px;
    letter-spacing: .16em;
    font-weight: 400;
    color: #666;
    margin: 0 auto 8px auto;
    text-align: center;
}

#vipconfig-category-slider::after {
    content: "Hier findest Du für viele Anlässe tolle Layouts";
    display: block;
    font-size: 16px;
    letter-spacing: .10em;
    color: #666;
    margin: 0 auto 24px auto;
    text-align: center;
}

#vipconfig-category-slider .vipconfig-category-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 22px;
    margin: 0 auto 30px auto;
    width: 100%;
}

#vipconfig-category-slider .vipconfig-category-row label {
    font-size: 18px;
    font-weight: 500;
    margin: 0;
}

#vipconfig-category-select {
    max-width: 620px !important;
    width: min(620px, 74vw) !important;
    min-height: 52px;
    font-size: 18px;
    border-radius: 0;
}

#vipconfig-category-slider > div[style*="display:flex"] {
    justify-content: center !important;
    width: 100% !important;
    gap: 18px !important;
}

#vipconfig-motif-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(180px, 1fr)) !important;
    gap: 26px !important;
    width: 100% !important;
    max-width: 980px !important;
    margin: 0 auto !important;
}

.vipconfig-motif-card {
    border: 1px solid #e6e6e6 !important;
    border-radius: 8px !important;
    background: #fff !important;
    padding: 10px !important;
    cursor: pointer !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    min-height: 180px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    box-shadow: 10px 12px 22px rgba(0,0,0,.14) !important;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease !important;
}

.vipconfig-motif-card:hover {
    transform: translateY(-2px);
    box-shadow: 12px 16px 28px rgba(0,0,0,.19) !important;
}

.vipconfig-motif-card img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
}

.vipconfig-motif-card.is-active {
    border: 3px solid #111 !important;
    box-shadow: 12px 16px 28px rgba(0,0,0,.24) !important;
}



/* Überschrift "Ihre Vorschau" optisch neutralisieren, falls Theme sie links setzt */
#vipconfig-main-svg-preview {
    margin-left: auto !important;
    margin-right: auto !important;
}

@media (max-width: 991px) {
    #vipconfig-category-slider {
        max-width: 620px;
    }

    #vipconfig-motif-grid {
        grid-template-columns: repeat(2, minmax(135px, 1fr)) !important;
        max-width: 520px !important;
        gap: 18px !important;
    }

    .vipconfig-motif-card {
        min-height: 150px !important;
    }

    #vipconfig-category-slider::before {
        font-size: 25px;
        letter-spacing: 3px;
    }

    #vipconfig-category-slider::after {
        font-size: 15px;
        letter-spacing: 1.5px;
        margin-bottom: 18px;
    }

    #vipconfig-category-slider .vipconfig-category-row {
        display: block;
        margin-bottom: 20px;
    }

    #vipconfig-category-slider .vipconfig-category-row label {
        display: block;
        margin-bottom: 8px;
    }

    #vipconfig-category-select {
        width: 100% !important;
        max-width: 420px !important;
    }

    
}

[data-vipconfig-wrapper] {
        --vipconfig-preview-bg: #f3f4f6;
        --vipconfig-product-image: none;
        --vipconfig-engraving-color: #ffffff;
        --vipconfig-safe-x: 70px;
        --vipconfig-safe-y: 90px;
        --vipconfig-safe-width: 260px;
        --vipconfig-safe-height: 220px;
    }

    [data-vipconfig-wrapper] [data-vipconfig-preview],
    #vipconfig-main-svg-preview {
        width: 400px !important;
        height: 400px !important;
        min-height: 400px !important;
        max-width: 100%;
        margin: 0 auto 18px auto;
        padding: 0 !important;
        position: relative;
        overflow: hidden;
        border: 1px solid #d0d5dd;
        border-radius: 14px;
        background-color: var(--vipconfig-preview-bg);
        background-image: var(--vipconfig-product-image);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
        box-shadow: none;
        display: block;
    }

    [data-vipconfig-wrapper] [data-vipconfig-preview]::before,
    [data-vipconfig-wrapper] [data-vipconfig-preview]::after,
    #vipconfig-main-svg-preview::before,
    #vipconfig-main-svg-preview::after {
        display: none !important;
        content: none !important;
    }

    [data-vipconfig-wrapper] [data-vipconfig-preview] > svg,
    [data-vipconfig-wrapper] [data-vipconfig-preview] object,
    [data-vipconfig-wrapper] [data-vipconfig-preview] .vipconfig-preview-svg,
    #vipconfig-main-svg-preview > svg,
    #vipconfig-main-svg-preview object,
    #vipconfig-main-svg-preview .vipconfig-preview-svg {
        position: absolute !important;
        left: var(--vipconfig-safe-x) !important;
        top: var(--vipconfig-safe-y) !important;
        width: var(--vipconfig-safe-width) !important;
        height: var(--vipconfig-safe-height) !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: contain;
        filter: none !important;
        opacity: 1 !important;
        mix-blend-mode: normal !important;
        z-index: 2;
    }

    [data-vipconfig-wrapper] [data-vipconfig-preview] svg,
    [data-vipconfig-wrapper] [data-vipconfig-preview] svg *,
    #vipconfig-main-svg-preview svg,
    #vipconfig-main-svg-preview svg * {
        color: var(--vipconfig-engraving-color) !important;
        fill: var(--vipconfig-engraving-color) !important;
        stroke: var(--vipconfig-engraving-color) !important;
    }

    .vipconfig-preview-hint {
        display: none !important;
    }

    @media (max-width: 480px) {
        [data-vipconfig-wrapper] [data-vipconfig-preview],
    #vipconfig-main-svg-preview {
            width: min(400px, 100%) !important;
            aspect-ratio: 1 / 1;
            height: auto !important;
            min-height: 0 !important;
        }
    }

/* 0.10.58 clean preview */
    #vipconfig-main-svg-preview[data-vipconfig-preview] {
        width: 400px !important;
        height: 400px !important;
        min-height: 400px !important;
        max-width: 400px !important;
        margin: 0 auto 18px auto !important;
        padding: 0 !important;
        position: relative !important;
        overflow: hidden !important;
        border: 1px solid #d0d5dd !important;
        border-radius: 14px !important;
        background: var(--vipconfig-preview-bg, #f3f4f6) !important;
        box-shadow: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #vipconfig-main-svg-preview[data-vipconfig-preview]::before {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        background-image: var(--vipconfig-product-image, none) !important;
        background-color: transparent !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center center !important;
        z-index: 1 !important;
        pointer-events: none !important;
    }

    #vipconfig-main-svg-preview[data-vipconfig-preview]::after {
        display: none !important;
        content: none !important;
    }

    #vipconfig-main-svg-preview[data-vipconfig-preview] > svg {
        position: absolute !important;
        left: var(--vipconfig-safe-x, 70px) !important;
        top: var(--vipconfig-safe-y, 90px) !important;
        width: var(--vipconfig-safe-width, 260px) !important;
        height: var(--vipconfig-safe-height, 220px) !important;
        max-width: none !important;
        max-height: none !important;
        z-index: 2 !important;
        background: transparent !important;
        filter: none !important;
        opacity: 1 !important;
        mix-blend-mode: normal !important;
        pointer-events: none !important;
        user-select: none !important;
    }

    #vipconfig-main-svg-preview[data-vipconfig-preview] svg,
    #vipconfig-main-svg-preview[data-vipconfig-preview] svg * {
        color: var(--vipconfig-engraving-color, #ffffff) !important;
        fill: var(--vipconfig-engraving-color, #ffffff) !important;
        stroke: var(--vipconfig-engraving-color, #ffffff) !important;
        font-family: var(--vipconfig-font-family, Arial) !important;
    }

    @media (max-width: 480px) {
        #vipconfig-main-svg-preview[data-vipconfig-preview] {
            width: min(400px, 100%) !important;
            height: auto !important;
            aspect-ratio: 1 / 1 !important;
            min-height: 0 !important;
        }
    }

/* 0.10.59 final preview stabilization */
    #vipconfig-main-svg-preview[data-vipconfig-preview] {
        width: 400px !important;
        height: 400px !important;
        min-height: 400px !important;
        max-width: 400px !important;
        margin: 0 auto 18px auto !important;
        padding: 0 !important;
        position: relative !important;
        overflow: hidden !important;
        border: 1px solid #d0d5dd !important;
        border-radius: 14px !important;
        background-color: var(--vipconfig-preview-bg, #f3f4f6) !important;
        background-image: var(--vipconfig-product-image, none) !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center center !important;
        box-shadow: none !important;
        display: block !important;
    }

    #vipconfig-main-svg-preview[data-vipconfig-preview]::before,
    #vipconfig-main-svg-preview[data-vipconfig-preview]::after {
        display: none !important;
        content: none !important;
    }

    #vipconfig-main-svg-preview[data-vipconfig-preview] > svg {
        position: absolute !important;
        left: var(--vipconfig-safe-x, 70px) !important;
        top: var(--vipconfig-safe-y, 90px) !important;
        width: var(--vipconfig-safe-width, 260px) !important;
        height: var(--vipconfig-safe-height, 220px) !important;
        max-width: none !important;
        max-height: none !important;
        background: transparent !important;
        filter: none !important;
        opacity: 1 !important;
        mix-blend-mode: normal !important;
        pointer-events: none !important;
        user-select: none !important;
    }

    #vipconfig-main-svg-preview[data-vipconfig-preview] svg text,
    #vipconfig-main-svg-preview[data-vipconfig-preview] svg tspan {
        fill: var(--vipconfig-engraving-color, #ffffff) !important;
        stroke: none !important;
        font-family: var(--vipconfig-font-family, Arial) !important;
    }

    #vipconfig-main-svg-preview[data-vipconfig-preview] svg rect[fill="#fff"],
    #vipconfig-main-svg-preview[data-vipconfig-preview] svg rect[fill="#ffffff"],
    #vipconfig-main-svg-preview[data-vipconfig-preview] svg rect[fill="white"] {
        fill: transparent !important;
    }

/* VipConfig quick fix: SVG-Hintergrundrechteck immer transparent lassen */
#vipconfig-main-svg-preview svg > rect[width="800"][height="400"] {
    fill: transparent !important;
    stroke: none !important;
}

/* VipConfig Flow: Sticky Vorschau oben, Konfiguration darunter */
#vipconfig-preview-sticky-shell {
    position: sticky;
    top: 10px;
    z-index: 20;
    background: #fff;
    padding: 16px 12px 18px 12px;
    margin: 0 auto 28px auto;
    border-bottom: 1px solid #e5e5e5;
    text-align: center;
}

#vipconfig-preview-sticky-shell h2 {
    margin: 0 0 14px 0;
    font-size: 30px;
    letter-spacing: 5px;
    font-weight: 600;
    color: #333;
    text-transform: uppercase;
}

#vipconfig-preview-sticky-shell #vipconfig-main-svg-preview {
    margin-left: auto !important;
    margin-right: auto !important;
}

#vipconfig-layout-headline {
    text-align: center;
    margin: 30px auto 24px auto;
}

#vipconfig-layout-headline h2 {
    margin: 0 0 8px 0;
    font-size: 28px;
    letter-spacing: .16em;
    font-weight: 400;
    color: #666;
    text-transform: uppercase;
}

#vipconfig-layout-headline p {
    margin: 0;
    font-size: 16px;
    letter-spacing: .10em;
    color: #666;
}

#vipconfig-text-config-shell {
    max-width: 760px;
    margin: 28px auto 34px auto;
    text-align: left;
}

#vipconfig-text-config-shell h3 {
    text-align: center;
    margin: 0 0 18px 0;
    font-size: 24px;
    letter-spacing: 3px;
    font-weight: 500;
    color: #555;
    text-transform: uppercase;
}

#vipconfig-motif-fields {
    display: block !important;
}

#vipconfig-motif-fields label {
    display: block;
    margin-bottom: 14px;
}

#vipconfig-motif-fields input {
    min-height: 46px;
    font-size: 17px;
}

@media (max-width: 767px) {
    #vipconfig-preview-sticky-shell {
        top: 0;
        padding: 10px 8px 12px 8px;
    }

    #vipconfig-preview-sticky-shell h2 {
        font-size: 22px;
        letter-spacing: 3px;
    }

    #vipconfig-layout-headline h2 {
        font-size: 24px;
        letter-spacing: 3px;
    }

    #vipconfig-layout-headline p {
        font-size: 14px;
        letter-spacing: 1px;
    }
}

/* VipConfig Preview: vollständiges 400x400 SVG ohne Abschneiden, größerer Hintergrund */
#vipconfig-main-svg-preview {
    width: 420px !important;
    height: 420px !important;
    max-width: 100% !important;
    background-size: 420px 420px !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    overflow: visible !important;
}

#vipconfig-main-svg-preview svg {
    width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
}

@media (max-width: 767px) {
    #vipconfig-main-svg-preview {
        width: min(92vw, 420px) !important;
        height: min(92vw, 420px) !important;
        background-size: contain !important;
    }
}

/* VipConfig: alte Demo-/Legacy-Konfiguratorbereiche ausblenden */
#vipconfig-motif-selector,
#vipconfig-motif-select,
.vipconfig-old-configurator,
.vipconfig-demo-configurator,
[data-vipconfig-legacy],
[data-vipconfig-old],
[data-vipconfig-original-config],
#vipconfig-configurator,
#vipconfig-product-configurator {
    display: none !important;
}

/* Texte/Blöcke über Überschrift ausblenden, soweit sie Legacy sind */
#vipconfig-category-slider + #vipconfig-motif-selector {
    display: none !important;
}

/* Sticky vorerst deaktivieren, damit nichts springt */
#vipconfig-preview-sticky-shell {
    position: relative !important;
    top: auto !important;
    z-index: auto !important;
}

/* VipConfig Modern UI separat vom alten Wrapper */
#vipconfig-modern-root {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto 40px auto;
}

#vipconfig-wrapper.vipconfig-hide-legacy > div.vipconfig-layout-gallery,
#vipconfig-wrapper.vipconfig-hide-legacy > div:not(.vipconfig-layout-gallery) {
    display: none !important;
}

/* Legacy Wrapper sofort unsichtbar, verhindert FOUC/Springen */
#vipconfig-wrapper {
    visibility: hidden;
}

#vipconfig-wrapper.vipconfig-hide-legacy {
    visibility: visible;
}

#vipconfig-wrapper.vipconfig-hide-legacy > div.vipconfig-layout-gallery,
#vipconfig-wrapper.vipconfig-hide-legacy > div:not(.vipconfig-layout-gallery) {
    display: none !important;
}

#vipconfig-modern-root {
    visibility: visible !important;
}

/* VipConfig Preview Reset: sauber, nicht sticky */
#vipconfig-preview-sticky-shell {
    position: relative !important;
    top: auto !important;
    z-index: auto !important;
    background: #fff !important;
    padding: 18px 10px 24px 10px !important;
    margin: 0 auto 34px auto !important;
    border-bottom: 1px solid #e5e5e5 !important;
    box-shadow: none !important;
    text-align: center !important;
}

#vipconfig-preview-sticky-shell h2 {
    margin: 0 0 14px 0 !important;
    font-size: 30px !important;
    letter-spacing: 6px !important;
    text-transform: uppercase !important;
}

#vipconfig-main-svg-preview {
    width: 420px !important;
    height: 420px !important;
    max-width: 92vw !important;
    margin: 0 auto !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    overflow: hidden !important;
}

#vipconfig-main-svg-preview svg {
    width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
}

#vipconfig-backengraving-real {
    max-width: 980px;
    margin: 42px auto 46px auto;
    text-align: center;
}
#vipconfig-backengraving-real h3 {
    margin: 0 0 10px 0;
    font-size: 30px;
    letter-spacing: 6px;
    font-weight: 500;
    color: #666;
    text-transform: uppercase;
}
#vipconfig-backengraving-real p {
    margin: 0 0 28px 0;
    font-size: 18px;
    letter-spacing: 3px;
    color: #666;
}
.vipconfig-backengraving-real-buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(240px, 1fr));
    gap: 22px;
}
.vipconfig-backengraving-real-btn {
    border: 0;
    background: #777;
    color: #fff;
    min-height: 74px;
    font-size: 27px;
    letter-spacing: 3px;
    cursor: pointer;
}
.vipconfig-backengraving-real-btn.is-active {
    background: #000;
}
#vipconfig-backengraving-real-text {
    display: none;
    max-width: 720px;
    margin: 28px auto 0 auto;
    text-align: left;
}
#vipconfig-backengraving-real textarea {
    width: 100%;
    min-height: 90px;
    font-size: 18px;
    padding: 12px;
}
@media (max-width: 767px) {
    .vipconfig-backengraving-real-buttons {
        grid-template-columns: 1fr;
    }
}


/* VipConfig v0.18.74 - CTA oben rechts + Designer unter Beschreibung */
.vipconfig-product-right-cta {
    width: 100%;
    max-width: 480px;
    border: 1px solid #e2e2e2;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    padding: 20px;
    margin: 0 0 24px 0;
    text-align: left;
}

.vipconfig-product-right-cta__price {
    font-size: 30px;
    line-height: 1.15;
    font-weight: 600;
    color: #d71920;
    margin-bottom: 4px;
}

.vipconfig-product-right-cta__tax {
    font-size: 12px;
    color: #666;
    margin-bottom: 14px;
}

.vipconfig-product-right-cta__delivery {
    font-size: 14px;
    margin-bottom: 14px;
    color: #169b62;
}

.vipconfig-product-right-cta__number {
    font-size: 13px;
    margin-bottom: 16px;
}

.vipconfig-product-right-cta__button {
    width: 100%;
    border: 0;
    background: #000;
    color: #fff;
    min-height: 48px;
    padding: 0 18px;
    font-size: 16px;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
}

.vipconfig-product-right-cta__button:hover,
.vipconfig-product-right-cta__button:focus {
    background: #222;
    color: #fff;
}

.vipconfig-product-right-cta__hint {
    font-size: 12px;
    color: #666;
    line-height: 1.4;
    margin-top: 10px;
}

.vipconfig-below-description-stage {
    clear: both;
    width: 100%;
    max-width: 1240px;
    margin: 42px auto 40px auto;
    padding: 0 15px;
    scroll-margin-top: 110px;
}

.vipconfig-below-description-headline {
    text-align: center;
    font-size: 32px;
    line-height: 1.2;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: #666;
    margin: 0 auto 28px auto;
}

#vipconfig-wrapper[data-vipconfig-layout-position="below-description"],
.vipconfig-layout-gallery[data-vipconfig-layout-position="below-description"],
#vipconfig-modern-root[data-vipconfig-layout-position="below-description"] {
    max-width: 1180px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

@media (max-width: 767px) {
    .vipconfig-product-right-cta {
        max-width: none;
        padding: 16px;
        margin-bottom: 18px;
    }

    .vipconfig-product-right-cta__price {
        font-size: 25px;
    }

    .vipconfig-below-description-headline {
        font-size: 24px;
        letter-spacing: .06em;
    }
}


/* VipConfig v0.18.75 - finale Warenkorb-Box unter dem Designer */
.vipconfig-final-add-to-cart {
    max-width: 680px;
    margin: 42px auto 10px auto;
    padding: 28px;
    border-top: 1px solid #d8d8d8;
    text-align: center;
}

.vipconfig-final-add-to-cart__headline {
    font-size: 24px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #666;
    margin-bottom: 20px;
}

.vipconfig-final-add-to-cart__price {
    font-size: 32px;
    line-height: 1.15;
    color: #666;
    margin-bottom: 6px;
}

.vipconfig-final-add-to-cart__tax {
    font-size: 13px;
    color: #666;
    margin-bottom: 24px;
}

.vipconfig-final-add-to-cart__form {
    width: 100%;
}

.vipconfig-final-add-to-cart__row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 16px;
}

.vipconfig-final-add-to-cart__qty-label {
    font-weight: 600;
    margin: 0;
}

.vipconfig-final-add-to-cart__qty {
    width: 110px;
    text-align: center;
}

.vipconfig-final-add-to-cart__button {
    width: 100%;
    min-height: 54px;
    background: #000;
    border-color: #000;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: 18px;
}

.vipconfig-final-add-to-cart__button:hover,
.vipconfig-final-add-to-cart__button:focus {
    background: #222;
    border-color: #222;
    color: #fff;
}

@media (max-width: 767px) {
    .vipconfig-final-add-to-cart {
        padding: 22px 12px;
        margin-top: 30px;
    }

    .vipconfig-final-add-to-cart__headline {
        font-size: 20px;
    }

    .vipconfig-final-add-to-cart__row {
        flex-direction: column;
        gap: 8px;
    }

    .vipconfig-final-add-to-cart__qty {
        width: 100%;
        max-width: 180px;
    }
}


/* VipConfig v0.18.76 - Live-Zusammenfassung */
.vipconfig-final-summary {
    max-width: 620px;
    margin: 0 auto 24px auto;
}

.vipconfig-final-summary__title {
    font-size: 16px;
    letter-spacing: .06em;
    color: #666;
    margin-bottom: 12px;
}

.vipconfig-final-summary__table {
    width: 100%;
    background: #ebe7e2;
    text-align: left;
}

.vipconfig-final-summary__row {
    display: grid;
    grid-template-columns: 1fr 120px;
    gap: 12px;
    padding: 10px 18px;
    border-bottom: 1px solid rgba(255,255,255,.75);
    font-size: 16px;
    color: #666;
}

.vipconfig-final-summary__row:first-child {
    font-weight: 700;
}

.vipconfig-final-summary__row:last-child {
    border-bottom: 0;
}

.vipconfig-final-summary__value {
    text-align: right;
    white-space: nowrap;
}

@media (max-width: 767px) {
    .vipconfig-final-summary__row {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 10px 14px;
        font-size: 14px;
    }

    .vipconfig-final-summary__value {
        text-align: left;
    }
}


/* VipConfig v0.18.77 - Summary-Erkennung */
.vipconfig-final-summary__row--bold {
    font-weight: 700;
}


/* VipConfig v0.18.78 - Summary DOM Scan Fix */
.vipconfig-final-summary__row--bold {
    font-weight: 700;
}


/* VipConfig v0.18.81 - direkte Success Headline im finalen Warenkorb */
.vipconfig-final-add-to-cart__success {
    text-align: center;
    font-size: 26px;
    line-height: 1.15;
    letter-spacing: 0.06em;
    color: #6f7480;
    margin: 0 0 18px 0;
    font-weight: 300;
    text-transform: uppercase;
}

@media (max-width: 768px) {
    .vipconfig-final-add-to-cart__success {
        font-size: 20px;
        letter-spacing: 0.04em;
    }
}


.vipconfig-preview-note {
    text-align: center;
    font-size: 13px;
    color: #777;
    letter-spacing: 0.04em;
    margin-top: 10px;
    margin-bottom: 20px;
}

/* Fix: Layout-Slider Navigation sauber seitlich mittig ausrichten */
.vipconfig-layout-gallery,
.vipconfig-layout-carousel,
.vipconfig-motif-gallery,
.vipconfig-motif-carousel {
    position: relative;
}

.vipconfig-layout-gallery .vipconfig-slider-prev,
.vipconfig-layout-gallery .vipconfig-slider-next,
.vipconfig-layout-carousel .vipconfig-slider-prev,
.vipconfig-layout-carousel .vipconfig-slider-next,
.vipconfig-motif-gallery .vipconfig-slider-prev,
.vipconfig-motif-gallery .vipconfig-slider-next,
.vipconfig-motif-carousel .vipconfig-slider-prev,
.vipconfig-motif-carousel .vipconfig-slider-next {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 20;
}

.vipconfig-layout-gallery .vipconfig-slider-prev,
.vipconfig-layout-carousel .vipconfig-slider-prev,
.vipconfig-motif-gallery .vipconfig-slider-prev,
.vipconfig-motif-carousel .vipconfig-slider-prev {
    left: -64px !important;
}

.vipconfig-layout-gallery .vipconfig-slider-next,
.vipconfig-layout-carousel .vipconfig-slider-next,
.vipconfig-motif-gallery .vipconfig-slider-next,
.vipconfig-motif-carousel .vipconfig-slider-next {
    right: -64px !important;
}

@media (max-width: 768px) {
    .vipconfig-layout-gallery .vipconfig-slider-prev,
    .vipconfig-layout-carousel .vipconfig-slider-prev,
    .vipconfig-motif-gallery .vipconfig-slider-prev,
    .vipconfig-motif-carousel .vipconfig-slider-prev {
        left: 8px !important;
    }

    .vipconfig-layout-gallery .vipconfig-slider-next,
    .vipconfig-layout-carousel .vipconfig-slider-next,
    .vipconfig-motif-gallery .vipconfig-slider-next,
    .vipconfig-motif-carousel .vipconfig-slider-next {
        right: 8px !important;
    }
}

/* Fix: Slider-Pfeile nach Kategorie-Wechsel stabil mittig am Layout-Grid */
.vipconfig-modern-root .vipconfig-layout-section,
.vipconfig-modern-root .vipconfig-layout-wrapper,
.vipconfig-modern-root .vipconfig-layout-grid-wrap,
.vipconfig-modern-root .vipconfig-motif-grid-wrap {
    position: relative;
}

.vipconfig-modern-root .vipconfig-layout-prev,
.vipconfig-modern-root .vipconfig-layout-next,
.vipconfig-modern-root .vipconfig-motif-prev,
.vipconfig-modern-root .vipconfig-motif-next,
.vipconfig-modern-root button[aria-label="Vorherige Motive"],
.vipconfig-modern-root button[aria-label="Nächste Motive"],
.vipconfig-modern-root button[aria-label="Zurück"],
.vipconfig-modern-root button[aria-label="Weiter"] {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 30 !important;
}

.vipconfig-modern-root .vipconfig-layout-prev,
.vipconfig-modern-root .vipconfig-motif-prev,
.vipconfig-modern-root button[aria-label="Vorherige Motive"],
.vipconfig-modern-root button[aria-label="Zurück"] {
    left: -72px !important;
}

.vipconfig-modern-root .vipconfig-layout-next,
.vipconfig-modern-root .vipconfig-motif-next,
.vipconfig-modern-root button[aria-label="Nächste Motive"],
.vipconfig-modern-root button[aria-label="Weiter"] {
    right: -72px !important;
}

/* Falls eine Kategorie weniger Karten hat, trotzdem Mindesthöhe halten */
.vipconfig-modern-root .vipconfig-layout-gallery,
.vipconfig-modern-root .vipconfig-motif-gallery,
.vipconfig-modern-root .vipconfig-layout-carousel,
.vipconfig-modern-root .vipconfig-motif-carousel {
    min-height: 520px;
}

@media (max-width: 768px) {
    .vipconfig-modern-root .vipconfig-layout-prev,
    .vipconfig-modern-root .vipconfig-motif-prev,
    .vipconfig-modern-root button[aria-label="Vorherige Motive"],
    .vipconfig-modern-root button[aria-label="Zurück"] {
        left: 8px !important;
    }

    .vipconfig-modern-root .vipconfig-layout-next,
    .vipconfig-modern-root .vipconfig-motif-next,
    .vipconfig-modern-root button[aria-label="Nächste Motive"],
    .vipconfig-modern-root button[aria-label="Weiter"] {
        right: 8px !important;
    }
}

/* Fix: Motiv-Slider Pfeile immer mittig */






/* Wrapper als Bezugspunkt */
.vipconfig-layout-section,
.vipconfig-layout-gallery,
.vipconfig-layout-carousel,
.vipconfig-motif-gallery {
    position: relative !important;
    min-height: 520px;
}


/* FINAL FIX: Motiv-Pfeile unabhängig von Kartenanzahl exakt gleich hoch */






@media (max-width: 768px) {
    

    

    
}

/* FINAL: Motiv-Slider Row sauber als eine horizontale Zeile */








/* Der Motivbereich liegt zwischen den Pfeilen */


    
}

/* FINAL RESET: Motivslider als echte horizontale Flex-Zeile */


#vipconfig-motif-grid {
    flex: 0 1 auto !important;
}




/* Einheitliches Motivlayout für alle Kategorien */


@media (min-width: 768px) {
    #vipconfig-motif-grid {
        width: 960px !important;
        min-width: 960px !important;
        display: grid !important;
        grid-template-columns: repeat(4, 220px) !important;
        gap: 28px !important;
        justify-content: start !important;
    }
}



@media (max-width: 1100px) {
    #vipconfig-motif-grid {
        width: 720px !important;
        min-width: 720px !important;
        grid-template-columns: repeat(3, 220px) !important;
    }
}

@media (max-width: 820px) {
    

    #vipconfig-motif-grid {
        width: 460px !important;
        min-width: 460px !important;
        grid-template-columns: repeat(2, 220px) !important;
    }
}

@media (max-width: 560px) {
    #vipconfig-motif-grid {
        width: 220px !important;
        min-width: 220px !important;
        grid-template-columns: repeat(1, 220px) !important;
    }
}


/* ===== CLEAN MOTIF SLIDER ===== */

.vipconfig-motif-slider-row{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:28px !important;
    width:100% !important;
    margin:40px auto !important;
}

@media (min-width: 768px) {
#vipconfig-motif-grid{
    width:960px !important;
    min-width:960px !important;

    display:grid !important;
    grid-template-columns:repeat(4, 220px) !important;
    gap:28px !important;

    justify-content:start !important;
}
}

#vipconfig-motif-prev,
#vipconfig-motif-next{
    width:52px !important;
    height:52px !important;
    min-width:52px !important;

    border-radius:50% !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    flex:0 0 52px !important;

    position:relative !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    transform:none !important;

    margin:0 !important;
}

@media (max-width:1100px){

    #vipconfig-motif-grid{
        width:712px !important;
        min-width:712px !important;
        grid-template-columns:repeat(3,220px) !important;
    }
}

@media (max-width:820px){

    #vipconfig-motif-grid{
        width:464px !important;
        min-width:464px !important;
        grid-template-columns:repeat(2,220px) !important;
    }
}

@media (max-width:560px){

    .vipconfig-motif-slider-row{
        gap:12px !important;
    }

    #vipconfig-motif-grid{
        width:220px !important;
        min-width:220px !important;
        grid-template-columns:220px !important;
    }

    #vipconfig-motif-prev,
    #vipconfig-motif-next{
        width:44px !important;
        height:44px !important;
        min-width:44px !important;
        flex:0 0 44px !important;
    }
}


/* Text/Symbol aus Motiv gewählt: Layout-Auswahl ausblenden */
body.vipconfig-text-symbol-active #vipconfig-text-symbol-layout-section {
    display: none !important;
}

/* Reihenfolge normalisieren */
#vipconfig-text-symbol-panel {
    margin-top: 40px !important;
    margin-bottom: 40px !important;
}

#vipconfig-text-symbol-fields {
    order: 1 !important;
}

#vipconfig-text-symbol-font-section {
    order: 2 !important;
}

/* Standard-Produktfelder immer oberhalb */
#vipconfig-motif-fields {
    order: -1 !important;
}

/* Standard-Modus: Überschrift immer oberhalb der Texteingaben */
body:not(.vipconfig-text-symbol-active) #vipconfig-text-config-shell {
    display: flex !important;
    flex-direction: column !important;
}

body:not(.vipconfig-text-symbol-active) #vipconfig-text-config-shell .vipconfig-content-headline {
    order: 1 !important;
}

body:not(.vipconfig-text-symbol-active) #vipconfig-motif-fields {
    order: 2 !important;
}

body:not(.vipconfig-text-symbol-active) #vipconfig-backengraving-shell {
    order: 3 !important;
}

/* Text/Symbol: Layoutauswahl nur bei echter Kategorie Text/Symbol anzeigen */
body.vipconfig-text-symbol-active #vipconfig-text-symbol-layout-section {
    display: none !important;
}

body.vipconfig-text-symbol-active.vipconfig-text-symbol-category-active #vipconfig-text-symbol-layout-section {
    display: block !important;
}

/* Aktive Auswahl bei Text/Symbol-Layouts und Icons sichtbar markieren */
.vipconfig-text-symbol-layout-card.is-active,
.vipconfig-text-symbol-icon-card.is-active {
    border: 3px solid #111 !important;
    box-shadow: 0 0 0 1px #111 inset, 0 18px 35px rgba(0,0,0,.14) !important;
}

.vipconfig-text-symbol-layout-card,
.vipconfig-text-symbol-icon-card {
    border: 3px solid transparent !important;
}

@font-face {
    font-family: 'Budidaya';
    src: url('/vipconfig-motifs/fonts/Budidaya%20Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

/* SVG-Sonderfonts */
@font-face {
    font-family: 'Budidaya';
    src: url('/vipconfig-motifs/fonts/Budidaya%20Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'Bebas Neue';
    src: url('/vipconfig-motifs/fonts/BebasNeue-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'BebasNeue-Regular';
    src: url('/vipconfig-motifs/fonts/BebasNeue-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'Playball';
    src: url('/vipconfig-motifs/fonts/Playball-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'Playball-Regular';
    src: url('/vipconfig-motifs/fonts/Playball-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

/* SVG-Sonderfonts */
@font-face {
    font-family: 'Budidaya';
    src: url('/vipconfig-motifs/fonts/Budidaya%20Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'Bebas Neue';
    src: url('/vipconfig-motifs/fonts/BebasNeue-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'BebasNeue-Regular';
    src: url('/vipconfig-motifs/fonts/BebasNeue-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'Playball';
    src: url('/vipconfig-motifs/fonts/Playball-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'Playball-Regular';
    src: url('/vipconfig-motifs/fonts/Playball-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

/* v0.15.3 FINAL */
@media (max-width: 767.98px) {
    #vipconfig-motif-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0px, 1fr)) !important;
        width: 100% !important;
        min-width: 0px !important;
        max-width: 100% !important;
        gap: 12px !important;
        box-sizing: border-box !important;
    }
    .vipconfig-motif-card {
        min-width: 0px !important;
        width: 100% !important;
    }
    #vipconfig-modern-root,
    #vipconfig-wrapper {
        overflow-x: visible !important;
        width: 100% !important;
    }
}