/* MiaTrust Stage 6.2.1 — Single Product layout fix
   Loaded after product.css. Single-product only. */

/* Convert WooCommerce's floated top area to a true two-column grid.
   Tabs/related become full-width grid rows, so gallery height cannot create a blank gap. */
body.single-product .mt-woo-content > .product{
    display:grid !important;
    grid-template-columns:minmax(0, 0.92fr) minmax(0, 1.08fr);
    grid-template-areas:
        "gallery summary"
        "tabs tabs"
        "related related";
    column-gap:44px;
    row-gap:0;
    align-items:start;
}

body.single-product .mt-woo-content > .product > .woocommerce-product-gallery{
    grid-area:gallery;
    float:none !important;
    width:100% !important;
    margin:0 !important;
    align-self:start;
}

body.single-product .mt-woo-content > .product > .summary{
    grid-area:summary;
    float:none !important;
    width:100% !important;
    margin:0 !important;
    align-self:start;
}

body.single-product .mt-woo-content > .product > .woocommerce-tabs{
    grid-area:tabs;
    float:none !important;
    width:100% !important;
    clear:none !important;
    padding-top:30px !important;
    margin-top:8px !important;
}

body.single-product .mt-woo-content > .product > .related{
    grid-area:related;
    float:none !important;
    width:100% !important;
    clear:none !important;
}

/* Keep the gallery visually premium but bounded. */
body.single-product .woocommerce-product-gallery__wrapper{
    min-height:0 !important;
    height:auto !important;
    padding:18px;
}
body.single-product .woocommerce-product-gallery__image{
    display:flex !important;
    align-items:center;
    justify-content:center;
    min-height:500px;
}
body.single-product .woocommerce-product-gallery__image img{
    width:auto !important;
    height:auto !important;
    max-width:100% !important;
    max-height:520px !important;
    object-fit:contain !important;
}

/* Thumbnails belong under the main image, not floating in unused space. */
body.single-product .flex-control-thumbs{
    justify-content:center;
    margin:12px 0 0 !important;
}
body.single-product .flex-control-thumbs li{
    float:none !important;
}

/* Compact the sales information and metadata. */
body.single-product div.product div.summary{
    padding:20px 14px 10px !important;
}
body.single-product .product_title{
    margin-bottom:12px !important;
}
body.single-product div.product p.price{
    margin-bottom:16px !important;
}
body.single-product .woocommerce-product-details__short-description{
    margin-bottom:16px !important;
}
body.single-product form.cart{
    margin-top:4px !important;
}
body.single-product .product_meta{
    margin-top:16px !important;
    padding:14px 18px !important;
}

/* Tabs: tighter, cleaner, and immediately after the product hero. */
body.single-product .woocommerce-tabs ul.tabs{
    margin-bottom:16px !important;
}
body.single-product .woocommerce-tabs .panel{
    padding:26px 28px !important;
}
body.single-product .woocommerce-tabs .panel > :first-child{
    margin-top:0 !important;
}

/* Related products keep Stage 6.2 styling but with a cleaner separation. */
body.single-product .related.products{
    padding-top:36px !important;
    margin-top:8px;
    border-top:1px solid #f1e8ef;
}

/* Tablet / mobile: one-column flow. */
@media (max-width:980px){
    body.single-product .mt-woo-content > .product{
        grid-template-columns:1fr;
        grid-template-areas:
            "gallery"
            "summary"
            "tabs"
            "related";
        column-gap:0;
    }
    body.single-product .woocommerce-product-gallery__image{
        min-height:360px;
    }
    body.single-product .woocommerce-product-gallery__image img{
        max-height:420px !important;
    }
    body.single-product .mt-woo-content > .product > .woocommerce-tabs{
        padding-top:24px !important;
    }
}

@media (max-width:640px){
    body.single-product .woocommerce-product-gallery__wrapper{
        padding:10px;
    }
    body.single-product .woocommerce-product-gallery__image{
        min-height:290px;
    }
    body.single-product .woocommerce-product-gallery__image img{
        max-height:340px !important;
    }
    body.single-product div.product div.summary{
        padding:18px 6px 6px !important;
    }
    body.single-product .mt-woo-content > .product > .woocommerce-tabs{
        padding-top:20px !important;
    }
}