/*
 * One container width for every storefront theme.
 *
 * Themes used to set their own .container width (Ashion and Famms 1170px, Aura Bootstrap's 1320px, main.css 1540 and
 * 1680px), so the same store changed width in different places depending on its theme and left only 12px beside the
 * content on 1400 to 1536px laptops. This file is the only place a storefront container width is set. Load it after the
 * theme's own CSS, in every theme layout.
 *
 *   under 1200px   Bootstrap's own steps (540, 720, 960)
 *   1200 to 1399   1170px
 *   1400 and up    1320px
 *
 * The content always keeps at least 24px (container padding plus the margin) from the screen edge.
 * Full-width bands (.container-fluid) are left alone on purpose.
 */
:root {
  --store-container: 1170px;
  --store-container-wide: 1320px;
}

@media (min-width: 1200px) {
  .container,
  .container-lg,
  .container-xl,
  .container-xxl {
    max-width: var(--store-container) !important;
  }
}

@media (min-width: 1400px) {
  .container,
  .container-lg,
  .container-xl,
  .container-xxl {
    max-width: var(--store-container-wide) !important;
  }
}