/* Локальные шрифты ядра. Внешние CDN на публичном сайте запрещены: файлы лежат
   в public/assets/fonts, адреса origin-relative. Fira Sans — базовый шрифт
   Construct (--font-sans). Подмножества cyrillic + latin, unicode-range
   оставлен от Google Fonts.

   Заголовочный шрифт сайта здесь не объявляется: он у каждого свой. Токен
   --font-serif по умолчанию равен --font-sans, а @font-face засечкового
   шрифта кладётся в слой сайта — resources/css/site-custom. */

@font-face {
	font-family: "Fira Sans";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("/assets/fonts/fira-sans-400i-cyrillic.woff2") format("woff2");
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: "Fira Sans";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("/assets/fonts/fira-sans-400i-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Fira Sans";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/assets/fonts/fira-sans-400-cyrillic.woff2") format("woff2");
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: "Fira Sans";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/assets/fonts/fira-sans-400-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Fira Sans";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("/assets/fonts/fira-sans-500-cyrillic.woff2") format("woff2");
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: "Fira Sans";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("/assets/fonts/fira-sans-500-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Fira Sans";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("/assets/fonts/fira-sans-600-cyrillic.woff2") format("woff2");
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: "Fira Sans";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("/assets/fonts/fira-sans-600-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Fira Sans";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("/assets/fonts/fira-sans-700-cyrillic.woff2") format("woff2");
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: "Fira Sans";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("/assets/fonts/fira-sans-700-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Generated by ModuleX. Do not edit directly. */
:root {
  --a-tfunc: ease;
  --a-time: 250ms;
  --btn-case: none;
  --btn-fs: var(--fs-p);
  --btn-fs-l: 18rem;
  --btn-fw: 500;
  --btn-h: 48rem;
  --btn-h-l: 56rem;
  --btn-px: 24rem;
  --btn-px-l: 32rem;
  --btn-radius: var(--r-btn);
  --btn-ring: 0 0 0 3rem var(--cbg), 0 0 0 5rem var(--caf-strong);
  --btn-tint: color-mix(in srgb, var(--caf) 16%, var(--cw));
  --btn-tracking: 0;
  --c-dz: #202022;
  --c-err: #D00;
  --c-esm: calc(var(--c-sm) / 2);
  --c-fb: #3b5998;
  --c-in: #405DE6;
  --c-lg: calc(var(--c-sm) * 2);
  --c-max: #5533EE;
  --c-md: calc(var(--c-sm) * 1.5);
  --c-ok: #ff7700;
  --c-ph: #A3A3A3;
  --c-pl: #6E6868;
  --c-rt: #100943;
  --c-sm: 12rem;
  --c-tg: #279FD3;
  --c-tw: #1D9BF0;
  --c-vi: #7360F2;
  --c-vk: #0077ff;
  --c-wa: #02BB47;
  --c-xl: calc(var(--c-sm) * 3);
  --c-yt: #FF0000;
  --caf: #57c6e1;
  --caf-strong: #267592;
  --cal: #bbc1bf;
  --cas: #7ac5d8;
  --cb: #000;
  --cbg: #fff;
  --cbg-card: var(--cw);
  --cbg-foot: var(--cbg);
  --cf: #343434;
  --cfbg: var(--cbg);
  --ci: #E6ECEE;
  --ci-blue-p: #EAF3FF;
  --ci-blue-s: #2F90FF;
  --ci-blue-t: #1759A8;
  --ci-green-p: #E8F7ED;
  --ci-green-s: #2DB35A;
  --ci-green-t: #1D6A36;
  --ci-orange-p: #FFF1E5;
  --ci-orange-s: #FF6600;
  --ci-orange-t: #A33F00;
  --ci-red-p: #FDECEC;
  --ci-red-s: var(--c-err);
  --ci-red-t: #A30000;
  --cil: #F5F8F9;
  --container-width: 85.938vw;
  --cw: #FFF;
  --drawer-w: 360rem;
  --field-border: var(--ci);
  --field-border-hover: color-mix(in srgb, var(--cf) 28%, var(--ci));
  --field-h: 52rem;
  --field-px: 16rem;
  --field-ring: 0 0 0 3rem color-mix(in srgb, var(--caf) 35%, transparent);
  --field-ring-err: 0 0 0 3rem color-mix(in srgb, var(--c-err) 18%, transparent);
  --font-sans: "Fira Sans", Arial, Helvetica, sans-serif;
  --font-serif: var(--font-sans);
  --foot-size: 200px;
  --fs-h1: 56rem;
  --fs-h2: 38rem;
  --fs-h3: 28rem;
  --fs-h4: 22rem;
  --fs-p: 16rem;
  --fs-sm: 14rem;
  --fw-bold: 700;
  --fw-heading: 700;
  --gr-f: linear-gradient(180deg, var(--caf) 20.99%, var(--cas) 80.99%);
  --header-gap: var(--i-md);
  --heading-gap: var(--i-lg);
  --i-esm: calc(var(--i-sm) / 2);
  --i-lg: calc(var(--i-sm) * 2);
  --i-md: calc(var(--i-sm) * 1.5);
  --i-sm: 20rem;
  --i-xl: calc(var(--i-sm) * 3);
  --i-xxl: calc(var(--i-sm) * 4);
  --logo-h: 48rem;
  --logo-max-w: 240rem;
  --r-alert: var(--c-sm);
  --r-badge: var(--c-esm);
  --r-btn: var(--c-sm);
  --r-card: var(--c-md);
  --r-field: var(--c-sm);
  --r-media: var(--c-md);
  --r-modal: var(--c-lg);
  --r-pill: 999rem;
  --r-thumb: var(--c-sm);
  --s-baf: 0px 5rem 8rem rgba(119, 119, 186, 0.15);
  --s-c: rgba(0, 0, 0, 0.25);
  --s-lg: 0 0 0 1px color-mix(in srgb, var(--cf) 6%, transparent), 0 20rem 44rem -16rem color-mix(in srgb, var(--cf) 14%, transparent);
  --s-md: 0 0 0 1px color-mix(in srgb, var(--cf) 7%, transparent), 0 12rem 32rem -16rem color-mix(in srgb, var(--cf) 10%, transparent);
  --s-sm: 0 0 0 1px color-mix(in srgb, var(--cf) 7%, transparent);
  --s-sz: 10rem;
  --s-x: 0;
  --s-y: 5rem;
  --section-pad: 120rem;
  --section-pad-sm: 56rem;
}


/* Source: base.css */
/* Construct Design System — reset и fluid-rem корень. */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 0.052083334vw;
}

@media (max-width: 1440px) {
    html {
        font-size: calc(0.052083334vw * 1.333);
    }
}

@media (max-width: 768px) {
    html {
        font-size: calc(0.052083334vw * 2.5);
    }
}

@media (max-width: 480px) {
    html {
        font-size: calc(0.052083334vw * 4);
    }
}

html,
body {
    min-height: 100%;
}

body {
    margin: 0;
    background: var(--cbg);
    color: var(--cf);
    font-family: var(--font-sans);
    font-size: 1vw;
    line-height: 1.41vw;
}

@media (max-width: 1440px) {
    body {
        font-size: 1.333vw;
        line-height: 1.87953vw;
    }
}

@media (max-width: 768px) {
    body {
        font-size: 2.5vw;
        line-height: 3.525vw;
    }
}

@media (max-width: 480px) {
    body {
        font-size: 4vw;
        line-height: 5.64vw;
    }
}

img,
svg {
    display: block;
    max-width: 100%;
}

button,
input,
select,
textarea {
    color: inherit;
    font: inherit;
}

button {
    cursor: pointer;
}

/* Текст только для читалки экрана. Нужен там, где смысл ячейки или кнопки
   виден глазами, но словами в разметке не сказан: заголовок колонки с фото,
   подпись у кнопки-иконки.

   Не `display: none` и не нулевой размер: и то и другое убирает узел из
   дерева доступности, то есть ровно оттуда, куда мы его и клали. */
.visually-hidden {
    position: absolute;
    clip-path: inset(50%);
    margin: -1px;
    border: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
}


/* Source: typography.css */
/* Заголовочный шрифт отдельным токеном: по умолчанию --font-serif равен
   --font-sans, поэтому сайт без своего шрифта выглядит как раньше, а сайту с
   засечками достаточно одной настройки в админке вместо правки CSS. */
h1,
h2,
h3,
h4,
.h1,
.h2,
.h3,
.h4 {
    margin: 0;
    font-family: var(--font-serif, var(--font-sans));
}

h1,
.h1 {
    font-size: var(--fs-h1);
    font-weight: 700;
    line-height: 1.15;
}

h2,
.h2 {
    font-size: var(--fs-h2);
    font-weight: 700;
    line-height: 1.2;
}

h3,
.h3 {
    font-size: var(--fs-h3);
    font-weight: 600;
    line-height: 1.3;
}

h4,
.h4 {
    font-size: var(--fs-h4);
    font-weight: 600;
    line-height: 1.4;
}

p {
    margin: 0;
}

p + p {
    margin-top: var(--i-esm);
}

a {
    color: inherit;
    text-decoration: none;
    transition:
        color var(--a-time) var(--a-tfunc),
        opacity var(--a-time) var(--a-tfunc);
}

/* Ссылка — текст: светлый акцент на белом даёт 1.99:1. */
a:link,
a:visited {
    color: var(--caf-strong);
}

a:hover {
    color: var(--cf);
}

ul,
ol {
    margin: 0;
    padding-left: var(--i-sm);
}

li + li {
    margin-top: calc(var(--i-esm) / 2);
}

.heading {
    margin-bottom: var(--i-md);
}

.heading > span {
    display: inline-block;
}

.text-muted {
    color: var(--c-pl);
}


/* Source: layout.css */
.wrapper {
    min-height: 100%;
    overflow: visible;
}

.wrapper-inner {
    min-height: calc(100vh - var(--foot-size));
    overflow: visible;
}

.container {
    width: var(--container-width);
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
}

.p-sm {
    padding-top: var(--section-pad);
    padding-bottom: var(--section-pad);
}

.padding-smaller {
    padding-top: var(--i-esm);
    padding-bottom: var(--i-esm);
}

.block-bg {
    background: var(--cil);
}

/* Тёмная секция. Палитра сайта рассчитана на светлый фон, поэтому одной
   заливкой не обойтись: приглушённый текст и цвет ссылки на ней не читаются
   и переназначаются здесь же, иначе каждый сайт чинил бы это у себя. */
.block-dark {
    background: var(--cf);
    color: var(--cw);
}

.block-dark h1,
.block-dark h2,
.block-dark h3,
.block-dark h4,
.block-dark .h1,
.block-dark .h2,
.block-dark .h3,
.block-dark .h4 {
    color: var(--cw);
}

.block-dark .text-muted {
    color: var(--ci);
}

/* Ссылка перебивается только вместе с псевдоклассом: ядерное `a:link` весит
   (0,1,1) и голый класс его не переносит. */
.block-dark a:link,
.block-dark a:visited {
    color: var(--cas);
}

.block-dark a:hover {
    color: var(--cw);
}

/* Кнопки на тёмной секции разбираются в `parts.css`, рядом с самими
   кнопками: правило цвета ссылки выше их бы перекрасило. */

.block-divider {
    border-bottom: 1px solid var(--ci);
}

.block-dark.block-divider {
    border-bottom-color: color-mix(in srgb, var(--cw) 12%, transparent);
}

.add-fwidth {
    width: 100%;
}

.align-center {
    text-align: center;
}

.flex {
    display: flex;
    flex-wrap: wrap;
}

.f-item {
    flex: 1 1 0;
}

.f-item-2 {
    width: 50%;
}

.f-item-3 {
    width: 33.3333%;
}

.f-item-4 {
    width: 25%;
}

.f-item-5 {
    width: 20%;
}

.f-item-6 {
    width: 16.6667%;
}

.indent-sm {
    margin: calc(var(--i-esm) * -1);
}

.indent-md {
    margin: calc(var(--i-sm) * -1);
}

.indent-xl {
    margin: calc(var(--i-md) * -1);
}

.gap-esm {
    gap: var(--i-esm);
}

.gap-sm {
    gap: var(--i-sm);
}

.gap-md {
    gap: var(--i-md);
}

.gap-xl {
    gap: var(--i-xl);
}

.space-between {
    justify-content: space-between;
}

.justify-center {
    justify-content: center;
}

.align-center.flex {
    align-items: center;
}

.direction-column {
    flex-direction: column;
}

.reverse {
    flex-direction: row-reverse;
}

@media (max-width: 768px) {
    .f-item-2,
    .f-item-3,
    .f-item-4,
    .f-item-5,
    .f-item-6 {
        width: 100%;
    }
}
.page-main--home > .b-hero:first-child {
	min-height: 100svh;
}

.page-main--full > section > .container {
	width: 100%;
	max-width: none;
}


/* Source: parts.css */
/* Кнопки */
.main-button {
    display: inline-flex;
    position: relative;
    overflow: hidden;
    border-radius: var(--c-sm);
    /* Белая подпись на светлом градиенте давала 1.99:1. */
    background: var(--caf-strong);
    box-shadow: var(--s-baf);
}

.main-button .main-link,
.main-button button {
    display: inline-flex;
    min-height: calc(var(--i-xl) + var(--i-sm));
    align-items: center;
    justify-content: center;
    padding: var(--i-esm) var(--i-lg);
    border: 0;
    background: transparent;
    color: var(--cw);
    font-weight: 600;
}

.main-button.c2 {
    background: var(--cf);
}

.main-button.c3 {
    border: 1px solid var(--caf);
    background: transparent;
    box-shadow: none;
}

.main-button.c3 .main-link,
.main-button.c3 button {
    color: var(--caf-strong);
}

/* Пагинатор. Разметку даёт `views/vendor/pagination/mx.blade.php`: ядерный
   шаблон Laravel собран на Tailwind, которого на публичном сайте нет. */
.pager__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0;
    padding: 0;
    gap: var(--i-esm);
    list-style: none;
}

.pager__item + .pager__item {
    margin-top: 0;
}

.pager__item > a,
.pager__item > span {
    display: inline-flex;
    min-width: calc(var(--i-xl) - var(--i-esm));
    min-height: calc(var(--i-xl) - var(--i-esm));
    align-items: center;
    justify-content: center;
    padding: 0 var(--i-esm);
    border: 1px solid var(--ci);
    border-radius: var(--c-sm);
    background: var(--cw);
    font-size: var(--fs-sm);
}

.pager__item > a:link,
.pager__item > a:visited {
    color: var(--cf);
}

.pager__item > a:hover {
    border-color: var(--caf);
    color: var(--caf-strong);
}

.pager__item--current > span {
    border-color: var(--cf);
    background: var(--cf);
    color: var(--cw);
    font-weight: 600;
}

/* Крайние кнопки подписаны словами, поэтому им нужна ширина по содержимому. */
.pager__item--edge > a,
.pager__item--edge > span {
    padding: 0 var(--i-sm);
}

.pager__item--disabled > span {
    color: var(--c-ph);
}

.pager__item--gap > span {
    border-color: transparent;
    background: transparent;
    color: var(--c-pl);
}

/* Кнопки на тёмной секции. Подпись красится под заливку кнопки, а не под фон
   секции: без этого светло-золотое правило ссылки даёт 2.60:1 на золотом.
   А контурная кнопка рассчитана на светлый фон — тёмное золото на тёмном
   это 3.28:1. */
.block-dark .main-button .main-link,
.block-dark .main-button button,
.block-dark .main-button.c3 .main-link,
.block-dark .main-button.c3 button {
    color: var(--cw);
}

.block-dark .main-button.c3 {
    border-color: var(--cas);
}

.main-button .flash {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -40%;
    width: 30%;
    transform: skewX(-20deg);
    background: color-mix(in srgb, var(--cw) 35%, transparent);
    pointer-events: none;
}

.main-button:hover .lighting {
    animation: construct-button-flash calc(var(--a-time) * 2) var(--a-tfunc);
}

@keyframes construct-button-flash {
    to {
        left: 120%;
    }
}

/* Формы и поля */
.form,
.form-fields {
    display: flex;
    flex-direction: column;
    gap: var(--i-esm);
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: calc(var(--i-esm) / 2);
}

.form-field label {
    font-size: var(--fs-sm);
    font-weight: 500;
}

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    min-height: calc(var(--i-xl) + var(--i-sm));
    padding: var(--i-esm) var(--i-sm);
    border: 1px solid var(--ci);
    border-radius: var(--c-esm);
    outline: 0;
    background: var(--cfbg);
    transition:
        border-color var(--a-time) var(--a-tfunc),
        box-shadow var(--a-time) var(--a-tfunc);
}

.form-field textarea {
    min-height: calc(var(--i-xxl) * 2);
    resize: vertical;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
    color: var(--c-pl);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    border-color: var(--caf-strong);
    box-shadow: 0 0 0 2rem color-mix(in srgb, var(--caf) 20%, transparent);
}

.form-field-error {
    color: var(--c-err);
    font-size: var(--fs-sm);
}

/* Карточки */
.card {
    height: 100%;
    padding: var(--i-md);
    border: 1px solid var(--ci);
    border-radius: var(--c-sm);
    background: var(--cbg-card);
    box-shadow: var(--s-sm);
}

.card-title {
    margin-bottom: var(--i-esm);
    font-size: var(--fs-h4);
    font-weight: 600;
}

/* Попапы */
.popup-overlay {
    display: grid;
    position: fixed;
    z-index: 9999;
    inset: 0;
    place-items: center;
    padding: var(--i-sm);
    background: color-mix(in srgb, var(--cb) 55%, transparent);
}

.popup,
.popup-dialog {
    position: relative;
    width: min(100%, 640rem);
    max-height: calc(100vh - var(--i-xl));
    overflow: auto;
    padding: var(--i-md);
    border-radius: var(--c-sm);
    background: var(--cbg);
    box-shadow: var(--s-lg);
}

.popup-overlay[hidden] {
    display: none;
}

.popup-dialog__close {
    position: absolute;
    top: var(--i-esm);
    right: var(--i-esm);
    width: calc(var(--i-sm) * 2);
    height: calc(var(--i-sm) * 2);
    border: 1px solid var(--ci);
    border-radius: var(--c-esm);
    background: var(--cbg);
    color: var(--cf);
    font-size: var(--fs-h4);
}

.mx-form {
    display: grid;
    gap: var(--i-sm);
}

.mx-form__honeypot {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.mx-form__grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--i-sm);
}

.mx-form__field {
    display: flex;
    grid-column: span 6;
    min-width: 0;
    flex-direction: column;
    gap: var(--i-esm);
}

.mx-form__field--half {
    grid-column: span 3;
}

.mx-form__field--third {
    grid-column: span 2;
}

.mx-form__field label,
.mx-form__field legend {
    color: var(--cf);
    font-size: var(--fs-sm);
    font-weight: 600;
}

.mx-form__field label span,
.mx-form__field legend span,
.mx-form__error {
    color: var(--c-err);
}

.mx-form__field input:not([type="checkbox"], [type="radio"]),
.mx-form__field textarea,
.mx-form__field select {
	width: 100%;
	min-height: calc(var(--i-xl) + var(--i-sm));
	padding: var(--i-esm) var(--i-sm);
	border: 1px solid var(--ci);
	border-radius: var(--c-esm);
	outline: 0;
	background: var(--cfbg);
	color: var(--cf);
	transition:
		border-color var(--a-time) var(--a-tfunc),
		box-shadow var(--a-time) var(--a-tfunc);
}

.mx-form__field input:not([type="checkbox"], [type="radio"]):focus,
.mx-form__field textarea:focus,
.mx-form__field select:focus {
	border-color: var(--caf-strong);
	box-shadow: 0 0 0 2rem color-mix(in srgb, var(--caf) 20%, transparent);
}

.mx-form__choice {
	display: flex;
	align-items: flex-start;
	gap: var(--i-esm);
}

.mx-form__choice input[type="checkbox"],
.mx-form__choice input[type="radio"] {
	display: inline-grid;
	width: var(--i-md);
	height: var(--i-md);
	flex: 0 0 var(--i-md);
	appearance: none;
	place-content: center;
	border: 1px solid var(--ci);
	border-radius: var(--c-esm);
	background: var(--cfbg);
	transition:
		border-color var(--a-time) var(--a-tfunc),
		background-color var(--a-time) var(--a-tfunc);
}

.mx-form__choice input[type="radio"] {
	border-radius: 50%;
}

.mx-form__choice input[type="checkbox"]::before,
.mx-form__choice input[type="radio"]::before {
	width: calc(var(--i-sm) / 2);
	height: calc(var(--i-sm) / 2);
	transform: scale(0);
	background: var(--cw);
	content: "";
	transition: transform var(--a-time) var(--a-tfunc);
}

.mx-form__choice input[type="checkbox"]::before {
	clip-path: polygon(14% 44%, 0 65%, 42% 100%, 100% 18%, 80% 0, 39% 62%);
}

.mx-form__choice input[type="radio"]::before {
	border-radius: 50%;
}

.mx-form__choice input[type="checkbox"]:checked,
.mx-form__choice input[type="radio"]:checked {
	border-color: var(--caf-strong);
	background: var(--caf);
}

.mx-form__choice input[type="checkbox"]:checked::before,
.mx-form__choice input[type="radio"]:checked::before {
	transform: scale(1);
}

.mx-form__field small,
.mx-form__error,
.mx-form__status {
    font-size: var(--fs-sm);
}

.mx-form__status:not(:empty) {
    padding: var(--i-sm);
    border: 1px solid var(--ci);
    border-radius: var(--c-esm);
    color: var(--cf);
}

body.mx-popup-open {
    overflow: hidden;
}

@media (max-width: 768px) {
    .mx-form__field,
    .mx-form__field--half,
    .mx-form__field--third {
        grid-column: span 6;
    }
}

/* Пагинация */
.pagination,
.pagination ul {
    display: flex;
    align-items: center;
    gap: var(--i-esm);
    padding: 0;
    list-style: none;
}

.pagination a,
.pagination span {
    display: inline-flex;
    min-width: calc(var(--i-sm) * 2);
    min-height: calc(var(--i-sm) * 2);
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ci);
    border-radius: var(--c-esm);
}

.pagination .active {
    border-color: var(--caf-strong);
    background: var(--caf);
    color: var(--cw);
}

/* Социальные сети и сервисные иконки */
.socials {
    display: flex;
    align-items: center;
    gap: var(--i-esm);
}

.socials svg,
.icon-msg,
.icon-service {
    width: calc(var(--i-sm) * 2);
    height: calc(var(--i-sm) * 2);
    color: var(--caf-strong);
}

.socials .vk {
    color: var(--c-vk);
}

.socials .ok {
    color: var(--c-ok);
}

.socials .tg {
    color: var(--c-tg);
}

.socials .wa {
    color: var(--c-wa);
}

/* Хлебные крошки */
.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--i-esm);
    padding: 0;
    list-style: none;
}

.breadcrumbs li {
    display: inline-flex;
    align-items: center;
    gap: var(--i-esm);
    margin: 0;
    color: var(--c-pl);
    font-size: var(--fs-sm);
}

.breadcrumbs li:not(:last-child)::after {
    color: var(--caf-strong);
    content: "›";
}

.breadcrumbs li:last-child {
    color: var(--cf);
}

/* ── Галерея / слайдер ──────────────────────────────────────────────────────
   Универсальный компонент для блоков (hero, «о нас»): несколько кадров с
   листанием. Заполняет свой контейнер (у него задана высота или aspect-ratio),
   скругление и обрезку наследует от него. Логика — в JS блока по [data-gallery]. */
.gallery {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: inherit;
}

.gallery__track {
    display: flex;
    height: 100%;
    transition: transform var(--a-time, 0.5s) var(--a-tfunc, ease);
}

.gallery__slide {
    flex: 0 0 100%;
    height: 100%;
}

.gallery__slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery__arrow {
    position: absolute;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--i-lg);
    height: var(--i-lg);
    transform: translateY(-50%);
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
    color: var(--cw);
    font-size: 24rem;
    line-height: 1;
    cursor: pointer;
    transition: background var(--a-time, 0.2s) var(--a-tfunc, ease);
}

.gallery__arrow:hover {
    background: rgba(0, 0, 0, 0.55);
}

.gallery__arrow--prev {
    left: var(--i-esm);
}

.gallery__arrow--next {
    right: var(--i-esm);
}

.gallery__dots {
    position: absolute;
    right: 0;
    bottom: var(--i-esm);
    left: 0;
    display: flex;
    justify-content: center;
    gap: 8rem;
}

.gallery__dot {
    width: 8rem;
    height: 8rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    cursor: pointer;
}

.gallery__dot.is-active {
    background: var(--cw);
}


/* Source: navigation.css */
/* Общая навигационная оболочка: header, menu и mobile drawer. */
.site-header {
    position: relative;
    z-index: 10;
    border-bottom: 1px solid var(--ci);
    background: var(--cbg);
}

.site-header__main {
    background: var(--cbg);
}

.site-header__row {
    display: flex;
    min-height: calc(var(--i-xxl) + var(--i-sm));
    align-items: center;
    gap: var(--i-md);
}

.site-logo {
    width: calc(var(--i-xxl) * 2);
    flex: 0 0 calc(var(--i-xxl) * 2);
}

.site-logo__link {
    display: flex;
    align-items: center;
}

.site-logo img {
    width: 100%;
    height: auto;
}

.site-header__identity,
.site-header__place,
.site-header__contacts,
.site-header__drawer-contacts {
    display: flex;
    flex-direction: column;
    gap: calc(var(--i-esm) / 2);
}

.site-header__identity {
    min-width: 0;
    flex: 1 1 auto;
}

.site-header__identity span,
.site-header__place span,
.site-header__contacts span,
.site-header__drawer-contacts span {
    color: var(--c-pl);
    font-size: var(--fs-sm);
}

.site-header__place {
    max-width: calc(var(--i-xxl) * 4);
}

.site-header__contacts {
    margin-left: auto;
    text-align: right;
}

.site-header__phone {
    color: var(--cf);
    font-weight: 600;
    white-space: nowrap;
}

.site-header__messengers {
    display: flex;
    align-items: center;
    gap: var(--i-esm);
}

.site-header__messengers a {
    display: grid;
    width: calc(var(--i-sm) * 2);
    height: calc(var(--i-sm) * 2);
    place-items: center;
    border: 1px solid var(--ci);
    border-radius: 50%;
}

.site-header__messengers svg,
.site-header__toggle svg,
.site-header__close svg {
    width: var(--i-sm);
    height: var(--i-sm);
}

.site-header__messengers .is-whatsapp {
    color: var(--c-wa);
}

.site-header__messengers .is-telegram {
    color: var(--c-tg);
}

.site-header__messengers .is-viber {
    color: var(--c-vi);
}

.site-header__messengers .is-max {
    color: var(--c-max);
}
.site-header__navigation {
    border-top: 1px solid var(--ci);
    background: var(--cil);
}

.site-header__desktop-menu {
    flex: 1 1 auto;
}

.site-header__desktop-menu > ul {
    display: flex;
    align-items: stretch;
    gap: var(--i-sm);
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-header__desktop-menu li {
    position: relative;
    margin: 0;
}

.site-header__desktop-menu > ul > li > a {
    display: flex;
    min-height: calc(var(--i-xl) + var(--i-esm));
    align-items: center;
    border-bottom: 1px solid transparent;
    color: var(--cf);
    font-size: var(--fs-sm);
    font-weight: 500;
}

.site-header__desktop-menu li.active > a,
.site-header__desktop-menu a:hover {
    border-color: var(--caf-strong);
    color: var(--caf-strong);
}

.site-header__desktop-menu li > ul {
    display: none;
    position: absolute;
    z-index: 100;
    top: 100%;
    left: 0;
    min-width: calc(var(--i-xxl) * 3);
    margin: 0;
    padding: var(--i-esm);
    border: 1px solid var(--ci);
    background: var(--cbg);
    box-shadow: var(--s-sm);
    list-style: none;
}

.site-header__desktop-menu li:hover > ul,
.site-header__desktop-menu li:focus-within > ul {
    display: grid;
    gap: var(--i-esm);
}

.site-header--compact .site-header__desktop-menu > ul {
    justify-content: center;
}

.site-header__toggle,
.site-header__close,
.site-header__backdrop {
    padding: 0;
    border: 0;
    background: transparent;
}

.site-header__toggle {
    display: none;
    width: calc(var(--i-sm) * 2);
    height: calc(var(--i-sm) * 2);
    place-items: center;
    border: 1px solid var(--ci);
    border-radius: var(--c-esm);
    color: var(--cf);
}

.site-header__backdrop {
    visibility: hidden;
    position: fixed;
    z-index: 102;
    inset: 0;
    opacity: 0;
    background: color-mix(in srgb, var(--cb) 55%, transparent);
    transition:
        opacity var(--a-time) var(--a-tfunc),
        visibility var(--a-time) var(--a-tfunc);
}

.site-header__drawer {
    visibility: hidden;
    display: flex;
    position: fixed;
    z-index: 103;
    top: 0;
    right: 0;
    width: min(calc(var(--i-xxl) * 6), 90%);
    height: 100vh;
    flex-direction: column;
    gap: var(--i-md);
    padding: var(--i-md);
    overflow-y: auto;
    transform: translateX(100%);
    background: var(--cbg);
    box-shadow: var(--s-lg);
    transition:
        transform var(--a-time) var(--a-tfunc),
        visibility var(--a-time) var(--a-tfunc);
}

.site-header__drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--i-sm);
}

.site-header__close {
    display: grid;
    width: calc(var(--i-sm) * 2);
    height: calc(var(--i-sm) * 2);
    place-items: center;
    color: var(--cf);
}

.site-header__drawer-menu ul {
    display: grid;
    gap: var(--i-esm);
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-header__drawer-menu ul ul {
    padding-left: var(--i-sm);
}

.site-header__drawer-menu a {
    display: flex;
    min-height: calc(var(--i-xl) + var(--i-esm));
    align-items: center;
    border-bottom: 1px solid var(--ci);
    color: var(--cf);
}

.site-header__drawer-menu li.active > a {
    color: var(--caf-strong);
}

.site-header__drawer-contacts {
    margin-top: auto;
}

.site-header.is-drawer-open .site-header__drawer,
.site-header.is-drawer-open .site-header__backdrop {
    visibility: visible;
}

.site-header.is-drawer-open .site-header__drawer {
    transform: translateX(0);
}

.site-header.is-drawer-open .site-header__backdrop {
    opacity: 1;
}

body.site-drawer-open {
    overflow: hidden;
}

@media (max-width: 768px) {
    .site-header__row {
        min-height: calc(var(--i-xxl) + var(--i-md));
        gap: var(--i-esm);
    }

    .site-logo {
        width: calc(var(--i-xxl) * 1.75);
        flex-basis: calc(var(--i-xxl) * 1.75);
    }

    .site-header__identity,
    .site-header__place,
    .site-header__contacts,
    .site-header__messengers,
    .site-header__navigation,
    .site-header .site-header__desktop-menu {
        display: none;
    }

    .site-header__toggle {
        display: grid;
        margin-left: auto;
    }
}

/* Подвал Construct: юридическая информация, навигация и контакты. */
.site-footer {
    border-top: 1px solid var(--ci);
    background: var(--cbg-foot);
}

.site-footer__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: var(--i-lg);
    padding-top: var(--i-lg);
    padding-bottom: var(--i-lg);
}

.site-footer__legal,
.site-footer__navigation,
.site-footer__contacts {
    display: flex;
    flex-direction: column;
    gap: var(--i-esm);
}

.site-footer__legal p {
    margin: 0;
    color: var(--c-pl);
    font-size: var(--fs-sm);
}

.site-footer__developer {
    color: var(--cf);
    font-size: var(--fs-sm);
}

.site-footer__legal > span {
    color: var(--c-pl);
    font-size: var(--fs-sm);
}

.site-footer__navigation {
    align-items: center;
    justify-self: center;
    width: 100%;
    text-align: center;
}

.site-footer__menu > ul {
    display: grid;
    gap: var(--i-esm);
    margin: 0;
    padding: 0;
    text-align: center;
    list-style: none;
}

.site-footer__menu li {
    margin: 0;
}

.site-footer__menu a {
    color: var(--cf);
    font-size: var(--fs-sm);
}

.site-footer__menu li.active > a,
.site-footer__menu a:hover {
    color: var(--caf-strong);
}

.site-footer__social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--i-esm);
}

.site-footer__social a {
    display: grid;
    width: calc(var(--i-sm) * 2);
    height: calc(var(--i-sm) * 2);
    place-items: center;
    border: 1px solid var(--ci);
    border-radius: 50%;
    color: var(--caf-strong);
    font-size: var(--fs-sm);
    font-weight: 600;
}

.site-footer__social svg {
    width: var(--i-sm);
    height: var(--i-sm);
}

.site-footer__contacts {
    align-items: flex-end;
    text-align: right;
}

.site-footer__contacts > span {
    color: var(--c-pl);
    font-size: var(--fs-sm);
}

.site-footer__phone {
    color: var(--cf);
    font-weight: 600;
}

@media (max-width: 768px) {
    .site-footer__grid {
        grid-template-columns: minmax(0, 1fr);
        text-align: center;
    }

    .site-footer__legal,
    .site-footer__contacts {
        align-items: center;
        text-align: center;
    }

    .site-footer__logo {
        align-self: center;
    }
}


/* Source: shop.css */
/* Витрина: каталог, карточка товара и корзина.
   Значения берутся только из токенов дизайна (mx_settings, group=design):
   размеры на сайте живут в модели fluid-rem, где 1rem равен пикселю макета. */

/* Кнопки витрины */
.button {
    display: inline-flex;
    min-height: calc(var(--i-xl) + var(--i-sm));
    align-items: center;
    justify-content: center;
    padding: var(--i-esm) var(--i-lg);
    border: 1rem solid var(--caf-strong);
    border-radius: var(--c-sm);
    background: transparent;
    color: var(--caf-strong);
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
}

/* Заливка усиленным акцентом: на светлом градиенте белая подпись давала
   1.99:1. Светлый --caf остаётся на рамках, фокусе и декоре. */
.button--primary {
    border-color: transparent;
    background: var(--caf-strong);
    color: var(--cw);
    box-shadow: var(--s-baf);
}

.button[disabled] {
    cursor: not-allowed;
    opacity: 0.5;
}

/* Разделы каталога */
.catalogue-sections {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 var(--i-lg);
    padding: 0;
    gap: var(--i-sm);
    list-style: none;
}

.catalogue-sections__link {
    display: inline-flex;
    padding: var(--i-esm) var(--i-md);
    border: 1rem solid var(--cb);
    border-radius: var(--c-sm);
    color: var(--cf);
    text-decoration: none;
}

.catalogue-sections__link:hover {
    border-color: var(--caf-strong);
    color: var(--caf-strong);
}

/* Сетка товаров */
.catalogue-grid {
    display: grid;
    margin: 0;
    padding: 0;
    gap: var(--i-lg);
    grid-template-columns: repeat(auto-fill, minmax(260rem, 1fr));
    list-style: none;
}

/* Подборка на витрине: ряд фиксированной длины, а не автозаполнение. Число
   карточек задаёт владелец, и «четыре в ряд» не должно превращаться в пять
   на широком экране. */
.catalogue-grid--pick {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1024px) {
    .catalogue-grid--pick {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .catalogue-grid--pick {
        grid-template-columns: minmax(0, 1fr);
    }
}

.catalogue-card {
    display: flex;
    position: relative;
    flex-direction: column;
    padding: var(--i-md);
    border-radius: var(--c-md);
    background: var(--cbg-card);
    gap: var(--i-esm);
}

.catalogue-card__link {
    display: flex;
    flex-direction: column;
    color: var(--cf);
    gap: var(--i-esm);
    text-decoration: none;
}

.catalogue-card__photo {
    display: flex;
    height: 220rem;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--c-sm);
    background: var(--cfbg);
}

.catalogue-card__photo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.catalogue-card__badges {
    display: flex;
    position: absolute;
    top: var(--i-md);
    left: var(--i-md);
    flex-wrap: wrap;
    gap: var(--i-esm);
}

/* Текст на метке тёмный: белый на светлых фирменных подложках даёт от 1.8:1
   до 2.6:1 и не читается. Белым остаётся только «Акция» на красном — 5.15:1. */
.catalogue-card__badge,
.product__badge {
    padding: 0 var(--i-esm);
    border-radius: var(--c-esm);
    background: var(--cal);
    color: var(--cf);
    font-size: var(--fs-sm);
    font-weight: 600;
}

.catalogue-card__badge--sale,
.product__badge--sale {
    background: var(--c-err);
    color: var(--cw);
}

.catalogue-card__badge--new,
.product__badge--new {
    background: var(--cas);
}

.catalogue-card__badge--preorder,
.product__badge--preorder {
    background: var(--c-pl);
}

.catalogue-card__title {
    font-weight: 600;
}

.catalogue-card__prices,
.product__prices {
    display: flex;
    align-items: baseline;
    gap: var(--i-esm);
}

.catalogue-card__price {
    font-size: var(--fs-h4);
    font-weight: 700;
}

.catalogue-card__old-price,
.product__old-price {
    color: var(--c-pl);
}

.catalogue-card__buy {
    margin-top: auto;
}

.catalogue-card__out,
.catalogue__empty {
    color: var(--c-pl);
}

.catalogue-pager {
    margin-top: var(--i-lg);
}

/* Карточка товара */
.product {
    display: grid;
    gap: var(--i-xl);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

@media (max-width: 768px) {
    .product {
        grid-template-columns: minmax(0, 1fr);
    }
}

.product__media {
    position: relative;
}

.product__badges {
    display: flex;
    position: absolute;
    z-index: 1;
    top: var(--i-sm);
    left: var(--i-sm);
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    gap: var(--i-esm);
    list-style: none;
}

.product__photo {
    display: flex;
    height: 420rem;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--c-md);
    background: var(--cfbg);
}

.product__photo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.product__thumbs {
    display: flex;
    flex-wrap: wrap;
    margin: var(--i-sm) 0 0;
    padding: 0;
    gap: var(--i-esm);
    list-style: none;
}

.product__thumb {
    display: flex;
    width: 72rem;
    height: 72rem;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0;
    border: 1rem solid var(--cb);
    border-radius: var(--c-sm);
    background: var(--cfbg);
    cursor: pointer;
}

.product__thumb:hover {
    border-color: var(--caf-strong);
}

.product__thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.product__info {
    display: flex;
    flex-direction: column;
    gap: var(--i-md);
}

.product__sku,
.product__unit,
.product__note {
    margin: 0;
    color: var(--c-pl);
    font-size: var(--fs-sm);
}

.product__price {
    font-size: var(--fs-h2);
    font-weight: 700;
}

.product__variants {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    border: 0;
    gap: var(--i-esm);
}

.product__variants legend {
    width: 100%;
    padding: 0 0 var(--i-esm);
    color: var(--c-pl);
    font-size: var(--fs-sm);
}

.product__variant {
    display: inline-flex;
    align-items: center;
    padding: var(--i-esm) var(--i-md);
    border: 1rem solid var(--cb);
    border-radius: var(--c-sm);
    cursor: pointer;
    gap: var(--i-esm);
}

.product__variant:has(input:checked) {
    border-color: var(--caf-strong);
    color: var(--caf-strong);
}

.product__variant.is-out {
    cursor: not-allowed;
    opacity: 0.5;
}

/* Фирменный голубой на белом даёт 1.94:1 — как текст он нечитаем
   (LANDMINES №4). Наличие пишем основным цветом, отсутствие — цветом ошибки:
   это единственный статусный цвет в системе. */
.product__stock {
    margin: 0;
    color: var(--cf);
}

.product__stock--out {
    color: var(--c-err);
}

.product__buy {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--i-md);
}

.product__quantity {
    display: inline-flex;
    align-items: stretch;
    overflow: hidden;
    border: 1rem solid var(--cb);
    border-radius: var(--c-sm);
}

.product__step {
    width: var(--i-xl);
    border: 0;
    background: var(--cfbg);
    color: var(--cf);
    font-size: var(--fs-h4);
    cursor: pointer;
}

.product__quantity-input,
.cart__quantity {
    width: 80rem;
    border: 0;
    appearance: textfield;
    background: transparent;
    color: var(--cf);
    text-align: center;
}

.product__quantity-input::-webkit-outer-spin-button,
.product__quantity-input::-webkit-inner-spin-button,
.cart__quantity::-webkit-outer-spin-button,
.cart__quantity::-webkit-inner-spin-button {
    margin: 0;
    appearance: none;
}

/* Корзина, форма оформления и поле адреса скрываются атрибутом `hidden`, но
   собственный `display: flex` у этих же классов сильнее правила браузера
   `[hidden] { display: none }`. Селектор с атрибутом даёт специфичность выше
   и выигрывает без !important. */
.cart[hidden],
.cart-checkout[hidden],
.cart-checkout__field[hidden] {
    display: none;
}

/* Корзина */
.cart__table {
    width: 100%;
    border-collapse: collapse;
}

.cart__table th {
    padding: var(--i-esm);
    border-bottom: 1rem solid var(--cb);
    color: var(--c-pl);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-align: left;
}

.cart__table td {
    padding: var(--i-sm) var(--i-esm);
    border-bottom: 1rem solid var(--cb);
    vertical-align: middle;
}

.cart__number-cell {
    text-align: right;
}

.cart__thumb {
    width: 64rem;
    height: 64rem;
    border-radius: var(--c-sm);
    object-fit: cover;
}

.cart__sku {
    color: var(--c-pl);
}

.cart__notice {
    color: var(--c-err);
}

.cart__quantity {
    width: 88rem;
    border: 1rem solid var(--cb);
    border-radius: var(--c-sm);
    padding-block: var(--i-esm);
}

.cart__remove {
    border: 0;
    background: transparent;
    color: var(--c-pl);
    font-size: var(--fs-h4);
    cursor: pointer;
    line-height: 1;
}

.cart__remove:hover {
    color: var(--c-err);
}

.cart__total {
    font-size: var(--fs-h4);
    text-align: right;
}

.cart__empty {
    color: var(--c-pl);
}

.cart-thanks {
    margin-bottom: var(--i-lg);
    padding: var(--i-lg);
    border-radius: var(--c-md);
    background: var(--cbg-card);
}

/* Оформление */
.cart-checkout {
    display: flex;
    max-width: 720rem;
    flex-direction: column;
    margin-top: var(--i-xl);
    gap: var(--i-md);
}

.cart-checkout__title {
    margin: 0;
    font-size: var(--fs-h3);
}

.cart-checkout__errors {
    margin: 0;
    padding: var(--i-sm) var(--i-lg);
    border-radius: var(--c-sm);
    background: var(--cfbg);
    color: var(--c-err);
}

.cart-checkout__grid {
    display: grid;
    gap: var(--i-md);
    grid-template-columns: repeat(auto-fit, minmax(220rem, 1fr));
}

.cart-checkout__field {
    display: flex;
    flex-direction: column;
    gap: var(--i-esm);
}

.cart-checkout__field > span {
    color: var(--c-pl);
    font-size: var(--fs-sm);
}

.cart-checkout__field i {
    color: var(--c-err);
    font-style: normal;
}

.cart-checkout__field input,
.cart-checkout__field textarea {
    padding: var(--i-esm) var(--i-sm);
    border: 1rem solid var(--cb);
    border-radius: var(--c-sm);
    background: var(--cbg);
    color: var(--cf);
    font-family: inherit;
    font-size: inherit;
}

.cart-checkout__field input:focus,
.cart-checkout__field textarea:focus {
    border-color: var(--caf-strong);
    outline: none;
}

.cart-checkout__choices {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    border: 0;
    gap: var(--i-esm);
}

.cart-checkout__choices legend {
    padding: 0 0 var(--i-esm);
    color: var(--c-pl);
    font-size: var(--fs-sm);
}

.cart-checkout__choice {
    display: flex;
    align-items: flex-start;
    padding: var(--i-esm) var(--i-sm);
    border: 1rem solid var(--cb);
    border-radius: var(--c-sm);
    cursor: pointer;
    gap: var(--i-esm);
}

.cart-checkout__choice:has(input:checked) {
    border-color: var(--caf-strong);
}

.cart-checkout__choice small {
    display: block;
    color: var(--c-pl);
    font-size: var(--fs-sm);
}

.cart-checkout__choice em {
    color: var(--cf);
    font-style: normal;
    font-weight: 600;
}

.cart-checkout__agreement {
    display: flex;
    align-items: flex-start;
    gap: var(--i-esm);
}

.cart-checkout__total {
    margin: 0;
    font-size: var(--fs-h4);
}

.cart-checkout__submit {
    align-self: flex-start;
}

/* Раскладка каталога: сайдбар фильтров и сетка товаров */
.catalogue-layout {
    display: grid;
    align-items: start;
    gap: var(--i-lg);
    grid-template-columns: 300rem minmax(0, 1fr);
}

@media (max-width: 1024px) {
    .catalogue-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

.catalogue-layout__filters-toggle {
    display: none;
    width: 100%;
    min-height: calc(var(--i-xl) + var(--i-sm));
    align-items: center;
    justify-content: center;
    border: 1rem solid var(--caf-strong);
    border-radius: var(--c-sm);
    background: transparent;
    color: var(--caf-strong);
    font-family: inherit;
    font-size: inherit;
    font-weight: 600;
    cursor: pointer;
}

@media (max-width: 1024px) {
    .catalogue-layout__filters-toggle {
        display: flex;
    }

    /* На узком экране панель скрыта, пока её не открыли кнопкой. */
    .catalogue-layout__filters[hidden] {
        display: none;
    }

    .catalogue-layout__filters {
        margin-top: var(--i-sm);
    }
}

/* Сайдбар фильтров */
.shop-filters {
    display: flex;
    flex-direction: column;
    gap: var(--i-sm);
}

.shop-filters__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--i-sm);
}

.shop-filters__title {
    font-size: var(--fs-h4);
    font-weight: 700;
}

.shop-filters__reset {
    color: var(--caf-strong);
    font-size: var(--fs-sm);
}

.shop-filters__group {
    overflow: hidden;
    border-radius: var(--c-md);
    background: var(--cil);
}

.shop-filters__toggle {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding: var(--i-sm) var(--i-md);
    border: 0;
    background: transparent;
    color: var(--cf);
    font-family: inherit;
    font-size: var(--fs-h4);
    font-weight: 700;
    cursor: pointer;
    gap: var(--i-sm);
    text-align: left;
}

.shop-filters__chevron {
    flex: none;
    transition: transform var(--a-time) var(--a-tfunc);
}

.shop-filters__toggle[aria-expanded='false'] .shop-filters__chevron {
    transform: rotate(-90deg);
}

.shop-filters__body {
    padding: 0 var(--i-md) var(--i-md);
}

.shop-filters__body[hidden] {
    display: none;
}

.shop-filters__options {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    gap: var(--i-esm);
    list-style: none;
}

.shop-filters__option {
    display: flex;
    align-items: center;
    cursor: pointer;
    gap: var(--i-esm);
}

.shop-filters__option input {
    width: 18rem;
    height: 18rem;
    flex: none;
    accent-color: var(--caf-strong);
}

.shop-filters__label {
    flex: 1;
}

/* Счётчик — не украшение: по нему выбирают, что включать. Приглушённый
   --c-pl на подложке фильтра давал 2.3:1. */
.shop-filters__count {
    color: var(--cf);
    font-size: var(--fs-sm);
}

.shop-filters__range {
    display: grid;
    gap: var(--i-esm);
    grid-template-columns: 1fr 1fr;
}

.shop-filters__range label {
    display: flex;
    align-items: center;
    gap: var(--i-esm);
}

.shop-filters__range span {
    color: var(--c-pl);
    font-size: var(--fs-sm);
}

.shop-filters__range input {
    width: 100%;
    min-width: 0;
    padding: var(--i-esm);
    border: 1rem solid var(--ci);
    border-radius: var(--c-sm);
    background: var(--cw);
    color: var(--cf);
    font-family: inherit;
    font-size: inherit;
}

.shop-filters__unit {
    margin: var(--i-esm) 0 0;
    color: var(--c-pl);
    font-size: var(--fs-sm);
}

.shop-filters__submit {
    width: 100%;
}

/* Со скриптами форма отправляется сама, кнопка нужна только без них. */
.js-on .shop-filters__submit {
    display: none;
}

/* Поиск по сайту */
.site-search {
    display: flex;
    position: relative;
    gap: var(--i-esm);
}

.site-search input {
    width: 100%;
    min-width: 0;
    flex: 1;
    padding: var(--i-esm) var(--i-sm);
    border: 1rem solid var(--ci);
    border-radius: var(--c-sm);
    background: var(--cw);
    color: var(--cf);
    font-family: inherit;
    font-size: inherit;
}

.site-search input:focus {
    border-color: var(--caf);
    outline: none;
}

.site-search--page {
    max-width: 640rem;
    margin-bottom: var(--i-lg);
}

/* Подсказки перекрывают контент, поэтому лежат над ним. */
.site-search__suggest {
    position: absolute;
    z-index: 5;
    top: calc(100% + var(--i-esm));
    right: 0;
    left: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    border: 1rem solid var(--ci);
    border-radius: var(--c-sm);
    background: var(--cw);
    box-shadow: var(--s-md);
    list-style: none;
}

.site-search__suggest[hidden] {
    display: none;
}

.site-search__option {
    display: flex;
    width: 100%;
    align-items: center;
    padding: var(--i-esm) var(--i-sm);
    border: 0;
    background: transparent;
    color: var(--cf);
    cursor: pointer;
    gap: var(--i-esm);
    text-align: left;
    text-decoration: none;
}

.site-search__option:hover,
.site-search__option.is-active {
    background: var(--cil);
}

.site-search__option img {
    width: 40rem;
    height: 40rem;
    flex: none;
    border-radius: var(--c-esm);
    object-fit: cover;
}

.site-search__option-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-search__option-price {
    flex: none;
    font-weight: 600;
}

.search__hint,
.search__empty,
.search__summary {
    color: var(--cf);
}

.search__scope,
.search__hint {
    color: var(--c-pl);
}

.search-results {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    gap: var(--i-sm);
    list-style: none;
}

.search-results__item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-bottom: var(--i-sm);
    border-bottom: 1rem solid var(--cb);
    gap: var(--i-md);
}

.search-results__link {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: calc(var(--i-esm) / 2);
}

.search-results__title {
    font-weight: 600;
}

.search-results__text {
    color: var(--c-pl);
    font-size: var(--fs-sm);
}

.search-results__price {
    flex: none;
    font-weight: 700;
}

/* Шапка магазина: верхняя строка, каталог, поиск, корзина. */
.shop-header {
    position: relative;
    z-index: 10;
    border-bottom: 1rem solid var(--ci);
    background: var(--cbg);
}

.shop-header__top {
    border-bottom: 1rem solid var(--ci);
    background: var(--cil);
    font-size: var(--fs-sm);
}

.shop-header__top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--i-md);
    padding: var(--i-esm) 0;
}

.shop-header__top-menu ul {
    display: flex;
    align-items: center;
    gap: var(--i-md);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Меню верхней строки — горизонтальный флекс. Гасим вертикальный отступ
   списков из типографики (`li + li`), иначе второй и последующие пункты
   съезжают вниз и строка выглядит неровной. */
.shop-header__top-menu li + li {
    margin-top: 0;
}

.shop-header__top-menu a {
    color: var(--cf);
}

/* Вложенные пункты в верхней строке только шумят: она для коротких ссылок. */
.shop-header__top-menu li ul {
    display: none;
}

.shop-header__places {
    display: flex;
    gap: var(--i-md);
    color: var(--c-pl);
}

.shop-header__places span {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--i-esm) / 2);
}

.shop-header__places svg {
    width: 16rem;
    height: 16rem;
    flex: none;
}

.shop-header__row {
    display: flex;
    align-items: center;
    gap: var(--i-md);
    padding: var(--i-sm) 0;
}

.shop-header__logo {
    display: flex;
    flex-direction: column;
    gap: calc(var(--i-esm) / 2);
}

.shop-header__descriptor {
    color: var(--c-pl);
    font-size: var(--fs-sm);
    line-height: 1.2;
}

.shop-header__burger {
    display: none;
    width: calc(var(--i-sm) * 2);
    height: calc(var(--i-sm) * 2);
    flex: none;
    padding: 0;
    border: 1rem solid var(--ci);
    border-radius: var(--c-esm);
    background: transparent;
    color: var(--cf);
    place-items: center;
}

.shop-header__burger svg,
.shop-header__catalog-button svg,
.shop-header__action svg {
    width: 20rem;
    height: 20rem;
    /* Иконки шапки контурные. У сердечка заливкой управляет только CSS —
       у него в symbol нет `fill`, иначе не закрасить отложенный товар. */
    fill: none;
}

.shop-header__catalog {
    position: relative;
    flex: none;
}

a.shop-header__catalog-button {
    display: inline-flex;
    align-items: center;
    gap: var(--i-esm);
    padding: var(--i-esm) var(--i-md);
    border: 0;
    border-radius: var(--c-sm);
    /* Не `--caf`: он даёт под белым текстом 1.99:1 и как подпись не читается. */
    background: var(--caf-strong);
    color: var(--cw);
    font-family: inherit;
    font-size: var(--fs-p);
    cursor: pointer;
}

.shop-header__catalog-menu {
    visibility: hidden;
    position: absolute;
    z-index: 20;
    top: calc(100% + var(--i-esm));
    left: 0;
    min-width: 260rem;
    margin: 0;
    padding: var(--i-esm) 0;
    border: 1rem solid var(--ci);
    border-radius: var(--c-sm);
    background: var(--cw);
    box-shadow: var(--s-lg);
    list-style: none;
    opacity: 0;
    transition:
        opacity var(--a-time) var(--a-tfunc),
        visibility var(--a-time) var(--a-tfunc);
}

.shop-header__catalog:hover .shop-header__catalog-menu,
.shop-header__catalog:focus-within .shop-header__catalog-menu {
    visibility: visible;
    opacity: 1;
}

.shop-header__catalog-menu li {
    position: relative;
}

.shop-header__catalog-menu a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--i-sm);
    padding: var(--i-esm) var(--i-sm);
    color: var(--cf);
}

.shop-header__catalog-menu a:hover {
    background: var(--cil);
}

.shop-header__catalog-menu svg {
    width: 14rem;
    height: 14rem;
    flex: none;
    color: var(--c-pl);
}

/* Подразделы выпадают вбок — так первый уровень остаётся коротким. */
.shop-header__catalog-menu li ul {
    visibility: hidden;
    position: absolute;
    top: calc(var(--i-esm) * -1);
    left: 100%;
    min-width: 220rem;
    margin: 0;
    padding: var(--i-esm) 0;
    border: 1rem solid var(--ci);
    border-radius: var(--c-sm);
    background: var(--cw);
    box-shadow: var(--s-lg);
    list-style: none;
    opacity: 0;
    transition:
        opacity var(--a-time) var(--a-tfunc),
        visibility var(--a-time) var(--a-tfunc);
}

.shop-header__catalog-menu li:hover > ul,
.shop-header__catalog-menu li:focus-within > ul {
    visibility: visible;
    opacity: 1;
}

.shop-header__search {
    flex: 1 1 auto;
    min-width: 0;
}

.shop-header__search button {
    display: grid;
    width: calc(var(--i-sm) * 2);
    flex: none;
    padding: 0;
    border: 0;
    border-radius: var(--c-sm);
    background: var(--cil);
    color: var(--cf);
    cursor: pointer;
    place-items: center;
}

.shop-header__search button svg {
    width: 18rem;
    height: 18rem;
}

a.shop-header__action {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--i-esm) / 2);
    color: var(--cf);
    font-size: var(--fs-sm);
}

.shop-header__action-icon {
    position: relative;
    display: block;
}

.shop-header__badge {
    position: absolute;
    top: -6rem;
    right: -8rem;
    min-width: 16rem;
    height: 16rem;
    padding: 0 4rem;
    border-radius: 8rem;
    background: var(--caf-strong);
    color: var(--cw);
    font-size: 11rem;
    font-weight: 700;
    line-height: 16rem;
    text-align: center;
}

/* ── Плавающая корзина ─────────────────────────────────────────────────────
   Фикс-кнопка справа-снизу. Видна только когда корзина не пуста: внутри лежит
   тот же счётчик `data-cart-counter`, что и в шапке (его ведёт shop.js — меняет
   число и снимает `hidden`). Видимость кнопки завязана на этот бейдж через
   `:has()`, поэтому отдельный JS не нужен. По умолчанию скрыта — на старых
   браузерах без `:has()` просто не появляется (безопасная деградация). */
.cart-fab {
    position: fixed;
    right: var(--i-md);
    bottom: var(--i-md);
    z-index: 60;
    display: none;
    align-items: center;
    justify-content: center;
    width: calc(var(--i-xl) + var(--i-esm));
    height: calc(var(--i-xl) + var(--i-esm));
    border-radius: 50%;
    background: var(--caf);
    color: var(--cw);
    box-shadow: var(--s-md);
    transition: transform var(--a-time, .2s) var(--a-tfunc, ease);
}

.cart-fab:has([data-cart-counter]:not([hidden])) {
    display: inline-flex;
}

.cart-fab:hover {
    transform: translateY(-2rem);
}

.cart-fab svg {
    width: 28rem;
    height: 28rem;
    fill: none;
    /* Белым явно: .cart-fab — ссылка, её `color` перебивают ссылочные стили,
       поэтому currentColor не даёт белого штриха на золотом фоне. */
    stroke: var(--cw);
}

.cart-fab__badge {
    position: absolute;
    top: -2rem;
    right: -2rem;
    min-width: 20rem;
    height: 20rem;
    padding: 0 5rem;
    border-radius: 10rem;
    background: var(--caf-strong);
    color: var(--cw);
    font-size: 12rem;
    font-weight: 700;
    line-height: 20rem;
    text-align: center;
}

.cart-fab__badge[hidden] {
    display: none;
}

.shop-header__contacts {
    display: flex;
    flex: none;
    flex-direction: column;
    line-height: 1.2;
}

.shop-header__contacts span {
    color: var(--c-pl);
    font-size: var(--fs-sm);
}

a.shop-header__phone {
    color: var(--cf);
    font-size: var(--fs-h4);
    font-weight: 700;
    white-space: nowrap;
}

.shop-header__drawer-title {
    margin: var(--i-sm) 0 0;
    color: var(--c-pl);
    font-size: var(--fs-sm);
    font-weight: 700;
    text-transform: uppercase;
}

.shop-header__drawer-catalog {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.shop-header__drawer-catalog a {
    display: block;
    padding: var(--i-esm) 0;
    border-bottom: 1rem solid var(--ci);
    color: var(--cf);
}

.shop-header__drawer-catalog svg {
    display: none;
}

@media (max-width: 1024px) {
    .shop-header__places,
    .shop-header__contacts {
        display: none;
    }
}

@media (max-width: 768px) {
    .shop-header__top {
        display: none;
    }

    .shop-header__catalog {
        display: none;
    }

    .shop-header__burger {
        display: grid;
    }

    .shop-header__row {
        flex-wrap: wrap;
    }

    .shop-header__logo {
        flex: 1;
    }

    /* Поиск занимает всю ширину: на телефоне это главный способ навигации. */
    .shop-header__search {
        order: 3;
        flex-basis: 100%;
    }

    .shop-header__action-label {
        display: none;
    }
}

.shop-header__badge[hidden] {
    display: none;
}

@media (max-width: 768px) {
    .shop-header__descriptor {
        display: none;
    }
}

/* Избранное: сердечко на карточке и страница отложенного. */
.catalogue-card__favorite,
.product__favorite {
    display: grid;
    width: calc(var(--i-sm) * 2);
    height: calc(var(--i-sm) * 2);
    padding: 0;
    border: 1rem solid var(--ci);
    border-radius: var(--c-sm);
    background: var(--cw);
    color: var(--c-pl);
    cursor: pointer;
    place-items: center;
    transition:
        color var(--a-time) var(--a-tfunc),
        border-color var(--a-time) var(--a-tfunc);
}

.catalogue-card__favorite svg,
.product__favorite svg {
    width: 20rem;
    height: 20rem;
    /* Заливкой управляет только CSS: `fill` в самом symbol перебил бы её —
       атрибут теневого содержимого выигрывает у наследования. */
    fill: none;
}

.catalogue-card__favorite:hover,
.product__favorite:hover {
    color: var(--cf);
    border-color: var(--c-pl);
}

/* Отложенное помечаем заливкой: обводка одна и та же в обоих состояниях. */
.catalogue-card__favorite.is-active,
.product__favorite.is-active {
    border-color: var(--c-err);
    color: var(--c-err);
}

.catalogue-card__favorite.is-active svg,
.product__favorite.is-active svg {
    fill: currentColor;
}

/* На карточке сердечко лежит поверх фото, поэтому вынимаем его из потока
   (`position: relative` у карточки уже есть — на нём держатся метки). */
.catalogue-card__favorite {
    position: absolute;
    z-index: 2;
    top: var(--i-esm);
    right: var(--i-esm);
}

.product__favorite {
    flex: none;
}

.favorites__empty {
    color: var(--c-pl);
}

/* Характеристики товара: подпись слева, значение справа, как в прайс-листе. */
.product__specs {
    margin: 0 0 var(--i-md);
    padding: 0;
}

.product__spec {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--i-sm);
    padding: var(--i-esm) 0;
    border-bottom: 1rem solid var(--ci);
}

.product__spec dt {
    flex: none;
    color: var(--c-pl);
}

.product__spec dd {
    margin: 0;
    text-align: right;
}

/* Панель вида и порядка над списком. Ссылками, а не формой: адрес уже несёт
   выбранные фильтры, и переносить их скрытыми полями незачем. */
.catalogue-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--i-sm);
    margin-bottom: var(--i-md);
}

.catalogue-toolbar__views {
    display: flex;
    border: 1px solid var(--ci);
    border-radius: var(--c-sm);
    overflow: hidden;
}

.catalogue-toolbar__view,
.catalogue-toolbar__sort {
    padding: var(--i-esm) var(--i-sm);
    color: inherit;
    font-size: var(--fs-sm);
    text-decoration: none;
}

.catalogue-toolbar__view.is-active {
    background: var(--caf-strong);
    color: var(--cw);
}

.catalogue-toolbar__sorts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--i-esm);
}

.catalogue-toolbar__label {
    color: var(--c-pl);
    font-size: var(--fs-sm);
}

.catalogue-toolbar__sort.is-active {
    color: var(--caf-strong);
    font-weight: 600;
}

/* Таблица шире экрана уезжает внутри своей обёртки, а не тащит за собой
   страницу: горизонтальная прокрутка всего документа ломает мобильную
   вёрстку целиком. */
.catalogue-table-scroll {
    overflow-x: auto;
}

.catalogue-table {
    border-collapse: collapse;
    width: 100%;
    font-size: var(--fs-sm);
}

.catalogue-table th,
.catalogue-table td {
    padding: var(--i-sm);
    border-bottom: 1px solid var(--ci);
    text-align: left;
    vertical-align: middle;
}

.catalogue-table th {
    color: var(--c-pl);
    font-weight: 600;
    white-space: nowrap;
}

.catalogue-table__photo,
.catalogue-table__photo-head {
    width: 72rem;
}

.catalogue-table__photo img,
.catalogue-table__photo-empty {
    border-radius: var(--c-sm);
    width: 64rem;
    height: 64rem;
    object-fit: cover;
}

.catalogue-table__photo-empty {
    display: block;
    background: var(--ci);
}

.catalogue-table__name a {
    color: inherit;
    font-weight: 600;
}

.catalogue-table__empty {
    color: var(--c-pl);
}

.catalogue-table__price {
    color: var(--caf-strong);
    font-weight: 600;
    white-space: nowrap;
}

.catalogue-table__unit {
    color: var(--c-pl);
    font-weight: 400;
}

.catalogue-table__action {
    text-align: right;
}

/* Расчёт количества на карточке товара. Тёмная подложка отделяет его от
   характеристик: это не справка о товаре, а инструмент покупателя. */
.quantity-calculator {
    padding: var(--i-md);
    border-radius: var(--c-md);
    background: var(--cf);
    color: var(--cw);
}

.quantity-calculator__title {
    margin: 0 0 var(--i-sm);
    font-weight: 600;
}

.quantity-calculator__input {
    display: flex;
    flex-wrap: wrap;
    gap: var(--i-esm);
}

.quantity-calculator__input input {
    flex: 1 1 160rem;
    padding: var(--i-esm) var(--i-sm);
    border: 0;
    border-radius: var(--c-sm);
    background: var(--cw);
    /* Цвет текста задаём явно: подложка расчёта тёмная и красит текст белым,
       а поле на ней светлое — набранное пропадало на белом фоне. */
    color: var(--cf);
}

.quantity-calculator__input input::placeholder {
    color: var(--c-pl);
}

.quantity-calculator__presets {
    display: flex;
    gap: var(--i-esm);
}

.quantity-calculator__presets button {
    padding: var(--i-esm) var(--i-sm);
    border: 1px solid var(--c-pl);
    border-radius: var(--c-sm);
    background: transparent;
    color: inherit;
    font-size: var(--fs-sm);
}

.quantity-calculator__result {
    display: grid;
    margin: var(--i-md) 0 0;
    gap: var(--i-sm);
    grid-template-columns: repeat(auto-fit, minmax(120rem, 1fr));
}

.quantity-calculator__result dt {
    font-size: var(--fs-sm);
    opacity: 0.75;
}

.quantity-calculator__result dd {
    margin: 0;
    font-size: var(--fs-h4);
    font-weight: 600;
}

.quantity-calculator__total dd {
    color: var(--cas);
}

.quantity-calculator__note {
    margin: var(--i-sm) 0 0;
    font-size: var(--fs-sm);
    opacity: 0.75;
}

/* Образец значения опции: цвет, переход для колормикса или фото раскладки.
   Дополняет название варианта, а не заменяет — цвет без подписи не выбрать. */
.product__swatch {
    display: inline-block;
    flex: none;
    border: 1px solid var(--ci);
    border-radius: 50%;
    width: var(--i-md);
    height: var(--i-md);
    background-position: center;
    background-size: cover;
}

/* Карточки подразделов в указателе каталога. Список остаётся списком ссылок:
   раздел без фотографии, описания и плашки выглядит как раньше, поэтому
   существующие сайты после обновления не меняются. */
.catalogue-sections {
    display: grid;
    margin: 0;
    padding: 0;
    gap: var(--i-md);
    grid-template-columns: repeat(auto-fill, minmax(280rem, 1fr));
    list-style: none;
}

.catalogue-sections__link {
    display: flex;
    position: relative;
    flex-direction: column;
    gap: var(--i-esm);
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.catalogue-sections__photo {
    display: block;
    position: relative;
    border-radius: var(--c-md);
    overflow: hidden;
}

.catalogue-sections__photo img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Плашка лежит на фотографии, а без неё встаёт в поток: подпись нужна
   в обоих случаях, а накладывать её не на что. */
.catalogue-sections__photo .catalogue-sections__badge {
    position: absolute;
    bottom: var(--i-esm);
    left: var(--i-esm);
}

.catalogue-sections__badge {
    align-self: flex-start;
    padding: var(--i-esm) var(--i-sm);
    border-radius: var(--c-sm);
    background: var(--cf);
    color: var(--cw);
    font-size: var(--fs-sm);
}

.catalogue-sections__title {
    font-weight: 600;
}

.catalogue-sections__text {
    color: var(--c-pl);
    font-size: var(--fs-sm);
}


/* Source: rhythm.css */
/* Версия 2: ритм секций. Файл подключается только через V2_FILES. */
:root {
    --section-k: 1;
}

.p-sm {
    padding-block: calc(var(--section-pad) * var(--section-k));
}

.padding-smaller {
    padding-block: calc(var(--section-pad-sm) * var(--section-k));
}

.container > :first-child,
.container > style:first-child + *,
.container > style + style + * {
    margin-top: 0 !important;
}

.container > :last-child {
    margin-bottom: 0 !important;
}

/* text-box: trim-both схлопывает рамку многострочного заголовка и даже
   обычного h3 относительно текстовых фрагментов. Оставляем естественную
   высоту строки; внутреннему span не нужен inline-block (фонов нет). */
.heading > span {
    display: inline;
}

.container > p:last-child,
.mx-richtext > :last-child {
    text-box: trim-end alphabetic;
}

.heading {
    margin-bottom: var(--heading-gap);
}

/* Заголовки внутри richtext не имеют класса .heading: после сброса
   старой типографики они не должны прилипать к соседним абзацам. */
[data-design="2"] .content-text > :is(h2, h3, h4) {
    margin-block: var(--i-lg) var(--heading-gap);
}
[data-design="2"] .content-text > :first-child { margin-top: 0; }
[data-design="2"] .content-text > :last-child { margin-bottom: 0; }

[data-design="2"] :is(h1, .h1, h2, .h2) {
    font-weight: var(--fw-heading, 700);
}

.section-crumbs > .container,
.page-heading > .container {
    padding-block: calc(var(--i-sm) * var(--section-k)) 0 !important;
}

.page-heading + section > .container,
.page-heading + section + section.section-catalogue > .container {
    padding-top: calc(var(--section-pad-sm) * var(--section-k)) !important;
}

@media (max-width: 768px) {
    :root {
        --section-k: 0.6;
    }
}


/* Source: buttons.css */
/* Версия 2: единая система кнопок Construct и магазина. CORE_FILES не меняем. */
[data-design="2"] .main-button {
    display: inline-flex;
    position: relative;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: none;
    background-image: none;
    box-shadow: none;
}

[data-design="2"] .main-button .main-link,
[data-design="2"] .main-button button,
[data-design="2"] .button {
    position: relative;
    display: inline-flex;
    min-height: var(--btn-h);
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0 var(--btn-px);
    gap: var(--i-esm);
    overflow: hidden;
    border: 1.5px solid transparent;
    border-radius: var(--btn-radius);
    background: transparent;
    background-image: none;
    box-shadow: none;
    font-family: var(--font-sans);
    font-size: var(--btn-fs);
    font-weight: var(--btn-fw);
    line-height: 1.2;
    letter-spacing: var(--btn-tracking);
    text-align: center;
    text-decoration: none;
    text-transform: var(--btn-case);
    white-space: nowrap;
    opacity: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--a-time) var(--a-tfunc), border-color var(--a-time) var(--a-tfunc), color var(--a-time) var(--a-tfunc), box-shadow var(--a-time) var(--a-tfunc);
}

[data-design="2"] .main-button .main-link svg,
[data-design="2"] .button svg {
    width: 20rem;
    height: 20rem;
    flex: 0 0 auto;
}

/* Блок lead тоже задаёт min-height; префикс версии сильнее его правила. */
[data-design="2"] .main-button.bigest .main-link,
[data-design="2"] .main-button.bigest button,
[data-design="2"] .button.button--l {
    min-height: var(--btn-h-l);
    padding-inline: var(--btn-px-l);
    font-size: var(--btn-fs-l);
}

[data-design="2"] .main-button.bigest.main-button--m .main-link,
[data-design="2"] .main-button.bigest.main-button--m button {
    min-height: var(--btn-h);
    padding-inline: var(--btn-px);
    font-size: var(--btn-fs);
}

[data-design="2"] .b-lead .main-button.bigest .main-link {
    min-height: var(--btn-h-l);
}

/* Заливка: c1 / магазин primary. Два класса перебивают a:link. */
[data-design="2"] .main-button.c1 .main-link,
[data-design="2"] .main-button.c1 button,
[data-design="2"] .button.button--primary {
    border-color: var(--caf-strong);
    background: var(--caf-strong);
    color: var(--cw);
}

[data-design="2"] .main-button.c1 .main-link:hover,
[data-design="2"] .main-button.c1 button:hover,
[data-design="2"] .button.button--primary:hover {
    border-color: color-mix(in srgb, var(--caf-strong) 86%, var(--cb));
    background: color-mix(in srgb, var(--caf-strong) 86%, var(--cb));
    color: var(--cw);
}

[data-design="2"] .main-button.c1 .main-link:active,
[data-design="2"] .main-button.c1 button:active,
[data-design="2"] .button.button--primary:active {
    border-color: color-mix(in srgb, var(--caf-strong) 74%, var(--cb));
    background: color-mix(in srgb, var(--caf-strong) 74%, var(--cb));
}

/* Тонированная вторичная кнопка. */
[data-design="2"] .main-button.c2 .main-link,
[data-design="2"] .main-button.c2 button,
[data-design="2"] .button.button--secondary {
    border-color: transparent;
    background: var(--btn-tint);
    color: var(--caf-strong);
}

[data-design="2"] .main-button.c2 .main-link:hover,
[data-design="2"] .main-button.c2 button:hover,
[data-design="2"] .button.button--secondary:hover {
    background: color-mix(in srgb, var(--caf) 28%, var(--cw));
}

[data-design="2"] .main-button.c2 .main-link:active,
[data-design="2"] .main-button.c2 button:active,
[data-design="2"] .button.button--secondary:active {
    background: color-mix(in srgb, var(--caf) 38%, var(--cw));
}

/* Контур: c3 / магазин без модификатора. */
[data-design="2"] .main-button.c3 .main-link,
[data-design="2"] .main-button.c3 button,
[data-design="2"] .button:not(.button--primary):not(.button--secondary):not(.button--text) {
    border-color: var(--caf);
    background: transparent;
    color: var(--caf-strong);
}

[data-design="2"] .main-button.c3 .main-link:hover,
[data-design="2"] .main-button.c3 button:hover,
[data-design="2"] .button:not(.button--primary):not(.button--secondary):not(.button--text):hover {
    background: var(--btn-tint);
}

[data-design="2"] .main-button.c3 .main-link:active,
[data-design="2"] .main-button.c3 button:active,
[data-design="2"] .button:not(.button--primary):not(.button--secondary):not(.button--text):active {
    background: color-mix(in srgb, var(--caf) 28%, var(--cw));
}

[data-design="2"] .button.button--text {
    min-height: 0;
    padding: 4rem 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--caf-strong);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
    text-underline-offset: 4rem;
}

[data-design="2"] .button.button--text:hover {
    background: none;
    color: var(--cf);
    text-decoration-color: currentColor;
}

[data-design="2"] .button.button--icon { width: var(--btn-h); padding: 0; }
[data-design="2"] .button.button--icon.button--l { width: var(--btn-h-l); padding: 0; }

[data-design="2"] .main-button .main-link:focus-visible,
[data-design="2"] .main-button button:focus-visible,
[data-design="2"] .button:focus-visible {
    outline: none;
    box-shadow: var(--btn-ring);
}

[data-design="2"] .main-button .main-link:disabled,
[data-design="2"] .main-button .main-link[aria-disabled="true"],
[data-design="2"] .main-button button:disabled,
[data-design="2"] .button:disabled,
[data-design="2"] .button[aria-disabled="true"] {
    border-color: transparent;
    background: var(--cil);
    color: var(--c-pl);
    box-shadow: none;
    opacity: 1;
    cursor: not-allowed;
}

[data-design="2"] .main-button.c3 .main-link:is(:disabled, [aria-disabled="true"]),
[data-design="2"] .main-button.c3 button:is(:disabled, [aria-disabled="true"]),
[data-design="2"] .button:not(.button--primary):not(.button--secondary):not(.button--text):is(:disabled, [aria-disabled="true"]) {
    border-color: var(--ci);
    background: transparent;
    color: var(--c-pl);
}

/* Во время отправки сохраняем цвет кнопки; скрытый текст заменяет индикатор. */
[data-design="2"] .main-button.c1 .main-link.is-loading:disabled,
[data-design="2"] .button.button--primary.is-loading:disabled { border-color: var(--caf-strong); background: var(--caf-strong); }
[data-design="2"] .main-button.c2 .main-link.is-loading:disabled,
[data-design="2"] .button.button--secondary.is-loading:disabled { background: var(--btn-tint); }
[data-design="2"] .main-button.c3 .main-link.is-loading:disabled,
[data-design="2"] .button.is-loading:disabled:not(.button--primary):not(.button--secondary) { border-color: var(--caf); background: transparent; }
[data-design="2"] .main-link.is-loading,
[data-design="2"] .button.is-loading { color: transparent !important; pointer-events: none; cursor: progress; }
[data-design="2"] .main-link.is-loading::after,
[data-design="2"] .button.is-loading::after {
    position: absolute;
    top: 50%; left: 50%;
    width: 18rem; height: 18rem;
    margin: -9rem 0 0 -9rem;
    border: 2rem solid var(--cw);
    border-right-color: transparent;
    border-radius: 50%;
    content: "";
    animation: mx-button-spin 800ms linear infinite;
}
[data-design="2"] .main-button.c2 .main-link.is-loading::after,
[data-design="2"] .main-button.c3 .main-link.is-loading::after,
[data-design="2"] .button:not(.button--primary).is-loading::after { border-color: var(--caf-strong); border-right-color: transparent; }
@keyframes mx-button-spin { to { transform: rotate(360deg); } }

/* Устаревший блик из parts.css выключен, пока модификатор не включён явно. */
[data-design="2"] .main-button .flash.lighting,
[data-design="2"] .main-button:hover .flash.lighting { display: none; animation: none; }
[data-design="2"] .main-button--flash .flash.lighting,
[data-design="2"] .main-button--flash:hover .flash.lighting {
    display: block;
    position: absolute;
    inset: 0;
    width: auto;
    transform: translateX(-120%);
    background: linear-gradient(110deg, transparent 35%, rgb(255 255 255 / 35%) 50%, transparent 65%);
    pointer-events: none;
    animation: mx-button-flash 3200ms var(--a-tfunc) infinite;
}
@keyframes mx-button-flash { 0%, 55% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

/* На тёмной секции secondary и outline контрастны, кроме светлой карточки. */
[data-design="2"] .block-dark .main-button.c2 .main-link,
[data-design="2"] .block-dark .button.button--secondary { background: color-mix(in srgb, var(--cw) 14%, transparent); color: var(--cw); }
[data-design="2"] .block-dark .main-button.c3 .main-link,
[data-design="2"] .block-dark .button:not(.button--primary):not(.button--secondary):not(.button--text) { border-color: color-mix(in srgb, var(--cw) 45%, transparent); color: var(--cw); }
[data-design="2"] .block-dark .main-button.c2 .main-link:hover,
[data-design="2"] .block-dark .button.button--secondary:hover { background: color-mix(in srgb, var(--cw) 22%, transparent); }
[data-design="2"] .block-dark .main-button.c3 .main-link:hover,
[data-design="2"] .block-dark .button:not(.button--primary):not(.button--secondary):not(.button--text):hover { background: color-mix(in srgb, var(--cw) 12%, transparent); }
[data-design="2"] .block-dark .button.button--text { color: var(--cw); }
[data-design="2"] .block-dark .main-link:focus-visible,
[data-design="2"] .block-dark .button:focus-visible { box-shadow: 0 0 0 3rem var(--cf), 0 0 0 5rem var(--cas); }
[data-design="2"] .block-dark .mx-tone-light .main-button.c2 .main-link,
[data-design="2"] .block-dark .mx-tone-light .button.button--secondary { background: var(--btn-tint); color: var(--caf-strong); }
[data-design="2"] .block-dark .mx-tone-light .main-button.c3 .main-link,
[data-design="2"] .block-dark .mx-tone-light .button:not(.button--primary):not(.button--secondary):not(.button--text) { border-color: var(--caf); color: var(--caf-strong); }
[data-design="2"] .block-dark .mx-tone-light .main-link:focus-visible,
[data-design="2"] .block-dark .mx-tone-light .button:focus-visible { box-shadow: var(--btn-ring); }

/* В тёмной секции отключённое состояние важнее обычного контраста. */
[data-design="2"] .block-dark .main-button .main-link:is(:disabled, [aria-disabled="true"]),
[data-design="2"] .block-dark .button:is(:disabled, [aria-disabled="true"]) { border-color: transparent; background: var(--cil); color: var(--c-pl); }
[data-design="2"] .block-dark .main-button.c3 .main-link:is(:disabled, [aria-disabled="true"]),
[data-design="2"] .block-dark .button:not(.button--primary):not(.button--secondary):not(.button--text):is(:disabled, [aria-disabled="true"]) { border-color: var(--ci); background: transparent; color: var(--c-pl); }

@media (prefers-reduced-motion: reduce) {
    [data-design="2"] .main-link, [data-design="2"] .button { transition: none; }
    [data-design="2"] .main-link.is-loading::after, [data-design="2"] .button.is-loading::after { animation: none; }
    [data-design="2"] .main-button--flash .flash.lighting { display: none; animation: none; }
}

/* Семантические радиусы. Специфичность сильнее подключаемого после нас CSS блоков. */
[data-design="2"] .b-cards_subsec .service-card { border-radius: 0 0 var(--r-card) var(--r-card); }
[data-design="2"] .b-benefits .benefit-card,
[data-design="2"] .b-callus .callus-panel,
[data-design="2"] .b-contacts .contacts-card,
[data-design="2"] .b-cover_hero .cover-hero__fact,
[data-design="2"] .b-tariffs .tariff-card,
[data-design="2"] .b-review .review-card,
[data-design="2"] .b-question .card-details.question,
[data-design="2"] .b-resource_showcase .showcase__card,
[data-design="2"] .catalogue-card,
[data-design="2"] .cart-thanks,
[data-design="2"] .shop-filters__group,
[data-design="2"] .quantity-calculator { border-radius: var(--r-card); }
[data-design="2"] .b-lead .lead-media,
[data-design="2"] .b-text_pic .text-pic-media,
[data-design="2"] .b-split_feature .split-feature__image,
[data-design="2"] .b-contacts .contacts-map,
[data-design="2"] .about-figures__media,
[data-design="2"] .product__photo,
[data-design="2"] .catalogue-sections__photo { border-radius: var(--r-media); }
[data-design="2"] .b-tariffs .tariff-card__media { border-radius: var(--r-media) var(--r-media) 0 0; }
[data-design="2"] .catalogue-card__photo,
[data-design="2"] .product__thumb,
[data-design="2"] .cart__thumb,
[data-design="2"] .b-benefits .benefit-card__icon { border-radius: var(--r-thumb); }
[data-design="2"] .product__badge,
[data-design="2"] .catalogue-sections__badge,
[data-design="2"] .b-resource_showcase .showcase__badge { border-radius: var(--r-badge); }
[data-design="2"] .product__quantity,
[data-design="2"] .cart__quantity,
[data-design="2"] .cart-checkout__field input,
[data-design="2"] .cart-checkout__field select,
[data-design="2"] .cart-checkout__field textarea,
[data-design="2"] .shop-filters__range input,
[data-design="2"] .site-search input,
[data-design="2"] .quantity-calculator__input input { border-radius: var(--r-field); }
[data-design="2"] .catalogue-sections__link,
[data-design="2"] .shop-header__catalog { border-radius: var(--r-btn); }


/* Source: forms.css */
/* V3: поля публичных форм. Старый parts.css остаётся для design_version=1. */
[data-design="2"] .mx-form { text-align: left; }
[data-design="2"] .mx-form__field { gap: 8rem; }
[data-design="2"] .mx-form__field fieldset {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    gap: 12rem;
}
[data-design="2"] .mx-form__label,
[data-design="2"] .mx-form__field legend {
    padding: 0;
    color: var(--cf);
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.3;
}
[data-design="2"] .mx-form__field legend { margin-bottom: 2rem; }
[data-design="2"] .mx-form__label > span,
[data-design="2"] .mx-form__field legend > span { margin-left: 3rem; color: var(--c-err); }
[data-design="2"] .mx-form__field small,
[data-design="2"] .mx-form__error { font-size: var(--fs-sm); line-height: 1.4; }
[data-design="2"] .mx-form__field small { color: var(--c-pl); }
[data-design="2"] .mx-form__error { color: var(--c-err); }

[data-design="2"] .mx-form__field :is(input[type="text"], input[type="tel"], input[type="email"], input[type="number"], input[type="date"], input[type="time"], input[type="search"], select, textarea) {
    width: 100%;
    min-height: var(--field-h);
    box-sizing: border-box;
    padding: 0 var(--field-px);
    border: 1px solid var(--field-border);
    border-radius: var(--r-field);
    outline: none;
    background: var(--cfbg);
    background-image: none;
    box-shadow: none;
    color: var(--cf);
    font-family: var(--font-sans);
    font-size: var(--fs-p);
    line-height: 1.4;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color var(--a-time) var(--a-tfunc), box-shadow var(--a-time) var(--a-tfunc);
}
[data-design="2"] .mx-form__field textarea {
    min-height: 128rem;
    padding: 14rem var(--field-px);
    resize: vertical;
}
[data-design="2"] .mx-form__field :is(input, textarea)::placeholder { color: var(--c-pl); opacity: 1; }
[data-design="2"] .mx-form__field :is(input, select, textarea):hover:not(:disabled) { border-color: var(--field-border-hover); }
[data-design="2"] .mx-form__field :is(input, select, textarea):focus {
    outline: none;
    border-color: var(--caf-strong);
    box-shadow: var(--field-ring);
}
[data-design="2"] .mx-form__field :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--c-err); }
[data-design="2"] .mx-form__field :is(input, select, textarea)[aria-invalid="true"]:focus { box-shadow: var(--field-ring-err); }
[data-design="2"] .mx-form__field :is(input, select, textarea):disabled {
    border-color: var(--ci);
    background: var(--cil);
    color: var(--c-pl);
    cursor: not-allowed;
}
[data-design="2"] .mx-form__field select:not([multiple]) {
    padding-right: 44rem;
    background-image: linear-gradient(45deg, transparent 50%, var(--cf) 50%), linear-gradient(135deg, var(--cf) 50%, transparent 50%);
    background-position: calc(100% - 23rem) 50%, calc(100% - 17rem) 50%;
    background-size: 6rem 6rem;
    background-repeat: no-repeat;
    cursor: pointer;
}

/* Системные checkbox/radio из parts.css получают единые размеры и состояния. */
[data-design="2"] .mx-form__choice { gap: 12rem; }
[data-design="2"] .mx-form__choice label { color: var(--cf); font-size: var(--fs-p); line-height: 1.45; cursor: pointer; }
[data-design="2"] .mx-form__choice input[type="checkbox"],
[data-design="2"] .mx-form__choice input[type="radio"] {
    display: grid;
    position: relative;
    width: 22rem;
    height: 22rem;
    flex: 0 0 22rem;
    place-content: center;
    box-sizing: border-box;
    margin: 1rem 0 0;
    border: 1.5px solid var(--field-border-hover);
    border-radius: var(--r-badge);
    background: var(--cfbg);
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: background-color var(--a-time) var(--a-tfunc), border-color var(--a-time) var(--a-tfunc), box-shadow var(--a-time) var(--a-tfunc);
}
[data-design="2"] .mx-form__choice input[type="radio"] { border-radius: 50%; }
[data-design="2"] .mx-form__choice input[type="checkbox"]::before {
    width: 6rem;
    height: 11rem;
    margin-top: -2rem;
    border: solid var(--cw);
    border-width: 0 2rem 2rem 0;
    background: none;
    clip-path: none;
    transform: rotate(45deg) scale(0);
}
[data-design="2"] .mx-form__choice input[type="radio"]::before { display: none; }
[data-design="2"] .mx-form__choice input:checked { border-color: var(--caf-strong); background: var(--caf-strong); }
[data-design="2"] .mx-form__choice input[type="checkbox"]:checked::before { transform: rotate(45deg) scale(1); }
[data-design="2"] .mx-form__choice input[type="radio"]:checked { box-shadow: inset 0 0 0 5rem var(--cfbg); }
[data-design="2"] .mx-form__choice input:focus-visible { outline: none; box-shadow: var(--field-ring); }
[data-design="2"] .mx-form__choice input[type="radio"]:checked:focus-visible { box-shadow: inset 0 0 0 5rem var(--cfbg), var(--field-ring); }
[data-design="2"] .mx-form__choice input[aria-invalid="true"] { border-color: var(--c-err); }
[data-design="2"] .mx-form__choice input[aria-invalid="true"]:focus-visible { box-shadow: var(--field-ring-err); }
[data-design="2"] .mx-form__choice input:disabled { border-color: var(--ci); background: var(--cil); cursor: not-allowed; }
[data-design="2"] .mx-form__choice:has(input:disabled) label { color: var(--c-pl); cursor: not-allowed; }

@media (prefers-reduced-motion: reduce) {
    [data-design="2"] .mx-form__field :is(input, select, textarea),
    [data-design="2"] .mx-form__choice input,
    [data-design="2"] .mx-form__choice input::before { transition: none; }
}

/* V4: ритм сетки, состояние отправки и композиция блока form. */
[data-design="2"] .mx-form__grid { gap: var(--i-md) var(--i-sm); }
[data-design="2"] .mx-form__field--full { grid-column: span 6; }
[data-design="2"] .mx-form__field--half { grid-column: span 3; }
[data-design="2"] .mx-form__field--third { grid-column: span 2; }
[data-design="2"] .mx-form > .main-button { margin-top: var(--i-lg); }
[data-design="2"] .mx-form__field--consent .mx-form__choice label {
    color: var(--cf);
    font-size: var(--fs-sm);
    line-height: 1.5;
}
[data-design="2"] .mx-form__choice label a { color: var(--caf-strong); text-decoration: underline; text-underline-offset: 3rem; }
[data-design="2"] .mx-form__choice label a:hover { color: var(--cf); }

[data-design="2"] .mx-form__status:empty { display: none; }
[data-design="2"] .mx-form__status--success,
[data-design="2"] .mx-form__status--error {
    display: flex;
    align-items: center;
    margin-top: var(--i-sm);
    padding: var(--i-sm) var(--i-md);
    border: 0;
    border-radius: var(--r-alert);
    color: var(--cf);
    font-size: var(--fs-p);
    line-height: 1.45;
}
[data-design="2"] .mx-form__status--success {
    background: var(--ci-green-p);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ci-green-s) 35%, transparent);
}
[data-design="2"] .mx-form__status--error {
    background: var(--ci-red-p);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ci-red-s) 35%, transparent);
}
[data-design="2"] .mx-form.is-sent .mx-form__grid,
[data-design="2"] .mx-form.is-sent > .main-button { display: none; }
[data-design="2"] .mx-form.is-sent .mx-form__status {
    margin-top: 0;
    padding: var(--i-md) var(--i-lg);
    font-size: var(--fs-h4);
}

[data-design="2"] .form-split {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
    gap: var(--i-xl);
}
[data-design="2"] .form-split--solo { grid-template-columns: minmax(0, 1fr); max-width: 960rem; }
[data-design="2"] .form-split__intro { display: flex; flex-direction: column; gap: var(--i-md); padding-top: var(--i-lg); }
[data-design="2"] .form-split__intro :is(h2, p) { margin: 0; }
[data-design="2"] .form-split__contacts { display: grid; gap: var(--i-sm); margin: 0; }
[data-design="2"] .form-split__contacts dt { color: var(--c-pl); font-size: var(--fs-sm); }
[data-design="2"] .form-split__contacts dd { margin: 4rem 0 0; font-size: var(--fs-h4); font-weight: 600; }
[data-design="2"] .form-split__contacts a { color: var(--cf); text-decoration: none; }
[data-design="2"] .form-split__contacts a:hover { color: var(--caf-strong); }
[data-design="2"] .form-split__card {
    padding: var(--i-lg);
    border-radius: var(--r-card);
    background: var(--cbg-card);
    box-shadow: var(--s-md);
}
[data-design="2"] .form-inline {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
    align-items: center;
    gap: var(--i-lg);
    padding: var(--i-lg);
    border-radius: var(--r-card);
    background: var(--cbg-card);
    box-shadow: var(--s-sm);
}
[data-design="2"] .form-inline__intro { display: flex; flex-direction: column; gap: var(--i-esm); }
[data-design="2"] .form-inline__intro :is(h2, p) { margin: 0; }
[data-design="2"] .form-inline .heading { font-size: var(--fs-h3); line-height: 1.3; }
[data-design="2"] .mx-form--inline { grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--i-sm); }
[data-design="2"] .mx-form--inline .mx-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--i-sm); }
[data-design="2"] .mx-form--inline .mx-form__field { grid-column: span 1; }
[data-design="2"] .mx-form--inline :is(.mx-form__field--consent, .mx-form__field--textarea) { grid-column: 1 / -1; }
[data-design="2"] .mx-form--inline .mx-form__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
[data-design="2"] .mx-form--inline > .main-button { margin-top: 0; }
[data-design="2"] .mx-form--inline > .main-button .main-link { min-height: var(--field-h); }
[data-design="2"] .mx-form--inline .mx-form__status { grid-column: 1 / -1; margin-top: 0; }

[data-design="2"] .block-dark .form-split__contacts dt { color: var(--ci); }
[data-design="2"] .block-dark .form-split__contacts a { color: var(--cw); }
[data-design="2"] .block-dark .form-inline { background: color-mix(in srgb, var(--cw) 8%, transparent); }
[data-design="2"] .block-dark :is(.mx-form__label, .mx-form__field legend, .mx-form__choice label) { color: var(--cw); }
[data-design="2"] .block-dark .mx-form__field small { color: var(--ci); }
[data-design="2"] .block-dark .mx-form__error { color: color-mix(in srgb, var(--c-err) 45%, var(--cw)); }
[data-design="2"] .block-dark .mx-form__choice label a { color: var(--cas); }
[data-design="2"] .block-dark .mx-tone-light :is(.mx-form__label, .mx-form__field legend, .mx-form__choice label) { color: var(--cf); }
[data-design="2"] .block-dark .mx-tone-light .mx-form__field small { color: var(--c-pl); }
[data-design="2"] .block-dark .mx-tone-light .mx-form__error { color: var(--c-err); }
[data-design="2"] .block-dark .mx-tone-light .mx-form__choice label a { color: var(--caf-strong); }

/* V9: radio как доступные кнопки; input остаётся в tab order и над label. */
[data-design="2"] .mx-form__field--pills fieldset {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110rem, 1fr));
    align-items: stretch;
    gap: var(--i-esm);
}
[data-design="2"] .mx-form__field--pills fieldset > legend { grid-column: 1 / -1; }
[data-design="2"] .mx-form__field--pills .mx-form__choice { position: relative; display: block; height: 100%; }
[data-design="2"] .mx-form__field--pills .mx-form__choice input[type="radio"] {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}
[data-design="2"] .mx-form__field--pills .mx-form__choice label {
    display: flex;
    height: 100%;
    min-height: var(--field-h);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 12rem 8rem;
    gap: 6rem;
    border: 1px solid var(--field-border);
    border-radius: var(--r-field);
    background: var(--cfbg);
    font-size: var(--fs-sm);
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
    transition: border-color var(--a-time) var(--a-tfunc), box-shadow var(--a-time) var(--a-tfunc), background-color var(--a-time) var(--a-tfunc);
}
[data-design="2"] .mx-form__field--pills .mx-form__choice:hover label { border-color: var(--field-border-hover); }
[data-design="2"] .mx-form__field--pills .mx-form__choice input:checked + label {
    border-color: var(--caf-strong);
    background: color-mix(in srgb, var(--caf) 8%, var(--cfbg));
    box-shadow: inset 0 0 0 1px var(--caf-strong);
}
[data-design="2"] .mx-form__field--pills .mx-form__choice input:focus-visible + label { box-shadow: var(--field-ring); }
[data-design="2"] .mx-form__field--pills .mx-form__choice input:checked:focus-visible + label { box-shadow: inset 0 0 0 1px var(--caf-strong), var(--field-ring); }
[data-design="2"] .mx-form__field--pills .mx-form__choice input[aria-invalid="true"] + label { border-color: var(--c-err); }
[data-design="2"] .mx-form__field--pills .mx-form__choice input:disabled + label { background: var(--cil); color: var(--c-pl); cursor: not-allowed; }
[data-design="2"] .mx-form__choice-icon { display: flex; color: var(--c-pl); }
[data-design="2"] .mx-form__choice-icon svg { width: 24rem; height: 24rem; }
@media (prefers-reduced-motion: reduce) {
    [data-design="2"] .mx-form__field--pills .mx-form__choice label { transition: none; }
}

@media (max-width: 1024px) {
    [data-design="2"] .form-split { grid-template-columns: minmax(0, 1fr); gap: var(--i-lg); }
    [data-design="2"] .form-split__intro { padding-top: 0; }
    [data-design="2"] .form-inline { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
    [data-design="2"] :is(.mx-form__field--half, .mx-form__field--third) { grid-column: span 6; }
    [data-design="2"] :is(.form-split__card, .form-inline) { padding: var(--i-md); }
    [data-design="2"] .mx-form--inline,
    [data-design="2"] .mx-form--inline .mx-form__grid { grid-template-columns: minmax(0, 1fr); }
    [data-design="2"] .mx-form--inline .mx-form__field { grid-column: 1 / -1; }
    [data-design="2"] .mx-form--inline > .main-button { display: flex; }
    [data-design="2"] .mx-form--inline > .main-button .main-link { width: 100%; }
}


/* Source: elements.css */
/* V3: типографика, рейтинг и попап; только для новой версии оформления. */
[data-design="2"] p.text-lead {
    color: var(--cf);
    font-size: var(--fs-h4);
    line-height: 1.5;
}

[data-design="2"] .b-review .review-card-rating {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--i-esm) / 4);
}
[data-design="2"] .b-review .review-card-rating .star {
    width: var(--i-sm);
    height: var(--i-sm);
    fill: var(--ci);
    color: var(--ci);
}
[data-design="2"] .b-review .review-card-rating .star.filled {
    fill: var(--ci-orange-s);
    color: var(--ci-orange-s);
}

[data-design="2"] .popup-overlay {
    display: grid;
    position: fixed;
    inset: 0;
    place-items: center;
    padding: var(--i-md);
    background: color-mix(in srgb, var(--cb) 55%, transparent);
}
[data-design="2"] .popup-overlay[hidden] { display: none; }
[data-design="2"] .popup-dialog {
    position: relative;
    width: min(560rem, 100%);
    max-height: calc(100% - var(--i-lg));
    box-sizing: border-box;
    overflow: auto;
    padding: var(--i-lg);
    border-radius: var(--r-modal);
    background: var(--cw);
    color: var(--cf);
    box-shadow: var(--s-lg);
}
[data-design="2"] .popup-dialog > h2 {
    margin: 0 0 var(--i-esm);
    padding-right: var(--i-lg);
    font-size: var(--fs-h3);
}
[data-design="2"] .popup-dialog > p { margin: 0 0 var(--i-md); color: var(--c-pl); }
[data-design="2"] .popup-dialog__close {
    display: grid;
    position: absolute;
    top: 16rem;
    right: 16rem;
    width: 40rem;
    height: 40rem;
    place-items: center;
    border: 0;
    border-radius: var(--r-pill);
    background: var(--cil);
    color: var(--cf);
    font-family: var(--font-sans);
    font-size: 24rem;
    line-height: 1;
    cursor: pointer;
}
[data-design="2"] .popup-dialog__close:hover { background: var(--ci); }
[data-design="2"] .popup-dialog__close:focus-visible { outline: none; box-shadow: var(--btn-ring); }
[data-design="2"] .popup-dialog .mx-form > .main-button { display: flex; width: 100%; }
[data-design="2"] .popup-dialog .mx-form > .main-button .main-link { width: 100%; }

/* V5: сообщения используют ту же палитру, что и статус формы. */
[data-design="2"] .mx-alert {
    display: flex;
    align-items: flex-start;
    gap: 14rem;
    padding: var(--i-sm) var(--i-md);
    border-radius: var(--r-alert);
    background: var(--ci-blue-p);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ci-blue-s) 35%, transparent);
    color: var(--cf);
}
[data-design="2"] .mx-alert__icon { display: flex; flex: 0 0 auto; color: var(--ci-blue-t); }
[data-design="2"] .mx-alert__icon svg { width: 24rem; height: 24rem; }
[data-design="2"] .mx-alert__body { display: flex; flex-direction: column; gap: 4rem; min-width: 0; }
[data-design="2"] .mx-alert__title { margin: 0; color: var(--ci-blue-t); font-size: var(--fs-p); font-weight: var(--fw-bold); line-height: 1.4; }
[data-design="2"] .mx-alert__text { margin: 0; color: var(--cf); font-size: var(--fs-p); line-height: 1.5; }
[data-design="2"] .mx-alert--warning { background: var(--ci-orange-p); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ci-orange-s) 35%, transparent); }
[data-design="2"] .mx-alert--warning :is(.mx-alert__icon, .mx-alert__title) { color: var(--ci-orange-t); }
[data-design="2"] .mx-alert--success { background: var(--ci-green-p); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ci-green-s) 35%, transparent); }
[data-design="2"] .mx-alert--success :is(.mx-alert__icon, .mx-alert__title) { color: var(--ci-green-t); }
[data-design="2"] .mx-alert--error { background: var(--ci-red-p); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ci-red-s) 35%, transparent); }
[data-design="2"] .mx-alert--error :is(.mx-alert__icon, .mx-alert__title) { color: var(--ci-red-t); }
[data-design="2"] .mx-alert.cart-thanks { margin-bottom: var(--i-lg); padding: var(--i-sm) var(--i-md); background: var(--ci-green-p); }
[data-design="2"] .mx-alert.cart-checkout__errors { padding: var(--i-sm) var(--i-md); background: var(--ci-red-p); color: var(--cf); }
[data-design="2"] .mx-alert.cart-checkout__errors ul { margin: 0; padding-left: var(--i-md); }

/* V6/V9: знак берёт currentColor; на тёмном фоне тёмные знаки становятся белыми. */
[data-design="2"] :is(.is-telegram, a.is-telegram:link, a.is-telegram:visited) { color: var(--c-tg); }
[data-design="2"] :is(.is-whatsapp, a.is-whatsapp:link, a.is-whatsapp:visited) { color: var(--c-wa); }
[data-design="2"] :is(.is-viber, a.is-viber:link, a.is-viber:visited) { color: var(--c-vi); }
[data-design="2"] :is(.is-max, a.is-max:link, a.is-max:visited) { color: var(--c-max); }
[data-design="2"] :is(.is-vk, a.is-vk:link, a.is-vk:visited) { color: var(--c-vk); }
[data-design="2"] :is(.is-ok, a.is-ok:link, a.is-ok:visited) { color: var(--c-ok); }
[data-design="2"] :is(.is-youtube, a.is-youtube:link, a.is-youtube:visited) { color: var(--c-yt); }
[data-design="2"] :is(.is-rutube, a.is-rutube:link, a.is-rutube:visited) { color: var(--c-rt); }
[data-design="2"] :is(.is-dzen, a.is-dzen:link, a.is-dzen:visited) { color: var(--c-dz); }
[data-design="2"] .block-dark :is(.is-max, .is-rutube, .is-dzen),
[data-design="2"] .block-dark a:is(.is-max, .is-rutube, .is-dzen):is(:link, :visited) { color: var(--cw); }
[data-design="2"] .site-footer__social :is(.is-vk, .is-telegram, .is-whatsapp, .is-max) {
    border-radius: var(--r-pill);
    background: var(--cil);
}

/* Цвет подвала берём из уже существующего --cbg-foot: новый переключатель не нужен. */
[data-design="2"] .site-footer--dark { border-color: color-mix(in srgb, var(--cw) 20%, transparent); color: var(--cw); }
[data-design="2"] .site-footer--dark :is(.site-footer__legal p, .site-footer__legal > span, .site-footer__contacts > span) { color: color-mix(in srgb, var(--cw) 75%, transparent); }
[data-design="2"] .site-footer--dark :is(.site-footer__menu a, .site-footer__developer, .site-footer__contacts a) { color: var(--cw); }
[data-design="2"] .site-footer--dark .site-footer__social a { border-color: color-mix(in srgb, var(--cw) 24%, transparent); background: color-mix(in srgb, var(--cw) 14%, transparent); }
[data-design="2"] .site-footer--dark :is(.is-max, .is-rutube, .is-dzen),
[data-design="2"] .site-footer--dark a:is(.is-max, .is-rutube, .is-dzen):is(:link, :visited) { color: var(--cw); }
/* На телефоне длинные названия услуг должны помещаться целиком.
   Общий CSS блока остаётся прежним для сайтов на оформлении 1. */
@media (max-width: 480px) {
    [data-design="2"] .b-cards_subsec .cards-subsec-grid { --card-items: 1; }
    [data-design="2"] .b-cards_subsec .service-card__title { overflow-wrap: anywhere; }
}
/* Полноширинный cover_hero сам держит поля контейнера, поскольку
   block-frame при add-fwidth не создаёт внешнюю .container. */
[data-design="2"] .b-cover_hero .cover-hero__inner {
    width: var(--container-width);
    max-width: 100%;
    margin-inline: auto;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--i-xl);
}
[data-design="2"] .b-cover_hero .cover-hero__content { min-width: 0; max-width: 980rem; }
[data-design="2"] .b-cover_hero .cover-hero__description { max-width: 720rem; }

/* Факты — продолжение первого экрана под текстом и действиями, не колонка
   карточек справа. Префикс перекрывает общий CSS блока, не меняя версию 1. */
[data-design="2"] .b-cover_hero .cover-hero__facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--i-md);
}
[data-design="2"] .b-cover_hero .cover-hero__facts:has(> :last-child:nth-child(2)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
[data-design="2"] .b-cover_hero .cover-hero__facts:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
[data-design="2"] .b-cover_hero .cover-hero__fact {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}
[data-design="2"] .b-cover_hero .cover-hero__fact-icon {
    width: var(--btn-h);
    height: var(--btn-h);
    border-radius: var(--r-field);
    background: color-mix(in srgb, var(--cw) 12%, transparent);
}
[data-design="2"] .b-cover_hero .cover-hero__fact-icon svg { width: var(--i-md); height: var(--i-md); }
@media (max-width: 768px) {
    [data-design="2"] .b-cover_hero .cover-hero__facts,
    [data-design="2"] .b-cover_hero .cover-hero__facts:has(> :last-child:nth-child(2)) { grid-template-columns: minmax(0, 1fr); }
}

/* .card из прежнего parts.css добавляет вторую рамку и отступ вокруг
   изображения; в ките картинка прилегает к краям одной карточки. */
[data-design="2"] .b-cards_subsec .card.service-card {
    padding: 0;
    border: 0;
    border-radius: var(--r-card);
}
[data-design="2"] .b-cards_subsec .service-card__body { padding: var(--i-md); }
[data-design="2"] .b-cards_subsec .service-card__title { font-weight: 600; line-height: 1.3; }
[data-design="2"] .b-cards_subsec .service-card__description { font-size: var(--fs-p); line-height: 1.5; }


/* Source: shop.css */
/* V3: общие элементы каталога. В версии 1 действует неизменённый shop.css. */
/* Покупка находится рядом с галереей; описание, характеристики и расчёт ниже. */
[data-design="2"] .product__title { margin: 0; font-size: var(--fs-h2); }
[data-design="2"] .product__description { margin-top: var(--i-xl); }
[data-design="2"] .product__description h2 { margin: 0 0 var(--i-md); }
[data-design="2"] .product__description p { margin: 0; }
[data-design="2"] .product__details { display: grid; gap: var(--i-xl); }
[data-design="2"] .product__details .product__specs { margin: 0; }
[data-design="2"] .product__details .quantity-calculator { margin: 0; max-width: 980rem; }

/* Метки лежат на единой поверхности фотографии, а не рядом с маленьким
   исходником, центрированным в прозрачной галерее. Товар не обрезается. */
[data-design="2"] .product__photo { background: var(--cil); }
[data-design="2"] .product__photo img { width: 100%; height: 100%; object-fit: contain; }
[data-design="2"] .product__badges { top: var(--i-sm); left: var(--i-sm); }
[data-design="2"] .product__badges > li { margin: 0; }

[data-design="2"] :is(.catalogue-card__badge, .product__badge) {
    display: inline-flex;
    min-height: 26rem;
    align-items: center;
    padding: 0 var(--i-esm);
    border-radius: var(--r-badge);
    background: var(--cal);
    color: var(--cf);
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1;
}
[data-design="2"] :is(.catalogue-card__badge--new, .product__badge--new) { background: var(--cas); color: var(--cf); }
[data-design="2"] :is(.catalogue-card__badge--sale, .product__badge--sale) { background: var(--c-err); color: var(--cw); }
[data-design="2"] :is(.catalogue-card__badge--preorder, .product__badge--preorder) { background: var(--c-pl); color: var(--cw); }
[data-design="2"] .catalogue-sections__badge {
    display: inline-flex;
    min-height: 24rem;
    align-items: center;
    padding: 0 10rem;
    border-radius: var(--r-badge);
    background: var(--cil);
    color: var(--cf);
    font-size: var(--fs-sm);
}
[data-design="2"] .shop-header__badge {
    display: inline-flex;
    min-width: 20rem;
    height: 20rem;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0 6rem;
    border-radius: var(--r-pill);
    background: var(--caf-strong);
    color: var(--cw);
    font-size: 12rem;
    font-weight: 700;
    line-height: 1;
}
[data-design="2"] .shop-header__badge[hidden] { display: none; }

[data-design="2"] :is(.catalogue-card__prices, .product__prices) {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4rem var(--i-esm);
}
[data-design="2"] .catalogue-card__price,
[data-design="2"] .product__price { color: var(--cf); font-weight: var(--fw-bold); }
[data-design="2"] .catalogue-card__price { font-size: var(--fs-h4); }
[data-design="2"] .product__price { font-size: var(--fs-h2); }
[data-design="2"] :is(.catalogue-card__old-price, .product__old-price) {
    color: var(--c-pl);
    text-decoration-thickness: 1px;
}
[data-design="2"] .catalogue-card__old-price { font-size: var(--fs-p); }
[data-design="2"] .product__old-price { font-size: var(--fs-h4); }
[data-design="2"] .product__unit,
[data-design="2"] .catalogue-card__out { color: var(--c-pl); font-size: var(--fs-sm); }
[data-design="2"] .product__stock { color: var(--cf); font-size: var(--fs-p); }
[data-design="2"] .product__stock--out { color: var(--c-err); }

[data-design="2"] .product__quantity {
    display: inline-flex;
    height: var(--btn-h);
    align-items: stretch;
    overflow: hidden;
    border: 1px solid var(--field-border);
    border-radius: var(--r-field);
    background: var(--cfbg);
}
[data-design="2"] .product__step {
    width: 44rem;
    border: 0;
    background: transparent;
    color: var(--cf);
    font-size: 20rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--a-time) var(--a-tfunc);
}
[data-design="2"] .product__step:hover { background: var(--cil); }
[data-design="2"] .product__step:focus-visible { outline: none; box-shadow: inset var(--field-ring); }
[data-design="2"] .product__step:disabled { background: transparent; color: var(--ci); cursor: not-allowed; }
[data-design="2"] .product__quantity-input {
    width: 52rem;
    border: 0;
    border-inline: 1px solid var(--field-border);
    background: transparent;
    color: var(--cf);
    font: 600 var(--fs-p) var(--font-sans);
    text-align: center;
    appearance: textfield;
    -moz-appearance: textfield;
}
[data-design="2"] .product__quantity-input:focus { outline: none; background: var(--cil); }
[data-design="2"] .product__quantity:has(.product__quantity-input:disabled) { background: var(--cil); }

[data-design="2"] :is(.cart__empty, .favorites__empty, .search__empty) {
    margin: 0;
    padding: var(--i-xl) var(--i-lg);
    border-radius: var(--r-card);
    background: var(--cil);
    color: var(--cf);
    font-size: var(--fs-h4);
    line-height: 1.45;
    text-align: center;
    text-wrap: pretty;
}

/* V4: оформление заказа пользуется теми же полями, что и конструктор форм. */
[data-design="2"] .cart-checkout__field { gap: 8rem; }
[data-design="2"] .cart-checkout__field > span,
[data-design="2"] .cart-checkout__choices legend { color: var(--cf); font-size: var(--fs-sm); font-weight: 600; line-height: 1.3; }
[data-design="2"] .cart-checkout__field :is(input, textarea, select) {
    width: 100%;
    min-height: var(--field-h);
    box-sizing: border-box;
    padding: 0 var(--field-px);
    border: 1px solid var(--field-border);
    border-radius: var(--r-field);
    background: var(--cfbg);
    color: var(--cf);
    font-family: var(--font-sans);
    font-size: var(--fs-p);
    line-height: 1.4;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color var(--a-time) var(--a-tfunc), box-shadow var(--a-time) var(--a-tfunc);
}
[data-design="2"] .cart-checkout__field textarea { min-height: 128rem; padding: 14rem var(--field-px); resize: vertical; }
[data-design="2"] .cart-checkout__field select:not([multiple]) {
    padding-right: 44rem;
    background-image: linear-gradient(45deg, transparent 50%, var(--cf) 50%), linear-gradient(135deg, var(--cf) 50%, transparent 50%);
    background-position: calc(100% - 23rem) 50%, calc(100% - 17rem) 50%;
    background-size: 6rem 6rem;
    background-repeat: no-repeat;
}
[data-design="2"] .cart-checkout__field :is(input, textarea, select):hover { border-color: var(--field-border-hover); }
[data-design="2"] .cart-checkout__field :is(input, textarea, select):focus { outline: none; border-color: var(--caf-strong); box-shadow: var(--field-ring); }
[data-design="2"] .cart-checkout__field :is(input, textarea, select)[aria-invalid="true"] { border-color: var(--c-err); }
[data-design="2"] .cart-checkout__field :is(input, textarea, select)[aria-invalid="true"]:focus { box-shadow: var(--field-ring-err); }
[data-design="2"] .cart-checkout__field :is(input, textarea, select):disabled { border-color: var(--ci); background: var(--cil); color: var(--c-pl); }

[data-design="2"] :is(.cart-checkout__choice, .cart-checkout__agreement) { align-items: flex-start; gap: 12rem; }
[data-design="2"] .cart-checkout__choice { border-color: var(--field-border); border-radius: var(--r-field); }
[data-design="2"] .cart-checkout__choice:hover { border-color: var(--field-border-hover); }
[data-design="2"] .cart-checkout__choice:has(input:checked) { border-color: var(--caf-strong); }
[data-design="2"] :is(.cart-checkout__choice, .cart-checkout__agreement) :is(input[type="radio"], input[type="checkbox"]) {
    display: grid;
    position: relative;
    width: 22rem;
    height: 22rem;
    flex: 0 0 22rem;
    place-content: center;
    margin: 1rem 0 0;
    border: 1.5px solid var(--field-border-hover);
    border-radius: var(--r-badge);
    background: var(--cfbg);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}
[data-design="2"] .cart-checkout__choice input[type="radio"] { border-radius: 50%; }
[data-design="2"] .cart-checkout__agreement input[type="checkbox"]::before {
    width: 6rem;
    height: 11rem;
    margin-top: -2rem;
    border: solid var(--cw);
    border-width: 0 2rem 2rem 0;
    content: "";
    transform: rotate(45deg) scale(0);
}
[data-design="2"] :is(.cart-checkout__choice, .cart-checkout__agreement) input:checked { border-color: var(--caf-strong); background: var(--caf-strong); }
[data-design="2"] .cart-checkout__choice input[type="radio"]:checked { box-shadow: inset 0 0 0 5rem var(--cfbg); }
[data-design="2"] .cart-checkout__agreement input[type="checkbox"]:checked::before { transform: rotate(45deg) scale(1); }
[data-design="2"] :is(.cart-checkout__choice, .cart-checkout__agreement) input:focus-visible { outline: none; box-shadow: var(--field-ring); }
[data-design="2"] .cart-checkout__choice input[type="radio"]:checked:focus-visible { box-shadow: inset 0 0 0 5rem var(--cfbg), var(--field-ring); }
[data-design="2"] .cart-checkout__agreement { font-size: var(--fs-sm); line-height: 1.5; }
[data-design="2"] .cart-checkout__agreement a { color: var(--caf-strong); text-underline-offset: 3rem; }

[data-design="2"] .cart__quantity {
    width: 88rem;
    min-height: var(--field-h);
    box-sizing: border-box;
    padding: 0 var(--i-esm);
    border: 1px solid var(--field-border);
    border-radius: var(--r-field);
    background: var(--cfbg);
    color: var(--cf);
    font: 600 var(--fs-p) var(--font-sans);
    text-align: center;
}
[data-design="2"] .cart__quantity:hover { border-color: var(--field-border-hover); }
[data-design="2"] .cart__quantity:focus { outline: none; border-color: var(--caf-strong); box-shadow: var(--field-ring); }

@media (prefers-reduced-motion: reduce) {
    [data-design="2"] .cart-checkout__field :is(input, textarea, select) { transition: none; }
}

/* Ячейки сохраняют свою семантику и обработчики; на телефоне строка
   становится карточкой вместо узкой таблицы из шести столбцов. */
@media (max-width: 768px) {
    [data-design="2"] .cart__table { display: block; border: 0; }
    [data-design="2"] .cart__table thead { display: none; }
    [data-design="2"] .cart__table tbody { display: grid; gap: var(--i-sm); }
    [data-design="2"] .cart__row {
        position: relative;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-areas: "photo name name" "price amount sum";
        gap: var(--i-sm) var(--i-esm);
        padding: var(--i-sm);
        border: 1px solid var(--field-border);
        border-radius: var(--r-card);
        background: var(--cbg-card);
    }
    [data-design="2"] .cart__table .cart__cell {
        display: flex;
        min-width: 0;
        flex-direction: column;
        gap: var(--i-esm);
        align-items: flex-start;
        padding: 0;
        border: 0;
        text-align: left;
        overflow-wrap: anywhere;
    }
    [data-design="2"] .cart__cell--photo { grid-area: photo; }
    [data-design="2"] .cart__thumb { width: 72rem; height: 72rem; border-radius: var(--r-media); }
    [data-design="2"] .cart__table .cart__cell--name { grid-area: name; padding-right: 36rem; }
    [data-design="2"] .cart__cell--name > br { display: none; }
    [data-design="2"] .cart__cell--name > a { font-weight: 600; }
    [data-design="2"] .cart__sku { font-size: var(--fs-sm); }
    [data-design="2"] .cart__cell--price { grid-area: price; }
    [data-design="2"] .cart__cell--amount { grid-area: amount; }
    [data-design="2"] .cart__cell--sum { grid-area: sum; font-weight: 600; }
    [data-design="2"] :is(.cart__cell--price, .cart__cell--amount, .cart__cell--sum)::before {
        color: var(--c-pl);
        font-size: var(--fs-sm);
        font-weight: 400;
    }
    [data-design="2"] .cart__cell--price::before { content: "Цена"; }
    [data-design="2"] .cart__cell--amount::before { content: "Количество"; }
    [data-design="2"] .cart__cell--sum::before { content: "Сумма"; }
    [data-design="2"] .cart__table .cart__cell--actions { position: absolute; top: var(--i-sm); right: var(--i-sm); }
    [data-design="2"] .cart__remove { width: 32rem; height: 32rem; font-size: var(--fs-h3); }
    [data-design="2"] .cart__remove:focus-visible { outline: none; border-radius: var(--r-btn); box-shadow: var(--field-ring); }
    [data-design="2"] .cart__quantity { max-width: 100%; }
}


/* Source: navigation.css */
/* V7: новая шапка и панели мобильной шторки. Старый слой не изменяется. */
[data-design="2"] .site-logo {
    display: flex;
    width: auto;
    flex: 0 0 auto;
    align-items: center;
    max-width: var(--logo-max-w);
}

[data-design="2"] .site-logo img {
    display: block;
    width: auto;
    max-width: var(--logo-max-w);
    height: var(--logo-h);
    object-fit: contain;
}

[data-design="2"] .site-header__row,
[data-design="2"] .shop-header__row {
    align-items: center;
    gap: var(--header-gap);
}

[data-design="2"] .site-header--contact .site-header__row { justify-content: flex-start; }
[data-design="2"] .site-header--contact .site-header__identity,
[data-design="2"] .site-header--contact .site-header__place { margin-right: auto; }

[data-design="2"] .site-header__backdrop {
    visibility: visible;
    pointer-events: none;
    transition: opacity var(--a-time) var(--a-tfunc);
}

[data-design="2"] .site-header.is-drawer-open .site-header__backdrop { pointer-events: auto; }

[data-design="2"] .site-header__drawer {
    visibility: visible;
    box-sizing: border-box;
    width: min(var(--drawer-w), 88%);
    height: 100dvh;
    gap: 0;
    padding: 0;
    opacity: 0;
    pointer-events: none;
    transition: transform var(--a-time) var(--a-tfunc), opacity var(--a-time) var(--a-tfunc);
}

[data-design="2"] .site-header.is-drawer-open .site-header__drawer {
    opacity: 1;
    pointer-events: auto;
}

[data-design="2"] .site-header__drawer-head {
    padding: var(--i-sm) var(--i-md);
    border-bottom: 1px solid var(--ci);
}

[data-design="2"] .site-header__close {
    border-radius: var(--r-pill);
    background: var(--cil);
}

[data-design="2"] .site-header__drawer-panels {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

[data-design="2"] .site-header__drawer-panel {
    display: flex;
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    flex-direction: column;
    gap: var(--i-md);
    padding: var(--i-sm) var(--i-md) var(--i-md);
    overflow-y: auto;
    background: var(--cbg);
    transition: transform var(--a-time) var(--a-tfunc), opacity var(--a-time) var(--a-tfunc);
}

[data-design="2"] .site-header__drawer-panel[hidden] { display: none; }
[data-design="2"] .site-header__drawer-panel.is-entering { animation: mx-drawer-panel-in var(--a-time) var(--a-tfunc); }
@keyframes mx-drawer-panel-in { from { transform: translateX(100%); } to { transform: none; } }

[data-design="2"] .site-header__drawer-subhead { display: grid; gap: var(--i-esm); }
[data-design="2"] .site-header__drawer-back {
    display: inline-flex;
    align-items: center;
    gap: var(--i-esm);
    width: max-content;
    padding: 0;
    border: 0;
    background: none;
    color: var(--caf-strong);
    font: 500 var(--fs-sm)/1.3 var(--font-sans);
    cursor: pointer;
}

[data-design="2"] .site-header__drawer-back svg { width: var(--i-sm); height: var(--i-sm); transform: rotate(180deg); }
[data-design="2"] .site-header__drawer-heading { margin: 0; color: var(--cf); font-size: var(--fs-h3); font-weight: var(--fw-bold); }
[data-design="2"] .site-header__drawer-list { margin: 0; padding: 0; list-style: none; }
[data-design="2"] .site-header__drawer-list > li { border-bottom: 1px solid var(--ci); }
[data-design="2"] .site-header__drawer-list a,
[data-design="2"] .site-header__drawer-next {
    display: flex;
    box-sizing: border-box;
    width: 100%;
    min-height: 52rem;
    align-items: center;
    justify-content: space-between;
    gap: var(--i-esm);
    padding: 0;
    border: 0;
    background: none;
    color: var(--cf);
    font: 500 var(--fs-p)/1.3 var(--font-sans);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

[data-design="2"] .site-header__drawer-next svg { width: var(--i-sm); height: var(--i-sm); flex: none; color: var(--c-pl); }
[data-design="2"] .site-header__drawer-list .active > a,
[data-design="2"] .site-header__drawer-list .active > .site-header__drawer-next,
[data-design="2"] .site-header__drawer-all { color: var(--caf-strong); }
[data-design="2"] .site-header__drawer-all { font-weight: var(--fw-bold); }
[data-design="2"] .site-header__drawer-list a:focus-visible,
[data-design="2"] .site-header__drawer-next:focus-visible,
[data-design="2"] .site-header__drawer-back:focus-visible { outline: 2px solid var(--caf-strong); outline-offset: -2px; }
[data-design="2"] .site-header__drawer-contacts { padding: var(--i-sm) var(--i-md); border-top: 1px solid var(--ci); }

@media (max-width: 768px) {
    [data-design="2"] { --logo-h: 40rem; }
    [data-design="2"] .shop-header__logo { flex: 1 1 auto; }
}

@media (min-width: 769px) {
    [data-design="2"] .site-header__drawer,
    [data-design="2"] .site-header__backdrop { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    [data-design="2"] .site-header__drawer,
    [data-design="2"] .site-header__backdrop,
    [data-design="2"] .site-header__drawer-panel { transition: none; }
    [data-design="2"] .site-header__drawer-panel.is-entering { animation: none; }
}


/* Source: identity.css */
/* Подключается только при show_site_identity: прежняя сборка не меняется. */
.site-identity,
.site-header--identity .site-header__identity {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: calc(var(--i-esm) / 2);
    overflow-wrap: anywhere;
    line-height: 1.3;
}

.site-identity strong,
.site-header--identity .site-header__identity strong {
    font-weight: var(--fw-bold, 700);
}

.site-identity span {
    color: var(--c-pl);
    font-size: var(--fs-sm);
}

.site-header--identity .site-header__identity { flex: 1 1 0; }

.site-header--identity .shop-header__logo,
.site-footer--identity .site-footer__logo {
    display: flex;
    width: auto;
    min-width: 0;
    max-width: none;
    flex: 1 1 0;
    flex-direction: row;
    align-items: center;
    gap: var(--i-esm);
}

.site-header--identity .shop-header__logo .site-logo__link,
.site-footer--identity .site-logo__link {
    width: calc(var(--i-xxl) * 2);
    flex: 0 0 calc(var(--i-xxl) * 2);
}

.site-header--identity .shop-header__logo .site-identity,
.site-footer--identity .site-identity { flex: 1 1 0; }

.site-header--identity .shop-header__logo .site-logo__link img,
.site-footer--identity .site-logo img {
    width: 100%;
    max-width: 100%;
    height: auto;
}

.site-footer--identity.site-footer--dark .site-identity span {
    color: color-mix(in srgb, var(--cw) 75%, transparent);
}

@media (max-width: 768px) {
    .site-header--identity .site-logo,
    .site-header--identity .shop-header__logo .site-logo__link {
        width: var(--i-xxl);
        flex: 0 0 var(--i-xxl);
    }

    .site-header--identity .shop-header__logo {
        width: auto;
        flex: 1 1 0;
    }

    .site-header--identity .site-header__identity { display: flex; }

    .site-header--identity .site-logo img {
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    .site-header--identity .shop-header__row { gap: var(--i-esm); }
    .site-header--identity .site-header__toggle { flex-shrink: 0; }
    .site-header--identity .shop-header__action { flex-shrink: 0; }
    .site-header--identity .site-identity,
    .site-header--identity .site-header__identity { font-size: var(--fs-sm); }

    .site-footer--identity .site-footer__logo { width: 100%; text-align: left; }
}


/* Source: block.css */
/* hero_sketch — первый экран со скетчем сайта. Только токены и rem (px только для линий 1px).
   Базовые стили = финальное состояние. Анимации только под .hero-sketch.is-play, отключаются при prefers-reduced-motion.
   Цвета mesh-градиента (#eea2a2 розовый, #bbc1bf серо-зелёный, #b49fda лавандовый, #57c6e1, #7ac5d8) живут только здесь, в токены не добавляются. */

.b-sinega_hero_sketch { position: relative; overflow: hidden; isolation: isolate; color: var(--cf); }
.b-sinega_hero_sketch > .container { position: static; }   /* mesh и волна позиционируются от секции */
.b-sinega_hero_sketch:has(.hero-sketch__wave) > .container { padding-bottom: calc(var(--section-pad) * var(--section-k) + 48rem); }

/* фон */
.hero-sketch__mesh { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: #bbc1bf; }
.hero-sketch__mesh-layer {
  position: absolute; inset: -20%;
  background:
    radial-gradient(38% 50% at 22% 38%, #eea2a2 0%, transparent 72%),
    radial-gradient(34% 46% at 50% 22%, #b49fda 0%, transparent 70%),
    radial-gradient(42% 52% at 84% 48%, #7ac5d8 0%, transparent 72%),
    radial-gradient(36% 46% at 68% 88%, #57c6e1 0%, transparent 70%),
    radial-gradient(40% 50% at 12% 86%, #eea2a2 0%, transparent 70%),
    #bbc1bf;

}
.hero-sketch__wave { position: absolute; left: 0; bottom: -1px; z-index: 1; display: block; width: 100%; height: 72rem; }
.hero-sketch__wave path { fill: var(--cbg); }

/* раскладка */
.hero-sketch { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--i-xl); align-items: center; }
.hero-sketch__text { display: flex; flex-direction: column; gap: var(--i-md); min-width: 0; }
.hero-sketch__eyebrow { margin: 0; font-size: var(--fs-p); font-weight: 500; }
.hero-sketch__title { margin: 0; font-size: calc(var(--fs-h1) * 1.3); line-height: 1.04; letter-spacing: -0.01em; }
.hero-sketch__text .block-page-heading__crumbs { font-size: var(--fs-sm); line-height: 1.4; }
.hero-sketch--light .block-page-heading__crumbs,
.hero-sketch--light .block-page-heading__crumbs a,
.hero-sketch--light .block-page-heading__crumbs .breadcrumbs li { color: var(--cw); }
.hero-sketch--light .block-page-heading__crumbs svg { fill: currentColor; }
.hero-sketch__description { margin: 0; max-width: 480rem; font-size: var(--fs-h4); line-height: 1.45; text-wrap: pretty; }
.hero-sketch__actions { display: flex; flex-wrap: wrap; gap: var(--i-sm); margin-top: var(--i-esm); }
/* цена «от» и срок (страницы услуг) */
.hero-sketch__offer { display: flex; flex-wrap: wrap; gap: var(--i-sm) var(--i-xl); margin: 0; }
.hero-sketch__offer dt { font-size: var(--fs-sm); font-weight: 500; }
.hero-sketch__offer dd { margin: 4rem 0 0; font-size: var(--fs-h4); font-weight: 600; }
.hero-sketch__offer dd.hero-sketch__offer-price { font-size: var(--fs-h2); font-weight: var(--fw-heading); line-height: 1.1; }
.b-sinega_hero_sketch .main-button.c3 .main-link { background: var(--cw); }
.hero-sketch--light .hero-sketch__text > :not(.hero-sketch__actions) {
  color: var(--cw);
  text-shadow: 0 1rem 2rem color-mix(in srgb, var(--cf) 35%, transparent), 0 4rem 24rem color-mix(in srgb, var(--cf) 30%, transparent);
}

/* окно браузера */
.hero-sketch__visual { display: flex; flex-direction: column; gap: var(--i-md); width: 100%; max-width: 680rem; margin-left: auto; }
.hero-sketch__win { position: relative; overflow: hidden; border-radius: var(--r-card); background: var(--cw); box-shadow: var(--s-lg); }
.hero-sketch__bar { display: flex; justify-content: flex-end; gap: 8rem; padding: 14rem 18rem; border-bottom: 1px solid var(--ci); }
.hero-sketch__bar i { width: 10rem; height: 10rem; border-radius: 50%; background: var(--ci); }
.hero-sketch__view { position: relative; height: 400rem; overflow: hidden; }
.hero-sketch__page { display: flex; flex-direction: column; gap: 18rem; padding: 22rem; transform: translateY(-96rem); }

/* общие детали скетча */
.hero-sketch__fill { position: absolute; inset: 0; }
.hero-sketch__slot { position: relative; display: block; }
.hero-sketch__line { display: block; width: var(--w, 100%); height: 8rem; border-radius: 4rem; background: var(--ci); transform-origin: left center; }
.hero-sketch__line--h { height: 16rem; border-radius: 5rem; }
.hero-sketch__box { display: block; box-sizing: border-box; border: 2px solid var(--ci); border-radius: 8rem; }

/* шапка демо-сайта */
.hero-sketch__head { display: flex; justify-content: space-between; align-items: center; gap: 16rem; }
.hero-sketch__slot--logo { width: 112rem; height: 30rem; }
.hero-sketch__logo { display: flex; align-items: center; gap: 8rem; background: var(--cw); }
.hero-sketch__logo b { flex: 0 0 26rem; height: 26rem; display: grid; place-items: center; border-radius: 7rem; background: var(--caf); font-size: 14rem; }
.hero-sketch__logo > span { display: flex; flex-direction: column; line-height: 1.15; }
.hero-sketch__logo strong { font-size: 13rem; }
.hero-sketch__logo small { font-size: 9rem; color: var(--c-pl); }
.hero-sketch__nav { display: flex; align-items: center; gap: 14rem; }
.hero-sketch__slot--nav { width: 54rem; height: 8rem; }
.hero-sketch__navtext { position: absolute; left: 0; right: 0; top: -4rem; height: 16rem; font-size: 11rem; line-height: 16rem; white-space: nowrap; color: var(--c-pl); background: var(--cw); }

/* первый экран демо-сайта */
.hero-sketch__hero { position: relative; height: 196rem; }
.hero-sketch__hero > .hero-sketch__box.hero-sketch__fill { border-radius: 10rem; }
.hero-sketch__img-slot { position: absolute; top: 20rem; right: 20rem; bottom: 20rem; width: 38%; border-radius: 8rem; }
.hero-sketch__col { position: absolute; left: 24rem; top: 24rem; bottom: 24rem; width: 46%; display: flex; flex-direction: column; gap: 12rem; }
.hero-sketch__col--design { gap: 8rem; }
.hero-sketch__btn-slot { margin-top: auto; width: 128rem; height: 36rem; }
.hero-sketch__hero-bg { border-radius: 10rem; background: linear-gradient(135deg, var(--cil), color-mix(in srgb, var(--caf) 18%, var(--cw))); }
 .hero-sketch__preview { overflow: hidden; background: linear-gradient(170deg, color-mix(in srgb, var(--caf) 38%, var(--cw)), color-mix(in srgb, var(--cal) 65%, var(--cw))); }
.hero-sketch__dashboard { position: absolute; inset: 28% 10% 10%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8%; align-items: end; }
.hero-sketch__dashboard i { height: 55%; border-radius: 4rem; background: var(--cw); }
.hero-sketch__dashboard i:nth-child(2) { height: 80%; }
.hero-sketch__dashboard i:nth-child(3) { height: 100%; }
.hero-sketch__dashboard b { grid-column: 1 / -1; height: 10rem; border-radius: var(--r-pill); background: var(--caf-strong); }
.hero-sketch__price { position: absolute; left: 7%; top: 7%; padding: 3rem 8rem; border-radius: var(--r-pill); background: var(--cw); box-shadow: var(--s-sm); font-size: 10rem; font-weight: 600; white-space: nowrap; }
.hero-sketch__demo-title { font-size: 18rem; font-weight: var(--fw-bold); line-height: 1.15; }
.hero-sketch__demo-sub { font-size: 11rem; line-height: 1.4; color: var(--c-pl); }
.hero-sketch__cta { position: relative; display: block; margin-top: auto; width: 128rem; height: 36rem; }
.hero-sketch__btn { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 8rem; background: var(--gr-f); font-size: 11rem; font-weight: 600; white-space: nowrap; }
.hero-sketch__ripple { position: absolute; left: 74%; top: 58%; width: 40rem; height: 40rem; margin: -20rem 0 0 -20rem; border-radius: 50%; border: 2px solid var(--caf-strong); opacity: 0; }
.hero-sketch__cursor { position: absolute; left: 72%; top: 52%; z-index: 2; width: 24rem; height: 24rem; overflow: visible; opacity: 0; }
.hero-sketch__cursor path { fill: var(--cf); stroke: var(--cw); stroke-width: 1.6; stroke-linejoin: round; }

/* карточки демо-сайта */
.hero-sketch__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14rem; }
.hero-sketch__card { position: relative; height: 124rem; }
.hero-sketch__card-line { position: absolute; left: 12rem; bottom: 16rem; width: 60%; height: 7rem; }
.hero-sketch__card-d { display: flex; flex-direction: column; overflow: hidden; border-radius: 8rem; background: var(--cw); box-shadow: var(--s-sm); }
 .hero-sketch__card-img { flex: 0 0 56%; display: grid; place-items: center; background: color-mix(in srgb, var(--caf) 25%, var(--cw)); }
.hero-sketch__card-img--prices { background: color-mix(in srgb, var(--cal) 40%, var(--cw)); }
.hero-sketch__card-img--reviews { background: color-mix(in srgb, var(--cas) 35%, var(--cw)); }
.hero-sketch__card-icon { display: flex; flex-direction: column; gap: 5rem; width: 35%; padding: 9rem; border-radius: 8rem; background: var(--cw); }
.hero-sketch__card-icon i { height: 4rem; border-radius: 2rem; background: var(--caf-strong); }
.hero-sketch__card-icon i:last-child { width: 65%; }
.hero-sketch__card-title { padding: 8rem 10rem 0; overflow: hidden; font-size: 11rem; font-weight: 600; line-height: 1.2; white-space: nowrap; text-overflow: ellipsis; }
.hero-sketch__card-price { padding: 3rem 10rem 0; font-size: 10rem; font-weight: 600; color: var(--caf-strong); }

/* о компании и полоса заявки демо-сайта */
.hero-sketch__about { position: relative; display: flex; flex-direction: column; gap: 9rem; min-height: 54rem; }
.hero-sketch__about-d { display: flex; flex-direction: column; gap: 4rem; background: var(--cw); }
.hero-sketch__about-d strong { font-size: 13rem; line-height: 1.3; }
.hero-sketch__about-d span { font-size: 11rem; line-height: 1.45; color: var(--c-pl); }
.hero-sketch__band { position: relative; height: 96rem; }
.hero-sketch__band > .hero-sketch__box { border-radius: 10rem; }
.hero-sketch__band-d { display: flex; align-items: center; justify-content: space-between; gap: 14rem; padding: 0 20rem; border-radius: 10rem; background: color-mix(in srgb, var(--caf) 20%, var(--cw)); }
.hero-sketch__band-text { display: flex; flex-direction: column; gap: 4rem; min-width: 0; }
.hero-sketch__band-text strong { font-size: 13rem; }
.hero-sketch__band-text small { font-size: 10rem; color: var(--c-pl); }
.hero-sketch__band-form { display: flex; flex: 0 0 auto; gap: 6rem; font-size: 10rem; line-height: 30rem; }
.hero-sketch__band-form i { width: 92rem; height: 30rem; box-sizing: border-box; padding-left: 8rem; border-radius: 6rem; background: var(--cw); box-shadow: inset 0 0 0 1px var(--ci); font-style: normal; color: var(--c-pl); }
.hero-sketch__band-form b { height: 30rem; padding: 0 10rem; border-radius: 6rem; background: var(--gr-f); font-weight: 600; }

/* демо-лендинг (sketch_kind: landing) */
.hero-sketch--kind-landing .hero-sketch__page { transform: translateY(-240rem); }
.hero-sketch__perks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14rem; }
.hero-sketch__perk { position: relative; height: 92rem; }
.hero-sketch__perk-line { position: absolute; left: 14rem; bottom: 18rem; width: 64%; height: 7rem; }
.hero-sketch__perk-d { display: flex; flex-direction: column; justify-content: center; gap: 8rem; padding: 0 14rem; border-radius: 8rem; background: var(--cw); box-shadow: var(--s-sm); font-size: 11rem; font-weight: 600; }
.hero-sketch__perk-d i { width: 26rem; height: 26rem; border-radius: 50%; background: color-mix(in srgb, var(--caf) 40%, var(--cw)); }
.hero-sketch__deal { position: relative; height: 90rem; }
.hero-sketch__deal > .hero-sketch__box, .hero-sketch__lform > .hero-sketch__box { border-radius: 10rem; }
.hero-sketch__deal-d { display: flex; flex-direction: column; justify-content: center; gap: 4rem; padding: 0 20rem; border-radius: 10rem; background: var(--cil); }
.hero-sketch__deal-d strong { font-size: 14rem; }
.hero-sketch__deal-d span { font-size: 11rem; color: var(--c-pl); }
.hero-sketch__lform { position: relative; height: 110rem; }
.hero-sketch__lform-d { display: flex; flex-direction: column; justify-content: center; gap: 10rem; padding: 0 20rem; border-radius: 10rem; background: color-mix(in srgb, var(--caf) 20%, var(--cw)); }
.hero-sketch__lform-d > strong { font-size: 13rem; }
.hero-sketch__lform-row { display: flex; gap: 8rem; }
.hero-sketch__lform-input { flex: 1; min-width: 0; height: 34rem; box-sizing: border-box; padding: 0 10rem; overflow: hidden; border-radius: 6rem; background: var(--cw); box-shadow: inset 0 0 0 1px var(--ci); font-size: 11rem; line-height: 34rem; white-space: nowrap; }
.hero-sketch__lform-btn { position: relative; flex: 0 0 auto; height: 34rem; padding: 0 14rem; border-radius: 6rem; background: var(--gr-f); font-size: 11rem; font-weight: 600; line-height: 34rem; }
.hero-sketch__ripple--2 { left: 60%; top: 55%; }
.hero-sketch__cursor--2 { left: 58%; top: 45%; }
.hero-sketch__lsent { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8rem; border-radius: 10rem; background: color-mix(in srgb, var(--caf) 20%, var(--cw)); font-size: 12rem; font-weight: 600; color: var(--cf); }
.hero-sketch__lsent .icon { width: 22rem; height: 22rem; padding: 4rem; box-sizing: border-box; border-radius: 50%; background: var(--caf-strong); color: var(--cw); }

/* мини-чат */
.hero-sketch__chat { position: absolute; right: 14rem; bottom: 14rem; width: 62%; max-width: 260rem; overflow: hidden; border-radius: 16rem; background: var(--cw); box-shadow: var(--s-lg); font-size: 13rem; line-height: 1.45; transform-origin: right bottom; }
.hero-sketch__chat-head { display: flex; align-items: center; gap: 10rem; padding: 10rem 12rem; background: var(--caf-strong); color: var(--cw); }
.hero-sketch__chat-head b { flex: 0 0 28rem; height: 28rem; display: grid; place-items: center; border-radius: 50%; background: var(--cw); color: var(--caf-strong); }
.hero-sketch__chat-head > span { display: flex; flex-direction: column; line-height: 1.25; }
.hero-sketch__chat-head small { font-size: 11rem; }
.hero-sketch__chat-body { display: flex; flex-direction: column; gap: 8rem; padding: 12rem; background: var(--cil); }
.hero-sketch__msg { padding: 8rem 11rem; }
.hero-sketch__msg--u { align-self: flex-end; max-width: 86%; border-radius: 12rem 12rem 4rem 12rem; background: var(--caf-strong); color: var(--cw); }
.hero-sketch__msg-wrap { position: relative; align-self: flex-start; max-width: 90%; }
.hero-sketch__msg--b { min-width: 150rem; min-height: 1.45em; border-radius: 12rem 12rem 12rem 4rem; background: var(--cw); }
.hero-sketch__typing { position: absolute; left: 0; top: 0; display: flex; gap: 4rem; padding: 12rem 13rem; border-radius: 12rem 12rem 12rem 4rem; background: var(--cw); opacity: 0; }
.hero-sketch__typing i { display: block; width: 6rem; height: 6rem; border-radius: 50%; background: var(--c-pl); }

/* индикатор этапов */
.hero-sketch__stages { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hero-sketch__track { position: absolute; left: 16.667%; right: 16.667%; top: 13rem; height: 3rem; border-radius: 3rem; background: color-mix(in srgb, var(--cf) 14%, transparent); }
.hero-sketch__track--fill { background: linear-gradient(90deg, var(--caf-strong), var(--caf)); transform-origin: left center; }
.hero-sketch__stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8rem; }
.hero-sketch__node { position: relative; width: 28rem; height: 28rem; }
.hero-sketch__halo { position: absolute; inset: -7rem; border-radius: 50%; background: color-mix(in srgb, var(--cw) 75%, transparent); opacity: 0; }
.hero-sketch__num, .hero-sketch__done { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; }
.hero-sketch__num { background: var(--cw); box-shadow: inset 0 0 0 2px var(--caf-strong); font-size: 13rem; font-weight: var(--fw-bold); color: var(--caf-strong); }
.hero-sketch__done { background: var(--caf-strong); color: var(--cw); }
.hero-sketch__done .icon { width: 14rem; height: 14rem; }
.hero-sketch__stage-label { font-size: var(--fs-sm); font-weight: 600; }
.hero-sketch--light .hero-sketch__stage-label { color: var(--cf); }

/* ── движение ── */
@keyframes hero-sketch-drift { 0% { transform: translate3d(0, 0, 0) rotate(0deg); } 50% { transform: translate3d(-4%, 3%, 0) rotate(3deg); } 100% { transform: translate3d(3%, -2%, 0) rotate(-2deg); } }
@keyframes hero-sketch-draw { from { transform: scaleX(0); } }
@keyframes hero-sketch-pop { from { opacity: 0; transform: translateY(8rem) scale(.98); } }
@keyframes hero-sketch-in { from { opacity: 0; transform: translateY(6rem); } }
@keyframes hero-sketch-scroll { from { transform: none; } }
@keyframes hero-sketch-cursor { 0% { opacity: 0; transform: translate(170rem, 120rem); } 12% { opacity: 1; } 55% { opacity: 1; transform: none; } 82% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes hero-sketch-click { 40% { transform: scale(.92); } }
@keyframes hero-sketch-ripple { 0% { opacity: 0; transform: scale(.6); } 10% { opacity: .7; } 100% { opacity: 0; transform: scale(1.9); } }
@keyframes hero-sketch-chat { from { opacity: 0; transform: translateY(12rem) scale(.94); } }
@keyframes hero-sketch-bubble { from { opacity: 0; transform: translateY(6rem) scale(.94); } }
@keyframes hero-sketch-typing { 0% { opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes hero-sketch-bounce { 30% { transform: translateY(-4rem); } 60% { transform: none; } }
@keyframes hero-sketch-fill { 0% { transform: scaleX(0); } 50% { transform: scaleX(.5); } 100% { transform: scaleX(1); } }
@keyframes hero-sketch-node { from { opacity: 0; transform: scale(.6); } }
@keyframes hero-sketch-halo { 0% { opacity: 0; transform: scale(.8); } 15% { opacity: 1; transform: none; } 85% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes hero-sketch-type { from { opacity: 0; } to { opacity: 1; } }

.hero-sketch.is-play { --e-out: cubic-bezier(.2, .7, .2, 1); --e-pop: cubic-bezier(.2, .9, .3, 1.3); }
.hero-sketch.is-play .hero-sketch__line { animation: hero-sketch-draw 500ms var(--e-out) var(--d, 0ms) both; }
.hero-sketch.is-play .hero-sketch__box { animation: hero-sketch-pop 450ms var(--e-out) var(--d, 0ms) both; }
.hero-sketch.is-play .hero-sketch__dz { animation: hero-sketch-in 450ms var(--e-out) var(--d, 0ms) both; }
.hero-sketch.is-play .hero-sketch__cursor { animation: hero-sketch-cursor 1100ms cubic-bezier(.45, 0, .25, 1) 2600ms both; }
.hero-sketch.is-play .hero-sketch__btn { animation: hero-sketch-click 240ms ease-out 3200ms both; }
.hero-sketch.is-play .hero-sketch__ripple { animation: hero-sketch-ripple 520ms ease-out 3220ms both; }
.hero-sketch.is-play .hero-sketch__page { animation: hero-sketch-scroll 600ms var(--e-out) 3400ms both; }
.hero-sketch.is-play .hero-sketch__chat { animation: hero-sketch-chat 400ms var(--e-pop) 4000ms both; }
.hero-sketch.is-play .hero-sketch__msg--u { animation: hero-sketch-bubble 350ms var(--e-pop) 4100ms both; }
.hero-sketch.is-play .hero-sketch__typing { animation: hero-sketch-typing 550ms linear 4200ms both; }
.hero-sketch.is-play .hero-sketch__typing i { animation: hero-sketch-bounce 500ms ease-in-out 4250ms 1; }
.hero-sketch.is-play .hero-sketch__typing i:nth-child(2) { animation-delay: 4400ms; }
.hero-sketch.is-play .hero-sketch__typing i:nth-child(3) { animation-delay: 4550ms; }
.hero-sketch.is-play .hero-sketch__msg--b { animation: hero-sketch-bubble 300ms var(--e-pop) 4700ms both; }
.hero-sketch.is-play .hero-sketch__track--fill { animation: hero-sketch-fill 2600ms var(--e-out) both; }
.hero-sketch.is-play .hero-sketch__done { animation: hero-sketch-node 320ms var(--e-pop) var(--d, 0ms) both; }
.hero-sketch.is-play .hero-sketch__halo { animation: hero-sketch-halo var(--dur, 1300ms) ease var(--d, 0ms) both; }
/* лендинг: прокрутка к форме длиннее, затем ввод (JS печатает по animationstart), клик «Отправить», успех */
.hero-sketch--kind-landing.is-play .hero-sketch__page { animation-duration: 800ms; }
.hero-sketch.is-play .hero-sketch__typed { animation: hero-sketch-type 10ms linear 4300ms both; }
.hero-sketch.is-play .hero-sketch__cursor--2 { animation: hero-sketch-cursor 900ms cubic-bezier(.45, 0, .25, 1) 4550ms both; }
.hero-sketch.is-play .hero-sketch__lform-btn { animation: hero-sketch-click 240ms ease-out 5050ms both; }
.hero-sketch.is-play .hero-sketch__ripple--2 { animation: hero-sketch-ripple 520ms ease-out 5070ms both; }
.hero-sketch.is-play .hero-sketch__lsent { animation: hero-sketch-in 300ms var(--e-pop) 5300ms both; }

@media (prefers-reduced-motion: reduce) {
  .hero-sketch__mesh-layer, .hero-sketch *, .hero-sketch *::before, .hero-sketch *::after { animation: none !important; }
}

/* ── адаптив ── */
@media (max-width: 768px) {
  .hero-sketch { grid-template-columns: minmax(0, 1fr); gap: var(--i-lg); }
  .hero-sketch__title { font-size: var(--fs-h1); }
  .hero-sketch__actions { flex-direction: column; }
  .hero-sketch__actions .main-button, .hero-sketch__actions .main-link { width: 100%; }
  .hero-sketch__visual { max-width: none; }
}

/* block-dark: блок сам задаёт фон (mesh), поэтому текст красит сам; окно и чат со своей светлой подложкой */
.b-sinega_hero_sketch.block-dark { background: none; }

/* Нейтральная выдача: тот же таймлайн прототипа, дизайна и готового сайта. */
.hero-sketch__logo strong { font-size: 11rem; white-space: nowrap; }
.hero-sketch__slot--logo { width: 145rem; }
.hero-sketch__page--search { transform: none; }
.hero-sketch__search { position: relative; height: 42rem; }
.hero-sketch__search-field { display: flex; align-items: center; justify-content: space-between; gap: 10rem; padding: 0 14rem; border: 1px solid var(--ci); border-radius: 8rem; background: var(--cw); font-size: 14rem; }
.hero-sketch__search-field svg { width: 18rem; height: 18rem; fill: none; stroke: var(--caf-strong); stroke-width: 2; }
.hero-sketch__search-result { position: relative; height: 90rem; }
.hero-sketch__search-result-d { display: flex; flex-direction: column; gap: 4rem; padding: 8rem 14rem; border-radius: 8rem; background: var(--cw); }
.hero-sketch__search-result-d small { font-size: 10rem; color: var(--c-pl); }
.hero-sketch__search-result-d strong { font-size: 16rem; color: var(--caf-strong); }
.hero-sketch__search-result-d b, .hero-sketch__search-result-d > span { font-size: 11rem; }


/* Source: split_feature.css */
.b-split_feature .split-feature {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: var(--i-xl);
    align-items: start;
}

/* Вводная часть на всю ширину, карточки сеткой под ней. Нужен там, где
   элементов три и больше: в правой половине они сжимаются до нечитаемого. */
.b-split_feature .split-feature--wide_items {
    grid-template-columns: 1fr;
    gap: var(--i-lg);
}

.b-split_feature .split-feature__eyebrow {
    margin: 0 0 var(--i-esm);
    color: var(--caf);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.b-split_feature .split-feature__title {
    margin-top: 0;
    margin-bottom: var(--i-sm);
}

.b-split_feature .split-feature__copy {
    color: var(--c-pl);
}

.b-split_feature .split-feature__copy > *:first-child {
    margin-top: 0;
}

.b-split_feature .split-feature__figure {
    margin: 0;
}

.b-split_feature .split-feature__image {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--c-md);
    object-fit: cover;
}

.b-split_feature .split-feature__caption {
    margin-top: var(--i-esm);
    color: var(--c-pl);
    font-size: var(--fs-sm);
}

.b-split_feature .split-feature__items-title {
    margin: 0 0 var(--i-esm);
    color: var(--c-pl);
    font-size: var(--fs-h4);
    font-weight: var(--fw-bold);
}

.b-split_feature .split-feature__items-intro {
    margin: 0 0 var(--i-sm);
    color: var(--c-pl);
}

.b-split_feature .split-feature__items {
    --split-cols: 1;
    display: grid;
    grid-template-columns: repeat(var(--split-cols), minmax(0, 1fr));
    gap: var(--i-sm);
    margin: 0;
    padding: 0;
    list-style: none;
}

.b-split_feature .split-feature__items--cols-2 {
    --split-cols: 2;
}

.b-split_feature .split-feature__items--cols-3 {
    --split-cols: 3;
}

.b-split_feature .split-feature__items--cols-auto {
    grid-template-columns: repeat(auto-fit, minmax(220rem, 1fr));
}

.b-split_feature .split-feature__item {
    display: flex;
    min-width: 0;
    gap: var(--i-esm);
    align-items: flex-start;
}

.b-split_feature .split-feature__marker {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    color: var(--caf);
}

.b-split_feature .split-feature__marker svg {
    width: 1.25em;
    height: 1.25em;
    fill: currentColor;
}

.b-split_feature .split-feature__item-body {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: .25em;
}

.b-split_feature .split-feature__item-title {
    font-weight: var(--fw-bold);
}

.b-split_feature .split-feature__item-text {
    color: var(--c-pl);
    font-size: var(--fs-sm);
}

/* Нумерованный список: кружок с номером, чтобы этапы читались по порядку. */
.b-split_feature .split-feature__items--numbered .split-feature__marker {
    width: 2em;
    height: 2em;
    border-radius: 50%;
    background: var(--caf);
    color: var(--cw);
    font-weight: var(--fw-bold);
}

/* Карточки: код стандарта крупным идентификатором, поэтому строка становится
   блоком с рамкой и акцентной кромкой слева. */
.b-split_feature .split-feature__items--cards .split-feature__item {
    flex-direction: column;
    gap: .35em;
    padding: var(--i-sm);
    border: 1px solid var(--ci);
    border-left: 4rem solid var(--caf);
    border-radius: var(--c-sm);
    background: var(--cbg-card);
}

.b-split_feature .split-feature__items--cards .split-feature__marker {
    justify-content: flex-start;
    font-size: var(--fs-h4);
    font-weight: var(--fw-bold);
}

.b-split_feature .main-button {
    margin-top: var(--i-sm);
}

@media (max-width: 1024px) {
    .b-split_feature .split-feature {
        grid-template-columns: 1fr;
        gap: var(--i-lg);
    }

    .b-split_feature .split-feature__items--cols-3 {
        --split-cols: 2;
    }
}

@media (max-width: 768px) {
    .b-split_feature .split-feature__items--cols-2,
    .b-split_feature .split-feature__items--cols-3 {
        --split-cols: 1;
    }
}


/* Source: tariffs.css */
.b-tariffs .tariffs-heading {
    margin-top: 0;
    margin-bottom: var(--i-xl);
    text-align: center;
}

.b-tariffs .tariffs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(calc(var(--i-xxl) * 3), 1fr));
    align-items: stretch;
    gap: var(--i-lg);
}

.b-tariffs .tariff-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--i-lg);
    padding: var(--i-lg);
    border: 1px solid var(--ci);
    border-radius: var(--c-md);
    background: var(--cbg-card);
    box-shadow: var(--s-sm);
}

.b-tariffs .tariff-card.is-highlighted {
    border-color: var(--caf);
    box-shadow: var(--s-lg);
    transform: scale(1.03);
}

.b-tariffs .tariff-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--i-md);
}

.b-tariffs .tariff-card__name,
.b-tariffs .tariff-card__price {
    margin: 0;
    text-align: center;
}

.b-tariffs .tariff-card__name {
    color: var(--cf);
    font-size: var(--fs-h4);
}

.b-tariffs .tariff-card__price {
    color: var(--caf);
}

.b-tariffs .tariff-card__price span {
    font-family: var(--ff-h);
    font-size: var(--fs-h2);
    font-weight: var(--fw-bold);
}

.b-tariffs .tariff-card__price small {
    color: var(--c-pl);
    font-size: var(--fs-sm);
}

.b-tariffs .tariff-card__features {
    display: flex;
    margin: 0;
    padding: 0;
    flex-direction: column;
    gap: var(--i-sm);
    list-style: none;
}

.b-tariffs .tariff-card__features li {
    display: flex;
    align-items: flex-start;
    gap: var(--i-sm);
    color: var(--cf);
}

.b-tariffs .tariff-card__features li.is-excluded {
    color: var(--c-pl);
}

.b-tariffs .tariff-card__features svg {
    width: var(--i-md);
    height: var(--i-md);
    flex: 0 0 var(--i-md);
    color: var(--caf);
}

.b-tariffs .tariff-card__features .is-excluded svg {
    color: var(--c-pl);
}

.b-tariffs .tariff-card .btn {
    width: 100%;
}

@media (max-width: 768px) {
    .b-tariffs .tariffs-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .b-tariffs .tariff-card.is-highlighted {
        transform: none;
    }
}

/* ── Шапка секции и раскладки: добавлено вместе с характеристиками и фото.
      Прежний вид без этих полей не меняется → ADR-047. ── */

.b-tariffs .tariffs-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--i-md);
    margin-bottom: var(--i-xl);
}

/* Заголовок центрован только когда он один: рядом со ссылкой это выглядело бы
   случайным смещением. */
.b-tariffs .tariffs-head .tariffs-heading {
    margin-bottom: 0;
    text-align: left;
}

.b-tariffs .tariffs-subtitle {
    margin-top: var(--i-esm);
    color: var(--c-pl);
}

.b-tariffs .tariffs-all {
    flex: 0 0 auto;
    color: var(--caf);
    font-weight: var(--fw-bold);
    white-space: nowrap;
}

.b-tariffs .tariffs-grid--compact {
    grid-template-columns: repeat(auto-fit, minmax(calc(var(--i-xxl) * 2), 1fr));
    gap: var(--i-sm);
}

.b-tariffs .tariffs-grid--compact .tariff-card {
    gap: var(--i-sm);
    padding: var(--i-sm);
}

.b-tariffs .tariff-card__media {
    margin: calc(var(--i-lg) * -1) calc(var(--i-lg) * -1) 0;
    overflow: hidden;
    border-radius: var(--c-md) var(--c-md) 0 0;
    background: var(--cil);
}

.b-tariffs .tariffs-grid--compact .tariff-card__media {
    margin: calc(var(--i-sm) * -1) calc(var(--i-sm) * -1) 0;
}

.b-tariffs .tariff-card__media img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.b-tariffs .tariff-card__specs {
    display: flex;
    flex-direction: column;
    gap: .35em;
    margin: 0;
}

.b-tariffs .tariff-card__spec {
    display: flex;
    justify-content: space-between;
    gap: var(--i-esm);
    font-size: var(--fs-sm);
}

.b-tariffs .tariff-card__spec dt {
    color: var(--c-pl);
}

.b-tariffs .tariff-card__spec dd {
    margin: 0;
    font-weight: var(--fw-bold);
    text-align: right;
}

@media (max-width: 768px) {
    .b-tariffs .tariffs-head {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* Source: block.css */
.b-sinega_pricing_note .sinega-pricing-note {
  margin: 0;
  padding: 18rem 24rem;
  border-left: 3rem solid var(--caf);
  border-radius: var(--r-card);
  background: var(--cil);
  color: var(--cf);
  font-size: var(--fs-p);
  line-height: 1.5;
}


/* Source: block.css */
/* case_showcase — кейсы с мокапами ноутбука и телефона. Только токены и rem (px только у линий 1px).
   Цвет плашки — поле color кейса (фирменный цвет клиента), приходит в --plate. */

.b-sinega_case_showcase { color: var(--cf); }

/* шапка и рамка из КП */
.case-showcase__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--i-md); margin-bottom: var(--heading-gap); }
.case-showcase__head .heading { margin: 0; min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.case-showcase__subtitle { margin: 0; max-width: 440rem; font-size: var(--fs-p); line-height: 1.5; color: var(--c-pl); text-wrap: pretty; }
.case-showcase__head--mosaic .case-showcase__subtitle { max-width: 640rem; font-size: var(--fs-h4); }
.case-showcase__frame { position: relative; isolation: isolate; display: inline-flex; padding: 20rem 36rem; border-radius: var(--r-card); }
.case-showcase__frame::before {
  content: ""; position: absolute; inset: 0; padding: 2rem; border-radius: inherit; pointer-events: none;
  background: linear-gradient(120deg, var(--caf), var(--cas) 45%, var(--cal));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.case-showcase__dots { position: absolute; top: -26rem; left: -26rem; z-index: -1; width: 72rem; height: 72rem; color: var(--caf); pointer-events: none; background-image: radial-gradient(currentColor 1.6rem, transparent 1.9rem); background-size: 12rem 12rem; }
.case-showcase__dots--end { top: auto; left: auto; right: -26rem; bottom: -26rem; color: var(--cas); }

/* фильтры: тип сайта (один из) и переключатель «Архив» справа */
.case-showcase__filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--i-sm); margin-bottom: var(--i-xl); }
.case-showcase__kinds { display: flex; flex-wrap: wrap; gap: var(--i-esm); }
.case-showcase__count { font-weight: 400; color: var(--c-pl); font-variant-numeric: tabular-nums; }
.case-showcase__archive-toggle .icon { width: 18rem; height: 18rem; }
.case-showcase__empty { margin: 0; padding: var(--i-lg) 0; font-size: var(--fs-h4); color: var(--c-pl); }
.case-showcase__empty[hidden], .case-showcase__item[hidden] { display: none; }

/* список */
.case-showcase__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--i-xxl) var(--i-lg); }
.case-showcase__list[hidden] { display: none; }
.case-showcase__item { display: grid; gap: var(--i-md); align-items: center; min-width: 0; }
.case-showcase__item--wide, .case-showcase__item--wide-rev { grid-column: 1 / -1; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--i-xl); }
.case-showcase__item--wide-rev { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.case-showcase__item--wide-rev .case-showcase__plate { order: 2; }
.case-showcase__item--narrow { align-items: start; }
.case-showcase__list--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--i-lg); }

/* мозаика: 3 колонки, цикл [крупная 2 + высокая 1], [1+1+1], [высокая + крупная], [1+1+1] */
.case-showcase__list--mosaic { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--i-xl) var(--i-md); grid-auto-flow: row dense; }
.case-showcase__list--mosaic .case-showcase__item { align-items: start; align-content: start; gap: var(--i-sm); }
.case-showcase__item--big { grid-column: span 2; }
.case-showcase__item--tall .case-showcase__plate { aspect-ratio: 4 / 5; }
.case-showcase__item--tall .case-showcase__laptop { top: 20%; }
.case-showcase__item--tall .case-showcase__phone { width: 26%; }
.case-showcase__item.is-compact .case-showcase__body { gap: 6rem; }
.case-showcase__item.is-compact .case-showcase__name { gap: 4rem; }
.case-showcase__item.is-compact .case-showcase__title { font-size: var(--fs-h4); }
.case-showcase__item--big.is-compact .case-showcase__title { font-size: var(--fs-h3); }
.case-showcase__title a { color: var(--cf); text-decoration: none; }
.case-showcase__title a:hover { color: var(--caf-strong); }

/* плашка и мокапы */
.case-showcase__plate { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r-media); background: var(--plate, var(--caf)); transition: transform var(--a-time) var(--a-tfunc), box-shadow var(--a-time) var(--a-tfunc); }
.case-showcase__placeholder { display: grid; place-items: center; min-height: 100%; padding: var(--i-md); color: var(--cw); text-shadow: 0 1px 4rem var(--cb); font-size: var(--fs-h3); font-weight: 600; text-align: center; }
.case-showcase__item:hover .case-showcase__plate { transform: translateY(-4rem); box-shadow: var(--s-md); }
.case-showcase__laptop { position: absolute; left: 8%; right: 18%; top: 11%; display: block; }
.case-showcase__plate:not(:has(.case-showcase__phone)) .case-showcase__laptop { left: 11%; right: 11%; }
.case-showcase__screen { display: block; aspect-ratio: 16 / 10; box-sizing: border-box; padding: 2.2% 2.2% 0; border-radius: 12rem 12rem 0 0; background: var(--cb); }
.case-showcase__laptop .case-showcase__viewport { border-radius: 3rem 3rem 0 0; }
.case-showcase__base { display: block; height: 14rem; margin: 0 -7%; border-radius: 0 0 14rem 14rem; background: linear-gradient(var(--ci), var(--cal)); }
.case-showcase__phone { position: absolute; right: 7%; bottom: 9%; display: block; width: 22%; aspect-ratio: 9 / 19; box-sizing: border-box; padding: 5rem; border-radius: 18rem; background: var(--cb); box-shadow: var(--s-lg); }
.case-showcase__plate:not(:has(.case-showcase__laptop)) .case-showcase__phone { right: auto; left: 50%; bottom: 8%; width: 26%; transform: translateX(-50%); }
.case-showcase__phone .case-showcase__viewport { border-radius: 13rem; }
.case-showcase__viewport { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; background: var(--cw); }
/* Короткий снимок заполняет экран, длинный сохраняет высоту для листания. */
.case-showcase__shot { display: block; width: 100%; height: auto; min-height: 100%; object-fit: cover; object-position: center top; transform: translateY(0); transition: transform 5600ms cubic-bezier(.45, 0, .25, 1); }
/* --shift = высота окна минус высота скриншота, считает block.js */
@media (hover: hover) {
  .case-showcase__item:hover .case-showcase__shot { transform: translateY(var(--shift, 0)); transition-duration: 5600ms; }
}
.case-showcase__item.is-inview .case-showcase__shot { transform: translateY(var(--shift, 0)); transition-duration: 5600ms; }

/* текст */
.case-showcase__body { display: flex; flex-direction: column; gap: var(--i-sm); min-width: 0; }
.case-showcase__meta { margin: 0; font-size: var(--fs-sm); color: var(--c-pl); }
.case-showcase__name { display: flex; flex-direction: column; gap: 6rem; }
.case-showcase__name .h3 { margin: 0; }
.case-showcase__client { margin: 0; font-size: var(--fs-p); color: var(--c-pl); }
.case-showcase__facts { display: grid; gap: var(--i-sm); margin: 0; font-size: var(--fs-p); line-height: 1.5; }
.case-showcase__facts dt { font-size: var(--fs-sm); font-weight: 600; color: var(--caf-strong); }
.case-showcase__facts dd { margin: 4rem 0 0; text-wrap: pretty; }
.case-showcase__links { display: flex; flex-wrap: wrap; gap: var(--i-sm); }
.case-showcase__more { display: flex; justify-content: center; margin-top: var(--i-xxl); }

/* Архив сохраняет цвет и интерактивность; статус обозначает плашка. */
.case-showcase__badge { position: absolute; top: 14rem; left: 14rem; padding: 6rem 12rem; border-radius: var(--r-badge); background: var(--cf); color: var(--cw); font-size: var(--fs-sm); font-weight: 600; }
.case-showcase__note { display: flex; align-items: flex-start; gap: 10rem; margin: 0; padding: 12rem 14rem; border-radius: var(--r-alert); background: var(--cil); font-size: var(--fs-p); line-height: 1.45; color: var(--cf); }
.case-showcase__note .icon { flex: 0 0 auto; width: 20rem; height: 20rem; color: var(--c-pl); }

/* block-bg / block-dark: блок красит текст только в своей подложке (пояснение архива) */
.block-dark .case-showcase__subtitle, .block-dark .case-showcase__meta, .block-dark .case-showcase__client { color: var(--ci); }
.block-dark .case-showcase__facts dt { color: var(--cas); }
.block-bg .case-showcase__note { background: var(--cw); }

@media (prefers-reduced-motion: reduce) {
  .case-showcase__plate, .case-showcase__shot { transition: none; }
  .case-showcase__shot { transform: none !important; }
  .case-showcase__item:hover .case-showcase__plate { transform: none; }
}

@media (max-width: 1024px) {
  .case-showcase__list--mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-showcase__list--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .case-showcase__list { grid-template-columns: minmax(0, 1fr); gap: var(--i-xl); }
  .case-showcase__item--wide, .case-showcase__item--wide-rev { grid-template-columns: minmax(0, 1fr); gap: var(--i-md); }
  .case-showcase__item--wide-rev .case-showcase__plate { order: 0; }
  .case-showcase__frame { padding: 14rem 22rem; }
  .case-showcase__links .button--text, .case-showcase__filters .button { min-height: 44rem; }
  .case-showcase__list--mosaic { grid-template-columns: minmax(0, 1fr); }
  .case-showcase__list--grid { grid-template-columns: minmax(0, 1fr); }
  .case-showcase__item--big { grid-column: auto; }
  .case-showcase__item--tall .case-showcase__plate { aspect-ratio: 16 / 10; }
  .case-showcase__item--tall .case-showcase__laptop { top: 11%; }
  .case-showcase__item--tall .case-showcase__phone { width: 22%; }
  .case-showcase__archive-toggle { margin-left: 0; }
}

/* Одна внутренняя ссылка на кейс растянута по карточке; внешний сайт остаётся отдельным. */
.case-showcase__item { position: relative; }
.b-sinega_case_showcase .case-showcase__primary { position: static; overflow: visible; }
.case-showcase__primary::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--r-card); cursor: pointer; }
.case-showcase__external { position: relative; z-index: 2; }
.case-showcase__item:has(:focus-visible) { outline: 2px solid var(--caf-strong); outline-offset: 4rem; border-radius: var(--r-card); }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .case-showcase__phone { transition: right 700ms var(--a-tfunc); }
  .case-showcase__item:hover .case-showcase__plate:has(.case-showcase__laptop) .case-showcase__phone { right: 1%; }
}

.b-sinega_case_showcase .case-showcase__primary:focus:not(:focus-visible),
.b-sinega_case_showcase .case-showcase__external:focus:not(:focus-visible) { outline: none; box-shadow: none; }


/* Source: question.css */
.b-question .question-heading {
    margin-top: 0;
    margin-bottom: var(--i-xl);
}

.b-question .question-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: var(--i-md);
}

.b-question .card-details.question {
    min-width: 0;
    overflow: hidden;
    padding: 0;
    border: 1px solid var(--ci);
    border-radius: var(--c-md);
    background: var(--cbg-card);
    box-shadow: var(--s-sm);
}

.b-question .question-summary {
    display: flex;
    min-height: calc(var(--i-xl) + var(--i-sm));
    padding: var(--i-sm) var(--i-md);
    align-items: center;
    justify-content: space-between;
    gap: var(--i-md);
    color: var(--cf);
    cursor: pointer;
    font-size: var(--fs-h4);
    font-weight: 600;
    list-style: none;
}

.b-question .question-summary::-webkit-details-marker {
    display: none;
}

.b-question .question-summary:focus-visible {
    outline: 1px solid var(--caf);
    outline-offset: -1px;
}

.b-question .question-toggle {
    width: var(--i-sm);
    height: var(--i-sm);
    flex: 0 0 var(--i-sm);
    color: var(--caf);
    transform: rotate(45deg);
    transition: transform var(--a-time) var(--a-tfunc);
}

.b-question .question[open] .question-toggle {
    transform: rotate(0);
}

.b-question .question-answer {
    padding: 0 var(--i-md) var(--i-md);
    color: var(--cf);
    font-size: var(--fs-p);
    line-height: 1.45;
}

.b-question .question-answer > :first-child {
    margin-top: 0;
}

.b-question .question-answer > :last-child {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .b-question .question-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 480px) {
    .b-question .question-summary {
        padding: var(--i-sm);
    }

    .b-question .question-answer {
        padding: 0 var(--i-sm) var(--i-sm);
    }
}


/* Source: content.css */



/* Source: block.css */
/* quiz — пошаговый расчёт стоимости. Только токены и rem (px только у линий 1px).
   Поля, радио-«пилюли», согласие и статус отправки — классы форм ядра (.mx-form*, tokens/fields.css). */

.b-sinega_quiz { position: relative; overflow: hidden; isolation: isolate; color: var(--cf); }
.quiz__mesh {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(40% 60% at 88% 18%, #eea2a2 0%, transparent 72%),
    radial-gradient(40% 60% at 12% 84%, #b49fda 0%, transparent 72%),
    radial-gradient(44% 60% at 28% 12%, #7ac5d8 0%, transparent 72%),
    radial-gradient(40% 55% at 72% 96%, #57c6e1 0%, transparent 70%),
    #bbc1bf;
}

.b-sinega_quiz > .container { position: static; }   /* mesh позиционируется от секции */
.quiz { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--i-xl); align-items: start; }
.quiz__intro { display: flex; flex-direction: column; align-items: flex-start; gap: var(--i-md); min-width: 0; }
.quiz__title { margin: 0; font-size: var(--fs-h2); line-height: 1.2; }
.quiz__subtitle { margin: var(--i-esm) 0 0; font-size: var(--fs-h4); line-height: 1.45; text-wrap: pretty; }
.b-sinega_quiz .quiz__intro .main-button.c3 .main-link { background: var(--cw); }

/* рамка из КП: на mesh точки белые */
.quiz__frame { position: relative; isolation: isolate; display: inline-flex; padding: 20rem 36rem; border-radius: var(--r-card); }
.quiz__page-heading { display: flex; flex-direction: column; align-items: flex-start; gap: var(--i-md); }
.quiz__page-heading .block-page-heading__crumbs { font-size: var(--fs-sm); line-height: 1.4; }
.quiz__frame::before {
  content: ""; position: absolute; inset: 0; padding: 2rem; border-radius: inherit; pointer-events: none;
  background: linear-gradient(120deg, var(--caf), var(--cas) 45%, var(--cal));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.quiz__dots { position: absolute; top: -26rem; left: -26rem; z-index: -1; width: 72rem; height: 72rem; color: var(--caf); pointer-events: none; background-image: radial-gradient(currentColor 1.6rem, transparent 1.9rem); background-size: 12rem 12rem; }
.quiz__dots--end { top: auto; left: auto; right: -26rem; bottom: -26rem; color: var(--cas); }
.b-sinega_quiz:has(.quiz__mesh) .quiz__dots { color: var(--cw); }

/* карточка */
.quiz__card { min-width: 0; padding: var(--i-lg); border-radius: var(--r-modal); background: var(--cbg-card); box-shadow: var(--s-lg); color: var(--cf); }
.quiz__progress { display: flex; justify-content: space-between; align-items: baseline; gap: 12rem; font-size: var(--fs-sm); }
.quiz__label { font-weight: 600; }
.quiz__percent { color: var(--c-pl); }
.quiz__bar { height: 6rem; margin-top: 10rem; overflow: hidden; border-radius: var(--r-pill); background: var(--cil); }
.quiz__bar-fill { display: block; height: 100%; background: var(--gr-f); transform: scaleX(var(--p, .04)); transform-origin: left center; transition: transform 400ms cubic-bezier(.2, .7, .2, 1); }
.quiz__steps { margin-top: var(--i-md); min-height: 300rem; }
.quiz__step { min-width: 0; margin: 0; padding: 0; border: 0; }
.quiz__step[hidden] { display: none; }
.quiz__question { display: block; margin: 0 0 var(--i-md); padding: 0; }
.quiz__options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--i-esm); }
.quiz__opt {
  display: flex; align-items: center; gap: 12rem; min-height: var(--field-h); padding: 12rem 16rem; box-sizing: border-box; text-align: left;
  border: 1px solid var(--field-border); border-radius: var(--r-field); background: var(--cfbg); color: var(--cf);
  font-family: inherit; font-size: var(--fs-p); line-height: 1.35; cursor: pointer;
  transition: border-color var(--a-time) var(--a-tfunc), background-color var(--a-time) var(--a-tfunc), box-shadow var(--a-time) var(--a-tfunc);
}
.quiz__opt:hover { border-color: var(--field-border-hover); }
.quiz__opt:focus-visible { outline: none; box-shadow: var(--field-ring); }
.quiz__option-text { display: grid; gap: 3rem; }
.quiz__option-hint { color: var(--cal); font-size: var(--fs-sm); }
.quiz__mark { flex: 0 0 auto; display: grid; place-items: center; width: 22rem; height: 22rem; box-sizing: border-box; border: 1.5px solid var(--field-border-hover); border-radius: 50%; }
.quiz__mark .icon { width: 14rem; height: 14rem; opacity: 0; transform: scale(.6); transition: opacity 180ms ease-out, transform 180ms ease-out; }
.quiz__opt[data-picked="true"] { border-color: var(--caf-strong); background: color-mix(in srgb, var(--caf) 8%, var(--cfbg)); box-shadow: inset 0 0 0 1px var(--caf-strong); }
.quiz__opt[data-picked="true"] .quiz__mark { border-color: var(--caf-strong); background: var(--caf-strong); color: var(--cw); }
.quiz__opt[data-picked="true"] .quiz__mark .icon { opacity: 1; transform: none; }
.quiz__next { margin-top: var(--i-md); }
.quiz__nav { display: flex; align-items: center; min-height: 28rem; margin-top: var(--i-md); }

/* без JS: все шаги списком */
.b-sinega_quiz:not(.is-ready) .quiz__step[hidden] { display: block; margin-top: var(--i-lg); }
.b-sinega_quiz:not(.is-ready) .quiz__progress, .b-sinega_quiz:not(.is-ready) .quiz__bar, .b-sinega_quiz:not(.is-ready) .quiz__next { display: none; }

@media (prefers-reduced-motion: reduce) {
  .quiz__opt, .quiz__mark .icon, .quiz__bar-fill { transition: none; }
}

@media (max-width: 768px) {
  .quiz { grid-template-columns: minmax(0, 1fr); gap: var(--i-lg); }
  .quiz__options { grid-template-columns: minmax(0, 1fr); }
  .quiz__card { padding: var(--i-md); }
  .quiz__frame { padding: 14rem 22rem; }
  .quiz__nav .button--text { min-height: 44rem; }
}


/* Source: sinega.css */
/* Синега.рф — resources/css/site-custom/sinega.css (подключается последним).
   Только то, что не решается токенами пресета и полями блоков. Токены стиля — в preset.json → tokens. */

:root { --section-pad: 60rem; }

/* 1. Кнопка c1 с градиентом --gr-f (узнаваемость текущего сайта). На --caf текст тёмный --cf (≈6:1). */
.main-button.c1 .main-link { background: var(--gr-f); border-color: transparent; color: var(--cf); box-shadow: var(--s-baf); transition: transform var(--a-time) var(--a-tfunc), box-shadow var(--a-time) var(--a-tfunc); }
.main-button.c1 .main-link:hover { background: var(--gr-f); border-color: transparent; color: var(--cf); transform: translateY(-2rem); box-shadow: var(--s-md); }
.block-dark .main-button.c1 .main-link { color: var(--cf); }
.main-button.c1 .main-link.is-loading::after { border-color: var(--cf); border-right-color: transparent; }
.b-split_feature .main-button.c1 .main-link,
.b-sinega_hero_sketch .main-button.c1 .main-link,
.b-text_pic.block-dark .main-button.c1 .main-link,
.b-callus .main-button.c1 .main-link { background: var(--gr-f); border-color: transparent; color: var(--cf); }

/* 2. Типовые карточки: подъём при наведении */
.b-tariffs .mx-grid > div > .mx-tone-light { transition: transform var(--a-time) var(--a-tfunc), box-shadow var(--a-time) var(--a-tfunc); }
.b-tariffs .mx-grid > div > .mx-tone-light:hover { transform: translateY(-4rem); box-shadow: var(--s-md); }

/* 3. about_figures: моноширинные цифры для досчёта (count-up.js) */
.about-figures__value { font-variant-numeric: tabular-nums; }

/* Быстрое проявление; первый экран и reduced-motion видны сразу. */
[data-aos][data-aos][data-aos] { transition-duration: 300ms !important; transition-delay: 80ms !important; }
html:not(.no-js) [data-aos^="fade"]:not(.aos-animate) { transform: translate3d(0, 16rem, 0) !important; }
html:not(.no-js) [data-aos^="zoom"]:not(.aos-animate) { transform: scale(.98) !important; }
html:not(.no-js) [data-aos^="slide"]:not(.aos-animate) { transform: translate3d(0, 16rem, 0) !important; }
[data-aos][data-aos][data-aos][data-site-aos-immediate] { opacity: 1 !important; visibility: visible !important; transform: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  [data-aos][data-aos][data-aos][data-aos] { opacity: 1 !important; visibility: visible !important; transform: none !important; transition: none !important; animation: none !important; }
}

/* 4. Сворачивание длинного SEO-текста (content-fold.js) */
.b-content.is-folded:not(.is-open) .mx-richtext { max-height: 264rem; overflow: hidden; -webkit-mask-image: linear-gradient(#000 45%, transparent); mask-image: linear-gradient(#000 45%, transparent); }
.content-fold__toggle { margin-top: var(--i-sm); }

/* 5. Область нажатия на телефоне не меньше 44px */
@media (max-width: 768px) {
  .button.button--text { min-height: 44rem; display: inline-flex; align-items: center; }
  .site-footer__phone { display: inline-flex; align-items: center; min-height: 44rem; }
}

@media (prefers-reduced-motion: reduce) {
  .main-button.c1 .main-link, .b-tariffs .mx-grid > div > .mx-tone-light { transition: none; }
  .main-button.c1 .main-link:hover, .b-tariffs .mx-grid > div > .mx-tone-light:hover { transform: none; }
}

/* Общая шапка и подвал всех страниц сайта. Название и подпись — HTML ядра №19. */
.site-header__row { min-height: 96rem; gap: 32rem; }
.site-header--identity .site-logo { width: 38rem; flex: 0 0 38rem; }
.site-header .site-logo img,
.site-footer .site-logo img { width: 38rem; height: 38rem; object-fit: contain; }
.site-header--identity .site-header__identity { flex: 0 0 auto; gap: 2rem; white-space: nowrap; }
.site-header--identity .site-header__identity strong { color: var(--caf-strong); font-size: 18rem; line-height: 1.2; }
.site-header--identity .site-header__identity span { color: var(--c-pl); font-size: 10rem; }
.site-header__desktop-menu > ul { justify-content: space-between; gap: 18rem; }
.site-header__desktop-menu { flex: 1 1 auto; max-width: none; margin-left: 0; }
.site-header__desktop-menu > ul > li > a { font-size: 14rem; }
.site-header__row > .site-header__messengers { order: 3; margin-left: 0; }
.site-header__contacts { order: 4; margin-left: 0; }
.site-header .site-header__phone { color: var(--cf); font-size: 20rem; font-weight: 700; }
.site-header__toggle { border: 0; border-radius: 0; }
.site-footer--identity .site-identity { gap: 2rem; white-space: nowrap; }
.site-footer--identity .site-identity strong { color: var(--caf-strong); font-size: 18rem; line-height: 1.2; }
.site-footer--identity .site-identity span { color: var(--c-pl); font-size: 10rem; }

@media (min-width: 1025px) {
  .site-header--identity .site-logo { width: 49.4rem; flex-basis: 49.4rem; }
  .site-header .site-logo img { width: 49.4rem; height: 49.4rem; }
  .site-header--identity .site-header__identity strong { font-size: 23.4rem; }
  .site-header--identity .site-header__identity span { font-size: 13rem; }
  .site-header__desktop-menu > ul { gap: 32rem; }
  .site-header__desktop-menu > ul > li > a { font-size: 19rem; }
}

/* Оба списка из четырёх услуг используют раскладку media. Заголовок и его
   отступ различаются, но в настройках блока нет именованного варианта:
   три точечных правила ниже ждут задачу ядра о стилях секции. */
#b-tariffs-home-tariffs-1 .tariffs-heading { font-size: var(--fs-h1); }
#b-tariffs-home-tariffs-1 .tariffs-head { margin-bottom: 20rem; }
#b-tariffs-services-tariffs-1 .tariffs-head { margin-bottom: 24rem; }
.b-tariffs:has(.tariffs-grid--media) .tariffs-grid { gap: var(--i-md); }
.b-tariffs:has(.tariffs-grid--media) .tariff-card { gap: 0; padding: 0 0 32rem; border-radius: 18rem; box-shadow: none; overflow: hidden; }
.b-tariffs:has(.tariffs-grid--media) .tariff-card__media { margin: 0; border-radius: 0; }
.b-tariffs:has(.tariffs-grid--media) .tariff-card__media img { display: block; aspect-ratio: 16 / 9; object-fit: cover; }
.b-tariffs:has(.tariffs-grid--media) .tariff-card__body { display: flex; gap: 16rem; padding: 42rem 24rem 0; }
.b-tariffs:has(.tariffs-grid--media) .tariff-card__name,
.b-tariffs:has(.tariffs-grid--media) .tariff-card__price { text-align: left; }
.b-tariffs:has(.tariffs-grid--media) .tariff-card__name { order: 0; min-height: 32rem; font-size: 23rem; }
.b-tariffs:has(.tariffs-grid--media) .tariff-card__price { order: 1; color: var(--cf); }
.b-tariffs:has(.tariffs-grid--media) .tariff-card__price span { font-size: 25rem; line-height: 1.1; letter-spacing: -.035em; white-space: nowrap; }
.b-tariffs:has(.tariffs-grid--media) .tariff-card__specs { order: 2; margin-top: 7rem; }
.b-tariffs:has(.tariffs-grid--media) .tariff-card > .main-button { align-self: flex-start; margin: 30rem 32rem 0; }
.b-tariffs:has(.tariffs-grid--media) .tariff-card > .main-button .main-link { border: 0; background: color-mix(in srgb, var(--caf) 16%, var(--cw)); color: var(--caf-strong); }

.b-about_figures .about-figures { gap: 60rem; justify-content: center; }
.b-about_figures .about-figures__media { flex: 0 0 48%; }
.b-about_figures .about-figures__content { flex: 1 1 auto; max-width: 1000rem; }
.b-about_figures .about-figures__eyebrow::before { display: none; }
.b-about_figures .about-figures__text { max-width: none; color: var(--cf); font-size: 16rem; line-height: 1.5; }
.b-about_figures .about-figures__text blockquote { margin: 22rem 0; padding-left: 20rem; border-left: 3px solid var(--caf); font-style: italic; }
.b-about_figures .about-figures__list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); width: 100%; gap: 30rem; margin-top: 28rem; }
.b-about_figures .about-figures__item { padding-top: 22rem; border-top: 1px solid var(--caf); }
.b-about_figures .about-figures__value { font-size: 38rem; }

.b-split_feature.block-bg:has(.split-feature--left-richtext.split-feature--split) .split-feature { grid-template-columns: minmax(0,1fr) minmax(0,1.18fr); }
.b-split_feature.block-bg:has(.split-feature--left-richtext.split-feature--split) .split-feature__title { max-width: 700rem; }
.b-split_feature.block-bg:has(.split-feature--left-richtext.split-feature--split) .split-feature__copy { max-width: 700rem; color: var(--cf); font-size: 16rem; }
.b-split_feature.block-bg:has(.split-feature--left-richtext.split-feature--split) .split-feature__items--numbered .split-feature__marker { background: var(--caf-strong); }
.b-sinega_hero_sketch .hero-sketch__actions .icon,
.b-sinega_quiz .quiz__intro .main-button .icon { width: 20rem; height: 20rem; margin-right: 8rem; fill: currentColor; vertical-align: middle; }

.b-sinega_quiz [data-quiz-back][hidden] { display: none; }
.b-question .card-details.question { border-width: 1px; box-shadow: var(--s-sm); }
/* У главного SEO-блока свой узкий заголовок. Ни тип, ни настройки не дают
   именованного варианта для нового экземпляра. */
#b-content-home-content-1 .heading { max-width: 770rem; }
.b-content.is-folded:not(.is-open) .content-text { max-height: 264rem; overflow: hidden; -webkit-mask-image: linear-gradient(#000 45%, transparent); mask-image: linear-gradient(#000 45%, transparent); }
.b-content.is-folded .content-fold__toggle { color: var(--caf-strong); }

.b-callus .callus-panel { grid-template-columns: minmax(0, 1fr) auto auto; gap: 28rem; padding: 0; border-radius: 0; background: transparent; }
.b-callus .callus-contact { flex-direction: row; }
.b-callus .callus-phone { color: var(--caf-strong); white-space: nowrap; }
.b-callus .callus-phone svg { display: none; }
.b-callus .callus-action .main-button,
.b-callus .callus-action .main-link { width: auto; white-space: nowrap; }
.b-callus.block-bg .callus-heading { white-space: normal; }
.b-callus.block-bg .callus-messengers .messenger { background: transparent; box-shadow: none; }

.b-split_feature .split-feature__copy { color: var(--cf); font-size: 16rem; }
.b-split_feature .split-feature__items--cards .split-feature__item { gap: 8rem; padding: 30rem; border: 1px solid var(--ci); border-radius: 18rem; }
.b-split_feature .split-feature__items--cards .split-feature__marker { display: none; }
.b-split_feature .split-feature__items--cards .split-feature__item-title { font-size: 23rem; }
.b-split_feature .split-feature__items--cards .split-feature__item-text { font-size: 16rem; }
.b-split_feature:has(.split-feature--split .split-feature__items--cols-2) .split-feature__copy { line-height: 1.5; }
.b-split_feature:has(.split-feature--split .split-feature__items--cols-2) .split-feature__items-title { color: var(--cf); font-size: 28rem; }
@media (min-width: 1025px) {
  .b-split_feature:has(.split-feature--split .split-feature__items--cols-2) .split-feature { grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr); gap: 20rem; }
}

.b-resource_showcase:has(.showcase__grid--grid) .showcase { position: relative; padding-bottom: 90rem; }
.b-resource_showcase:has(.showcase__grid--grid) .showcase__head { margin-bottom: 30rem; }
.b-resource_showcase:has(.showcase__grid--grid) .showcase__grid { --showcase-items: 3; gap: var(--i-md); }
.b-resource_showcase:has(.showcase__grid--grid) .showcase__media { aspect-ratio: 16 / 10; }
.b-resource_showcase:has(.showcase__grid--grid) .showcase__body { padding: 30rem; }
.b-resource_showcase:has(.showcase__grid--grid) .showcase__title { color: var(--cf); font-size: 54rem; }
.b-resource_showcase:has(.showcase__grid--grid) .showcase__title span { white-space: normal; overflow-wrap: anywhere; }
.b-resource_showcase:has(.showcase__grid--grid) .showcase__card-title { color: var(--cf); }
.b-resource_showcase:has(.showcase__grid--grid) .showcase__card-link { color: var(--caf-strong); }
.b-resource_showcase:has(.showcase__grid--grid) .showcase__all { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); padding: 14rem 30rem; border-radius: 12rem; background: color-mix(in srgb, var(--caf) 16%, var(--cw)); color: var(--caf-strong); }

.b-callus:not(.block-bg) > .container { padding-top: 50rem; padding-bottom: 120rem; }
.b-callus:not(.block-bg) .callus-copy { max-width: 550rem; gap: 0; }
.b-callus:not(.block-bg) .callus-heading { white-space: normal; }
.b-callus:not(.block-bg) .callus-subtitle { font-size: 20rem; line-height: 1.3; }
.b-callus:not(.block-bg) .callus-phone { font-size: 28rem; }
.b-callus:not(.block-bg) .callus-messengers .messenger { background: var(--cw); border: 1rem solid var(--c-line); box-shadow: none; }
@media (min-width: 1025px) {
  .b-callus:not(.block-bg) .callus-contact,
  .b-callus:not(.block-bg) .callus-action { transform: translateY(24rem); }
}

/* Один экземпляр шаблона Service на четырёх адресах: различается только
   содержимое и вид скетча. */
.b-tariffs:has(.tariffs-grid--cards) .tariffs-head { margin-bottom: 30rem; }
.b-tariffs:has(.tariffs-grid--cards) .tariffs-grid { gap: var(--i-md); }
.b-tariffs:has(.tariffs-grid--cards) .tariff-card { gap: 0; padding: 32rem; border-radius: 18rem; box-shadow: none; }
.b-tariffs:has(.tariffs-grid--cards) .tariff-card.is-highlighted { transform: none; box-shadow: var(--s-lg); }
.b-tariffs:has(.tariffs-grid--cards) .tariff-card__body { gap: 18rem; }
.b-tariffs:has(.tariffs-grid--cards) .tariff-card__name,
.b-tariffs:has(.tariffs-grid--cards) .tariff-card__price { text-align: left; }
.b-tariffs:has(.tariffs-grid--cards) .tariff-card__name { order: 0; }
.b-tariffs:has(.tariffs-grid--cards) .tariff-card__price { order: 1; color: var(--cf); }
.b-tariffs:has(.tariffs-grid--cards) .tariff-card.is-highlighted .tariff-card__price { color: var(--caf-strong); }
.b-tariffs:has(.tariffs-grid--cards) .tariff-card__price span { font-size: 50rem; line-height: 1.1; letter-spacing: -.035em; white-space: nowrap; }
.b-tariffs:has(.tariffs-grid--cards) .tariff-card__specs { order: 2; }
.b-tariffs:has(.tariffs-grid--cards) .tariff-card__features { order: 3; margin-top: 12rem; gap: 10rem; }
.b-tariffs:has(.tariffs-grid--cards) .tariff-card__features li { gap: 10rem; font-size: 14rem; }
.b-tariffs:has(.tariffs-grid--cards) .tariff-card__features svg { width: 14rem; height: 14rem; flex-basis: 14rem; }
.b-tariffs:has(.tariffs-grid--cards) .tariff-card__features li.is-excluded span { text-decoration: line-through; }
.b-tariffs:has(.tariffs-grid--cards) .tariff-card > .main-button { align-self: flex-start; margin-top: 28rem; }
.b-tariffs:has(.tariffs-grid--cards) .tariff-card > .main-button .main-link { border: 0; background: color-mix(in srgb, var(--caf) 16%, var(--cw)); color: var(--caf-strong); }
.b-tariffs:has(.tariffs-grid--cards) .tariff-card.is-highlighted > .main-button .main-link { background: var(--gr-f); color: var(--cf); }

.b-split_feature:has(.split-feature__items--numbered.split-feature__items--cols-auto) .split-feature__items--numbered { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32rem; }
.b-split_feature:has(.split-feature__items--numbered.split-feature__items--cols-auto) .split-feature__items--numbered .split-feature__marker { width: auto; min-width: 42rem; height: auto; min-height: 42rem; padding: 4rem 8rem; border-radius: 24rem; white-space: nowrap; font-size: 12rem; }
.b-question .question-heading span { white-space: normal; overflow-wrap: anywhere; }
.b-content.is-folded .content-text { overflow-wrap: anywhere; }
.b-content.is-folded .content-text img { max-width: 100%; height: auto; }

.site-footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, .7fr); }
.site-footer__logo { min-height: 40rem; }
.site-footer--identity .site-footer__logo .site-logo__link { width: 38rem; flex: 0 0 38rem; }
.site-footer__legal p { white-space: nowrap; }
.site-footer__navigation { align-items: flex-start; margin-left: 48rem; text-align: left; }
.site-footer__menu > ul { display: flex; flex-wrap: wrap; justify-content: flex-start; max-width: 445rem; gap: 12rem 25rem; text-align: left; }
.site-footer__social { justify-content: flex-start; margin-top: 16rem; }
.site-footer .site-footer__phone { color: var(--cf); font-size: 20rem; }
.site-footer .site-footer__contacts > a:not(.site-footer__phone) { color: var(--c-pl); font-size: var(--fs-sm); }
@media (max-width: 1600px) and (min-width: 769px) {
  .site-footer__menu > ul { max-width: 360rem; }
}

@media (max-width: 1024px) {
  .site-header__row { min-height: 72rem; gap: 20rem; }
  .b-callus .callus-panel { grid-template-columns: minmax(0, 1fr); text-align: left; }
  .b-callus.block-bg .callus-heading,
  .b-callus:not(.block-bg) .callus-heading { white-space: normal; }
  .b-callus .callus-contact,
  .b-callus .callus-action { justify-content: flex-start; }
  .b-split_feature:has(.split-feature__items--numbered.split-feature__items--cols-auto) .split-feature__items--numbered { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .b-split_feature.block-bg:has(.split-feature--left-richtext.split-feature--split) .split-feature { grid-template-columns: minmax(0,1fr); }
}

@media (max-width: 480px) {
  .b-callus:not(.block-bg) > .container { padding-top: 0; padding-bottom: 72rem; }
  .b-callus:not(.block-bg) .callus-subtitle { max-width: 360rem; font-size: 22rem; }
  .b-callus:not(.block-bg) .callus-action { margin-top: 24rem; }
}
@media (max-width: 768px) {
  .site-header--identity .site-logo { width: 38rem; flex-basis: 38rem; }
  .site-footer__grid { grid-template-columns: minmax(0, 1fr); gap: calc(var(--i-lg) + 9rem); }
  .site-footer__navigation,
  .site-footer__social,
  .site-footer__menu > ul { justify-content: center; text-align: center; }
  .site-footer__navigation { align-items: center; margin-left: 0; }
  .site-footer__menu > ul { max-width: 330rem; }
  .site-footer__social { margin-top: 0; }
  .site-footer__legal p { white-space: normal; }
  .b-tariffs:has(.tariffs-grid--media) .tariff-card__body { padding: 25rem 25rem 0; }
  .b-tariffs:has(.tariffs-grid--media) .tariff-card > .main-button { margin-inline: 25rem; }
  .b-tariffs:has(.tariffs-grid--cards) .tariff-card { padding: 25rem; }
  .b-resource_showcase:has(.showcase__grid--grid) .showcase__grid { --showcase-items: 2; }
  .b-about_figures .about-figures { gap: var(--i-lg); }
  .b-about_figures .about-figures__media { flex-basis: auto; }
  .b-about_figures .about-figures__list { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28rem; }
  .b-text_pic.block-dark .text-pic-media { flex: 0 0 auto; min-height: 0; aspect-ratio: 4 / 3; }
  .b-text_pic.block-dark .text-pic-media img { display: block; width: 100%; height: 100%; object-fit: contain; }
  .b-text_pic.block-dark .text-pic-content { position: relative; z-index: 2; flex: 0 0 auto; margin-top: -40rem; }
}
@media (max-width: 480px) {
  .page-heading h1 { overflow-wrap: anywhere; }
  .b-resource_showcase:has(.showcase__grid--grid) .showcase__title { font-size: 36rem; }
  .b-split_feature:has(.split-feature__items--numbered.split-feature__items--cols-auto) .split-feature__items--numbered { grid-template-columns: minmax(0, 1fr); }
  .b-resource_showcase:has(.showcase__grid--grid) .showcase__grid { --showcase-items: 1; }
  .b-text_pic.block-dark .text-pic-content { margin-top: -150rem; }
}

/* Текст статьи и колонку оформляет sinega_post_body. */

/* Списки небольших разделов: горизонтальные карточки варианта compact. */
.b-resource_showcase:has(.showcase__grid--compact) .showcase__title { color: var(--cf); font-size: var(--fs-h1); }
.b-resource_showcase:has(.showcase__grid--compact) .showcase__grid { --showcase-items: 2; gap: var(--i-md); }
.b-resource_showcase:has(.showcase__grid--compact) .showcase__card { flex-direction: row; border: 1px solid var(--ci); border-radius: 20rem; box-shadow: none; }
.b-resource_showcase:has(.showcase__grid--compact) .showcase__media { flex: 0 0 160rem; width: 160rem; aspect-ratio: 1; }
.b-resource_showcase:has(.showcase__grid--compact) .showcase__body { min-width: 0; padding: 30rem; }
.b-resource_showcase:has(.showcase__grid--compact) .showcase__card-title { color: var(--cf); font-size: 22rem; line-height: 1.3; }
.b-resource_showcase:has(.showcase__grid--compact) .showcase__card-description { font-size: 16rem; line-height: 1.5; }
.b-resource_showcase:has(.showcase__grid--compact) .showcase__card-link { color: var(--caf-strong); }
.b-resource_showcase:has(.showcase__grid--compact) .showcase__all { color: var(--caf-strong); }
.b-resource_showcase:has(.showcase__grid--grid):not(:has(.showcase__all)) .showcase { padding-bottom: 0; }

/* Варианты ядра различимы типом и настройками, оформление остаётся общим. */
.b-benefits:not(.block-bg):not(.block-dark) { background: var(--cbg); }
.b-benefits .benefits-heading { text-align: left; margin-bottom: 30rem; }
.b-benefits .benefit-card { padding: 30rem; border: 1px solid var(--ci); border-radius: 18rem; box-shadow: none; }
.b-benefits .benefit-card__icon { background: var(--cil); color: var(--caf-strong); border: 0; }
.b-split_feature:has(.split-feature--split .split-feature__items--cols-1) .split-feature { grid-template-columns: minmax(0, .91fr) minmax(0, 1.09fr); }
.b-split_feature:has(.split-feature--split .split-feature__items--cols-1) .split-feature__items-title { color: var(--cf); font-size: 28rem; line-height: 1.3; margin-bottom: 22rem; }
.b-split_feature:has(.split-feature--split .split-feature__items--cols-1) .split-feature__item-title { font-size: 22rem; line-height: 1.3; }
.b-split_feature:has(.split-feature--split .split-feature__items--cols-1) .split-feature__item-text { font-size: 16rem; line-height: 1.5; }
.b-split_feature:has(.split-feature__items--numbered.split-feature__items--cols-1) .split-feature__marker { background: var(--caf-strong); }
.b-split_feature:has(.split-feature__items--numbered.split-feature__items--cols-1) .main-link { font-size: var(--btn-fs); padding: 18rem 34rem; }
.b-callus.block-bg .callus-copy { min-width: 0; gap: var(--i-sm); }

@media (max-width: 1024px) {
  .b-split_feature:has(.split-feature--split .split-feature__items--cols-1) .split-feature { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .b-resource_showcase:has(.showcase__grid--compact) .showcase__grid { --showcase-items: 1; }
  .b-resource_showcase:has(.showcase__grid--compact) .showcase__body { padding: var(--i-md); }
  .b-resource_showcase:has(.showcase__grid--compact) .showcase__media { flex-basis: 120rem; width: 120rem; }
}
@media (max-width: 480px) {
  .b-resource_showcase:has(.showcase__grid--compact) .showcase__title { font-size: 36rem; }
  .b-resource_showcase:has(.showcase__grid--compact) .showcase__card-title { font-size: var(--fs-h4); overflow-wrap: anywhere; }
}
.b-benefits .benefit-card__description { font-size: 16rem; line-height: 1.5; }
.b-benefits .benefit-card__icon { width: 56rem; height: 56rem; }
.b-split_feature > .container.p-sm { padding-top: calc(var(--section-pad) * var(--section-k)) !important; }
.b-resource_showcase:has(.showcase__grid--compact) .showcase__head { margin-bottom: 40rem; }
.b-text_pic .text-pic-copy { font-size: 16rem; line-height: 1.5; }
.b-text_pic .text-pic-content { gap: var(--i-sm); }
.b-text_pic .heading { margin-bottom: 0; }

/* Прозрачные углы SVG показывают фон секции, а не светлую подложку media. */
.b-text_pic .text-pic-media:has(img[src$=".svg"]) { background: transparent; }

/* ТЗ-022: одна штатная ссылка «Подробнее» покрывает media-карточку.
   Пакеты cards с выбором квиза сохраняют обычную кнопку. */
.b-tariffs .tariffs-grid--media .tariff-card { position: relative; cursor: pointer; transition: box-shadow var(--a-time) var(--a-tfunc); }
.b-tariffs .tariffs-grid--media .tariff-card > .main-button,
.b-tariffs .tariffs-grid--media .tariff-card > .main-button .main-link { position: static; overflow: visible; }
.b-tariffs .tariffs-grid--media .tariff-card > .main-button .main-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.b-tariffs .tariffs-grid--media .tariff-card:hover { box-shadow: var(--s-md); }
.b-tariffs .tariffs-grid--media .tariff-card:focus-within { outline: 2px solid var(--caf-strong); outline-offset: 4rem; }

.b-tariffs .tariff-card__price small { display: block; margin-top: 4rem; }

/* Шапка сайта: единая ссылка, меню из дерева страниц, доступный dropdown. */
.sinega-brand { display: flex; align-items: center; gap: 20rem; flex: 0 0 auto; text-decoration: none; }
.site-header__desktop-menu > ul { width: 100%; }
.site-header__desktop-menu li > ul { left: var(--sinega-dropdown-shift, 0px); width: max-content; min-width: 300rem; max-width: calc(100vw - 32rem); padding: 20rem; border: 0; border-radius: var(--r-card); background: var(--cw); box-shadow: var(--s-lg); }
.site-header__desktop-menu li > ul a { display: block; padding: 12rem; color: var(--caf-strong); font-size: var(--fs-h4); line-height: 1.3; white-space: nowrap; text-decoration: none; border-radius: var(--r-button); }
.site-header__desktop-menu li > ul a:hover { background: var(--cil); }
.site-header__desktop-menu.is-enhanced li:not(.is-open) > ul { display: none; }
.site-header__desktop-menu.is-enhanced li.is-open > ul { display: grid; gap: 4rem; }
@media (max-width: 1024px) { .sinega-brand { gap: 20rem; } }

/* Движется только вынесенный слой фона: один бесшовный цикл 18 секунд. */
@keyframes sinega-gradient-flow { 0%, 100% { transform: translate3d(-6%, -4%, 0); } 50% { transform: translate3d(6%, 4%, 0); } }
.hero-sketch__mesh-layer, .cms-demo__mesh, .quiz__mesh { animation: sinega-gradient-flow 18s ease-in-out infinite; will-change: transform; }
.cms-demo__mesh, .quiz__mesh { inset: -20%; }
@media (prefers-reduced-motion: reduce) {
  .hero-sketch__mesh-layer, .cms-demo__mesh, .quiz__mesh { animation: none; will-change: auto; }
}