/**
 * Product Page Layout Styles
 */

.product-page {
    width: 100%;
}

.product-page__container {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    /* Use Bootstrap's container width by adding the container class in the HTML */
    padding: 1rem;
}

.product-page__left-column {
    flex: 1;
    min-width: 300px;
    max-width: none;
}

.product-page__right-column {
    flex: 2;
    min-width: 300px;
}

/* Price calculator section */
.product-page__price-calculator {
    margin: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .product-page__container {
        flex-direction: column;
    }
    
    .product-page__left-column,
    .product-page__right-column {
        width: 100%;
        max-width: 100%;
    }
}