.kit-page { margin: 0; background: var(--mui-palette-background-default); color: var(--mui-palette-text-primary); font: var(--mui-font-body1); -webkit-text-size-adjust: 100%; }
/*
 * layout.css — сетка страницы: Container / Grid / Stack (как в MUI) на токенах tokens.css.
 * Брейкпоинты — тема Инссмарта (не MUI по умолчанию): xs 480 · sm 600 · md 840 · lg 1280 · xl 1600; раскладка xs — от 0.
 * Колонки Material: 4 (до 600) · 8 (600–839) · 12 (840+).
 * Ширина ячейки задаётся как size в MUI Grid: style="--xs:4; --sm:4; --md:6; --lg:3" (число колонок на брейкпоинте;
 * не задан — берётся с меньшего брейкпоинта, не задан нигде — во всю ширину). Фиксированных ширин под 1440/390 нет.
 */
.container { width: 100%; max-width: calc(var(--kit-container) + 2 * var(--kit-gutter)); margin-inline: auto; padding-inline: var(--kit-gutter); }
.grid { display: grid; grid-template-columns: repeat(var(--kit-columns), minmax(0, 1fr)); gap: var(--kit-gap); }
.grid > * { min-width: 0; grid-column: span min(var(--xs, 99), var(--kit-columns)); }
@media (min-width: 600px) { .grid > * { grid-column: span min(var(--sm, var(--xs, 99)), var(--kit-columns)); } }
@media (min-width: 840px) { .grid > * { grid-column: span min(var(--md, var(--sm, var(--xs, 99))), var(--kit-columns)); } }
@media (min-width: 1280px) { .grid > * { grid-column: span min(var(--lg, var(--md, var(--sm, var(--xs, 99)))), var(--kit-columns)); } }
.grid--gap-lg { gap: var(--kit-sp-6); }
.grid--center { align-items: center; }
.stack { display: flex; flex-direction: column; gap: var(--gap, var(--kit-sp-2)); min-width: 0; }
.stack--row { flex-direction: row; flex-wrap: wrap; align-items: center; }
@media (min-width: 600px) { .stack--row-sm { flex-direction: row; flex-wrap: wrap; align-items: center; } }
@media (min-width: 840px) { .stack--row-md { flex-direction: row; align-items: center; } }
.stack--between { justify-content: space-between; }
.stack--center { align-items: center; text-align: center; }
.stack--flush { gap: 0; }
/* порядок по брейкпоинту (MUI order={{ xs: 3, sm: 0 }}): style="--order-xs:3;--order-sm:0" у прямого ребёнка .stack / .grid;
   значение берётся с меньшего брейкпоинта; переменные не наследуются — вложенные ряды их не подхватывают */
@property --order-xs { syntax: '*'; inherits: false; }
@property --order-sm { syntax: '*'; inherits: false; }
@property --order-md { syntax: '*'; inherits: false; }
@property --order-lg { syntax: '*'; inherits: false; }
@property --order-xl { syntax: '*'; inherits: false; }
.stack > *, .grid > * { order: var(--order-xs, 0); }
@media (min-width: 600px) { .stack > *, .grid > * { order: var(--order-sm, var(--order-xs, 0)); } }
@media (min-width: 840px) { .stack > *, .grid > * { order: var(--order-md, var(--order-sm, var(--order-xs, 0))); } }
@media (min-width: 1280px) { .stack > *, .grid > * { order: var(--order-lg, var(--order-md, var(--order-sm, var(--order-xs, 0)))); } }
@media (min-width: 1600px) { .stack > *, .grid > * { order: var(--order-xl, var(--order-lg, var(--order-md, var(--order-sm, var(--order-xs, 0))))); } }
/* показ по брейкпоинтам (MUI: display={{ xs: 'none', md: 'block' }}) */
@media (max-width: 839.98px) { .hide-below-md { display: none !important; } }
@media (min-width: 840px) { .hide-md-up { display: none !important; } }
@media (max-width: 599.98px) { .hide-below-sm { display: none !important; } }
/* горизонтальная лента карточек на узких экранах (М 2790 «Листайте →») */
.scroller { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(var(--kit-scroller-item), 1fr); gap: var(--kit-gap); overflow-x: auto; scroll-snap-type: x mandatory;
  padding: var(--kit-halo-press); margin: calc(-1 * var(--kit-halo-press)); scrollbar-width: none; }
.scroller > * { scroll-snap-align: start; }
/* секция страницы */
.section { padding-block: var(--kit-section-y); }
.section--pink { background: var(--mui-palette-section-pink); }
.section--lavender { background: var(--mui-palette-section-lavender); }
.section--grey { background: var(--mui-palette-section-grey); }
.section--dark { background: var(--mui-palette-section-dark); color: var(--mui-palette-common-white); }
.section--night { background: var(--kit-gradient-night); color: var(--mui-palette-common-white); }
.section--fade { background: var(--kit-gradient-fade); }
.section__head { display: grid; gap: var(--kit-sp-2); margin-bottom: var(--kit-sp-8); }
.section__head--center { text-align: center; justify-items: center; }
.section__head--center .typo-subtitle1 { max-width: var(--kit-measure); }
/* на xs сетка карточек становится лентой (М 2790 «Листайте →», М 2930 агенты) */
@media (max-width: 599.98px) {
  .grid--scroll-xs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: var(--kit-scroller-item); overflow-x: auto; scroll-snap-type: x mandatory;
    padding: var(--kit-halo-press) var(--kit-gutter); margin: calc(-1 * var(--kit-halo-press)) calc(-1 * var(--kit-gutter)); scrollbar-width: none; }
  .grid--scroll-xs > * { grid-column: auto; scroll-snap-align: start; }
}
@media (min-width: 600px) { .hide-sm-up { display: none !important; } }
/* ряд из 5 равных (Д 646 показатели, Д 3184 малые продукты) — сетка на 5 колонок с md / lg */
@media (min-width: 840px) { .grid--cols-5-md { grid-template-columns: repeat(5, minmax(0, 1fr)); } .grid--cols-5-md > * { grid-column: auto; } }
@media (min-width: 1280px) { .grid--cols-5-lg { grid-template-columns: repeat(5, minmax(0, 1fr)); } .grid--cols-5-lg > * { grid-column: auto; } }
.gap-top { margin-top: var(--kit-gap); }
/* планшет (sm 600–839): три карточки в ряд там, где на lg их три (Д 2697) */
@media (min-width: 600px) and (max-width: 839.98px) { .grid--cols-3-sm { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--cols-3-sm > * { grid-column: auto; } }
/* лента карточек ниже md (до 840: xs и sm) — .grid--scroll-<bp> = лента ниже порога bp */
@media (max-width: 839.98px) {
  .grid--scroll-md { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: var(--kit-scroller-item); overflow-x: auto; scroll-snap-type: x mandatory;
    padding: var(--kit-halo-press) var(--kit-gutter); margin: calc(-1 * var(--kit-halo-press)) calc(-1 * var(--kit-gutter)); scrollbar-width: none; }
  .grid--scroll-md > * { grid-column: auto; scroll-snap-align: start; }
}