/* ==========================================================================
   COMPONENTS — переиспользуемые элементы интерфейса

   Правило поверхностей плиточной системы:
   • белые карточки живут на сером фоне страницы;
   • светло-серые панели (--c-surface-2) живут внутри белых плит.
   ========================================================================== */

/* --- Иконки --------------------------------------------------------------- */
.icon {
  width: 24px;
  height: 24px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon--sm { width: 18px; height: 18px; }
.icon--lg { width: 32px; height: 32px; }

/* --- Заглушки изображений -------------------------------------------------- */
/* margin не задаём: сброс figure уже в base.css, а собственное правило
   перебивало бы утилиты отступов вроде .mt-8 */
.ph {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--c-surface-2);
  border-radius: var(--r-md);
  aspect-ratio: var(--ph-ratio, 16 / 9);
}

.ph::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .10;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none' stroke='%230D0F13' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='60' cy='52' r='14'/%3E%3Cpath d='M60 26v-8M60 94v-8M34 52h-8M94 52h-8'/%3E%3Cpath d='m41.6 33.6-5.7-5.7M84.1 76.1l-5.7-5.7M41.6 70.4l-5.7 5.7M84.1 27.9l-5.7 5.7'/%3E%3Cpath d='M20 100h80'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: min(96px, 30%);
}

.ph img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Реальное изображение отменяет знак-заглушку */
.ph--filled::after { display: none; }

@supports selector(.ph:has(img)) {
  .ph:has(img)::after { display: none; }
}

.ph--21x9 { --ph-ratio: 21 / 9; }
.ph--16x9 { --ph-ratio: 16 / 9; }
.ph--3x2  { --ph-ratio: 3 / 2; }
.ph--4x3  { --ph-ratio: 4 / 3; }
.ph--1x1  { --ph-ratio: 1 / 1; }
.ph--4x5  { --ph-ratio: 4 / 5; }
.ph--map  { --ph-ratio: 21 / 9; border-radius: var(--r-lg); }
.map-embed { overflow: hidden; aspect-ratio: 21 / 9; border-radius: var(--r-lg); }
.map-embed iframe { display: block; width: 100%; height: 100%; border: 0; }
.ph--fill { --ph-ratio: auto; height: 100%; }
.ph--flat { border-radius: 0; }

/* Заглушка, стоящая прямо на сером фоне страницы, — сама себе плита */
.ph--plate {
  background: var(--c-surface);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}

/* Заглушка-подложка: занимает весь родительский блок (hero) */
.ph--cover {
  position: absolute;
  inset: 0;
  height: 100%;
  --ph-ratio: auto;
  border-radius: 0;
}

@media (max-width: 767px) {
  .ph--map { --ph-ratio: 4 / 3; }
  .map-embed { aspect-ratio: 4 / 3; }
}

/* --- Кнопки --------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 48px;
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-family: var(--font-head);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  line-height: 1.3;
  text-align: center;
  cursor: pointer;
  transition:
    background-color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease);
}

.btn .icon { width: 18px; height: 18px; }

.btn--primary {
  background: var(--c-brand);
  border-color: var(--c-brand);
  color: var(--c-on-dark);
}

.btn--primary:hover {
  background: var(--c-brand-deep);
  border-color: var(--c-brand-deep);
}

.btn--secondary {
  background: var(--c-surface);
  border-color: var(--c-line);
  color: var(--c-heading);
}

.btn--secondary:hover {
  border-color: var(--c-heading);
}

.btn--ghost {
  background: transparent;
  color: var(--c-heading);
}

.btn--ghost:hover { background: var(--c-surface-2); }

.btn--accent {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-heading);
}

.btn--accent:hover {
  background: var(--c-accent-deep);
  border-color: var(--c-accent-deep);
}

/* Зелёная кнопка на тёмной панели CTA */
.btn--accent-green {
  background: var(--c-brand-mid);
  border-color: var(--c-brand-mid);
  color: var(--c-on-dark);
}

.btn--accent-green:hover {
  background: var(--c-brand);
  border-color: var(--c-brand);
}

.btn--on-dark {
  background: var(--c-surface);
  border-color: var(--c-surface);
  color: var(--c-heading);
}

.btn--on-dark:hover {
  background: var(--c-accent);
  border-color: var(--c-accent);
}

.btn--on-dark-outline {
  background: transparent;
  border-color: var(--c-on-dark-line);
  color: var(--c-on-dark);
}

.btn--on-dark-outline:hover {
  border-color: var(--c-accent);
  color: var(--c-accent);
}

.btn--sm { min-height: 40px; padding: 8px 16px; font-size: var(--fs-caption); }
.btn--lg { min-height: 56px; padding: 16px 30px; font-size: var(--fs-body); }
.btn--full { width: 100%; }

.btn:disabled,
.btn[aria-disabled='true'] {
  opacity: .4;
  cursor: not-allowed;
  box-shadow: none;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

@media (max-width: 559px) {
  .btn-row .btn { width: 100%; }
}

/* --- Ссылка со стрелкой ---------------------------------------------------- */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-head);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--c-heading);
  padding-bottom: 2px;
  background-image: linear-gradient(var(--c-accent), var(--c-accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 3px;
  transition: background-size var(--t-base) var(--ease);
}

.link-arrow:hover { background-size: 100% 3px; }

.link-arrow .icon {
  width: 18px;
  height: 18px;
  transition: transform var(--t-base) var(--ease);
}

.link-arrow:hover .icon { transform: translateX(4px); }

.link-arrow--on-dark { color: var(--c-on-dark); }

/* --- Чипсы ---------------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: 10px 20px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: var(--c-surface);
  color: var(--c-text);
  font-size: var(--fs-small);
  font-weight: 400;
  cursor: pointer;
  transition:
    background-color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
}

.chip:hover {
  border-color: var(--c-heading);
  color: var(--c-heading);
}

.chip.is-active,
.chip[aria-current='true'],
.chip[aria-pressed='true'] {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-heading);
  font-weight: var(--fw-medium);
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

/* Чипсы внутри белой плиты нуждаются в собственной подложке */
.block .chip { background: var(--c-surface-2); }
.block .chip.is-active,
.block .chip[aria-current='true'],
.block .chip[aria-pressed='true'] { background: var(--c-accent); }

/* --- Теги (нередактируемые метки) ------------------------------------------ */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: var(--c-surface-2);
  font-size: var(--fs-caption);
  color: var(--c-text);
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

/* --- Поля формы ------------------------------------------------------------ */
.field { display: block; }

.field__label {
  display: block;
  margin-bottom: var(--s-2);
  font-family: var(--font-head);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--c-muted);
}

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

.input,
.textarea,
.select {
  width: 100%;
  min-height: 52px;
  padding: 13px 16px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: var(--c-surface-2);
  color: var(--c-text);
  font-size: var(--fs-body);
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}

.input::placeholder,
.textarea::placeholder { color: var(--c-muted); opacity: 1; }

.input:hover,
.textarea:hover,
.select:hover { border-color: var(--c-line); }

.input:focus,
.textarea:focus,
.select:focus {
  border-color: var(--c-heading);
  background: var(--c-surface);
}

.textarea {
  min-height: 132px;
  resize: vertical;
  line-height: 1.5;
}

.select {
  appearance: none;
  padding-right: 44px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23656B77' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 20px;
}

.field__hint {
  margin-top: var(--s-2);
  font-size: var(--fs-caption);
  color: var(--c-muted);
}

.field__error {
  display: none;
  margin-top: var(--s-2);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--c-error);
}

.field.is-invalid .input,
.field.is-invalid .textarea,
.field.is-invalid .select {
  border-color: var(--c-error);
  background: var(--c-error-bg);
}

.field.is-invalid .field__error { display: block; }

.field.is-valid .input,
.field.is-valid .textarea,
.field.is-valid .select { border-color: var(--c-success); }

/* Поля на тёмном фоне */
.form--on-dark .input,
.form--on-dark .textarea,
.form--on-dark .select {
  background: var(--c-on-dark-field);
  border-color: var(--c-on-dark-line);
  color: var(--c-on-dark);
}

.form--on-dark .input::placeholder,
.form--on-dark .textarea::placeholder { color: var(--c-on-dark-muted); }

.form--on-dark .input:hover,
.form--on-dark .textarea:hover,
.form--on-dark .select:hover { border-color: var(--c-on-dark-muted); }

.form--on-dark .input:focus,
.form--on-dark .textarea:focus,
.form--on-dark .select:focus {
  border-color: var(--c-accent);
  background: var(--c-on-dark-field);
}

.form--on-dark .field__label,
.form--on-dark .field__hint { color: var(--c-on-dark-muted); }

.form--on-dark .select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A6B6B4' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

.form--on-dark .field.is-invalid .input,
.form--on-dark .field.is-invalid .textarea {
  border-color: var(--c-accent);
  background: var(--c-on-dark-field);
}

.form--on-dark .field__error { color: var(--c-accent); }

/* --- Чекбокс --------------------------------------------------------------- */
.checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  cursor: pointer;
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--c-muted);
}

.checkbox input {
  appearance: none;
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0;
  border: 1px solid var(--c-line);
  border-radius: 6px;
  background: var(--c-surface);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.checkbox input:hover { border-color: var(--c-heading); }

.checkbox input:checked {
  background: var(--c-heading) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 12.5 5 5 10-11'/%3E%3C/svg%3E") center / 15px no-repeat;
  border-color: var(--c-heading);
}

.checkbox__text { padding-top: 1px; }

.checkbox a {
  color: var(--c-heading);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.field.is-invalid .checkbox input { border-color: var(--c-error); }

.form--on-dark .checkbox { color: var(--c-on-dark-muted); }
.form--on-dark .checkbox input {
  background-color: var(--c-on-dark-field);
  border-color: var(--c-on-dark-line);
}
.form--on-dark .checkbox input:checked {
  background-color: var(--c-accent);
  border-color: var(--c-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23002F2F' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 12.5 5 5 10-11'/%3E%3C/svg%3E");
}
.form--on-dark .checkbox a { color: var(--c-on-dark); }

/* --- Радиогруппа ----------------------------------------------------------- */
.radio {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  cursor: pointer;
  font-size: var(--fs-small);
}

.radio input {
  appearance: none;
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  background: var(--c-surface);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), border-width var(--t-fast) var(--ease);
}

.radio input:hover { border-color: var(--c-heading); }

.radio input:checked {
  border-color: var(--c-heading);
  border-width: 6px;
}

/* --- Форма: раскладка и состояния ------------------------------------------ */
.form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4);
}

.form__grid--single { grid-template-columns: 1fr; }
.form__full { grid-column: 1 / -1; }

.form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: var(--s-5);
}

.form__status {
  display: none;
  margin-top: var(--s-4);
  padding: 14px 18px;
  border-radius: var(--r-sm);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
}

.form.is-sent .form__status {
  display: block;
  background: var(--c-success-bg);
  color: var(--c-success);
}

.form--on-dark.is-sent .form__status {
  background: var(--c-on-dark-field);
  color: var(--c-accent);
}

@media (max-width: 559px) {
  .form__grid { grid-template-columns: 1fr; }
  .form__foot { flex-direction: column; align-items: stretch; }
  .form__foot .btn { width: 100%; }
}

/* --- Карточка товара -------------------------------------------------------- */
.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-4);
  background: var(--c-surface);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}

.product-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-2);
}

.product-card .ph img { transition: transform var(--t-slow) var(--ease); }
.product-card:hover .ph img { transform: scale(1.04); }

/* Единое изображение для карточек во всех листингах каталога. */
.product-card .ph:not(.ph--filled) {
  background: url('../img/generated/product-swing-main.png') center / cover no-repeat;
}

.product-card .ph:not(.ph--filled)::after { display: none; }

.product-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  flex: 1;
}

.product-card__sku {
  font-family: var(--font-head);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}

.product-card__title {
  font-family: var(--font-head);
  font-size: var(--fs-h4);
  font-weight: var(--fw-head);
  line-height: 1.3;
  letter-spacing: var(--ls-head);
  color: var(--c-heading);
}

.product-card__title a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.product-card__spec {
  margin-top: auto;
  font-size: var(--fs-caption);
  color: var(--c-muted);
}

.product-card .btn {
  position: relative;
  z-index: var(--z-base);
}

/* Вид «список»: медиа — текст — кнопка в одну строку */
.product-grid.is-list .product-card {
  flex-direction: row;
  align-items: center;
  gap: var(--s-5);
  padding: var(--s-4) var(--s-5) var(--s-4) var(--s-4);
}

.product-grid.is-list .product-card .ph {
  width: 200px;
  flex: none;
  --ph-ratio: 4 / 3;
}

.product-grid.is-list .product-card__body {
  flex: 1;
  min-width: 0;
  gap: var(--s-1);
}

.product-grid.is-list .product-card__title { font-size: var(--fs-h4); }
.product-grid.is-list .product-card__spec { margin-top: var(--s-2); }

.product-grid.is-list .product-card .btn {
  flex: none;
  width: 200px;
}

@media (max-width: 1023px) {
  .product-grid.is-list .product-card .ph { width: 160px; }
  .product-grid.is-list .product-card .btn { width: 168px; }
}

@media (max-width: 767px) {
  .product-grid.is-list .product-card { flex-direction: column; align-items: stretch; padding: var(--s-4); }
  .product-grid.is-list .product-card .ph { width: 100%; }
  .product-grid.is-list .product-card .btn { width: 100%; }
}

/* --- Плитка категории (бенто) ---------------------------------------------- */
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-5);
  background: var(--c-surface);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-1);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}

.tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-2);
}

.tile .ph { background: var(--c-surface-2); }
.tile .ph img { transition: transform var(--t-slow) var(--ease); }
.tile:hover .ph img { transform: scale(1.04); }

.tile__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
}

.tile__title {
  min-width: 0;
  hyphens: auto;
  font-family: var(--font-head);
  font-size: clamp(1.0625rem, 0.95rem + 0.45vw, 1.25rem);
  font-weight: var(--fw-head);
  line-height: 1.2;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--c-heading);
}

.tile__title a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.tile__text {
  font-size: var(--fs-small);
  color: var(--c-muted);
}

.tile__arrow {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  background: var(--c-surface-2);
  color: var(--c-heading);
  transition: background-color var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}

.tile:hover .tile__arrow {
  background: var(--c-accent);
  transform: translate(3px, -3px);
}

.tile--dark {
  background: var(--c-brand);
  color: var(--c-on-dark);
}

.tile--dark .tile__title { color: var(--c-on-dark); }
.tile--dark .tile__text { color: var(--c-on-dark-muted); }
.tile--dark .ph { background: rgba(255, 255, 255, .07); }
.tile--dark .ph::after { filter: invert(1); opacity: .18; }
.tile--dark .tile__arrow { background: rgba(255, 255, 255, .12); color: var(--c-on-dark); }
.tile--dark:hover .tile__arrow { background: var(--c-accent); color: var(--c-heading); }

/* --- Карточка направления/сферы -------------------------------------------- */
.mini-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-5);
  background: var(--c-surface);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}

.mini-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-2);
}

.mini-card__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--r-sm);
  background: var(--c-surface-2);
  color: var(--c-heading);
}

.mini-card__title {
  font-family: var(--font-head);
  font-size: var(--fs-h4);
  font-weight: var(--fw-head);
  letter-spacing: var(--ls-head);
  color: var(--c-heading);
}

.mini-card__title a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.mini-card__text {
  font-size: var(--fs-small);
  color: var(--c-muted);
}

/* --- Пункт «преимущество» --------------------------------------------------- */
.feature {
  display: flex;
  gap: var(--s-4);
  align-items: flex-start;
}

.feature > div { min-width: 0; }

.feature__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 50%;
  background: var(--c-accent);
  color: var(--c-heading);
}

.feature__title {
  font-family: var(--font-head);
  font-size: var(--fs-h4);
  font-weight: var(--fw-head);
  letter-spacing: var(--ls-head);
  color: var(--c-heading);
  margin-bottom: var(--s-2);
}

.feature__text {
  font-size: var(--fs-small);
  color: var(--c-muted);
}

.block--dark .feature__title { color: var(--c-on-dark); }
.block--dark .feature__text { color: var(--c-on-dark-muted); }

/* --- Метрика ---------------------------------------------------------------- */
.metric__value {
  display: block;
  font-family: var(--font-head);
  font-size: var(--fs-metric);
  font-weight: var(--fw-head);
  line-height: 1;
  letter-spacing: var(--ls-head);
  color: var(--c-heading);
  font-variant-numeric: tabular-nums;
}

.metric__label {
  display: block;
  margin-top: var(--s-3);
  font-size: var(--fs-caption);
  color: var(--c-muted);
  max-width: 18ch;
}

.metric--sm .metric__value { font-size: var(--fs-metric-sm); }

.block--dark .metric__value,
.hero .metric__value { color: var(--c-on-dark); }
.block--dark .metric__label,
.hero .metric__label { color: var(--c-on-dark-muted); }

.metric-row {
  display: grid;
  grid-template-columns: repeat(var(--metric-cols, 4), minmax(0, 1fr));
  gap: var(--grid-gap);
}

/* Метрики в две колонки: строки разделены линией, подписи выровнены по низу
   ячейки — иначе разная длина подписей ломает ряд. */
.metric-row--divided {
  gap: 0;
  border-top: 1px solid var(--c-line);
}

.metric-row--divided .metric {
  display: flex;
  flex-direction: column;
  padding: var(--s-5) var(--s-5) var(--s-5) 0;
  border-bottom: 1px solid var(--c-line);
}

.metric-row--divided .metric__label { margin-top: auto; padding-top: var(--s-3); }
.metric-row--divided .metric:nth-child(odd) { padding-right: var(--s-6); }

@media (max-width: 767px) {
  .metric-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-4); }
}

/* --- Шаг процесса ----------------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(var(--steps-cols, 5), minmax(0, 1fr));
  gap: var(--grid-gap);
  position: relative;
}

.step { position: relative; }

.step__dot {
  position: relative;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-bottom: var(--s-4);
  border-radius: 50%;
  background: var(--c-accent);
}

.step__num {
  display: block;
  font-family: var(--font-head);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--s-2);
}

.step__title {
  font-family: var(--font-head);
  font-size: var(--fs-h4);
  font-weight: var(--fw-head);
  letter-spacing: var(--ls-head);
  color: var(--c-heading);
  margin-bottom: var(--s-2);
}

.step__text {
  font-size: var(--fs-small);
  color: var(--c-muted);
}

/* Нить, соединяющая шаги */
.steps__line {
  position: absolute;
  top: 9px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--c-line);
}

.steps__line::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--c-accent);
  transform-origin: left center;
}

.js-reveal-on .steps__line::before {
  transform: scaleX(0);
  transition: transform 900ms var(--ease);
}

.js-reveal-on .steps.is-revealed .steps__line::before { transform: scaleX(1); }

@media (max-width: 1023px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--grid-gap); }
  .steps__line { display: none; }
}

@media (max-width: 559px) {
  .steps { grid-template-columns: 1fr; }
}

/* --- Крупные шаги производства (список) ------------------------------------- */
.step-row {
  display: grid;
  grid-template-columns: 80px 200px 1fr;
  gap: var(--s-6);
  align-items: center;
  padding-block: var(--s-5);
  border-top: 1px solid var(--c-line);
}

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

.step-row__num {
  font-family: var(--font-head);
  font-size: var(--fs-step);
  font-weight: var(--fw-head);
  line-height: 1;
  color: var(--c-heading);
  font-variant-numeric: tabular-nums;
}

.step-row__title {
  font-family: var(--font-head);
  font-size: var(--fs-h4);
  font-weight: var(--fw-head);
  letter-spacing: var(--ls-head);
  color: var(--c-heading);
  margin-bottom: var(--s-2);
}

.step-row__text {
  font-size: var(--fs-small);
  color: var(--c-muted);
}

@media (max-width: 1023px) {
  .step-row { grid-template-columns: 56px 160px 1fr; gap: var(--s-4); }
}

@media (max-width: 767px) {
  .step-row { grid-template-columns: 48px 1fr; gap: var(--s-4); }
  .step-row .ph { grid-column: 1 / -1; order: 3; }
}

/* --- Аккордеон -------------------------------------------------------------- */
.accordion { border-top: 1px solid var(--c-line); }

.accordion__item { border-bottom: 1px solid var(--c-line); }

.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  width: 100%;
  padding: var(--s-5) 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-head);
  font-size: var(--fs-h4);
  font-weight: var(--fw-head);
  letter-spacing: var(--ls-head);
  color: var(--c-heading);
  transition: color var(--t-fast) var(--ease);
}

.accordion__trigger:hover { color: var(--c-muted); }

.accordion__mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  background: var(--c-surface-2);
  transition: transform var(--t-base) var(--ease), background-color var(--t-base) var(--ease);
}

.accordion__trigger[aria-expanded='true'] .accordion__mark {
  transform: rotate(180deg);
  background: var(--c-accent);
}

.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-base) var(--ease);
}

.accordion__panel > div { overflow: hidden; }

.accordion__item.is-open .accordion__panel { grid-template-rows: 1fr; }

.accordion__body {
  padding-bottom: var(--s-5);
  color: var(--c-muted);
  max-width: var(--measure);
}

/* --- Табы ------------------------------------------------------------------- */
.tabs__list {
  position: relative;
  display: flex;
  gap: var(--s-6);
  border-bottom: 1px solid var(--c-line);
  overflow-x: auto;
  scrollbar-width: none;
}

.tabs__list::-webkit-scrollbar { display: none; }

.tabs__tab {
  position: relative;
  padding: var(--s-4) 0;
  white-space: nowrap;
  font-family: var(--font-head);
  font-size: var(--fs-small);
  font-weight: 400;
  color: var(--c-muted);
  cursor: pointer;
  transition: color var(--t-fast) var(--ease);
}

.tabs__tab:hover { color: var(--c-heading); }

.tabs__tab[aria-selected='true'] {
  color: var(--c-heading);
  font-weight: var(--fw-medium);
}

.tabs__ink {
  position: absolute;
  bottom: -1px;
  left: 0;
  height: 3px;
  width: 0;
  background: var(--c-accent);
  transition: transform var(--t-base) var(--ease), width var(--t-base) var(--ease);
}

.tabs__panel[hidden] { display: none; }

.tabs__panel {
  padding-top: var(--s-6);
  animation: fade-in var(--t-base) var(--ease);
}

/* Во вкладках текст занимает всю ширину плиты, а не колонку в 68ch */
.tabs__panel p,
.tabs__panel .prose { max-width: none; }

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

/* --- Хлебные крошки ---------------------------------------------------------- */
.breadcrumbs {
  padding-block: var(--s-4);
  font-size: var(--fs-caption);
  color: var(--c-muted);
}

.breadcrumbs--inline { padding-block: 0; }

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  list-style: none;
  padding: 0;
  margin: 0;
}

.breadcrumbs li { display: flex; align-items: center; gap: var(--s-2); }

.breadcrumbs li + li::before {
  content: '/';
  color: var(--c-line);
}

.breadcrumbs a { transition: color var(--t-fast) var(--ease); }
.breadcrumbs a:hover { color: var(--c-heading); }
.breadcrumbs [aria-current='page'] { color: var(--c-text); }

/* --- Пагинация ---------------------------------------------------------------- */
.pagination {
  display: flex;
  justify-content: center;
  gap: var(--s-2);
  margin-top: var(--s-7);
}

.pagination--inline { margin-top: 0; }

.pagination a,
.pagination span {
  display: grid;
  place-items: center;
  min-width: 48px;
  height: 48px;
  padding-inline: var(--s-3);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  font-family: var(--font-head);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.pagination a:hover { background: var(--c-surface-3); }

.pagination [aria-current='page'] {
  background: var(--c-heading);
  color: var(--c-on-dark);
}

.pagination__gap { background: none; color: var(--c-muted); }

/* --- Переключатель вида -------------------------------------------------------- */
.view-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--r-sm);
  background: var(--c-surface);
}

.view-toggle button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 40px;
  border-radius: 7px;
  color: var(--c-muted);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.view-toggle button:hover { color: var(--c-heading); }

.view-toggle button[aria-pressed='true'] {
  background: var(--c-heading);
  color: var(--c-on-dark);
}

/* --- Таблица характеристик / реквизитов ---------------------------------------- */
.spec-table th,
.spec-table td {
  padding: 14px 0;
  text-align: left;
  font-size: var(--fs-small);
  vertical-align: top;
  border-bottom: 1px solid var(--c-line);
}

.spec-table th {
  width: 42%;
  font-weight: 400;
  color: var(--c-muted);
}

.spec-table td {
  font-weight: var(--fw-medium);
  color: var(--c-text);
}

.spec-table tr:last-child th,
.spec-table tr:last-child td { border-bottom: 0; }

@media (max-width: 767px) {
  .spec-table tr { display: grid; padding-block: 12px; border-bottom: 1px solid var(--c-line); }
  .spec-table th,
  .spec-table td { width: auto; padding: 2px 0; border: 0; }
  .spec-table tr:last-child { border-bottom: 0; }
}

/* --- Список документов ---------------------------------------------------------- */
.doc-list { display: grid; gap: 2px; }

.doc-link {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 14px 0;
  font-size: var(--fs-small);
  color: var(--c-text);
  border-bottom: 1px solid var(--c-line);
  transition: color var(--t-fast) var(--ease);
}

.doc-link:last-child { border-bottom: 0; }
.doc-link:hover { color: var(--c-heading); }
.doc-link .icon { color: var(--c-muted); transition: color var(--t-fast) var(--ease); }
.doc-link:hover .icon { color: var(--c-heading); }
.doc-link__ext {
  margin-left: auto;
  font-size: var(--fs-caption);
  color: var(--c-muted);
  text-transform: uppercase;
}

/* --- Карточка контакта ------------------------------------------------------------ */
.contact-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-5);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  box-shadow: var(--sh-1);
  transition: box-shadow var(--t-base) var(--ease);
}

.contact-card:hover { box-shadow: var(--sh-2); }

.contact-card__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--c-surface-2);
  color: var(--c-heading);
}

.contact-card__label {
  font-family: var(--font-head);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-muted);
}

.contact-card__value {
  font-family: var(--font-head);
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  line-height: 1.35;
  letter-spacing: var(--ls-head);
  color: var(--c-heading);
  max-width: none;
}

/* --- Панель: светлая подложка внутри белой плиты ----------------------------------- */
.panel {
  padding: var(--s-6);
  background: var(--c-surface-2);
  border-radius: var(--r-lg);
}

.panel--surface { background: var(--c-surface); }

.panel__title {
  font-family: var(--font-head);
  font-size: var(--fs-h4);
  font-weight: var(--fw-head);
  letter-spacing: var(--ls-head);
  color: var(--c-heading);
  margin-bottom: var(--s-4);
}

.panel .spec-table th,
.panel .spec-table td { border-bottom-color: var(--c-surface-3); }

/* --- Модальное окно с формой --------------------------------------------------------
   Кнопки «Запросить расчёт», «Подобрать», «Обратный звонок» открывают его,
   а не прокручивают страницу к форме.                                          */
.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--s-5);
}

.modal[hidden] { display: none; }

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(13, 15, 19, .55);
  opacity: 0;
  transition: opacity var(--t-base) var(--ease);
}

.modal__dialog {
  position: relative;
  width: min(540px, 100%);
  max-height: calc(100vh - var(--s-7));
  overflow-y: auto;
  padding: clamp(24px, 3vw, 40px);
  background: var(--c-surface);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-menu);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}

.modal.is-open .modal__backdrop { opacity: 1; }
.modal.is-open .modal__dialog { opacity: 1; transform: none; }

.modal__close {
  position: absolute;
  top: var(--s-4);
  right: var(--s-4);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--c-surface-2);
  color: var(--c-heading);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease);
}

.modal__close:hover { background: var(--c-surface-3); }

.modal__title {
  max-width: calc(100% - 56px);
  margin-bottom: var(--s-3);
}

.modal__text {
  margin-bottom: var(--s-5);
  font-size: var(--fs-small);
  color: var(--c-muted);
}

.modal .form__grid { grid-template-columns: 1fr; }

/* --- CTA с боковой панелью ------------------------------------------------------------ */
.cta-split {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  border-radius: var(--r-xl);
  overflow: hidden;
}

.cta-split__main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--block-pad);
  background: var(--c-panel);
  color: var(--c-on-dark);
}

.cta-split__main h2 { color: var(--c-on-dark); }

.cta-split__text {
  margin-top: var(--s-4);
  max-width: none;
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, .72);
}

.cta-split__form { margin-top: var(--s-6); }
.cta-split__form .form__grid { grid-template-columns: 1fr; gap: var(--s-3); }

.cta-split__note {
  margin-top: var(--s-4);
  max-width: none;
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: rgba(255, 255, 255, .55);
}

.cta-split__note a {
  color: rgba(255, 255, 255, .78);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cta-split__note a:hover { color: var(--c-on-dark); }

.cta-split__side {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--block-pad);
  background:
    linear-gradient(135deg, rgba(10, 120, 93, .88) 0%, rgba(0, 102, 79, .72) 55%, rgba(0, 75, 61, .58) 100%),
    url('../img/generated/cta-playground-background.png') center / cover no-repeat,
    var(--c-brand-mid);
  color: var(--c-on-dark);
  overflow: hidden;
}

.cta-split__side > * { position: relative; }

.cta-split__phone {
  display: inline-block;
  font-family: var(--font-head);
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.125rem);
  font-weight: var(--fw-head);
  letter-spacing: var(--ls-head);
  color: var(--c-on-dark);
  font-variant-numeric: tabular-nums;
  transition: color var(--t-fast) var(--ease);
}

.cta-split__phone:hover { color: var(--c-accent); }

.cta-split__list {
  display: grid;
  gap: var(--s-4);
  margin-top: var(--s-6);
}

.cta-split__list li {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
}

.cta-split__badge {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
}

.cta-split__badge .icon { width: 16px; height: 16px; }

.cta-split__media {
  margin: auto calc(var(--block-pad) * -1) calc(var(--block-pad) * -1) auto;
  padding-top: var(--s-6);
  width: min(260px, 70%);
}

.cta-split__media .ph {
  --ph-ratio: 3 / 4;
  background: rgba(255, 255, 255, .13);
  border-radius: var(--r-lg) 0 0 0;
}

.cta-split__media .ph::after { filter: invert(1); opacity: .28; }

@media (max-width: 1023px) {
  .cta-split { grid-template-columns: 1fr; }
  .cta-split__media { margin-inline: auto calc(var(--block-pad) * -1); }
}

@media (max-width: 767px) {
  .cta-split { border-radius: var(--r-lg); }
  .cta-split__media { width: min(220px, 60%); }
}

/* --- Список с галочками ------------------------------------------------------------ */
.check-list { display: grid; gap: var(--s-3); }

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  font-size: var(--fs-small);
}

.check-list .icon {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--c-heading);
}

.block--dark .check-list .icon { color: var(--c-accent); }

/* --- Ссылки-списки (подкатегории) --------------------------------------------------- */
.link-list {
  display: grid;
  grid-template-columns: repeat(var(--link-cols, 2), minmax(0, 1fr));
  gap: var(--s-3) var(--s-5);
}

.link-list a {
  display: inline-block;
  font-size: var(--fs-small);
  color: var(--c-text);
  padding-bottom: 2px;
  background-image: linear-gradient(var(--c-accent), var(--c-accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 2px;
  transition: background-size var(--t-base) var(--ease), color var(--t-fast) var(--ease);
}

.link-list a:hover {
  color: var(--c-heading);
  background-size: 100% 2px;
}

@media (max-width: 559px) {
  .link-list { grid-template-columns: 1fr; }
}

/* ==========================================================================
   ДОБАВЛЕНО ПРИ ПЕРЕНОСЕ НА WORDPRESS — Contact Form 7

   Разметка полей задана в самих формах и повторяет вёрстку. Плагин добавляет
   вокруг неё несколько своих обёрток, которые здесь делаются прозрачными для
   раскладки, и служебные блоки, которые прячутся: их роль выполняют
   «.field__error» и «.form__status» из вёрстки.

   Ничего выше по файлу не менялось.
   ========================================================================== */

/* Обёртка формы не должна становиться ячейкой сетки родителя. */
.wpcf7 { display: contents; }

/* Служебный блок для программ чтения с экрана — вне потока. */
.screen-reader-response {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Скрытые поля плагина. */
.wpcf7-form .hidden-fields-container { display: none; }

/* Обёртка поля: без неё элемент не растянется на всю ширину. */
.wpcf7-form-control-wrap { display: block; }

/* В чекбоксе обёртки лишние — сам флажок должен остаться в потоке метки. */
.checkbox .wpcf7-form-control-wrap,
.checkbox .wpcf7-acceptance,
.checkbox .wpcf7-list-item { display: contents; }

/* Сообщения плагина: их текст мы переносим в «.form__status» и «.field__error». */
.wpcf7-response-output,
.wpcf7-not-valid-tip,
.wpcf7-spinner { display: none; }

/* Ошибочное поле подсвечивается так же, как при своей проверке. */
.wpcf7-form-control.wpcf7-not-valid { border-color: var(--c-error); background: var(--c-error-bg); }
.form--on-dark .wpcf7-form-control.wpcf7-not-valid { background: var(--c-on-dark-field); }

/* ==========================================================================
   ДОБАВЛЕНО ПРИ ПЕРЕНОСЕ НА WORDPRESS — описание раздела во всю ширину

   Заказчик отказался от блока «Документы категории» справа от описания.
   Без боковой панели описание занимает весь блок, но правило `p { max-width:
   var(--measure) }` из base.css оставляло справа пустое поле — по решению
   заказчика для этого одного блока ограничение снимается.

   Ничего выше по файлу не менялось.
   ========================================================================== */

.prose--wide p { max-width: none; }

/* ==========================================================================
   ДОБАВЛЕНО ПРИ ПЕРЕНОСЕ НА WORDPRESS — окно с формой не двигает шапку

   Заказчик заметил рывок шапки в момент открытия и закрытия окна. Причина
   была двойной: при блокировке прокрутки исчезал скроллбар (страница
   становилась шире), а `.site-header` анимировал `padding` целиком, поэтому
   компенсирующий отступ справа не подставлялся, а «переезжал» за 0.28 с.
   Окно прокрутку больше не блокирует (см. комментарий в modal.js), а шапке
   оставлена анимация только вертикальных отступов — той, что сжимает её при
   прокрутке.

   Ничего выше по файлу не менялось.
   ========================================================================== */

/* Селектор с `body` — чтобы правило перебило `transition: padding` из
   layout.css: тот файл подключается после этого. */
body .site-header { transition-property: padding-block; }

/* Докрутив форму до конца, страница за окном не должна дёргаться дальше. */
.modal__dialog { overscroll-behavior: contain; }


/* ==========================================================================
   ДОБАВЛЕНО ПРИ ПЕРЕНОСЕ НА WORDPRESS — юридическая оговорка в подвале

   Блока не было в вёрстке: заказчик попросил добавить в самый низ подвала
   постоянный текст об информационном характере сайта. Оговорка не должна
   спорить со строкой копирайта, поэтому она мельче основного мелкого текста
   и приглушена. Размер задан своим clamp, а не `--fs-caption`: тот на
   мобильном не опускается ниже 12px, а здесь просили ещё мельче — 11px.

   Ничего выше по файлу не менялось.
   ========================================================================== */

.site-footer__legal {
  display: grid;
  gap: var(--s-3);
  padding-top: var(--s-5);
  font-size: clamp(0.6875rem, 0.64rem + 0.2vw, 0.8125rem); /* 11 -> 13 */
  line-height: 1.55;
  color: var(--c-on-dark-muted);
}

/* Оговорка — сплошная «простыня» служебного текста, читают её по диагонали.
   Ограничение `p { max-width: var(--measure) }` из base.css оставило бы
   справа половину подвала пустой. */
.site-footer__legal p { max-width: none; }


/* ==========================================================================
   ДОБАВЛЕНО ПРИ ПЕРЕНОСЕ НА WORDPRESS — форма сообщает и о неудаче

   В вёрстке блок «.form__status» показывался единственным правилом
   «.form.is-sent»: другого исхода у поддельной отправки не было. С Contact
   Form 7 исходов больше — не прошла проверка, не ушло письмо, сработал
   антиспам, — и текст писался в блок, оставшийся display: none. Состояние
   «is-error» повторяет вид «is-sent», но в цветах ошибки; на тёмном фоне
   взят тот же жёлтый, что у «.form--on-dark .field__error» из вёрстки.

   Ничего выше по файлу не менялось.
   ========================================================================== */

.form.is-error .form__status {
  display: block;
  background: var(--c-error-bg);
  color: var(--c-error);
}

.form--on-dark.is-error .form__status {
  background: var(--c-on-dark-field);
  color: var(--c-accent);
}