/* Start:/local/templates/maylina/css/main.css?178542829495792*/
/**
 * 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-header) 96px;
  max-width: 1240px;
  margin: 0 auto;
}

.cart-page__title {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: 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: 24px 24px 56px; }
  .cart-page__title { font-size: 36px; }

  .cart-item {
    grid-template-columns: 72px 1fr 32px;
    grid-template-areas:
      "media info remove"
      "media qty sum";
    row-gap: 12px;
  }

  .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-header) 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: 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-header) 96px;
  max-width: 1240px;
  margin: 0 auto;
}

.personal__title {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: 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-header) 96px;
  max-width: 1240px;
  margin: 0 auto;
}

.orders__title {
  margin-top: 20px;
  font-family: var(--f-display);
  font-weight: 300;
  font-size: 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-header) 96px;
  max-width: 1240px;
  margin: 0 auto;
}

.profile__title {
  margin-top: 20px;
  font-family: var(--f-display);
  font-weight: 300;
  font-size: 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);
}

/* ── Скин оформления заказа (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-header) 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: 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: 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);
}

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

: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;

  /* Сетка и отступы */
  --pad-x: 56px;              /* горизонтальный отступ секций */
  --pad-x-header: 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;                               /* смена фона шапки */
}

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

* {
  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;
}

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

/* Обёртка <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. Прозрачное состояние главной (.site-header--hero) и смена
 * фона при скролле оживут в блоке 3 (hero) + отдельным JS-шагом блока 1.
 */

.site-header {
  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-header);
  transition: padding .4s ease;
}

/* Левая навигация — вывод компонента 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(--c-cream-soft);
  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);
}

/* Центр — монограмма + словесный знак. Транзишны — для компактного состояния
   (is-compact): монограмма ужимается, вордмарк схлопывается. */
.site-header__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: gap .4s ease;
}

.site-header__monogram {
  height: 40px;
  width: auto;
  transition: height .4s ease;
}

.site-header__wordmark {
  height: 18px;
  width: auto;
  transition: height .4s ease, opacity .25s ease;
}

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

.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(--c-green);
  background: var(--c-cream);
  border-radius: 8px;
}

.site-header__divider {
  width: 1px;
  height: 13px;
  background: rgba(234, 230, 220, .25);
}

/* ── Поиск в шапке (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(--c-cream-soft);
  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 (главная). Читаемость держат тени, скрима нет. */
.site-header--hero {
  background: transparent;
  border-bottom-color: transparent;
}

.site-header--hero .site-header__nav-link,
.site-header--hero .site-header__login {
  text-shadow: 0 1px 10px rgba(0, 0, 0, .25);
}

.site-header--hero .site-header__icon,
.site-header--hero .site-header__brand img {
  filter: drop-shadow(0 1px 8px rgba(0, 0, 0, .2));
}

/* Главная: прокрутили за 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;
}

.site-header--hero.is-scrolled .site-header__nav-link,
.site-header--hero.is-scrolled .site-header__login,
.site-header--hero.is-search-open .site-header__nav-link,
.site-header--hero.is-search-open .site-header__login,
.site-header--hero.is-mega-open .site-header__nav-link,
.site-header--hero.is-mega-open .site-header__login {
  text-shadow: none;
}
.site-header--hero.is-scrolled .site-header__icon,
.site-header--hero.is-scrolled .site-header__brand img,
.site-header--hero.is-search-open .site-header__icon,
.site-header--hero.is-search-open .site-header__brand img,
.site-header--hero.is-mega-open .site-header__icon,
.site-header--hero.is-mega-open .site-header__brand img {
  filter: none;
}

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

.site-header.is-compact .site-header__brand {
  gap: 0;
}

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

.site-header.is-compact .site-header__wordmark {
  height: 0;
  opacity: 0;
}

/* Скрим-градиент под меню на главной (поверх hero, за шапкой) — читаемость шапки. */
.site-header__scrim {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(180deg, rgba(14, 53, 40, .30) 0%, rgba(14, 53, 40, 0) 100%);
  z-index: 99;
  pointer-events: none;
}

/* Внутренние страницы: контент не должен уезжать под фикс-шапку.
   На главной отступа нет — hero лежит под шапкой. Высоту уточним по скриншоту. */
.page-inner .site-main {
  padding-top: 96px;
}

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

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

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

/* Бренд + слоган */
.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;
}

/* Колонки-меню */
.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);
}

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

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

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

/* Затемнение поверх видео — гасит пересвет кадров, держит читаемость шапки. */
.hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .2);
  pointer-events: none;
}

/* Плейсхолдер под видео — виден, пока нет video/hero-bg.mp4 (или видео не загрузилось). */
/* Разделитель между hero и категориями (по макету). */
.home-seam {
  height: 48px;
  background: var(--c-bg-warm);
}

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

.home-cats {
  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: 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: 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: 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;
}

/* ── 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
   (96px): верхний паддинг и 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: 324px;
  padding: 54px 72px 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: 440px;
}

.page-hero__title {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: 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 72px 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);
}

/* Правый рейл: 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 72px;
  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: 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 72px 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 72px 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 моделей» печатает шаблон 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: 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: 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 72px 96px;
}

.contacts-info__title {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: 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;
}

/* ── О бренде (/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 72px 96px;
}

.brand-hero__title {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: 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 72px 88px;
  border-bottom: 1px solid var(--c-line);
}

.brand-history__text h2 {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: 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 72px 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: 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 72px 84px;
  background: var(--c-green);
  color: var(--c-cream);
}

.brand-production h2 {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: 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: 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 72px 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: 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);
}

/* 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?1784653793569*/
/* Малая корзина шапки: бейдж-счётчик поверх иконки. */
.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;
  color: var(--c-green);
  background: 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?17853327163783*/
/**
 * Панель мегаменю «Каталог» (компонент 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-header) 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;
}

/* End */


/* Start:/local/templates/maylina/styles.css?17847972793378*/
/**
 * 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: 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;
}

/* End */
/* /local/templates/maylina/css/main.css?178542829495792 */
/* /local/templates/maylina/components/bitrix/search.title/maylina/style.css?17848115921283 */
/* /local/templates/maylina/components/bitrix/sale.basket.basket.line/maylina/style.css?1784653793569 */
/* /local/components/maylina/header.auth/templates/.default/style.css?1785319503364 */
/* /local/templates/maylina/components/bitrix/catalog.section.list/catalog_mega/style.css?17853327163783 */
/* /local/templates/maylina/styles.css?17847972793378 */