/* ===== PDP body layout: left gallery (500px) | right content (1fr) ===== */
.catalog-product-view .column.main{
    display:grid;
    grid-template-columns:500px minmax(0,1fr);
    column-gap:40px;
    align-items:start;
}
/* gallery left, info right (override blank's floats) */
.catalog-product-view .column.main .product.media{order:1;float:none;width:auto;margin:0;max-width:none}
.catalog-product-view .column.main .product-info-main{order:2;float:none;width:auto}
/* everything else (reviews, tabs, related, upsell) spans full width below */
.catalog-product-view .column.main > *:not(.product.media):not(.product-info-main){
    grid-column:1 / -1;
    order:3;
}
/* stack on tablet / mobile. minmax(0,1fr) + min-width:0 let the gallery shrink
   to the viewport (the fotorama stage has an inline 700px width that otherwise
   grows the grid track and overflows on phones). 2026-06-19 */
@media (max-width:980px){
    .catalog-product-view .column.main{grid-template-columns:minmax(0,1fr);column-gap:0}
    .catalog-product-view .column.main .product.media,
    .catalog-product-view .column.main .product-info-main{grid-column:1 / -1;min-width:0;max-width:100%}
}

/* ===== PDP content aligned to the centered .wrap rail (max 1320) at every
   viewport, matching the header nav / footer / other pages. 2026-06-19 =====
   (Was full-width with a fixed 60px gutter, which diverged from the rail above
   ~1440px and hit the screen edge below 1320px.) */
.catalog-product-view .page-main,
.catalog-product-view .breadcrumbs{
    max-width:none;
    padding-left:max(28px, calc((100% - var(--maxw, 1320px)) / 2));
    padding-right:max(28px, calc((100% - var(--maxw, 1320px)) / 2));
    box-sizing:border-box;
}