/* ==========================================================================
   Exact Match WooCommerce Single Product Page Styles
   ========================================================================== */

/* 1. Main Layout */
.single-product div.product {
    display: flex !important;
    flex-wrap: wrap;
    gap: 3%;
    margin-top: 2rem;
    align-items: flex-start;
}

/* Hide breadcrumb, meta, and Astra category to match reference site */
.single-product .woocommerce-breadcrumb,
.single-product .product_meta,
.single-product .ast-woo-product-category {
    display: none !important;
}

/* 2. Left Side Image Container */
.single-product div.product .woocommerce-product-gallery {
    width: 45% !important;
    background-color: transparent !important; /* No heavy gray box */
    padding: 0 !important;
    box-sizing: border-box;
    float: none !important;
    position: sticky;
    top: 100px; 
    z-index: 10;
}

/* Align image to the top instead of centering vertically */
.single-product div.product .woocommerce-product-gallery__wrapper,
.single-product div.product .woocommerce-product-gallery__image {
    display: flex;
    align-items: flex-start; /* Matches text alignment on the right */
    justify-content: center;
    width: 100%;
    margin: 0;
}

/* Ensure the image is realistic size and fully visible */
.single-product div.product .woocommerce-product-gallery img {
    max-width: 100% !important;
    max-height: 550px !important; 
    width: auto !important;
    height: auto !important;
    object-fit: contain;
    mix-blend-mode: multiply; 
    margin: 0 auto;
    padding-top: 5px; /* Slight top padding to match text baseline */
}

/* Hide zoom icon for cleaner look */
.single-product .woocommerce-product-gallery__trigger {
    display: none !important;
}

/* 3. Right Side Summary Layout */
.single-product div.product .summary.entry-summary {
    width: 52% !important;
    padding: 0;
    clear: none !important;
    float: none !important;
    color: #333;
}

/* Product Title */
.single-product .product_title {
    font-size: 26px;
    font-weight: 500;
    color: #000;
    margin-bottom: 12px;
    line-height: 1.2;
}

/* General Text Styling (Description & Manufacturing) */
.single-product .summary.entry-summary p {
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: #333 !important;
    margin-bottom: 15px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

/* Custom Size Text injected via PHP */
.single-product .custom-size-text {
    font-size: 15px !important;
    color: #000 !important;
    margin-bottom: 25px !important;
    margin-top: 10px !important;
}
.single-product .custom-size-text strong {
    font-weight: 600;
}

/* 4. The Nutritional Table (Exact Reference Match) */
.single-product .custom-nutrition-title {
    font-size: 16px;
    font-weight: 600;
    color: #000;
    margin: 25px 0 10px;
    line-height: 1.3;
}
.single-product .custom-nutrition-title .nutrition-sub {
    font-size: 14px;
    font-weight: normal;
}

.single-product .shop_attributes {
    width: 100%;
    max-width: 450px; /* Compact table */
    border-collapse: collapse;
    margin-bottom: 25px;
    border: 1px solid #ddd;
    background-color: transparent;
    box-shadow: none;
    border-radius: 0;
}

.single-product .shop_attributes tbody th,
.single-product .shop_attributes tbody td {
    padding: 4px 10px !important;
    border: 1px solid #ddd !important;
    font-size: 13px !important;
    color: #333 !important;
    background-color: transparent !important;
}

.single-product .shop_attributes tbody th {
    font-weight: normal;
    width: 65%;
    text-align: left;
}

.single-product .shop_attributes tbody td {
    text-align: left; /* Reference site has values aligned left */
}

/* Hide Astra tabs */
.single-product .woocommerce-tabs {
    display: none !important;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .single-product div.product {
        flex-direction: column;
    }
    
    .single-product div.product .woocommerce-product-gallery {
        position: relative !important;
        top: 0 !important;
    }
    
    .single-product div.product .woocommerce-product-gallery,
    .single-product div.product .summary.entry-summary {
        width: 100% !important;
    }
    
    .single-product div.product .woocommerce-product-gallery {
        margin-bottom: 20px;
    }
    
    .single-product .product_title {
        font-size: 24px;
    }
    
    .single-product .shop_attributes {
        max-width: 100%;
    }
}