/* Start:/local/templates/maylina/css/main.css?1789482032113996*/
/**
 * Maylina — основной файл стилей сайта: шрифты, токены, база, шапка, подвал, общие блоки.
 * Подключается через Asset::getInstance()->addCss() в header.php.
 * Стили компонентов — в шаблонах компонентов; стили контента — в styles.css.
 * Правила и эталонная разметка: .claude/rules/design-system.md, docs/design/.
 */

/* ── Шрифты (самохостинг, вариативные woff2) ─────────────────────── */

/* Cormorant Garamond — заголовки, названия, крупные цифры */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("/local/templates/maylina/css/../fonts/cormorant-garamond-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("/local/templates/maylina/css/../fonts/cormorant-garamond-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("/local/templates/maylina/css/../fonts/cormorant-garamond-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("/local/templates/maylina/css/../fonts/cormorant-garamond-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: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 400;
  font-display: swap;
  src: url("/local/templates/maylina/css/../fonts/cormorant-garamond-italic-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 400;
  font-display: swap;
  src: url("/local/templates/maylina/css/../fonts/cormorant-garamond-italic-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 400;
  font-display: swap;
  src: url("/local/templates/maylina/css/../fonts/cormorant-garamond-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 400;
  font-display: swap;
  src: url("/local/templates/maylina/css/../fonts/cormorant-garamond-italic-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;
}

/* Jost — основной текст, цены, кнопки */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("/local/templates/maylina/css/../fonts/jost-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("/local/templates/maylina/css/../fonts/jost-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("/local/templates/maylina/css/../fonts/jost-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;
}

/* Mulish — навигация, мелкие подписи-капсы */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 200 400;
  font-display: swap;
  src: url("/local/templates/maylina/css/../fonts/mulish-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 200 400;
  font-display: swap;
  src: url("/local/templates/maylina/css/../fonts/mulish-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 200 400;
  font-display: swap;
  src: url("/local/templates/maylina/css/../fonts/mulish-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 200 400;
  font-display: swap;
  src: url("/local/templates/maylina/css/../fonts/mulish-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;
}

/* ── Корзина и избранное (cart-*): общие стили страниц /personal/cart/ и
   /personal/favorites/ — два шаблона sale.basket.basket делят одну разметку строк,
   поэтому стили живут здесь, а не в шаблонах. ── */
.cart-page {
  padding: 36px var(--pad-x-wide) 96px;
  max-width: 1240px;
  margin: 0 auto;
}

.cart-page__title {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(34px, 4.33vw, 52px);
  line-height: 1.05;
  letter-spacing: .01em;
  color: var(--c-ink);
}

.cart-page__count {
  margin-top: 12px;
  font-family: var(--f-caps);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.cart-page__warning {
  margin-top: 22px;
  padding: 14px 18px;
  border: 1px solid color-mix(in srgb, var(--c-sale) 35%, transparent);
  font-family: var(--f-text);
  font-weight: 300;
  font-size: 13px;
  color: var(--c-sale);
}

/* Пустая корзина — по макету: по центру, без заголовка страницы */
.cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 140px 40px 100px;
}

.cart-empty__caps {
  font-family: var(--f-caps);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--c-ink);
}

.cart-empty__text {
  margin-top: 18px;
  font-family: var(--f-text);
  font-weight: 300;
  font-size: 16px;
  color: var(--c-muted);
}

.cart-empty__btn {
  margin-top: 40px;
  border: 1px solid var(--c-green);
  color: var(--c-green);
  padding: 16px 44px;
  font-family: var(--f-caps);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  transition: background .25s ease, color .25s ease;
}

.cart-empty__btn:hover {
  background: var(--c-green);
  color: var(--c-cream);
}

/* Строки */
.cart {
  margin-top: 48px;
}

.cart-item {
  display: grid;
  grid-template-columns: 96px 1fr auto auto 32px;
  gap: 32px;
  align-items: center;
  padding: 28px 0;
  border-top: 1px solid var(--c-line);
}

.cart-item:last-child {
  border-bottom: 1px solid var(--c-line);
}

.cart-item.is-unavailable {
  opacity: .5;
}

.cart-item__media {
  display: block;
  background: var(--c-bg-warm);
}

.cart-item__media img {
  width: 96px;
  height: 120px;
  object-fit: cover;
  object-position: 50% 20%;
  display: block;
}

.cart-item__name {
  display: block;
  font-family: var(--f-display);
  font-size: 21px;
  line-height: 1.25;
  color: var(--c-ink);
  transition: opacity var(--t-fast);
}

.cart-item__name:hover {
  opacity: .6;
}

.cart-item__opt {
  margin-top: 5px;
  font-family: var(--f-text);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: .05em;
  color: var(--c-muted);
}

.cart-item__price {
  margin-top: 12px;
  font-family: var(--f-text);
  font-weight: 300;
  font-size: 13px;
  color: var(--c-muted);
}

.cart-item__qty {
  display: flex;
  align-items: center;
  border: 1px solid var(--c-ctrl-line);
}

.cart-item__qty-btn {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-text);
  font-weight: 300;
  font-size: 18px;
  color: var(--c-text);
  transition: background var(--t-fast);
}

.cart-item__qty-btn:hover {
  background: var(--c-bg-warm);
}

.cart-item__qty-input {
  width: 44px;
  height: 38px;
  border: 0;
  border-left: 1px solid var(--c-ctrl-line);
  border-right: 1px solid var(--c-ctrl-line);
  background: none;
  text-align: center;
  font-family: var(--f-text);
  font-weight: 400;
  font-size: 15px;
  color: var(--c-ink);
  -moz-appearance: textfield;
  appearance: textfield;
}

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

.cart-item__sum {
  min-width: 110px;
  text-align: right;
  font-family: var(--f-text);
  font-weight: 400;
  font-size: 16px;
  color: var(--c-ink);
}

.cart-item__remove {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-ctrl-line);
  transition: color var(--t-fast);
}

.cart-item__remove:hover {
  color: var(--c-ink);
}

/* Итог под списком (по макету): слева «продолжить покупки», справа блок 320px */
.cart__foot {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  margin-top: 44px;
}

.cart__continue {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding-top: 8px;
  font-family: var(--f-caps);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-muted);
  transition: color var(--t-fast);
}

.cart__continue:hover {
  color: var(--c-green);
}

.cart__summary {
  width: 320px;
}

.cart__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.cart__total-label {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 25px;
  color: var(--c-ink);
}

.cart__total-value {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 37px;
  line-height: 1;
  color: var(--c-ink);
}

.cart__order {
  width: 100%;
  margin-top: 26px;
  padding: 18px;
  font-family: var(--f-caps);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-cream);
  background: var(--c-green);
  transition: background .3s ease;
}

.cart__order:hover {
  background: var(--c-green-dark);
}

.cart__note {
  margin-top: 16px;
  text-align: center;
  font-family: var(--f-text);
  font-weight: 300;
  font-size: 11px;
  line-height: 1.6;
  color: var(--c-muted-2);
}

/* Адаптив */
@media (max-width: 760px) {
  .cart-page { padding-top: 24px; padding-bottom: 56px; }

  /* Третья колонка держит и крестик, и сумму — поэтому auto, а не 32px:
     при жёстких 32 сумма (min-width 110) вылезала за край на 54px. Средняя —
     minmax(0, 1fr), чтобы длинное название не распирало строку. */
  .cart-item {
    grid-template-columns: 72px minmax(0, 1fr) auto;
    grid-template-areas:
      "media info remove"
      "media qty sum";
    column-gap: 16px;
    row-gap: 12px;
  }

  .cart-item__sum {
    min-width: 0;
  }

  .cart-item__media { grid-area: media; }
  .cart-item__media img { width: 72px; height: 90px; }
  .cart-item__info { grid-area: info; }
  .cart-item__qty { grid-area: qty; justify-self: start; }
  .cart-item__sum { grid-area: sum; align-self: center; }
  .cart-item__remove { grid-area: remove; }

  .cart__foot { flex-direction: column-reverse; }
  .cart__summary { width: 100%; }
  .cart__order { width: 100%; }
}

/* Избранное: строка без степпера/суммы, кнопка «В корзину». */
.cart-item:has(.cart-item__tocart) {
  grid-template-columns: 96px 1fr auto 32px;
}

.cart-item__tocart {
  padding: 13px 30px;
  font-family: var(--f-caps);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-green);
  border: 1px solid var(--c-green);
  transition: background var(--t-fast), color var(--t-fast);
}

.cart-item__tocart:hover {
  background: var(--c-green);
  color: var(--c-cream);
}

@media (max-width: 760px) {
  .cart-item:has(.cart-item__tocart) {
    grid-template-columns: 72px 1fr 32px;
    grid-template-areas:
      "media info remove"
      "media tocart tocart";
  }

  .cart-item__tocart { grid-area: tocart; justify-self: start; }
}

/* ── Авторизация (auth-*): одна центрированная колонка на четыре формы — вход,
   регистрация, восстановление и смена пароля (шаблоны system.auth.* и
   main.register). Эталон — docs/design/auth.dc.html («Maylina Вход»). ── */
.auth {
  display: flex;
  justify-content: center;
  padding: 90px var(--pad-x-wide) 120px;
}

.auth__card {
  width: 480px;
  max-width: 100%;
}

.auth__caps {
  text-align: center;
  font-family: var(--f-caps);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.auth__title {
  margin-top: 14px;
  text-align: center;
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(30px, 3.67vw, 44px);
  line-height: 1.05;
  letter-spacing: .01em;
  color: var(--c-ink);
}

.auth__hint {
  margin-top: 32px;
  text-align: center;
  font-family: var(--f-text);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-muted);
}

/* Нейтральные сообщения (письмо отправлено и т.п.) — тёплая плашка,
   ошибки — прежний акцентный тон */
.auth__flash {
  margin-top: 32px;
  padding: 16px 20px;
  background: var(--c-bg-warm);
  border: 1px solid var(--c-line);
  font-family: var(--f-text);
  font-weight: 300;
  font-size: 13px;
  color: var(--c-text);
}

.auth__error {
  margin-top: 32px;
  padding: 14px 18px;
  border: 1px solid color-mix(in srgb, var(--c-sale) 35%, transparent);
  font-size: 13px;
  color: var(--c-sale);
}

.auth__error font.errortext { color: inherit; }

.auth__card form {
  margin-top: 36px;
}

.auth__field {
  display: block;
  margin-top: 22px;
}

.auth__card form .auth__field:first-of-type {
  margin-top: 0;
}

.auth__label {
  display: block;
  font-family: var(--f-caps);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.auth__input {
  width: 100%;
  margin-top: 9px;
  padding: 13px 16px;
  border: 1px solid var(--c-ctrl-line);
  background: transparent;
  font-family: var(--f-text);
  font-weight: 300;
  font-size: 15px;
  color: var(--c-ink);
  transition: border-color var(--t-fast);
}

.auth__input::placeholder {
  color: var(--c-ctrl-line);
}

.auth__input:focus {
  outline: none;
  border-color: var(--c-green);
}

/* Строка «запомнить меня» + «забыли пароль?» (только вход) */
.auth__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 22px;
}

.auth__remember {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 300;
  font-size: 13px;
  color: var(--c-text);
  cursor: pointer;
}

/* Кастомный чекбокс: нативный input визуально скрыт, но фокусируем */
.auth__check-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.auth__check {
  width: 16px;
  height: 16px;
  border: 1px solid var(--c-ctrl-line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-fast), border-color var(--t-fast);
}

.auth__check svg {
  opacity: 0;
  transition: opacity var(--t-fast);
}

.auth__check-input:checked + .auth__check {
  background: var(--c-green);
  border-color: var(--c-green);
}

.auth__check-input:checked + .auth__check svg {
  opacity: 1;
}

.auth__check-input:focus-visible + .auth__check {
  border-color: var(--c-green);
}

.auth__row-link {
  font-weight: 300;
  font-size: 13px;
  color: var(--c-muted);
  transition: color var(--t-fast);
}

.auth__row-link:hover {
  color: var(--c-green);
}

.auth__submit {
  width: 100%;
  margin-top: 32px;
  padding: 17px;
  font-family: var(--f-caps);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-cream);
  background: var(--c-green);
  transition: background .3s ease;
}

.auth__submit:hover {
  background: var(--c-green-dark);
}

.auth__captcha {
  display: block;
  margin: 8px 0;
}

/* Переключатели форм под кнопкой: «Впервые у нас? · Зарегистрироваться» */
.auth__alt {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 10px;
  margin-top: 26px;
  font-weight: 300;
  font-size: 13px;
  color: var(--c-muted);
}

.auth__alt-dot {
  color: var(--c-ctrl-line);
}

.auth__alt a {
  color: var(--c-text);
  transition: color var(--t-fast);
}

.auth__alt a:hover {
  color: var(--c-green);
}

/* ── Личный кабинет (personal-*, orders-*, profile-*): хаб-плитки, список
   заказов и профиль по макету docs/design/personal.dc.html. ── */
.personal {
  padding: 36px var(--pad-x-wide) 96px;
  max-width: 1240px;
  margin: 0 auto;
}

.personal__title {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(34px, 4.33vw, 52px);
  line-height: 1.05;
  letter-spacing: .01em;
  color: var(--c-ink);
}

.personal__hello {
  margin-top: 12px;
  font-family: var(--f-text);
  font-weight: 300;
  font-size: 16px;
  color: var(--c-muted);
}

.personal__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 48px;
}

.personal__tile {
  display: block;
  padding: 34px 36px;
  border: 1px solid var(--c-line);
  background: var(--c-bg);
  transition: border-color var(--t-fast), transform var(--t-fast);
}

.personal__tile:hover {
  border-color: var(--c-green);
  transform: translateY(-3px);
}

.personal__tile-title {
  font-family: var(--f-display);
  font-size: 24px;
  color: var(--c-ink);
}

.personal__tile-note {
  margin-top: 7px;
  font-family: var(--f-text);
  font-weight: 300;
  font-size: 13px;
  color: var(--c-muted);
}

.personal__logout {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 44px;
  font-family: var(--f-caps);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-muted);
  transition: color var(--t-fast);
}

.personal__logout:hover {
  color: var(--c-ink);
}

/* Возврат в хаб — стрелка над заголовком разделов ЛК */
.personal-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-caps);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-muted);
  transition: color var(--t-fast);
}

.personal-back:hover {
  color: var(--c-green);
}

/* Список заказов */
.orders {
  padding: 36px var(--pad-x-wide) 96px;
  max-width: 1240px;
  margin: 0 auto;
}

.orders__title {
  margin-top: 20px;
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(34px, 4.33vw, 52px);
  line-height: 1.05;
  letter-spacing: .01em;
  color: var(--c-ink);
}

.orders__count {
  margin-top: 12px;
  font-family: var(--f-caps);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.orders__list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 40px;
}

.order-card {
  border: 1px solid var(--c-line);
  padding: 32px 36px;
}

.order-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}

.order-card__id {
  display: flex;
  align-items: baseline;
  gap: 16px;
}

.order-card__num {
  font-family: var(--f-display);
  font-size: 24px;
  color: var(--c-ink);
}

.order-card__date {
  font-family: var(--f-text);
  font-weight: 300;
  font-size: 13px;
  color: var(--c-muted);
}

.order-card__status {
  font-family: var(--f-caps);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-text);
  border: 1px solid var(--c-ctrl-line);
  padding: 8px 16px;
  white-space: nowrap;
}

.order-card__props {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.order-card__prop {
  font-family: var(--f-text);
  font-weight: 300;
  font-size: 14px;
  color: var(--c-muted);
}

.order-card__total {
  margin-top: 6px;
  font-family: var(--f-text);
  font-weight: 400;
  font-size: 15px;
  color: var(--c-ink);
}

.order-card__line {
  height: 1px;
  background: var(--c-line);
  margin: 26px 0;
}

.order-card__actions {
  display: flex;
  gap: 34px;
}

.order-card__actions a {
  font-family: var(--f-caps);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-green);
  transition: opacity var(--t-fast);
}

.order-card__actions a:hover {
  opacity: .5;
}

/* Профиль: форма переиспользует auth__field/label/input */
.profile {
  padding: 36px var(--pad-x-wide) 96px;
  max-width: 1240px;
  margin: 0 auto;
}

.profile__title {
  margin-top: 20px;
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(34px, 4.33vw, 52px);
  line-height: 1.05;
  letter-spacing: .01em;
  color: var(--c-ink);
}

.profile__caps {
  margin-top: 12px;
  font-family: var(--f-caps);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.profile__message {
  max-width: 560px;
}

.profile__form {
  width: 560px;
  max-width: 100%;
  margin-top: 44px;
}

.profile__form .auth__field:first-of-type {
  margin-top: 0;
}

.profile__divider {
  height: 1px;
  background: var(--c-line);
  margin: 38px 0;
}

.profile__divider + .profile__caps {
  margin-top: 0;
}

.profile__caps + .auth__field {
  margin-top: 26px;
}

.profile__save {
  min-width: 220px;
  margin-top: 36px;
  padding: 16px 32px;
  font-family: var(--f-caps);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-cream);
  background: var(--c-green);
  transition: background .3s ease;
}

.profile__save:hover {
  background: var(--c-green-dark);
}

/* Адаптив личного кабинета: плитки хаба и карточки заказов. */
@media (max-width: 760px) {
  .personal,
  .orders,
  .profile {
    padding-top: 24px;
    padding-bottom: 56px;
  }

  .personal__grid {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 32px;
  }

  .personal__tile {
    padding: 24px;
  }

  .order-card {
    padding: 24px;
  }

  /* Номер заказа и плашка статуса в одну строку не помещаются: статус
     принципиально не переносится по словам (white-space: nowrap). */
  .order-card__head {
    flex-wrap: wrap;
    gap: 12px;
  }
}

/* ── Скин оформления заказа (sale.order.ajax, штатный шаблон .default) ──
   Кастомного шаблона у SOA нет — приводим bootstrap-вид штатного шаблона к
   дизайн-системе поверх его стилей. Эталон — docs/design/checkout.dc.html
   (Claude Design, проект «Интернет-магазин трикотажа»). Отличие от макета
   осознанное: у штатного компонента секций больше (Регион доставки отдельно
   от Покупателя) и их порядок фиксирован — макет применён как визуальная
   система (номера-счётчики, Cormorant-заголовки, карточки вариантов,
   тёплая sticky-сводка), не как пересборка разметки. ── */

/* Контейнер и шапка страницы — рисует personal/order/make/index.php */
.checkout-wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 var(--pad-x-wide) 96px;
}

.checkout-head {
  padding-top: 36px;
}

.checkout-head__steps {
  font-family: var(--f-text);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.checkout-head__title {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(34px, 4.33vw, 52px);
  letter-spacing: .01em;
  color: var(--c-ink);
  margin-top: 14px;
}

/* Сетка: штатные bootstrap-колонки (9/3) заменяем flex'ом — сводка шире (по
   макету) и position:sticky начинает работать (с float он не дружит). */
.checkout-wrap .row.bx-blue {
  display: flex;
  gap: 56px;
  align-items: flex-start;
  margin: 0;
}

.bx-soa.col-sm-9 {
  float: none !important;
  width: auto !important;
  flex: 1 1 auto;
  min-width: 0;
  padding: 16px 0 0 !important;
}

.bx-soa-sidebar.col-sm-3 {
  float: none !important;
  width: 380px !important;
  flex: 0 0 380px;
  padding: 16px 0 0 !important;
  /* Двойной класс — иначе position:relative бутстрапа из компонентного CSS
     (грузится после main.css) перебивает липкость */
  position: sticky;
  top: 100px;
}

.bx-soa {
  padding-top: 16px;
  font-family: var(--f-text);
  counter-reset: soa-section;
}

/* Стоковые лого-заглушки доставок/платёжек в свёрнутых секциях (img без классов) */
.bx-soa img[src*="delivery_logo"],
.bx-soa img[src*="pay_system_logo"] {
  display: none !important;
}

/* Секции: без рамок и плашек, hairline-разделители, много воздуха */
.bx-soa-section {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 40px 0 !important;
  border-bottom: 1px solid var(--c-line) !important;
}

.bx-soa-section-title-container {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  display: flex;
  align-items: baseline;
  gap: 16px;
}

/* Номер секции — CSS-счётчик (скрытые display:none секции не считаются) */
.bx-soa-section-title-container::before {
  counter-increment: soa-section;
  content: counter(soa-section, decimal-leading-zero);
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 26px;
  line-height: 1;
  color: var(--c-ctrl-line);
}

.bx-soa-section-title {
  font-family: var(--f-display) !important;
  font-weight: 400 !important;
  font-size: 30px !important;
  color: var(--c-ink) !important;
  padding: 0 !important;
}

/* Стоковые кружки-галки у заголовков — вместо них наши номера */
.bx-soa-section-title-count {
  display: none !important;
}

.bx-soa-section-content {
  padding: 26px 0 0 !important;
}

/* «изменить» у свёрнутых секций */
.bx-soa-editstep {
  font-family: var(--f-caps) !important;
  font-weight: 400 !important;
  font-size: 11px !important;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-green) !important;
  text-decoration: none !important;
}

.bx-soa-editstep:hover {
  opacity: .6;
}

/* Служебные плашки (автозаполнение, предупреждения) — нейтральный тёплый тон,
   стоковую иконку-галку (фоновая картинка/глиф) убираем целиком */
.bx-soa .alert,
.bx-soa .alert.alert-success,
.bx-soa .alert.alert-warning {
  background: var(--c-bg-warm) !important;
  background-image: none !important;
  border: 1px solid var(--c-line) !important;
  border-radius: 0 !important;
  color: var(--c-text) !important;
  font-family: var(--f-text);
  font-weight: 300;
  font-size: 13px;
  padding: 16px 20px !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.bx-soa .alert::before,
.bx-soa .alert::after,
.bx-soa .alert .glyphicon,
.bx-soa .alert .icon-success,
.bx-soa .alert i[class*="icon"] {
  display: none !important;
}

/* Инлайновый padding-left под спрятанную иконку */
.bx-soa .alert .col-xs-12 {
  padding-left: 0 !important;
}

/* Кнопки */
.bx-soa .btn.btn-default,
.bx-soa .pull-right .btn,
.bx-soa-item-block .btn {
  background: var(--c-green) !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--c-cream) !important;
  font-family: var(--f-caps) !important;
  font-weight: 400 !important;
  font-size: 12px !important;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 14px 30px !important;
  transition: background .3s ease;
  text-shadow: none !important;
  box-shadow: none !important;
}

.bx-soa .btn.btn-default:hover {
  background: var(--c-green-dark) !important;
}

/* Варианты доставки/оплаты — карточки по макету: тонкая рамка, выбранная зелёная;
   стоковые пиктограммы платёжек/доставок прячем целиком.
   !important на рамках: штатный style.css компонента (грузится после main.css)
   держит border transparent. z-index: штатный 100 поднимал карточки над шапкой. */
.bx-soa-pp-company {
  border: 1px solid var(--c-ctrl-line) !important;
  background: var(--c-bg);
  padding: 20px 22px !important;
  transition: border-color .25s ease, box-shadow .25s ease;
  z-index: auto !important;
}

.bx-soa-pp-company.bx-selected {
  border-color: var(--c-green) !important;
  box-shadow: 0 0 0 1px var(--c-green);
}

/* Раскрытая секция: штатная сетка 58/42 душит карточки — раскладываем в колонку:
   варианты на всю ширину, описание выбранного ниже */
.bx-soa-pp.row {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 0;
}

.bx-soa-pp-item-container,
.bx-soa-pp-desc-container {
  width: 100% !important;
  float: none !important;
  padding: 0 !important;
}

.bx-soa-pp-company-graf-container {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

.bx-soa-pp-company-image,
.bx-soa-pp-company-checkbox {
  display: none !important;
}

.bx-soa-pp-company-title {
  font-family: var(--f-display) !important;
  font-weight: 400 !important;
  font-size: 21px !important;
  color: var(--c-ink) !important;
}

.bx-soa-pp-company-smalltitle,
.bx-soa-pp-desc {
  font-family: var(--f-text) !important;
  font-weight: 300 !important;
  font-size: 13px !important;
  color: var(--c-muted) !important;
}

.bx-soa-pp-delivery-cost {
  font-family: var(--f-text) !important;
  font-weight: 400 !important;
  color: var(--c-green) !important;
  background: transparent !important;
  position: static !important;
  display: inline-block;
  margin: 0 !important;
}

/* Раскрытый выбор вариантов: бутстрап-колонки в узком col-sm-7 давали карточки-
   огрызки — переводим на флекс по две в ряд; клик по карточке — курсор-рука */
.bx-soa-pp-item-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.bx-soa-pp-item-container .bx-soa-pp-company {
  float: none !important;
  width: calc(50% - 8px) !important;
  margin: 0 !important;
  min-height: 0 !important;
  cursor: pointer;
}

/* В раскрытом виде имя варианта живёт в smalltitle — поднимаем до макетного */
.bx-soa-pp-item-container .bx-soa-pp-company-smalltitle {
  font-family: var(--f-display) !important;
  font-weight: 400 !important;
  font-size: 19px !important;
  color: var(--c-ink) !important;
  text-align: left !important;
  margin: 10px 0 0 !important;
  white-space: normal;
}

.bx-soa-pp-company-graf-container {
  text-align: left;
  height: auto !important;
  min-height: 0 !important;
  /* Штатный padding-top ~125px резервировал место под лого — лого скрыты */
  padding: 0 !important;
}

/* Карточка описания выбранного варианта (под списком вариантов) */
.bx-soa-pp-desc-container .bx-soa-pp-company {
  cursor: default;
  border-color: var(--c-line) !important;
  background: transparent;
}

.bx-soa-pp-company-logo {
  display: none !important;
}

.bx-soa-pp-company-subTitle {
  font-family: var(--f-caps) !important;
  font-weight: 400 !important;
  font-size: 10px !important;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-muted) !important;
  margin-bottom: 10px;
}

.bx-soa-pp-company-block,
.bx-soa-pp-list {
  font-family: var(--f-text) !important;
  font-weight: 300 !important;
  font-size: 13px !important;
  color: var(--c-text) !important;
  line-height: 1.6;
}

.bx-soa-pp-list {
  list-style: none;
  padding: 0 !important;
  margin: 8px 0 0 !important;
}

/* Линия над кнопками «Назад/Далее» — лишняя при наших hairline-секциях */
.bx-soa-more {
  border-top: 0 !important;
  background: transparent !important;
}

/* Поля: капс-лейблы, прямоугольные инпуты в тон карточке товара */
.bx-soa-customer-label,
.bx-soa .bx-soa-custom-label,
.bx-soa label {
  font-family: var(--f-caps) !important;
  font-weight: 400 !important;
  font-size: 10px !important;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-muted) !important;
}

.bx-soa .form-control {
  border-radius: 0 !important;
  border: 1px solid var(--c-ctrl-line) !important;
  background: var(--c-bg) !important;
  font-family: var(--f-text) !important;
  font-weight: 300;
  font-size: 15px !important;
  color: var(--c-ink) !important;
  height: auto !important;
  padding: 12px 16px !important;
  box-shadow: none !important;
}

.bx-soa .form-control:focus {
  border-color: var(--c-green) !important;
}

.bx-soa .form-control::placeholder {
  color: var(--c-ctrl-line);
}

/* Купоны не используем — скрываем весь блок */
.bx-soa-coupon {
  display: none !important;
}

/* Товары в заказе: названия Cormorant, тонкие линии */
.bx-soa-item-title,
.bx-soa-item-title a {
  font-family: var(--f-display) !important;
  font-weight: 400 !important;
  font-size: 19px !important;
  color: var(--c-ink) !important;
  text-decoration: none !important;
}

.bx-soa-item-table,
.bx-soa-item-table td,
.bx-soa-item-tr,
.bx-soa-item-td {
  border-color: var(--c-line) !important;
  font-family: var(--f-text);
}

/* Сводка: липкая тёплая карточка (sticky задан выше на .bx-soa-sidebar.col-sm-3) */
.bx-soa-cart-total {
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--c-bg-warm) !important;
  padding: 34px 32px !important;
}

.bx-soa-cart-total-line {
  background: transparent !important;
  padding: 7px 0 !important;
  font-family: var(--f-text);
  font-weight: 300;
  font-size: 14px;
  color: var(--c-text);
}

.bx-soa-cart-total-line-highlighted {
  border: 0 !important;
}

.bx-soa-cart-total-line-total {
  border-top: 1px solid var(--c-line-warm) !important;
  margin-top: 18px !important;
  padding-top: 22px !important;
}

.bx-soa-cart-total-line-total .bx-soa-cart-t {
  font-family: var(--f-display) !important;
  font-weight: 400 !important;
  font-size: 24px !important;
  color: var(--c-ink) !important;
}

.bx-soa-cart-total-line-total .bx-soa-cart-d {
  font-family: var(--f-display) !important;
  font-weight: 500 !important;
  font-size: 34px !important;
  line-height: 1 !important;
  color: var(--c-ink) !important;
}

/* Кнопка «Оформить заказ» в сводке — во всю ширину */
.bx-soa-cart-total .btn.btn-default {
  width: 100%;
  padding: 17px 20px !important;
  letter-spacing: .2em;
}

/* Финальный экран «Спасибо за заказ»: центрированная колонка по макету;
   заголовок и кнопки рисует personal/order/make/index.php, компонентные
   таблицы (confirm.php) чистим ниже */
.checkout-wrap--confirm {
  max-width: 760px;
  text-align: center;
}

.checkout-wrap--confirm .checkout-head__title {
  font-size: clamp(36px, 4.67vw, 56px);
}

.checkout-confirm-actions {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-top: 48px;
}

.checkout-confirm-actions__btn {
  border: 1px solid var(--c-green);
  color: var(--c-green);
  padding: 16px 40px;
  font-family: var(--f-caps);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .25s ease, color .25s ease;
}

.checkout-confirm-actions__btn:hover {
  background: var(--c-green);
  color: var(--c-cream);
}

/* Компонентные таблицы финала (confirm.php) — по макету это чистый текст по
   центру, без таблиц и рамок; строка с лого платёжки прячется целиком */
.checkout-wrap .sale_order_full_table {
  width: 100%;
  border: 0 !important;
  font-family: var(--f-text);
  font-weight: 300;
  color: var(--c-text);
}

.checkout-wrap .sale_order_full_table td {
  border: 0 !important;
  padding: 6px 0 !important;
  font-size: 15px;
  line-height: 1.7;
}

.checkout-wrap .ps_logo,
.checkout-wrap tr:has(> td.ps_logo:only-child) {
  display: none !important;
}

.checkout-wrap .pay_name {
  font-family: var(--f-caps);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.checkout-wrap .paysystem_name {
  font-family: var(--f-display);
  font-size: 20px;
  color: var(--c-ink);
}

/* Адаптив оформления. Сводка заказа стоит жёсткими 380px рядом с формой —
   на 375 это выносило страницу за край на 150px. Ставим её под форму и снимаем
   липкость: прилипшая карточка на 380px высоты закрывала бы половину экрана. */
@media (max-width: 1100px) {
  .checkout-wrap .row.bx-blue {
    flex-direction: column;
    gap: 32px;
  }

  .bx-soa-sidebar.col-sm-3 {
    width: 100% !important;
    flex: 0 0 auto;
    position: static;
  }
}

@media (max-width: 760px) {
  .checkout-wrap {
    padding-bottom: 56px;
  }

  /* Штатные bootstrap-колонки внутри секций (сама сводка — не они, поэтому
     селектор от .bx-soa): до 768px они и так во всю ширину, но в полосе
     760–767 ещё живут процентами — гасим, чтобы поля не сплющивало. */
  .bx-soa [class*="col-sm-"] {
    float: none !important;
    width: auto !important;
  }
}

/* ── Дизайн-токены ────────────────────────────────────────────────── */

:root {
  /* Фоны и линии */
  --c-bg: #FBF9F4;            /* фон страницы */
  --c-bg-warm: #EFE7D8;       /* тёплые секции */
  --c-line: #E8DFCD;          /* рамки, разделители на светлом */
  --c-line-warm: #DED4BF;     /* разделители на тёплом фоне (характеристики карточки) */
  --c-ctrl-line: #C9C0AC;     /* рамки контролов (чекбоксы, радио, квадраты размеров) */
  --c-surface: #FFFFFF;       /* фон всплывающих панелей (попап сортировки) */
  --c-sale: #A6584E;          /* скидки и «нет в наличии» (бейдж −N%, подпись размера) */
  --c-error-soft: #E6B8A8;    /* текст ошибок на тёмном фоне (форма контактов) */

  /* Зелёная гамма */
  --c-green-dark: #0E3528;    /* hero, шапка главной при скролле */
  --c-green: #114232;         /* шапка внутренних страниц, мегаменю, тёмные блоки */
  --c-ink: #0E2E22;           /* заголовки и названия на светлом */

  /* Текст на тёмном */
  --c-cream: #F2EDE2;         /* крупный текст, заголовки */
  --c-cream-soft: #EAE6DC;    /* навигация, подписи */
  --c-line-dark: rgba(234, 230, 220, .08);  /* разделители на тёмном */

  /* Текст на светлом */
  --c-text: #55534B;          /* основной */
  --c-muted-warm: #6B6960;    /* слоган подвала, тёплый вторичный */
  --c-muted: #8A8576;         /* вторичный: составы, подписи */
  --c-muted-2: #9A9486;       /* третичный: копирайт, мелочь */

  /* Типографика */
  --f-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --f-text: 'Jost', 'Segoe UI', sans-serif;
  --f-caps: 'Mulish', 'Segoe UI', sans-serif;

  /* Сетка и отступы. Горизонтальный гуттер сайта — только эти два токена, числами
     56/72 в правилах их быть не должно: по ним ходит адаптивный ладдер (ниже),
     и правило с хардкодом на узком экране осталось бы десктопным. */
  --pad-x: 56px;              /* базовый: главная, 404 */
  --pad-x-wide: 72px;         /* широкий: шапка, подвал, каталог, карточка, текстовые страницы */
  --grid-gap: 24px;           /* сетки товаров и капсул */
  /* Высота компактной шапки (паддинги 9+9 + монограмма 30 + бордер 1) — от неё
     считаются top липких элементов: при прокрутке шапка всегда компактная
     (is-compact включается с ~40px, sticky срабатывают много ниже). Меняешь
     компактные размеры в секции «Компактная шапка» — меняй и здесь. */
  --header-compact-h: 49px;

  /* Анимации */
  --t-fast: .2s ease;                                  /* ховеры ссылок и иконок */
  --t-img: 1.1s cubic-bezier(.22, .61, .36, 1);        /* зум картинок */
  --t-header: .65s ease;                               /* смена фона шапки */
}

/* ── Адаптив: контрольные точки ──────────────────────────────────────
 *
 * Ступеней четыре, и других в шаблоне быть не должно — новый медиазапрос пишем
 * на одну из этих ширин, иначе соседние блоки перестраиваются вразнобой:
 *
 *   > 1100   десктоп, макеты рисовались на 1440
 *   ≤ 1100   планшет-ландшафт: сетка товаров 4 → 3, карточка товара в одну колонку
 *   ≤ 760    планшет-портрет и крупный телефон: мобильная раскладка, сетка → 2
 *   ≤ 420    узкий телефон: сетка → 1 колонка
 *
 * Гуттер переопределяется здесь один раз на весь сайт: всё, что свёрстано через
 * --pad-x / --pad-x-wide, сужается само. Дублировать padding-left/right
 * в медиазапросах отдельных блоков не нужно — это была бы вторая точка правды.
 * Типографика ступеней не требует: крупные размеры заданы через clamp() и едут
 * плавно (потолок держится до вьюпорта 1200, ниже заголовок уменьшается сам).
 */

@media (max-width: 1100px) {
  :root {
    --pad-x: 40px;
    --pad-x-wide: 40px;
  }
}

@media (max-width: 760px) {
  :root {
    --pad-x: 24px;
    --pad-x-wide: 24px;
  }
}

@media (max-width: 420px) {
  :root {
    --pad-x: 16px;
    --pad-x-wide: 16px;
  }
}

/* ── База ─────────────────────────────────────────────────────────── */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

/* Sticky-footer: body — flex-колонка на всю высоту экрана, .site-main
   растягивается и выталкивает подвал к низу даже на коротких страницах.
   Фикс-шапка вне потока (position:fixed) — во flex не участвует, не мешает. */
body {
  background: var(--c-bg);
  font-family: var(--f-text);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.site-main {
  flex: 1 0 auto;
}

a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

/* height: auto — пара к max-width: 100%: когда узкий экран ужимает картинку по
   ширине, высота из атрибута height (а он у нас проставлен везде — против сдвига
   раскладки) осталась бы прежней и кадр расплющило бы. Блоки со своей высотой
   в CSS (лого, боксы с object-fit) специфичнее и это правило не задевает. */
img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Обёртка <picture> нужна только чтобы подсунуть браузеру webp-вариант (Maylina\Media\Webp);
   в раскладке её быть не должно — display: contents убирает саму обёртку, и <img> остаётся
   прямым потомком своего контейнера ровно как раньше. Иначе инлайновый picture добавил бы
   к медиа-боксам лишние пиксели по базовой линии. */
picture {
  display: contents;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

input,
select,
textarea {
  font: inherit;
}

::selection {
  background: var(--c-green);
  color: var(--c-cream);
}

/* ── Шапка ─────────────────────────────────────────────────────────── */

/*
 * Разметка единая для всего сайта. Сплошное состояние (внутренние страницы и
 * главная после прокрутки) — зелёный фон #114232, текст и лого кремом. Прозрачное
 * состояние главной над hero (.site-header--hero без is-scrolled/is-search-open/
 * is-mega-open) — тёмно-зелёный --c-ink на светлом кадре, без теней и скрима;
 * лого при этом остаётся кремовым (решения 07.09.2026). Цвета элементов шапки идут через её токены --hdr-*: одно
 * правило состояния переключает всё разом, вплоть до бейджей и разделителя.
 */

.site-header {
  --hdr-fg: var(--c-cream-soft);              /* текст, иконки, бургер */
  --hdr-logo: #EEEAE3;                        /* монограмма: крем PNG-лого; над hero не меняется */
  --hdr-line: rgba(234, 230, 220, .25);       /* разделитель перед «Войти» */
  --hdr-badge-fg: var(--c-green);             /* бейджи избранного и корзины */
  --hdr-badge-bg: var(--c-cream);
  position: fixed;
  /* Обычно 0. Под залогиненным редактором js/header.js держит здесь высоту
     админ-панели Битрикса, чтобы фикс-шапка не пряталась под неё. Гость: 0. */
  top: var(--bx-panel-offset, 0px);
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--c-green);
  border-bottom: 1px solid var(--c-line-dark);
  transition: background var(--t-header), border-color var(--t-header);
}

.site-header__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 16px var(--pad-x-wide);
  transition: padding .4s ease;
}

/* Левая ячейка бара: бургер (только узкий экран) + навигация. */
.site-header__left {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

.site-header__burger {
  display: none;          /* десктоп: меню открывает пункт «Каталог» */
  color: var(--hdr-fg);
  transition: opacity var(--t-fast);
}

.site-header__burger:hover {
  opacity: .6;
}

/* Левая навигация — вывод компонента bitrix:menu (.top) */
.site-header__nav {
  display: flex;
  gap: 36px;
  align-items: baseline;
}

.site-header__nav-link {
  font-family: var(--f-caps);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--hdr-fg);
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: opacity var(--t-fast), border-color var(--t-fast);
}

.site-header__nav-link:hover {
  opacity: .52;
}

/* Мегаменю открыто — подчёркиваем триггер «Каталог» (класс на .site-header ставит js/header.js) */
.site-header.is-mega-open .site-header__nav-link--mega {
  border-bottom-color: var(--c-cream-soft);
}

/* Центр — монограмма (подпись «Maylina» снята 08.09.2026). Транзишн высоты —
   для компактного состояния (is-compact). */
.site-header__brand {
  display: flex;
  align-items: center;
}

/* Инлайновый svg (header.php): ширину даёт пропорция viewBox, цвет — токен шапки. */
.site-header__monogram {
  display: block;
  height: 40px;
  width: auto;
  color: var(--hdr-logo);
  transition: height .4s ease;
}

/* Правая группа — иконки, разделитель, «Войти» */
.site-header__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 22px;
  color: var(--hdr-fg);
}

.site-header__icon {
  display: flex;
  transition: opacity var(--t-fast);
}

.site-header__icon:hover {
  opacity: .5;
}

/* Бейдж избранного: число проставляет js/favorites.js (пер-юзерное, в композитный
   снимок span уходит пустым и скрытым). Вид 1:1 с бейджем малой корзины — его
   стили живут в шаблоне компонента sale.basket.basket.line/maylina. */
.site-header__icon--fav {
  position: relative;
}

/* Наш display:flex перебивает UA-правило [hidden]{display:none} — возвращаем его силу:
   при нуле позиций js/favorites.js ставит hidden, и кружок обязан исчезнуть целиком. */
.site-header__fav-badge[hidden] {
  display: none;
}

.site-header__fav-badge {
  position: absolute;
  top: -4px;
  right: -7px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-text);
  font-weight: 400;
  font-size: 9px;
  line-height: 1;
  color: var(--hdr-badge-fg);
  background: var(--hdr-badge-bg);
  border-radius: 8px;
}

.site-header__divider {
  width: 1px;
  height: 13px;
  background: var(--hdr-line);
}

/* ── Поиск в шапке (is-search-open на .site-header ставит js/header.js):
   инпут растёт вправо от лупы, и она уезжает влево — в свободное место до
   лого; остальные иконки не двигаются, крестик закрывает. Выпадашка
   подсказок — стили шаблона search.title/maylina ── */
.hdr-search {
  display: flex;
  align-items: center;
  gap: 0;
  transition: gap .35s ease;
}

.is-search-open .hdr-search {
  gap: 16px;
}

.hdr-search__input {
  width: 0;
  opacity: 0;
  visibility: hidden;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(234, 230, 220, .35);
  /* Без горизонтальных паддингов: закрытый инпут обязан занимать ровно 0px,
     иначе отступ лупы от соседней иконки больше общего (был 26px против 22) */
  padding: 4px 0 6px;
  font-family: var(--f-text);
  font-weight: 300;
  font-size: 14px;
  color: var(--c-cream);
  outline: none;
  transition: width .35s ease, opacity .25s ease, visibility 0s .35s, border-color var(--t-fast);
}

.is-search-open .hdr-search__input {
  width: 260px;
  opacity: 1;
  visibility: visible;
  transition: width .35s ease, opacity .25s ease .1s, border-color var(--t-fast);
}

.hdr-search__input::placeholder {
  color: rgba(242, 237, 226, .45);
}

.hdr-search__input:focus {
  border-bottom-color: rgba(234, 230, 220, .75);
}

.hdr-search__close {
  display: none;
}

.is-search-open .hdr-search__close {
  display: flex;
}

.site-header__login {
  font-family: var(--f-caps);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--hdr-fg);
  transition: opacity var(--t-fast);
  /* Имя авторизованного ставит динамическая область (maylina:header.auth) —
     длинное имя не должно ломать шапку */
  display: inline-block;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

.site-header__login:hover {
  opacity: .5;
}

/* Прозрачное состояние поверх hero (главная): фон снят, меню, иконки и бейджи —
   тёмно-зелёным --c-ink на светлом кадре, без теней и скрима; лого остаётся кремовым
   (решения 07.09.2026; до этого — всё кремом с text-shadow/drop-shadow и
   скрим-градиентом сверху). Состояние
   описано одним селектором «--hero и ни одного из заливающих классов»: is-scrolled,
   is-search-open и is-mega-open возвращают сплошной фон и кремовые токены сами,
   сбрасывать нечего. */
.site-header--hero {
  background: transparent;
  border-bottom-color: transparent;
}

.site-header--hero:not(.is-scrolled):not(.is-search-open):not(.is-mega-open) {
  --hdr-fg: var(--c-ink);
  --hdr-line: rgba(14, 46, 34, .25);
  --hdr-badge-fg: var(--c-cream);
  --hdr-badge-bg: var(--c-ink);
}

/* Главная: прокрутили за hero — шапка становится сплошной (класс is-scrolled
   ставит js/header.js). Открытый поиск (is-search-open) затемняет её так же:
   на прозрачной шапке инпут не читается. */
.site-header--hero.is-scrolled,
.site-header--hero.is-search-open {
  background: rgba(14, 53, 40, .97);
  border-bottom-color: var(--c-line-dark);
}

/* Открытое мегаменю (is-mega-open) заливает шапку главной ровно так же, как на
   внутренних страницах, — сплошным --c-green и без хайрлайна: панель меню того
   же цвета висит вплотную снизу, шапка и меню читаются одним блоком, а не
   прозрачной полосой над зелёным прямоугольником. Так в макете home.html:
   headerBg = mega ? #114232 : (scrolled ? rgba(14,53,40,.97) : transparent),
   headerBorder при открытом меню — transparent. Правило идёт после is-scrolled:
   при обоих классах (прокрутили и открыли меню) по порядку выигрывает мегаменю,
   как и в макете. */
.site-header--hero.is-mega-open {
  background: var(--c-green);
  border-bottom-color: transparent;
}

/* ── Компактная шапка при прокрутке (класс is-compact ставит js/header.js:
   на внутренних — после небольшого порога скролла, на главной — вместе с заливкой
   за hero): тоньше паддинги, монограмма меньше — фикс-шапка занимает ~49px
   вместо ~73px (--header-compact-h). ── */
.site-header.is-compact .site-header__bar {
  padding-top: 9px;
  padding-bottom: 9px;
}

.site-header.is-compact .site-header__monogram {
  height: 30px;
}

/* Внутренние страницы: контент не должен уезжать под фикс-шапку (16 + 40 + 16
   + хайрлайн = 73px; до снятия подписи «Maylina» было 96). На главной отступа
   нет — hero лежит под шапкой. */
.page-inner .site-main {
  padding-top: 72px;
}

/* ── Дровер: обёртка вокруг мегаменю и ссылок верхнего меню (header.php) ──
   На десктопе обёртки в раскладке нет вовсе — display: contents оставляет
   абсолютно спозиционированную панель мегаменю ровно там, где она была. */
.site-header__drawer {
  display: contents;
}

.site-header__drawer-nav,
.site-header__drawer-foot {
  display: none;          /* десктоп: те же пункты (и вход) рисует бар */
}

/* ── Адаптив шапки ────────────────────────────────────────────────────
 *
 * Ниже 760 в баре остаётся бургер · монограмма · поиск, избранное, корзина:
 * навигация и вход уезжают в дровер, который открывает бургер (вход — его
 * последняя строка, иконки встают на его место у правого края). Дровер — та же панель
 * мегаменю (класс is-mega-open, тот же в js/header.js), только разложенная
 * колонкой и на всю высоту экрана: второго дерева разделов не заводим.
 * Пальцевые зоны иконок расширены паддингом с отрицательным полем — размер
 * значка при этом не меняется, а нажимать становится во что.
 */
@media (max-width: 760px) {
  .site-header__bar {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .site-header__burger {
    display: flex;
    padding: 9px;
    margin: -9px;
  }

  .site-header__nav {
    display: none;
  }

  .site-header__monogram {
    height: 32px;
  }

  .site-header.is-compact .site-header__monogram {
    height: 26px;
  }

  .site-header__actions {
    gap: 18px;
  }

  .site-header__icon {
    padding: 9px;
    margin: -9px;
  }

  .site-header__divider,
  .site-header__login {
    display: none;
  }

  /* Открытый поиск забирает бар целиком: остальные элементы выходят из грида,
     а бар из трёх колонок становится одной — иначе единственная оставшаяся
     ячейка встала бы в первую колонку и заняла треть ширины. */
  .is-search-open .site-header__bar {
    grid-template-columns: 1fr;
  }

  .is-search-open .site-header__left,
  .is-search-open .site-header__brand,
  .is-search-open .site-header__icon--fav,
  .is-search-open .site-header__basket-holder {
    display: none;
  }

  .is-search-open .hdr-search {
    flex: 1;
  }

  .is-search-open .hdr-search__input {
    width: auto;
    flex: 1;
    min-width: 0;
  }

  /* Дровер: выезжает из-под бара на всю оставшуюся высоту и скроллится сам. */
  .site-header__drawer {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100dvh - 100%);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--c-green);
    border-top: 1px solid var(--c-line-dark);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--t-fast), transform var(--t-fast), visibility 0s .2s;
  }

  .site-header.is-mega-open .site-header__drawer {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity var(--t-fast), transform var(--t-fast);
  }

  /* Ссылки верхнего меню — первым блоком дровера, крупной строкой под палец. */
  .site-header__drawer-nav {
    display: flex;
    flex-direction: column;
    padding: 8px var(--pad-x-wide);
  }

  .site-header__drawer-link {
    padding: 15px 0;
    border-bottom: 1px solid var(--c-line-dark);
    font-family: var(--f-caps);
    font-weight: 300;
    font-size: 13px;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--c-cream-soft);
  }

  /* Вход — последняя строка дровера, под колонками каталога: та же строка, что
     у ссылок верхнего меню, отделена линией сверху вместо снизу. Длинное имя
     авторизованного режется многоточием, как и в баре. */
  .site-header__drawer-foot {
    display: block;
    padding: 0 var(--pad-x-wide) 24px;
  }

  .site-header__drawer-login {
    display: block;
    border-bottom: 0;
    border-top: 1px solid var(--c-line-dark);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Бургер в открытом состоянии — крестик. */
  .site-header__burger-close {
    display: none;
  }

  .site-header.is-mega-open .site-header__burger-open {
    display: none;
  }

  .site-header.is-mega-open .site-header__burger-close {
    display: block;
  }

  /* Страница под открытым дровером не скроллится (класс ставит js/header.js). */
  body.has-drawer-open {
    overflow: hidden;
  }

}

/* ── Подвал ────────────────────────────────────────────────────────── */

.site-footer {
  background: var(--c-bg);
  border-top: 1px solid var(--c-line);
  padding: 72px var(--pad-x-wide) 48px;
}

.site-footer__cols {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.4fr;
  gap: 40px;
}

/* Бренд + слоган. Колонка — флекс на всю высоту ряда: подпись разработчика
   прижимается к её низу и встаёт в линию с последними ссылками соседних колонок. */
.site-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.site-footer__logo {
  height: 30px;
  width: auto;
}

/* Лого-ссылка подвала (на главной ссылки нет — рендерится голый img) */
.site-footer__logo-link {
  display: inline-block;
  transition: opacity var(--t-fast);
}

.site-footer__logo-link:hover {
  opacity: .7;
}

.site-footer__tagline {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 19px;
  line-height: 1.4;
  color: var(--c-muted-warm);
  margin-top: 16px;
  max-width: 240px;
}

/* Подпись разработчика: надпись над логотипом WebReach, тоном копирайта.
   margin-top: auto уводит её к низу колонки, padding-top — минимальный зазор
   от слогана, когда свободного места нет (на узких экранах бренд в ряду один). */
.site-footer__credit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  margin-top: auto;
  padding-top: 28px;
  color: var(--c-muted-2);
  transition: color var(--t-fast);
}

.site-footer__credit:hover {
  color: var(--c-ink);
}

.site-footer__credit:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 5px;
}

.site-footer__credit-label {
  font-family: var(--f-text);
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: .01em;
}

.site-footer__credit-logo {
  display: block;
  width: 132px;
  height: auto;
}

/* Колонки-меню */
.site-footer__col-title {
  font-family: var(--f-caps);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-ink);
  margin-bottom: 16px;
}

.site-footer__links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.site-footer__link {
  font-family: var(--f-text);
  font-weight: 300;
  font-size: 13px;
  color: var(--c-text);
  transition: color var(--t-fast);
}

.site-footer__link:hover {
  color: var(--c-ink);
}

/* Контакты */
.site-footer__contacts {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: var(--f-text);
  font-weight: 300;
  font-size: 13px;
  color: var(--c-text);
}

.site-footer__contacts a {
  color: var(--c-text);
  transition: color var(--t-fast);
}

.site-footer__contacts a:hover {
  color: var(--c-ink);
}

.site-footer__contacts p {
  line-height: 1.5;
}

/* Нижняя строка: копирайт · соцсети · правовые ссылки */
.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--c-line);
  font-family: var(--f-text);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--c-muted-2);
}

.site-footer__social {
  display: flex;
  gap: 10px;
}

.site-footer__soc {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(14, 46, 34, .22);   /* --c-ink при .22 */
  color: var(--c-ink);
  font-family: var(--f-caps);
  font-weight: 600;
  font-size: 10px;
  transition: background var(--t-fast), color var(--t-fast);
}

.site-footer__soc:hover {
  background: var(--c-ink);
  color: var(--c-cream);
}

.site-footer__legal {
  display: flex;
  align-items: center;
  gap: 8px;
}

.site-footer__legal-link {
  color: var(--c-muted-2);
  transition: color var(--t-fast);
}

.site-footer__legal-link:hover {
  color: var(--c-ink);
}

/* Адаптив подвала. Четыре колонки — единственный дефект, общий вообще для всех
   страниц сайта: на 375 подвал выносило за правый край на 140px. До 760 сетка
   держится (гуттер сужается ладдером), ниже — бренд и контакты забирают строку
   целиком: слоган и адрес в половинной колонке рвутся по слову. */
@media (max-width: 760px) {
  .site-footer {
    padding-top: 48px;
    padding-bottom: 32px;
  }

  .site-footer__cols {
    grid-template-columns: 1fr 1fr;
    gap: 32px 24px;
  }

  .site-footer__brand,
  .site-footer__col--contacts {
    grid-column: 1 / -1;
  }

  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-top: 32px;
  }

  .site-footer__legal {
    flex-wrap: wrap;
  }
}

/* Одна колонка (420): всё содержимое по центру — решение 07.09.2026. Колонки-списки
   с одним краем на узком экране читались стопкой прижатых к левому краю строк;
   на 760 подвал ещё в две колонки, там центровка билась бы с левой сеткой. */
@media (max-width: 420px) {
  .site-footer {
    text-align: center;
  }

  .site-footer__cols {
    grid-template-columns: 1fr;
  }

  /* Лого на главной — голый img без ссылки, а img в базе блочный: text-align его
     не двигает, центрируем полями. Слоган ограничен max-width — тоже полями. */
  .site-footer__logo,
  .site-footer__tagline {
    margin-left: auto;
    margin-right: auto;
  }

  .site-footer__brand,
  .site-footer__credit,
  .site-footer__links,
  .site-footer__contacts,
  .site-footer__bottom {
    align-items: center;
  }

  .site-footer__social,
  .site-footer__legal {
    justify-content: center;
  }
}

/* ── Hero (главная) ────────────────────────────────────────────────── */

.hero {
  position: relative;
  height: 100vh;
  /* На мобильных 100vh считается по экрану без свёрнутой адресной строки: hero
     оказывается выше видимой области, и низ кадра прячется под панелью браузера.
     dvh считает по фактической — старые браузеры просто останутся на строке выше. */
  height: 100dvh;
  overflow: hidden;
  background: var(--c-green-dark);
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Подсказка внизу hero (все ширины, решение 07.09.2026 — сначала была только
   до 760): первый экран — сплошное видео без единого намёка, что ниже есть сайт.
   Стиль — капс-ссылка CTA (.page-cta__link), но цветом --c-ink: низ кадра — белый
   трикотаж, тёмная надпись читается на нём сама, без скрима и теней (кремовый
   вариант со зелёным скримом заказчик отклонил 07.09.2026).
   Отступ снизу с запасом под панель мобильного браузера (safe-area). */
.hero__cue {
  display: flex;
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(40px + env(safe-area-inset-bottom, 0px));
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 9px 0; /* пальцевая зона */
  font-family: var(--f-caps);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-ink);
  transition: opacity var(--t-fast);
}

.hero__cue:hover {
  opacity: .6;
}

.hero__cue-arrow {
  animation: hero-cue 2.4s ease-in-out infinite;
}

@keyframes hero-cue {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__cue-arrow {
    animation: none;
  }
}

@media (max-width: 760px) {
  .hero__cue {
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }
}

/* Разделитель между hero и категориями (по макету). */
.home-seam {
  height: 48px;
  background: var(--c-bg-warm);
}

/* ── Категории на главной (2 коллекции, фиксированный блок) ─────────── */

.home-cats {
  /* Якорь #collections из подсказки hero: за hero шапка уже сплошная и компактная,
     без отступа блок нырнул бы под неё. */
  scroll-margin-top: calc(var(--header-compact-h) + var(--bx-panel-offset, 0px));
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--c-line);
}

.home-cats__card {
  position: relative;
  display: block;
  overflow: hidden;
}

.home-cats__img {
  width: 100%;
  height: 580px;
  object-fit: cover;
  display: block;
  transition: transform var(--t-img);
}

.home-cats__card:hover .home-cats__img {
  transform: scale(1.05);
}

.home-cats__grad {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 48px;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 40%, rgba(239, 231, 216, .72) 100%);
}

.home-cats__title {
  font-family: var(--f-display);
  font-size: clamp(28px, 3.17vw, 38px);
  line-height: 1.1;
  color: var(--c-ink);
}

.home-cats__link {
  font-family: var(--f-text);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--c-green);
  margin-top: 10px;
}

/* ── О производстве ─────────────────────────────────────── */
.home-about {
  background: var(--c-green);
  padding: 72px var(--pad-x) 80px;
}

.home-about__text {
  max-width: 600px;
}

.home-about__eyebrow {
  font-family: var(--f-caps);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(242, 237, 226, .42);
}

.home-about__title {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(30px, 3.83vw, 46px);
  line-height: 1.1;
  color: var(--c-cream);
  margin-top: 16px;
}

.home-about__lead {
  font-family: var(--f-text);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.8;
  color: rgba(242, 237, 226, .58);
  margin-top: 24px;
}

.home-about__adv {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.home-about__adv li {
  display: flex;
  align-items: baseline;
  gap: 16px;
  font-family: var(--f-text);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(242, 237, 226, .72);
}

.home-about__adv li::before {
  content: "";
  flex-shrink: 0;
  width: 18px;
  height: 1px;
  background: rgba(242, 237, 226, .35);
  transform: translateY(-3px);
}

.home-about__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 64px;
  padding-top: 36px;
  border-top: 1px solid rgba(242, 237, 226, .12);
}

.home-about__stat {
  padding-right: 48px;
}

.home-about__num {
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(38px, 5.33vw, 64px);
  line-height: 1;
  color: var(--c-cream);
}

.home-about__star {
  font-size: 30px;
  line-height: 1;
}

.home-about__cap {
  font-family: var(--f-caps);
  font-weight: 300;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(242, 237, 226, .38);
  margin-top: 12px;
}

/* Адаптив главной. Ряд из четырёх цифр «О производстве» — главный вынос
   страницы: +263px на 375, цифры не ужимаются. Две пары вместо строки. */
@media (max-width: 1100px) {
  .home-cats {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .home-about {
    padding-top: 48px;
    padding-bottom: 56px;
  }

  .home-about__stats {
    grid-template-columns: 1fr 1fr;
    gap: 28px 16px;
    margin-top: 40px;
  }

  .home-about__stat {
    padding-right: 0;
  }
}

/* ── 404 ──────────────────────────────────────────────────────────── */

.not-found {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 96px var(--pad-x) 120px;
  text-align: center;
}

.not-found__code {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(120px, 16vw, 200px);
  line-height: 1;
  color: var(--c-ink);
}

.not-found__title {
  margin-top: 18px;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 32px;
  color: var(--c-ink);
}

.not-found__text {
  margin-top: 12px;
  font-weight: 300;
  font-size: 16px;
  color: var(--c-muted);
}

.not-found__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 44px;
}

.not-found__btn {
  display: inline-block;
  padding: 15px 36px;
  border: 1px solid var(--c-ink);
  font-family: var(--f-caps);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-ink);
  transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}

.not-found__btn:hover {
  background: var(--c-green);
  border-color: var(--c-green);
  color: var(--c-cream);
}

/* ── Текстовые страницы (hero, статья, рейл, CTA): контакты, оптовикам… ───
   Общие блоки контентных страниц блока 8 по макету maylina-opt («основной
   редактируемый блок текстовой страницы»). Отступ фикс-шапки даёт .site-main
   (72px): верхний паддинг и min-height hero уменьшены на него против макета
   (150/420), чтобы итог от верха окна совпал. */

.page-hero {
  position: relative;
  overflow: hidden;
  background: var(--c-green-dark);
}

.page-hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 32%;
  display: block;
}

.page-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14, 46, 34, .62) 0%, rgba(14, 46, 34, .18) 42%, rgba(14, 46, 34, .86) 100%);
}

.page-hero__content {
  position: relative;
  min-height: 348px;
  padding: 78px var(--pad-x-wide) 56px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.page-hero__crumbs {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-caps);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(242, 237, 226, .62);
}

.page-hero__crumbs a {
  transition: opacity var(--t-fast);
}

.page-hero__crumbs a:hover {
  opacity: .65;
}

.page-hero__crumbs-sep {
  opacity: .5;
}

.page-hero__crumbs-here {
  color: var(--c-cream);
}

/* Капс-подпись над заголовком hero («Капсула · Сезон 2026», «Коллекции с
   характером»); используется и внутри .brand-hero на лендинге капсул */
.page-hero__eyebrow {
  margin-top: 26px;
  font-family: var(--f-caps);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(242, 237, 226, .6);
}

/* Высокий hero детальной капсулы: фото должно дышать */
.page-hero--tall .page-hero__content {
  min-height: 464px;
}

.page-hero__title {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(38px, 6vw, 72px);
  line-height: 1.02;
  letter-spacing: -.01em;
  color: var(--c-cream);
  margin-top: 18px;
}

.page-hero__lead {
  font-family: var(--f-text);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.8;
  color: rgba(242, 237, 226, .72);
  margin-top: 18px;
  max-width: 540px;
}

/* Статья: контейнер 1180 + сетка «статья / рейл 320»; здесь — обвязка страницы
   и типографика голых тегов внутри .page-article. Классы контента (article-lead,
   article-note, article-callout/terms/steps) живут в styles.css шаблона: публичке
   он автоподключается после main.css, а визуальному редактору даёт выпадашку
   «Стили» и вид «как на сайте» (в паре с editor.css — см. design-system.md) */
.page-body {
  padding: 80px var(--pad-x-wide) 96px;
}

/* Прижатый низ — для страниц, где сразу под статьёй идёт CTA-баннер (оптовикам) */
.page-body--flush {
  padding-bottom: 0;
}

.page-body__inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 72px;
  align-items: start;
}

/* Одноколоночный вариант без рейла (юридические тексты: политика, оферта) */
.page-body__inner--single {
  display: block;
  max-width: 800px;
}

.page-article a {
  color: var(--c-green);
  border-bottom: 1px solid rgba(17, 66, 50, .25);
  transition: border-color var(--t-fast);
}

.page-article a:hover {
  border-bottom-color: var(--c-green);
}

.page-article h2 {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: 34px;
  color: var(--c-ink);
  margin-top: 56px;
}

.page-article p {
  font-family: var(--f-text);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.85;
  color: var(--c-text);
  margin-top: 18px;
}

.page-article ul {
  list-style: none;
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.page-article ul li {
  position: relative;
  font-family: var(--f-text);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.6;
  color: var(--c-text);
  padding-left: 22px;
}

.page-article ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 8px;
  height: 1px;
  background: var(--c-green);
}

/* Адаптив текстовой страницы: рейл встаёт под статью. При 320px рейла и 72px
   зазора на 760 статье оставалось бы столько же, сколько рейлу, — читать нечем. */
@media (max-width: 760px) {
  .page-hero__content {
    min-height: 0;
    padding-top: 32px;
    padding-bottom: 32px;
  }

  .page-body {
    padding-top: 40px;
    padding-bottom: 56px;
  }

  /* minmax(0, …) обязателен и здесь: у широкого блока внутри статьи (сетка шагов,
     строка условий) min-content больше экрана, и обычный 1fr раздул бы колонку
     со всей статьёй — та же ловушка, что в карточке товара. */
  .page-body__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .page-aside {
    position: static;
    padding: 24px;
  }

  .page-cta {
    margin-top: 56px;
    padding-top: 48px;
    padding-bottom: 48px;
  }
}

/* Правый рейл: sticky-карточка отдела (104px = шапка 72 + зазор) */
.page-aside {
  position: sticky;
  top: 104px;
  background: var(--c-bg-warm);
  border: 1px solid var(--c-line);
  padding: 34px 32px;
}

.page-aside__eyebrow {
  font-family: var(--f-caps);
  font-weight: 300;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.page-aside__title {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: 27px;
  line-height: 1.2;
  color: var(--c-ink);
  margin-top: 12px;
}

.page-aside__text {
  font-family: var(--f-text);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.7;
  color: var(--c-text);
  margin-top: 12px;
}

.page-aside__contacts {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 24px;
  border-top: 1px solid var(--c-line-warm);
  padding-top: 24px;
}

.page-aside__label {
  font-family: var(--f-caps);
  font-weight: 300;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.page-aside__value {
  display: block;
  font-family: var(--f-display);
  font-size: 23px;
  color: var(--c-ink);
  margin-top: 5px;
  transition: color var(--t-fast);
}

.page-aside__value:hover {
  color: var(--c-green);
}

.page-aside__btn {
  display: block;
  text-align: center;
  font-family: var(--f-text);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-cream);
  background: var(--c-green);
  padding: 16px 24px;
  margin-top: 28px;
  transition: background .3s ease;
}

.page-aside__btn:hover {
  background: var(--c-green-dark);
}

/* Закрывающий CTA-баннер */
.page-cta {
  margin-top: 80px;
  padding: 88px var(--pad-x-wide);
  background: var(--c-green-dark);
}

.page-cta__inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
}

.page-cta__text {
  max-width: 560px;
}

.page-cta__eyebrow {
  font-family: var(--f-caps);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(242, 237, 226, .5);
}

.page-cta__title {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(30px, 3.83vw, 46px);
  line-height: 1.08;
  color: var(--c-cream);
  margin-top: 14px;
}

.page-cta__lead {
  font-family: var(--f-text);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.8;
  color: rgba(242, 237, 226, .62);
  margin-top: 16px;
}

.page-cta__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.page-cta__btn {
  font-family: var(--f-text);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-ink);
  background: var(--c-cream);
  padding: 17px 44px;
  transition: opacity .3s ease;
}

.page-cta__btn:hover {
  opacity: .85;
}

.page-cta__phone {
  font-family: var(--f-display);
  font-size: 26px;
  color: var(--c-cream);
  transition: opacity var(--t-fast);
}

.page-cta__phone:hover {
  opacity: .7;
}

/* Вторая ссылка в actions CTA — капс со стрелкой («Весь каталог», лендинг капсул) */
.page-cta__link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-caps);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(242, 237, 226, .72);
  transition: color var(--t-fast);
}

.page-cta__link:hover {
  color: var(--c-cream);
}

/* ── Капсулы: обвязка детальной /capsules/<код>/ (сетку капсул лендинга и
   «другие капсулы» стилизуют шаблоны news.list, сетку товаров — maylina_section) ── */

/* «О капсуле» — описание (DETAIL_TEXT) под сеткой товаров: текст может быть
   объёмным, короткий анонс в hero даёт PREVIEW_TEXT. Паттерн «Об изделии»
   карточки товара: тёплая секция, айброу капсом, читабельная колонка. */
.capsule-about {
  background: var(--c-bg-warm);
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}

.capsule-about__inner {
  max-width: 1296px;
  margin: 0 auto;
  padding: 84px var(--pad-x-wide) 92px;
}

.capsule-about__eyebrow {
  font-family: var(--f-caps);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.capsule-about__body {
  margin-top: 20px;
  max-width: 720px;
  font-family: var(--f-text);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.85;
  color: var(--c-text);
}

.capsule-about__body p + p {
  margin-top: 16px;
}

.capsule-about__body h2 {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: 32px;
  line-height: 1.15;
  color: var(--c-ink);
  margin: 32px 0 12px;
}

.capsule-about__body h2:first-child {
  margin-top: 0;
}

/* Контейнер тулбара и сетки товаров капсулы */
.capsule-body {
  max-width: 1440px;
  margin: 72px auto 0;
  padding: 0 var(--pad-x-wide) 96px;
}

.capsule-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 0;
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  margin-bottom: 48px;
}

/* «Все капсулы» ведёт вверх по вложенности — слева и со стрелкой влево */
.capsule-toolbar__back {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-caps);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-green);
  transition: opacity var(--t-fast);
}

.capsule-toolbar__back:hover {
  opacity: .6;
}

/* Адаптив страницы капсулы: тулбар «← Весь каталог | N моделей» переносится,
   верхние отступы обвязки ужимаются. */
@media (max-width: 760px) {
  .capsule-body {
    margin-top: 40px;
    padding-bottom: 56px;
  }

  .capsule-toolbar {
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-bottom: 32px;
  }

  .capsule-about__inner {
    padding-top: 48px;
    padding-bottom: 56px;
  }
}

/* Счётчик «N моделей» печатает шаблон maylina_section (ViewTarget) со своим
   классом; его стили живут в шаблоне комплексного каталога и на эту страницу
   не приезжают — зеркало значений в скоупе капсульного тулбара */
.capsule-toolbar .cat-toolbar__count {
  font-family: var(--f-text);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--c-muted-2);
}

/* ── Форма обратной связи: зелёная панель по макету maylina-contacts ──────
   Используется в двух местах — шаблон main.feedback/maylina на /contacts/ и
   попап [data-feedback-modal] из footer.php (поэтому стили здесь, не в шаблоне
   компонента). Прозрачности текста на тёмном — rgba от --c-cream (#F2EDE2). */

.feedback {
  background: var(--c-green);
  padding: 56px 56px 52px;
}

.feedback__eyebrow {
  font-family: var(--f-caps);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(242, 237, 226, .5);
}

.feedback__title {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(28px, 3.33vw, 40px);
  color: var(--c-cream);
  margin-top: 12px;
}

.feedback__intro {
  font-family: var(--f-text);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.75;
  color: rgba(242, 237, 226, .55);
  margin-top: 14px;
  max-width: 420px;
}

/* Тема обращения: радио-чипсы без JS (input скрыт, состояние рисует span) */
.feedback__topics {
  border: 0;
  padding: 0;
  margin-top: 34px;
}

.feedback__label {
  display: block;
  font-family: var(--f-caps);
  font-weight: 300;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(242, 237, 226, .5);
  margin-bottom: 10px;
}

.feedback__topics .feedback__label {
  margin-bottom: 14px;
}

.feedback__topics-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.feedback__topic input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.feedback__topic span {
  display: block;
  font-family: var(--f-text);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: .04em;
  color: rgba(242, 237, 226, .78);
  border: 1px solid rgba(242, 237, 226, .28);
  padding: 9px 17px;
  cursor: pointer;
  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}

.feedback__topic input:checked + span {
  color: var(--c-ink);
  background: var(--c-cream);
  border-color: var(--c-cream);
}

.feedback__topic input:focus-visible + span {
  outline: 1px solid rgba(242, 237, 226, .7);
  outline-offset: 2px;
}

/* Поля: подчёркивания на тёмном */
.feedback__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.feedback__form .feedback__field,
.feedback__form .feedback__grid {
  margin-top: 30px;
}

.feedback__grid .feedback__field {
  margin-top: 0;
}

.feedback__input {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(242, 237, 226, .25);
  border-radius: 0;
  padding: 9px 0;
  font-family: var(--f-text);
  font-weight: 300;
  font-size: 15px;
  color: var(--c-cream);
  outline: none;
  transition: border-color .25s ease;
}

.feedback__input:focus {
  border-bottom-color: rgba(242, 237, 226, .7);
}

.feedback__input::placeholder {
  color: rgba(242, 237, 226, .38);
}

.feedback__textarea {
  line-height: 1.6;
  resize: vertical;
}

.feedback__actions {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 38px;
}

.feedback__submit {
  font-family: var(--f-text);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-ink);
  background: var(--c-cream);
  border: 0;
  padding: 17px 40px;
  cursor: pointer;
  transition: opacity .3s ease;
}

.feedback__submit:hover {
  opacity: .85;
}

.feedback__hint {
  font-family: var(--f-text);
  font-weight: 300;
  font-size: 11px;
  line-height: 1.6;
  color: rgba(242, 237, 226, .4);
  max-width: 240px;
}

.feedback__hint--error {
  color: var(--c-error-soft);
}

/* Экран «Спасибо» (на /contacts/ — по ?success=hash после PRG, в попапе — по ajax) */
.feedback__done {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 48px 0;
}

.feedback__done[hidden] {
  display: none;
}

.feedback__done-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid rgba(242, 237, 226, .45);
  color: var(--c-cream);
}

.feedback__done-title {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(28px, 3.17vw, 38px);
  color: var(--c-cream);
  margin-top: 26px;
}

.feedback__done-text {
  font-family: var(--f-text);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.75;
  color: rgba(242, 237, 226, .62);
  margin-top: 12px;
  max-width: 320px;
}

.feedback__again {
  display: inline-block;
  font-family: var(--f-text);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(242, 237, 226, .7);
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(242, 237, 226, .4);
  padding: 0 0 3px;
  margin-top: 30px;
  cursor: pointer;
  transition: color var(--t-fast);
}

.feedback__again:hover {
  color: var(--c-cream);
}

/* Светлый вариант формы (попап): бежевая панель, активные элементы зелёные —
   инверсия зелёной панели (решение 22.07: попап поверх страниц слишком зелёный;
   форма на /contacts/ остаётся зелёной — там она часть композиции макета).
   Токены контролов на светлом — как у auth-форм. */
.feedback--light {
  background: var(--c-bg);
}

.feedback--light .feedback__eyebrow,
.feedback--light .feedback__label {
  color: var(--c-muted);
}

.feedback--light .feedback__title,
.feedback--light .feedback__done-title {
  color: var(--c-ink);
}

.feedback--light .feedback__intro,
.feedback--light .feedback__done-text {
  color: var(--c-text);
}

.feedback--light .feedback__topic span {
  color: var(--c-text);
  border-color: var(--c-ctrl-line);
}

.feedback--light .feedback__topic input:checked + span {
  color: var(--c-cream);
  background: var(--c-green);
  border-color: var(--c-green);
}

.feedback--light .feedback__topic input:focus-visible + span {
  outline-color: var(--c-green);
}

.feedback--light .feedback__input {
  border-bottom-color: var(--c-ctrl-line);
  color: var(--c-ink);
}

.feedback--light .feedback__input:focus {
  border-bottom-color: var(--c-green);
}

.feedback--light .feedback__input::placeholder {
  color: var(--c-ctrl-line);
}

.feedback--light .feedback__submit {
  color: var(--c-cream);
  background: var(--c-green);
  transition: background .3s ease;
}

.feedback--light .feedback__submit:hover {
  opacity: 1;
  background: var(--c-green-dark);
}

.feedback--light .feedback__hint {
  color: var(--c-muted-2);
}

.feedback--light .feedback__hint--error {
  color: var(--c-sale);
}

.feedback--light .feedback__done-mark {
  border-color: var(--c-green);
  color: var(--c-green);
}

.feedback--light .feedback__again {
  color: var(--c-green);
  border-bottom-color: var(--c-green);
}

.feedback--light .feedback__again:hover {
  color: var(--c-green-dark);
}

/* Попап формы (footer.php, [data-feedback-modal]) — паттерн модалки размеров */
.feedback-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}

/* display в классе сильнее UA-правила для [hidden] — возвращаем скрытие явно */
.feedback-modal[hidden] {
  display: none;
}

.feedback-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(14, 46, 34, .42);
  opacity: 0;
  transition: opacity .3s ease;
}

.feedback-modal__panel {
  position: relative;
  width: 660px;
  max-width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: 0 30px 80px rgba(14, 46, 34, .3);
  opacity: 0;
  transform: scale(.94);
  transition: opacity .25s ease, transform .35s cubic-bezier(.22, .61, .36, 1);
}

.feedback-modal.is-open .feedback-modal__overlay { opacity: 1; }
.feedback-modal.is-open .feedback-modal__panel { opacity: 1; transform: scale(1); }

.feedback-modal__close {
  position: absolute;
  top: 20px;
  right: 22px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: none;
  border: 0;
  color: var(--c-muted);
  cursor: pointer;
  transition: color var(--t-fast);
}

.feedback-modal__close:hover {
  color: var(--c-ink);
}

/* ── Контакты (/contacts/): реквизиты + форма, карта ─────────────────────── */
.contacts-body {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 80px;
  align-items: start;
  padding: 88px var(--pad-x-wide) 96px;
}

.contacts-info__title {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(30px, 3.83vw, 46px);
  line-height: 1.08;
  color: var(--c-ink);
  margin-top: 12px;
}

.contacts-info__text {
  font-family: var(--f-text);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.85;
  color: var(--c-text);
  margin-top: 20px;
  max-width: 420px;
}

.contacts-channels {
  display: flex;
  flex-direction: column;
  margin-top: 40px;
  border-top: 1px solid var(--c-line);
}

.contacts-channel {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  padding: 26px 0;
  border-bottom: 1px solid var(--c-line);
}

.contacts-channel--social {
  align-items: center;
  border-bottom: 0;
}

.contacts-channel__icon {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--c-green);
}

.contacts-channel--social .contacts-channel__icon {
  margin-top: 0;
}

.contacts-channel__label {
  font-family: var(--f-caps);
  font-weight: 300;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.contacts-channel__value {
  display: block;
  font-family: var(--f-display);
  font-size: 27px;
  color: var(--c-ink);
  margin-top: 7px;
}

a.contacts-channel__value {
  transition: color var(--t-fast);
}

a.contacts-channel__value:hover {
  color: var(--c-green);
}

.contacts-channel__value--addr {
  font-size: 24px;
  line-height: 1.3;
}

.contacts-channel__note {
  font-family: var(--f-text);
  font-weight: 300;
  font-size: 12px;
  color: var(--c-muted-2);
  margin-top: 5px;
}

.contacts-channel__social {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Карта */
.contacts-map {
  position: relative;
  height: 440px;
  background: var(--c-bg-warm);
  overflow: hidden;
}

.contacts-map__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.contacts-map__card {
  position: absolute;
  left: 72px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  box-shadow: 0 18px 48px rgba(14, 46, 34, .16);
  padding: 34px 38px;
  max-width: 340px;
}

.contacts-map__card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-caps);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-green);
}

.contacts-map__addr {
  font-family: var(--f-display);
  font-size: 25px;
  line-height: 1.3;
  color: var(--c-ink);
  margin-top: 16px;
}

.contacts-map__note {
  font-family: var(--f-text);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.7;
  color: var(--c-text);
  margin-top: 12px;
}

.contacts-map__route {
  display: inline-block;
  font-family: var(--f-text);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-green);
  border-bottom: 1px solid var(--c-green);
  padding-bottom: 3px;
  margin-top: 22px;
  transition: opacity var(--t-fast);
}

.contacts-map__route:hover {
  opacity: .6;
}

/* Адаптив контактов и формы обратной связи. Две колонки «реквизиты + форма»
   расходились шире экрана: сама зелёная панель формы уносила страницу
   за правый край на 333px. Ниже 1100 колонки становятся одна под другой,
   ниже 760 — ужимаются поля панели и пара полей формы «имя + телефон».
   Карточка на карте из абсолютной становится обычным блоком под картой:
   поверх карты на узком экране она закрывала бы её целиком. */
@media (max-width: 1100px) {
  .contacts-body {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

@media (max-width: 760px) {
  .contacts-body {
    padding-top: 40px;
    padding-bottom: 56px;
  }

  .feedback {
    padding: 32px 24px 28px;
  }

  .feedback__grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .feedback__grid .feedback__field + .feedback__field {
    margin-top: 30px;
  }

  /* Карта и карточка адреса перестают накладываться: iframe выходит из абсолюта
     и получает свою высоту, карточка ложится под ним обычным блоком. */
  .contacts-map {
    height: auto;
  }

  .contacts-map__frame {
    position: static;
    height: 260px;
  }

  .contacts-map__card {
    position: static;
    transform: none;
    max-width: none;
    padding: 24px;
    box-shadow: none;
    border-top: 0;
  }

  .feedback-modal__panel {
    max-height: 92vh;
  }
}

/* ── О бренде (/about/): hero с монограммой, история, подход, производство, CTA ── */

.brand-hero {
  position: relative;
  overflow: hidden;
  background: var(--c-green-dark);
  color: var(--c-cream);
}

.brand-hero__mark {
  position: absolute;
  top: -80px;
  right: -40px;
  height: 520px;
  width: auto;
  opacity: .05;
  pointer-events: none;
}

.brand-hero__content {
  position: relative;
  max-width: 896px;
  padding: 52px var(--pad-x-wide) 96px;
}

.brand-hero__title {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(38px, 5.33vw, 64px);
  line-height: 1.08;
  letter-spacing: -.01em;
  color: var(--c-cream);
  margin-top: 34px;
}

.brand-hero__lead {
  font-family: var(--f-text);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.85;
  color: rgba(242, 237, 226, .66);
  margin-top: 30px;
  max-width: 640px;
}

/* Номерные подписи секций («01 — История») */
.brand-eyebrow {
  font-family: var(--f-caps);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.brand-eyebrow--dark {
  color: rgba(242, 237, 226, .45);
}

/* 01 История: текст + фото с плашкой-слоганом */
.brand-history {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
  padding: 96px var(--pad-x-wide) 88px;
  border-bottom: 1px solid var(--c-line);
}

.brand-history__text h2 {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(30px, 3.83vw, 46px);
  line-height: 1.1;
  color: var(--c-ink);
  margin-top: 14px;
}

.brand-history__text p {
  font-family: var(--f-text);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.85;
  color: var(--c-text);
  margin-top: 18px;
}

.brand-history__text h2 + p {
  margin-top: 24px;
}

.brand-history__media {
  position: relative;
}

.brand-history__photo {
  width: 100%;
  height: 560px;
  object-fit: cover;
  object-position: 50% 18%;
  display: block;
}

.brand-history__plaque {
  position: absolute;
  left: 0;
  bottom: 0;
  max-width: 320px;
  background: var(--c-green);
  color: var(--c-cream);
  padding: 22px 28px;
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 300;
  font-size: 24px;
  line-height: 1.3;
}

/* 02 Подход: тёплый фон, текст + три ценности */
.brand-approach {
  padding: 96px var(--pad-x-wide) 88px;
  background: var(--c-bg-warm);
  border-bottom: 1px solid var(--c-line);
}

.brand-approach__text {
  max-width: 760px;
}

.brand-approach__text h2 {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(30px, 3.83vw, 46px);
  line-height: 1.1;
  color: var(--c-ink);
  margin-top: 14px;
}

.brand-approach__text p {
  font-family: var(--f-text);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.9;
  color: var(--c-text);
  margin-top: 18px;
}

.brand-approach__text h2 + p {
  margin-top: 24px;
}

.brand-values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 56px;
}

.brand-value {
  border-top: 1px solid var(--c-ctrl-line);
  padding-top: 22px;
}

.brand-value__title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 26px;
  color: var(--c-ink);
}

.brand-value__text {
  font-family: var(--f-text);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.7;
  color: var(--c-muted-warm);
  margin-top: 12px;
}

/* 03 Производство: зелёная секция со статами и фактами */
.brand-production {
  padding: 88px var(--pad-x-wide) 84px;
  background: var(--c-green);
  color: var(--c-cream);
}

.brand-production h2 {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(30px, 3.67vw, 44px);
  line-height: 1.12;
  color: var(--c-cream);
  margin-top: 12px;
  max-width: 620px;
}

.brand-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 56px;
  border-top: 1px solid rgba(242, 237, 226, .14);
  padding-top: 38px;
}

.brand-stat {
  padding-right: 40px;
}

.brand-stat__num {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1;
  color: var(--c-cream);
}

.brand-stat__num--wide {
  letter-spacing: .04em;
}

.brand-stat__label {
  font-family: var(--f-caps);
  font-weight: 300;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(242, 237, 226, .4);
  margin-top: 12px;
}

.brand-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 40px;
  margin-top: 48px;
  border-top: 1px solid rgba(242, 237, 226, .12);
  padding-top: 30px;
}

.brand-fact {
  position: relative;
  font-family: var(--f-text);
  font-weight: 300;
  font-size: 13.5px;
  color: rgba(242, 237, 226, .74);
  padding-left: 32px;
}

.brand-fact::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 18px;
  height: 1px;
  background: rgba(242, 237, 226, .4);
}

/* CTA: центрированное приглашение в каталог */
.brand-cta {
  padding: 92px var(--pad-x-wide) 100px;
  background: var(--c-green-dark);
  color: var(--c-cream);
  text-align: center;
}

.brand-cta__eyebrow {
  font-family: var(--f-caps);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: rgba(242, 237, 226, .5);
}

.brand-cta__title {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(34px, 4.33vw, 52px);
  line-height: 1.1;
  color: var(--c-cream);
  margin: 18px auto 0;
  max-width: 760px;
}

.brand-cta__lead {
  font-family: var(--f-text);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.8;
  color: rgba(242, 237, 226, .6);
  margin: 22px auto 0;
  max-width: 520px;
}

.brand-cta__actions {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 40px;
}

.brand-cta__btn {
  font-family: var(--f-text);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.brand-cta__btn--solid {
  color: var(--c-ink);
  background: var(--c-cream);
  padding: 17px 38px;
  transition: opacity .3s ease;
}

.brand-cta__btn--solid:hover {
  opacity: .85;
}

.brand-cta__btn--ghost {
  color: var(--c-cream);
  border: 1px solid rgba(242, 237, 226, .4);
  padding: 16px 37px;
  transition: border-color .3s ease;
}

.brand-cta__btn--ghost:hover {
  border-color: var(--c-cream);
}

/* Адаптив «О бренде». Самый большой вынос страницы — ряд из четырёх статов
   производства (+285px на 375): цифры вроде «12 000 м²» не ужимаются. Как
   на главной, ставим их парами. Плашка-слоган на фото была шире колонки. */
@media (max-width: 1100px) {
  .brand-history {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width: 760px) {
  .brand-hero__content {
    padding-top: 32px;
    padding-bottom: 56px;
  }

  .brand-history,
  .brand-approach,
  .brand-production,
  .brand-cta {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .brand-history__photo {
    height: 380px;
  }

  .brand-history__plaque {
    max-width: 100%;
    padding: 18px 20px;
    font-size: 20px;
  }

  .brand-values {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .brand-stats {
    grid-template-columns: 1fr 1fr;
    gap: 28px 16px;
    margin-top: 40px;
  }
}

/* End */


/* Start:/local/templates/maylina/components/bitrix/search.title/maylina/style.css?17848115921283*/
/* Выпадашка живых подсказок поиска: обёртку .title-search-result создаёт скрипт
   ядра search.title (в body, абсолютом по габаритам формы панели). Токены — main.css. */
.title-search-result {
  z-index: 1300;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  box-shadow: 0 18px 40px rgba(14, 46, 34, .14);
  display: none;
}

.search-suggest {
  padding: 8px 0 10px;
}

.search-suggest__cat {
  padding: 12px 22px 6px;
  font-family: var(--f-caps);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.search-suggest__item {
  display: block;
  padding: 9px 22px;
  font-family: var(--f-text);
  font-weight: 300;
  font-size: 14px;
  color: var(--c-ink);
  transition: background var(--t-fast);
}

.search-suggest__item:hover {
  background: var(--c-bg);
}

.search-suggest__all {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 8px 22px 4px;
  font-family: var(--f-caps);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-green);
  transition: opacity var(--t-fast);
}

.search-suggest__all:hover {
  opacity: .6;
}

/* End */


/* Start:/local/templates/maylina/components/bitrix/sale.basket.basket.line/maylina/style.css?1788807926735*/
/* Малая корзина шапки: бейдж-счётчик поверх иконки. */
.site-header__basket-holder {
  display: contents;
}

.site-header__icon--basket {
  position: relative;
}

.site-header__basket-badge {
  position: absolute;
  top: -4px;
  right: -7px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-text);
  font-weight: 400;
  font-size: 9px;
  line-height: 1;
  /* Токены шапки (main.css, .site-header): над hero главной бейдж инвертируется. */
  color: var(--hdr-badge-fg, var(--c-green));
  background: var(--hdr-badge-bg, var(--c-cream));
  border-radius: 8px;
}

/* End */


/* Start:/local/components/maylina/header.auth/templates/.default/style.css?1785319503364*/
/* Обёртка динамической области не должна участвовать в раскладке: флекс-элементом
   правой группы шапки остаётся сама ссылка. Тем же приёмом живёт холдер малой корзины. */
.site-header__auth-holder {
  display: contents;
}

/* End */


/* Start:/local/templates/maylina/components/bitrix/catalog.section.list/catalog_mega/style.css?17860248425162*/
/**
 * Панель мегаменю «Каталог» (компонент catalog.section.list, шаблон catalog_mega).
 * Битрикс подключает этот style.css сам. Открытие/закрытие — класс .is-mega-open
 * на .site-header (js/header.js). Приглушённые оттенки — в локальных переменных панели.
 */
.catalog-mega {
  --mega-link:       rgba(234, 230, 220, .45);
  --mega-link-hover: rgba(234, 230, 220, .88);
  --mega-divider:    rgba(234, 230, 220, .07);
  --mega-border:     rgba(242, 237, 226, .05);

  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--c-green);
  border-top: 1px solid var(--mega-border);
  /* Тень уходит вниз, но размытие выносит её и вверх — на шапку, к которой панель
     примыкает: вынос = размытие/2 − смещение. В макете 0 12px 40px/.45 давало 8px
     заметного тёмного ореола по низу шапки (особенно на главной, где шапка теперь
     заливается под открытое меню). Смягчено по замечанию пользователя: размытие
     40 → 32 (вынос вверх 4px вместо 8) и плотность .45 → .30; глубина снизу
     остаётся — 28px мягкой тени на контент. */
  box-shadow: 0 12px 32px rgba(0, 0, 0, .3);
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  transition: opacity var(--t-fast), transform var(--t-fast);
}

.site-header.is-mega-open .catalog-mega {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.catalog-mega__inner {
  display: flex;
  align-items: flex-start;
  padding: 48px var(--pad-x-wide) 56px;
}

.catalog-mega__col {
  flex: 1;
  min-width: 0;
  padding-right: 32px;
}

.catalog-mega__col-title {
  display: block;
  font-family: var(--f-caps);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-cream-soft);
  margin-bottom: 22px;
  transition: opacity var(--t-fast);
}

.catalog-mega__col-title:hover {
  opacity: .6;
}

.catalog-mega__links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.catalog-mega__link {
  font-family: var(--f-caps);
  font-weight: 300;
  font-size: 13px;
  color: var(--mega-link);
  transition: color .15s ease;
}

.catalog-mega__link:hover,
.catalog-mega__link.is-active {
  color: var(--mega-link-hover);
}

.catalog-mega__divider {
  width: 1px;
  align-self: stretch;
  flex-shrink: 0;
  margin-right: 32px;
  background: var(--mega-divider);
}

/* Превью справа. Пока плейсхолдер-рамка; когда придёт реальное промо — сюда ляжет <img>. */
.catalog-mega__promo {
  width: 206px;
  flex-shrink: 0;
  margin-left: 8px;
}

.catalog-mega__promo-frame {
  position: relative;
  overflow: hidden;
  width: 206px;
  height: 278px;
  background: rgba(234, 230, 220, .05);
  border: 1px solid rgba(234, 230, 220, .10);
}

.catalog-mega__promo img {
  width: 206px;
  height: 278px;
  object-fit: cover;
  object-position: top;
}

/* Стек превью разделов: картинки лежат друг на друге, видима одна — смена
   кроссфейдом. Класс is-active носит <picture> (она display: contents),
   поэтому позиционируется и гаснет сам <img>. */
.catalog-mega__preview img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity .4s ease;
}

.catalog-mega__preview.is-active img {
  opacity: 1;
}

/* ── Узкий экран: панель перестаёт быть выпадающей и становится содержимым
   дровера шапки (main.css) — показывать и прятать её теперь дело обёртки,
   поэтому сама панель здесь всегда видима. Колонки разворачиваются в столбец,
   вертикальные разделители и превью-слот не нужны: превью занимает пол-экрана,
   а наведения, которым оно живёт, на таче нет. ── */
@media (max-width: 760px) {
  .catalog-mega {
    position: static;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    border-top: 0;
    box-shadow: none;
  }

  .catalog-mega__inner {
    flex-direction: column;
    align-items: stretch;
    padding: 4px var(--pad-x-wide) 32px;
  }

  .catalog-mega__col {
    padding-right: 0;
    padding-top: 22px;
  }

  .catalog-mega__col-title {
    margin-bottom: 14px;
  }

  .catalog-mega__links {
    gap: 0;
  }

  /* Строка-ссылка под палец: высота 44 набирается паддингами. */
  .catalog-mega__link {
    padding: 12px 0;
    font-size: 14px;
  }

  .catalog-mega__divider,
  .catalog-mega__promo {
    display: none;
  }
}

/* End */


/* Start:/local/templates/maylina/styles.css?17860263714481*/
/**
 * Maylina — стили контента: классы, которыми набраны включаемые области
 * (include/*_article.php и др.). Файл двойного назначения:
 * публичным страницам его автоподключает ядро (в бандл, после main.css),
 * а визуальный редактор инлайнит в свой iframe и строит по его классам
 * выпадающий список «Стили» (подписи классов — в .styles.php рядом).
 * Токены var(--…) публичке даёт main.css, редактору — editor.css.
 *
 * Селекторы-пары «.класс, .page-article .класс»: одиночная часть работает
 * в iframe редактора (там контент области живёт без обёртки .page-article),
 * скоупная — держит специфичность выше правила «.page-article p» из main.css,
 * независимо от порядка файлов в бандле.
 */

/* Лид статьи */
.article-lead,
.page-article .article-lead {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: 30px;
  line-height: 1.42;
  color: var(--c-ink);
}

/* Примечание к разделу */
p.article-note,
.page-article p.article-note {
  font-size: 14px;
  line-height: 1.8;
  color: var(--c-muted-2);
  margin-top: 14px;
}

/* Акцентная плашка на зелёном */
.article-callout {
  display: flex;
  gap: 20px;
  align-items: center;
  margin-top: 44px;
  background: var(--c-green);
  padding: 30px 34px;
}

.article-callout__accent {
  flex-shrink: 0;
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 300;
  font-size: 23px;
  color: var(--c-cream);
}

.article-callout__text {
  font-family: var(--f-text);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(242, 237, 226, .72);
  border-left: 1px solid rgba(242, 237, 226, .18);
  padding-left: 20px;
}

/* Условия строками «подпись — значение» */
.article-terms {
  margin-top: 28px;
  border-top: 1px solid var(--c-line);
}

.article-terms__row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  align-items: baseline;
  padding: 20px 0;
  border-bottom: 1px solid var(--c-line);
}

.article-terms__label {
  font-family: var(--f-caps);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.article-terms__value {
  font-family: var(--f-text);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.6;
  color: var(--c-ink);
}

/* Шаги 01–04 сеткой 2×2 */
.article-steps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px 48px;
  margin-top: 34px;
}

.article-step {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.article-step__num {
  flex-shrink: 0;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(30px, 3.83vw, 46px);
  line-height: .9;
  color: var(--c-green);
}

.article-step__title {
  font-family: var(--f-display);
  font-size: 22px;
  color: var(--c-ink);
}

.article-step__text {
  font-family: var(--f-text);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.7;
  color: var(--c-text);
  margin-top: 7px;
}

/* Адаптив контентных блоков. Обе сетки заданы в колонках фиксированной ширины
   (подпись условия — 200px, шаги — два столбца) и на узком экране не ужимаются:
   строку условий разворачиваем в две, шаги — в один столбец. Контрольная точка
   та же, что у всего шаблона (см. main.css, «Адаптив: контрольные точки»). */
@media (max-width: 760px) {
  .article-terms__row,
  .page-article .article-terms__row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 16px 0;
  }

  .article-steps,
  .page-article .article-steps {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .article-callout,
  .page-article .article-callout {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 24px;
  }

  .article-callout__text,
  .page-article .article-callout__text {
    border-left: 0;
    padding-left: 0;
  }
}

/* End */
/* /local/templates/maylina/css/main.css?1789482032113996 */
/* /local/templates/maylina/components/bitrix/search.title/maylina/style.css?17848115921283 */
/* /local/templates/maylina/components/bitrix/sale.basket.basket.line/maylina/style.css?1788807926735 */
/* /local/components/maylina/header.auth/templates/.default/style.css?1785319503364 */
/* /local/templates/maylina/components/bitrix/catalog.section.list/catalog_mega/style.css?17860248425162 */
/* /local/templates/maylina/styles.css?17860263714481 */