/* 20260824-centered-layout-frame:
   full-bleed section backgrounds with a calm, centered content measure. */
:root {
  --layout-frame-wide: 1600px;
  --layout-frame-content: 1440px;
  --layout-edge-wide: max(var(--page-gutter), calc((100vw - var(--layout-frame-wide)) / 2));
  --layout-edge-content: max(var(--page-gutter), calc((100vw - var(--layout-frame-content)) / 2));
}

@media (min-width: 761px) {
  /* Global chrome follows the commerce frame without boxing its background. */
  .site-header {
    padding-right: var(--layout-edge-wide);
    padding-left: var(--layout-edge-wide);
  }

  .breadcrumbs,
  .category-breadcrumbs,
  .catalog-breadcrumbs {
    padding-right: var(--layout-edge-wide) !important;
    padding-left: var(--layout-edge-wide) !important;
  }

  /* Marketing and engineering pages keep their backgrounds full width. */
  main > .hero,
  main > .home-hero,
  main > .split-entry.home-hero,
  main > .page-hero,
  main > .section,
  main > .request-section,
  main > .catalog-explorer {
    padding-right: var(--layout-edge-content);
    padding-left: var(--layout-edge-content);
  }

  /* Dense commerce views need a little more working room. */
  main > .product-showcase,
  main > .catalog-page-hero + .section,
  main > .catalog-explorer,
  .catalog-products-first > .section.product-showcase {
    padding-right: var(--layout-edge-wide);
    padding-left: var(--layout-edge-wide);
  }

  /* Product pages are true centered canvases; their internal panels stay fluid. */
  .product-detail-page {
    width: min(100%, var(--layout-frame-wide));
    max-width: var(--layout-frame-wide);
    margin-right: auto;
    margin-left: auto;
    padding-right: clamp(24px, 3vw, 48px);
    padding-left: clamp(24px, 3vw, 48px);
  }
}

@media (max-width: 760px) {
  :root {
    --layout-edge-wide: 16px;
    --layout-edge-content: 16px;
  }
}