/* BILPRO — public site.
   Colours are taken from the Tilda original so the switch is invisible to a
   returning visitor: dark #151515 for surfaces, green #00c88c for actions. */

:root {
  --ink: #151515;
  --ink-2: #414141;
  --muted: #6E6E6E;
  --line: #e6e6e6;
  --bg: #ffffff;
  --bg-soft: #f7f8f8;
  --accent: #00c88c;
  --accent-dark: #0e9a70;
  /* Зелёный в роли ТЕКСТА это отдельный токен, а не тот же цвет, что у
     заливок. #00c88c на белом даёт 2,18:1, --accent-dark 3,57:1, оба ниже
     порога 4,5:1 для подписи. #007A56 держит тот же тон 162° и насыщенность,
     но темнее по светлоте: 5,36:1 на белом и 4,85:1 на #f2f4f2. Кнопки и
     фишки заливаются по-прежнему ярким --accent, текст на них тёмный. */
  --accent-text: #007A56;
  /* Подпись на зелёной и на градиентной заливке. Токен один на обе темы и
     не переобъявляется нигде: сама заливка от темы не зависит, значит и
     буквам на ней меняться не с чего. */
  --on-accent: #06231a;
  --radius: 14px;
  --wrap: 1280px;
  --head-h: 72px;
  --font: 'Golos Text', 'GolosText', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* Тёмные поверхности внутри светлой темы. На чёрном затемнять зелёный
   нельзя, нужен обратный ход: #00c88c на #151515 это 8,38:1, а #007A56 всего
   3,41:1. Токен переобъявляется на самой поверхности и достаётся всему, что
   внутри, поэтому правилам ниже не приходится знать, на каком фоне они
   окажутся, и список селекторов не расползается по файлу. */
.section--dark, .section--video, .hero, .site-foot, .legal, .region,
.project, .cathero, .segcard, .service, .reason--dark,
.factory__aside, .lightbox, .storyview, .leadcard, .editbar,
.chip.is-active, .fv--dark, .fv--photo {
  --accent-text: var(--accent);
  /* Серый для подписей здесь тоже другой. #6E6E6E подобран под белый лист и
     на #151515 даёт 3,58:1: так терялись крошки на странице проектов.
     Светлый #9a9a9a на том же фоне это 6,6:1. */
  --muted: #9a9a9a;
}

/* Полосы прокрутки под тему. Chrome на Windows рисует их своими цветами, и
   на тёмной теме внутри панели фильтров получалась белая лента поперёк
   чёрного блока. Два свойства подряд: стандартное scrollbar-color понимают
   Firefox и новые Chrome, старым нужен ::-webkit-scrollbar.

   Цвета переменными, поэтому светлая тема получает серое на белом, а тёмная
   светло-серое на почти чёрном. Ползунок без рамки и с большим скруглением:
   полоса должна читаться как подсказка, а не как деталь интерфейса. */
:root { --bar: #c9cecb; --bar-bg: transparent; }
:root[data-theme="dark"] { --bar: #3a423d; }

html { scrollbar-color: var(--bar) var(--bar-bg); }
* { scrollbar-color: var(--bar) var(--bar-bg); }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--bar-bg); }
*::-webkit-scrollbar-thumb {
  background: var(--bar); border-radius: 999px;
  border: 2px solid transparent; background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: content-box; }
*::-webkit-scrollbar-corner { background: var(--bar-bg); }

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent-text); }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  /* Подпись цветом фона страницы, а не белым: на тёмной теме --ink светлый,
     и ссылка при выходе на неё с клавиатуры была белой по белому. */
  background: var(--ink); color: var(--bg); padding: 12px 18px;
}
.skip:focus { left: 0; }

/* ---------- header ---------- */

.site-head {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
}

.site-head__in {
  display: flex; align-items: center; gap: 28px;
  height: var(--head-h);
}

.logo img { width: 118px; height: auto; }

.site-nav { display: flex; gap: 24px; margin-left: auto; }
.site-nav a { font-size: 14px; letter-spacing: 0.02em; }

.site-head__phone { font-weight: 600; white-space: nowrap; }

.burger {
  display: none; width: 40px; height: 40px; border: 0; background: none;
  padding: 0; cursor: pointer; position: relative;
}
.burger span,
.burger span::before,
.burger span::after {
  position: absolute; left: 9px; width: 22px; height: 2px; background: var(--ink); content: '';
}
.burger span { top: 19px; }
.burger span::before { top: -7px; }
.burger span::after { top: 7px; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box;
  height: 48px;
  padding: 0 26px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  line-height: 1.2;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.btn:hover { border-color: var(--ink); color: var(--ink); }
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: var(--on-accent); }
.btn--ghost { background: transparent; border-color: rgba(255, 255, 255, .5); color: #fff; }
.btn--ghost:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; }

/* ---------- typography ---------- */

.h1 { font-size: clamp(32px, 4vw, 44px); line-height: 1.12; margin: 0 0 24px; letter-spacing: -0.02em; }
.h2 { font-size: clamp(24px, 3vw, 32px); line-height: 1.2; margin: 0 0 24px; letter-spacing: -0.01em; }

/* Отступы задаются сверху и снизу поимённо, а не сокращением. Сокращение
   обнуляет боковые поля, а секция часто и есть .wrap: у таких блоков поле
   по краям пропадало, и каталог с текстовыми страницами прилипал к рамке
   окна, пока шапка держала свои 48. */
.section { padding-top: 56px; padding-bottom: 56px; }
.section--narrow { max-width: 820px; }
.section--dark { background: var(--ink); color: #fff; }
.section--dark .h2 { color: #fff; }

.prose { font-size: 17px; line-height: 1.65; }
.prose h2 { font-size: 24px; margin: 32px 0 12px; }
.prose h3 { font-size: 19px; margin: 24px 0 8px; }
.prose p { margin: 0 0 14px; }
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 22px; }
.prose li { margin-bottom: 6px; }
.prose--intro { max-width: 760px; margin-bottom: 32px; color: var(--ink-2); }

.crumbs { font-size: 14px; color: var(--muted); margin-bottom: 20px; }
/* Секция, которая начинается с крошек, прижимается к шапке. Обычный верхний
   отступ в 72 точки держал строку крошек почти на середине пустого экрана:
   между меню и первой строкой страницы зияла полоса белого. */
.section:has(> .crumbs:first-child),
.section:has(> .wrap > .crumbs:first-child) { padding-top: 26px; }
.crumbs a:hover { color: var(--ink); }
.crumbs__sep { margin: 0 8px; }

/* ---------- hero ---------- */

.hero {
  background: linear-gradient(115deg, #101010 0%, #1e1e1e 55%, #2b2b2b 100%);
  color: #fff;
}
/* Две колонки: слева заголовок, кнопки и регион, справа карточка фактов.
   Пока всё шло в столбик, между кнопками и регионом пустовала треть экрана,
   а карточка фактов висела в этой пустоте справа. */
.hero__in {
  padding: 68px 24px 72px; max-width: var(--wrap);
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: 48px; align-items: center;
}
@media (max-width: 1000px) { .hero__in { grid-template-columns: 1fr; gap: 28px; } }
.hero__title { font-size: clamp(32px, 5.2vw, 60px); line-height: 1.08; margin: 0 0 20px; max-width: 16ch; letter-spacing: -0.025em; }
.hero__lead { font-size: clamp(16px, 1.6vw, 20px); color: #c4c4c4; max-width: 56ch; margin: 0 0 32px; }
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- grids ---------- */

.grid { display: grid; gap: 24px; }
.grid--cats { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
/* Четыре карточки в ряд на широком экране, а не «сколько поместится». При
   auto-fill число столбцов менялось от ширины колонки: в разделе с фильтрами
   выходило три, на главной четыре, и одна и та же лента выглядела по-разному
   на соседних страницах. Ниже 1100 три, ниже 860 две. */
.grid--products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .grid--products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .grid--products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.grid--adv { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 32px; }

.cat {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--bg-soft); border-radius: var(--radius); padding: 16px; height: 100%;
  transition: box-shadow .18s, transform .18s;
}
.cat:hover { box-shadow: 0 10px 30px rgba(0, 0, 0, .1); transform: translateY(-2px); color: inherit; }
.cat__img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; }
.cat__img--empty { background: #ededed; display: block; }
.cat__title { font-weight: 600; }
.cat__count { font-size: 13px; color: var(--muted); }

.card {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: #fff; height: 100%;
  transition: box-shadow .18s, transform .18s;
}
.card:hover { box-shadow: 0 12px 32px rgba(0, 0, 0, .1); transform: translateY(-2px); }
.card__media { display: block; position: relative; background: var(--bg-soft); }
.card__media img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.card__noimg { display: block; width: 100%; aspect-ratio: 1 / 1; background: #ededed; }
.card__body { padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.card__title { font-size: 16px; font-weight: 500; margin: 0; line-height: 1.35; }
.card__price { font-size: 18px; font-weight: 600; margin: 4px 0 0; }
.card__price--ask { font-size: 15px; font-weight: 500; color: var(--muted); }
.card__note { font-size: 13px; color: var(--muted); margin: 0; }

.adv__title { font-size: 18px; margin: 0 0 8px; }
.adv__text { margin: 0; color: #b6b6b6; }

/* ---------- product ---------- */

.product__top { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.product__stage { background: var(--bg-soft); border-radius: var(--radius); overflow: hidden; }
.product__stage img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; }
.product__noimg { display: block; width: 100%; aspect-ratio: 1 / 1; background: #ededed; }
.product__thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.thumb { padding: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: none; cursor: pointer; width: 84px; }
.thumb img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.thumb.is-active { border-color: var(--accent); }

.product__title { margin-bottom: 12px; }
.product__sku { font-size: 14px; color: var(--muted); margin: 0 0 16px; }
.product__price { font-size: 32px; font-weight: 700; margin: 0 0 8px; display: flex; align-items: baseline; gap: 12px; }
.product__price--ask { font-size: 22px; font-weight: 600; color: var(--ink-2); }
.product__old { font-size: 18px; font-weight: 400; color: var(--muted); }

.product__facts { margin: 24px 0 28px; display: grid; gap: 10px; }
.product__facts div { display: grid; grid-template-columns: 180px 1fr; gap: 12px; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.product__facts dt { color: var(--muted); font-size: 14px; margin: 0; }
.product__facts dd { margin: 0; }

.product__body { margin-top: 48px; max-width: 820px; }

.specs { margin-top: 48px; }
.specs__list { display: grid; gap: 10px; max-width: 820px; }
.specs__list div { display: grid; grid-template-columns: 240px 1fr; gap: 12px; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.specs__list dt { color: var(--muted); font-size: 14px; margin: 0; }
.specs__list dd { margin: 0; }

/* ---------- lead form ---------- */

.section--lead { background: var(--bg-soft); padding: 64px 0; }
.lead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.lead__text .h2 { margin-bottom: 12px; }
.lead__form { display: grid; gap: 16px; }

.field { display: grid; gap: 6px; }
.field__label { font-size: 13px; color: var(--muted); }
.field__input {
  box-sizing: border-box;
  width: 100%;
  height: 48px;
  line-height: 1.2;
  padding: 0 14px;
  font: inherit;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.field__input { text-overflow: ellipsis; }
.field__input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.field__input--area { height: auto; min-height: 96px; padding: 14px; resize: vertical; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.lead__note { font-size: 12px; color: var(--muted); margin: 0; }
.lead__status { margin: 0; font-size: 14px; min-height: 20px; }
.lead__status.is-ok { color: var(--accent-text); }
.lead__status.is-error { color: #de3032; }

/* ---------- footer ---------- */

/* Подвал: тёмная полоса во всю ширину, четыре колонки, под ними строка с
   реквизитами. До этого он был белой карточкой поверх фотографии зала, и на
   широком экране выглядел вставкой посреди снимка, а не основанием страницы.

   Тёмным он остаётся в обеих темах, и цвета здесь заданы числами, а не
   переменными: --ink в тёмной теме становится светлым, и подвал получился бы
   белым с белым текстом. */
.site-foot { background: #101413; color: #b7c0bb; padding: 56px 0 0; }
.site-foot__in {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, .85fr)) minmax(0, 1.1fr);
  gap: 32px;
}
.site-foot__col { display: grid; gap: 8px; align-content: start; }
.site-foot a { color: #fff; }
.site-foot a:hover { color: var(--accent-text); }
.site-foot__mark { display: inline-block; }
.site-foot__logo { width: 180px; height: auto; }
/* В подвале всегда тёмный знак: фон тёмный в любой теме, и светлый логотип
   на нём пропадал бы. */
.site-foot .logo__light { display: none; }
.site-foot .logo__dark { display: block; }
.site-foot__slogan { margin: 14px 0 0; font-size: 14px; line-height: 1.5; max-width: 34ch; color: #9aa5a0; }
.site-foot__label { margin: 0 0 4px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #7f8b86; }
.site-foot__nav { gap: 8px; }
.site-foot__nav a { font-size: 14px; }
.site-foot__contacts { gap: 6px; }
.site-foot__phone { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.site-foot__contacts p { margin: 0; font-size: 14px; line-height: 1.45; color: #9aa5a0; }
.site-foot__social { display: flex; gap: 14px; margin: 14px 0 0; font-size: 14px; }
.site-foot__bottom {
  display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center;
  margin-top: 36px; padding: 16px 0 22px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 12px; color: #7f8b86;
}
.site-foot__bottom a { color: #9aa5a0; text-decoration: underline; }
.site-foot__bottom a:hover { color: var(--accent-text); }
@media (max-width: 900px) {
  .site-foot { padding-top: 34px; }
  /* Два столбца, а не один: в один подвал вытягивался на полтора экрана.
     Разделы и «Компания» встают рядом, а знак со слоганом и контакты идут во
     всю ширину: у них строки длиннее, и в половину ширины они всё равно
     развалились бы на переносы. */
  .site-foot__in { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
  .site-foot__in > .site-foot__col:first-child,
  .site-foot__contacts { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
}

/* ---------- narrow screens ---------- */

@media (max-width: 900px) {
  .product__top { grid-template-columns: 1fr; gap: 28px; }
  .lead { grid-template-columns: 1fr; gap: 28px; }
  .product__facts div,
  .specs__list div { grid-template-columns: 1fr; gap: 2px; }
}

@media (max-width: 760px) {
  .burger { display: block; margin-left: auto; }
  .site-head__phone { display: none; }
  .site-nav {
    position: absolute; left: 0; right: 0; top: var(--head-h);
    display: none; flex-direction: column; gap: 0;
    /* Фон переменной, не числом: на тёмной теме пункты берут светлый --ink,
       и меню открывалось белым листом с белыми надписями. */
    background: var(--bg); border-bottom: 1px solid var(--line); padding: 8px 24px 20px;
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .hero__in { padding: 56px 24px 64px; }
  .section { padding-top: 40px; padding-bottom: 40px; }
}

/* ---------- catalogue extras: badge, "от" price, options ---------- */

.card__media { position: relative; }
/* Метка товара живёт в теле карточки, отдельной строкой над названием: на
   фотографии она садилась поверх чужих логотипов. */
/* Метки на снимке, в левом нижнем углу, снизу вверх: сначала «наше
   производство», над ней «хит» или «уценка». Так ближайшая к названию метка
   всегда одна и та же, и глаз не перескакивает. */
.card__marks {
  position: absolute; left: 10px; bottom: 10px; z-index: 1;
  display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 6px;
  pointer-events: none;
}
.card__badge {
  width: fit-content;
  display: inline-flex; align-items: center;
  padding: 3px 9px; border-radius: 999px;
  background: var(--accent); color: var(--on-accent);
  font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  /* В одну строку и с многоточием: «ТОЛЬКО ОПТ ОТ 5ШТ.» на телефоне
     переносилось, плашка вырастала вдвое и налезала на соседнюю. */
  white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
/* Совместимость с системой записи. Плашка тише, чем «наше производство»:
   это дополнение к товару, а не главное о нём. */
.card__os {
  position: absolute; left: 10px; top: 10px; z-index: 1; pointer-events: none;
  display: inline-flex; align-items: center;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(13, 17, 15, .82);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .18);
  color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .01em; white-space: nowrap;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.card__from, .product__from { font-weight: 400; color: var(--muted); }
.card__from { font-size: 14px; }
.product__from { font-size: 20px; }

.product__meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 14px; color: var(--muted); margin: 0 0 16px; }
.product__brand { font-weight: 600; color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em; }

.options { margin: 20px 0 4px; }
.options__label { font-size: 13px; color: var(--muted); margin: 0 0 8px; }
.options__list { display: flex; gap: 8px; flex-wrap: wrap; }
.option {
  display: inline-flex; align-items: center; height: 38px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 999px; font-size: 14px; background: #fff;
}

/* ---------- header: slogan, tools ---------- */

.site-head__in { gap: 20px; }
.site-head__slogan {
  margin: 0; max-width: 250px; font-size: 10px; line-height: 1.3;
  text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
}
.site-nav { gap: 18px; }
.site-nav a { font-size: 13px; }

.site-head__tools { display: flex; gap: 6px; }
.iconbtn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; color: var(--ink);
}
.iconbtn:hover { background: var(--bg-soft); color: var(--ink); }
.iconbtn__count {
  position: absolute; top: 2px; right: 2px; min-width: 17px; height: 17px;
  border-radius: 999px; background: var(--accent); color: var(--on-accent);
  font-size: 11px; font-weight: 700; line-height: 17px; text-align: center; padding: 0 4px;
}

/* Атрибут hidden должен прятать что угодно. Браузер задаёт ему display: none
   правилом с нулевым весом, и любой класс с display (кнопка, ссылка, плитка)
   его перебивает: спрятанная кнопка оставалась на виду. */
[hidden] { display: none !important; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- hero tiles ---------- */

/* Главное о компании карточкой на первом экране, по макету: тёмная плашка с
   размытием под ней, рубрика сверху, под линией четыре факта в ряд. Цифра
   впереди, пояснение под ней мелким. */
/* Карточка стоит справа и не растягивается на всю ширину: слева текст и
   кнопки, справа снимок, и карточка ложится на снимок, не закрывая его. */
.herostats {
  /* Карточка стоит в правом нижнем углу первого экрана, а не по центру
     правой колонки: посередине она висела между заголовком и кнопками,
     ни к чему не примыкая. */
  align-self: end;
  margin: 0 0 0 auto;
  /* Шире, чем была: подписи под цифрами в обычном регистре длиннее капса,
     и в 430 «производство, точно в срок» ломалось на две строки. */
  width: min(520px, 100%);
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(10, 13, 11, .82);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  color: #fff;
}
.herostats .tag { margin: 0 0 12px; }
/* Два на два, а не четыре в ряд: в ряд подписи вроде «доставка и монтаж»
   ломались на три строки и карточка вырастала вдвое. */
.herostats__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; border-top: 1px solid rgba(255, 255, 255, .16); }
.herostats__item { padding-top: 12px; }
.herostats b { display: block; font-size: 20px; line-height: 1.1; letter-spacing: -.02em; }
/* Подписи под цифрами обычным регистром: капс здесь шёл от рубрики
   сверху, но там одно слово, а тут строка, и прописными она читается
   медленнее. Трекинг тоже убран, он нужен был именно капсу. */
.herostats small { display: block; margin-top: 4px; font-size: 12px; color: #aeb8b2; line-height: 1.35; }

/* ---------- sections ---------- */

.section--soft { background: var(--bg-soft); }
.h2--center { text-align: center; max-width: 900px; margin-left: auto; margin-right: auto; }
.section__action { margin-top: 32px; text-align: center; }
.grid--two { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 32px; }
.grid--three { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }

.section--dark .adv__text { color: #b6b6b6; }
.section:not(.section--dark) .adv__text { color: var(--ink-2); }



.person { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.person__name { margin: 0 0 4px; font-weight: 600; font-size: 18px; }
.person__role { margin: 0; color: var(--muted); font-size: 14px; }

.contacts__label { margin: 0 0 4px; font-size: 14px; color: var(--muted); }
.contacts__value { margin: 0 0 4px; font-size: 20px; }

/* ---------- sizes table ---------- */

.table-scroll { overflow-x: auto; }
.sizes { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 760px; }
.sizes th, .sizes td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.sizes thead th { background: var(--bg-soft); font-size: 14px; color: var(--muted); font-weight: 600; white-space: nowrap; }
.sizes tbody th { font-weight: 600; white-space: nowrap; }

/* ---------- faq ---------- */

/* Гармошка вопросов описана ниже, там же где всё снятое с живого сайта.
   Старый вариант со строками через линию и плюсом в ::after убран целиком:
   его ::after рисовал второй плюс поверх нового кружка. */
.faq { margin-top: 24px; }

/* ---------- shop: sidebar + grid ---------- */

.shop { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 32px; align-items: start; }
/* Боковая колонка прилипает к шапке, но она выше экрана: десять разделов,
   цена и пять групп фильтров не помещаются в 900 точек по высоте. Без
   собственной прокрутки нижние фильтры становились недостижимы вовсе:
   страница едет, колонка стоит, и «Размер» так и остаётся обрезанным.

   Поэтому высоту ограничиваем экраном и разрешаем колонке прокручиваться
   внутри себя. Цепочку прокрутки не трогаем: дойдя до низа списка, колесо
   должно продолжить листать страницу, а не упереться. */
.shop__side {
  display: grid;
  gap: 20px;
  position: sticky;
  top: calc(var(--head-h) + 16px);
  align-content: start;
  max-height: calc(100vh - var(--head-h) - 32px);
  overflow-y: auto;
  scrollbar-width: thin;
  /* Полоса прокрутки съедала бы четыре точки у содержимого. */
  padding-right: 6px;
  margin-right: -6px;
}

.sections { display: grid; background: var(--bg-soft); border-radius: var(--radius); padding: 10px; }
.sections__item { padding: 9px 12px; border-radius: 8px; font-size: 16px; }
.sections__item:hover { background: var(--bg); color: var(--ink); }
.sections__item.is-active { background: var(--ink); color: var(--bg); font-weight: 500; }

.facets { display: grid; gap: 18px; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
/* Закрытый <details> прячет содержимое сам, но только пока у содержимого нет
   своего display. У формы фильтров он есть, и без этой строки закрытая
   панель всё равно показывала все галочки. */
.facets-box:not([open]) > .facets { display: none; }
@media (min-width: 1000px) { .facets-box > .facets { display: grid; } }
/* Фильтры по макету: группа это строка с разделителем и плюсом справа,
   значение это строка с галочкой у правого края. Раньше галочка стояла
   слева, и глаз шёл по ломаной: текст слева, число справа, квадрат опять
   слева. Теперь два столбца, читается сверху вниз. */
.facet { border: 0; margin: 0; padding: 0; display: block; }
.facet__title {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 0; border-bottom: 1px solid var(--line);
  font-size: 12px; font-weight: 600; cursor: pointer;
}
.facet__title::-webkit-details-marker { display: none; }
.facet__title::after { content: '+'; font-size: 16px; color: var(--muted); line-height: 1; }
.facet[open] > .facet__title::after { content: '−'; }

.facet__opt {
  display: flex; align-items: center; gap: 8px;
  /* Значения внутри группы стоят плотно, а между самими группами воздуха
     больше: так видно, где кончается один вопрос и начинается другой. */
  padding: 5px 0; font-size: 12px; color: var(--ink); cursor: pointer;
}
.facet { padding-bottom: 10px; }
.facet[open] + .facet, .facet + .facet { margin-top: 6px; }
/* Квадрат рисуем сами и ставим справа: родной чекбокс нельзя ни подвинуть,
   ни перекрасить одинаково во всех браузерах. */
.facet__opt input[type="checkbox"] {
  /* Поле прижато к правому краю всегда. Раньше его толкало вправо число, а у
     диапазонов цены числа нет, и квадратик прилипал к тексту: в одной панели
     получалось два разных выравнивания. */
  order: 2; margin-left: auto; flex: 0 0 auto; appearance: none; -webkit-appearance: none;
  width: 15px; height: 15px; margin: 0;
  border: 1px solid #939f98; border-radius: 3px; background: transparent;
  cursor: pointer; position: relative;
}
.facet__opt input[type="checkbox"]:checked { border-color: var(--accent); background: var(--accent); }
.facet__opt input[type="checkbox"]:checked::after {
  content: ''; position: absolute; left: 4px; top: 1px;
  width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.facet__opt > span:first-of-type { order: 0; }
/* Число стоит сразу за словом и зелёным, как у фишек. Прижатое к правому краю
   и серое, оно читалось не как количество, а как обрывок строки. */
.facet__n { order: 1; font-size: 12px; color: var(--accent-text); }

/* Кнопка во всю ширину панели: она последняя в столбце, и половинная ширина
   оставляла рядом пустоту. */
.facets__actions { display: grid; gap: 10px; margin-top: 18px; }
/* Прокручивается список групп, а не вся колонка. Пока прокручивалась колонка,
   под срез уезжала сама панель: кнопка «Показать» оказывалась разрезанной
   пополам, а за ней обрубленным оставалось и скругление рамки. Теперь панель
   целиком стоит на своём месте, внутри неё ездит только список, а кнопка
   всегда внизу. */
@media (min-width: 1000px) {
  /* Прокрутку панели не отключаем, а оставляем запасной: внутри ездит список
     значений, но лента разделов над ним не сжимается, и на невысоком окне она
     одна выше всей панели. Без запасной прокрутки её пункты вываливались из
     коробки и ложились поверх следующего блока страницы. */
  .shop__side { overflow-y: auto; align-content: stretch; grid-template-rows: auto minmax(0, 1fr); }
  .shop__side > .facets-box { display: flex; flex-direction: column; min-height: 0; }
  .facets { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 0; }
  .facets__groups {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin;
    display: grid; align-content: start; gap: 0; padding-right: 8px; margin-right: -8px;
  }
  .facets__actions { flex: 0 0 auto; margin-top: 16px; }
}
.facets__actions .btn { width: 100%; text-align: center; justify-content: center; }
.facets__actions .linklike { text-align: center; font-size: 12px; }
/* linklike бывает и <button>: у кнопки свои шрифт, рамка и фон по
   умолчанию, и без сброса ссылка выглядела бы плашкой. */
.linklike {
  font-size: 14px; color: var(--muted); text-decoration: underline;
  border: 0; background: none; padding: 0; font-family: inherit; cursor: pointer;
  text-underline-offset: 3px;
}
.linklike:hover { color: var(--ink); }

.shop__bar { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.shop__search { flex: 1 1 240px; }
.shop__search .field__input,
.shop__sort .field__input { height: 44px; }
.shop__sort .field__input { appearance: none; padding-right: 34px;
  background-image: 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='%23555' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; }
.shop__count { margin: 0 0 18px; font-size: 14px; color: var(--muted); }
.btn--small { height: 44px; padding: 0 18px; font-size: 14px; }

/* ---------- card extras ---------- */

.card { position: relative; }
.card__fav {
  position: absolute; right: 10px; top: 10px; z-index: 2;
  width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .92); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}
.card__fav:hover { color: var(--accent-text); }
.card__fav.is-active { color: #de3032; }
.card__fav.is-active svg { fill: currentColor; }
.card__fav-inline.is-active { border-color: var(--accent); color: var(--accent-text); }

/* ---------- product: options, buy ---------- */

.product__options { display: grid; gap: 16px; margin: 24px 0; }
.optgroup__label { margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.optgroup__list { display: flex; gap: 8px; flex-wrap: wrap; }
.opt { position: relative; }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt span {
  display: inline-flex; align-items: center; height: 42px; padding: 0 16px;
  border: 1px solid var(--line); border-radius: 999px; cursor: pointer; font-size: 15px; background: var(--bg);
}
.opt input:checked + span { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.opt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.product__buy { display: flex; gap: 12px; flex-wrap: wrap; margin: 24px 0 8px; }
.product__buy .btn--primary.is-done { background: var(--ink); border-color: var(--ink); color: var(--bg); }

/* ---------- cart ---------- */

.cart { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; align-items: start; }
.cart__items { display: grid; gap: 12px; }
.cartline {
  display: grid; grid-template-columns: 120px minmax(0, 1fr) auto auto auto;
  gap: 16px; align-items: center;
  border: 1px solid var(--line); border-radius: var(--radius); padding: 12px;
}
.cartline__media img { width: 120px; height: 90px; object-fit: cover; border-radius: 8px; }
.cartline__noimg { display: block; width: 120px; height: 90px; background: #ededed; border-radius: 8px; }
.cartline__title { margin: 0 0 4px; font-size: 16px; font-weight: 500; }
.cartline__option { margin: 0 0 4px; font-size: 13px; color: var(--muted); }
.cartline__price { margin: 0; font-size: 14px; color: var(--muted); }
.cartline__count { display: flex; align-items: center; gap: 10px; }
.countbtn {
  width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 8px;
  background: #fff; cursor: pointer; font-size: 18px; line-height: 1;
}
.countbtn:hover { border-color: var(--ink); }
.cartline__sum { margin: 0; font-weight: 600; white-space: nowrap; min-width: 110px; text-align: right; }
.cartline__drop { border: 0; background: none; font-size: 22px; color: var(--muted); cursor: pointer; line-height: 1; }
.cartline__drop:hover { color: #de3032; }
.cart__side { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; display: grid; gap: 14px; }
.cart__total { margin: 0; font-size: 20px; }
.cart__form { display: grid; gap: 14px; }

/* ---------- narrow screens ---------- */

@media (max-width: 1200px) {
  .site-head__slogan { display: none; }
}

@media (max-width: 1000px) {
  .shop { grid-template-columns: 1fr; }
  /* На узком экране колонка превращается в ленту чипсов и лист фильтров:
     ни прилипания, ни своей прокрутки ей там не нужно. */
  .shop__side { position: static; max-height: none; overflow: visible; padding-right: 0; margin-right: 0; }
  .cart { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .cartline { grid-template-columns: 84px minmax(0, 1fr) auto; grid-template-areas: 'media body drop' 'count count sum'; }
  .cartline__media { grid-area: media; }
  .cartline__media img, .cartline__noimg { width: 84px; height: 64px; }
  .cartline__body { grid-area: body; }
  .cartline__count { grid-area: count; }
  .cartline__sum { grid-area: sum; }
  .cartline__drop { grid-area: drop; align-self: start; }
  .site-head__tools .iconbtn { width: 36px; height: 36px; }
}

/* ---------- filters: a panel on desktop, a drawer on a phone ---------- */

.facets-box { border: 1px solid var(--line); border-radius: var(--radius); }
.facets-box__toggle {
  padding: 14px 16px; font-weight: 500; cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between;
}
.facets-box__toggle::-webkit-details-marker { display: none; }
.facets-box__toggle::after { content: '+'; font-size: 20px; color: var(--muted); }
.facets-box[open] .facets-box__toggle::after { content: '−'; }
.facets { border: 0; border-top: 1px solid var(--line); border-radius: 0; }

@media (min-width: 1000px) {
  /* On a wide screen the filters are simply part of the sidebar. */
  .facets-box__toggle { display: none; }
  .facets { border-top: 0; }
}

@media (max-width: 1000px) {
  /* Sections become a scrollable strip so the grid is not pushed off screen. */
  .sections {
    display: flex; gap: 10px; overflow-x: auto; padding: 8px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .sections::-webkit-scrollbar { display: none; }
  /* Фон переменной, не числом: на тёмной теме пункт берёт светлый --ink,
     и белая таблетка делала «Весь каталог» белым по белому. */
  .sections__item { white-space: nowrap; background: var(--bg); }
}

/* ---------- blocks added after the competitor comparison ---------- */

/* Надстрочник первого экрана набран как рубрики в остальных блоках: тот же
   кегль, тот же трекинг, тот же зелёный. Раньше он был крупнее и с другим
   межбуквенным, и первый экран выбивался из общего набора. */
.hero__eyebrow {
  margin: 0 0 14px; font-size: 12px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent-text);
}

/* Блок про регион лежит в карточке со скруглением, а не полосой во всю
   ширину экрана: полоса от края до края читалась как подвал, случайно
   оказавшийся посреди страницы.

   Размеры взяты из макета: сетка 1fr 1fr, отступ 42, скругление 24, заголовок
   36 с плотным трекингом. Карточка идёт за темой, а не всегда тёмная: в
   макете тёмной она только в тёмном варианте оформления. */
.section--region { background: transparent; padding: 20px 0 48px; }
.region {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 35px;
  padding: 42px;
  border-radius: 24px;
  /* Карточка тёмная в обеих темах, как была до переделки: геосигнал должен
     выделяться из страницы, а не растворяться в ней. */
  background: #101614;
  border: 1px solid rgba(255, 255, 255, .1);
  color: #fff;
}
.region .h2 { font-size: 32px; letter-spacing: -.045em; line-height: 1.05; margin: 10px 0 12px; color: #fff; }

/* В первом экране это та же карточка, но без своей коробки: она уже лежит на
   тёмном снимке, и рамка внутри рамки выглядела вставкой из другой страницы.
   Остаётся линия сверху, отделяющая её от кнопок. */
.region--hero {
  grid-template-columns: 1fr; gap: 16px;
  margin-top: 34px; padding: 26px 0 0;
  background: transparent; border: 0; border-top: 1px solid rgba(255, 255, 255, .16);
  border-radius: 0;
}
.region--hero .h2 { font-size: clamp(20px, 1.9vw, 24px); margin: 6px 0 8px; }
.region--hero .region__text { font-size: 14px; max-width: 52ch; }
.region--hero .region__list li { padding: 11px 14px 11px 34px; font-size: 12px; }
.region--hero .region__list li::before { top: 15px; }
.region__text { margin: 0; color: #b6bfbb; line-height: 1.6; }

/* Пункты отдельными плашками, по две в ряд. Высоту им задаёт не правило, а
   сама сетка: клетки тянутся до высоты соседней колонки с текстом. */
.region__list {
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.region__list li {
  position: relative;
  padding: 15px 15px 15px 38px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.35;
  color: #e9edeb;
}
/* Галочка рисуется рамкой, а не знаком из шрифта: «✓» в разных системах
   выглядит по-разному, вплоть до эмодзи. */
.region__list li::before {
  content: '';
  position: absolute;
  left: 16px; top: 19px;
  width: 6px; height: 11px;
  border: solid var(--accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.production__steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.production__steps li { padding: 14px 16px; background: var(--bg-soft); border-radius: 10px; }

.segment { display: grid; gap: 6px; padding: 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); height: 100%; }
.segment:hover { border-color: var(--ink); color: inherit; box-shadow: 0 10px 28px rgba(0, 0, 0, .08); }
.segment__title { font-weight: 600; font-size: 18px; }
.segment__text { color: var(--muted); font-size: 14px; }

.figures { gap: 24px; }
.figure { display: grid; gap: 4px; }
.figure__value { font-size: 36px; font-weight: 700; line-height: 1.1; color: var(--accent-text); }
.figure__label { color: #b6b6b6; font-size: 14px; }

.review { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; display: grid; gap: 10px; align-content: start; }
/* Звёзды темнее прежнего #f0a500: на белой карточке тот давал 2,08:1 и
   расплывался, хотя именно звёзды и есть оценка. #c47f00 остаётся золотым,
   но читается (3,3:1). */
.review__stars { margin: 0; color: #c47f00; letter-spacing: 2px; }
.review__text { margin: 0; }
.review__author { margin: 0; font-weight: 600; }
.review__source { margin: 0; font-size: 13px; color: var(--muted); }

.video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #000; }
.video iframe, .video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.doc { display: grid; gap: 6px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.doc:hover { border-color: var(--ink); color: inherit; }
.doc__title { font-weight: 500; }
.doc__note { font-size: 13px; color: var(--muted); }

.partners { display: flex; flex-wrap: wrap; gap: 32px; align-items: center; justify-content: center; }
.partners__item { display: flex; align-items: center; justify-content: center; min-height: 64px; }
.partners__item img { max-height: 48px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .75; transition: filter .2s, opacity .2s; }
.partners__item:hover img { filter: none; opacity: 1; }

.post { display: grid; gap: 8px; align-content: start; }
.post__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius); }
.post__date { margin: 0; font-size: 13px; color: var(--muted); }
.post__title { margin: 0; font-size: 19px; line-height: 1.3; }
.post__excerpt { margin: 0; color: var(--ink-2); }
.post__cover { width: 100%; border-radius: var(--radius); margin: 0 0 24px; object-fit: cover; }

.mapblock { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 32px; align-items: start; }
.mapblock__map { aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; }
.mapblock__map iframe { width: 100%; height: 100%; border: 0; }

.legal { background: #0e0e0e; color: #848484; padding: 18px 0; font-size: 13px; }
.legal__in { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.legal__links { display: flex; gap: 18px; flex-wrap: wrap; }
.legal a { color: #b6b6b6; }
.legal a:hover { color: var(--accent-text); }
.legal__requisites { margin: 0; }

@media (max-width: 900px) {
  .region { grid-template-columns: 1fr; gap: 24px; padding: 27px 20px; }
  .mapblock { grid-template-columns: 1fr; }
}

/* ---------- photographs brought over from the old site ---------- */

.hero {
  position: relative; overflow: hidden;
  /* Затемнение только слева, где лежит текст. Справа снимок остаётся почти
     чистым: ради столов на нём фотография и выбрана, а прежняя заливка
     гасила её целиком, и первый экран выглядел тёмным пятном. */
  background-image: linear-gradient(95deg, rgba(6, 9, 7, .95) 0%, rgba(6, 9, 7, .86) 24%, rgba(6, 9, 7, .5) 42%, rgba(6, 9, 7, .12) 60%, rgba(6, 9, 7, 0) 74%), var(--hero-photo);
  background-size: cover; background-position: center right;
}



.person { padding: 0; overflow: hidden; }
.person__photo { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: top center; background: var(--bg-soft); }
.person__name { margin: 16px 20px 4px; }
.person__role { margin: 0 20px 20px; }

.guarantee { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.guarantee__photo { width: 100%; border-radius: var(--radius); object-fit: cover; }
.guarantee__items { display: grid; gap: 28px; }

.production__photo { width: 100%; border-radius: var(--radius); margin-bottom: 20px; object-fit: cover; }

@media (max-width: 900px) {
  .guarantee { grid-template-columns: 1fr; gap: 24px; }
}

/* ---------- chips, tag rows and pagination ---------- */

/* The base chip lived only in the admin stylesheet, so every row of tags on the
   public site rendered as a run of plain text. */
.chip {
  display: inline-flex; align-items: center; gap: 9px;
  height: 34px; padding: 0 15px;
  border: 1px solid var(--line); border-radius: 100px;
  background: var(--bg); color: var(--ink); font-size: 12px; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.is-active { background: var(--ink); border-color: var(--ink); color: var(--bg); }

.chips { display: flex; flex-wrap: wrap; gap: 9px; margin: 0 0 20px; }
/* Число зелёным, а не серым: так оно читается как отдельный факт, а не как
   продолжение названия набранное потусклее. */
.chip__n { font-size: 12px; color: var(--accent-text); margin: 0; }
.chip.is-active .chip__n { color: var(--accent-text); }
.chip--tag { background: var(--bg-soft); border-color: transparent; }
.chip--tag:hover { border-color: var(--ink); }

.tagrow { display: flex; gap: 14px; align-items: baseline; margin-bottom: 12px; flex-wrap: wrap; }
.tagrow__label { font-size: 14px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; min-width: 92px; }
.tagrow__items { display: flex; flex-wrap: wrap; gap: 8px; }

.pager { display: flex; gap: 6px; align-items: center; justify-content: center; margin-top: 36px; flex-wrap: wrap; }
.pager__item, .pager__arrow {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 10px;
  /* Фон переменной: на тёмной теме белая плашка оставляла светлый номер
     страницы на белом, и разбивка пропадала целиком. */
  border: 1px solid var(--line); border-radius: 10px; font-size: 14px; background: var(--bg);
}
.pager__item:hover, .pager__arrow:hover { border-color: var(--ink); color: var(--ink); }
.pager__item.is-active { background: var(--ink); border-color: var(--ink); color: var(--bg); font-weight: 500; }
.pager__gap { padding: 0 4px; color: var(--muted); }

/* The product card image is square: the photographs are framed for it, and a
   4:3 crop was slicing the tables at top and bottom. */
.cartline__media img { width: 120px; height: 120px; object-fit: cover; border-radius: 8px; }
.cartline__noimg { width: 120px; height: 120px; }
/* Только для широкого экрана. Раньше правило стояло без медиазапроса и
   перебивало телефонную раскладку ниже по файлу: на узком экране снова
   включались пять колонок, крестик «убрать» уезжал за край, и последний
   товар нельзя было удалить из корзины вовсе. */
@media (min-width: 761px) { .cartline { grid-template-columns: 120px minmax(0, 1fr) auto auto auto; } }
.thumb { width: 72px; }
.product__stage { display: grid; place-items: center; padding: 12px; }

@media (max-width: 760px) {
  .cartline__media img, .cartline__noimg { width: 84px; height: 84px; }
  .tagrow__label { min-width: 0; }
}

/* ---------- section first screen, stages, numbered service lists ---------- */

.cathero { background: var(--bg-soft); border-radius: var(--radius); padding: 24px 28px; margin: 0 0 28px; }
.cathero__in { padding: 0; max-width: none; }
.cathero__lead { margin: 0 0 14px; font-size: 20px; font-weight: 600; }
.cathero__list { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0 0 16px; padding: 0; list-style: none; }
.cathero__list li { position: relative; padding-left: 20px; color: var(--ink-2); }
.cathero__list li::before { content: ''; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.cathero p:last-child { margin-bottom: 0; }

.stages { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; justify-content: center; }
.stages__item {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px; background: #fff; border: 1px solid var(--line); border-radius: 999px; font-weight: 500;
}
.stages__n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--on-accent);
  font-size: 13px; font-weight: 700;
}

.numlist { counter-reset: num; list-style: none; padding: 0; margin: 28px 0; display: grid; gap: 22px; }
.numlist li { counter-increment: num; position: relative; padding-left: 62px; }
.numlist li::before {
  content: '/' counter(num, decimal-leading-zero);
  position: absolute; left: 0; top: 2px; color: var(--accent-text); font-weight: 600; font-size: 15px;
}
.numlist h3 { margin: 0 0 6px; font-size: 18px; }
.numlist p { margin: 0; color: var(--ink-2); }

.page__lead { font-size: 20px; color: var(--ink-2); margin: 0 0 28px; }

.contactcard { display: grid; gap: 18px; margin: 0 0 24px; }
.contactcard p { margin: 0; display: grid; gap: 4px; }
.contactcard__big { font-size: 24px; font-weight: 600; }

@media (max-width: 760px) {
  .numlist li { padding-left: 0; padding-top: 24px; }
  .numlist li::before { top: 0; }
}

/* The policy carries tables and lists straight from the old site. */
.prose table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 15px; }
.prose th, .prose td { border: 1px solid var(--line); padding: 8px 11px; text-align: left; vertical-align: top; }
.prose table + p { margin-top: 18px; }

/* ---------- catalogue page: picker, expert strip, materials ---------- */

/* .cathero--main удалён: в разметке его не было ни разу, а пара «заливка из
   --ink плюс зашитый белый текст» на тёмной теме даёт белое по белому, и
   такое правило рано или поздно уезжает копипастом в живой блок. */

/* Форма быстрого подбора. Класс свой: короткое .pick уже занято чипсами
   подборок раздела, и форма молча получала от них пилюлю с рамкой, фоном и
   полями, из-за чего вылезала за сетку страницы. */
.quickpick {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px; align-items: end; margin-top: 24px;
}
.quickpick__note { margin: 12px 0 0; font-size: 13px; }
.quickpick .btn { height: 48px; }
.quickpick .field__input { height: 48px; }
.quickpick select.field__input {
  appearance: none; padding-right: 34px;
  background-image: 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='%23555' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}

.expert { display: flex; gap: 32px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.expert p { margin: 0; color: #c4c4c4; max-width: 60ch; }
.expert .h2 { margin-bottom: 10px; }
.expert__actions { display: flex; gap: 12px; flex-wrap: wrap; }

.specs__list--wide { max-width: none; }
.specs__list--wide div { grid-template-columns: 280px 1fr; }

@media (max-width: 760px) {
  .specs__list--wide div { grid-template-columns: 1fr; }
}

/* ---------- header: search field, contacts, call to action ---------- */

.site-head__in { gap: 16px; flex-wrap: nowrap; }

.site-head__search { position: relative; flex: 0 1 220px; min-width: 0; }
.site-head__search .field__input { height: 38px; padding: 0 38px 0 12px; border-radius: 999px; font-size: 14px; }
.site-head__search-go {
  position: absolute; right: 2px; top: 2px; width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: none; color: var(--muted); cursor: pointer; border-radius: 50%;
}
.site-head__search-go:hover { color: var(--ink); background: var(--bg-soft); }

.site-head__contact { display: grid; line-height: 1.25; }
.site-head__where { font-size: 11px; color: var(--muted); max-width: 26ch; }
.site-head__cta { white-space: nowrap; }

@media (max-width: 1400px) {
  .site-head__where { display: none; }
}
@media (max-width: 1240px) {
  .site-head__search { display: none; }
  .site-head__cta { display: none; }
}

/* ---------- product card, the fuller version ---------- */

.card__body { gap: 8px; }
.card__specs { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.4; }
.card__prices { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 2px 0 0; }
/* Подпись под ценой в подборке: за что названа сумма. */
.card__pricecap { margin: 2px 0 0; font-size: 12px; color: var(--muted); }
.card__price { font-size: 18px; font-weight: 600; }
.card__old { font-size: 14px; color: var(--muted); }
.card__status { margin: 0; font-size: 13px; color: var(--accent-text); }
/* Счётчик на месте кнопки «в корзину». Та же высота и то же скругление, что
   у кнопки, поэтому ряд действий не дёргается, когда одно сменяет другое. */
.cartstep {
  display: inline-flex; align-items: center; justify-content: space-between;
  gap: 4px; flex: 1 1 auto; min-height: 44px; padding: 0 6px;
  border-radius: 999px; background: var(--accent); color: var(--on-accent);
  font-weight: 600;
}
.cartstep__btn {
  width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, .12); color: inherit;
  font: inherit; font-size: 18px; line-height: 1; cursor: pointer;
}
.cartstep__btn:hover { background: rgba(0, 0, 0, .22); }
.cartstep__n { min-width: 24px; text-align: center; font-size: 15px; }
.product__buy .cartstep { min-height: 52px; flex: 0 0 auto; min-width: 150px; }

.card__actions { display: flex; gap: 8px; margin-top: auto; padding-top: 10px; flex-wrap: wrap; }
.card__actions .btn { height: 38px; padding: 0 14px; font-size: 14px; flex: 1 1 auto; }

/* ---------- quick filters and the offer of help ---------- */

.quickfilters { display: grid; gap: 10px; margin: 0 0 22px; padding: 16px 18px; background: var(--bg-soft); border-radius: var(--radius); }
.quickfilters .tagrow { margin: 0; }
.quickfilters .chip { background: #fff; }
.quickfilters .chip.is-active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.quickfilters .chip.is-active .chip__n { color: var(--bg); opacity: .75; }

.help { display: flex; gap: 32px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.help p { margin: 0; max-width: 62ch; color: var(--ink-2); }
.help .h2 { margin-bottom: 10px; }
.help__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* The header now carries the menu, search, contacts and a call to action.
   Things drop out in order of usefulness as the window narrows: first the
   slogan, then the address, then the search and the button. */
@media (max-width: 1600px) {
  .site-head__slogan { display: none; }
}
@media (max-width: 1400px) {
  .site-head__where { display: none; }
  .site-nav { gap: 14px; }
  .site-nav a { font-size: 12px; }
}
@media (max-width: 1150px) {
  .site-head__search { display: none; }
  .site-head__cta { display: none; }
}
@media (max-width: 900px) {
  .site-head__contact { display: none; }
}

/* ---------- product page: short specs, trust strip, ways to reach us ---------- */

.product__badge {
  display: inline-flex; align-items: center; height: 22px; padding: 0 9px;
  border-radius: 999px; background: var(--accent); color: var(--on-accent);
  font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
}

.product__short { margin: 0 0 20px; display: grid; gap: 6px; }
.product__short div { display: grid; grid-template-columns: 200px 1fr; gap: 12px; font-size: 16px; }
.product__short dt { color: var(--muted); margin: 0; }
.product__short dd { margin: 0; }

/* Каналы связи: подпись, три значка и ссылка словами. Раньше здесь стояли
   четыре таблетки того же вида, что «Добавить в корзину» и «Купить в 1 клик»,
   и карточка товара превращалась в восемь равных кнопок подряд. Разный вид
   вместо одинакового и есть иерархия: покупка кнопкой, связь значком,
   расчёт доставки ссылкой. */
.ways { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.ways__label { font-size: 12px; color: var(--muted); margin-right: 2px; }
.ways__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  /* Фон переменной, а не числом: на тёмной теме значок берёт светлый --ink,
     и белый кружок делал его белым по белому. */
  border: 1px solid var(--line); background: var(--bg);
  color: var(--ink); cursor: pointer; font-family: inherit;
}
.ways__icon:hover { border-color: var(--ink); color: var(--ink); }
.ways__icon--text { font-size: 14px; font-weight: 700; letter-spacing: .02em; }
.ways__call {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px;
  border: 0; background: none; font: inherit; font-size: 14px; color: var(--ink-2);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.ways__call:hover { color: var(--ink); }

/* Сердце на карточке товара: тот же кружок, что и у каналов связи, потому
   что это действие того же веса. Красным заливается выбранное состояние, как
   на плитках каталога. */
.product__fav {
  display: inline-flex; align-items: center; justify-content: center;
  /* Кружок ростом с соседние кнопки, а не 44 на 44: в ряду с кнопками в 52
     точки он выглядел меньше и ниже их, будто недорисован. Число то же, что
     у .btn в theme.css; ниже 44 опускать нельзя, это предел зоны нажатия. */
  width: 52px; height: 52px; border-radius: 50%; flex: none;
  border: 1px solid var(--line); background: var(--bg);
  color: var(--ink); cursor: pointer;
}
.product__fav:hover { border-color: var(--ink); color: var(--accent-text); }
.product__fav.is-active { border-color: #de3032; color: #de3032; }
.product__fav.is-active svg { fill: currentColor; }

.product__calc { margin: 0 0 22px; }

.trustrip { list-style: none; margin: 0 0 20px; padding: 18px 0 0; border-top: 1px solid var(--line); display: grid; gap: 12px; }
/* Галочка вместо маркера. Список обещаний без маркеров читался сплошным
   текстом в два кегля, и было неясно, что это перечень, а не абзацы. */
.trustrip li { display: grid; gap: 2px; align-content: start; position: relative; padding-left: 24px; }
.trustrip li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 5px;
  width: 6px;
  height: 11px;
  border: solid var(--accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.trustrip strong { font-size: 15px; font-weight: 600; }
.trustrip span { font-size: 13px; color: var(--muted); }

.kit { margin: 0 0 8px; padding: 16px 18px; background: var(--bg-soft); border-radius: var(--radius); }
.h3 { font-size: 24px; margin: 0 0 10px; }
.kit__list { margin: 0; padding-left: 20px; display: grid; gap: 4px; color: var(--ink-2); }

.expert-person { display: flex; gap: 32px; align-items: center; flex-wrap: wrap; }
.expert-person__photo { width: 200px; height: 200px; object-fit: cover; object-position: top center; border-radius: var(--radius); }
.expert-person__name { font-size: 20px; font-weight: 600; margin: 0 0 8px; }
.expert-person p { max-width: 62ch; }
.expert-person__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }

/* ---------- the short-request dialog ---------- */

.quick { border: 0; border-radius: var(--radius); padding: 0; width: min(440px, calc(100vw - 32px)); box-shadow: 0 24px 60px rgba(0, 0, 0, .3); }
.quick::backdrop { background: rgba(0, 0, 0, .45); }
.quick__form { display: grid; gap: 14px; padding: 28px; position: relative; }
.quick__title { margin: 0; font-size: 22px; padding-right: 30px; }
.quick__note { margin: -6px 0 0; font-size: 14px; }
.quick__close {
  position: absolute; right: 14px; top: 12px; width: 32px; height: 32px;
  border: 0; background: none; font-size: 26px; line-height: 1; color: var(--muted); cursor: pointer;
}
.quick__close:hover { color: var(--ink); }

@media (max-width: 760px) {
  .product__short div { grid-template-columns: 1fr; gap: 2px; }
  .expert-person__photo { width: 140px; height: 140px; }
}

/* ---------- own production: photo with the heading over it ---------- */

.ownprod { position: relative; margin: 0 0 32px; border-radius: var(--radius); overflow: hidden; }
.ownprod__photo { width: 100%; height: auto; display: block; object-fit: cover; }
.ownprod__title {
  position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  display: flex; align-items: center;
  padding: 0 clamp(20px, 5vw, 64px);
  /* The shot is dark on the left and bright on the right, so the text sits on
     a gradient rather than on a flat wash that would grey out the photograph. */
  background: linear-gradient(90deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .45) 45%, rgba(0, 0, 0, 0) 75%);
}
.ownprod__title .h2 { color: #fff; margin: 0; max-width: 14ch; }

.ownprod__text { gap: 40px; }
.ownprod__text p { margin: 0 0 14px; color: var(--ink-2); }
.ownprod__text p:last-child { margin-bottom: 0; }

@media (max-width: 760px) {
  .ownprod__title { position: static; padding: 16px 0 0; background: none; }
  .ownprod__title .h2 { color: var(--ink); max-width: none; }
  .ownprod { overflow: visible; }
  .ownprod__photo { border-radius: var(--radius); }
}

/* ===========================================================================
   Header, rebuilt to match the live site: a bigger logo with the slogan beside
   it, the menu, the three icons, and the phone with a call-me button under it.
   These rules come last on purpose and replace the earlier header block.
   =========================================================================== */

.site-head__in {
  display: flex; align-items: center; gap: 24px;
  height: auto; min-height: 84px; padding-top: 10px; padding-bottom: 10px;
  flex-wrap: nowrap;
}

.logo { flex: 0 0 auto; }
.logo img { width: 165px; height: auto; }

.site-head__slogan {
  display: block;
  flex: 0 1 240px; min-width: 0;
  margin: 0;
  font-size: 11px; line-height: 1.35; letter-spacing: .02em;
  text-transform: uppercase; color: var(--ink-2);
}

.site-nav { margin: 0 auto; gap: 22px; flex-wrap: wrap; justify-content: center; }
.site-nav a { font-size: 13px; letter-spacing: .02em; white-space: nowrap; }

.site-head__tools { flex: 0 0 auto; gap: 2px; }
.iconbtn { border: 0; cursor: pointer; font-family: inherit; }

.site-head__contact {
  flex: 0 0 auto; display: grid; gap: 6px; justify-items: end; text-align: right;
}
.site-head__phone { font-size: 19px; font-weight: 700; white-space: nowrap; }
.btn--call { height: 36px; padding: 0 20px; font-size: 13px; border-radius: 999px; }

/* ---------- search over the page ---------- */

.headsearch {
  position: absolute; left: 0; right: 0; top: 100%;
  background: #fff; border-bottom: 1px solid var(--line);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .12);
  z-index: 41;
}
.site-head { position: sticky; }
.headsearch__in { padding-top: 16px; padding-bottom: 20px; }
.headsearch__form { display: flex; gap: 10px; align-items: center; }
.headsearch__form .field__input { height: 48px; font-size: 16px; }
.headsearch__form .iconbtn { font-size: 26px; line-height: 1; color: var(--muted); }

.headsearch__results { margin-top: 12px; }
.headsearch__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.headsearch__item {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 14px; align-items: center; padding: 8px 10px; border-radius: 10px;
}
.headsearch__item:hover { background: var(--bg-soft); color: inherit; }
.headsearch__item img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; }
.headsearch__noimg { display: block; width: 56px; height: 56px; background: #ededed; border-radius: 8px; }
.headsearch__text { display: grid; gap: 2px; min-width: 0; }
.headsearch__title { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.headsearch__meta { font-size: 12px; color: var(--muted); }
.headsearch__price { font-weight: 600; white-space: nowrap; }
.headsearch__empty { margin: 8px 10px; color: var(--muted); }
.headsearch__more { display: inline-block; margin: 12px 10px 0; font-size: 14px; text-decoration: underline; }

/* ---------- narrowing, in order of usefulness ---------- */

@media (max-width: 1500px) {
  .site-head__slogan { flex-basis: 190px; font-size: 12px; }
  .site-nav { gap: 16px; }
  .site-nav a { font-size: 12px; }
}
@media (max-width: 1240px) {
  .site-head__slogan { display: none; }
  .site-head__in { gap: 18px; }
}
@media (max-width: 1000px) {
  .btn--call { display: none; }
}
@media (max-width: 760px) {
  .site-head__contact { display: none; }
  .site-head__in { min-height: 64px; }
  .logo img { width: 130px; }
  .headsearch__item { grid-template-columns: 44px minmax(0, 1fr); }
  .headsearch__item img, .headsearch__noimg { width: 44px; height: 44px; }
  .headsearch__price { grid-column: 2; font-size: 14px; }
}

/* The header is wider than the rest of the page, as on the live site: the logo
   sits at the left edge and the phone at the right, and the menu gets room to
   stay on one line. */
.site-head .wrap { max-width: 1720px; padding-left: 40px; padding-right: 40px; }
.site-head__slogan { flex: 0 0 250px; }
.site-nav { flex-wrap: nowrap; }

@media (max-width: 1400px) {
  .site-head .wrap { padding-left: 24px; padding-right: 24px; }
}

/* The magnifier had a grey disc behind it: the icon button kept its hover
   background, and a button holds focus after a click, so the disc stayed put. */
.iconbtn:hover { background: none; color: var(--accent-text); }
.iconbtn:focus { outline: none; }
.iconbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 50%; }

/* The main call to action on the live site is a gradient from the brand green
   into yellow with a warm glow under it, not a flat fill. Values read off the
   live page: linear-gradient(211.68deg, #00c88c, #ffd340) and a shadow in
   rgba(214,146,35,.3). */
.btn--shine {
  background-image: linear-gradient(211.68deg, #00c88c 0%, #ffd340 100%);
  background-color: transparent;
  border-color: transparent;
  /* Подпись тёмная, а не белая. Градиент уходит в жёлтый #ffd340, и белым по
     нему выходило 1,43:1: у правого края кнопки текст просто исчезал. Тот же
     #06231a, что у .btn--primary, даёт 7,6:1 на зелёном конце и 13:1 на
     жёлтом, то есть читается по всей длине. */
  color: var(--on-accent);
  box-shadow: 0 10px 30px rgba(214, 146, 35, .3);
  font-weight: 500;
}
.btn--shine:hover {
  background-image: linear-gradient(211.68deg, #0e9a70 0%, #f0c02e 100%);
  border-color: transparent;
  color: var(--on-accent);
  box-shadow: 0 12px 34px rgba(214, 146, 35, .42);
}

/* The magnifier became a <button> when the search moved into a panel, and a
   button carries the browser's own grey face unless it is cleared. That grey
   disc was not a style of ours at all. */
.iconbtn { background: none; -webkit-appearance: none; appearance: none; }

/* ===========================================================================
   Buttons, checked against the live site through Chrome. Red is the second
   brand colour there and it carries the commerce action: "Добавить в корзину"
   is #e4070c, and the consultation call on a product page is a red-to-yellow
   gradient. Green stays for navigation and for the form.
   =========================================================================== */

/* Кнопка корзины зелёная, а не красная. Красный достался от Тильды и на
   витрине читался как предупреждение: в ряду карточек он единственное яркое
   пятно и перетягивал внимание с фотографии стола. Подпись тёмная, как на
   остальных зелёных кнопках. */
.btn--buy {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent);
  font-weight: 600; border-radius: 20px;
}
.btn--buy:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: var(--on-accent); }
.btn--buy.is-done { background: var(--ink); border-color: var(--ink); color: var(--bg); }

/* The consultation call on a product page: red into yellow, heavy and upper. */
.btn--ask {
  background-image: linear-gradient(211.68deg, #e4070c 0%, #fbda6f 100%);
  background-color: transparent; border-color: transparent; color: #fff;
  border-radius: 20px; font-weight: 800;
  letter-spacing: .01em; box-shadow: 0 10px 30px rgba(214, 146, 35, .28);
}
.btn--ask:hover {
  background-image: linear-gradient(211.68deg, #c20509 0%, #f0c95c 100%);
  border-color: transparent; color: #fff;
}

/* The form button on the live site is green with BLACK text, softer corners
   and heavier than the rest. */
.lead__form .btn--primary,
.cart__form .btn--primary,
.quick__form .btn--primary {
  background: var(--accent); border-color: var(--accent); color: #000;
  border-radius: 10px; font-weight: 700; height: 56px; font-size: 16px;
}
.lead__form .btn--primary:hover,
.cart__form .btn--primary:hover,
.quick__form .btn--primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #000; }

/* Secondary call on a dark screen: outlined in the brand green, not in white. */
.btn--ghost { border-color: var(--accent); color: #fff; }
.btn--ghost:hover { background: rgba(0, 200, 140, .14); border-color: var(--accent); color: #fff; }

/* Section chips are grey with dark text there, not white with a hairline. */
.chip { background: #e6e6e6; border-color: transparent; color: #333; border-radius: 30px; font-size: 14px; }
.chip:hover { background: #dcdcdc; border-color: transparent; color: #111; }
.chip.is-active { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.chip--tag { background: #f0f0f0; }

/* The header call button: flat green, rounder, small uppercase. */
.btn--call { background: var(--accent); border-color: var(--accent); color: var(--on-accent); border-radius: 30px;
  font-size: 12px; font-weight: 600; letter-spacing: .01em; }
.btn--call:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: var(--on-accent); }

/* ---------- home page: a working filter beside the goods ---------- */

.shop--home { align-items: start; }
/* Панель на главной стоит в потоке, поэтому ни предела высоты, ни
   внутренней прокрутки ей не нужно. С ними список фильтров вылезал из своей
   коробки и ложился поверх следующего блока страницы: на невысоком окне это
   видно сразу. */
.shop--home .shop__side { position: static; max-height: none; overflow: visible; }
.shop--home .facets__groups { overflow: visible; max-height: none; }

/* Фильтры на главной живут в своей разметке, и после правки панели в каталоге
   они остались коробочками с рамкой у каждой группы. Приводим к тому же виду:
   строка с разделителем снизу и плюсом справа, без рамки вокруг группы. */
.facet--fold { border: 0; border-radius: 0; padding: 0; margin: 0; display: block; }
.facet__fold {
  padding: 14px 0; font-size: 12px; font-weight: 600; cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border-bottom: 1px solid var(--line);
}
.facet__fold::-webkit-details-marker { display: none; }
.facet__fold::after { content: '+'; font-size: 16px; color: var(--muted); line-height: 1; }
.facet--fold[open] .facet__fold::after { content: '−'; }
.facet__body { padding: 4px 0 10px; display: grid; gap: 0; border-bottom: 1px solid var(--line); }
.facet__range { grid-template-columns: 1fr 1fr; gap: 8px; }
.facet__range .field__input { height: 38px; }

/* The heart on a card sat on a white disc that vanished over a light photo. */
.card__fav { border: 1px solid var(--line); background: rgba(255, 255, 255, .96); }
.card__fav.is-active { border-color: #de3032; }

/* ---------- projects: two crops in one grid ---------- */

/* Проекты мозаикой: снимок во весь блок, подпись плашкой понизу. Раньше это
   были белые карточки «фотография сверху, текст снизу», и снимок работал
   иллюстрацией к тексту. Здесь наоборот: снимок это доказательство, текст
   подпись к нему.

   Сетка на четыре колонки: большая карточка занимает две и две строки,
   маленькая одну. Порядок карточек в данных подобран так, чтобы ряды
   складывались без дырок. */
.projects { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 210px; gap: 16px; }
.project {
  position: relative; overflow: hidden; padding: 0; display: block;
  border: 0; border-radius: 18px; background: #12171a;
  grid-column: span 2; grid-row: span 1;
}
.project--large { grid-column: span 2; grid-row: span 2; }
.project__img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }

/* Плашка не во всю ширину и с отступом от краёв: так видно, что она лежит
   поверх снимка, а не обрезает его. */
.project__bar {
  position: absolute; left: 12px; right: 12px; bottom: 12px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 14px; align-items: baseline;
  padding: 13px 16px; border-radius: 14px;
  background: rgba(10, 13, 11, .82);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .12);
  color: #fff;
}
.project__head { grid-column: 1; }
.project__title { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.25; }
.project__city { margin: 2px 0 0; font-size: 12px; color: #aeb8b2; }
.project__metric {
  grid-column: 2; grid-row: 1; margin: 0; white-space: nowrap;
  font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent-text);
}
/* Факты видны на всех плитках: «проверен Дианой Мироновой» и «три стола в
   один зал» это и есть содержание объекта, без них остаются город и срок,
   одинаковые у половины. */
.project__facts { display: grid; grid-column: 1 / -1; margin: 8px 0 0; padding: 0; list-style: none; gap: 3px; }
.project__facts li { font-size: 12px; line-height: 1.35; color: #c9d2cd; padding-left: 14px; position: relative; }
.project__facts li::before {
  content: ''; position: absolute; left: 0; top: 7px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}

@media (max-width: 1000px) {
  .projects { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 200px; }
  .project, .project--large { grid-column: span 1; grid-row: span 1; }
  .project--large { grid-column: span 2; grid-row: span 2; }
}

/* ---------- catalogue mega menu ---------- */

.site-nav__item { position: static; display: inline-flex; align-items: center; }

.megamenu {
  position: absolute; left: 0; right: 0; top: 100%;
  background: #fff; border-top: 1px solid var(--line);
  box-shadow: 0 20px 44px rgba(0, 0, 0, .14);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  /* Закрывается с задержкой: курсор по дороге вниз успевает соскользнуть,
     и без паузы панель моргает. Открывается сразу, задержка снимается ниже. */
  transition: opacity .14s .18s, transform .14s .18s, visibility .14s .18s;
  z-index: 42; text-align: left;
}
/* Мост над панелью. Ссылка «Каталог» заканчивается на 49 пикселе, а панель
   начинается на 80: между ними полоса, где нет ни того, ни другого, и
   наведение рвётся ровно посередине движения вниз. Полоса накрывается
   невидимым продолжением самой панели, поэтому и считается наведением на
   неё. Пока панель скрыта, мост тоже скрыт и ничего не перехватывает. */
.megamenu::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 36px; }
.site-nav__item:hover .megamenu,
.site-nav__item:focus-within .megamenu,
.megamenu:hover { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

.megamenu__in { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 32px; padding-top: 20px; padding-bottom: 24px; }

/* grid-template-columns обязателен. Неявная колонка в гриде меряется по
   max-content, то есть по самому длинному названию, и растёт шире своего
   контейнера, сколько бы переносов ни разрешили. minmax(0, 1fr) держит её в
   границах, и только после этого перенос начинает работать. */
.megamenu__sections { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; border-right: 1px solid var(--line); padding-right: 16px; }
/* Перенос строк здесь включается ниже, в правиле с селектором .site-nav
   .megamenu__section: nowrap задан у .site-nav a, и по весу селектора это
   правило сильнее. Без переноса длинное название («Комплектующие для
   бильярдной и столов») распирало строку, счётчик выезжал за колонку и
   садился прямо на разделительную линию. */
.megamenu__section {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px; border-radius: 8px; font-size: 16px; text-transform: none; letter-spacing: 0;
  white-space: normal; min-width: 0;
}
.megamenu__section:hover, .megamenu__section.is-active { background: var(--bg-soft); color: var(--ink); }
.megamenu__n { font-size: 12px; color: var(--muted); flex: none; }

.megamenu__panels { position: relative; min-height: 180px; }
.megamenu__panel { display: none; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 28px; align-content: start; }
.megamenu__panel.is-active { display: grid; }
.megamenu__group-title { margin: 0 0 10px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.megamenu__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.megamenu__links a { display: flex; justify-content: space-between; gap: 10px; font-size: 16px; text-transform: none; letter-spacing: 0; white-space: normal; min-width: 0; }
.megamenu__links a:hover { color: var(--accent-text); }
.megamenu__empty { margin: 0; color: var(--muted); }
.megamenu__all { grid-column: 1 / -1; margin: 8px 0 0; }

@media (max-width: 1000px) { .megamenu { display: none; } }

/* The menu links are uppercase, but the panel inside them is a normal list:
   these selectors have to outweigh `.site-nav a`. */
.site-nav .megamenu a { text-transform: none; letter-spacing: 0; white-space: normal; }
.site-nav .megamenu__section { text-transform: none; font-size: 16px; white-space: normal; }
.megamenu__in { grid-template-columns: 330px minmax(0, 1fr); }
/* Строка раздела это текст, а не две колонки: число стоит сразу за
   названием и переносится вместе с ним. Раскладкой в две колонки число у
   однострочных названий оказывалось рядом со словом, а у двухстрочных
   улетало к правому краю, и ряд выглядел сломанным. */
.megamenu__section { display: block; line-height: 1.3; }
.megamenu__n { margin-left: 8px; }
.megamenu__all { margin-top: 18px; }

/* ===========================================================================
   One width for the whole site. The header used to run wider than the body,
   so the logo sat further left than every heading under it. Everything now
   shares --wrap, and the header contents are sized to fit inside it.
   =========================================================================== */

:root { --wrap: 1440px; }

.site-head .wrap { max-width: var(--wrap); padding-left: 24px; padding-right: 24px; }
.megamenu__in { max-width: var(--wrap); margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.headsearch__in { max-width: var(--wrap); }

.site-head__in { gap: 20px; min-height: 76px; }
/* Знак опущен на четыре точки. Кружок «О» в файле стоит не по центру
   картинки: его центр приходится на 0,427 высоты, то есть выше середины.
   Флексом по центру равняются коробки, а глазу видно кружок, и он оказывался
   выше средней строки подписи. Двигается именно знак: у подписи поля сверху
   и снизу должны остаться одинаковыми. */
.logo img { width: 140px; transform: translateY(4px); }
/* Подпись шире прежних 195: в узкой колонке она ложилась в четыре строки, и
   у блока не было середины, с которой можно что-то выровнять. В 280 строк
   три, и вторая и есть середина.

   Сдвиг вверх оптический. Кружок «О» в знаке стоит не по центру картинки:
   в файле logo.svg его центр приходится на 0,427 высоты, а не на 0,5, то
   есть выше середины примерно на четыре точки при ширине знака 140. Флексом
   по центру равняются коробки, а глазу видно кружок. */
.site-head__slogan {
  font-size: 12px; line-height: 1.3;
}
.site-nav { gap: 18px; }
/* Пункты шапки на ступень крупнее: 12 в строке с логотипом и телефоном
   читались как подпись, а не как навигация. */
.site-nav a { font-size: 14px; }
.site-head__phone { font-size: 16px; }
.btn--call { height: 32px; padding: 0 16px; font-size: 10px; }
.iconbtn { width: 36px; height: 36px; }

@media (max-width: 1340px) {
  .site-head__slogan { display: none; }
}
@media (max-width: 1120px) {
  .site-head__search { display: none; }
  .btn--call { display: none; }
}

/* The section list on the home page carries counts too. */
.sections__item { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sections__n { font-size: 12px; color: var(--muted); flex: 0 0 auto; }
/* Число на выбранном разделе: цвет фона страницы, а не зашитый белый.
   Прозрачность .75, ниже пара перестаёт проходить порог при кегле 12. */
.sections__item.is-active .sections__n { color: var(--bg); opacity: .75; }
.shop--home .shop__side { display: grid; gap: 16px; }

/* The short variant of the production block, standing next to the long one
   while the wording is being chosen. */
.ownprod__short { gap: 40px; align-items: center; }
.production__steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 12px; }
.production__steps li {
  counter-increment: step; position: relative;
  padding: 14px 16px 14px 52px; background: #fff; border-radius: 10px;
}
.production__steps li::before {
  content: counter(step); position: absolute; left: 16px; top: 13px;
  width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--on-accent);
  font-size: 13px; font-weight: 700; display: grid; place-items: center;
}
/* Ширина подписи задаётся здесь, это последнее слово в файле. Три строки, а
   не четыре: при 215 подпись держалась в трёх, пока была набрана десятым
   кеглем, а на двенадцатом снова разъехалась на четыре. max-width нужен
   рядом с flex-basis, иначе его режет ограничение из правила выше. */
.site-head__slogan { flex: 0 0 280px; max-width: 280px; }

/* ===========================================================================
   Блок «Вы заранее знаете» и кнопка-вспышка.
   Снято через Chrome с https://bilpro.ru/catalog/bilyardnie-stoly, блок
   rec2330547971: карточки 360×308, радиус 15, рамка 1px #eaeaea, светлые
   #f7f7f7 и тёмные #1e1e1e в шахматном порядке, три в ряд с шагом 40,
   заголовок 50/600 с зелёным первым куском, текст 16/400 #676767.
   =========================================================================== */

.reasons__head { max-width: 1000px; font-size: clamp(28px, 3.6vw, 50px); font-weight: 600; line-height: 1.16; letter-spacing: -0.02em; }
.reasons__head .accent { color: var(--accent-text); }

.reasons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 48px; }

/* Отступы сняты с живой карточки: верх 28, низ 35, бока 24 (текст 312 в
   карточке 360). Заголовку отдана высота двух строк, иначе строки текста в
   ряду разъезжаются по вертикали — на Тильде это держится координатами. */
.reason {
  display: flex; flex-direction: column; align-items: flex-start; text-align: left;
  min-height: 308px; padding: 26px 24px 30px;
  background: #f7f7f7; border: 1px solid #eaeaea; border-radius: 15px;
  transition: transform .2s ease-in-out, box-shadow .2s ease-in-out;
}
.reason:hover { transform: translateY(-3px); box-shadow: 0 16px 38px rgba(0, 0, 0, .08); }

/* Тёмные карточки идут через одну: на живом сайте это шахматка, а не
   выделение чего-то важного. */
.reason--dark { background: #1e1e1e; border-color: #1e1e1e; }

/* Кружок белый и на светлой карточке, и на тёмной — так на живом сайте. */
/* Номер в верху карточки, как в макете: он отвечает на вопрос «сколько
   их всего», а значок на вопрос «про что это». */
.reason__n {
  font-size: 12px; font-weight: 600; letter-spacing: .08em;
  color: var(--accent-text); margin-bottom: 18px;
}
/* Отдельного правила для тёмной карточки больше нет: на ней переобъявлен
   сам токен, и номер берёт яркий зелёный сам. */

.reason__badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 45px; height: 45px; border-radius: 50px; margin-bottom: 22px;
  background: #fff; color: #1e1e1e; flex: none;
}
.reason__icon { display: block; }

.reason__title { margin: 0 0 14px; min-height: 58px; font-size: 24px; font-weight: 700; line-height: 1.2; color: #1e1e1e; }
.reason--dark .reason__title { color: #fff; }
.reason__text { margin: 0; font-size: 16px; font-weight: 400; line-height: 21px; color: #676767; }
.reason--dark .reason__text { color: #b6b6b6; }

@media (max-width: 1000px) { .reasons { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
/* На телефоне карточки доводов остаются по две в ряд, а не по одной. В один
   столбец каждая занимала экран целиком, и шесть доводов превращались в
   шесть экранов пролистывания. Плашка ужимается, текст вслед за ней. */
@media (max-width: 640px) {
  .reasons { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 28px; }
  .reason { min-height: 0; padding: 18px 14px 20px; border-radius: 14px; }
  .reason__badge { width: 42px; height: 42px; }
  .reason__badge svg { width: 20px; height: 20px; }
  .reason__title { font-size: 16px; line-height: 1.25; margin-bottom: 10px; min-height: 0; }
  .reason__text { font-size: 12px; line-height: 1.4; }
}

/* Вспышка. На живом сайте это не keyframes, а сплошной жёлтый слой #fec410
   поверх кнопки: ::after во всю площадь с opacity 0 и переходом 0.2s. При
   наведении он проявляется, и кнопка вспыхивает жёлтым поверх градиента.
   isolation нужен, чтобы слой с z-index -1 лёг над фоном, но под текстом. */
.btn--shine { position: relative; overflow: hidden; isolation: isolate; border: 0; }
.btn--shine::after {
  /* Рамки у кнопки нет совсем: overflow: hidden режет слой по внутреннему
     краю, и оставленный 1px показывал бы зелёную кайму градиента. */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: #fec410; opacity: 0; transition: opacity .2s ease-in-out;
}
.btn--shine:hover::after, .btn--shine:focus-visible::after { opacity: 1; }
.btn--shine:hover { background-image: linear-gradient(211.68deg, #00c88c 0%, #ffd340 100%); }

/* Стрелка стоит слева от подписи — так на живой кнопке (order -1, 20px). */
.btn--arrow { gap: 10px; }
.btn__arrow { flex: none; }
.btn--shine .btn__arrow, .btn--shine span { position: relative; }

/* Высота нижней границей, а не числом: у .btn--shine стоит overflow: hidden
   ради слоя вспышки, и подпись в две строки обрезалась по этой границе.
   На телефоне «Подобрать бильярдный стол» как раз переносится. */
.section__action .btn--shine { height: auto; min-height: 60px; padding: 14px 34px; font-size: 16px; border-radius: 20px; }

/* Ghost на первом экране повторяет вторую кнопку живого сайта: прозрачная,
   рамка 1px в зелёный, радиус 20, высота 60. */
.hero__actions .btn { height: 60px; padding: 0 30px; border-radius: 20px; font-size: 16px; gap: 10px; }
.hero__actions .btn--shine { text-transform: none; letter-spacing: -0.5px; }

/* Блик по кнопке. На живом сайте это Тильдин ripple: белый эллипс
   rgba(255,255,255,.8) шириной в две кнопки, центр у левого нижнего угла,
   старт в scale(0). За первые 20% цикла он раздувается до 2.5 и гаснет,
   остальные 80% ничего не видно — отсюда редкая вспышка раз в несколько
   секунд, а не бегущая полоса. Цикл 6s linear infinite, клипается
   overflow: hidden самой кнопки.
   Снято через Chrome: document.getAnimations() на главной. */
@keyframes ripple {
  20%, 100% { opacity: 0; transform: scale(2.5); }
}
.btn--shine::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: -100%; top: 0; width: 200%; height: 210px;
  border-radius: 100%; transform-origin: center;
  background: rgba(255, 255, 255, .8);
  opacity: 1; transform: scale(0);
  animation: ripple 6s linear infinite;
}
/* Блик уводится, когда системе сказано не двигать лишнего. */
@media (prefers-reduced-motion: reduce) { .btn--shine::before { animation: none; opacity: 0; } }

/* ===========================================================================
   Первый экран раздела с фотографией.
   Снято через Chrome с живого /catalog/bilyardnie-stoly: карточка #131313,
   радиус 20, 1400x603 на макете 1600. Текст начинается в 120 от левого края,
   заголовок 41/400 белый, буллеты 20/300, кнопка 320x70. Фотография занимает
   правые 740 и вложена внутрь карточки с отступом 20.
   =========================================================================== */

.cathero {
  background: #131313; color: #fff;
  border-radius: 20px; padding: 0; margin: 0 0 32px;
  overflow: hidden;
}
.cathero__text { padding: 60px 40px 60px 72px; align-self: center; }
/* Начертание берём у заголовка на главной: он жирный и плотный, а здесь
   стоял светлый четырёхсотый, и два первых экрана выглядели с разных сайтов. */
.cathero__title { margin: 0 0 40px; font-size: clamp(32px, 2.9vw, 44px); font-weight: 700; line-height: 1.08; letter-spacing: -0.025em; color: #fff; max-width: 520px; }
.cathero .cathero__list { display: block; margin: 0 0 34px; padding: 0; list-style: none; }
.cathero .cathero__list li { position: relative; padding-left: 20px; margin-bottom: 4px; font-size: 20px; font-weight: 300; line-height: 28px; color: #fff; }
.cathero .cathero__list li::before { top: 11px; width: 5px; height: 5px; background: #fff; }
/* Ряд кнопок это flex, а не строка текста. В строке они выравниваются по
   базовой линии, а у кнопки со стрелкой внутри базовая линия своя: кнопки
   одной высоты вставали на разном уровне и казались разными. */
.cathero__action { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.cathero__action .btn { height: auto; min-height: 64px; padding: 14px 30px; border-radius: 20px; font-size: 16px; gap: 10px; }

/* Фотография прижата к правому краю карточки с полем в 20, как на живом. */
.cathero--photo { display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); align-items: stretch; }
/* Высота фотографии ограничена сверху: без потолка она тянулась вслед за
   шириной колонки, карточка вырастала под 600, и короткий текст слева
   оставался висеть в пустоте. */
.cathero__photo { margin: 20px 20px 20px 0; border-radius: 20px; overflow: hidden; min-height: 360px; max-height: 500px; }
.cathero__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
  .cathero--photo { grid-template-columns: 1fr; }
  .cathero__text { padding: 32px 24px 28px; order: 2; }
  .cathero__photo { order: 1; margin: 12px 12px 0; min-height: 0; aspect-ratio: 16 / 9; }
  .cathero__title { max-width: none; margin-bottom: 20px; }
  .cathero .cathero__list { margin-bottom: 22px; }
  .cathero__action .btn { width: 100%; }
}

/* Бесконечная лента партнёров. На живом сайте это Swiper с линейным
   автопроигрыванием и плитками 304x152 с шагом 20; здесь то же движение
   двумя копиями списка и сдвигом на -50%: в этой точке вторая копия стоит
   там, где начиналась первая, и стык не виден.
   width: max-content обязателен, иначе трек сожмётся по ширине экрана и
   -50% отмерит не половину ленты. */
/* Поля сверху и снизу нужны тени плиток: лента обрезает всё, что вылезает за
   её край, а тень как раз вылезала, и по нижней границе шла резкая линия.
   Отрицательные внешние поля возвращают ленте прежнее место в блоке. */
.marquee { overflow: hidden; padding: 16px 0 30px; margin-top: 24px; margin-bottom: -30px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 80px, #000 calc(100% - 80px), transparent); mask-image: linear-gradient(90deg, transparent, #000 80px, #000 calc(100% - 80px), transparent); }
/* will-change и translate3d не для красоты: дорожка шире четырёх тысяч точек
   и едет под маской, а такой слой браузер периодически выбрасывает и
   перерисовывает заново. Со стороны это выглядит как моргание раз в круг.
   Подсказка «этот слой будет двигаться» оставляет его на композиторе. */
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee var(--marquee-time, 35s) linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}
.marquee__group { display: flex; gap: 20px; padding-right: 20px; }
/* Плитка 304x152, и логотип занимает её целиком: на живом сайте у этих
   картинок background-size: cover, они нарисованы под размер плитки. Рамка и
   обесцвечивание убраны — из-за них логотипы выглядели мелкими марками в
   пустых коробках. */
.marquee__item {
  display: flex; align-items: center; justify-content: center;
  width: 304px; height: 152px; flex: none;
  background: #fff; border-radius: var(--radius); overflow: hidden;
}
/* На белом фоне белая плитка без рамки не читается: остаётся логотип, висящий
   в воздухе. На светлой подложке рамка не нужна, там край виден сам. */
.section:not(.section--soft):not(.section--dark) .marquee__item { border: 1px solid var(--line); }
.marquee__item img { width: 100%; height: 100%; object-fit: cover; }
.marquee__item span { color: var(--muted); font-size: 18px; }
/* Continuous left-to-right movement. */
/* The logo strip keeps moving while hovered. */
@keyframes marquee { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }
@media (max-width: 640px) { .marquee__item { width: 220px; height: 116px; } }

/* Карта без рекламы: ссылки под врезкой заменяют кнопки виджета Яндекса. */
.mapblock__links { display: flex; gap: 20px; flex-wrap: wrap; margin: 12px 0 0; font-size: 14px; }
.mapblock__links a { color: var(--muted); text-decoration: underline; }
.mapblock__links a:hover { color: var(--ink); }

/* Картинка карты служит подложкой, живая карта Яндекса ложится поверх неё и
   скрывает её, когда поднимется. Метка на картинке рисуется здесь: кадр
   собран вокруг адреса, значит центр картинки и есть адрес. */
.mapblock__side { display: flex; flex-direction: column; }
.mapblock__map { position: relative; display: block; background: #ededed; }
.mapblock__still { position: absolute; inset: 0; display: block; }
.mapblock__map img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mapblock__canvas { position: absolute; inset: 0; z-index: 1; }
.mapblock__map.is-live .mapblock__still { display: none; }
.mapblock__pin { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--accent); border: 3px solid #fff; box-shadow: 0 2px 10px rgba(0,0,0,.35); }
/* Пульс вокруг метки: на статичной картинке взгляд иначе её не находит. */
.mapblock__pin::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid var(--accent); opacity: .55; animation: pin-pulse 2.4s ease-out infinite; }
@keyframes pin-pulse { 0% { transform: scale(.6); opacity: .6; } 70%, 100% { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mapblock__pin::after { animation: none; } }

/* ===========================================================================
   Блок заявки и вопросы-ответы — с живого сайта, запись rec2324049571 и
   гармошка t668. Снято через Chrome с главной.
   =========================================================================== */

.leadcard {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 450px;
  gap: 40px; align-items: center;
  min-height: 685px; padding: 78px 25px 78px 29px;
  border-radius: 16px; overflow: hidden; color: #fff;
  background: #1e1e1e var(--lead-photo) center / cover no-repeat;
}
/* Затемнение: фотография светлая слева, и белый заголовок на ней тонет. */
.leadcard::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.34) 45%, rgba(0,0,0,.12) 100%); }
.leadcard__text { position: relative; max-width: 430px; }
.leadcard__title { margin: 0 0 32px; font-size: clamp(32px, 3vw, 44px); font-weight: 400; line-height: 1.18; color: #fff; }
.leadcard__title strong { font-weight: 700; }
.leadcard__lead { margin: 0 0 34px; font-size: 20px; line-height: 1.32; color: #fff; }
.leadcard__msgs { display: flex; flex-direction: column; gap: 14px; }
.leadcard__msg { display: flex; align-items: center; gap: 20px; color: #fff; font-size: 16px; line-height: 1.3; }
.leadcard__msg img { flex: none; border-radius: 10px; }
.leadcard__msg:hover { color: var(--accent-text); }

.leadcard__form { position: relative; background: #fff; border-radius: 15px; padding: 36px 40px 30px; color: var(--ink); }
.leadcard__formhead { margin: 0 0 24px; font-size: clamp(20px, 1.9vw, 24px); font-weight: 300; line-height: 1.16; text-align: center; color: #101010; }
/* Поля здесь без подписи сверху: на живом сайте подсказка живёт внутри поля,
   а подпись остаётся только для чтения с экрана. */
.leadcard__form .field--plain { display: block; margin-bottom: 16px; }
.leadcard__form .field__input { width: 100%; box-sizing: border-box; height: 64px; padding: 0 20px; background: #f7f7f7; border: 1px solid transparent; border-radius: 10px; font: inherit; line-height: 1.2; }
.leadcard__form .field__input--area { height: auto; min-height: 64px; padding: 20px; resize: vertical; }
.leadcard__form .field__input:focus { border-color: var(--accent); outline: none; background: #fff; }
.btn--consult { width: 100%; height: 72px; border-radius: 10px; background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-size: 16px; font-weight: 700; letter-spacing: .01em; }
.btn--consult:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: var(--on-accent); }
.leadcard__note { margin: 14px 0 0; font-size: 13px; color: var(--muted); text-align: center; }
.leadcard__note a { text-decoration: underline; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 980px) {
  .leadcard { grid-template-columns: 1fr; min-height: 0; padding: 32px 20px; gap: 28px; }
  .leadcard__form { padding: 26px 20px 22px; }
}

/* Гармошка */
.faq__head { margin-bottom: 10px; font-size: clamp(26px, 3.2vw, 45px); font-weight: 600; }
.faq__sub { margin: 0 0 32px; text-align: center; font-size: clamp(16px, 1.5vw, 24px); font-weight: 300; color: var(--ink-2); }
.faq { display: flex; flex-direction: column; gap: 4px; max-width: 1160px; margin: 0 auto; }
.faq__item { background: #f0f0f0; border: 0; border-radius: 20px; padding: 0; }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 72px; padding: 20px 30px; margin: 0;
  font-size: 18px; font-weight: 500; line-height: 1.3; cursor: pointer; list-style: none;
}
/* У summary с display: flex Chrome выносит свой треугольник за пределы
   строки, и list-style его не убирает — гасится он только через ::marker. */
.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ""; }
/* Плюс в зелёном кружке, вторая палочка гаснет на раскрытом вопросе. */
.faq__plus { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--accent); }
.faq__plus::before, .faq__plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; background: #fff; transition: opacity .15s, transform .15s; }
.faq__plus::after { transform: rotate(90deg); }
.faq__item[open] .faq__plus::after { opacity: 0; transform: rotate(0deg); }
.faq__a { padding: 0 30px 26px; max-width: 900px; color: var(--ink-2); line-height: 1.55; }
@media (max-width: 640px) {
  .faq__q { padding: 16px 18px; font-size: 16px; gap: 14px; }
  .faq__a { padding: 0 18px 20px; }
}

/* Строка мессенджера без адреса: выглядит как на живом сайте, но курсор
   не обещает перехода, которого не будет. */
.leadcard__msg--flat { cursor: default; }
.leadcard__msg--flat:hover { color: #fff; }

/* Галочка согласия. Высоту ей не задаём: общий размер полей ряда к флажкам
   не применяется, у них своя коробка. */
/* Галочка и подпись по центру друг друга. От flex-start квадрат вставал по
   верхнему краю строки, а буквы начинаются ниже него на высоту выносного
   элемента, и в одну строку это читалось как сбитое выравнивание. */
.leadcard__consent { display: flex; align-items: center; gap: 10px; margin: 4px 0 18px; font-size: 14px; line-height: 1.35; color: var(--ink-2); cursor: pointer; }
.leadcard__consent input { width: auto; height: auto; margin: 0; accent-color: var(--accent); flex: none; }
.leadcard__consent a { text-decoration: underline; }

/* Быстрые ссылки на разделы стоят над заголовком: до товаров глаз доходит
   через них, а не через слово «Каталог». Заголовок при этом по центру. */
.chips--top { margin: 0 0 18px; justify-content: center; }
#catalog .h2--center { margin-bottom: 28px; }

/* Короткий блок о производстве: фотография и текст в равных долях.
   У фотографии свой радиус и она тянется на высоту колонки текста, иначе
   рядом с четырьмя шагами остаётся полоса пустого фона. */
.prodshort { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; align-items: stretch; }
.prodshort__photo { margin: 0; border-radius: var(--radius); overflow: hidden; min-height: 320px; background: #ededed; }
/* Кадр сдвинут вправо, но не до упора: по центру колонка обрезала руку с
   краскопультом, а на 88% вылезал правый край снимка с деревянным столбом.
   70% — середина между этими двумя. */
.prodshort__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
.prodshort__text { align-self: center; }
.prodshort__text .h2 { margin-top: 0; }
.prodshort__text .production__steps { margin-top: 24px; }

/* Перечень шагов по макету: номер в своей колонке зелёным, строки разделены
   волосяными линиями сверху и снизу. Номера набраны цифрами в разметке, а не
   счётчиком списка: они часть содержания, их должен читать и чтец. */
.process { list-style: none; margin: 30px 0 0; padding: 0; border-top: 1px solid var(--line); }
.process li {
  display: grid; grid-template-columns: 55px minmax(0, 1fr);
  align-items: baseline;
  padding: 17px 0; border-bottom: 1px solid var(--line);
}
.process__n { font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--accent-text); }
.process b { font-size: 16px; font-weight: 700; line-height: 1.35; }
.prodshort__action { margin: 26px 0 0; }
@media (max-width: 900px) {
  .prodshort { grid-template-columns: 1fr; gap: 22px; }
  .prodshort__photo { min-height: 0; aspect-ratio: 16 / 9; }
}

/* ===========================================================================
   «Куда выбираете стол»: карточки с фотографиями.
   Раскладка снята с живого сайта, запись rec2280624721: три карточки 376x200
   в первом ряду и две 500x250 во втором, шаг 14, радиус 15, подпись белая
   14/500 капителью в левом верхнем углу.
   =========================================================================== */

.segrow { display: grid; gap: 14px; margin-top: 28px; }
.segrow--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.segrow--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.segcard {
  position: relative; display: block; overflow: hidden;
  border-radius: 15px; background: #1e1e1e; color: #fff;
  aspect-ratio: 376 / 200;
}
.segrow--two .segcard { aspect-ratio: 500 / 250; }
.segcard img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.segcard:hover img { transform: scale(1.04); }
/* Затемнение снизу: описание белым по светлому сукну иначе не читается. */
.segcard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 34%, rgba(0,0,0,.72) 100%); }

.segcard__label {
  position: absolute; left: 16px; top: 16px; z-index: 1;
  padding: 8px 16px; border-radius: 999px;
  background: rgba(255, 255, 255, .22); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: #fff; font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: .02em;
}
.segcard__foot { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 1; display: flex; align-items: flex-end; gap: 16px; }
.segcard__text { flex: 1; font-size: 15px; line-height: 1.32; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
/* Стрелка нарисована рамкой: отдельный файл ради одной галочки не нужен. */
.segcard__go { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; background: #fff; transition: background .2s; }
.segcard__go::before { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -6px; border: 2px solid var(--accent); border-left: 0; border-bottom: 0; transform: rotate(45deg); transition: border-color .2s; }
.segcard:hover .segcard__go { background: var(--accent); }
.segcard:hover .segcard__go::before { border-color: #fff; }

@media (max-width: 860px) {
  .segrow--three, .segrow--two { grid-template-columns: 1fr; }
  .segcard, .segrow--two .segcard { aspect-ratio: 16 / 9; }
  .segcard__text { font-size: 14px; }
}

/* Услуги. Снято с живого сайта, запись rec2280629691: карточка 560x300,
   белая, радиус 20, слева текст, справа фотография на 280 с закруглением
   только по правому краю. Две в ряд, пятая по центру. */
/* ---------- услуги ----------
   Пять карточек в ряд на тёмном. Раньше это были широкие полосы «текст
   слева, фотография справа», и пять полос подряд читались как пять
   отдельных блоков, а не как один перечень.

   Главное здесь снимок: на всех пяти услугах есть что показать, а
   объяснять словами дольше, чем показать. Подпись лежит поверх кадра на
   затемнении снизу, поэтому читается на любом снимке, и светлом, и тёмном. */
.tag {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.services__head { margin-bottom: 26px; }

.services { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.service {
  position: relative;
  display: block;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: #1b1b1b;
  color: #fff;
}
.service__img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Затемнение снизу, а не сплошная плашка: плашка съедает кадр, а градиент
   гасит только ту часть, на которой лежит текст. */
.service__text {
  position: absolute;
  inset: auto 0 0 0;
  padding: 44px 16px 16px;
  background: linear-gradient(to top, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .55) 45%, rgba(0, 0, 0, 0) 100%);
  color: #fff;
}
.service__title { display: block; margin: 0 0 4px; font-size: 16px; font-weight: 700; line-height: 1.2; }
/* Описанию отводится ровно две строки, даже когда текст занимает одну. Текст
   прижат к низу карточки, и у коротких описаний заголовок вставал выше, чем у
   соседей: ряд из пяти карточек читался ступеньками. */
.service__desc {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  margin: 0; min-height: 2.7em; font-size: 12px; line-height: 1.35; color: rgba(255, 255, 255, .78);
}
/* Карточка сценария это ссылка, значок увеличения ей ни к чему, но наведение
   должно быть заметно: снимок чуть приближается. */
a.service img { transition: transform .35s ease; }
a.service:hover img { transform: scale(1.04); }

/* ===========================================================================
   Поля по краям. Ширина содержимого 1440 при окне около 1440 оставляла всего
   24 пикселя до края, и текст с карточками почти прилипал к рамке окна.
   Отступ увеличен до 48, на узких экранах остаётся 20, иначе съедается сама
   колонка с текстом.
   =========================================================================== */
.wrap { padding-left: 48px; padding-right: 48px; }
.site-head .wrap,
.megamenu__in { padding-left: 48px; padding-right: 48px; }
.hero__in { padding-left: 48px; padding-right: 48px; }

@media (max-width: 700px) {
  .wrap,
  .site-head .wrap,
  .megamenu__in,
  .hero__in { padding-left: 20px; padding-right: 20px; }
}

/* ===========================================================================
   Ролик и гарантия. Снято с живого сайта: записи rec2194237391 и
   rec2314793291.
   =========================================================================== */

.video__head { margin-bottom: 26px; }
.video__head .accent { color: var(--accent-text); }
.video { margin-top: 32px; }
/* Коробка ролика уже задана выше: у .video соотношение 16:9, а само видео
   позиционировано абсолютно. Поэтому рамка должна растянуться по ней, иначе
   её высота равна нулю, и кнопка уезжает за верхний край и обрезается. */
.video__frame { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; background: #000; }
/* Кнопка: зелёный кружок 60 в светло-зелёном ореоле 100, как на живом. */
/* Только зелёный кружок, без светлого ореола вокруг: на кадре он читался как
   вторая обводка и мутил картинку. */
.video__play {
  position: absolute; z-index: 2; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px;
  display: flex; align-items: center; justify-content: center;
  /* Своё padding: у кнопки браузерное по умолчанию 1px 6px, а с
     box-sizing: border-box оно съедает 12 пикселей ширины у содержимого.
     Кружок внутри ровно во всю кнопку, поэтому он сжимался в овал. */
  border: 0; padding: 0; border-radius: 50%; background: none; cursor: pointer;
  transition: transform .2s ease;
}
.video__play:hover { transform: scale(1.06); }
.video__play span { position: relative; display: block; width: 76px; height: 76px; border-radius: 50%; background: var(--accent); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.video__play span::before { content: ""; position: absolute; left: 50%; top: 50%; margin: -9px 0 0 -6px; border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent #fff; }
.video__frame.is-playing .video__play { display: none; }
@media (prefers-reduced-motion: reduce) { .video__play { transition: none; } }

/* Гарантия по макету: фотография слева, текст справа, под текстом две плашки
   с цифрами. Пропорции 1.1 к 0.9 и разрыв 60 оттуда же. */
.warranty { display: grid; grid-template-columns: 1.1fr .9fr; gap: 60px; align-items: center; }
.warranty__photo { display: block; width: 100%; height: 100%; max-height: 560px; object-fit: cover; border-radius: var(--radius); }
.warranty__head { margin-bottom: 16px; }
.warranty__text { margin: 0; line-height: 1.7; color: var(--ink-2); }

/* Плашки держат тёмный фон и в светлой теме: цифра на контрасте читается как
   факт, а не как продолжение абзаца. */
.gcards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 30px; }
.gcard { padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); }
.gcard b { display: block; color: var(--accent-text); font-size: 24px; line-height: 1.1; }
.gcard span { display: block; margin-top: 8px; font-size: 12px; color: var(--muted); }

@media (max-width: 900px) {
  .warranty { grid-template-columns: 1fr; gap: 26px; }
  .warranty__photo { max-height: 400px; }
}

/* Команда: четыре карточки в ряд, как на живом сайте. */
.team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 32px; }
@media (max-width: 1100px) { .team { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 800px) { .team { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }

/* «О компании» — заголовок-разделитель, как на живом. */
.section--tight { padding-bottom: 0; }
.about__lead { max-width: 760px; margin: 14px auto 0; text-align: center; color: var(--ink-2); }
.section--dark .about__lead { color: #c9d2cd; }

/* Доставка и монтаж: те же карточки, что у блока «Вы заранее знаете». */
/* Доставка и монтаж одной коробкой на четыре колонки, с волосяными
   перегородками вместо промежутков: четыре отдельные карточки читались как
   четыре предложения, а это один путь от склада до собранного стола. Номер
   сверху показывает порядок, значок называет действие. */
.cycle {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line); border-radius: 20px; overflow: hidden;
  background: var(--bg-soft);
}
.cycle__item { padding: 24px 24px 28px; border-left: 1px solid var(--line); }
.cycle__item:first-child { border-left: 0; }
.cycle__n {
  display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; letter-spacing: .08em; color: var(--accent-text);
}
.cycle__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; margin: 20px 0 14px;
  border-radius: 12px; background: rgba(0, 200, 140, .12); color: var(--accent-text);
}
.cycle__title { margin: 0 0 8px; font-size: 16px; font-weight: 700; line-height: 1.25; }
.cycle__text { margin: 0; font-size: 14px; line-height: 1.45; color: var(--muted); }
@media (max-width: 1000px) {
  .cycle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cycle__item:nth-child(odd) { border-left: 0; }
  .cycle__item:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 620px) {
  .cycle { grid-template-columns: 1fr; }
  .cycle__item { border-left: 0; }
  .cycle__item + .cycle__item { border-top: 1px solid var(--line); }
}

/* ===========================================================================
   Страница раздела: блоки, которые были голым текстом.
   =========================================================================== */

/* Полоса этапов, как на живом сайте: широкая белая плашка во всю колонку,
   крупные штриховые значки чёрным, и за каждым из-под левого верхнего угла
   выглядывает светло-зелёный кружок. Подпись жирная, под значком. */
.stagebar {
  display: flex; flex-wrap: wrap; justify-content: space-around; gap: 28px 20px;
  margin: 0; padding: 44px 40px; list-style: none;
  background: #fff; border-radius: 32px; box-shadow: 0 14px 44px rgba(0, 0, 0, .08);
}
.stagebar__item { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.stagebar__badge {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 62px; height: 62px; background: none; color: var(--ink);
}
/* Кружок именно за значком и со сдвигом: на живом он выглядывает слева
   сверху, а не обводит значок по кругу. */
.stagebar__badge::before {
  content: ""; position: absolute; left: -2px; top: -4px; width: 54px; height: 54px;
  border-radius: 50%; background: rgba(0, 200, 140, .32);
}
.stagebar__badge svg { position: relative; width: 58px; height: 58px; stroke-width: 1.2; }
.stagebar__name { font-size: 16px; font-weight: 700; }
@media (max-width: 700px) {
  .stagebar { border-radius: 24px; gap: 22px; padding: 26px 18px; }
  .stagebar__badge svg { width: 44px; height: 44px; }
  .stagebar__badge, .stagebar__badge::before { width: 48px; height: 48px; }
  .stagebar__name { font-size: 16px; }
}

/* Доставка и монтаж: текст и фотография в две колонки, у монтажа зеркально. */
.split { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.split--flip .split__text { order: 2; }
.split--flip .split__photo { order: 1; }
.split__photo img { display: block; width: 100%; height: 100%; max-height: 450px; object-fit: cover; border-radius: 20px; }
.split__list { margin: 20px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.split__list li { position: relative; padding-left: 24px; line-height: 1.45; color: var(--ink-2); }
.split__list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 20px; }
  .split--flip .split__text, .split--flip .split__photo { order: 0; }
}

/* Оплата: две карточки с иконками вместо двух абзацев. */
.pay { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 30px; }
.pay__item { background: #fff; border: 1px solid var(--line); border-radius: 15px; padding: 28px 26px; }
.pay__badge { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; margin-bottom: 16px; background: rgba(0, 200, 140, .14); color: var(--accent-text); }
.pay__title { margin: 0 0 8px; font-size: 20px; font-weight: 700; }
.pay__text { margin: 0; color: var(--ink-2); line-height: 1.45; }
@media (max-width: 700px) { .pay { grid-template-columns: 1fr; gap: 14px; } }

/* Материалы: карточки с плашками значений, чтобы блок не повторял таблицу
   размеров помещений, которая стоит прямо над ним. */
.materials { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.material { background: #f7f7f7; border: 1px solid #eaeaea; border-radius: 15px; padding: 18px 20px; }
.material__name { margin: 0 0 12px; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.material__values { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
/* Высота набирается полями, а не задаётся числом: значение вроде «массив
   дерева с HPL» на телефоне встаёт в две строки, и в таблетке фиксированной
   высоты текст вылезал за край. Скругление меньше круглого: двухстрочная
   таблетка выглядит сломанной, а прямоугольник со скруглением нет. Фон
   переменной, иначе на тёмной теме белая плашка со светлым текстом. */
.material__chip { display: inline-flex; align-items: center; min-height: 30px; padding: 5px 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 14px; font-size: 14px; line-height: 1.3; }

/* Консультант в карточке заявки на странице раздела. */
.leadcard__expert { display: flex; align-items: center; gap: 14px; margin-top: 26px; font-size: 14px; line-height: 1.35; color: #fff; }
.leadcard__expert img { flex: none; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: top center; }

/* ===========================================================================
   Черновые варианты главной. Всё здесь действует только на /preview/*,
   основная страница не меняется.
   =========================================================================== */

.vbar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px;
  padding: 10px 24px; background: #101010; color: #fff; font-size: 13px;
}
.vbar__label { color: #8a8a8a; }
.vbar__link { color: #ebebeb; padding: 4px 12px; border-radius: 999px; border: 1px solid #2e2e2e; }
.vbar__link:hover { color: #fff; border-color: #5a5a5a; }
.vbar__link.is-active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* Первый экран в трёх размерах. */
.hero--compact .hero__in { padding-top: 64px; padding-bottom: 68px; }
.hero--compact .hero__title { font-size: clamp(32px, 4.2vw, 44px); }
.hero--full .hero__in { min-height: calc(100vh - 80px); display: flex; flex-direction: column; justify-content: center; padding-top: 40px; padding-bottom: 40px; }
.hero--full .hero__title { font-size: clamp(32px, 6vw, 60px); max-width: 18ch; }
.hero--full .hero__lead { font-size: clamp(17px, 1.8vw, 21px); }

/* Вариант «Фабрика»: крупнее заголовки и больше воздуха между блоками,
   витрина в нём не главное. */
.v-factory .section { padding-top: 76px; padding-bottom: 76px; }
.v-factory .h2 { font-size: clamp(28px, 3.4vw, 46px); }
.v-factory .reasons { gap: 24px; }

/* Вариант «Витрина»: плотнее, потому что человек пришёл смотреть товар. */
.v-shop .section { padding-top: 48px; padding-bottom: 48px; }
.v-shop #catalog { padding-top: 34px; }

/* Вариант «Подбор»: шаги подряд, между ними меньше расстояние. */
.v-guide #pick { padding-top: 40px; }
.v-guide .section--tight { padding-bottom: 0; }
.vbar__note { color: #8a8a8a; margin-left: auto; }
@media (max-width: 800px) { .vbar__note { display: none; } }

/* Переключатель темы: солнце на светлой, луна на тёмной. */
.iconbtn--theme .iconbtn__moon { display: none; }
[data-theme="dark"] .iconbtn--theme .iconbtn__sun { display: none; }
[data-theme="dark"] .iconbtn--theme .iconbtn__moon { display: inline-flex; }
.iconbtn--theme span { display: inline-flex; }

/* Плавная прокрутка по ссылкам внутри страницы. scroll-padding-top равен
   высоте шапки: без него якорь встаёт вплотную к верху, и заголовок раздела
   прячется под прилипшей шапкой. */
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ===========================================================================
   Каталог: три набора доводов подряд перестали быть близнецами.

   «Как выбрать», «Зачем у производителя» и «Вы заранее знаете» шли одной
   и той же шахматкой из шести карточек. Три одинаковые сетки подряд читаются
   как один бесконечный блок, и взгляду не за что зацепиться. Карточки
   остались только у третьего; первый стал нумерованным списком, второй
   развернулся в две колонки.
   =========================================================================== */

/* Список шагов: крупный номер зелёным, строки через волосяную линию, без
   плашек. Цвета берутся переменными, поэтому тёмная тема ничего не ломает. */
.guide { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 72px; }
.guide__item { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 18px; align-items: start; padding: 26px 0; border-bottom: 1px solid var(--line); }
.guide__n { font-size: 32px; font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: var(--accent-text); }
.guide__title { margin: 0 0 8px; font-size: 20px; font-weight: 700; line-height: 1.25; color: var(--ink); }
.guide__text { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.section__action--left { text-align: left; }

@media (max-width: 900px) {
  .guide { grid-template-columns: 1fr; }
  .guide__item { padding: 20px 0; grid-template-columns: 46px minmax(0, 1fr); gap: 14px; }
  .guide__n { font-size: 24px; }
  .guide__title { font-size: 20px; }
}

/* Доводы о производителе: слева тёмная плашка с выводом и кнопкой, справа
   строки с галочками. Плашка задаёт свой фон, значит задаёт и свой текст:
   иначе тёмная тема подставит светлый и подпись пропадёт. */
.factory { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 56px; align-items: start; }
.factory__aside { position: sticky; top: calc(var(--head-h) + 24px); background: #12211a; color: #fff; border-radius: 26px; padding: 32px; }
.factory__lead { margin: 0 0 26px; font-size: 20px; line-height: 1.5; color: #cfd8d3; }
.factory__list { list-style: none; margin: 0; padding: 0; display: grid; }
.factoryitem { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 18px; align-items: start; padding: 22px 0; border-bottom: 1px solid var(--line); }
.factoryitem:first-child { padding-top: 0; }
.factoryitem:last-child { border-bottom: 0; }
.factoryitem__tick { width: 38px; height: 38px; border-radius: 50%; background: rgba(0, 200, 140, .16); color: var(--accent-text); display: inline-flex; align-items: center; justify-content: center; }
.factoryitem__title { margin: 0 0 6px; font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--ink); }
.factoryitem__text { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ink-2); }

@media (max-width: 1000px) {
  .factory { grid-template-columns: 1fr; gap: 28px; }
  .factory__aside { position: static; padding: 26px; }
}

/* Зелёное слово в обычном заголовке. Раньше цвет доставался только тем
   заголовкам, у которых был свой класс. */
.h2 .accent, .h1 .accent { color: var(--accent-text); }

/* Сердце на карточке. Белый кружок на белой фотографии товара пропадал
   целиком, а на тёмной теме значок брал светлый цвет темы и исчезал даже на
   кружке. Кружок белый на обеих темах, потому что лежит на фотографии, и
   значок с обводкой к нему прибит тёмным. */
.card__fav { border: 1px solid rgba(0, 0, 0, .28); background: rgba(255, 255, 255, .96); color: #1e1e1e; box-shadow: 0 2px 10px rgba(0, 0, 0, .18); }
.card__fav svg { stroke-width: 2; }
.card__fav:hover { color: var(--accent-text); border-color: var(--accent-text); }
.card__fav.is-active { color: #de3032; border-color: #de3032; }

/* Фильтр цены в боковой колонке: четыре диапазона галочками и два поля под
   ними. Поля в одном ряду обязаны быть одной высоты, поэтому высота задана
   числом, а не отступами: у input с type=number своя внутренняя коробка, и
   одинаковый padding её не выравнивает. */
.facet--price { padding-bottom: 4px; }
.facet__price { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; margin-top: 6px; }
.facet__price .field__input { box-sizing: border-box; height: 40px; padding: 0 12px; font: inherit; font-size: 15px; line-height: 1.2; text-align: left; }
.facet__dash { color: var(--muted); }

/* Стрелки-крутилки съедают половину узкого поля и ничего не дают: числа
   набирают с клавиатуры. */
.facet__price input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.facet__price input[type="number"]::-webkit-outer-spin-button,
.facet__price input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Выделенный раздел в списке: скругление считается от панели, а не берётся
   числом. Панель скруглена на --radius и держит поле в 10 пикселей, значит
   углу плашки внутри полагается ровно на эти 10 меньше, иначе дуги идут не
   параллельно и это видно. */
.sections__item { border-radius: calc(var(--radius) - 10px); }

/* Группы фильтров сворачиваются. Стрелка рисуется своя: стандартный
   треугольник у <summary> в разных браузерах разный и сбивает отбивку. */
.facet > summary.facet__title {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  cursor: pointer; list-style: none; padding: 2px 0;
}
.facet > summary.facet__title::-webkit-details-marker { display: none; }
.facet > summary.facet__title::after {
  content: ''; width: 8px; height: 8px; flex: 0 0 auto; margin-right: 2px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .15s;
}
.facet[open] > summary.facet__title::after { transform: rotate(-135deg) translate(-2px, -2px); }
.facet > summary.facet__title:hover { color: var(--ink); }

/* Фотография товара крупно. Значок лупы лежит в углу снимка, а не под ним:
   под снимком его не видно, а на снимке он объясняет, что по нему можно
   нажать. Кружок белый на обеих темах, он лежит на фотографии. */
.product__stage { position: relative; }
#product-photo { cursor: zoom-in; }
.product__zoom {
  position: absolute; right: 14px; bottom: 14px; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(0, 0, 0, .28); background: rgba(255, 255, 255, .96); color: #1e1e1e;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}
.product__zoom:hover { color: var(--accent-text); border-color: var(--accent-text); }

/* Окно со снимком. Цвета заданы своими числами, а не переменными темы: это
   не часть страницы, а затемнение поверх неё, и на светлой теме оно тоже
   обязано остаться тёмным. */
.lightbox {
  position: fixed; inset: 0; z-index: 90;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  gap: 16px; padding: 48px; background: #0b0d0c;
}
.lightbox[hidden] { display: none; }
.lightbox__img {
  grid-column: 2; justify-self: center;
  max-width: 100%; max-height: calc(100vh - 140px);
  object-fit: contain; border-radius: 18px; background: #fff;
}
/* Кнопки залиты своим цветом, а не полупрозрачным белым: на телефоне они
   ложатся поверх самого снимка, а он у большинства товаров белый, и
   прозрачная кнопка на нём пропадала. */
.lightbox__close, .lightbox__nav {
  width: 48px; height: 48px; border-radius: 50%; cursor: pointer; z-index: 2;
  border: 1px solid rgba(255, 255, 255, .28); background: #1b1f1d; color: #fff;
  font-size: 20px; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
}
.lightbox__close:hover, .lightbox__nav:hover { background: #2a302c; }
.lightbox__close { position: absolute; top: 24px; right: 24px; }
.lightbox__nav--prev { grid-column: 1; }
.lightbox__nav--next { grid-column: 3; }
.lightbox__count {
  position: absolute; left: 0; right: 0; bottom: 24px; margin: 0;
  text-align: center; color: rgba(255, 255, 255, .7); font-size: 14px;
}

/* На телефоне стрелки уходят поверх снимка. В колонках они съедали половину
   ширины, и фотография открывалась мельче, чем была на странице. */
@media (max-width: 700px) {
  .lightbox { grid-template-columns: minmax(0, 1fr); padding: 16px; gap: 8px; }
  .lightbox__close, .lightbox__nav { width: 40px; height: 40px; }
  .lightbox__close { top: 12px; right: 12px; }
  .lightbox__img { grid-column: 1; max-height: calc(100vh - 120px); }
  .lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); }
  .lightbox__nav--prev { left: 10px; }
  .lightbox__nav--next { right: 10px; }
}

/* Карточки в ряду: цена и кнопки на одной линии.

   Раньше они плыли: названия у столов разной длины, от двух строк до пяти,
   и всё, что ниже, съезжало вслед за ними. Ряд выглядел неровным, хотя сами
   карточки одной высоты.

   Лечится не подгонкой отступов, а одинаковой высотой верхней части: имя
   занимает три строки, характеристики две, независимо от того, сколько в них
   текста. Длинное обрезается, полное имя есть на странице товара. Тело
   карточки при этом тянется на всю высоту, поэтому кнопки прибиты к низу. */
.card__body { flex: 1 1 auto; }
.card__title {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow: hidden; min-height: calc(3 * 1.35em);
}
.card__specs {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; min-height: calc(2 * 1.4em);
}
.card__prices { margin-top: auto; }
.card__actions { margin-top: 0; }

/* Ряд из одной карточки растягивать не за чем, и на телефоне место дороже
   ровных линий. */
@media (max-width: 700px) {
  .card__title, .card__specs { min-height: 0; }
}

/* Тот же ряд, но подсеткой: строки карточки берутся у общей сетки, поэтому
   имя, характеристики, цена и кнопки встают на одну линию сами, по самой
   высокой карточке ИМЕННО ЭТОГО ряда. Запас в три строки на имя и две на
   характеристики при этом не нужен: в ряду, где характеристик нет ни у кого,
   строка схлопывается в ноль, и пустоты под именем не остаётся.

   Строки расставлены поимённо, а не потоком: у части товаров нет ни
   характеристик, ни строки наличия, и при автоматической укладке цена
   заняла бы их место, а ряд снова разъехался бы.

   Ряды сетки отбиваются не gap, а полем снизу у карточки: gap лёг бы и
   между строками внутри карточки тоже. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 701px) {
    .grid--products { row-gap: 6px; }
    .grid--products .card {
      grid-row: span 6; display: grid; grid-template-rows: subgrid;
      margin-bottom: 18px;
    }
    .grid--products .card__media { grid-row: 1; }
    .grid--products .card__body {
      grid-row: 2 / span 5; display: grid; grid-template-rows: subgrid;
      padding-top: 10px;
    }
    .grid--products .card__title { grid-row: 1; min-height: 0; }
    .grid--products .card__specs { grid-row: 2; min-height: 0; }
    .grid--products .card__prices { grid-row: 3; margin-top: 0; }
    .grid--products .card__status { grid-row: 4; }
    .grid--products .card__actions { grid-row: 5; align-self: end; padding-top: 4px; }
  }
}

/* ---------- кнопка «Ошибка» ---------- */

/* Маленькая и в углу: она нужна редко, и перекрывать ею содержимое нельзя.
   Цвета свои, не из темы: кнопка висит поверх любой страницы, в том числе
   поверх тёмных блоков, и должна читаться на обеих темах одинаково. */
.report {
  position: fixed; right: 16px; bottom: 16px; z-index: 60;
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 13px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .18); background: rgba(20, 23, 21, .82); color: #e8eae8;
  font: 500 14px/1 var(--font); backdrop-filter: blur(6px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
  transition: background .15s, color .15s;
}
.report:hover { background: #151715; color: #fff; }
.report svg { flex: 0 0 auto; }

.reportbox {
  position: fixed; inset: 0; z-index: 95;
  display: flex; align-items: flex-end; justify-content: flex-end; padding: 16px;
  background: rgba(8, 10, 9, .55);
}
.reportbox[hidden] { display: none; }
.reportbox__card {
  position: relative; width: min(380px, 100%); display: grid; gap: 12px;
  background: #fff; color: #151515; border-radius: 20px; padding: 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}
[data-theme="dark"] .reportbox__card { background: #171a18; color: #f2f3f2; }
.reportbox__close {
  position: absolute; right: 12px; top: 12px; width: 30px; height: 30px; padding: 0;
  border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; font-size: 15px;
}
.reportbox__title { margin: 0; font-size: 19px; font-weight: 700; }
.reportbox__lead { margin: 0; font-size: 14px; line-height: 1.45; color: var(--muted); }
.reportbox__text { min-height: 96px; padding: 10px 12px; resize: vertical; }
.reportbox__note { margin: 0; font-size: 12px; color: var(--muted); }
.reportbox__actions { display: flex; }
.reportbox__actions .btn { width: 100%; height: 44px; }
.reportbox__done { margin: 0; font-size: 14px; color: var(--accent-text); }

/* На телефоне карточка занимает низ экрана целиком: тянуться пальцем к
   узкому окошку в углу неудобно. */
@media (max-width: 600px) {
  .report { right: 12px; bottom: 12px; height: 32px; padding: 0 11px; font-size: 12px; }
  .reportbox { padding: 0; align-items: flex-end; }
  .reportbox__card { width: 100%; border-radius: 20px 20px 0 0; }
}

/* Кнопка фильтра с числом длиннее обычной: ей нужна вся ширина панели, иначе
   на «Показать 12 товаров» она расползается и ломает ряд. */
.facets__actions [data-facets-apply] { flex: 1 1 auto; justify-content: center; }
.facets__actions [data-facets-apply][disabled] { opacity: .5; cursor: default; }

/* ===========================================================================
   Телефон. Правится по живой съёмке на iPhone 15 Pro Max.

   Главное правило: до всего, что нажимают, должен дотягиваться большой палец
   правой руки, а он живёт в нижней правой четверти экрана. Поэтому меню
   прижато вправо, кнопки растянуты во всю ширину, а фильтры уехали в
   отдельный экран с кнопкой внизу.
   =========================================================================== */

@media (max-width: 760px) {
  /* Первый экран: фотографию было не разглядеть. Затемнение шло слева
     направо, под широкий экран, где текст занимает левую половину. На
     телефоне текст во всю ширину, и тёмная половина накрывала кадр целиком.
     Теперь затемнение идёт сверху вниз: под заголовком густое, ниже
     отпускает, и зал виден. */
  .hero {
    background-image:
      linear-gradient(180deg, rgba(10, 10, 10, .92) 0%, rgba(10, 10, 10, .72) 38%, rgba(10, 10, 10, .5) 70%, rgba(10, 10, 10, .78) 100%),
      var(--hero-photo);
    background-position: 62% center;
  }

  /* Меню под правую руку. Пункты прижаты к правому краю: слева до них
     тянуться через весь экран. */
  .site-nav { text-align: right; padding: 4px 20px 16px; }
  .site-nav a { padding: 15px 0; font-size: 16px; }
  .site-nav__item { display: block; }

  /* Кнопки во всю ширину: так до них дотягиваешься откуда угодно, и не надо
     целиться. */
  .hero__actions { flex-direction: column; gap: 10px; }
  .hero__actions .btn,
  .section__action .btn,
  .factory__aside .btn { width: 100%; justify-content: center; }
  .section__action, .section__action--left { text-align: center; }

  /* Две карточки в ряд вместо одной: экран перестал быть лентой, за один
     взгляд видно четыре товара вместо двух. */
  .grid--products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .grid--products .card__body { padding: 10px; gap: 5px; }
  .grid--products .card__title { font-size: 14px; line-height: 1.3; min-height: calc(3 * 1.3em); }
  .grid--products .card__specs { font-size: 12px; min-height: calc(2 * 1.35em); }
  .grid--products .card__price { font-size: 16px; }
  .grid--products .card__badge { font-size: 12px; padding: 3px 8px; }
  /* Метка «наше производство» в два столбца еле помещается: на карточке в
     163 точки строка с галочкой занимает 158 при обычных полях и вылезала
     за снимок. Режем поля и разрядку, а не кегль: кегль тут общий со всеми
     подписями, а поля свои. */
  .grid--products .card__marks { left: 6px; right: 6px; }
  .grid--products .card__own { padding: 3px 7px 3px 5px; gap: 4px; letter-spacing: 0; max-width: 100%; }
  .grid--products .card__own span { overflow: hidden; text-overflow: ellipsis; }
  .grid--products .card__fav { width: 30px; height: 30px; right: 6px; top: 6px; }
  .grid--products .card__fav svg { width: 15px; height: 15px; }
  /* Кнопки в карточке в столбик: рядом они на 160 пикселях не помещаются и
     переносятся вкривь. */
  .grid--products .card__actions { flex-direction: column; gap: 6px; padding-top: 8px; }
  .grid--products .card__actions .btn { width: 100%; height: 34px; padding: 0 8px; font-size: 12px; }

  /* Значок «Ошибка» без подписи: на телефоне он перекрывал то кнопку
     «В корзину», то поиск. */
  .report { padding: 0; width: 38px; height: 38px; justify-content: center; }
  .report span { display: none; }
}

/* Фильтры отдельным экраном. Раньше они разворачивались прямо в странице и
   занимали её целиком: чтобы дойти до товаров, надо было пролистать все
   галочки. Теперь это лист поверх страницы с кнопкой внизу, под пальцем. */
@media (max-width: 1000px) {
  .facets-box[open] {
    position: fixed; inset: 0; z-index: 80; margin: 0; border: 0; border-radius: 0;
    background: var(--bg); display: flex; flex-direction: column;
  }
  .facets-box[open] .facets-box__toggle {
    flex: 0 0 auto; padding: 16px 20px; font-size: 20px; font-weight: 600;
    border-bottom: 1px solid var(--line);
  }
  .facets-box[open] .facets-box__toggle::after { content: '✕'; font-size: 16px; }
  .facets-box[open] .facets {
    flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 16px 20px 96px; border: 0; gap: 14px;
  }
  .facets-box[open] .facets__actions {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 2;
    display: flex; align-items: center; gap: 14px;
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
    background: var(--bg); border-top: 1px solid var(--line);
  }
  .facets-box[open] .facets__actions .btn { flex: 1 1 auto; height: 50px; justify-content: center; }
  /* Пока лист открыт, страница под ним не должна уезжать. */
  body.has-sheet { overflow: hidden; }
}


/* Остальные плитки тоже по две в ряд. Один столбец на телефоне растягивает
   страницу в ленту: до формы заявки внизу доходит тот, кому очень надо.
   Плитка ужимается вместе с рядом, текст вслед за ней. */
@media (max-width: 640px) {
  /* По две в ряд идут только те плитки, у которых внутри нет ничего, что
     ломается от сужения. Шаги с номерами, этапы производства и карточки
     «куда выбираете стол» остаются по одной: у первых номер налезал на
     текст, у последних подпись перекрывала фотографию. */
  .grid--cats,
  .pay { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

  /* Материалы: два столбца, но первая карточка занимает две строки. Список
     игрового поля из пяти сланцев вдвое выше соседей, и в обычной сетке
     рядом с ним зияла пустота. Здесь он держит высоту двух правых карточек,
     и низ второй правой сходится с его низом. Дальше строки идут парами и
     тоже выравниваются по нижней границе. */
  .materials { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .materials > .material:first-child { grid-row: span 2; }
  .material { margin: 0; }

  .cat__title { font-size: 14px; }
  .cat__count { font-size: 12px; }

  .pay__item { padding: 16px 14px; }
  .pay__badge { width: 42px; height: 42px; }
  .pay__title { font-size: 16px; }
  .pay__text { font-size: 12px; line-height: 1.4; }

  .material { padding: 14px 12px; }
  .material__name { font-size: 14px; }
  .material__chip { font-size: 12px; }

  /* Полоса этапов доставки: пять значков в ряд на 430 пикселях не читаются,
     двумя рядами по три помещаются. */
  .stagebar { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 16px 12px; }
  .stagebar__badge { width: 46px; height: 46px; }
  .stagebar__name { font-size: 12px; }

  /* Таблица размеров помещений шире экрана по сути, ужать её нельзя: семь
     колонок цифр. Кегль уменьшен, чтобы вбок листать пришлось меньше. */
  .sizes { min-width: 620px; font-size: 14px; }
  .sizes th, .sizes td { padding: 8px 10px; }
}

/* Карточка товара на телефоне. */
@media (max-width: 640px) {
  /* Миниатюры лентой вбок, а не сеткой. У столов их по шестнадцать, сеткой
     это четыре ряда, и цена уезжала за нижний край экрана. */
  .product__thumbs {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin: 10px -20px 0; padding: 0 20px 2px;
  }
  .product__thumbs::-webkit-scrollbar { display: none; }
  .thumb { flex: 0 0 64px; width: 64px; }

  /* Кнопки покупки в столбик во всю ширину: в ряд они переносятся по одной и
     выстраиваются лесенкой. Сердце при этом не уходит на свою строку, где
     стояло сиротой: оно встаёт справа от «купить в 1 клик», в той же строке.
     Сетка вместо колонки как раз ради этой пары. */
  .product__buy {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px; margin: 18px 0 8px;
  }
  .product__buy .btn { width: 100%; justify-content: center; }
  .product__buy .btn--buy { grid-column: 1 / -1; }
  .product__contacts { display: flex; flex-wrap: wrap; gap: 8px; }
  .product__contacts .btn { flex: 1 1 calc(50% - 4px); justify-content: center; }
}

/* ===========================================================================
   Телефон, второй заход. Правится по съёмке с живого телефона.
   =========================================================================== */

@media (max-width: 640px) {
  /* Проекты: компактной сеткой по две, без вкладок и без прокручивающейся
     полосы. Вкладки прятали пять проектов из шести, а полоса пилюль сама
     просила прокрутки. Здесь видно четыре за один взгляд. */
  .projects { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .project--v .project__img,
  .project--h .project__img { aspect-ratio: 4 / 3; }
  .project__body { padding: 10px 12px 12px; }
  .project__city { font-size: 12px; margin-bottom: 3px; }
  .project__title { font-size: 14px; line-height: 1.25; margin-bottom: 0; }
  /* Список работ по каждому проекту на плитке не помещается: он длиннее
     самой плитки. Остаётся город, название и фотография. */
  .project__facts { display: none; }

  /* Команда: пятый человек в последнем ряду стоит один у левого края и ряд
     выглядит обрубленным. Ставим его посередине. */
  .team .person:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 8px); }

  /* Воздуха между блоками было больше, чем содержимого: на телефоне экран
     дорогой, и пустота съедала по половине каждого. */
  .section { padding-top: 28px; padding-bottom: 28px; }
  .section--tight { padding-bottom: 0; }
  .h2 { margin-bottom: 16px; }
  .hero__tiles { margin-top: 26px; gap: 14px; }
  .hero__in { padding-top: 40px; padding-bottom: 40px; }
  .section--region { padding: 26px 0; }
  .about__lead, .prose--intro { margin-bottom: 18px; }
  .reasons, .services, .steps, .materials, .team, .grid { margin-top: 18px; }
  .section__action { margin-top: 20px; }
  .segrow { margin-top: 16px; gap: 10px; }
}

@media (max-width: 640px) {

  /* Партнёры: лента едет сама, как и была, но её можно отмотать пальцем.
     Пока палец на ленте, бег останавливается, иначе логотипы уезжают
     из-под руки. Плитки вдвое меньше. */
  .marquee {
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin-top: 18px;
  }
  .marquee::-webkit-scrollbar { display: none; }
  .marquee__group { gap: 10px; padding-right: 10px; }
  .marquee__item { width: 110px; height: 58px; }
}

/* Строка над карточками: фильтры, сортировка, поиск. На широком экране
   фильтры живут в боковой колонке, и эта строка содержит только поиск. */
.shop__tools { display: contents; }

@media (max-width: 1000px) {
  /* Строка над карточками собрана сеткой, а не переносом: при переносе поиск
     уезжал на свою строку, «Найти» вставало посередине третьей, и ряд
     рассыпался. Две строки, четыре места, всё предсказуемо:

       [ поиск по каталогу ][ Найти ]
       [ Фильтры          ][ По умолчанию ] */
  .shop__tools {
    display: grid; grid-template-columns: minmax(0, 1fr) 150px;
    gap: 8px; margin-bottom: 14px; align-items: center;
  }
  /* Форма поиска растворяется в этой же сетке: коробка исчезает, поля
     становятся её ячейками, а отправка формы работает как работала. */
  .shop__bar { display: contents; }
  .shop__search { grid-row: 1; grid-column: 1; }
  .shop__bar .btn { grid-row: 1; grid-column: 2; }
  .shop__tools-slot { grid-row: 2; grid-column: 1; }
  .shop__sort { grid-row: 2; grid-column: 2; }
  .shop__sort .field__input { width: 100%; font-size: 14px; padding: 0 28px 0 12px; }
  .shop__tools .facets-box__toggle { width: 100%; justify-content: space-between; }
  .shop__bar .btn { width: 100%; justify-content: center; }
  .shop__tools .facets-box { border: 0; }

  /* Кнопка фильтров: та же пилюля, что и чипсы разделов, со значком ползунков
     вместо плюса. */
  .shop__tools .facets-box__toggle {
    height: 40px; padding: 0 16px; border-radius: 999px; font-size: 14px; font-weight: 500;
    border: 1px solid var(--line); background: var(--bg-soft); color: var(--ink);
    display: inline-flex; align-items: center; gap: 8px;
  }
  .shop__tools .facets-box__toggle::after {
    content: ''; width: 15px; height: 11px; flex: 0 0 auto; font-size: 0;
    background:
      linear-gradient(var(--ink), var(--ink)) 0 1px / 15px 1.5px no-repeat,
      linear-gradient(var(--ink), var(--ink)) 0 9px / 15px 1.5px no-repeat,
      radial-gradient(circle 2.5px at 10px 2px, var(--ink) 99%, transparent 0),
      radial-gradient(circle 2.5px at 5px 10px, var(--ink) 99%, transparent 0);
  }
  .shop__bar .field__input { height: 40px; }
  .shop__bar .btn { height: 40px; }
  .shop__count { margin: 0 0 12px; }
}

/* Лист фильтров раскрывается на весь экран, поэтому строку над карточками он
   не должен растягивать. */
@media (max-width: 1000px) {
  .shop__tools .facets-box[open] { position: fixed; inset: 0; }
  .shop__tools .facets-box[open] .facets-box__toggle {
    height: auto; border-radius: 0; border: 0; border-bottom: 1px solid var(--line);
    background: var(--bg); justify-content: space-between;
  }
  .shop__tools .facets-box[open] .facets-box__toggle::after {
    content: '✕'; font-size: 16px; width: auto; height: auto; background: none;
  }
}

@media (max-width: 640px) {
  /* Подвал занимал полтора экрана, из них треть приходилась на логотип в
     двести пикселей. Логотип вдвое меньше, воздух вычищен: в подвал приходят
     за телефоном и адресом, а не любоваться.

     Правила про две колонки в меню и про размер значков соцсетей убраны: они
     остались от прежнего подвала, где ссылки были иконками 38 на 38. В новом
     это обычные слова, и от ширины в 38 точек «Telegram» налезал на
     «ВКонтакте», а меню раскладывалось в две колонки поперёк своих разделов. */
  .site-foot__in { gap: 18px; }
  .site-foot__logo { width: 116px; }
  .site-foot__col { gap: 6px; }
  .site-foot__nav a { font-size: 14px; }
  .site-foot__phone { font-size: 20px; }
  .site-foot__label { margin: 4px 0 0; }
  .site-foot__social { gap: 16px; margin-top: 8px; }
  .site-foot__legal, .site-foot__oferta { font-size: 12px; }
  /* Нижняя строка в столбик и по центру: в ряд с переносами куски
     реквизитов вставали в случайном порядке, и «ИП Быстров» оказывался над
     знаком копирайта, а не рядом. */
  .site-foot__bottom {
    flex-direction: column; align-items: center; text-align: center;
    padding-top: 12px; gap: 8px;
  }
}

@media (max-width: 640px) {
  /* Хлебные крошки жмутся к шапке: это подпись, а не блок. */
  .crumbs { margin-bottom: 12px; font-size: 12px; }
  section.wrap.section:first-of-type { padding-top: 16px; }
}

@media (max-width: 640px) {
  /* Быстрый подбор: пять полей в столбик занимали полтора экрана, между
     подписью и значением зиял провал, а стрелка уезжала к дальнему краю.
     Два поля в ряд, поля ниже, подписи мельче: вся форма видна целиком. */
  .pick { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
  .pick .field { gap: 4px; }
  .pick .field__label { font-size: 12px; }
  .pick .field__input { height: 44px; font-size: 14px; padding: 0 30px 0 12px; }
  .pick select.field__input { background-position: right 10px center; }
  /* Пятое поле и кнопка занимают ряд целиком: иначе рядом с ними остаётся
     пустая клетка. */
  .pick .field:last-of-type,
  .pick .btn { grid-column: 1 / -1; }
  .pick__note { font-size: 12px; margin-top: 8px; }
}

/* Палец останавливает бегущую строку, пока держит её. */
.marquee.is-held .marquee__track { animation-play-state: paused; }

/* Поля быстрого подбора стоят на светло-серой подложке секции, а тема красит
   поля в тот же светло-серый. Получалось, что значение и стрелка висят в
   воздухе сами по себе, и по ним не догадаться, что это один список. Поле
   белое, с волосяной обводкой: видно, где оно начинается и кончается. */
.quickpick .field__input {
  background-color: #fff;
  border: 1px solid var(--line);
}
.quickpick .field__input:focus { border-color: var(--accent-dark); outline: none; }

/* Пока витрина подменяется, она гаснет: это единственный признак, что нажатие
   принято, других на странице нет. */
.shop.is-loading { opacity: .55; transition: opacity .12s; }

/* Крошки внутри витрины. Верхние стоят под шапкой и уезжают вверх, а раздел
   переключается прямо здесь, поэтому строка повторяется над карточками. */
.crumbs--listing { margin-bottom: 12px; }

/* ---------- мозаика разделов каталога ----------
   Ровная сетка из одинаковых плиток уравнивала столы за миллион и мел за
   пятьсот рублей. Здесь столы занимают вдвое больше, подпись лежит пилюлей
   поверх фотографии, а не под ней, и плитка перестаёт быть карточкой товара
   без цены.

   Сетка на двадцать колонок: обычная плитка занимает пять, широкая десять.
   Тогда любой набор разделов ложится без дырок, пока широких чётное число. */
.cattiles { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 14px; }

.cattile {
  grid-column: span 5;
  position: relative;
  display: block;
  /* Триста, а не двести пятьдесят: узкая плитка выходит 326 на 300, почти
     квадрат, и снимок один к одному не теряет края. При 250 у киев
     обрезались оба конца, оставалось пустое сукно посередине. Широкая при
     этом 665 на 300, то есть 2,2 к 1, ровно пропорции снятых кадров. */
  height: 300px;
  border-radius: 18px;
  overflow: hidden;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  color: inherit;
  transition: transform .18s, box-shadow .18s;
}
.cattile--wide { grid-column: span 10; }
.cattile:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0, 0, 0, .12); color: inherit; }

.cattile__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cattile__img--empty { background: #ededed; }

/* Подпись читается и на светлой фотографии, и на тёмной, поэтому подложка
   светлая с размытием, а не полупрозрачный чёрный. */
/* Имя внизу слева, стрелка внизу справа, и больше на плитке ничего. Число
   товаров отсюда убрано: плитка отвечает на вопрос «что за раздел», а
   сколько там позиций, видно в боковой колонке и в фильтрах. */
.cattile__label {
  position: absolute;
  left: 14px;
  bottom: 14px;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  /* Место под стрелку в том же ряду. */
  max-width: calc(100% - 74px);
  overflow: hidden;
  text-overflow: ellipsis;
  /* Цвет числом, а не переменной: подложка пилюли белая всегда, а --ink в
     тёмной теме светлеет, и надпись пропала бы. */
  color: #151515;
}

.cattile__go {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--accent);
  color: var(--accent-dark);
  transition: background .18s, color .18s;
}
.cattile:hover .cattile__go { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

/* Размерность в заголовке таблицы размеров идёт отдельной строкой и легче
   основного слова: это уточнение, а не часть названия колонки. */
.sizes__unit { display: block; font-weight: 400; white-space: nowrap; }

/* Логотип в подвале обёрнут ссылкой: две картинки внутри должны вести себя
   как одна, иначе строчный элемент добавляет под ними отбивку. */
.site-foot__mark { display: inline-block; }

/* Метка своего производства на карточке. Зелёная и негромкая: это не акция и
   не скидка, а признак, по которому выбирают, поэтому кричать ей незачем. */
.card__own {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #0b7a58;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
}

.product__own { margin: 0 0 14px; }

/* ---------- о компании и авторы ---------- */

/* Цифры вместо слов: «с 2024 года» и «45 мм» проверяемы, а «высокое
   качество» нет, и поиску, и человеку первое весит больше. */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin: 26px 0 36px; }
.fact { display: grid; gap: 4px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-soft); }
.fact strong { font-size: 24px; letter-spacing: -0.02em; }
.fact span { font-size: 14px; color: var(--muted); }

.cols2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin: 18px 0 8px; }
.box { padding: 20px 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg-soft); }
.box h3 { margin: 0 0 12px; font-size: 20px; }

.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.ticks li { position: relative; padding-left: 24px; font-size: 14px; line-height: 1.4; }
.ticks li::before {
  content: '';
  position: absolute; left: 4px; top: 5px;
  width: 6px; height: 11px;
  border: solid var(--accent); border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.authors { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px; margin-top: 24px; }
.author { display: grid; gap: 4px; color: inherit; }
.author:hover { color: inherit; }
.author__photo { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 16px; margin-bottom: 8px; }
.author__photo--empty { background: var(--bg-soft); display: block; }
.author__name { font-weight: 600; }
.author__role { font-size: 14px; color: var(--muted); }

.author-card { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 28px; align-items: start; margin-bottom: 36px; }
.author-card__photo { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 20px; }
.author-card__role { color: var(--muted); margin: -12px 0 14px; }
.author-card__bio { font-size: 16px; line-height: 1.55; max-width: 62ch; }
.author-card__links a { margin-right: 12px; }

.authorposts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.authorposts li { padding-bottom: 10px; border-bottom: 1px solid var(--line); }

/* Подборки раздела. Внешне это те же чипсы, что и разделы, но тише: разделы
   это навигация верхнего уровня, а подборки уточнение внутри одного раздела,
   и одинаковый вид сбивал бы иерархию. */
.picks { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 26px; }
.pick {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg);
  font-size: 14px; color: var(--ink-2);
}
.pick:hover { border-color: var(--accent); color: var(--ink); }
.pick.is-active { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.pick__n { font-size: 12px; color: var(--muted); }
/* Число на выбранной таблетке: цвет фона страницы с лёгким приглушением,
   а не зашитый белый. Прозрачность держим выше 0,75, ниже пара перестаёт
   проходить порог 4,5 при кегле 12. */
.pick.is-active .pick__n { color: var(--bg); opacity: .8; }

/* Фотографии модели. Первый кадр во всю ширину, остальные парами: у столов
   первый снимок общий, а дальше идут детали борта и ног, и мельчить их
   незачем. */
.modelshots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 26px 0 32px; }
.modelshots img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; display: block; aspect-ratio: 4 / 3; }
.modelshots img:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }

/* Модели идут теми же фишками, что и подборки. Строкой текста через точку
   они читались как подпись, а не как ссылки: человек смотрит на чёрные слова
   и не догадывается, что по ним можно нажать. */
.pickrow { margin: 0 0 18px; }
.pickrow .picks { margin: 0; }
.picks__label { margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.picks--models .pick { border-style: dashed; }
.picks--models .pick:hover { border-style: solid; }

/* Вопросы справа от заголовка, как в макете: заголовок в три строки
   уравновешивает четыре вопроса, и блок перестаёт быть полосой во весь
   экран. Подпись «нажмите по вопросу» уходит под заголовок, к нему же. */
.faqgrid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 60px; align-items: start; }
.faqgrid .faq { margin: 0; max-width: none; }
.faqgrid .faq__head { margin-bottom: 14px; }
.faqgrid .faq__sub { margin: 0; text-align: left; color: var(--muted); font-size: 14px; }
@media (max-width: 900px) {
  .faqgrid { grid-template-columns: 1fr; gap: 20px; }
}

/* Два ряда по формату снимка. Вертикальные кадры стоят плитками 3 к 4,
   широкие полосой под ними: в прежней мозаике вертикальный снимок попадал в
   широкую плитку, и от стола оставалась полоса сукна. */
.projects--rows { display: grid; grid-template-columns: none; grid-auto-rows: auto; gap: 16px; }
.projects__row { display: grid; gap: 16px; }
.projects__row--tall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.projects__row--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.projects--rows .project { grid-column: auto; grid-row: auto; }
.projects--rows .project__img { height: 100%; }
.project--tall .project__img { aspect-ratio: 3 / 4; }
.project--wide .project__img { aspect-ratio: 16 / 9; }
.projects--rows .project__facts { display: grid; }
@media (max-width: 900px) {
  .projects__row--tall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .projects__row--wide { grid-template-columns: 1fr; }
}

/* ---------- правка кадра прямо на странице ---------- */
/* Показывается только под ?edit=1 и только тем, кто вошёл в админку. */
.is-editing img[src^="/media/"] { cursor: grab; outline: 1px dashed rgba(0, 200, 140, .75); outline-offset: -3px; }
.is-editing img[src^="/media/"].is-dragging { cursor: grabbing; outline-style: solid; }
.editbar {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 200;
  display: flex; align-items: center; gap: 14px;
  padding: 10px 16px; border-radius: 100px;
  background: rgba(10, 13, 11, .92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .16); color: #fff;
  font-size: 13px; box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
.editbar__hint { color: #aeb8b2; }
.editbar__msg { min-width: 96px; font-weight: 600; }
.editbar__msg.is-ok { color: var(--accent-text); }
.editbar__msg.is-bad { color: #ff8a7a; }
.editbar__exit { color: #fff; text-decoration: underline; }
@media (max-width: 760px) { .editbar__hint { display: none; } }

/* Полоса с роликом. Отступы чуть больше обычных: тёмный блок среди белых
   работает разделителем, и воздух внутри него нужен, чтобы он читался как
   отдельная часть страницы, а не как вставленная картинка. */
.section--video { padding-top: 76px; padding-bottom: 80px; }
.section--video .video {
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .45);
}

/* ---------- черновик: варианты подвала ---------- */
/* Живут на /preview/podval и на страницы сайта не попадают. */
.fvbox { margin: 0 0 56px; }
.fvbox__title { margin: 0 0 4px; font-size: 20px; font-weight: 700; }
.fvbox__note { margin: 0 0 18px; color: var(--muted); font-size: 14px; }

.fv { position: relative; }
.fv__in {
  display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, .8fr)) minmax(0, 1fr);
  gap: 32px; padding-top: 48px; padding-bottom: 36px;
}
.fv__col { display: grid; align-content: start; gap: 8px; }
.fv__label { margin: 0 0 4px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .6; }
.fv__slogan { margin: 14px 0 0; font-size: 13px; line-height: 1.5; opacity: .75; max-width: 34ch; }
.fv__nav a { display: block; font-size: 14px; }
.fv__phone { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.fv__address, .fv__hours { margin: 0; font-size: 13px; line-height: 1.45; opacity: .75; }
.fv__social { display: flex; gap: 14px; margin: 14px 0 0; font-size: 13px; }
.fv__action { margin: 16px 0 0; }
.fv__bottom {
  display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center;
  padding: 16px 0 22px; font-size: 12px; opacity: .6;
}

/* Тёмный и на снимке: текст белый, ссылки белые, разделительная линия светлая. */
/* Тёмная в обеих темах своим числом, а не через --ink: подвал на сайте
   тёмный всегда, а --ink на тёмной теме светлеет, и полоса становилась
   белой с белым текстом. */
.fv--dark, .fv--photo { background: #151515; color: #fff; }
.fv--dark a, .fv--photo a { color: #fff; }
.fv--dark .fv__bottom, .fv--photo .fv__bottom { border-top: 1px solid rgba(255, 255, 255, .14); }
.fv--light { background: var(--bg-soft); color: var(--ink); }
.fv--light .fv__bottom { border-top: 1px solid var(--line); }

/* Снимок зала во всю ширину, содержимое поверх под затемнением. */
.fv--photo {
  background-image: linear-gradient(90deg, rgba(8, 11, 9, .94) 0%, rgba(8, 11, 9, .86) 45%, rgba(8, 11, 9, .72) 100%), url('/media/footer-hall.jpg');
  background-size: cover; background-position: center;
}

/* Короткий: одна строка. */
.fv--short { background: var(--bg-soft); color: var(--ink); }
.fv__short-in {
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
  padding-top: 26px; padding-bottom: 22px;
}
.fv__short-nav { display: flex; flex-wrap: wrap; gap: 18px; font-size: 14px; margin-right: auto; }
.fv--short .fv__bottom { border-top: 1px solid var(--line); }

@media (max-width: 900px) {
  .fv__in { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .fv__short-in { gap: 16px; }
}
@media (max-width: 560px) {
  .fv__in { grid-template-columns: 1fr; }
}

/* ---------- сторис ---------- */
/* Полоса кружков между первым экраном и каталогом. Здесь живёт то, что
   меняется чаще страниц: кадр из цеха, новый цвет борта, приехавшая партия
   сукна. Ради такого не заводят статью, но показать стоит. */
.stories { background: var(--bg); }
.stories__in { padding-top: 26px; padding-bottom: 8px; }
.stories__row {
  display: flex; gap: 20px; margin: 0; padding: 4px 0 10px; list-style: none;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.stories__row::-webkit-scrollbar { display: none; }
.stories__item { flex: none; }
.story {
  display: grid; justify-items: center; gap: 8px; width: 92px;
  padding: 0; border: 0; background: none; cursor: pointer; color: inherit; font: inherit;
}
/* Кольцо рисуется фоном под вырезом: так не нужен ни второй элемент, ни
   обводка, которая на скруглении в разных браузерах ложится по-разному. */
.story__ring {
  display: block; width: 84px; height: 84px; padding: 3px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #0e9a70);
}
.story.is-seen .story__ring { background: var(--line); }
.story__cover {
  display: block; width: 100%; height: 100%; object-fit: cover;
  border-radius: 50%; border: 3px solid var(--bg); background: var(--bg-soft);
}
.story__cover--empty { display: block; }
.story__title {
  font-size: 12px; line-height: 1.25; text-align: center; color: var(--ink);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.story:hover .story__title { color: var(--accent-text); }

/* Окно просмотра. Вертикальный кадр 9:16, как в телефоне: истории снимают
   вертикально, и горизонтальное окно оставляло бы поля по бокам. */
.storyview {
  position: fixed; inset: 0; z-index: 120;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(6, 9, 7, .92);
}
.storyview[hidden] { display: none; }
.storyview__win {
  position: relative; width: min(420px, 100%); aspect-ratio: 9 / 16; max-height: 92vh;
  border-radius: 18px; overflow: hidden; background: #0d0f0e; color: #fff;
}
.storyview__stage { position: absolute; inset: 0; background: #0d0f0e; }
.storyview__stage img, .storyview__stage video { width: 100%; height: 100%; object-fit: cover; display: block; }
.storyview__stage--text { background: linear-gradient(160deg, #123a2c, #0d0f0e); }
.storyview__bars { position: absolute; z-index: 3; left: 10px; right: 10px; top: 10px; display: flex; gap: 4px; }
.storyview__bar { flex: 1 1 auto; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .28); overflow: hidden; }
.storyview__bar i { display: block; height: 100%; width: 0; background: #fff; }
.storyview__bar.is-done i { width: 100%; }
.storyview__close {
  position: absolute; z-index: 4; right: 8px; top: 20px;
  width: 38px; height: 38px; border: 0; background: none; color: #fff;
  font-size: 26px; line-height: 1; cursor: pointer;
}
.storyview__foot {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 0;
  display: grid; gap: 8px; justify-items: start; padding: 60px 18px 18px;
  background: linear-gradient(to top, rgba(0, 0, 0, .86), rgba(0, 0, 0, 0));
}
.storyview__title { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.2; }
.storyview__text { margin: 0; font-size: 14px; line-height: 1.4; color: rgba(255, 255, 255, .84); }
.storyview__link { margin-top: 4px; }
/* Половины экрана для перелистывания. Нижняя часть свободна: там лежат текст
   и кнопка, и нажатие на неё не должно листать. */
.storyview__nav {
  position: absolute; z-index: 2; top: 0; bottom: 92px; width: 40%;
  border: 0; background: none; cursor: pointer;
}
.storyview__nav--prev { left: 0; }
.storyview__nav--next { right: 0; }
@media (max-width: 640px) {
  .stories__in { padding-top: 18px; }
  .stories__row { gap: 14px; }
  .story { width: 76px; }
  .story__ring { width: 70px; height: 70px; }
  .storyview { padding: 0; }
  .storyview__win { width: 100%; height: 100%; max-height: none; aspect-ratio: auto; border-radius: 0; }
}

/* ---------- черновик: подбор квизом ---------- */
/* Стоит под обычным быстрым подбором на странице каталога, чтобы сравнить
   рядом. Выбор по картинке, а не из списка: человек, который не знает слов
   «пирамида» и «двенадцать футов», по снимку комнаты отвечает сразу. */
.quiz {
  display: grid; gap: 22px; margin-top: 20px;
  padding: 22px; border: 1px solid var(--line); border-radius: 20px; background: var(--bg-soft);
}
/* Со скриптом виден один шаг, без него все сразу: форма обычная, и отправка
   работает в любом случае. */
.quiz.is-stepped .quiz__step { display: none; }
.quiz.is-stepped .quiz__step.is-on { display: block; }
.quiz__head { display: grid; gap: 8px; }
.quiz__count { margin: 0; font-size: 12px; color: var(--muted); }
.quiz__count b { color: var(--ink); }
.quiz__progress { height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; }
.quiz__progress i { display: block; height: 100%; width: 33%; background: var(--accent); transition: width .25s ease; }
.quiz__summary { margin: 0; font-size: 13px; color: var(--muted); }
.quiz__step { border: 0; margin: 0; padding: 0; }
.quiz__legend {
  display: flex; align-items: baseline; gap: 12px; padding: 0; margin-bottom: 14px;
  font-size: 16px; font-weight: 700;
}
.quiz__n { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--accent-text); }
.quiz__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }

/* Карточка с фотографией. Отметка это рамка и подпись, а не кружок радио:
   родной кружок здесь мелок и теряется на снимке. */
.quizcard { position: relative; display: block; border-radius: 16px; overflow: hidden; cursor: pointer; }
.quizcard input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.quizcard img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.quizcard__text {
  position: absolute; inset: auto 0 0 0; display: grid; gap: 2px; padding: 34px 14px 12px;
  background: linear-gradient(to top, rgba(0, 0, 0, .84), rgba(0, 0, 0, 0)); color: #fff;
}
.quizcard__text b { font-size: 16px; }
.quizcard__text small { font-size: 12px; color: rgba(255, 255, 255, .8); }
.quizcard::after {
  content: ''; position: absolute; inset: 0; border-radius: 16px;
  border: 2px solid transparent; pointer-events: none;
}
.quizcard:has(input:checked)::after { border-color: var(--accent); }
.quizcard:has(input:focus-visible)::after { border-color: var(--ink); }

/* Вариант без снимка: плитка с названием и пояснением. */
.quizopt {
  display: grid; gap: 3px; padding: 14px 16px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 14px; background: var(--bg);
}
.quizopt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.quizopt b { font-size: 15px; }
.quizopt small { font-size: 12px; color: var(--muted); line-height: 1.35; }
.quizopt:hover { border-color: var(--ink); }
.quizopt:has(input:checked) { border-color: var(--accent); background: rgba(0, 200, 140, .08); }

.quiz__foot { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.quiz__note { margin: 0; flex: 1 1 260px; font-size: 13px; color: var(--muted); }
.quiz__foot .btn { height: 50px; }
@media (max-width: 900px) { .quiz__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- многоуровневое меню для телефона ---------- */
/* На широком экране каталог раскрывается панелью по наведению. На телефоне
   наведения нет, поэтому там работает это дерево: раздел раскрывается в свои
   подборки. Разметка одна, показывается ровно одна из двух. */
.navtree, .navfoot { display: none; }
/* На широком экране обёртка не должна создавать своей коробки. */
.site-nav__scroll { display: contents; }

/* ---------- подборки с проваливанием по разделам ---------- */
/* Все разделы сразу занимали на телефоне экран целиком. Здесь открыт один,
   остальные ждут нажатия. Переключение на радиокнопках: скрипт не нужен. */
.picksbox { display: grid; gap: 16px; }
.picksbox__radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.picksbox__tabs { grid-row: 2; display: flex; flex-wrap: wrap; gap: 8px; }
.picksbox__tab {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 15px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 100px;
  background: var(--bg); color: var(--ink); font-size: 14px; white-space: nowrap;
}
.picksbox__tab:hover { border-color: var(--ink); }
.picksbox__n { font-size: 12px; color: var(--muted); }
/* Содержимое выбранного раздела лежит в своей коробке на светлой подложке:
   двумя одинаковыми рядами фишек подряд не видно, где разделы, а где то, что
   внутри них. */
.picksbox__panels { grid-row: 3; }
.picksbox__panel { display: none; }
.picksbox__panel { padding: 16px 18px; border-radius: 18px; background: var(--bg-soft); }
.picksbox__in { margin: 0 0 12px; font-size: 12px; color: var(--muted); }
.picksbox__links { display: flex; flex-wrap: wrap; gap: 8px; }
.picksbox__links .chip { background: var(--bg); border-color: transparent; }
.picksbox__links .chip:hover { border-color: var(--ink); }
.picksbox__radio:nth-of-type(1):checked ~ .picksbox__tabs .picksbox__tab:nth-child(1),
.picksbox__radio:nth-of-type(2):checked ~ .picksbox__tabs .picksbox__tab:nth-child(2),
.picksbox__radio:nth-of-type(3):checked ~ .picksbox__tabs .picksbox__tab:nth-child(3),
.picksbox__radio:nth-of-type(4):checked ~ .picksbox__tabs .picksbox__tab:nth-child(4),
.picksbox__radio:nth-of-type(5):checked ~ .picksbox__tabs .picksbox__tab:nth-child(5),
.picksbox__radio:nth-of-type(6):checked ~ .picksbox__tabs .picksbox__tab:nth-child(6),
.picksbox__radio:nth-of-type(7):checked ~ .picksbox__tabs .picksbox__tab:nth-child(7),
.picksbox__radio:nth-of-type(8):checked ~ .picksbox__tabs .picksbox__tab:nth-child(8) {
  /* Подпись цветом фона страницы: на тёмной теме --ink светлый, и белым по
     нему выбранная вкладка исчезала целиком. */
  background: var(--ink); border-color: var(--ink); color: var(--bg);
}
.picksbox__radio:nth-of-type(1):checked ~ .picksbox__tabs .picksbox__tab:nth-child(1) .picksbox__n,
.picksbox__radio:nth-of-type(2):checked ~ .picksbox__tabs .picksbox__tab:nth-child(2) .picksbox__n,
.picksbox__radio:nth-of-type(3):checked ~ .picksbox__tabs .picksbox__tab:nth-child(3) .picksbox__n,
.picksbox__radio:nth-of-type(4):checked ~ .picksbox__tabs .picksbox__tab:nth-child(4) .picksbox__n,
.picksbox__radio:nth-of-type(5):checked ~ .picksbox__tabs .picksbox__tab:nth-child(5) .picksbox__n,
.picksbox__radio:nth-of-type(6):checked ~ .picksbox__tabs .picksbox__tab:nth-child(6) .picksbox__n,
.picksbox__radio:nth-of-type(7):checked ~ .picksbox__tabs .picksbox__tab:nth-child(7) .picksbox__n,
.picksbox__radio:nth-of-type(8):checked ~ .picksbox__tabs .picksbox__tab:nth-child(8) .picksbox__n { color: var(--bg); opacity: .75; }
.picksbox__radio:nth-of-type(1):checked ~ .picksbox__panels .picksbox__panel:nth-child(1),
.picksbox__radio:nth-of-type(2):checked ~ .picksbox__panels .picksbox__panel:nth-child(2),
.picksbox__radio:nth-of-type(3):checked ~ .picksbox__panels .picksbox__panel:nth-child(3),
.picksbox__radio:nth-of-type(4):checked ~ .picksbox__panels .picksbox__panel:nth-child(4),
.picksbox__radio:nth-of-type(5):checked ~ .picksbox__panels .picksbox__panel:nth-child(5),
.picksbox__radio:nth-of-type(6):checked ~ .picksbox__panels .picksbox__panel:nth-child(6),
.picksbox__radio:nth-of-type(7):checked ~ .picksbox__panels .picksbox__panel:nth-child(7),
.picksbox__radio:nth-of-type(8):checked ~ .picksbox__panels .picksbox__panel:nth-child(8) { display: block; }

/* ===========================================================================
   Зоны нажатия.
   WCAG 2.5.5 и рекомендации Apple называют 44 × 44: палец накрывает область
   около девяти миллиметров, и промах по мелкой кнопке это не мелочь, а
   несработавшее действие. Размер правится двумя способами, и они разные по
   смыслу.

   1. Круглые кнопки (сердце на карточке, значки в шапке) остаются на вид
      прежними, а зону им расширяет невидимый слой. Растянуть сам кружок
      значит переложить шапку и наехать на фотографию товара.
   2. Строки списков тянутся по высоте, но только там, где наведения нет,
      то есть на сенсорных экранах. На мышином экране плотный список
      удобнее, и 44 точки на строку раздували бы подвал и панель фильтров.
   =========================================================================== */

/* Нижний предел из WCAG 2.5.8 действует на любом указателе, не только на
   пальце: 24 × 24. Строчная ссылка внутри предложения под правило не
   подпадает, поэтому правятся списки ссылок и отдельно стоящие ссылки, а не
   всё подряд в тексте. Заголовки карточек тоже не трогаются: там ссылка это
   сам заголовок, и добавленная высота развалила бы выравнивание карточек. */
/* Пунктам меню добирается только высота. display им менять нельзя: они уже
   лежат в строке или в сетке своими правилами, и inline-flex схлопывал
   пункты мегаменю по ширине текста — счётчик уезжал к правому краю только у
   тех названий, которые переносятся на вторую строку. */
.site-nav a, .megamenu__links a, .megamenu__section { min-height: 24px; }
/* Остальное это обычные строчные ссылки, им нужна и коробка, и высота. */
.site-head__phone,
.site-foot__nav a, .site-foot__social a, .site-foot__bottom a,
.mapblock__links a, .crumbs a, .sizes a, .contacts__value a {
  display: inline-flex; align-items: center; min-height: 24px;
}
/* Согласие на обработку: квадрат 13 точек был меньше предела сам по себе, а
   строка вокруг него ниже 24. */
.leadcard__consent { min-height: 24px; }
.leadcard__consent input { width: 18px; height: 18px; }

/* position тут не задаётся: у сердца на карточке оно уже absolute с правым
   верхним углом, и «relative» этим же весом сбивало его с фотографии вниз,
   между снимком и заголовком. Значкам шапки relative задан выше. */
.card__fav::before, .iconbtn::before {
  /* Слой задан своим размером, а не отступом от кружка: кружок разного
     размера на широком экране и на телефоне, и отступ пришлось бы держать
     в двух местах. Лежит под содержимым, значок и счётчик видны. */
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%);
  border-radius: 50%;
}

/* Бургер и фишки добирают высоту тем же невидимым слоем, что и круглые
   кнопки: бургер 31 × 40 это самый нажимаемый элемент на телефоне, а фишки
   стоят рядами по горизонтали, и тянуть их вверх незачем — соседний ряд
   далеко, слой ни на что не наезжает. */
.burger, .chip { position: relative; }
.burger::before, .chip::before {
  content: ''; position: absolute; left: 50%; top: 50%;
  min-width: 44px; width: 100%; height: 44px;
  transform: translate(-50%, -50%);
}

@media (hover: none) {
  .sections__item, .facet__opt, .site-foot__nav a, .site-foot__bottom a,
  .pick, .pager__item {
    min-height: 44px; display: flex; align-items: center;
  }
  /* Кнопкам карточки слой не годится: они стоят в столбик через 6 точек, и
     расширенные зоны наехали бы друг на друга. Здесь честная высота. */
  .card__actions .btn, .btn--small { min-height: 44px; }
  /* Поля и списки одного ряда держат общую высоту: разнобой в ряду виден
     сразу, поэтому 44 получают все, а не только те, что не дотягивали. */
  .field__input, .shop__search, .shop__sort, .facets-box__toggle,
  .pager__arrow { min-height: 44px; }
  /* У поля с текстом высота своя. Здесь стояло 220, и коробка на телефоне
     вырастала на треть экрана, а подпись в ней висела у самого верха: правило
     про 44 точки писалось для строки, а не для многострочного поля. */
  .field__input--area { min-height: 96px; }
  /* Оставшиеся ссылки списками: подвал, крошки, контакты на странице.
     Пункты самого меню сюда не входят: они держатся на 37 точках, и это
     условие владельца — всё меню вместе с контактами должно помещаться на
     экран без прокрутки. Порог 24 из WCAG 2.5.8 они проходят. */
  .site-foot__social a, .site-foot__phone, .contacts__value a, .crumbs a,
  .site-foot__col > a, .mapblock__links a, .sizes a, .leadcard__msg,
  .linklike {
    min-height: 44px; display: inline-flex; align-items: center;
  }
  /* Кнопки разбивки квадратные, им не хватало ширины, а не высоты. */
  .pager__item, .pager__arrow { min-width: 44px; }
  /* Значения фильтра остаются в одну строку с числом и квадратом справа:
     flex здесь уже был, добавляется только высота. */
  .facet__opt { display: flex; }
}

/* Compact home introduction between the title and actions. */
.hero__card > .hero__title { margin-bottom: 14px; }
.hero__card > .hero__lead { margin: 0 0 18px; }
.expert-person h2.expert-person__name { font-size: clamp(32px, 3.4vw, 44px); margin-bottom: 10px; }
.expert-person__role { margin: 0 0 16px; }