/*
Theme Name: AvtoGates — дизайн-система
Description: Дочерняя тема сайта AvtoGates в дизайн-системе AvtoGates Mobile
Template: avtogates
Version: 0.9.0
Text Domain: avtogates-ds
Requires at least: 6.6
Requires PHP: 8.1
*/

/* ============================================================================================
   Дочерняя тема. Родительская тема «avtogates» (её style.css, разметка, блоки, функции, плагины
   форм, портфолио и конфигуратора) не меняется: этот файл подключается ПОСЛЕ родительского и
   только перекрашивает и переоформляет его классы в духе дизайн-системы «AvtoGates Mobile»
   (расклад — docs в themes/avtogates-ds/README.md).

   Приёмы, на которых держится файл:
   1. Родитель красит всё через переменные (--ink, --pine, --lime, --white, --line …). Мы
      переопределяем их на :root значениями дизайн-системы — и вся разметка родителя меняет цвет.
   2. «Тёмные плашки» (hero на компьютере, быстрая заявка, подвал, …) получают локальные значения
      этих же переменных (--ink и --white становятся светлыми), а формы внутри них возвращают
      страничные значения через --ds-*.
   3. Значения токенов живут только в theme.json (палитра, размеры, радиусы, тени); здесь — псевдонимы на
      --wp--preset--* и --wp--custom--*. Тёмная тема живёт отдельным файлом assets/css/ds-dark.css: он переопределяет эти же переменные палитры
      по настройке устройства посетителя, а в этом файле цвета остаются только псевдонимами.
   ============================================================================================ */

/* ---------- 1. Токены дизайн-системы: псевдонимы на theme.json ---------- */
:root {
  --surface: var(--wp--preset--color--paper);
  --surface-raised: var(--wp--preset--color--white);
  --surface-sunken: var(--wp--preset--color--surface-sunken);
  --fill-tag: var(--wp--preset--color--fill-tag);
  --line: var(--wp--preset--color--line);
  --line-soft: var(--wp--preset--color--line-soft);
  --line-strong: var(--wp--preset--color--line-strong);
  --rail: var(--wp--preset--color--rail);
  --ink: var(--wp--preset--color--ink);
  --ink-body: var(--wp--preset--color--ink-body);
  --ink-soft: var(--wp--preset--color--ink-soft);
  --ink-muted: var(--wp--preset--color--ink-muted);
  --on-ink: var(--wp--preset--color--on-ink);
  --slab: var(--wp--preset--color--pine);
  --on-slab: var(--wp--preset--color--on-slab);
  --on-slab-muted: var(--wp--preset--color--on-slab-muted);
  --accent: var(--wp--preset--color--lime);
  --on-accent: var(--wp--preset--color--on-accent);
  --accent-on-slab: var(--wp--preset--color--accent-on-slab); /* оранжевый, читаемый на тёмной плашке: акцент ДС на графите слишком тёмный */
  --disabled-fill: var(--wp--preset--color--disabled-fill);
  --on-disabled: var(--wp--preset--color--on-disabled);
  --hero-scrim: var(--wp--custom--color--hero-scrim);
  --bar-glass: var(--wp--custom--color--bar-glass);
  --slab-line: var(--wp--custom--color--slab-line);
  --error-surface: var(--wp--custom--color--error-surface);
  --error-line: var(--wp--custom--color--error-line);
  --error-ink: var(--wp--custom--color--error-ink);
  --shadow-segment: var(--wp--custom--shadow--segment);
  --focus-ring: var(--wp--custom--shadow--focus-ring);
  --sp-4: var(--wp--preset--spacing--sp-4);
  --sp-6: var(--wp--preset--spacing--sp-6);
  --sp-8: var(--wp--preset--spacing--sp-8);
  --sp-10: var(--wp--preset--spacing--sp-10);
  --sp-12: var(--wp--preset--spacing--sp-12);
  --sp-14: var(--wp--preset--spacing--sp-14);
  --sp-16: var(--wp--preset--spacing--sp-16);
  --sp-20: var(--wp--preset--spacing--sp-20);
  --sp-24: var(--wp--preset--spacing--sp-24);
  --radius-xs: var(--wp--custom--radius--xs);
  --radius-sm: var(--wp--custom--radius--sm);
  --radius-md: var(--wp--custom--radius--md);
  --radius-lg: var(--wp--custom--radius--lg);
  --radius-xl: var(--wp--custom--radius--xl);
  /* WordPress приводит ключи theme.json к kebab-case и делит «2xl» на «2-xl», поэтому имена с дефисом. */
  --radius-2xl: var(--wp--custom--radius--2-xl);
  --radius-3xl: var(--wp--custom--radius--3-xl);
  --radius-sheet: var(--wp--custom--radius--sheet);
  --radius-pill: var(--wp--custom--radius--pill);
  --hit-min: var(--wp--custom--size--hit-min);
  --header-h: var(--wp--custom--size--header-h);
  --tabbar-h: var(--wp--custom--size--tabbar-h);
  --btn-l: var(--wp--custom--size--btn-l);
  --btn-m: var(--wp--custom--size--btn-m);
  --btn-s: var(--wp--custom--size--btn-s);
  --chip-h: var(--wp--custom--size--chip-h);
  --hero-h: var(--wp--custom--size--hero-h);
  /* Шкала компьютера (0.9.0, решение владельца 23.10.2026): значения живут в theme.json (custom.size / custom.line-height), применяются в разделе 20 от 721 px. */
  --desktop-hero-min-h: var(--wp--custom--size--desktop-hero-min-h);
  --desktop-hero-title: var(--wp--custom--size--desktop-hero-title);
  --desktop-hero-title-lh: var(--wp--custom--line-height--desktop-hero-title);
  --desktop-hero-price: var(--wp--custom--size--desktop-hero-price);
  --desktop-hero-price-lh: var(--wp--custom--line-height--desktop-hero-price);
  --desktop-hero-text: var(--wp--custom--size--desktop-hero-text);
  --desktop-hero-text-lh: var(--wp--custom--line-height--desktop-hero-text);
  --desktop-section-title: var(--wp--custom--size--desktop-section-title);
  --desktop-section-title-lh: var(--wp--custom--line-height--desktop-section-title);
  --desktop-section-pad-y: var(--wp--custom--size--desktop-section-pad-y);
  /* Шрифты: Unbounded 700 — только цены, заголовок на фото, номера и знак; Golos Text — всё остальное. */
  --font-numeric: var(--wp--preset--font-family--numerals);
  --font-sans: var(--wp--preset--font-family--body);
  /* Расклад: боковое поле экрана и внутренний отступ плашки-раздела (на компьютере больше). */
  --ds-gutter: 16px;
  --ds-pad: 16px;
  --ds-pad-y: 18px;
  /* Страничные значения для форм внутри тёмных плашек (см. раздел 3). */
  --ds-ink: var(--ink);
  --ds-muted: var(--ink-muted);
  --ds-line: var(--line);
  --ds-raised: var(--surface-raised);
  --ds-on-ink: var(--on-ink);
}
@media (min-width: 721px) {
  :root { --ds-gutter: var(--wp--style--root--padding-left, 28px); --ds-pad: 40px; --ds-pad-y: var(--desktop-section-pad-y); }
}

/* ---------- 2. Переменные родителя -> токены системы ---------- */
:root {
  --paper: var(--surface);
  --white: var(--surface-raised);
  --white-strong: var(--surface-raised);
  --pine: var(--ink);          /* «хвоя» родителя как цвет текста/линий; фоны тёмных плашек заданы явно (раздел 3) */
  --pine-deep: var(--slab);
  --lime: var(--accent);
  --muted: var(--ink-muted);
  --sand: var(--surface-sunken);
  --hero-copy: var(--on-slab-muted);
  --hero-secondary: var(--on-slab);
  --hero-facts: var(--on-slab-muted);
  --hero-divider: var(--slab-line);
  --hero-link-hover: var(--wp--custom--color--slab-hover);
  --hero-shade: var(--wp--custom--color--photo-shade);
  --caption-bg: var(--wp--custom--color--caption-bg);
  --focus: var(--ink);
  --surface-soft: var(--fill-tag);
  --surface-success: var(--fill-tag);
  --surface-card: var(--surface);
  --surface-card-alt: var(--surface);
  --surface-warm: var(--fill-tag);
  --meta: var(--ink-muted);
  --ink-subtle: var(--ink-soft);
  --eyebrow: var(--ink-muted);
  --line-muted: var(--line-strong);
  --text-on-pine: var(--on-slab-muted);
  --step-number: var(--ink-muted);
  --visual-text: var(--ink-soft);
  --visual-line: var(--line);
  --visual-muted: var(--ink-muted);
  --form-note: var(--ink-muted);
  --consent: var(--ink-soft);
  --error-bg: var(--error-surface);
  --error-border: var(--error-line);
  --error-text: var(--error-ink);
  --footer-text: var(--on-slab);
  --footer-muted: var(--on-slab-muted);
  --footer-link: var(--on-slab-muted);
  --white-overlay: var(--surface-raised);
  --shadow-soft: transparent;   /* система плоская: тени родителя обнуляются */
  --sticky-shadow: transparent;
  --font-body: var(--font-sans);
  --font-display: var(--font-sans);
  /* Переменные плагинов форм и страницы объекта (у них свои запасные значения). */
  --green: var(--ink);
  --cream: var(--surface);
}

/* ---------- 3. Тёмные плашки: локальные значения переменных ---------- */
/* hero на телефоне НЕ входит в список — там фото с затемнением, а текст под ним лежит на странице (раздел 8). */
.quick-request, .service-hero, .guide-hero, .guide-next, .price-note, footer, .project-public-cta,
.service-hero-media {
  --ink: var(--on-slab); --on-ink: var(--slab); --white: var(--on-slab); --pine: var(--on-slab);
  --muted: var(--on-slab-muted); --eyebrow: var(--on-slab-muted); --line: var(--slab-line);
  --lime: var(--accent-on-slab);
  background: var(--slab); color: var(--on-slab);
}
@media (min-width: 721px) {
  .hero { --ink: var(--on-slab); --on-ink: var(--slab); --white: var(--on-slab); --pine: var(--on-slab); --muted: var(--on-slab-muted); --eyebrow: var(--on-slab-muted); --line: var(--slab-line); --lime: var(--accent-on-slab); background: var(--slab); color: var(--on-slab); }
}
/* Формы, всплывающее окно заявки и белые карточки внутри плашек возвращают страничные значения. */
.avtogates-form-panel, .form-panel, .project-consultation-modal > section, .brand-logo-frame, .kit-photo-zoom {
  --ink: var(--ds-ink); --pine: var(--ds-ink); --muted: var(--ds-muted); --eyebrow: var(--ds-muted);
  --line: var(--ds-line); --white: var(--ds-raised); --on-ink: var(--ds-on-ink); --lime: var(--accent);
  color: var(--ds-ink);
}

/* ---------- 4. Основа ---------- */
html { -webkit-text-size-adjust: 100%; }
body { background: var(--surface); color: var(--ink); font-family: var(--font-sans); font-size: 15px; line-height: 1.47; }
h1, h2, h3, h4 { font-family: var(--font-sans); font-weight: 700; letter-spacing: -0.01em; text-wrap: balance; }
h1 { font-size: clamp(26px, 1.6vw + 20px, 40px); line-height: 1.15; }
h2, .section h2 { font-size: clamp(22px, 1.4vw + 17px, 30px); line-height: 1.2; letter-spacing: -0.01em; }
h2, .editor-styles-wrapper .is-root-container .section h2 { margin-bottom: 14px; }
h3 { font-size: clamp(17px, 0.6vw + 14px, 22px); line-height: 1.25; }
.eyebrow, .card-kicker { color: var(--ink-muted); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; line-height: 16px; }
.section-heading > p, .faq-heading > p, .contact-copy > p:not(.eyebrow), .promise-copy p, .measurement-guide-copy > p { color: var(--ink-muted); font-size: 15px; line-height: 22px; }
/* Ссылки внутри текста: оранжевый акцент (родитель красил их в «хвою»). */
main :is(p, li, dd) a:not([class]):not(:is(.contact-list, .phone-link, .hero-phone, .inline-link, .roltek-link, .measurement-guide-link, .faq-heading, .consent, .form-error, .hero-text, .kit-switch-item, nav) a) { color: var(--accent); font-weight: 600; }
.inline-link, .inline-link a, .roltek-link, .roltek-link a, .faq-heading > a { border-bottom: 0; color: var(--accent); font-size: 14px; font-weight: 600; }
/* Фокус: контрастное кольцо вместо голубого. */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible, .button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.skip-link { background: var(--surface-raised); border-radius: var(--radius-md); color: var(--ink); }
::selection { background: var(--accent); color: var(--on-accent); }

/* ---------- 5. Кнопки: primary (оранжевая) / dark / outline / ссылка ---------- */
.wp-block-button__link, .wp-element-button {
  align-items: center; background: var(--accent); border: 0; border-radius: var(--radius-lg); box-shadow: none; box-sizing: border-box;
  color: var(--on-accent); display: inline-flex; font-family: var(--font-sans); font-size: 16px; font-weight: 600; gap: var(--sp-10);
  justify-content: center; letter-spacing: 0; line-height: 20px; min-height: var(--btn-m); padding: 15px 20px; text-decoration: none; text-transform: none;
}
.wp-block-button__link:hover, .wp-element-button:hover { filter: brightness(1.06); }
.is-style-avtogates-dark .wp-block-button__link { background: var(--ink); color: var(--on-ink); }
.is-style-avtogates-outline .wp-block-button__link { background: transparent; border: 1.5px solid var(--ink); color: var(--ink); }
.is-style-avtogates-outline .wp-block-button__link:hover { background: var(--fill-tag); filter: none; }
.is-style-avtogates-link .wp-block-button__link, .hero-secondary-link .wp-block-button__link { background: transparent; border: 0; border-bottom: 0; color: var(--accent); justify-content: flex-start; min-height: var(--hit-min); padding-left: 0; padding-right: 0; }
.button.hero-secondary-link { align-items: center; }
/* Кнопка Telegram на фирменном голубом фоне: текст всегда светлый (on-slab), а не «white» родителя, который в тёмной теме темнеет. */
.button-telegram { color: var(--on-slab); }
.is-style-avtogates-dark .wp-block-button__link:hover { filter: none; opacity: .88; }
/* Парные кнопки на тёмных плашках: «ссылка» видна как кнопка-контур. */
.quick-request .is-style-avtogates-link .wp-block-button__link, .service-hero .is-style-avtogates-link .wp-block-button__link { color: var(--on-slab); }
.wp-block-button__link[aria-disabled="true"], .wp-block-button__link:disabled { background: var(--disabled-fill); color: var(--on-disabled); }

/* ---------- 6. Шапка (BrandHeader) ---------- */
.site-header { background: var(--bar-glass); border-bottom: 1px solid var(--line); min-height: 60px; padding-bottom: 8px; padding-top: 8px; }
.brand { font-family: var(--font-numeric); font-size: 17px; font-weight: 700; gap: 0; letter-spacing: 0.02em; line-height: 20px; }
.brand-text { display: flex; flex-direction: column; gap: 2px; }
.brand-word, .site-header .brand-word { color: var(--ink); font-family: var(--font-numeric); font-size: 17px; font-weight: 700; letter-spacing: 0.02em; line-height: 20px; margin: 0; }
.brand-word strong { color: var(--accent); font-weight: 700; }
footer .brand-word strong { color: var(--accent-on-slab); }
.brand-region, .site-header .brand-region { color: var(--ink-muted); font-family: var(--font-sans); font-size: 12px; font-weight: 400; letter-spacing: 0; line-height: 16px; margin: 0; }
.brand-word a { position: relative; }
.site-header nav a { color: var(--ink-soft); font-size: 14px; font-weight: 600; }
.site-header nav a:hover { color: var(--accent); }
.header-phone a { border-bottom: 0; color: var(--ink); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.site-header .wp-block-navigation__submenu-container { border-color: var(--line); border-radius: var(--radius-lg); }
/* Кнопка «Вызвать замерщика» только на компьютере (от 721 px, правило ниже): на телефоне главное действие — панель действий и значки шапки. */
.site-header .header-phone a.header-cta { display: none; }
/* Шапка компьютера в одну строку на 1280–1440 px. Родитель делит её на колонки 1fr auto 1fr: боковые колонки равны и узки для блока телефонов
   (два номера и два значка), поэтому меню сжималось и «Контакты» уходило на вторую строку. Здесь крайние колонки по содержимому, меню занимает
   остаток и не переносится; промежутки и кегль пунктов чуть меньше. Телефон (до 720 px) не затронут: там своя раскладка выше. */
@media (min-width: 721px) {
  .site-header { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: var(--sp-16); }
  /* Меню прижато к знаку (макет «вариант 2»): справа остаются телефон, значки и кнопка «Вызвать замерщика». */
  .site-header nav { justify-self: start; margin-left: var(--sp-24); min-width: 0; }
  .site-header nav :is(ul, .wp-block-navigation__container) { flex-wrap: nowrap; gap: var(--sp-16); }
  .site-header nav a { white-space: nowrap; }
  .site-header .header-phone { align-items: center; gap: var(--sp-10); }
  /* В шапке компьютера один телефон (городской); мобильный остаётся в подвале и контактах. На телефоне правила родителя не менялись. */
  .site-header .header-phone .header-phone-mobile { display: none; }
  /* Главное действие: оранжевая кнопка, зона касания hit-min (44 px), радиус кнопок ДС. Ссылка на #contact: analytics.js пишет cta_click (intent=form, placement=header). */
  .site-header .header-phone a.header-cta {
    align-items: center; background: var(--accent); border: 0; border-radius: var(--radius-lg); box-sizing: border-box; color: var(--on-accent); display: inline-flex;
    font-size: 15px; font-weight: 600; height: var(--hit-min); line-height: 20px; padding: 0 18px; text-decoration: none; white-space: nowrap;
  }
  .site-header .header-phone a.header-cta:hover { filter: brightness(1.06); }
}

@media (min-width: 721px) and (max-width: 1440px) {
  .site-header nav a { font-size: 13px; }
}
/* Мобильное меню (оверлей ядра) — токены системы. */
.site-header .wp-block-navigation__responsive-container.is-menu-open { background: var(--surface); color: var(--ink); }
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { border-bottom-color: var(--line); font-weight: 600; }
.site-header .wp-block-navigation__responsive-container.is-menu-open .has-child > .wp-block-navigation-item__content { font-weight: 600; letter-spacing: 0.06em; }
@media (max-width: 700px) {
  /* Зона касания знака 44 px без роста шапки: ссылка тянется невидимой подложкой, строка региона остаётся под ней. */
  .site-header .brand-word a { min-height: 0; }
  .site-header .brand-word a::after { content: ""; inset: -12px -10px -2px; position: absolute; }
}
@media (max-width: 599px) {
  .site-header { align-items: center; padding: 8px 16px 8px 20px; }
  .site-header .header-phone { display: none; }
  /* Кнопка «Меню»: контурная, как outline-кнопка системы. */
  .site-header .wp-block-navigation__responsive-container-open { background: transparent; border: 1.5px solid var(--ink); border-radius: var(--radius-lg); color: var(--ink); min-height: var(--hit-min); padding: 0 14px 0 12px; }
  .site-header .wp-block-navigation__responsive-container-open:hover { background: var(--fill-tag); }
  .site-header .wp-block-navigation__responsive-container-open::after { font: 600 14px/1 var(--font-sans); letter-spacing: 0; }
  .site-header .wp-block-navigation__responsive-container-open:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
  .site-header .brand-word, .site-header .brand-word a { font-size: 17px; }
}
@media (max-width: 340px) {
  .site-header .brand-word { display: block; font-size: 15px; }
  .site-header .brand-region { display: none; }
}
@media (max-width: 400px) {
  .site-header .brand { font-size: 17px; letter-spacing: 0.02em; }
  .site-header .brand-word { font-size: 16px; }
  .site-header .header-phone { font-size: 14px; }
}

/* ---------- 7. Плашки-разделы (SectionCard) ---------- */
:is(.packages, .cases, .why, .process, .faq, .contact, .site-works).section,
.quick-request.section {
  border: 1px solid var(--line); border-radius: var(--radius-2xl); margin: 12px auto; max-width: calc(var(--avtg-content-inner) + 2 * var(--ds-pad));
  padding: var(--ds-pad-y) var(--ds-pad); width: calc(100% - 2 * var(--ds-gutter));
}
:is(.packages, .cases, .why, .process, .faq, .contact, .site-works).section { background: var(--surface-raised); }
.quick-request.section { background: var(--slab); border-color: var(--slab); }
@media (min-width: 721px) {
  /* Плашка занимает ровно ширину сетки (contentSize, 1200 px): как первый экран и шапка, а не contentSize + боковые отступы. */
  :is(.packages, .cases, .why, .process, .faq, .contact, .site-works).section, .quick-request.section { max-width: var(--wp--style--global--content-size, 1200px); }
}
/* Конфигуратор живёт на странице без плашки: у него свой фон и поля. */
.section.configurator { margin-bottom: 0; margin-top: 12px; }
/* Вложенные карточки внутри белой плашки лежат на цвете страницы и отделены границей. */
.package-card, .case-card, .work-card, .why-fact, .measurement-guide-link {
  background: var(--surface); border: 1px solid var(--line);
}
.service-section.section, .service-works.section, .service-cost.section { margin-top: 12px; }
.section-heading { margin-bottom: 16px; }

/* ---------- 8. Первый экран (Hero + PriceBlock) ---------- */
.hero { background: var(--slab); }
.hero .eyebrow { align-self: flex-start; background: var(--accent); border-radius: var(--radius-xs); color: var(--on-accent); display: flex; width: fit-content; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; margin-bottom: 14px; padding: 6px 10px; text-transform: none; }
.hero h1, .service-hero h1, .guide-hero h1 { color: var(--on-slab); font-family: var(--font-numeric); font-size: clamp(26px, 1.2vw + 20px, 38px); font-weight: 700; letter-spacing: 0; line-height: 1.12; }
.hero-text { color: var(--on-slab-muted); font-size: 15px; line-height: 22px; }
.hero-text a { color: var(--on-slab); }
.hero-price { background: transparent; border: 0; padding: 0; }
.hero-price-value { color: var(--on-slab); font-family: var(--font-numeric); font-size: 28px; font-variant-numeric: tabular-nums; font-weight: 700; line-height: 1.15; }
.hero-price-note { color: var(--on-slab-muted); font-size: 13px; line-height: 18px; }
.hero-phones-title, .quick-request .eyebrow { color: var(--on-slab-muted); font-weight: 600; letter-spacing: 0.06em; }
.hero-phone a { border-bottom: 2px solid var(--accent-on-slab); font-variant-numeric: tabular-nums; font-weight: 600; }
.hero-phone a::before { background: var(--accent-on-slab); }
/* Факты: теги системы (SpecTag). */
.hero-facts { border-top: 0; display: flex; flex-wrap: wrap; gap: var(--sp-6); padding-top: 0; }
.hero-facts p, .hero-facts span { background: var(--fill-tag); border-radius: var(--radius-xs); color: var(--ink-body); font-size: 12px; font-weight: 500; line-height: 16px; padding: 5px 9px; }
.hero-facts p::before, .hero-facts span::before { display: none; }
.hero-media::after { background: linear-gradient(90deg, var(--hero-shade), transparent 28%); }
.hero-media figcaption { border-radius: var(--radius-xs); }
@media (min-width: 721px) {
  /* Компьютер: сетка родителя сохранена, плашка вписана в поля страницы со скруглением. */
  .hero { border-radius: var(--radius-sheet); margin: 16px auto 0; max-width: var(--wp--style--global--wide-size, 1600px); width: calc(100% - 2 * var(--ds-gutter)); }
  .hero-facts p, .hero-facts span { background: var(--wp--custom--color--slab-fill-soft); color: var(--on-slab-muted); }
  .hero-text { font-size: 17px; line-height: 26px; }
  .hero-price-value { font-size: 32px; }
  .hero .is-style-avtogates-link .wp-block-button__link, .hero-secondary-link .wp-block-button__link { border: 1.5px solid var(--on-slab); border-radius: var(--radius-lg); color: var(--on-slab); justify-content: center; padding: 15px 20px; }
}
@media (max-width: 720px) {
  /* Телефон: фото на всю ширину с затемнением снизу, значок и заголовок на фото (Hero), под ним — цена, текст и кнопки на странице. */
  .hero { background: transparent; border-radius: 0; color: var(--ink); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto; margin: 0; max-width: none; min-height: 0; overflow: visible; width: auto; }
  .hero-copy, .hero-copy[style] { display: contents; }
  .hero-media { border-radius: 0; grid-column: 1; grid-row: 1 / span 2; min-height: 340px; order: 0; }
  .hero-media::after { background: linear-gradient(to top, var(--hero-scrim) 35%, transparent); }
  .hero-media figcaption { background: var(--caption-bg); bottom: auto; left: 12px; right: auto; top: 12px; }
  .hero .eyebrow { align-self: end; grid-column: 1; grid-row: 1; justify-self: start; margin: 0 20px 12px; position: relative; z-index: 2; }
  .hero h1 { grid-column: 1; grid-row: 2; margin: 0; max-width: none; padding: 0 20px 20px; position: relative; z-index: 2; }
  .hero-text, .hero-price, .hero-actions, .hero-facts { grid-column: 1; margin-left: 20px; margin-right: 20px; max-width: none; }
  .hero-text { color: var(--ink-body); font-size: 15px; line-height: 22px; margin-top: 20px; }
  .hero-text a { color: var(--accent); }
  .hero-price { margin-top: 16px; }
  .hero-price-value { color: var(--ink); font-size: 32px; line-height: 32px; }
  .hero-price-note { color: var(--ink-muted); }
  .hero-actions { align-items: stretch; flex-direction: column; gap: 10px; margin-top: 16px; }
  .hero-phones { display: none; }
  .hero-media img, .hero-media img[style] { inset: 0; position: absolute; }
  .hero-actions .wp-block-button__link { min-height: var(--btn-l); width: 100%; }
  .hero-actions .hero-secondary-link .wp-block-button__link { background: var(--ink); border: 0; color: var(--on-ink); justify-content: center; min-height: var(--btn-m); }
  .hero-facts { margin-bottom: 20px; margin-top: 16px; }
}

/* ---------- 9. Комплектации (Card + PriceBlock + InfoSlab) ---------- */
.package-grid { gap: 10px; }
.package-card { border-radius: var(--radius-xl); }
.package-card h3 { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; line-height: 22px; }
.card-kicker { color: var(--ink-muted); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; }
.price { font-family: var(--font-numeric); font-size: 19px; font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: 0; line-height: 24px; }
.without-auto { background: var(--fill-tag); border-radius: var(--radius-xs); color: var(--ink-body); font-size: 12px; font-weight: 500; letter-spacing: 0; line-height: 16px; padding: 5px 9px; text-transform: none; }
.price-note { border-radius: var(--radius-lg); font-size: 13px; line-height: 19px; padding: 14px 16px; }
.list-title { color: var(--ink); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; }
.package-card ul, .package-detail ul { color: var(--ink-soft); }
@media (min-width: 721px) {
  .package-card { padding: 28px; }
  .package-card h3 { font-size: 22px; line-height: 28px; }
  .price { font-size: 28px; line-height: 28px; }
}
/* Раскрывающиеся пункты (Подробности): строки как FaqItem без карточки, знак «+» в круге. */
:is(.package-detail, .why-more, .step) > summary { font-size: 15px; font-weight: 600; }
:is(.package-detail, .why-more) { border-bottom-color: var(--line); }
:is(.package-detail, .why-more) > summary::after { align-items: center; background: var(--fill-tag); border-radius: var(--radius-pill); display: flex; font-size: 18px; height: 28px; justify-content: center; right: 0; width: 28px; }
.package-details { border-top-color: var(--line); }
.why-more { border-top-color: var(--line); }
.package-included-title, .why-service-title, .faq-guides-title { font-size: 16px; font-weight: 700; }

/* ---------- 10. Работы портфолио (WorkCard) ---------- */
.case-card { border-radius: var(--radius-2xl); overflow: hidden; }
.case-card img { aspect-ratio: 4 / 3; }
.case-copy { padding: 14px 16px 16px; }
.case-meta { color: var(--ink-muted); font-size: 13px; font-weight: 400; letter-spacing: 0; line-height: 18px; text-transform: none; }
.case-copy h3 { font-size: 16px; font-weight: 700; line-height: 21px; }
.case-description { color: var(--ink-muted); }
.case-facts { border-top-color: var(--line); }
.case-fact-label { color: var(--ink-muted); font-size: 11px; font-weight: 500; letter-spacing: 0.04em; }
.case-photo-zoom { background: var(--surface-raised); border-radius: var(--radius-pill); color: var(--ink); }
.case-detail-link, .case-title-link:hover { color: var(--accent); }
.case-image-placeholder { background: var(--fill-tag); color: var(--ink-muted); }
.portfolio-filter button { background: var(--surface-raised); border: 1.5px solid var(--line-strong); border-radius: var(--radius-pill); color: var(--ink); font-weight: 600; min-height: var(--chip-h); }
.portfolio-filter button.is-active, .portfolio-filter button:hover { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.case-more { background: transparent; border: 1.5px solid var(--ink); border-radius: var(--radius-lg); color: var(--ink); font-weight: 600; min-height: var(--btn-m); }
.case-more:hover { background: var(--fill-tag); color: var(--ink); }
.portfolio-empty { background: var(--surface); border-radius: var(--radius-xl); }
.portfolio-empty h3 { color: var(--ink); }
@media (max-width: 720px) {
  .case-card img, .case-image-placeholder { aspect-ratio: auto; height: 220px; object-fit: cover; }
  .case-copy h3 { font-size: 16px; }
}

/* ---------- 11. «Почему мы», производители, работы на участке, комплекты ---------- */
.why-fact { border-radius: var(--radius-lg); font-size: 14px; font-weight: 600; }
.why-services { color: var(--ink-muted); }
.brands-panel { background: var(--surface-raised); border-color: var(--line); border-radius: var(--radius-2xl); }
.brand-logo-frame { background: var(--surface-raised); border-color: var(--line); border-radius: var(--radius-md); }
.brand-logo-link:hover .brand-logo-frame, .brand-logo-link:focus-visible .brand-logo-frame { border-color: var(--ink); box-shadow: none; }
.brand-logo-frame--text, .brand-logo-note { color: var(--ds-ink); }
.brand-logo-caption { color: var(--ink-muted); }
.work-card { border-radius: var(--radius-xl); }
.work-card:hover, .work-card:nth-child(even):hover { background: var(--fill-tag); box-shadow: none; }
.work-card:focus-within { outline-color: var(--ink); }
.work-card-title { font-size: 17px; font-weight: 700; }
.work-card p:not(.work-card-title) { color: var(--ink-soft); }
.work-card p.work-card-more { color: var(--accent); font-weight: 600; }
.kit-card { border-radius: var(--radius-xl); }
.kit-title { font-weight: 700; }
.kit-limit { color: var(--ink); font-family: var(--font-numeric); font-size: 14px; font-weight: 700; }
.kit-switch-item a { background: var(--surface-raised); border: 1.5px solid var(--line-strong); border-radius: var(--radius-pill); color: var(--ink); font-size: 14px; font-weight: 600; min-height: var(--btn-s); }
.kit-switch-item a:hover, .kit-switch-item a:focus-visible { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.kits-intro, .kit-extras { color: var(--ink-muted); }
.service-item { border-radius: var(--radius-xl); }
.service-item-title { font-weight: 700; }
.service-item p:not(.service-item-title) { color: var(--ink-soft); }

/* ---------- 12. Шаги (ProcessSteps: точки с номером и линия) ---------- */
.steps { border-top: 0; counter-reset: step; }
.step { border: 0; padding: 0; position: relative; }
.step > summary { font-family: var(--font-sans); font-size: 15px; font-weight: 600; line-height: 20px; }
.step > summary::before, .step-static::before { background: var(--ink); border-radius: var(--radius-pill); color: var(--on-ink); font: 700 13px/1 var(--font-sans); }
.step:not(:last-child)::after { background: var(--rail); bottom: -12px; content: ""; left: 13px; position: absolute; top: 40px; width: 2px; }
.step > p { color: var(--ink-muted); font-size: 13px; line-height: 18px; }
.steps-hint { color: var(--ink-muted); }
.step-static { border: 0; font-family: var(--font-sans); font-size: 15px; font-weight: 600; min-height: 52px; }
.step-static .step-title { color: var(--ink); font-family: var(--font-sans); }
@media (min-width: 721px) {
  /* Пять шагов в ряд (раскладка родителя): линия идёт горизонтально от точки к точке. */
  .steps { gap: 0 20px; }
  .step > summary { font-size: 16px; }
  .step:not(:last-child)::after { bottom: auto; height: 2px; left: 40px; right: -12px; top: 13px; width: auto; }
  .step-static { align-items: flex-start; }
}

/* ---------- 13. Вопросы (FaqItem) ---------- */
.faq { border-top: 0; gap: 48px; }
.faq-list { border-top: 0; display: grid; gap: var(--sp-8); }
.faq-list details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.faq-list summary { align-items: center; display: flex; font-family: var(--font-sans); font-size: 15px; font-weight: 600; line-height: 20px; min-height: 56px; padding: var(--sp-14) 52px var(--sp-14) var(--sp-16); }
.faq-list summary::after { align-items: center; background: var(--fill-tag); border-radius: var(--radius-pill); display: flex; font-family: var(--font-sans); font-size: 18px; font-weight: 500; height: 28px; justify-content: center; right: var(--sp-14); top: 50%; transform: translateY(-50%); width: 28px; }
.faq-list details > p, .faq-list details > h3 { padding-left: var(--sp-16); padding-right: var(--sp-16); }
.faq-list details > p { color: var(--ink-soft); font-size: 14px; line-height: 21px; margin: 0 0 var(--sp-16); }
.faq-list details > p:last-child { margin-bottom: var(--sp-16); }
.faq-list details > h3 { margin: 0 0 var(--sp-8); }
.faq-list .faq-guides .measurement-guide-links { margin: var(--sp-8) var(--sp-16) var(--sp-12); }
.faq-list .faq-guides .inline-link { margin-left: var(--sp-16); }
.faq-guides-note { border-top-color: var(--line); color: var(--ink-muted); }
.measurement-guide-link { background: var(--surface-raised); border-radius: var(--radius-lg); }
.measurement-guide-link:hover, .measurement-guide-link:focus-visible { background: var(--surface-raised); border-color: var(--ink); }
.measurement-guide-link strong { font-family: var(--font-sans); font-size: 15px; font-weight: 700; }
.measurement-guide-link span { color: var(--ink-muted); }

/* ---------- 14. Контакты и формы (TextField, Chip, ContactTile) ---------- */
.contact { gap: 48px; }
.coverage-zone { border-top-color: var(--line); }
.coverage-zone-list.wp-block-list { color: var(--ink); gap: var(--sp-6); }
.coverage-zone-list li { background: var(--surface-raised); border: 1.5px solid var(--line-strong); border-radius: var(--radius-pill); font-size: 13px; font-weight: 600; line-height: 1; padding: 0 var(--sp-14); align-items: center; display: inline-flex; min-height: var(--chip-h); }
.coverage-zone-note, .coverage { color: var(--ink-muted); }
.coverage-zone h3 { font-size: 18px; }
/* Телефоны плитками (ContactTile): тёмная плитка, номер табличными цифрами. */
.contact-phones .wp-block-button__link { background: var(--slab); border: 0; border-radius: var(--radius-lg); color: var(--on-slab); font-size: 15px; font-variant-numeric: tabular-nums; font-weight: 600; min-height: var(--btn-m); }
.contact-list a, .contact-list a:last-child { color: var(--accent); font-family: var(--font-sans); font-size: 15px; font-weight: 600; }
.form-panel { background: transparent; border: 0; box-shadow: none; padding: 0; }
.form-title h3 { font-size: 18px; }
html body .avtogates-form-panel { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-2xl); max-width: 620px; padding: var(--sp-16); --ds-field: var(--surface); }
html body .contact .avtogates-form-panel, html body .form-panel .avtogates-form-panel { background: var(--surface); --ds-field: var(--surface-raised); }
html body .avtogates-form-panel input:not([type="checkbox"]), html body .avtogates-form-panel select, html body .avtogates-form-panel textarea,
.form-panel input, .form-panel textarea, .form-panel select {
  background: var(--ds-field, var(--surface)); border: 1.5px solid var(--line-strong); border-radius: var(--radius-md); color: var(--ds-ink); font-family: var(--font-sans);
  font-size: 16px; min-height: var(--btn-m); padding: 0 var(--sp-14);
}
html body .avtogates-form-panel textarea, .form-panel textarea { line-height: 22px; min-height: 96px; padding: var(--sp-12) var(--sp-14); }
html body .avtogates-form-panel input:focus, html body .avtogates-form-panel select:focus, html body .avtogates-form-panel textarea:focus { border-color: var(--ds-ink); outline: 2px solid var(--ds-ink); outline-offset: 1px; }
html body .avtogates-form-panel label { color: var(--ds-ink); font-size: 13px; font-weight: 600; }
html body .avtogates-form-panel label > span em, html body .avtogates-form-title p, html body .avtogates-form-note { color: var(--ds-muted); }
html body .avtogates-form-title h3 { color: var(--ds-ink); font-size: 18px; font-weight: 700; }
html body .avtogates-form-consent input { accent-color: var(--ds-ink); height: 22px; width: 22px; }
html body .avtogates-form-more { border-color: var(--line); }
html body .avtogates-form-more > summary { color: var(--ds-ink); font-weight: 600; }
html body .avtogates-form-panel [data-form-error] { color: var(--error-text); }
html body .avtogates-form-success { background: var(--surface-raised); border-color: var(--line); border-radius: var(--radius-2xl); color: var(--ds-ink); }
html body .avtogates-form-success__title { color: var(--ds-ink); }
html body .avtogates-form-success__title::before { color: var(--accent); }
html body .avtogates-form-success__text { color: var(--ds-muted); }
html body .avtogates-form-selected { color: var(--ds-ink); }
.form-note, .form-title p { color: var(--ds-muted); }
.form-next-step, .selected-package-summary { background: var(--fill-tag); border-radius: var(--radius-md); color: var(--ink-soft); }
.form-error { border-radius: var(--radius-md); }
.success-symbol { background: var(--accent); color: var(--on-accent); }
@media (max-width: 720px) {
  html body .avtogates-form-panel { padding: var(--sp-16); }
  html body .avtogates-form-panel .wp-block-button__link { min-height: var(--btn-l); }
}

/* ---------- 15. Подвал ---------- */
footer { border-radius: var(--radius-sheet) var(--radius-sheet) 0 0; margin-top: 24px; }
.footer-brand p, .footer-guides-title { color: var(--on-slab-muted); }
.footer-links a, .footer-guides a { color: var(--on-slab-muted); font-size: 13px; }
.footer-contacts a { font-variant-numeric: tabular-nums; font-weight: 600; }
.footer-links a:hover, .footer-guides a:hover, .footer-contacts a:hover { color: var(--on-slab); }

/* ---------- 16. Страницы услуг, памятки, статья, страница объекта ---------- */
.service-hero, .guide-hero { background: var(--slab); }
.service-lead, .guide-hero-copy > p { color: var(--on-slab-muted); }
.service-form-aside { border-color: var(--slab-line); }
.service-form-phones .wp-block-button__link { border-radius: var(--radius-lg); }
p.service-form-coverage { color: var(--on-slab-muted); }
.service-cost-box { background: var(--surface-raised); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius-xl); }
.service-section-body p, .service-section-body li, .article-body p, .article-body li { color: var(--ink-body); }
.service-section-body .service-point { border-left-color: var(--line-strong); }
.service-photo-caption, .kit-photo-caption { color: var(--ink-muted); }
.service-photo img, .service-works-item img { border-radius: var(--radius-xl); }
.service-hero-media img { border-radius: 0; }
.guide-section { border-top-color: var(--line); }
.guide-section:last-child { border-bottom-color: var(--line); }
.guide-section > :not(h2) { color: var(--ink-soft); }
.guide-section li { border-bottom-color: var(--line); }
.guide-section li::before { color: var(--accent); }
.guide-next { border-radius: var(--radius-2xl); }
.guide-hero-copy > p, .guide-next p { color: var(--on-slab-muted); }
.measurement-guide { background: var(--surface-raised); border-radius: var(--radius-2xl); }
.site-main.is-layout-constrained p, .site-main.is-layout-constrained ul { color: var(--ink-soft); }
@media (min-width: 721px) {
  .service-hero, .guide-hero { border-radius: var(--radius-sheet); margin: 16px auto 0; width: calc(100% - 2 * var(--ds-gutter)); }
}
/* Страница объекта (классический шаблон родителя): цвета жёстко заданы в его CSS, переводим на токены. */
.project-public-page { background: var(--surface); }
.project-public-header { border-bottom-color: var(--line); }
.project-public-intro h1, .project-missing h1 { font-family: var(--font-sans); font-weight: 700; letter-spacing: -0.01em; line-height: 1.12; }
.project-public-lead { color: var(--ink-soft); }
.project-public-content p { color: var(--ink-body); }
.project-gallery button { background: var(--surface-sunken); border-radius: var(--radius-xl); }
.project-gallery-empty { background: var(--surface-raised); color: var(--ink-muted); }
.project-public-content aside { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-2xl); }
.project-public-cta { background: var(--slab); border-radius: var(--radius-2xl); }
.project-consultation-modal > section { background: var(--surface-raised); border-radius: var(--radius-2xl); box-shadow: none; }
/* Окно просмотра фото работ (родитель: .project-lightbox, подложка всегда тёмная, в обеих темах). Кнопки — по ДС: «О работе» — контурная
   (светлая рамка и текст on-slab), «Хочу похожие» — главная, стрелки и «закрыть» — круглые 44 px. Светлая заливка кругов — on-slab, значок — slab:
   пара не зависит от темы страницы. Селекторы с классом окна (0,2,0) перебивают правила родителя (0,1,0 и :hover 0,2,0) при любом порядке. */
.project-lightbox .project-lightbox-about, .project-lightbox .project-lightbox-similar {
  border-radius: var(--radius-lg); box-sizing: border-box; font: 600 16px/20px var(--font-sans); letter-spacing: 0; min-height: var(--btn-m); padding: 15px 20px;
}
.project-lightbox .project-lightbox-about { background: transparent; border: 1.5px solid var(--on-slab); color: var(--on-slab); }
.project-lightbox .project-lightbox-about:hover { background: var(--slab); }
.project-lightbox .project-lightbox-similar { background: var(--accent); border: 0; color: var(--on-accent); }
.project-lightbox .project-lightbox-similar:hover { filter: brightness(1.06); }
.project-lightbox :is(.project-lightbox-about, .project-lightbox-similar, .project-lightbox-nav, .project-lightbox-close):focus-visible {
  box-shadow: 0 0 0 2px var(--slab), 0 0 0 4px var(--on-slab); outline: 2px solid transparent;
}
.project-lightbox :is(.project-lightbox-nav, .project-lightbox-close) {
  align-items: center; background: var(--on-slab); border: 0; border-radius: var(--radius-pill); color: var(--slab); display: flex;
  font: 400 28px/1 var(--font-sans); height: var(--hit-min); justify-content: center; padding: 0 0 3px; width: var(--hit-min);
}
.project-lightbox .project-lightbox-nav:hover { background: var(--on-slab); filter: brightness(0.92); }
.project-lightbox .project-lightbox-title { color: var(--on-slab); font: 700 16px/22px var(--font-sans); }
.project-lightbox .project-lightbox-counter { color: var(--on-slab); font: 600 14px/20px var(--font-sans); }
.project-lightbox figure figcaption { color: var(--on-slab-muted); font: 400 14px/20px var(--font-sans); }
.project-consultation-close { color: var(--ink); }
.project-loading { color: var(--ink-muted); }
.project-back, .project-public-header > a:last-child, .project-consultation-phone { color: var(--accent); }
@media (max-width: 700px) {
  .project-public .project-public-cta { border-radius: 0; }
}

/* ---------- 17. Нижние панели телефона: TabBar и ActionBar — в assets/css/ds-shell.css ---------- */
/* Плавающие кнопки родителя — плоские круглые, над панелью. */
.avtogates-floating-shortcuts__link { background: var(--surface-raised); border-color: var(--line-strong); box-shadow: none; color: var(--ink); }
.avtogates-floating-shortcuts__link:hover { background: var(--fill-tag); border-color: var(--ink); }

/* ---------- 18. Конфигуратор: цвета, шрифты и кнопки (плагин gate-configurator не тронут; тёмная тема — через те же токены) ----------
   Раздел перекрашивает только прежний вид калькулятора (classic, классы avtogates-configurator__*): корень без data-layout="ds".
   У нового вида (data-layout="ds", плагин 0.8.0) свои классы и свой файл стилей, эти правила на него не действуют. :not() на корне
   добавляет к специфичности 0,1,0, то есть правила не слабее прежних и по-прежнему обходятся без принудительных приоритетов. */
.avtogates-configurator.avtogates-configurator:not([data-layout="ds"]) {
  --ag-ink: var(--ink);
  --ag-paper: var(--surface);
  --ag-surface: var(--surface-raised);
  --ag-surface-card: var(--fill-tag);
  --ag-surface-card-alt: var(--surface-sunken);
  --ag-pine: var(--ink);
  --ag-lime: var(--accent);
  --ag-line: var(--line-strong);
  --ag-muted: var(--ink-muted);
  --ag-eyebrow: var(--ink-muted);
  --ag-ink-subtle: var(--ink-soft);
  --ag-status: var(--ink-muted);
  --ag-disabled-bg: var(--disabled-fill);
  --ag-overlay: var(--wp--custom--color--overlay);
  --ag-focus: var(--ink);
  --ag-error-bg: var(--error-surface);
  --ag-error-border: var(--error-line);
  --ag-font-body: var(--font-sans);
  --ag-font-price: var(--font-numeric);
}
/* Кнопки калькулятора -> кнопки ДС (как core/button в разделе 5): радиус lg, Golos Text 600 16/20, высота btn-m, кольцо фокуса ДС.
   Плагин красит кнопки собственными правилами (0,1,0), а на телефоне ещё и более частными (`.quote-cta--compact:not([hidden])` — 0,3,0,
   `.price-actions .button--primary` — 0,2,0). Тройной класс корня даёт 0,4,0 и перебивает их при любом порядке подключения, без принудительных приоритетов.
   Свойство display не задаём: показ и скрытие кнопок (`--compact`, `--card`, [hidden]) остаётся за плагином.
   Главная: акцент и on-accent (в светлой теме белый на оранжевом, в тёмной графит на светло-оранжевом); недоступная — серая.
   Контурная («Ещё: калитка»): как is-style-avtogates-outline. Ссылка («Получить расчёт в Telegram», «Показать больше…»): как is-style-avtogates-link. */
.avtogates-configurator.avtogates-configurator.avtogates-configurator:not([data-layout="ds"]) .avtogates-configurator__button--primary {
  background: var(--accent); border: 0; border-radius: var(--radius-lg); box-shadow: none; color: var(--on-accent);
  font: 600 16px/20px var(--font-sans); letter-spacing: 0; min-height: var(--btn-m); padding: 15px 20px; text-decoration: none; text-transform: none;
}
.avtogates-configurator.avtogates-configurator.avtogates-configurator:not([data-layout="ds"]) .avtogates-configurator__button--primary:hover:not(:disabled) { filter: brightness(1.06); }
.avtogates-configurator.avtogates-configurator.avtogates-configurator:not([data-layout="ds"]) .avtogates-configurator__button--primary:disabled { background: var(--disabled-fill); color: var(--on-disabled); }
.avtogates-configurator.avtogates-configurator.avtogates-configurator:not([data-layout="ds"]) .avtogates-configurator__extras-toggle {
  background: transparent; border: 1.5px solid var(--ink); border-radius: var(--radius-lg); color: var(--ink);
  font: 600 16px/20px var(--font-sans); letter-spacing: 0; min-height: var(--btn-m); padding: 15px 20px;
}
.avtogates-configurator.avtogates-configurator.avtogates-configurator:not([data-layout="ds"]) .avtogates-configurator__extras-toggle:hover { background: var(--fill-tag); }
.avtogates-configurator.avtogates-configurator.avtogates-configurator:not([data-layout="ds"]) .avtogates-configurator__extras-picked { color: var(--ink-muted); font-family: var(--font-sans); }
.avtogates-configurator.avtogates-configurator.avtogates-configurator:not([data-layout="ds"]) :is(.avtogates-configurator__link-button, .avtogates-configurator__more-summary) {
  background: transparent; border: 0; border-radius: var(--radius-lg); color: var(--accent); font: 600 16px/20px var(--font-sans);
  letter-spacing: 0; min-height: var(--hit-min); text-decoration: none;
}
.avtogates-configurator.avtogates-configurator.avtogates-configurator:not([data-layout="ds"]) .avtogates-configurator__link-button { padding: 0; }
.avtogates-configurator.avtogates-configurator.avtogates-configurator:not([data-layout="ds"]) :is(.avtogates-configurator__link-button, .avtogates-configurator__more-summary):hover { filter: brightness(1.06); }
.avtogates-configurator.avtogates-configurator.avtogates-configurator:not([data-layout="ds"]) :is(.avtogates-configurator__button--primary, .avtogates-configurator__extras-toggle, .avtogates-configurator__link-button, .avtogates-configurator__more-summary):focus-visible {
  box-shadow: var(--focus-ring); outline: 2px solid transparent;
}
/* Цену не рвём посреди числа («73 000–84 / 000 ₽»): строка без переноса, а на узких экранах кегль Unbounded сжимается от ширины окна
   (при 360–390 px это около 22–24 px, диапазон с «₽» помещается в карточку). На компьютере правило не действует: там карточка шире. */
@media (max-width: 720px) {
  .avtogates-configurator.avtogates-configurator:not([data-layout="ds"]) :is(.avtogates-configurator__price, [data-scene-price-value], .avtogates-configurator__config-price, .avtogates-configurator__summary-row--price dd) { white-space: nowrap; }
  .avtogates-configurator.avtogates-configurator:not([data-layout="ds"]) .avtogates-configurator__price { font-size: clamp(20px, 6.2vw, 30px); }
  .avtogates-configurator.avtogates-configurator:not([data-layout="ds"]) [data-scene-price-value] { font-size: clamp(16px, 5vw, 20px); }
  /* «Свой размер 4,3 м» занимает две колонки сетки из пяти: подпись переносится по словам внутри кнопки, а не вылезает за рамку. */
  .avtogates-configurator.avtogates-configurator:not([data-layout="ds"]) .avtogates-configurator__size-button--custom { font-size: 12px; line-height: 1.2; overflow-wrap: anywhere; padding: 6px 4px; text-wrap: balance; white-space: normal; }
}
.avtogates-configurator__checkbox-box, .avtogates-configurator__sent-badge { color: var(--on-ink); }

/* ---------- 19. Движение ---------- */
@media (prefers-reduced-motion: reduce) {
  .wp-block-button__link:hover { filter: none; }
}

/* ---------- 20. Компьютер: шкала заголовков и воздух (0.9.0, решение владельца 23.10.2026, «вариант 2») ---------- */
/* Ширина сетки 1200 px задана в theme.json (settings.layout): шапка (родитель), первый экран (max-width: wideSize) и плашки разделов (раздел 7) идут по ней.
   Размеры берутся из токенов theme.json через псевдонимы раздела 1. Правила стоят в конце файла: при равной специфичности с разделами 4 и 8 побеждают они.
   Первый экран (.hero) есть только на длинной главной и посадочной; заголовки разделов ограничены ими (.ag-desktop-only) и экранами-страницами (.ag-screen-main).
   Телефон (до 720 px) не затронут. */
@media (min-width: 721px) {
  .hero { min-height: var(--desktop-hero-min-h); }
  .hero h1 { font-size: var(--desktop-hero-title); line-height: var(--desktop-hero-title-lh); }
  .hero-price-value { font-size: var(--desktop-hero-price); line-height: var(--desktop-hero-price-lh); }
  .hero-text { font-size: var(--desktop-hero-text); line-height: var(--desktop-hero-text-lh); }
  :is(.ag-desktop-only, .ag-screen-main) .section h2 { font-size: var(--desktop-section-title); line-height: var(--desktop-section-title-lh); }
}