.site-shell {
  position: relative;
  overflow: clip;
}

.container {
  width: var(--container);
  margin-inline: auto;
}

body:not([data-page="home"]) .page-main > .page-section > .container {
  width: var(--container-page);
}

body:is([data-page="catalog"], [data-page="promotions"], [data-page="news"], [data-page="news-article"], [data-page="delivery"], [data-page="payment"]) .page-main > .page-section > .container {
  width: var(--container);
}

body:is([data-page="news"], [data-page="news-article"], [data-page="delivery"], [data-page="payment"]) {
  --container: min(var(--container-max), calc(100vw - (var(--container-gutter) * 2)));
  --container-page: min(var(--container-page-max), calc(100vw - (var(--container-gutter) * 2)));
  --container-mobile: calc(100vw - 1.875rem);
}

body:is([data-page="news"], [data-page="news-article"], [data-page="delivery"], [data-page="payment"]) :is(#contact-request, .footer) {
  width: 100vw;
}

body:is([data-page="news"], [data-page="news-article"], [data-page="delivery"], [data-page="payment"]) .page-main > .page-section > .container {
  margin-right: var(--container-gutter);
  margin-left: var(--container-gutter);
}

.container--mobile {
  width: var(--container-mobile);
  margin-inline: auto;
}

.page-section {
  position: relative;
  padding-block: var(--section-space-xl);
}

.page-section--compact {
  padding-top: 0;
  padding-bottom: var(--section-space-lg);
}

.page-section--flush-top {
  padding-top: 0;
}

.stack-lg > * + * {
  margin-top: var(--section-space-lg);
}

.stack-md > * + * {
  margin-top: var(--section-space-md);
}

.stack-sm > * + * {
  margin-top: var(--section-space-sm);
}

.grid-auto {
  display: grid;
  gap: var(--card-gap);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* 12-column rhythm aligned to 60px Figma module at large breakpoints (see figma-frame-map.json) */
@media (min-width: 80rem) {
  .layout-grid-12 {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--layout-grid-step);
  }
}