/* Site-wide content width: fluid, capped at 1400px (was Bootstrap's fixed 1170px from 1200px up).
   The menu bar, footer and every .container section follow it, so the whole site lines up. */
@media (min-width: 1200px) {
    body .container { width: auto; max-width: 1400px; }      /* ("body" so it also beats the Bootstrap 4 style .container in css/custom-bs4.css) */
}

/* Product listing pages (All Products + category pages): the product area fills the width next to the 238px sidebar (it used to be 75%
   of the old 1170px container), always 3 products per row, with the photos filling the card instead of 80% of it */
@media (min-width: 1200px) {
    body .main_right_product > .col-sm-9 { width: calc(100% - 268px); }
    /* the banner's text sits in a .container that is sized for the old 1170px width (its columns are % of it): keep it that size,
       or the heading and text get squeezed into a ~130px column and run out of the banner */
    body .caption_product > .container { width: 1170px; max-width: 1170px; }
    /* the fixed breadcrumb bar under the (slimmer) menu bar gets some air above the text */
    body .sidenav_left_breadcrumb_clone { padding-top: 18px !important; }
    body .main_right_product .features_items.cd-section > .col-sm-4 img.product_card_img1 { width: 100%; max-width: 100%; height: auto; }
    body .main_right_product .features_items.cd-section > .col-sm-4 .product-image-wrapper { padding-left: 12px; padding-right: 12px; }
}