/* Hover Effekt */
.color-option:hover img {
    border-color: #555 !important;
}

/* Aktive Farbe hervorheben */
.color-option.selected img, .color-option.selected span {
    border-color: rgb(65, 146, 116) !important;
    box-shadow: 0 0 5px rgba(65, 146, 116, 0.6) !important;
}

.custom-button {
    border-color: rgb(65, 146, 116) !important;
    background-color: rgb(65, 146, 116, 0.8) !important;
}

.custom-button:hover, .custom-button-secondary:hover {
    background-color: rgb(65, 146, 116, 0.65) !important;
}

.custom-button-secondary {
    border-color: rgb(65, 146, 116) !important;
    background-color: rgb(65, 146, 116, 0.2) !important;
    color: black !important;
}

.transition {
    cursor: pointer !important;
    transition: all 0.3s !important;
}

.size-option:hover,
.size-option.selected {
    background: #333 !important;
    color: white !important;
    border-color: #333 !important;
}

.woocommerce .reset_variations {
    display: none !important;
}

.woocommerce .variations {
    display: none !important;
}

form.cart .woocommerce-variation-price {
    display: none !important;
}


.awdr_discount_bar,
.awdr_row_0 {
    display: none !important;
}

.product {
    max-width: 80vw !important;
    margin: auto;
}

.woocommerce-variation-add-to-cart {
    padding-top: 0 !important;
    display: flex;
    align-items: center;
    gap: 5px; /* Abstand zwischen den Elementen */
    flex-wrap: wrap; /* Falls nicht genug Platz ist, umbrechen */
}

.product .summary {
    width: 50% !important;
}

.single_add_to_cart_button {
    margin: 0 !important;
    border-radius: 6px !important;
}

#productDesignModal .modal-dialog {
    max-width: 90vw !important; 
}

.h-90 {
    height: 90vh !important;
}

.slick-current img {
    max-height: 65vh !important;
    width: auto !important;
}

.product-design-iframe {
    width: 100% !important;
    height: 89vh !important;
    border: none !important;
}

@media (max-width: 768px) {
    .product {
        max-width: 98vw !important;
    }
    .product .summary {
        width: 100% !important;
    }
    .product_title {
        font-size: 2.0rem !important;
    }

    #productDesignModal .modal-dialog {
        max-width: 98vw !important; 
    }

    /* **NEU: Mobile Produktseiten-Layout anpassen** */
    .woocommerce div.product {
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* Nur den Produkttitel nach oben verschieben */
    .woocommerce div.product .summary .product_title {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 10 !important;
        background: white !important;
        padding: 1rem !important;
        margin: 0 !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    }
    
    /* Produktbilder Abstand nach oben für den Titel */
    .woocommerce div.product .woocommerce-product-gallery, .woocommerce div.product .woo-variation-product-gallery {
        margin-top: 15% !important; /* Anpassbar je nach Titelhöhe */
    }

    .slick-current img {
        max-height: 40vh !important;
        width: auto !important;
    }

    .product-design-iframe {
        height: 82vh !important;
    }
        
}