/* --- Header & Navigation (Unchanged) --- */
.main-header {
    background-color: #ffffff;
    padding: 15px 0;
    border-bottom: 1px solid #e0e0e0;
}

.nav-container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 24px;
    font-weight: 700;
    color: #38761d;
}

.nav-links a {
    color: #555;
    text-decoration: none;
    margin-left: 20px;
    font-weight: 500;
}

/* --- Main Content Container (Unchanged) --- */
.main-content-container {
    width: 90%;
    max-width: 1200px;
    margin: 40px auto;
    padding: 30px;
    background-color: #ffffff;
    border-radius: 10px;
   /* box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);*/
}

/* --- Product Hero Section (Unchanged) --- */
.product-hero {
    display: flex;
    gap: 40px;
    flex-wrap: wrap; 
    margin-bottom: 50px;
}

.product-image-area {
    flex: 1;
    min-width: 350px;
    max-width: 500px;
    text-align: center;
}

.product-main-image {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
   
}

.product-details-area {
    flex: 2;
    min-width: 450px;
    padding-top: 10px;
}

.brand-name {
    color: #888;
    font-size: 14px;
    margin-bottom: 5px;
    text-transform: uppercase;
    font-weight: 600;
}

.product-title {
    font-size: 38px;
    color: #333;
    margin-top: 0;
    margin-bottom: 10px;
    line-height: 1.2;
}

.rating {
    color: #f39c12;
    font-size: 18px;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
}

.review-count {
    font-size: 14px;
    color: #777;
    margin-left: 5px;
}

/* --- Description Styles (Unchanged) --- */
.description-heading {
    color: #38761d;
    font-size: 22px;
    margin-top: 20px;
    margin-bottom: 15px;
    font-weight: 600;
}

.full-description-text {
    color: #555;
    line-height: 1.7;
    font-size: 16px;
    margin-bottom: 30px;
}

.nutri-summary {
    color: #444;
    line-height: 1.6;
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 5px;
    border-left: 4px solid #38761d;
}

/* --- Key Features/Benefits Section (Unchanged) --- */
.section-title {
    font-size: 28px;
    color: #333;
    text-align: center;
    margin-top: 60px;
    margin-bottom: 30px;
}

.benefits-container {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    background-color: #f2fcf2;
    padding: 30px 20px;
    border-radius: 10px;
    gap: 20px;
    margin-bottom: 60px;
}

.benefit-card {
    text-align: center;
    flex: 1;
    min-width: 200px;
    max-width: 280px;
}

.benefit-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 15px;
}

.benefit-title {
    color: #38761d;
    font-size: 18px;
    margin-bottom: 10px;
}

.benefit-text {
    color: #555;
    font-size: 14px;
    line-height: 1.5;
}

/* --- Nutritional Table (Unchanged) --- */
.sub-heading {
    color: #38761d;
    margin-top: 40px;
    margin-bottom: 15px;
    font-size: 20px;
}

.nutritional-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    font-size: 15px;
    border: 1px solid #ddd;
}

.nutritional-table th, .nutritional-table td {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: left;
    color: #555;
}

.nutritional-table th {
    background-color: #e6f7d9;
    color: #333;
    font-weight: 600;
}

.nutritional-table tr:nth-child(even) {
    background-color: #f9f9f9;
}

/* --- Related Products (Desktop/Default View - 4 items in a row) --- */
.related-products-section {
    margin-top: 80px;
    text-align: center;
}

.related-products-list {
    display: flex;
    /* Use flex-wrap to stack on mobile, but keep horizontal on desktop */
    flex-wrap: wrap; 
    gap: 20px; /* Reduced gap slightly for 4 items */
    justify-content: center;
    margin-top: 40px;
}

.product-card {
    /* Calculated width for 4 items with some gaps (1200px max container) */
    /* (1200 - 3*20) / 4 = 285px. Using 260px provides flexibility. */
    width: 260px; 
    padding: 20px;
    text-align: center;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.card-image {
    width: 100%;
    height: auto;
    border-radius: 6px;
    margin-bottom: 15px;
}

.card-title {
    margin: 0 0 5px 0;
    color: #333;
    font-size: 18px;
}

.card-price {
    color: #cc0000;
    font-weight: bold;
    font-size: 16px;
}

.btn-view-details {
    background-color: #ffc107;
    color: #333;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    font-size: 15px;
    display: inline-block;
    margin-top: 10px;
}

/* --- Footer (Unchanged) --- */
.main-footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 30px 0;
    margin-top: 60px;
}


/* =================================== */
/* MOBILE RESPONSIVENESS MEDIA QUERIES */
/* =================================== */

@media (max-width: 1100px) {
    /* On medium screens, switch from 4 to 3 columns for related products */
    .product-card {
        /* Width for 3 cards in a row */
        width: 30%; 
    }
}

@media (max-width: 900px) {
    /* Main Content Container adjustments */
    .main-content-container {
        padding: 15px;
        margin: 20px auto;
    }
    
    /* Product Hero Section (Forces single column) */
    .product-hero {
        flex-direction: column;
        gap: 20px;
    }
    
    .product-image-area,
    .product-details-area {
        min-width: 100%;
        max-width: 100%;
        padding-top: 0;
    }
    
    .product-title {
        font-size: 32px;
    }

    /* Related Products (Switch to 2 columns) */
    .product-card {
        width: 45%; 
    }

    /* Benefits section (2 cards per row on 900px wide screens) */
    .benefits-container {
        padding: 20px 10px;
        gap: 15px;
    }
    
    .benefit-card {
        min-width: 45%;
        max-width: 45%;
    }

    /* Navigation adjustments for small phones */
    .nav-container {
        flex-direction: column;
        text-align: center;
    }
    
    .nav-links {
        margin-top: 10px;
    }

    .nav-links a {
        margin: 0 10px;
        font-size: 14px;
    }
}

@media (max-width: 500px) {
    /* Further adjustments for very small screens */
    .product-title {
        font-size: 28px;
    }
    
    .logo {
        font-size: 20px;
    }

    /* Force benefits and related products into a single column */
    .benefits-container {
        flex-direction: column;
        gap: 30px;
    }

    .benefit-card {
        max-width: 100%;
        border-bottom: 1px dashed #ddd;
        padding-bottom: 15px;
    }
    
    .benefit-card:last-child {
        border-bottom: none;
    }
    
    .product-card {
        width: 100%;
        max-width: 100%;
    }
}

/* IMAGE GALLERY STYLES (Key to fix) */
.product-image-area { flex: 1; min-width: 350px; max-width: 450px; text-align: center; }
.main-image-wrapper { border: 1px solid #eee; border-radius: 8px; overflow: hidden; cursor: pointer; }
.product-main-image { width: 100%; height: auto; display: block; }
.thumbnail-gallery { display: flex; justify-content: center; gap: 10px; margin-top: 15px; }
.thumbnail-item { width: 80px; height: 80px; object-fit: contain; border: 2px solid #eee; border-radius: 5px; cursor: pointer; transition: border-color 0.2s; }
.thumbnail-item.active { border-color: #38761d; box-shadow: 0 0 5px rgba(56, 118, 29, 0.5); }


/* --- NEW GLOBAL FIXES FOR MOBILE SCROLL --- */

/* 1. Prevent horizontal overflow on the entire page */
body {
    overflow-x: hidden; /* This is the main fix for the body */
    margin: 0;
    padding: 0;
}

/* 2. Constrain the main container and add padding for mobile views */
.main-content-container {
    padding: 0 15px; /* Add padding to prevent edge content touching the screen */
    width: 100%;
    margin: 0 auto;
}

/* 3. Ensure the main content flex container wraps on smaller screens */
.product-hero { 
    display: flex; 
    gap: 40px; 
    flex-wrap: wrap; 
}

/* 4. Ensure header does not cause scroll */
.sb-header-wrapper {
    overflow-x: hidden;
}

/* 5. Mobile Optimization: Ensure elements take up full width on small screens */
@media (max-width: 767px) {
    .product-hero {
        flex-direction: column;
        gap: 20px;
    }
    /* Ensure image and details area use full width (minus padding) */
    .product-image-area, .product-details-area {
        min-width: 100%; 
        max-width: 100%;
        padding: 0;
    }
    /* Fix for Footer Overflow */
    .sb-footer {
        padding: 0 10px; /* Reduce padding on footer if needed */
        overflow-x: hidden; /* Ensure footer wrapper doesn't overflow */
    }
    .sb-footer .container {
        padding: 0; /* Remove container padding if necessary */
    }
}