/**
 * Layout1 (bold) — Wide / 4K screen polish
 * Build: 20260529-layout1-wide-v1
 *
 * Scope: body.storefront-bold ONLY (layout1 bold). Loads with layout1 assets.
 * Purpose: layout1 content uses Bootstrap .container (max 1140px), which looks
 * narrow on large/4K monitors. This widens the content column on >=1400px and
 * >=1600px using the canonical container tokens, capped so it never stretches
 * edge-to-edge. Header (.container-fluid) is intentionally left full-width.
 *
 * Additive + fully reversible: remove the <link> in main.php to revert.
 * No effect below 1400px, so phones/tablets/standard desktops are untouched.
 */

@media (min-width: 1400px) {
  body.storefront-bold .storefront-bold__main .container,
  body.storefront-bold .storefront-bold__page .container,
  body.storefront-bold .storefront__footer .container,
  body.storefront-bold .l1-home .container {
    max-width: var(--mega-container-xxl, 1320px);
  }

  /* A touch more breathing room between product columns on wide screens */
  body.storefront-bold .mega-commerce--listing .product-list .row {
    --bs-gutter-x: 2rem;
  }
}

@media (min-width: 1600px) {
  body.storefront-bold .storefront-bold__main .container,
  body.storefront-bold .storefront-bold__page .container,
  body.storefront-bold .storefront__footer .container,
  body.storefront-bold .l1-home .container {
    /* Stay under the platform 4K cap so content never stretches edge-to-edge */
    max-width: min(var(--mega-container-cap, 1520px), 1440px);
  }
}