/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

/* CSS for product details */
.product-details {
    margin-top: 20px;
}

.product-details > div {
    margin-bottom: 20px; /* Add space between each section */
}

.product-images {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap onto multiple lines */
    gap: 20px; /* Space between items */
    margin-bottom: 20px; /* Space between product images and other sections */
}

/*.product-image,*/
/*.technical-image {*/
/*    flex: 1 1 45%; !* Equal width for both images, adjust as needed *!*/
/*}*/

.product-image img,
.technical-image img {
    max-width: 100%;
    height: auto;
    display: block;
}

.product-3d-viewer {
    text-align: center;
}
.product-3d-viewer iframe{
    width: 600px;
    height: 600px;
}

.product-info {
    margin-left: 20px;
}

.product-info h2 {
    font-size: 24px;
    margin-bottom: 10px;
}

.technical-specs,
.cad-formats,
.configurator-table {
    margin-top: 20px;
}

.technical-specs table,
.configurator-table table {
    width: 100%;
    border-collapse: collapse;
}

.technical-specs th,
.technical-specs td,
.configurator-table th,
.configurator-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

.cad-formats select {
    width: 100%;
    padding: 8px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.configurator-table th {
    background-color: #f2f2f2;
}