/* Витрина v2. Файл загружается после базового style.css: сложные рабочие компоненты
   (карточка, 3D, примерка, калькуляторы) остаются прежними, а оболочка каталога
   полностью меняет компоновку. Мобильные правила намеренно находятся в конце. */

:root{
  --v2-ink:#191713;
  --v2-muted:#746d62;
  --v2-paper:#fbfaf7;
  --v2-warm:#f1ede5;
  --v2-card:#f5f2eb;
  --v2-accent:#9b6c16;
  --v2-accent-dark:#72500e;
  --v2-rule:#ded7ca;
  --v2-max:1600px;
  --v2-pad:clamp(24px,4vw,72px);
}
:root[data-theme="dark"]{
  --v2-ink:#eee8dc;
  --v2-muted:#9e9688;
  --v2-paper:#0d0c0a;
  --v2-warm:#171511;
  --v2-card:#15130f;
  --v2-accent:#c7a45c;
  --v2-accent-dark:#e1c783;
  --v2-rule:#2c2821;
}

html{scroll-behavior:smooth}
body{background:var(--v2-paper);color:var(--v2-ink);overflow-x:hidden}
body.filters-open{overflow:hidden}

/* ── компактная рабочая шапка ──────────────────────────────────────────────────
   Устройство: слева знак, дальше ОДИН поисковый блок (строка + «Фото» + «Найти» под
   общей рамкой), справа тихая группа настроек поиска. Три уровня, а не семь
   одинаковых прямоугольников подряд — раньше «Канал» и «Умный поиск» весили ровно
   столько же, сколько «Найти», и глазу не за что было зацепиться.

   Ширина ограничена той же --v2-max, что и каталог: на 1920 шапка расползалась во
   всю ширину, а сетка под ней стояла в 1600 — край строки поиска не совпадал ни с
   чем на странице. */
.site-header{
  min-height:78px;gap:clamp(20px,2.4vw,44px);
  padding:12px max(var(--v2-pad),calc((100% - var(--v2-max)) / 2));
  flex-wrap:nowrap;background:color-mix(in srgb,var(--v2-paper) 92%,transparent);
  border-color:var(--v2-rule);box-shadow:none
}
.site-header .logo{
  flex:0 0 auto;padding:0;background:none;border:0;color:inherit;text-align:left
}
.site-header .logo-img{height:49px;max-width:172px;object-fit:contain}
.site-header .logo small{font-size:.5rem;letter-spacing:.34em;padding-left:13px}
/* Порядок сжатия: первой уступает место группа настроек, строка поиска — последней.
   Было наоборот (.search-secondary c flex:0 0 auto никогда не сжималась), и на 1280
   главный элемент страницы схлопывался до 160 px с обрезанным «Что ищем? Н…», пока
   три второстепенные кнопки держали полную ширину. */
.site-header .searchbox{display:flex;flex-flow:row nowrap;gap:clamp(14px,1.8vw,30px);
  flex:1 1 auto;min-width:0}

/* Поисковый блок — одна вещь под одной рамкой: строка, разделитель, «Фото»,
   разделитель, чёрная «Найти» вплотную к правому краю. Общая рамка и делает его
   единым объектом; три отдельные коробки с зазорами читались как три разных дела. */
.search-primary{
  position:relative;display:flex;align-items:stretch;gap:0;flex:1 1 auto;min-width:230px;
  /* Потолок ширины: на 1920 полоса дотягивалась до 840 px — столько в неё никто не
     печатает, а настройки при этом липли к ней вплотную. Остаток отдаём воздуху,
     группа настроек уходит к правому краю. */
  max-width:760px;
  height:52px;border:1px solid var(--v2-rule);border-radius:2px;background:var(--panel)
}
.search-primary:focus-within{border-color:var(--v2-accent)}
.site-header .searchbox input[type=search]{
  flex:1 1 auto;min-width:0;height:100%;border:0;background:none;
  padding:0 18px;font-size:.94rem;border-radius:0
}
.site-header .searchbox input[type=search]:focus{border:0}
/* Волоски-разделители рисуем на кнопках, а не отдельными элементами: у .search-primary
   нет overflow:hidden (он обрезал бы выпадающие подсказки), и лишние узлы в разметке
   пришлось бы прятать вместе с кнопками на телефоне. */
.site-header .photo-wrap{display:flex}
.site-header .photo-wrap > button.ghost{
  height:100%;border:0;border-left:1px solid var(--v2-rule);border-radius:0;
  padding:0 17px;color:var(--v2-muted)
}
.site-header .photo-wrap > button.ghost:hover{color:var(--v2-ink);background:var(--v2-warm)}
.site-header button.gold-btn{
  height:100%;padding:0 26px;border:0;border-radius:0;background:var(--v2-ink);
  color:var(--v2-paper);letter-spacing:.14em
}
.site-header button.gold-btn:hover{background:var(--v2-accent)}
.site-header .attach img{width:38px;height:38px;align-self:center;margin-left:8px}

/* Настройки поиска — служебные переключатели, а не действия: без рамок, приглушённым
   цветом, за волоском-отбивкой. Включённое состояние показываем подчёркиванием снизу,
   а не рамкой: рамка вернула бы им вес кнопки. */
.search-secondary{
  display:flex;align-items:center;gap:2px;flex:0 1 auto;min-width:0;margin-left:auto;
  padding-left:clamp(10px,1.4vw,22px);border-left:1px solid var(--v2-rule)
}
.site-header .search-secondary button.ghost{
  height:44px;padding:0 13px;border:0;border-radius:2px;color:var(--v2-muted);
  text-transform:none;letter-spacing:.02em;font-size:.9rem
}
.site-header .search-secondary button.ghost:hover{color:var(--v2-ink);background:var(--v2-warm)}
.site-header .search-secondary button.ghost:focus-visible{
  outline:2px solid var(--v2-accent);outline-offset:2px}
.site-header .smart-btn.on{
  background:none;border:0;color:var(--v2-accent);box-shadow:inset 0 -2px 0 var(--v2-accent)}
.site-header .smart-btn.on svg{color:var(--v2-accent)}
/* Подпись «Канал» перед значением скрыта: «Канал оба» / «Канал описание» /
   «Канал изображения» — пара не складывалась в фразу ни в одном состоянии. На кнопке
   осталось значение с предлогом («по тексту и фото»), оно читается само; что это
   переключатель, а не ярлык, говорят стрелка, подсветка при наведении и подсказка. */
.site-header .mode-btn .mode-lbl{display:none}
/* 500, а не 600: значение осталось на кнопке одно, и жирным оно перевешивало соседний
   «Умный поиск» — группа настроек должна быть тихой целиком */
.site-header .mode-btn b{color:var(--v2-ink);font-weight:500}
.site-header .tools-btn{width:44px;height:44px;justify-content:center;padding:0}
.site-header .tools-btn.on{background:var(--v2-warm);color:var(--v2-ink);border:0}
/* подсказки — ровно по ширине полосы: раньше стояло min(700px,100%) и правый край
   выпадашки не совпадал ни с одной линией шапки */
.site-header .sugg{top:calc(100% + 8px);right:auto;width:100%}
/* Выпадашки шапки — по правому краю своей кнопки. Ширина поднята с 280/260: на
   русских подписях в два слова («Выбрать файл на компьютере», «Калькулятор
   плотности») строка ломалась пополам, и меню читалось лесенкой. */
.site-header .photo-menu,.site-header .mode-menu{right:0;left:auto}
.site-header .photo-menu,.site-header .tools-menu,.site-header .mode-menu{min-width:318px}

/* ── hero: история слева, чертёжный лист с 3D справа — на весь экран ── */
.hero{
  max-width:none;min-height:calc(100svh - 78px);margin:0 auto;
  display:grid;grid-template-columns:minmax(420px,.84fr) minmax(500px,1.16fr);
  align-items:stretch;border-bottom:1px solid var(--v2-rule);overflow:hidden;
  background:var(--v2-paper)
}
.hero-copy{
  grid-column:1;grid-row:1;align-self:center;max-width:none;padding:56px 30px 60px var(--v2-pad);
  position:relative;z-index:4
}
.hero-eyebrow{margin-bottom:24px;color:var(--v2-accent);font-size:.68rem;letter-spacing:.24em}
/* Кегль и интерлиньяж: 6.1vw при межстрочном .82 давали 112 px текста на 92 px строки —
   у Cormorant кириллица с высокими выносными («й», «б», «р»), и строки налезали друг
   на друга, а заголовок в шесть слов-строк выталкивал кнопку и цифры за экран.
   Держим строку не ниже кегля и сам кегль — под ширину колонки. */
.hero h1{
  max-width:14ch;margin:0 0 26px;font-size:clamp(2.9rem,4.3vw,4.5rem);
  line-height:1.04;letter-spacing:-.025em;font-weight:500
}
.hero h1 em{display:inline-block;color:var(--v2-accent);font-weight:500}
.hero-copy p{max-width:44ch;margin:0 0 34px;color:var(--v2-muted);font-size:1rem;line-height:1.65}
.hero-cta{
  display:inline-flex;align-items:center;gap:28px;padding:15px 20px;border:1px solid var(--v2-ink);
  background:var(--v2-ink);color:var(--v2-paper);font:600 .73rem/1 Inter,sans-serif;
  letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:.2s ease
}
.hero-cta:hover{background:var(--v2-accent);border-color:var(--v2-accent);gap:36px}
.hero-cta svg{width:19px;height:19px;stroke:currentColor;fill:none}
.stat-row{margin-top:50px;gap:34px}
.stat-row .stat{padding-right:32px}
.hero-img{grid-column:2;grid-row:1;min-height:100%;background:var(--v2-warm)}
.hero-img::after{
  background:linear-gradient(90deg,var(--v2-paper) 0%,transparent 18%,transparent 100%)
}
.hero-img img{object-fit:contain;padding:50px}
.hero-stage{inset:0 0 0 41%;background:var(--v2-warm)}
.hero.scene3d{grid-template-columns:minmax(420px,.84fr) minmax(500px,1.16fr)}
.hero.scene3d::before{
  inset:0 0 0 41%;background:linear-gradient(90deg,var(--v2-paper),transparent 17%);
  display:block
}
.hero.scene3d .hero-copy{grid-column:1;grid-row:1}
.hero.scene3d .hero-stage{inset:0 0 0 41%;display:block}
/* Подпись лежит поверх сцены, а под ней проезжает изделие: тёмное имя на золоте
   не читалось вовсе. Подкладываем не карточку с рамкой (она читалась бы как элемент
   интерфейса поверх витрины), а растворяющуюся влево пелену: у текста фон плотный,
   к изделию сходит на нет. */
.hero-cap{
  right:0;bottom:78px;max-width:min(34ch,58%);padding:14px 42px 14px 64px;
  background:linear-gradient(to left,
    color-mix(in srgb,var(--v2-paper) 93%,transparent) 62%, transparent)
}
/* Длинное имя не должно расти вниз на три строки: подпись тогда закрывает изделие,
   ради которого стоит. Две строки — и хвост под многоточие. */
.hero-cap .hc-name{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}
/* Подписи цифр в одну строку: «домов-мотивов» переносилось и роняло строку статистики. */
.stat span{white-space:nowrap}
.hero-nav{right:42px;bottom:27px}
.hnav{background:color-mix(in srgb,var(--v2-paper) 86%,transparent);border-color:var(--v2-rule)}

/* ── каталог как самостоятельный экран ── */
.catalog-shell{max-width:var(--v2-max);margin:0 auto;padding:78px var(--v2-pad) 100px;scroll-margin-top:110px}
.catalog-intro{display:flex;justify-content:space-between;align-items:end;gap:32px;margin-bottom:34px}
.catalog-eyebrow{color:var(--v2-accent);font-size:.66rem;margin-bottom:10px}
.catalog-intro h2{font-size:clamp(2.8rem,4vw,4.6rem);line-height:.9;font-weight:500;letter-spacing:-.035em}
.catalog-intro p{margin-top:14px;color:var(--v2-muted);font-size:.88rem}
.filter-open{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:12px;height:48px;padding:0 18px;
  border:1px solid var(--v2-rule);background:transparent;color:var(--v2-ink);cursor:pointer;
  font:600 .72rem/1 Inter,sans-serif;letter-spacing:.15em;text-transform:uppercase
}
.filter-open:hover{border-color:var(--v2-accent);color:var(--v2-accent)}
.filter-open b{display:grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:20px;
  background:var(--v2-accent);color:#fff;font-size:.65rem}
.filter-open b[hidden]{display:none}

.catalog-shell .cats{
  max-width:none;margin:0 0 30px;padding:0;gap:8px;border:0;overflow-x:auto;scrollbar-width:none
}
.catalog-shell .cats::-webkit-scrollbar{display:none}
.catalog-shell .cats button{
  flex:0 0 auto;padding:10px 15px;border:1px solid var(--v2-rule)!important;background:transparent;
  color:var(--v2-muted);font-size:.64rem;letter-spacing:.13em;border-radius:999px
}
.catalog-shell .cats button:hover{background:var(--v2-warm);color:var(--v2-ink)}
.catalog-shell .cats button.on{background:var(--v2-ink);border-color:var(--v2-ink)!important;color:var(--v2-paper)}
#filterbarAnchor{height:1px;scroll-margin-top:100px}

/* ВРЕМЕННАЯ кнопка показа не-украшений (столовое серебро, брелоки, фигурки).
   Намеренно негромкая и пунктиром: это служебный переключатель на время разбора
   импорта, а не полноценный фильтр каталога. Убрать вместе с флагом noncore. */
.catalog-shell .noncore-toggle{
  display:inline-flex;align-items:center;margin:0 0 26px;padding:7px 13px;
  border:1px dashed var(--v2-rule);background:transparent;color:var(--v2-muted);
  cursor:pointer;font:600 .6rem/1 Inter,sans-serif;letter-spacing:.12em;
  text-transform:uppercase;transition:color .2s,border-color .2s
}
.catalog-shell .noncore-toggle:hover{color:var(--v2-ink);border-color:var(--v2-accent)}
.catalog-shell .noncore-toggle.on{
  color:var(--v2-accent);border-style:solid;border-color:var(--v2-accent)
}
.catalog-shell .noncore-toggle[hidden]{display:none}
.catalog-shell .noncore-toggle:focus-visible{outline:2px solid var(--v2-accent);outline-offset:2px}

/* ── разделы витрины: ось «стадия готовности», НАД лентой типов ──
   Тип изделия — это пилюли (.cats), поэтому разделы намеренно сделаны другим приёмом:
   вкладки по общей линии с засечкой под активной. Так видно, что это разные оси, а не
   два ряда одинаковых фильтров. Раздел выбирается первым, тип уточняет уже внутри него.
   Пустые вкладки не прячем: клиенту важно видеть, что камни и инструмент у нас есть. */
.catalog-shell .sections{
  display:flex;gap:2px;margin:0 0 26px;padding:0;border-bottom:1px solid var(--v2-rule);
  overflow-x:auto;scrollbar-width:none;scroll-margin-top:104px
}
.catalog-shell .sections::-webkit-scrollbar{display:none}
.catalog-shell .section-tab{
  position:relative;flex:0 0 auto;display:flex;flex-direction:column;gap:3px;
  padding:12px 22px 13px;border:0;background:transparent;cursor:pointer;
  font-family:inherit;color:var(--v2-muted);text-align:left;
  transition:color .2s,background .2s
}
.catalog-shell .section-top{display:flex;align-items:baseline;gap:7px}
.catalog-shell .section-label{
  font:600 .74rem/1.1 Inter,sans-serif;letter-spacing:.15em;text-transform:uppercase
}
.catalog-shell .section-hint{font-size:.63rem;letter-spacing:.02em;opacity:.8}
.catalog-shell .section-num{
  font-size:.58rem;letter-spacing:.03em;color:var(--v2-accent);
  font-variant-numeric:tabular-nums
}
.catalog-shell .section-tab:hover{background:var(--v2-warm);color:var(--v2-ink)}
.catalog-shell .section-tab.on{color:var(--v2-ink)}
/* засечка перекрывает общую линию — активная вкладка «сидит» на ней */
.catalog-shell .section-tab.on::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--v2-ink)
}
.catalog-shell .section-tab.empty{opacity:.5}
.catalog-shell .section-tab.empty .section-hint{font-style:italic}
.catalog-shell .section-tab:focus-visible{outline:2px solid var(--v2-accent);outline-offset:-3px}

/* заглушка ненаполненного раздела */
.catalog-shell .section-stub{
  max-width:520px;margin:44px auto 64px;padding:30px 28px;text-align:center;
  border:1px solid var(--v2-rule);background:var(--v2-warm)
}
.catalog-shell .section-stub h3{
  margin:0 0 10px;font:600 .95rem/1.3 Inter,sans-serif;letter-spacing:.04em;color:var(--v2-ink)
}
.catalog-shell .section-stub p{margin:0;font-size:.8rem;line-height:1.65;color:var(--v2-muted)}

/* ── справка о цене (полуфабрикаты) ──
   Полоса над лентой типов: полуфабрикат считают по весу металла, поэтому грамм
   стоит показать до карточки. Тон — служебный, не акцентный: это справка, а не
   баннер, и перебивать разделы она не должна. */
.catalog-shell .price-note{
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  margin:0 0 22px;padding:11px 16px;
  border:1px solid var(--v2-rule);border-left:2px solid var(--v2-accent);
  background:var(--v2-warm)
}
.catalog-shell .price-note[hidden]{display:none}
.catalog-shell .price-note-label{font-size:.6rem;color:var(--v2-muted)}
.catalog-shell .price-note-list{display:flex;align-items:baseline;gap:22px;flex-wrap:wrap}
.catalog-shell .price-note-item{display:flex;align-items:baseline;gap:7px}
.catalog-shell .price-note-item b{
  font:600 .88rem/1 Inter,sans-serif;color:var(--v2-ink);
  font-variant-numeric:tabular-nums;white-space:nowrap
}
.catalog-shell .price-note-item i{font-style:normal;font-size:.72rem;color:var(--v2-muted)}

.catalog-shell .layout{max-width:none;margin:0;padding:0;display:block}
.catalog-shell .content{min-width:0}
.catalog-shell .status{
  min-height:28px;margin:0 0 18px;color:var(--v2-muted);font-size:.77rem;border-top:1px solid var(--v2-rule);
  padding-top:18px
}

/* ── живая bento-выдача ── */
.catalog-shell .grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:315px;
  gap:14px;max-width:none;padding:0
}
.catalog-shell .card{
  min-height:0;border:0;background:var(--v2-card);border-radius:0;box-shadow:none;
  transition:transform .28s ease,box-shadow .28s ease
}
.catalog-shell .card.feat{grid-column:span 2;grid-row:span 2}
.catalog-shell .card.tall{grid-row:span 2}
.catalog-shell .card:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(25,23,19,.11)}
.catalog-shell .card .shot{background:var(--v2-card)}
.catalog-shell .card .cap{padding:14px 15px 16px;background:color-mix(in srgb,var(--panel) 78%,transparent)}
.catalog-shell .card .brand-line{font-size:.55rem;letter-spacing:.17em;color:var(--v2-accent)}
.catalog-shell .card .nm{font-size:1.06rem;line-height:1.08;color:var(--v2-ink)}
.catalog-shell .card.feat .cap{padding:22px 24px 24px}
.catalog-shell .card.feat .cap .nm{font-size:clamp(1.45rem,2vw,2rem)}
.catalog-shell .card .price{color:var(--v2-accent-dark)}
.catalog-shell .card .facts{font-size:.61rem}
.catalog-shell .more{padding:32px 0;color:var(--v2-muted)}

/* ── фильтры: вместо второй навигационной полосы — отдельная рабочая панель ── */
.filter-scrim{position:fixed;inset:0;z-index:79;background:rgba(15,13,10,.42);backdrop-filter:blur(2px)}
.filter-scrim[hidden]{display:none}
.filter-drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:80;width:min(540px,94vw);display:flex;
  flex-direction:column;background:var(--v2-paper);border-left:1px solid var(--v2-rule);
  box-shadow:-28px 0 80px rgba(16,14,11,.18);transform:translateX(102%);
  transition:transform .32s cubic-bezier(.22,.8,.2,1);visibility:hidden
}
.filter-drawer.open{transform:translateX(0);visibility:visible}
.filter-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:28px 30px 22px;border-bottom:1px solid var(--v2-rule)}
.filter-drawer-head .caps{font-size:.6rem;color:var(--v2-accent)}
.filter-drawer-head h3{font-size:2.35rem;line-height:1;font-weight:500}
.filter-close{width:42px;height:42px;border:1px solid var(--v2-rule);background:none;color:var(--v2-ink);cursor:pointer;font-size:1rem}
.filter-search-options{display:grid;grid-template-columns:1fr auto;gap:10px;padding:18px 30px 0}
.filter-search-options label{display:flex;flex-direction:column;gap:5px}
.filter-search-options label > span{font:600 .57rem/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--v2-muted)}
.filter-search-options select,.filter-search-options button{height:44px;border:1px solid var(--v2-rule);background:transparent;color:var(--v2-ink);font:500 .74rem/1 Inter,sans-serif;padding:0 11px}
.filter-search-options button{display:flex;align-items:center;gap:8px;align-self:end;cursor:pointer}
.filter-search-options button.on{background:var(--v2-ink);border-color:var(--v2-ink);color:var(--v2-paper)}
.filter-drawer .filterbar{
  position:static;inset:auto;z-index:auto;flex:1;min-height:0;overflow-y:auto;padding:24px 30px;
  border:0;background:var(--v2-paper);box-shadow:none
}
.filter-drawer .filterbar:has(.fb-item.open){z-index:auto}
.filter-drawer .filterbar::before,.filter-drawer .filterbar::after{content:none!important}
.filter-drawer .fb-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:none;padding:0}
.filter-drawer .fb-lead{grid-column:1/-1;margin:0 0 2px;font-size:.61rem;color:var(--v2-muted)}
.filter-drawer .fb-mode,.filter-drawer .fb-only3d{width:100%;min-height:45px;justify-content:space-between}
.filter-drawer .fb-item{grid-column:1/-1;width:100%;position:static}
.filter-drawer .fb-item > .fb-pill{width:100%;min-height:50px;justify-content:flex-start;border-color:var(--v2-rule);background:transparent}
.filter-drawer .fb-item > .fb-pill .chev{margin-left:auto}
.filter-drawer .fb-pop{
  position:static!important;inset:auto!important;width:100%!important;min-width:0!important;max-width:none!important;
  max-height:none!important;margin:6px 0 12px;padding:17px;background:var(--v2-warm);border:0;
  box-shadow:none;transform:none!important
}
.filter-drawer .fb-item:not(.open) > .fb-pop{display:none!important}
.filter-drawer .fb-item.open > .fb-pop{display:block!important}
.filter-drawer .fb-pop-2col{grid-template-columns:1fr}
.filter-drawer .fb-pop-cols .chip-cols{grid-template-columns:1fr 1fr}
.filter-drawer .ring-dial-wrap{margin-inline:auto}
.filter-drawer .fb-spring{display:none}
.filter-drawer .fb-count{grid-column:1/-1;padding:10px 0;color:var(--v2-muted)}
.filter-drawer .reset-link{grid-column:1/-1;justify-self:start;margin:0;padding:8px 0}
.filter-drawer .active-row{max-width:none;padding:14px 0 0;border:0}
.filter-drawer-foot{display:flex;gap:10px;padding:18px 30px 24px;border-top:1px solid var(--v2-rule);background:var(--v2-paper)}
.filter-apply{width:100%;height:50px;border:1px solid var(--v2-ink);background:var(--v2-ink);color:var(--v2-paper);
  font:600 .72rem/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.filter-apply:hover{background:var(--v2-accent);border-color:var(--v2-accent)}

/* Hero не сжимается при работе с каталогом: чертёжный лист — лицо сайта,
   и остаётся полноразмерным всегда (просьба от 15.08). К результатам
   страница просто скроллится ниже. */

/* ── чертёжный hero (frontend/blueprint-hero.js) ──
   Тёмный «лист»-миллиметровка на месте прежней 3D-карусели: изделие рисуется
   золотыми линиями, затем сквозь чертёж проявляется настоящий рендер REFRACT.
   Лист включается классом bp-on на .hero (его ставит скрипт, когда сцена
   реально поднялась) — без него остаётся прежний фото-герой .hero-img. */
/* весь первый экран — один тёмный чертёжный лист: миллиметровка тянется и под
   текстом, виньетка подсвечивает зону изделия. Белого здесь больше нет. */
.hero.bp-on{
  background:
    radial-gradient(ellipse at 70% 45%, rgba(216,196,154,.06), transparent 58%),
    repeating-linear-gradient(0deg, rgba(216,196,154,.05) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(90deg, rgba(216,196,154,.05) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(0deg, rgba(216,196,154,.018) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, rgba(216,196,154,.018) 0 1px, transparent 1px 24px),
    #0d0b08;
  border-bottom-color:#2c2821
}
.bp-hero{position:absolute;inset:0 0 0 41%;z-index:3;overflow:hidden;display:none}
.hero.bp-on .bp-hero{display:block}
.hero.bp-on .hero-img{visibility:hidden}
/* типографика на тёмном: светлая тушь, золотые акценты */
.hero.bp-on .hero-eyebrow{color:#c7a45c}
.hero.bp-on h1{color:#efe5cd}
.hero.bp-on h1 em{color:#c7a45c}
.hero.bp-on .hero-copy p{color:#9e9688}
.hero.bp-on .hero-cta{
  background:none;border-color:rgba(216,196,154,.45);color:#e8dbba
}
.hero.bp-on .hero-cta:hover{
  background:#c7a45c;border-color:#c7a45c;color:#171310
}
.hero.bp-on .stat-row{color:#efe5cd}
.hero.bp-on .stat-row .stat{border-color:rgba(216,196,154,.18)}
.hero.bp-on .stat-row span{color:#9e9688}
.bp-hero .bp-canvas,.bp-hero .metal-canvas{
  position:absolute;inset:0;width:100%;height:100%;transition:opacity .6s ease
}
.bp-hero .metal-canvas{pointer-events:none}
.bp-hero svg.decor{
  position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
  transition:opacity .6s ease
}
/* смена изделия: всё нарисованное тает разом, потом лист начинается заново */
.bp-hero.sw .bp-canvas,.bp-hero.sw svg.decor{opacity:0!important}
.bp-hero .decor text{
  font:11px/1 ui-monospace,Consolas,monospace;letter-spacing:.14em;
  fill:#d8c49a;opacity:.95
}
.bp-hero .decor .fade{opacity:0;transition:opacity 1.2s ease}
.bp-hero .decor .fade.on{opacity:1}
.bpnav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:6;
  width:44px;height:64px;display:grid;place-items:center;
  background:none;border:1px solid transparent;cursor:pointer;
  color:#d8c49a;opacity:.4;transition:opacity .3s ease,border-color .3s ease
}
.bpnav:hover{opacity:.95;border-color:rgba(216,196,154,.35)}
.bpnav.prev{left:14px}
.bpnav.next{right:14px}
.bpnav svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6}
/* подпись-ссылка изделия: артикул чертёжным моноширинным, имя — антиквой */
.bp-cap{
  position:absolute;left:48px;bottom:24px;z-index:6;max-width:min(35ch,70%);
  text-decoration:none;color:#efe5cd;opacity:0;transform:translateY(6px);
  transition:opacity .8s ease,transform .8s ease
}
.bp-cap.on{opacity:1;transform:none}
.bp-cap .bc-art{
  font:10px/1 ui-monospace,Consolas,monospace;letter-spacing:.22em;
  color:#d8c49a;opacity:.6;text-transform:uppercase;margin-bottom:6px
}
.bp-cap .bc-name{
  font:500 1.05rem/1.3 "Cormorant Garamond",serif;letter-spacing:.02em
}
.bp-cap:hover .bc-name{color:var(--v2-accent)}

/* Ступени сжатия шапки. Проверены по живому окну, а не назначены на глаз: строка
   поиска обязана оставаться самым широким элементом ряда на любой ширине — раньше обе
   ступени стояли на 1250 и срабатывали уже после того, как строка успевала схлопнуться
   до 160 px.
     1440 — уходит подпись «каталог моделей»;
     1250 — у «Умного поиска» остаётся значок с подсказкой (он продублирован в панели
            фильтров), включённое состояние по-прежнему видно подчёркиванием;
     1150 — уходит ВЕСЬ выбор канала. Урезать его до части фразы нельзя — «по тексту»
            без «фото» это уже другое значение; либо целиком, либо никак. Канал при
            этом не теряется: в панели фильтров он есть селектом. */
@media (max-width:1440px){
  .site-header .logo small{display:none}
}
@media (max-width:1250px){
  .site-header .smart-btn span{display:none}
  .site-header .smart-btn{width:44px;padding:0;justify-content:center}
}
@media (max-width:1150px){
  .site-header .mode-wrap{display:none}
}

/* ── планшет ── */
@media (max-width:1250px){
  .site-header{gap:20px;padding-inline:24px}
  .hero{grid-template-columns:minmax(350px,.82fr) 1.18fr}
  .hero h1{font-size:clamp(2.7rem,4.6vw,4rem)}
  .hero-stage,.hero.scene3d .hero-stage{inset:0 0 0 40%}
  .hero.scene3d::before{inset:0 0 0 40%}
  .catalog-shell .grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:300px}
}

@media (max-width:900px){
  .site-header{flex-wrap:wrap;gap:8px 16px;padding-block:9px}
  .site-header .logo{width:124px}
  .site-header .logo-img{height:42px;max-width:124px}
  .site-header .searchbox{order:2;flex-basis:100%}
  /* Группа настроек (здесь от неё остаётся одна «⋯») встаёт в конец строки поиска,
     а НЕ висит абсолютом. Абсолют тут был сломан: точкой отсчёта служила .searchbox
     (у неё position:relative в style.css), а не шапка, поэтому «⋯» приземлялась
     ровно на кнопку «Найти» — на телефоне два разных действия лежали друг на друге.
     Отбивка волоском в один элемент тоже не нужна — разделять нечего. */
  .search-secondary{position:static;border-left:0;padding-left:0}
  .site-header .mode-wrap,.site-header .smart-btn{display:none}
  /* ── первый экран без витринного кадра ──
     Ниже 900 px чертёжный лист не поднимается вовсе (blueprint-hero.js гасит себя
     на этой же ширине), а запасной фото-герой показывал ОРИГИНАЛ из /media/ — с
     запечённым чёрным фоном. На кремовой странице это была чёрная плашка во весь
     первый экран (в узкой колонке 641–900 — чёрная марка посреди бежевого поля),
     и кадр менялся сам каждые 4.2 с. Поэтому здесь кадра нет совсем: полоса
     «кто мы + сколько форм», а сразу под ней плитки каталога.
     Картинку убирает этот блок, а качать её перестаёт app.js:initHero — одно без
     другого лишь прячет трафик, а не снимает его. */
  .hero{display:block;min-height:0;overflow:visible}
  .hero-img,.hero-cta,.hero-copy p{display:none}
  .hero-copy{padding:36px var(--v2-pad) 32px;max-width:none;align-self:auto}
  .hero-eyebrow{margin-bottom:14px}
  .hero h1{font-size:clamp(2.2rem,5.6vw,3rem);max-width:20ch;margin-bottom:20px}
  /* Цифры в строку, а не колонками: «8 065» над словом «моделей» в три этажа
     занимало больше высоты, чем сам заголовок, ради которого стоит полоса. */
  .stat-row{margin-top:0;flex-wrap:wrap;gap:9px 24px}
  .stat-row .stat{display:flex;align-items:baseline;gap:7px;padding-right:0}
  .stat b{display:inline;font-size:1.2rem}
  .stat span{font-size:.6rem}
  /* Полоса стала короткой — верхний отступ каталога (78 px под полноэкранный
     герой) превратился бы в пустое поле между заголовком и первой плиткой. */
  .catalog-shell{padding:44px 30px 100px}
  .catalog-shell .grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:285px}
}

/* ── телефон: эти правила всегда остаются последними ── */
@media (max-width:640px){
  :root{--v2-pad:16px;font-size:16px}
  .site-header{position:sticky;min-height:0;padding:8px 14px 10px;gap:7px;background:var(--v2-paper)}
  .site-header .logo{width:104px;height:37px}
  .site-header .logo-img{width:104px;height:37px;object-fit:contain}
  .site-header .tools-btn{width:38px;height:38px}
  .site-header .searchbox{min-width:0;gap:6px}
  .site-header .searchbox::after{content:none}
  /* На телефоне поисковый блок снова РАСПАДАЕТСЯ на три отдельные плитки: единая
     рамка держится на строке в 52 px, а тут строка и две квадратные кнопки по 44 px
     стоят в сетке с зазорами — общая рамка обвела бы их одной коробкой с воздухом
     внутри. Поэтому здесь рамку снимаем и возвращаем каждой плитке свою.
     order:0 обязателен: в style.css остался мобильный раскладчик v1 (там шапка
     переносилась в две строки и кнопкам розданы order 1/3), и эти значения работают
     и в гриде — «Найти» уезжала в средний столбец, впереди «Фото». */
  .site-header .search-primary{width:auto;min-width:0;max-width:none;gap:6px;height:auto;
    border:0;background:none;display:grid;grid-template-columns:minmax(0,1fr) 44px 44px}
  .site-header .search-primary input[type=search],
  .site-header .search-primary .photo-wrap,
  .site-header #searchBtn{order:0}
  .site-header .searchbox input[type=search]{height:44px;padding:0 12px;font-size:.83rem;
    min-width:0;border:1px solid var(--v2-rule);border-radius:2px}
  .site-header button.gold-btn{width:44px;height:44px;padding:0;justify-content:center;
    border:1px solid var(--v2-ink);border-radius:2px}
  .site-header button.gold-btn span{display:none}
  /* селектор не короче базового (.site-header .photo-wrap > button.ghost), иначе
     базовая «безрамочная» кнопка внутри полосы перебьёт мобильную по весу */
  .site-header .photo-wrap > button.ghost{width:44px;height:44px;padding:0;
    justify-content:center;border:1px solid var(--v2-rule);border-radius:2px}
  .site-header .photo-wrap{width:44px}
  .site-header .attach img{margin-left:0}
  .site-header .attach{position:absolute;right:98px}
  .site-header .photo-wrap button > span,.site-header .photo-wrap .caret{display:none}
  .site-header .photo-menu{position:fixed;top:105px;left:14px;right:14px;width:auto;min-width:0}
  .site-header .sugg{position:fixed;top:105px;left:14px;right:14px;width:auto}

  /* Полоса первого экрана (раскладку задаёт блок 900 выше): на телефоне только
     кегли. Заголовок не растягиваем по vw — «Найдите свою.» на 10.5vw занимало
     три строки из четырёх слов и одно съезжало под обрез. */
  .hero-copy{padding:28px var(--v2-pad) 26px}
  .hero-eyebrow{margin-bottom:12px;font-size:.56rem}
  .hero h1,body.catalog-active .hero h1{font-size:2.4rem;line-height:1.03;margin-bottom:18px}

  /* Каталог начинается сразу за полосой, поэтому шапка раздела тут скромнее:
     надпись «КАТАЛОГ ФОРМ» — второй микро-заголовок подряд после «ВОСКОВКИ ДЛЯ
     ЛИТЬЯ НА ЗАКАЗ», а «Все модели» в 3rem спорило с h1 за место на экране.
     Цель полосы — чтобы плитки были видны без прокрутки. */
  .catalog-shell{padding:30px 14px 70px}
  .catalog-intro{align-items:end;margin-bottom:20px}
  .catalog-eyebrow{display:none}
  .catalog-intro h2{font-size:2rem}
  .catalog-intro p{display:none}
  .filter-open{width:46px;height:46px;padding:0;justify-content:center;position:relative}
  .filter-open span{display:none}
  .filter-open b{position:absolute;right:-5px;top:-7px}
  .catalog-shell .cats{margin-inline:-14px;padding-inline:14px;margin-bottom:22px}
  .catalog-shell .cats button{padding:9px 13px;font-size:.59rem}
  .catalog-shell .status{font-size:.69rem;line-height:1.45;margin-bottom:12px}
  .catalog-shell .grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:245px;gap:8px}
  .catalog-shell .card.feat{grid-column:span 2;grid-row:span 2}
  .catalog-shell .card.tall{grid-row:span 2}
  .catalog-shell .card .cap{padding:9px 10px 11px}
  .catalog-shell .card .brand-line{font-size:.48rem}
  .catalog-shell .card .nm{font-size:.88rem;-webkit-line-clamp:2}
  .catalog-shell .card.feat .cap{padding:16px}
  .catalog-shell .card.feat .cap .nm{font-size:1.35rem}
  .catalog-shell .card .price{font-size:.72rem}
  .catalog-shell .card .facts{display:none}
  .catalog-shell .card .mk{top:8px;left:8px;font-size:.46rem}
  .catalog-shell .card .d3{right:7px;bottom:7px;font-size:.48rem}

  .filter-drawer{top:auto;left:0;width:100%;height:min(88vh,780px);border-left:0;border-top:1px solid var(--v2-rule);
    transform:translateY(102%);border-radius:16px 16px 0 0}
  .filter-drawer.open{transform:translateY(0)}
  .filter-drawer-head{padding:20px 18px 15px}
  .filter-drawer-head h3{font-size:2rem}
  .filter-search-options{padding:14px 18px 0;grid-template-columns:1fr}
  .filter-search-options button{justify-content:center}
  .filter-drawer .filterbar{padding:17px 18px}
  .filter-drawer .fb-row{grid-template-columns:1fr 1fr;gap:8px}
  .filter-drawer .fb-pop{position:static!important;inset:auto!important;padding:13px!important;margin:5px 0 9px!important;
    border-radius:0!important;max-height:none!important}
  .filter-drawer .fb-pop-2col{display:block!important}
  .filter-drawer .fb-pop-2col .fb-col + .fb-col{margin-top:18px}
  .filter-drawer .fb-pop-cols .chip-cols{grid-template-columns:1fr}
  .filter-drawer-foot{padding:12px 18px calc(15px + env(safe-area-inset-bottom))}
}

@media (max-width:420px){
  .catalog-shell .grid{grid-auto-rows:215px}
  /* На 360 и уже заголовок ужимается ещё: до правки здесь стоял КРУПНЕЙШИЙ кегль
     (2.65rem против 2.4 на 640) — наследство раскладки с картинкой, где текст жил
     под кадром на своей высоте. Без картинки полоса меряется экраном. */
  .hero h1,body.catalog-active .hero h1{font-size:2.1rem}
  .stat b{font-size:1.1rem}
}

/* ── разделы витрины на узких экранах ──
   Блок обязан остаться ПОСЛЕ 640/420 выше (AGENTS.md): дописанное после мобильных
   перебивает их молча. Подпись под названием на телефоне убираем — не влезает,
   а счётчик важнее; вкладки уходят в горизонтальную прокрутку. */
@media (max-width:640px){
  .catalog-shell .sections{margin-inline:-14px;padding-inline:14px;margin-bottom:20px;gap:0}
  .catalog-shell .section-tab{padding:10px 14px 11px}
  .catalog-shell .section-label{font-size:.63rem;letter-spacing:.1em}
  .catalog-shell .section-hint{display:none}
  .catalog-shell .section-num{font-size:.56rem}
  .catalog-shell .section-stub{margin:30px 0 40px;padding:22px 18px}
  /* на телефоне подпись «Цена за грамм» уходит на свою строку, цифры — в столбик
     по две в ряд не влезают вместе с подписью */
  .catalog-shell .price-note{gap:6px 14px;padding:10px 12px;margin-bottom:18px}
  .catalog-shell .price-note-label{flex-basis:100%}
  .catalog-shell .price-note-list{gap:16px}
}