/* Дизайн-система конфигураторов ALUMINANTE.
   Токены сняты с экспорта страницы Acura Q25 Premium из Тильды. */

:root {
  --font-body: 'Heebo', Arial, Helvetica, sans-serif;
  --font-display: 'Prata', Georgia, serif;

  --ink: #000000;          /* заголовки, цифры */
  --text: #494949;         /* основной текст */
  --muted: #949494;        /* подписи, единицы */
  --line: #c9c9c9;         /* рамки, разделители */
  --line-soft: #ededed;
  --bg: #ffffff;
  --bg-soft: #f2f2f2;      /* панели, невыбранные плитки */
  --accent: #a7282a;       /* единственный акцент */
  --accent-soft: #fbf1f1;  /* тот же акцент, разбавленный — фон выделения */
  /* — цвета категорий продуктов —
     Фирменный приём ALUMINANTE: в брошюре, КП, проформах и на чертежах продукты
     разделены по категориям цветом. Плашка и рамка сняты пипеткой с оглавления
     фирменной брошюры (brand/usage/print/EN-broshure catologue.pdf, стр. 12-13):
     каждая категория там — плитка с градиентом. Плашка и рамка взяты с его концов
     и осветлены до пастели (решение Ники 23.09.2026): плашка — светлый конец с
     45 % белого, рамка — насыщенный с 30 %. Подпись — тот же тон, приглушённый и
     затемнённый до читаемого контраста (≥ 4.6): в брошюре текста этим цветом нет.
     Полная таблица с исходными цветами — brand/colors/PALETTE.md.
     Категорию объявляет продукт: "category" в products/<продукт>.json. */
  --cat-soft: #f2f2f2; --cat-line: #c9c9c9; --cat-ink: #494949;   /* без категории */

  --gap: 24px;
  --radius: 2px;
  --maxw: 1200px;
}

.ac * { box-sizing: border-box; }
.ac {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 20px 40px;
}

/* — типографика — */
.ac__eyebrow {
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 8px;
}
.ac__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: 37px; line-height: 1.2; color: var(--ink); margin: 0 0 28px;
}
.ac__legend {
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink); margin: 0 0 14px; padding: 0;
}
.ac__note { font-size: 12px; color: var(--muted); margin: 6px 0 0; }
.ac__legend--sub { margin: 18px 0 8px; color: var(--muted); }

/* — категории продуктов: цвет включается классом на <html> (ставит ui.js) — */
/* 1. Перекрытия — ACURA, SKYTECH, VISTA, PRADA, PARETTI, PAVILON */
.ac-cat-overlap { --cat-soft: #f5eefe; --cat-line: #cdb2f9; --cat-ink: #784cbd; }
/* 2. Остекление — ORIZZONTE, SKYLINE, SPAZIO, ASPETTO, SPARBU */
.ac-cat-glazing { --cat-soft: #e8f5e4; --cat-line: #c3e4b7; --cat-ink: #42762d; }
/* 3. Окна и двери — AW, AGIO, PIEGA, LAU PLISSE */
.ac-cat-windoor { --cat-soft: #fcfbdf; --cat-line: #f6f2a4; --cat-ink: #77742c; }
/* 4. Солнцезащита — VITO ZIP, DAZZONI, ZILLI */
.ac-cat-sun { --cat-soft: #ffeed7; --cat-line: #ffd28d; --cat-ink: #866432; }
/* 5. Ограждения — VETRO, DOPPIO, QUADRO, BARIO */
.ac-cat-fencing { --cat-soft: #e5f5f1; --cat-line: #95dfcd; --cat-ink: #2c7765; }
/* 6. Офисные перегородки — ADOOR INNOWAL */
.ac-cat-office { --cat-soft: #f7ecf3; --cat-line: #ddb5d4; --cat-ink: #a04a8e; }
/* 7. Фасады — AF */
.ac-cat-facade { --cat-soft: #e0e5fb; --cat-line: #afbaf2; --cat-ink: #495cbc; }
/* 8. Профиль — SAP */
.ac-cat-profile { --cat-soft: #d5effc; --cat-line: #89d2f6; --cat-ink: #336d8a; }

/* — выбор модели: выделенным блоком под размерами —
   Просьба Ники 23.09.2026: переключатель терялся в правой колонке. Красим цветом
   КАТЕГОРИИ продукта — это не выделение выгоды, а развилка, с которой человек
   начинает, и заодно связь со всей фирменной документацией. */
.ac__models {
  margin: 0 0 22px; padding: 14px 16px;
  border: 1px solid var(--cat-line); border-radius: var(--radius);
  background: var(--cat-soft);
}
.ac__models-label {
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--cat-ink); margin: 0 0 10px;
}
.ac__models .ac__tiles { margin: 0; }
.ac__models .ac__tile { background: var(--bg); border-color: var(--cat-line); }
.ac__models .ac__tile:hover { border-color: var(--cat-ink); color: var(--cat-ink); }
/* Выбранный вариант — серым, а не заливкой цвета категории (правка Ники 24.09.2026):
   плашка уже салатовая, и зелёное на зелёном сливалось. Серое читается на любой категории. */
.ac__models .ac__tile[aria-pressed="true"] {
  background: var(--bg-soft);
  border-color: var(--text);
  box-shadow: inset 0 0 0 1px var(--text);
  color: var(--ink);
}
.ac__models-note { font-size: 12px; color: var(--text); margin: 10px 0 0; }
.ac__models .ac__label { display: block; margin: 12px 0 6px; }
.ac__models .ac__label:first-of-type { margin-top: 0; }


/* — раскладка — */
.ac__panel { padding: 22px 0 4px; margin: 0 0 var(--gap); }
.ac__panel + .ac__panel { border-top: 1px solid var(--line); }

/* — поля — */
.ac__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.ac__label { font-size: 13px; color: var(--text); }
.ac__value { font-family: var(--font-body); font-size: 18px; color: var(--ink); }
.ac__value span { font-family: var(--font-body); font-size: 12px; color: var(--muted); }

input[type=range].ac__range {
  -webkit-appearance: none; appearance: none; width: 100%; height: 1px;
  background: var(--line); margin: 10px 0 18px; cursor: pointer;
}
input[type=range].ac__range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: var(--ink); cursor: pointer;
}
input[type=range].ac__range::-moz-range-thumb {
  width: 16px; height: 16px; border: 0; border-radius: 50%; background: var(--ink); cursor: pointer;
}
input[type=range].ac__range:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }

/* — числовой ввод размеров — */
.ac__unit { font-size: 12px; color: var(--muted); }
.ac__num {
  width: 100%; margin: 0 0 18px; padding: 11px 12px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg);
  font-family: var(--font-body); font-size: 18px; color: var(--ink);
}
.ac__num:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* допустимый диапазон под полем и строка «размер прижат к пределу» (24.09.2026) */
.ac__limits { margin: 6px 0 0; font-size: 12px; color: var(--text); }
.ac__clamp { margin: 6px 0 0; font-size: 12px; line-height: 1.45; color: var(--accent); }
.ac__clamp:empty { display: none; }
/* выпадающий список в ряду размеров — того же вида, что числовое поле */
.ac__select {
  width: 100%; padding: 11px 36px 11px 12px; appearance: none; -webkit-appearance: none;
  border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer;
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23494949' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 12px center;
  font-family: var(--font-body); font-size: 16px; color: var(--ink);
}
.ac__select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* — переключатель мм / футы: в заголовке блока размеров — */
.ac__units { display: inline-flex; gap: 0; margin-left: 12px; vertical-align: middle; }
.ac__unit-btn {
  padding: 3px 9px; border: 1px solid var(--line); background: var(--bg); color: var(--muted);
  font-family: var(--font-body); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  cursor: pointer; transition: border-color .2s, color .2s, background .2s;
}
.ac__unit-btn:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.ac__unit-btn:last-child { border-radius: 0 var(--radius) var(--radius) 0; margin-left: -1px; }
.ac__unit-btn:hover { border-color: var(--ink); color: var(--ink); }
.ac__unit-btn[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: #fff; }

/* — ручной оттенок, когда стандартного RAL не хватает — */
.ac__custom-text {
  flex: 1 1 auto; min-width: 0; padding: 5px 8px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg);
  font-family: var(--font-body); font-size: 12px; color: var(--ink);
}
.ac__custom-hex {
  flex: 0 0 auto; width: 28px; height: 24px; padding: 0; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg);
}

/* — плитки выбора — */
.ac__tiles { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.ac__tile {
  flex: 1 1 auto; min-width: 96px; padding: 11px 14px; text-align: center;
  border: 1px solid var(--line); background: var(--bg); color: var(--text);
  font-family: var(--font-body); font-size: 13px; cursor: pointer;
  border-radius: var(--radius); transition: border-color .2s, color .2s;
}
.ac__tile:hover { border-color: var(--ink); color: var(--ink); }
.ac__tile[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: #fff; }
.ac__tile small { display: block; font-size: 11px; opacity: .65; margin-top: 2px; }
/* Верхняя строка плитки — тип изделия над названием (крыша террасы, правка Ники 10.10.2026) */
.ac__tile small.ac__tile-top { margin: 0 0 2px; }

/* — счётчики пультов — */
.ac__stepper { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.ac__stepper-name { font-size: 13px; }
.ac__stepper-name small { color: var(--muted); }
.ac__stepper-ctl { display: flex; align-items: center; gap: 4px; }
.ac__stepper-ctl button {
  width: 28px; height: 28px; border: 1px solid var(--line); background: var(--bg);
  font-family: var(--font-body); font-size: 15px; color: var(--ink); cursor: pointer; border-radius: var(--radius);
}
.ac__stepper-ctl button:hover { border-color: var(--ink); }
.ac__stepper-ctl output { min-width: 24px; text-align: center; font-family: var(--font-body); font-size: 16px; color: var(--ink); }


/* — комплектация под сценой: пульты | датчики | вентиляторы и обогреватели — одной строкой
   (решение Ники 02.10.2026, engine/equip.js). Число колонок задаёт сам блок. — */
.ac__equip {
  display: grid; grid-template-columns: repeat(var(--equip-cols, 2), minmax(0, 1fr)); gap: 0 40px;
  margin: 0 0 40px;
}
.ac__equip-col .ac__legend { margin-bottom: 4px; }
/* Свёрнутый блок «Автоматика и комфорт»: строка заголовка с выбранным составом. */
.ac__equip-wrap > summary {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; cursor: pointer;
  list-style: none; padding: 4px 0;
}
.ac__equip-wrap > summary::-webkit-details-marker { display: none; }
.ac__equip-wrap > summary .ac__legend { margin: 0; }
/* Стрелка в кружке — как у раскрывающегося пункта меню (правка Ники 06.10.2026: плюсик был незаметен). */
.ac__equip-wrap[open] > summary .ac__chev { transform: rotate(180deg); }
/* Каждая группа — своей строкой под заголовком: пульты, датчики, климат не в кучу (правка Ники 06.10.2026). */
.ac__equip-tally { flex: 1 0 100%; display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ink); }
.ac__equip-tally:empty { display: none; }
.ac__equip-tally i { font-style: normal; color: var(--muted); }
.ac__equip-wrap { margin: 0 0 32px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.ac__equip-wrap > .ac__equip { margin: 12px 0 8px; }
.ac__equip-wrap .ac__stepper-icon { width: 28px; height: 28px; }
/* Убранная подсказка (пустой текст) места не занимает. */
.ac__note:empty { display: none; }
.ac__stepper-icon { flex: 0 0 36px; width: 36px; height: 36px; }
.ac__equip .ac__stepper-name { flex: 1; }
@media (max-width: 760px) { .ac__equip { grid-template-columns: 1fr; gap: 24px; } }

/* — сцена: 3D слева, визуальные опции справа — */
.ac__stage {
  display: grid; grid-template-columns: 1fr 340px; gap: 0;
  border: 1px solid var(--line); border-radius: var(--radius);
  margin: 0 0 40px; overflow: hidden;
}
.ac__viewer { position: relative; background: #eceae6; min-height: 480px; }
.ac__canvas { position: absolute; inset: 0; }
.ac__canvas canvas { display: block; width: 100%; height: 100%; }
/* Подсказка — строкой под рядом кнопок: кнопки стоят слева сверху (решение Ники 30.09.2026). */
.ac__viewer-hint {
  position: absolute; left: 16px; right: 16px; top: 56px; margin: 0;
  font-size: 11px; letter-spacing: .04em; color: var(--muted); pointer-events: none;
}
/* подписи показа при открытии (engine/wow.js, правка Aluminante 14.10.2026): на компьютере вверху по центру окна 3D под рядом кнопок
   (внизу окно 3D уходит за экран, доработка 2); на телефоне внизу над плашкой AR. Кликабельна только подсказка про бока. */
.ac__wow-captions {
  position: absolute; left: 12px; right: 12px; top: 84px; display: flex; flex-direction: column;
  align-items: center; gap: 6px; pointer-events: none; z-index: 3;
}
.ac__wow-caption {
  margin: 0; max-width: 100%; box-sizing: border-box; padding: 8px 14px; border: 0; border-radius: var(--radius);
  background: rgba(20,22,26,.62); color: #fff; font-family: var(--font-body); font-size: 12px; letter-spacing: .04em;
  text-align: center; line-height: 1.35; opacity: 0; transform: translateY(4px); pointer-events: none;
  transition: opacity .4s ease, transform .4s ease;
}
.ac__wow-caption.is-on { opacity: 1; transform: none; }
/* правка Aluminante 15.10.2026 (показ v2): крупная подпись про размеры, держится на экране ~3,5 с */
.ac__wow-caption.is-big { font-size: 20px; line-height: 1.3; padding: 12px 22px; max-width: 760px; letter-spacing: .01em; background: rgba(20,22,26,.78); }
@media (max-width: 480px) { .ac__wow-caption.is-big { font-size: 14px; padding: 6px 10px; } .ac__wow-captions.is-top { top: 96px; bottom: auto; } }   /* круг 2: на телефоне крупная подпись встаёт под кнопки */
.ac__wow-caption--hint.is-on.is-link { pointer-events: auto; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .ac__wow-caption { transition: none; transform: none; } }
.ac__viewer-reset {
  position: absolute; left: 14px; top: 14px;
  padding: 7px 12px; font-family: var(--font-body); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid var(--line); background: rgba(255,255,255,.85); color: var(--ink);
  border-radius: var(--radius); cursor: pointer;
}
.ac__viewer-reset:hover { border-color: var(--ink); }
/* кнопка ▶ показа движения (engine/play.js) — в ряд с «Сбросить вид», в том же виде.
   Ряд кнопок — от левого края окна 3D (решение Ники 30.09.2026, было справа). */
.ac__viewer-tools { position: absolute; left: 14px; top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.ac__viewer-tools .ac__viewer-reset { position: static; }
.ac__viewer-play {
  display: inline-flex; gap: 6px; align-items: center;
  padding: 7px 12px; font-family: var(--font-body); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid var(--line); background: rgba(255,255,255,.85); color: var(--ink);
  border-radius: var(--radius); cursor: pointer;
}
.ac__viewer-play:hover { border-color: var(--ink); }
.ac__viewer-play[hidden] { display: none; }
/* правка Aluminante 19.10.2026 (раунд 11, п.2): кнопка «Поделиться» (engine/share.js) — как «Движение», на телефоне только значок */
.ac__viewer-share {
  display: inline-flex; gap: 6px; align-items: center;
  padding: 7px 12px; font-family: var(--font-body); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid var(--line); background: rgba(255,255,255,.85); color: var(--ink);
  border-radius: var(--radius); cursor: pointer;
}
.ac__viewer-share:hover { border-color: var(--ink); }
.ac__viewer-share svg { width: 15px; height: 15px; flex: none; }
/* только значок: с подписью ряд кнопок на 1280 переносится и закрывает подсказку жестов */
.ac__viewer-share-text { display: none; } .ac__viewer-share { padding: 7px 9px; }
.ac-share { position: relative; }
.ac-share__x { position: absolute; top: 6px; right: 10px; border: 0; background: none; font-size: 26px; line-height: 1; cursor: pointer; color: var(--ink); }
.ac-share__acts { display: flex; flex-direction: column; gap: 8px; }
.ac-share__acts .ac__btn { width: 100%; text-align: center; text-decoration: none; box-sizing: border-box; }
.ac-share [data-qrbox] { margin-top: 16px; }
.ac-share [data-qrbox][hidden] { display: none; }
@media (max-width: 640px) { .ac__viewer-play-text { display: none; } }
/* кнопка «Примерить на участке» (engine/ar.js) — первой в ряду и чёрной: главное действие у 3D.
   На телефоне уходит в левый нижний угол модели, чтобы надпись поместилась целиком. */
.ac__viewer-ar {
  display: inline-flex; gap: 7px; align-items: center;
  padding: 7px 12px; font-family: var(--font-body); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid var(--ink); background: var(--ink); color: #fff;
  border-radius: var(--radius); cursor: pointer;
}
.ac__viewer-ar:hover { background: var(--bg); color: var(--ink); }
.ac__viewer-ar svg { width: 16px; height: 16px; flex: none; }
.ac__viewer-ar[aria-busy="true"] { opacity: .7; cursor: progress; }
.ac__viewer-ar--call { animation: ac-ar-call 1.6s ease-in-out 4; }
@keyframes ac-ar-call { 50% { box-shadow: 0 0 0 7px rgba(0, 0, 0, .18); } }
/* «?» — продолжение той же чёрной кнопки через светлую черту, чтобы читался как часть примерки
   (правка Ники 07.10.2026: отдельный «?» путали с «Движением»). Снова открывает «Как примерять». */
.ac__viewer-arbox { display: inline-flex; }
.ac__viewer-arbox .ac__viewer-ar { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.ac__viewer-ar-help {
  width: 30px; padding: 0; font-family: var(--font-body); font-size: 13px;
  border: 1px solid var(--ink); border-left-color: rgba(255, 255, 255, .45);
  background: var(--ink); color: #fff;
  border-radius: 0 var(--radius) var(--radius) 0; cursor: pointer;
}
.ac__viewer-ar-help:hover { background: var(--bg); color: var(--ink); border-left-color: var(--ink); }
@media (max-width: 640px) {
  .ac__viewer-tools { right: 14px; pointer-events: none; }
  .ac__viewer-tools > * { pointer-events: auto; }
  .ac__viewer-arbox { position: absolute; left: 0; top: 258px; }
}
/* окно QR-кода и сообщений AR */
.ac-ar {
  width: min(360px, calc(100% - 32px)); box-sizing: border-box; padding: 28px 24px 24px;
  border: 1px solid var(--line); border-radius: var(--radius);
  font-family: var(--font-body); color: var(--text); text-align: center;
}
.ac-ar:focus { outline: none; }
.ac-ar::backdrop { background: rgba(0, 0, 0, .35); }
.ac-ar__qr svg { display: block; width: 200px; height: 200px; margin: 0 auto 18px; }
.ac-ar p { font-size: 13px; line-height: 1.5; margin: 0 0 10px; }
.ac-ar p.ac-ar__note { font-size: 12px; color: var(--muted); }
.ac-ar p.ac-ar__title { font-family: var(--font-display); font-size: 22px; line-height: 1.25; color: var(--ink); margin: 0 0 18px; }
.ac-ar__actions { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.ac-ar__actions .ac__btn { width: 100%; text-align: center; }
/* карточка «Как примерять»: три живые подсказки жестов (engine/ar.js → howto) */
.ac-ar-howto { list-style: none; margin: 0 0 6px; padding: 0; text-align: left; }
.ac-ar-howto li { display: flex; align-items: center; gap: 14px; padding: 8px 0; border-top: 1px solid var(--line-soft); }
.ac-ar-howto li:first-child { border-top: 0; }
.ac-ar-howto svg { width: 84px; height: 84px; flex: none; background: var(--bg-soft); }
.ac-ar-howto span { font-size: 13px; line-height: 1.45; }
.ac-ar-howto svg * { transform-box: fill-box; transform-origin: center; }
.ac-ar-howto__phone { animation: ac-howto-sway 3.6s ease-in-out infinite; }
.ac-ar-howto__dots { animation: ac-howto-dots 3.6s ease-in-out infinite; }
.ac-ar-howto__appear { animation: ac-howto-appear 3.6s ease-in-out infinite; }
.ac-ar-howto__drag { animation: ac-howto-drag 3s ease-in-out infinite; }
.ac-ar-howto__turn { animation: ac-howto-turn 3s ease-in-out infinite; }
.ac-ar-howto__fingers { animation: ac-howto-fingers 3s ease-in-out infinite; }
@keyframes ac-howto-sway { 0%, 100% { transform: translateX(-16px) rotate(-6deg); } 50% { transform: translateX(16px) rotate(6deg); } }
@keyframes ac-howto-dots { 0%, 10% { opacity: 0; } 45%, 100% { opacity: 1; } }
@keyframes ac-howto-appear { 0%, 55% { opacity: 0; transform: translateY(-6px); } 75%, 100% { opacity: 1; transform: none; } }
@keyframes ac-howto-drag { 0%, 100% { transform: translateX(-11px); } 50% { transform: translateX(11px); } }
@keyframes ac-howto-turn { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.35); } }
@keyframes ac-howto-fingers { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(70deg); } }
@media (prefers-reduced-motion: reduce) { .ac-ar-howto svg * { animation: none; } }
.ac-ar__mv { position: fixed; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ac__rail {
  border-left: 1px solid var(--line); background: var(--bg);
  padding: 22px 22px 6px;
}
.ac__rail .ac__panel:first-child { padding-top: 0; }
.ac__rail .ac__tile { min-width: 72px; padding: 9px 10px; font-size: 12px; }

/* — плашка опций поверх 3D — */
.ac__overlay {
  position: absolute; left: 14px; bottom: 14px;
  width: min(380px, calc(100% - 28px));
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.ac__overlay-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* Плашка сворачивается в одну кнопку и при открытии страницы свёрнута:
   модель видна целиком (правка Сергея 05.10.2026). Кнопку ставит engine/overlay.js. */
.ac__overlay:not(.ac__overlay--open) { width: auto; padding: 0; gap: 0; }
.ac__overlay:not(.ac__overlay--open) > :not(.ac__overlay-toggle) { display: none; }
.ac__overlay-toggle {
  display: flex; align-items: center; gap: 8px; align-self: flex-start;
  padding: 8px 12px; border: 0; background: transparent; cursor: pointer;
  font-family: var(--font-body); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink);
}
.ac__overlay--open .ac__overlay-toggle { padding: 0 0 2px; }
/* Раскрытая плашка не выше сцены: сверху остаётся место кнопкам «Движение», «Сбросить вид» и строке подсказки,
   а длинная палитра RAL прокручивается внутри плашки. */
.ac__overlay--open { max-height: calc(100% - 100px); overflow-y: auto; }
.ac__overlay--open .ac__picker-grid { max-height: 150px; }
.ac__overlay-toggle i {
  width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto;
  background: conic-gradient(#c1121f, #f9a800, #2e7d32, #1565c0, #6a1b9a, #c1121f);
}
/* Свёрнутая — стрелка вниз, раскрытая — вверх, как у «Автоматики» (правка Ники 06.10.2026). */
.ac__overlay--open .ac__overlay-toggle .ac__chev { transform: rotate(180deg); }
/* С открытой таблицей RAL плашке нужно больше места, иначе образцы в три колонки. */
.ac__overlay:has(.ac__picker:not([hidden])) { width: min(560px, calc(100% - 28px)); }
.ac__overlay-row[hidden] { display: none; }
.ac__overlay-label {
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); flex: 0 0 62px;
}
.ac__overlay-name { font-size: 11px; color: var(--muted); }
.ac__overlay .ac__tiles { gap: 6px; margin: 0; }
.ac__overlay .ac__tile { flex: 0 0 auto; min-width: 0; padding: 6px 10px; font-size: 11px; }
.ac__overlay .ac__swatches { gap: 6px; }
.ac__overlay .ac__swatch { width: 24px; height: 24px; }
.ac__overlay .ac__swatch i { inset: 2px; }

/* — образцы цвета — */
.ac__swatches { display: flex; flex-wrap: wrap; gap: 8px; }
/* display:flex перебивает браузерное [hidden] — гасим явно */
.ac__swatches[hidden] { display: none; }
.ac__swatch {
  width: 34px; height: 34px; padding: 0; cursor: pointer;
  border: 1px solid var(--line); border-radius: 50%; background: transparent;
  position: relative;
}
.ac__swatch i { position: absolute; inset: 3px; border-radius: 50%; display: block; }
.ac__swatch[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.ac__swatch-name { font-size: 12px; color: var(--muted); margin: 8px 0 0; }

/* — кнопка «вся палитра RAL» на месте прежнего серого кружка — */
.ac__swatch--more i {
  background: conic-gradient(#c1121f, #f9a800, #2e7d32, #1565c0, #6a1b9a, #c1121f);
}
.ac__swatch--more::after {
  content: "+"; position: absolute; inset: 0; display: grid; place-items: center;
  color: #fff; font-size: 15px; line-height: 1; text-shadow: 0 0 2px rgba(0,0,0,.6);
}

/* — таблица RAL Classic: поиск + сетка образцов с кодами — */
.ac__picker {
  flex: 1 1 100%; margin-top: 8px; padding: 10px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg);
}
.ac__picker[hidden] { display: none; }
/* Крестик закрытия палитры — ставит engine/overlay.js. */
.ac__picker { position: relative; }
.ac__picker-close {
  position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; padding: 0;
  border: 0; background: transparent; cursor: pointer;
  font-size: 18px; line-height: 1; color: var(--muted);
}
.ac__picker-close:hover { color: var(--ink); }
.ac__picker-search {
  width: calc(100% - 30px); padding: 7px 10px; margin-bottom: 8px;
  border: 1px solid var(--line); border-radius: var(--radius);
  font-family: var(--font-body); font-size: 12px; color: var(--ink);
}
.ac__picker-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 6px; max-height: 220px; overflow-y: auto;
}
.ac__chip {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 2px; cursor: pointer; text-align: center;
  border: 1px solid transparent; border-radius: var(--radius); background: var(--bg);
}
.ac__chip[hidden] { display: none; }
.ac__chip i { width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.ac__chip b { font-family: var(--font-body); font-weight: 500; font-size: 10px; color: var(--ink); }
.ac__chip small { font-size: 9px; line-height: 1.2; color: var(--muted); }
.ac__chip:hover { border-color: var(--line); }
.ac__chip[aria-pressed="true"] { border-color: var(--ink); }
.ac__picker-custom {
  display: flex; align-items: center; gap: 6px; margin-top: 10px;
  padding-top: 10px; border-top: 1px solid var(--line-soft);
}
.ac__picker-custom > span { font-size: 11px; color: var(--muted); white-space: nowrap; }

/* — кружок оттенка RGB: тот же цветной плюсик, клик открывает спектр — */
.ac__swatch--wheel { display: inline-block; }
.ac__swatch--wheel[hidden] { display: none; }
.ac__swatch--wheel i { background: none; }
.ac__swatch--wheel input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; border: 0; padding: 0; cursor: pointer;
}

/* — выделение редкой возможности: вылет до 9 м одним рядом — */
.ac__flag {
  margin-top: 20px; padding: 14px 16px;
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--radius); background: var(--bg);
}
.ac__flag--on { background: var(--accent-soft); border-color: var(--accent); }
.ac__flag p { margin: 0; }
.ac__flag-eyebrow {
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 6px;
}
.ac__flag-title {
  /* Heebo жирным — решение Ники 14.09.2026, Prata здесь спорила с заголовком страницы */
  font-family: var(--font-body); font-weight: 700; font-size: 17px; line-height: 1.35;
  color: var(--ink); margin-bottom: 6px;
}
.ac__flag-text { font-size: 13px; color: var(--text); }
.ac__flag-active {
  margin-top: 8px; font-size: 13px; color: var(--accent);
}
.ac__flag-active[hidden] { display: none; }
.ac__maxsize { margin: 10px 0 0; font-size: 13px; line-height: 1.45; color: var(--accent); }
.ac__maxsize b { font-weight: 700; }

/* — размеры: строкой над конфигуратором — */
.ac__sizes { margin-bottom: 28px; }
.ac__sizes .ac__panel { padding-top: 0; margin-bottom: 0; }
.ac__sizes .ac__fields {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
}
.ac__sizes .ac__num { margin-bottom: 0; }
.ac__sizes .ac__fields--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.ac__sizes .ac__fields--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
/* Скрытое поле (сторона пакета у схемы из центра) не держит место в ряду. */
.ac__sizes .ac__fields > [hidden] { display: none; }
.ac__sizes .ac__note { margin-top: 12px; }
/* Двускатная: все размеры каждого ската — в своей карточке, рядом (VISTA, правки Ники 09.10.2026).
   Цвета бренда: скат 1 — сиреневый категории «Перекрытия» (класс ac-cat-overlap на карточке), скат 2 —
   нейтральный серый. Такие же цвета у подписей скатов на чертеже. */
.ac__slopes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ac__slopes[hidden], .ac__sizes .ac__fields[hidden] { display: none; }
.ac__slope { padding: 14px 16px 12px; border-left: 3px solid var(--line); background: var(--bg-soft); }
.ac__slope--1 { border-left-color: var(--cat-line); background: var(--cat-soft); }
.ac__slope-title { margin: 0 0 10px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--text); }
.ac__slope--1 .ac__slope-title { color: var(--cat-ink); }
.ac__sizes .ac__slope .ac__slope-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ac__sizes .ac__slope .ac__note { margin-top: 10px; }

/* — чертёж — */
.ac__draw {
  background: var(--bg-soft); padding: 20px; border-radius: var(--radius);
  /* safe center: не влез — прижимаемся влево и прокручиваемся, а не уезжаем за левый край */
  overflow-x: auto; display: flex; justify-content: safe center;
  /* Размеры уехали наверх, чертёж остался один на всю ширину — не даём ему расплываться. */
  max-width: 860px; margin: 0 auto 40px;
}
/* Чертёж не растягиваем на всю колонку — держим по высоте, иначе он выше блока размеров. */
.ac__draw svg { display: block; width: auto; max-width: 100%; max-height: 360px; height: auto; }
/* Два вида одним блоком — фасад над видом сверху (ORIZZONTE THERMO). */
/* Блоком, не флексом: широкий чертёж на телефоне прокручивается внутри, а не распирает страницу. */
.ac__draw--stack { display: block; min-width: 0; }
.ac__draw--stack svg { margin: 0 auto; }
.ac__draw--stack .ac__legend { margin: 0 0 4px; }
.ac__draw--stack svg + .ac__legend { margin-top: 18px; }

/* — ручки: место × сторона — */
.ac__handle-row { display: grid; grid-template-columns: 120px 1fr; gap: 10px; align-items: center; padding: 6px 0; }
.ac__handle-row + .ac__handle-row { border-top: 1px solid var(--line); }
.ac__handle-name { font-size: 12px; color: var(--text); }
.ac__handle-row .ac__tiles { margin: 0; }
.ac__handles-count { margin: 0 0 8px; font-size: 13px; color: var(--ink); }
.ac__legend-hint { margin-left: 8px; letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--cat-ink, var(--muted)); }
/* — ручки: строка мини-схемы в плашке поверх 3D (ORIZZONTE THERMO) — */
.ac__overlay-row--handles { padding-top: 8px; border-top: 1px solid var(--line); }
/* Схема — вторым этажом во всю ширину плашки: сверху подпись, число ручек и «убрать все». */
.ac__hmini { flex: 1 1 100%; order: 3; min-width: 0; }
.ac__hmini svg { display: block; width: 100%; height: auto; }
.ac__hmini .oz-add:hover circle:nth-of-type(2) { fill: var(--cat-soft, #f2f2f2); }
.ac__hmini .oz-add.is-on:hover { opacity: .75; }
.ac__overlay-row--handles { row-gap: 4px; }
.ac__overlay-row--handles .ac__overlay-name { flex: 1 1 auto; color: var(--cat-ink, var(--muted)); }
.ac__hclear {
  font: inherit; font-size: 11px; color: var(--muted); background: none; border: 0; padding: 0;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.ac__hclear:hover { color: var(--ink); }

/* — итог: строкой во всю ширину под размерами и чертежом — */
.ac__total { border-top: 1px solid var(--ink); padding-top: 22px; }
.ac__price {
  font-family: var(--font-display); font-size: 34px; line-height: 1.2; color: var(--ink); margin: 0;
}
.ac__price-unit { font-family: var(--font-body); font-size: 13px; color: var(--muted); margin: 2px 0 0; }
/* Дилерская скидка справа от цены, без процента (решение Ники 29.09.2026).
   Единственное красное на странице — это выгода. Перенесена сюда из приписки.
   Цена с подписью — левая колонка, плашка — правая, по центру их высоты. */
.ac__price-block {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 28px; align-items: center;
}
.ac__price-block > .ac__price, .ac__price-block > .ac__price-unit { grid-column: 1; }
.ac__price-dealer {
  grid-column: 2; grid-row: 1 / span 2;
  margin: 0; padding: 9px 14px; max-width: 360px;
  background: var(--accent-soft); border-left: 2px solid var(--accent);
  font-family: var(--font-body); font-size: 13px; line-height: 1.5; color: var(--text);
}
.ac__price-dealer b { color: var(--accent); font-weight: 500; }
/* На телефоне рядом не помещается — плашка уходит под цену. */
@media (max-width: 640px) {
  .ac__price-block { grid-template-columns: 1fr; }
  .ac__price-dealer { grid-column: 1; grid-row: auto; margin-top: 12px; max-width: none; }
}
.ac__price-row {
  display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap;
  gap: 20px 40px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line);
}
.ac__actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
/* Под кнопками — только пометка «PDF готов» после разблокировки. */
.ac__actions-note { flex: 1 1 100%; margin: 2px 0 0; font-size: 12px; color: var(--muted); }
/* Состав цены — без плашки и без цвета категории (правка Ники 23.09.2026):
   цветную подложку под «что входит в цену» вернули к прежнему виду, простым
   перечнем на белом. Цвет категории остаётся на выборе модели и на чертеже. */
.ac__summary {
  list-style: none; margin: 14px 0 0; padding: 0; font-size: 13px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px;
}
.ac__summary li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line-soft); }
/* Название строки — серым, что входит в цену — чёрным, как в «Автоматике» (правка Ники 06.10.2026). */
.ac__summary li span:first-child { color: var(--muted); }
.ac__summary li span:last-child { color: var(--ink); text-align: right; }
/* Квадратик выбранного цвета в составе цены (правка Ники 22.09.2026) */
.ac__sq { display: inline-block; width: 12px; height: 12px; margin-right: 8px; vertical-align: -1px;
  border: 1px solid rgba(0,0,0,.18); }

.ac__warn {
  border-left: 2px solid var(--accent); padding: 8px 0 8px 12px; margin: 14px 0 0;
  font-size: 13px; color: var(--accent);
}
.ac__disclaimer { font-size: 12px; line-height: 1.5; color: var(--muted); margin: 18px 0 0; }

/* — кнопки — */
.ac__btn {
  /* Heebo вместо Prata — решение Ники 14.09.2026 */
  display: inline-block; padding: 16px 24px;
  font-family: var(--font-body); font-weight: 500; font-size: 13px;
  letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid var(--ink); background: var(--ink); color: #fff;
  cursor: pointer; border-radius: var(--radius); transition: background .2s, color .2s;
}
.ac__btn:hover { background: var(--bg); color: var(--ink); }
.ac__btn--ghost { background: var(--bg); color: var(--ink); border-color: var(--line); }
.ac__btn--ghost:hover { border-color: var(--ink); background: var(--bg); }

/* — брейкпоинты Тильды: 960 / 640 / 480 / 360 — */
/* Пять-шесть полей в строку на ноутбуке 1024 обрезали списки («Собираются спра…») — по три в ряд уже с 1180. */
@media (max-width: 1180px) {
  .ac__sizes .ac__fields--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 18px; }
  .ac__sizes .ac__fields--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 18px; }
}
@media (max-width: 960px) {
  .ac__stage { grid-template-columns: 1fr; }
  .ac__sizes .ac__fields--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 18px; }
  .ac__sizes .ac__fields--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 18px; }
  .ac__rail { border-left: 0; border-top: 1px solid var(--line); max-height: none; }
  .ac__title { font-size: 30px; }
}
@media (max-width: 700px) {
  .ac__sizes .ac__fields { grid-template-columns: 1fr; gap: 14px; }
  .ac__slopes { grid-template-columns: 1fr; }
  .ac__sizes .ac__fields--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .ac__sizes .ac__fields--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .ac__handle-row { grid-template-columns: 1fr; gap: 6px; }
}
@media (max-width: 640px) {
  .ac { padding: 0 16px 32px; font-size: 14px; }
  .ac__title { font-size: 25px; margin-bottom: 20px; }
  .ac__price { font-size: 25px; }
  .ac__tile { min-width: calc(50% - 4px); }
  .ac__summary { grid-template-columns: 1fr; }
  .ac__price { font-size: 28px; }
  .ac__actions { width: 100%; }
  .ac__btn { flex: 1 1 100%; text-align: center; }
  /* На телефоне плашка не висит поверх модели, а встаёт под ней. */
  .ac__viewer { min-height: 0; padding-top: 320px; }
  .ac__canvas { inset: 0 0 auto 0; height: 320px; }
  .ac__overlay {
    position: static; width: auto; padding: 14px 16px; gap: 8px;
    background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none;
    border: 0; border-top: 1px solid var(--line);
  }
  .ac__overlay-label { flex-basis: 100%; }
  .ac__rail { padding: 18px 16px 4px; }
  /* Чертёж целиком во всю ширину экрана, без прокрутки вбок: обрезанный край
     читался как ошибка (решение Ники 02.10.2026). Поля блока ужаты, чтобы чертежу досталось больше места. */
  .ac__draw { padding: 14px 8px; }
  /* И по высоте — целиком на экране: пусть мельче, но без прокрутки (Ника 02.10.2026).
     Два вида (ORIZZONTE, PIEGA) делят экран пополам. */
  .ac__draw svg { width: 100%; max-height: calc(80svh - 60px); }
  .ac__draw--stack svg { max-height: calc(40svh - 50px); }
  /* Подпись вида — своей строкой над чертежом, а не зажатой сбоку. */
  .ac__draw { flex-wrap: wrap; }
  .ac__draw > .ac__legend { flex: 0 0 100%; margin-bottom: 8px; }
  /* Подсказка про мышь телефону не нужна (там пальцы), а поверх модели она ложится на изделие. */
  .ac__viewer-hint { display: none; }
}
@media (max-width: 480px) {
  .ac__tile { min-width: 100%; }
  /* В два столбца списки обрезались («Нижняя пар…») — на узком телефоне поля в один столбец. */
  .ac__sizes .ac__fields--6, .ac__sizes .ac__fields--5 { grid-template-columns: 1fr; }
  /* «Получить дилерскую скидку» на 320–390 px переносилась в две строки — ужимаем разрядку и поля. */
  .ac__btn { padding: 15px 12px; font-size: 12px; letter-spacing: .06em; }
}

/* Вставка в чужую страницу (?embed=1): у блока сайта свой заголовок,
   второй тут же под ним читается как ошибка вёрстки. Знак в шапке остаётся. */
.ac-embed .ac__eyebrow,
.ac-embed .ac__title { display: none; }
.ac-embed .ac__sizes { margin-top: 28px; }

/* — фирменный слой —
   Бренд держат рамка страницы, знак поверх сцены и гравировка на стойках в 3D.
   Логотип-файл кладётся в assets/brand/logo.svg; пока его нет, знак набирается
   типографикой — тот же светлый гротеск вразрядку, см. engine/brand.js. */
/* Логотип с подписью «aluminium technology»: ниже 30 px подпись не читается (29.09.2026). */
.brand-mark { display: block; height: 30px; width: auto; }
.brand-mark--type {
  font-family: var(--font-body); font-weight: 300; font-size: 15px;
  letter-spacing: .3em; text-transform: uppercase; color: var(--ink);
  line-height: 18px; height: auto;
}
.ac__brand {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 0 14px; border-bottom: 1px solid var(--line-soft); margin-bottom: 26px;
}
.ac__brand-note {
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}
/* Знак поверх сцены. Лежит в контейнере канваса, поэтому и на телефоне,
   где плашка опций уходит вниз, остаётся в кадре модели. */
.ac__stamp {
  position: absolute; right: 16px; bottom: 14px; z-index: 1;
  pointer-events: none; opacity: .42; user-select: none;
}
/* правка Aluminante 17.10.2026 (раунд 9, п.4): значок в углу окна 3D заметнее: крупнее, белый с тенью, 42 % */
.ac__stamp .brand-mark { height: 30px; }
.ac__stamp .brand-mark--type { font-size: 16px; line-height: 18px; letter-spacing: .26em; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.65), 0 0 8px rgba(0,0,0,.35); }
/* правка Aluminante 17.10.2026 (раунд 9, круг 3, п.1): на светлом фоне (день, вилла, ресторан) значок графитовый, 45 % */
.ac--lightbg .ac__stamp { opacity: .45; }
.ac--lightbg .ac__stamp .brand-mark--type { color: #2b2f33; text-shadow: none; }
/* Примечание под конфигуратором: два блока рядом, выгода дилера — акцентом.
   Текст целиком в продуктовом JSON (ui.<язык>.footnote), здесь только вид. */
.ac__footnote {
  margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line-soft);
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px 40px;
}
.ac__footnote h3 {
  font-family: var(--font-body); font-size: 11px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink); margin: 0 0 12px;
}
.ac__footnote p { font-size: 13px; line-height: 1.65; color: var(--muted); margin: 0 0 10px; }
.ac__footnote p:last-child { margin-bottom: 0; }
.ac__footnote-cta { color: var(--ink) !important; font-weight: 500; }
/* «Указанная цена является розничной» — главное, что нужно знать о цене (правка Ники 24.09.2026).
   Выделено чёрным полужирным, а не красным: красное на странице — только выгода дилера. */
.ac__footnote-strong { color: var(--ink); font-weight: 500; }
@media (max-width: 640px) {
  .ac__footnote { grid-template-columns: 1fr; gap: 22px; }
}

.ac__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap;
  margin-top: 34px; padding-top: 14px; border-top: 1px solid var(--line-soft);
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.ac__serial { font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .ac__brand { padding: 16px 0 12px; margin-bottom: 20px; }
  .ac__stamp { right: 8px; bottom: 6px; }
  /* правка Aluminante 17.10.2026 (раунд 9, круг 3, п.1): на телефоне значок мельче, не касается кнопок и полоски цветов */
  .ac__stamp .brand-mark--type { font-size: 11px; line-height: 12px; letter-spacing: .2em; }
  .ac__stamp .brand-mark { height: 20px; }
}

/* ---------- Терраса: стороны и проёмы (terrace.html, 24.09.2026) ----------
   План сверху с кружками «+» слева, карточка выбранного проёма справа, ниже — перечень.
   Блок изделия красится цветом ЕГО категории (класс ac-cat-<категория> на самом блоке):
   остекление зелёное, солнцезащита оранжевая — пергола на странице остаётся сиреневой. */
/* Чертёж одной перголы на странице террасы скрыт: вместо него план с проёмами. */
.ac__draw[hidden] { display: none; }
.pv { border-top: 1px solid var(--line); padding-top: 22px; margin: 0 0 var(--gap); }
.pv__hint { margin: 0 0 16px; max-width: 760px; }
.pv__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 28px; align-items: start; }
/* Узкая и глубокая терраса не вытягивает план выше экрана: высота ограничена, план по центру. */
.pv__plan svg { display: block; width: 100%; height: auto; max-height: 620px; background: var(--bg-soft); border-radius: var(--radius); }
.pv__plan .pv-bay:focus { outline: none; }
.pv__plan .pv-bay:focus-visible circle:first-of-type { stroke: var(--ink); stroke-width: 1.5; }
.pv__plan .pv-bay:hover circle:nth-last-of-type(1) { stroke-width: 2; }
.pv__title { font-family: var(--font-display); font-size: 22px; line-height: 1.2; color: var(--ink); margin: 0 0 2px; }
.pv__size { margin: 0 0 4px; }
.pv__pick { display: block; margin: 14px 0 0; }
.pv__pick > .ac__label { display: block; margin-bottom: 6px; }
.pv__pick .ac__select { width: 100%; }
.pv__row .ac__tile:disabled { opacity: .4; cursor: not-allowed; }
.pv__half {
  margin: 12px 0 0; padding: 10px 12px; font-size: 13px; line-height: 1.45; color: var(--ink);
  background: var(--accent-soft); border-left: 3px solid var(--accent); border-radius: var(--radius);
}
.pv__half p { margin: 0 0 6px; }
.pv__link {
  background: none; border: 0; padding: 0; margin-top: 8px; cursor: pointer;
  font: inherit; font-size: 12px; color: var(--ink); text-decoration: underline;
}
.pv__block { margin: 16px 0 0; border: 1px solid var(--cat-line); border-radius: var(--radius); background: var(--bg); }
.pv__block > summary {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 12px 14px; cursor: pointer; background: var(--cat-soft); list-style: none;
}
.pv__block > summary::-webkit-details-marker { display: none; }
.pv__block > summary::before { content: '+'; color: var(--cat-ink); margin-right: -4px; }
.pv__block[open] > summary::before { content: '−'; }
.pv__block-name {
  flex: 1 1 auto; font-size: 12px; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; color: var(--cat-ink);
}
.pv__block-price { font-size: 14px; color: var(--ink); font-variant-numeric: tabular-nums; }
.pv__block > .ac__note { padding: 0 14px; }
.pv__block-body { padding: 0 14px 14px; }
.pv__row { margin: 14px 0 0; }
.pv__row > .ac__label { display: block; margin-bottom: 8px; }
.pv__row .ac__tile { min-width: 0; padding: 8px 10px; font-size: 12px; }
.pv__row .ac__swatch-name { margin: -4px 0 8px; }
.pv__row .ac__picker { margin-top: 10px; }
.pv__hmini svg { display: block; width: 100%; height: auto; }
.pv__filled { margin-top: 22px; }
.pv__list { list-style: none; margin: 0; padding: 0; }
.pv__list button {
  width: 100%; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) auto; gap: 12px;
  text-align: left; padding: 10px 0; background: none; border: 0; border-bottom: 1px solid var(--line-soft);
  font: inherit; font-size: 13px; color: var(--text); cursor: pointer;
}
.pv__list button span:last-child { color: var(--ink); font-variant-numeric: tabular-nums; }
.pv__list .is-sel button { color: var(--ink); font-weight: 500; }
@media (max-width: 760px) {
  .pv__grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}
@media (max-width: 480px) {
  .pv__list button { grid-template-columns: minmax(0, 1fr) auto; }
  .pv__list button span:nth-child(2) { grid-column: 1 / -1; order: 3; color: var(--muted); }
}

/* — интерьер и окружение террасы (25.09.2026) — */
.pv-scenery { margin-bottom: 24px; }
.pv-scenery__rows { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.pv-scenery .pv__row { margin-top: 0; }
.pv-scenery__clear { display: inline-block; margin-top: 8px; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
.pv-scenery__clear[hidden] { display: none; }
.pv-scenery__status { display: block; min-height: 1.4em; margin: 6px 0 0; }
.pv-desktop { display: none; }
@media (max-width: 760px) { .pv-desktop { display: block; margin: -4px 0 16px; } }
@media (max-width: 760px) { .pv-scenery__rows { grid-template-columns: 1fr; gap: 14px; } }

/* Загрузка интерьера и окружения — плашкой по центру сцены террасы (engine/ui-terrace.js). */
.pv-scenery__busy {
  position: absolute; left: 50%; top: 16px; transform: translateX(-50%); z-index: 3;
  display: flex; align-items: center; gap: 8px; padding: 8px 14px;
  background: rgba(255, 255, 255, .92); border: 1px solid var(--line); border-radius: var(--radius);
  font-size: 12px; color: var(--ink); pointer-events: none;
}
.pv-scenery__busy[hidden] { display: none; }
.pv-scenery__busy i {
  width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--ink);
  animation: pv-spin .8s linear infinite;
}
@keyframes pv-spin { to { transform: rotate(360deg); } }

/* Стрелка раскрытия в кружке-обводке: «Цвет и подсветка», «Автоматика и комфорт» (правка Ники 06.10.2026).
   Стрелка рисуется маской цветом текста. При наведении (правка Ники 06.10.2026) чёрным заливается
   только кружок, стрелка в нём белая; сама кнопка не меняется. */
.ac__chev {
  position: relative; display: inline-block; flex: 0 0 auto; width: 22px; height: 22px; box-sizing: border-box;
  border: 1px solid var(--ink); border-radius: 50%; color: var(--ink); background: transparent;
  transition: transform .2s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
}
.ac__chev::before {
  content: ""; position: absolute; inset: 0; background: currentColor;
  -webkit-mask: no-repeat center / 10px 10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 3.5 5 7l3.5-3.5' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
          mask: no-repeat center / 10px 10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 3.5 5 7l3.5-3.5' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.ac__overlay-toggle:hover .ac__chev, .ac__overlay-toggle:focus-visible .ac__chev,
.ac__equip-wrap > summary:hover .ac__chev, .ac__equip-wrap > summary:focus-visible .ac__chev {
  background: var(--ink); border-color: var(--ink); color: #fff;
}
.ac__equip-wrap > summary { align-items: center; }

/* «Интерьер и окружение» свёрнут, как «Автоматика» (правка Ники 06.10.2026): заголовок, стрелка,
   выбранное и подсказка видны всегда, кнопки выбора — по нажатию. */
.pv-scenery__wrap > summary {
  display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; cursor: pointer; list-style: none; padding: 4px 0;
}
.pv-scenery__wrap > summary::-webkit-details-marker { display: none; }
.pv-scenery__wrap > summary .ac__legend { margin: 0; }
.pv-scenery__wrap > summary .pv__hint { flex: 1 0 100%; margin: 0; }
.pv-scenery__wrap[open] > summary .ac__chev { transform: rotate(180deg); }
.pv-scenery__wrap > summary:hover .ac__chev, .pv-scenery__wrap > summary:focus-visible .ac__chev {
  background: var(--ink); border-color: var(--ink); color: #fff;
}
.pv-scenery__wrap[open] > .pv-scenery__rows { margin-top: 14px; }
/* Блок «Куда собираются» под плитками «Ламели идут» — с тем же воздухом, что над ними (Q27, 10.10.2026) */
.ac__louvre-stack { margin-top: 16px; }

/* Терраса: «Сбросить всё» под выбором крыши — акцентным красным, контуром (решение Ники 12.10.2026) */
.pv-roof__foot { margin-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.pv__reset {
  font: 500 12px/1 Heebo, Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); background: transparent; border: 1px solid var(--accent);
  padding: 11px 18px; cursor: pointer; transition: background .15s, color .15s;
}
.pv__reset:hover, .pv__reset:focus-visible { background: var(--accent); color: #fff; }
/* на телефоне внизу окна 3D стоит плашка «View in your space» (AR): подписи показа поднимаем над ней (правка Aluminante 14.10.2026) */
@media (max-width: 760px) { .ac__wow-captions { top: auto; bottom: 72px; } }
/* телефон: подписи компактнее, над плашкой «View in your space», не закрывают середину модели (доработка 1, 14.10.2026) */
@media (max-width: 480px) {
  .ac__wow-captions { left: 8px; right: 8px; bottom: 60px; gap: 4px; }
  .ac__wow-caption { font-size: 13px; padding: 4px 10px; line-height: 1.25; letter-spacing: .02em; }
}

/* Этап 3 (правка Aluminante 14.10.2026): плашка CTA после показа, кнопка «Сесть за стол» и подсветка кнопок цены.
   CTA стоит там же, где подписи показа (к её появлению подписи уже погашены). */
.ac__viewer-seat { white-space: nowrap; }
.ac__wow-cta {
  position: absolute; left: 12px; right: 12px; top: 84px; z-index: 4; margin: 0 auto; max-width: 560px;
  display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 14px; box-sizing: border-box;
  border-radius: var(--radius); background: rgba(20,22,26,.78); color: #fff; font-family: var(--font-body);
  opacity: 0; transform: translateY(6px); transition: opacity .4s ease, transform .4s ease;
}
.ac__wow-cta.is-on { opacity: 1; transform: none; }
.ac__wow-cta p { margin: 0; flex: 1 1 auto; font-size: 13px; line-height: 1.35; }
.ac__wow-cta-go {
  flex: 0 0 auto; padding: 8px 12px; border: 1px solid #fff; border-radius: var(--radius); background: #fff; color: var(--ink);
  font-family: var(--font-body); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
}
.ac__wow-cta-x {
  flex: 0 0 auto; width: 28px; height: 28px; padding: 0; border: 0; background: transparent; color: #fff;
  font-size: 22px; line-height: 1; cursor: pointer;
}
.ac__wow-pulse { animation: ac-wow-pulse 1.1s ease-in-out 3; }
@keyframes ac-wow-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); } 50% { box-shadow: 0 0 0 5px rgba(180,150,90,.55); } }
@media (max-width: 760px) { .ac__wow-cta { top: auto; bottom: 72px; } }
@media (max-width: 480px) { .ac__wow-cta { left: 8px; right: 8px; bottom: 60px; padding: 8px 8px 8px 10px; } .ac__wow-cta p { font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { .ac__wow-cta { transition: none; transform: none; } .ac__wow-pulse { animation: none; outline: 2px solid rgba(180,150,90,.8); } }

/* правка Aluminante 16.10.2026 (раунд 6, п. 8): полоска быстрых цветов каркаса под сценой */
.ac__qstrip { position: absolute; left: 14px; bottom: 14px; z-index: 0; display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.86); box-shadow: 0 1px 6px rgba(0,0,0,.12); }
.ac__qstrip[hidden] { display: none; }
.ac__qstrip-label { font-size: 12px; color: var(--muted, #6b6b6b); }
.ac__qstrip .ac__swatches { gap: 7px; flex-wrap: nowrap; }
.ac__qstrip .ac__swatch { width: 26px; height: 26px; }
@media (max-width: 480px) { .ac__qstrip { left: 8px; bottom: 8px; padding: 5px 9px; } .ac__qstrip-label { display: none; } .ac__qstrip .ac__swatches { gap: 5px; } .ac__qstrip .ac__swatch { width: 24px; height: 24px; } }
/* правка Aluminante 16.10.2026 (раунд 6, п. 2): кнопка День / Вечер в ряду над сценой */
.ac__viewer-day { white-space: nowrap; }

/* круг 2 раунда 6: на широком экране полоска правее свёрнутой плашки Color & Lighting (раньше стояла на ней: «светлый прямоугольник») */
@media (min-width: 641px) { .ac__qstrip { left: 232px; } }

/* круг 3 раунда 6: на телефоне кнопка AR (VIEW IN YOUR SPACE и «?») стоит в левом нижнем углу окна 3D, полоска цветов поднята над ней; подписи показа выше полоски */
@media (max-width: 640px) { .ac__qstrip { left: 8px; bottom: 54px; } .ac__wow-captions { bottom: 98px; } }

/* круг 5 раунда 6: на телефоне плашка «Have a project?» стоит выше полоски цветов, не поверх неё */
@media (max-width: 640px) { .ac__wow-cta { bottom: 100px; } }

/* Раунд 11, п.4 (19.10.2026, правка Aluminante): полоска загрузки с шагами внизу окна 3D; старая плашка «Загружаем…» поверх сцены заменена ею. */
.pv-scenery__busy { display: none !important; }
.ac-load { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; pointer-events: none; }
.ac-load[hidden] { display: none; }
.ac-load__text { position: absolute; right: 12px; bottom: 8px; padding: 2px 8px; font-size: 11px; line-height: 1.4; color: var(--ink); background: rgba(255, 255, 255, .88); border-radius: 3px; }
.ac-load__bar { display: block; height: 3px; background: rgba(0, 0, 0, .08); }
.ac-load__bar b { display: block; height: 100%; width: 0; background: var(--accent); transition: width .25s linear; }

/* Раунд 11, п.3 (19.10.2026, правка Aluminante): проекты-стартеры - ряд плиток с картинкой над панелью опций. */
.pv-presets { margin: 0 0 14px; }
.pv-presets__title { margin: 0 0 8px; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted, #6b6b6b); }
.pv-presets__row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.pv-preset { flex: 0 0 140px; max-height: 110px; padding: 0; display: flex; flex-direction: column; align-items: stretch; text-align: left; font: inherit; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; cursor: pointer; }
.pv-preset img { display: block; width: 100%; height: 58px; object-fit: cover; background: #eee; }
.pv-preset b { padding: 3px 6px 0; font-size: 11px; font-weight: 500; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-preset small { padding: 0 6px 4px; font-size: 10px; line-height: 1.25; color: var(--muted, #6b6b6b); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pv-preset:hover { border-color: var(--ink); }
.pv-preset[aria-pressed=true] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); background: var(--accent-soft); }
.pv-preset:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* правка Aluminante 19.10.2026 (раунд 11, круг 2, п.2,4,6): плитки пресетов не расширяют родителя (390: окно 3D было 616 px), 4 плитки в ряд на 1280, шкала загрузки сверху. */
#ac-visual, .pv-presets { min-width: 0; max-width: 100%; }
.pv-presets__row { max-width: 100%; contain: inline-size; }
@media (min-width: 761px) {
  .pv-presets__row { overflow-x: hidden; }
  .pv-preset { flex: 1 1 0; min-width: 0; }
  .pv-preset small { display: none; }
  .pv-preset b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 10.5px; }
  .pv-preset img { height: 46px; }
}
@media (max-width: 760px) { .pv-preset { width: 140px; } .pv-preset img { width: 140px; } }
.ac-load { top: 0; bottom: auto; }
.ac-load__bar { order: -1; }
.ac-load__text { right: auto; left: 50%; transform: translateX(-50%); top: 54px; bottom: auto; white-space: nowrap; }
#ac-3d:has(.ac-load:not([hidden])) .ac-gate-veil i { display: none; }
/* правка Aluminante 19.10.2026 (раунд 11, круг 2, п.4) */
.ac-load.is-fixed { position: fixed; top: auto; bottom: 0; }
.ac-load.is-fixed .ac-load__text { top: auto; bottom: 10px; }