/* Load after commerce.css. Keep product sizing separate from positioning. */
@media (max-width: 720px) {
    /* A bare 1fr has an automatic minimum: the thumbnail strip's intrinsic
       width can enlarge the entire track. Let the existing local scroller
       overflow inside its track instead of widening the page. */
    .product-overview,
    .home-intro {
        grid-template-columns: minmax(0, 1fr);
    }
    .intro-copy,
    .intro-product {
        min-width: 0;
    }
}

@media (max-width: 360px) {
    /* Confirmed on the deployed 320px product page after correcting the grid:
       the three navigation links otherwise extend to x=334.59. No clipping.
       Current commerce.css already wraps this navigation through 720px;
       this narrow fallback also makes the fix testable on the live baseline. */
    .store-header nav {
        flex-wrap: wrap;
    }
    .intro-copy h1 {
        font-size: clamp(42px, 14vw, 50px);
        overflow-wrap: anywhere;
    }
}

@media (max-width: 1050px) {
    /* Navigation visibility follows purpose, not the old link order. */
    .store-header .header-row nav > a:not(.nav-support) {
        display: inline-flex;
    }
    .store-header .header-row nav > a.nav-support {
        display: none;
    }
}