/* Spacing fixes to prevent section overlap */
.hero-section {
    margin-bottom: 30px;
    padding-bottom: 30px;
    position: relative;
}

/* Main product image styling - full width with optimized LCP */
.product-image-container {
    width: 100%;
    max-width: 500px;
    height: auto;
    aspect-ratio: 1/1;
    margin: 0 auto 40px; /* Increased bottom margin */
    position: relative;
    z-index: 1;
}

.main-product-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.product-description {
    margin-bottom: 40px; /* Add bottom margin to create space */
}

.benefits-section {
    position: relative;
    margin-top: 40px; /* Add top margin to create more space */
    padding-top: 30px;
    z-index: 0;
    clear: both; /* Ensure it starts on a new "row" */
}

/* Make sure benefits list and image container have proper spacing */
.benefits-list {
    margin-bottom: 30px;
}

.benefits-image-container {
    margin-top: 20px;
}

/* Fix any potential column layout issues */
.container {
    overflow: hidden; /* Contain floated children if any */
}

/* Add more specific styling for the benefits image to prevent it from causing layout issues */
.benefits-image {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}