/* ---------------------------------------------------------------------------
   Single product page breathing room
   The product content was running to within 40px of the viewport edge with no
   max-width, so it stretched the full width of the screen and felt crowded.
   --------------------------------------------------------------------------- */

@media (min-width: 922px) {
    .single-product .site-content > .ast-container {
        max-width: 1240px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 3rem;
        padding-right: 3rem;
    }

    /* Gallery and summary sit closer together than they need to at this width. */
    .single-product div.product .summary {
        padding-left: 1rem;
    }
}

/*
 * Below the desktop breakpoint Astra already stacks its own gutters --
 * main.site-main contributes 20px and .ast-woocommerce-container another 20px.
 * Adding a third layer on top of those put 56px each side on a 375px phone,
 * which is nearly a third of the screen. So narrow screens get the doubled
 * Astra padding collapsed instead of more padding piled on.
 */
@media (min-width: 545px) and (max-width: 921px) {
    .single-product .site-content > .ast-container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media (max-width: 544px) {
    .single-product .site-content > .ast-container {
        padding-left: 0;
        padding-right: 0;
    }

    .single-product .ast-woocommerce-container {
        padding-left: 0;
        padding-right: 0;
    }
}

/* The tabs and related-products rows inherit the same measure. */
.single-product .woocommerce-tabs,
.single-product .related.products,
.single-product .up-sells {
    margin-top: 3rem;
}