/* ═══════════════════════════════════════════════════════════════════════
   ЛЕСТОРГ 23 — тема.

   РЕГИСТР. Торговля пиломатериалом, а не глянец. Сюда приходят найти брус
   нужного сечения и позвонить. Три решения держат характер:

   1) ЧИСЛО ГЛАВНЕЕ КАРТИНКИ. Размер, цена и характеристики набраны
      табличными цифрами. Прорабу нужно сравнить, а не восхититься.
   2) ЗЕЛЁНЫЙ — ОТ ЗНАКА. #90BF33 доказан тремя способами (_data/brand.md).
      Янтарный из замера по картинкам отброшен: он с баннеров, в знаке 5%.
   3) ПЛОТНОСТЬ ВМЕСТО ВОЗДУХА. 129 позиций и 18 разделов обязаны
      помещаться на экран, а не растягиваться на десять прокруток.

   Непохожесть на «Лесной Двор» заложена устройством: там жжёный
   красно-оранжевый и крупный шаг, здесь зелёный и плотная сетка.
   ═══════════════════════════════════════════════════════════════════════ */

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

:root {
  --зелень:        #90BF33;
  --зелень-тёмная: #70A038;
  --зелень-глубок: #608840;
  /* Для ТЕКСТА по белому #90BF33 даёт 2.3:1 — ниже нормы AA.
     Для надписей отдельный тёмный вариант. */
  --зелень-текст:  #4A7018;
  --зелень-фон:    #F2F8E8;
  --красный-текст: #C11212;

  --чернила: #1B1E22;
  --графит:  #4B4F58;
  --туман:   #6A7079;
  --линия:   #DFE2E4;
  --молоко:  #F7F8F5;
  --белый:   #FFFFFF;

  --шрифт: 'Golos Text', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  --мелкий: clamp(.76rem, .73rem + .16vw, .86rem);
  --текст:  clamp(.92rem, .88rem + .22vw, 1.02rem);
  --лид:    clamp(1rem, .94rem + .38vw, 1.24rem);
  --h3:     clamp(1.02rem, .96rem + .45vw, 1.32rem);
  --h2:     clamp(1.35rem, 1.12rem + 1.2vw, 2.25rem);
  --h1:     clamp(1.6rem, 1.2rem + 2.2vw, 3.1rem);

  --ш1:4px; --ш2:8px; --ш3:12px; --ш4:16px; --ш5:24px; --ш6:32px; --ш7:48px; --ш8:72px;
  --радиус: 10px;
  --радиус-мал: 6px;
  --полоса: min(1360px, 100% - clamp(14px, 4vw, 56px));
  --ход: 180ms cubic-bezier(.2, 0, 0, 1);
  --ход-длинный: 520ms cubic-bezier(.2, 0, 0, 1);

  --тень-1: 0 1px 2px rgba(27,30,34,.06);
  --тень-2: 0 2px 6px rgba(27,30,34,.08), 0 10px 24px rgba(27,30,34,.07);
}

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--белый); color: var(--чернила);
  font-family: var(--шрифт); font-size: var(--текст); line-height: 1.55;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--зелень-тёмная); outline-offset: 2px; border-radius: var(--радиус-мал); }

h1, h2, h3 { margin: 0; line-height: 1.15; letter-spacing: -.015em; font-weight: 650; text-wrap: balance; }
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); font-weight: 600; }
p { margin: 0; }
.полоса { width: var(--полоса); margin-inline: auto; }
.подзаголовок { color: var(--туман); margin-block-start: var(--ш3); }

/* ── ПОЯВЛЕНИЕ ───────────────────────────────────────────────────────── */
.всплыв { opacity: 0; transform: translate3d(0, 14px, 0); }
.всплыв.виден { opacity: 1; transform: none; transition: opacity var(--ход-длинный), transform var(--ход-длинный); }
.нет-скрипта .всплыв { opacity: 1; transform: none; }

/* ── ШАПКА ───────────────────────────────────────────────────────────── */
.шапка { position: sticky; top: 0; z-index: 40; background: var(--белый);
  border-block-end: 1px solid var(--линия); transition: box-shadow var(--ход); }
.шапка--тень { box-shadow: var(--тень-1); }
.шапка__в { width: var(--полоса); margin-inline: auto; display: flex; align-items: center;
  gap: clamp(8px, 2vw, 28px); min-height: clamp(56px, 4.4vw, 74px); }
.знак { display: inline-flex; align-items: center; gap: var(--ш2); white-space: nowrap; }
.знак img { inline-size: clamp(30px, 3vw, 40px); block-size: auto; }
.знак span { font-weight: 750; font-size: clamp(.98rem, .85rem + .55vw, 1.35rem); letter-spacing: -.02em; }
.знак b { color: var(--зелень-текст); font-weight: 750; }
.навигация { display: flex; gap: clamp(2px, 1vw, 16px); margin-inline-start: auto; }
.навигация a { padding: 9px var(--ш3); border-radius: var(--радиус-мал); font-size: var(--мелкий);
  font-weight: 500; color: var(--графит); white-space: nowrap; transition: color var(--ход), background var(--ход); }
.навигация a:hover { color: var(--чернила); background: var(--молоко); }
.шапка__тел { display: inline-flex; align-items: center; padding: 10px var(--ш4);
  border-radius: var(--радиус-мал); background: var(--зелень); color: #16290A;
  font-weight: 650; font-size: var(--мелкий); white-space: nowrap; transition: background var(--ход); }
.шапка__тел:hover { background: var(--зелень-тёмная); color: #fff; }

/* Бургер: три полосы, превращается в крест. Никаких иконок-эмодзи. */
.бургер { display: none; inline-size: 44px; block-size: 44px; border: 0; background: transparent;
  cursor: pointer; padding: 11px 10px; flex-direction: column; justify-content: space-between; }
.бургер span { display: block; block-size: 2px; background: var(--чернила); border-radius: 2px;
  transition: transform var(--ход), opacity var(--ход); }
.бургер--крест span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.бургер--крест span:nth-child(2) { opacity: 0; }
.бургер--крест span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
.мобменю { display: none; flex-direction: column; padding: var(--ш3) clamp(14px, 4vw, 56px) var(--ш5);
  border-block-start: 1px solid var(--линия); }
.мобменю.открыто { display: flex; }
.мобменю a { padding: var(--ш3) 0; font-weight: 600; border-block-end: 1px solid var(--линия); }
@media (max-width: 900px) {
  .навигация { display: none; }
  .бургер { display: flex; }
  .шапка__тел { margin-inline-start: auto; }
}
@media (max-width: 420px) { .шапка__тел { display: none; } }

/* ── ПЕРВЫЙ ЭКРАН ────────────────────────────────────────────────────── */
.верх { background: var(--зелень-фон); border-block-end: 1px solid var(--линия);
  padding-block: clamp(28px, 4vw, 60px); overflow: hidden; }
.верх__в { display: grid; gap: var(--ш6); grid-template-columns: 1fr; align-items: center; }
.верх__в > * { min-width: 0; }
@media (min-width: 940px) { .верх__в { grid-template-columns: 1.05fr .95fr; } }
.верх h1 { max-inline-size: 20ch; }
.верх p { margin-block-start: var(--ш4); color: var(--графит); font-size: var(--лид); max-inline-size: 52ch; }
.верх__кнопки { display: flex; flex-wrap: wrap; gap: var(--ш3); margin-block-start: var(--ш5); }

/* Кадры товара вместо пустоты: четыре снимка лесенкой. */
.верх__кадры { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--ш3); }
.верх__кадр { margin: 0; border-radius: var(--радиус); overflow: hidden;
  background: var(--белый); box-shadow: var(--тень-2); aspect-ratio: 4 / 3; }
.верх__кадр img { inline-size: 100%; block-size: 100%; object-fit: cover;
  transition: transform 600ms cubic-bezier(.2,0,0,1); }
.верх__кадр:hover img { transform: scale(1.05); }
@media (min-width: 620px) {
  .верх__кадр--1 { transform: translateY(-14px); }
  .верх__кадр--4 { transform: translateY(14px); }
}

.кнопка {
  --фон: var(--зелень); --цвет: #16290A;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ш2);
  padding: 12px var(--ш5); border: 0; border-radius: var(--радиус-мал);
  background: var(--фон); color: var(--цвет); font-weight: 650; font-size: var(--мелкий);
  cursor: pointer; transition: background var(--ход), transform var(--ход), color var(--ход);
}
.кнопка:hover { background: var(--зелень-тёмная); color: #fff; }
.кнопка:active { transform: translateY(1px); }
.кнопка--рамка { --фон: transparent; --цвет: var(--чернила); border: 1.5px solid var(--чернила); }
.кнопка--рамка:hover { background: var(--чернила); color: #fff; }

/* ── ЧИСЛА ───────────────────────────────────────────────────────────── */
.числа { display: grid; gap: 1px; background: var(--линия); border-block-end: 1px solid var(--линия);
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }
.число { background: var(--белый); padding: var(--ш5) var(--ш4); }
.число b { display: block; font-size: var(--h2); font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.число span { display: block; margin-block-start: 4px; color: var(--туман); font-size: var(--мелкий); }

/* ── СЕКЦИИ ──────────────────────────────────────────────────────────── */
.секция { padding-block: clamp(30px, 4.2vw, 68px); }
.секция--молоко { background: var(--молоко); }
.секция__шапка { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--ш3); margin-block-end: clamp(16px, 2.2vw, 30px); }
.секция__шапка p { color: var(--туман); font-size: var(--мелкий); }
.секция__шапка-в { display: flex; align-items: center; gap: var(--ш3); }
.раздел__знак { inline-size: clamp(40px, 4vw, 56px); block-size: auto; flex: 0 0 auto; }

/* ── РАЗДЕЛЫ ─────────────────────────────────────────────────────────── */
.разделы { display: grid; gap: var(--ш2);
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
.разделы > * { min-width: 0; }
.раздел {
  position: relative; display: flex; align-items: center; gap: var(--ш3);
  padding: var(--ш3) var(--ш4); border: 1px solid var(--линия); border-radius: var(--радиус-мал);
  background: var(--белый); overflow: hidden;
  transition: border-color var(--ход), transform var(--ход), box-shadow var(--ход);
}
.раздел::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(220px at var(--мx, 50%) var(--мy, 50%), rgba(144,191,51,.16), transparent 65%);
  transition: opacity var(--ход); }
.раздел:hover { border-color: var(--зелень-тёмная); transform: translateY(-2px); box-shadow: var(--тень-2); }
.раздел:hover::after { opacity: 1; }
.раздел img { inline-size: 44px; block-size: 44px; object-fit: contain; flex: 0 0 auto; }
.раздел__пусто { inline-size: 44px; block-size: 44px; border-radius: var(--радиус-мал);
  background: var(--молоко); flex: 0 0 auto; }
.раздел__текст { min-width: 0; }
.раздел__текст b { display: block; font-weight: 600; font-size: var(--мелкий); line-height: 1.3; }
.раздел__текст i { display: block; font-style: normal; color: var(--туман);
  font-size: .74rem; font-variant-numeric: tabular-nums; margin-block-start: 2px; }

/* ── ТОВАРЫ ──────────────────────────────────────────────────────────── */
.товары { display: grid; gap: var(--ш3);
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
.товары > * { min-width: 0; }
.товар {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--линия); border-radius: var(--радиус); background: var(--белый);
  transition: border-color var(--ход), box-shadow var(--ход), transform var(--ход);
}
.товар:hover { border-color: var(--зелень-тёмная); box-shadow: var(--тень-2); transform: translateY(-3px); }
.товар__кадр { aspect-ratio: 4 / 3; background: var(--молоко); overflow: hidden;
  display: grid; place-items: center; }
.товар__кадр img { inline-size: 100%; block-size: 100%; object-fit: cover;
  transition: transform 600ms cubic-bezier(.2,0,0,1); }
.товар:hover .товар__кадр img { transform: scale(1.06); }
.товар__нет-кадра { color: var(--туман); font-size: var(--мелкий); text-align: center; padding: var(--ш4); }
.товар__низ { padding: var(--ш4); display: flex; flex-direction: column; gap: var(--ш2); flex: 1; }
.товар__раздел { font-size: .72rem; color: var(--туман); }
.товар h3 { font-size: var(--текст); font-weight: 600; line-height: 1.3; }
.товар__цена { margin-block-start: auto; padding-block-start: var(--ш3); }
.цена { font-size: var(--h3); font-weight: 700; font-variant-numeric: tabular-nums;
  letter-spacing: -.02em; white-space: nowrap; }
.цена--нет { font-size: var(--мелкий); font-weight: 600; color: var(--красный-текст); white-space: normal; }

/* Спеки прямо в карточке: три главных числа без перехода на страницу. */
.спеки { display: grid; gap: 3px; margin: 0; }
.спеки > div { display: flex; gap: var(--ш2); justify-content: space-between;
  font-size: var(--мелкий); border-block-end: 1px dotted var(--линия); padding-block-end: 3px; }
.спеки dt { color: var(--туман); }
.спеки dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; text-align: end; }

/* ── СТРАНИЦА ТОВАРА ─────────────────────────────────────────────────── */
.лист { display: grid; gap: clamp(20px, 3vw, 48px); grid-template-columns: 1fr; align-items: start; }
.лист > * { min-width: 0; }
@media (min-width: 900px) { .лист { grid-template-columns: 1fr 1fr; } }
.лист__кадр { border: 1px solid var(--линия); border-radius: var(--радиус); overflow: hidden;
  background: var(--молоко); aspect-ratio: 4 / 3; display: grid; place-items: center; }
.лист__кадр img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.лист__цена { margin-block: var(--ш4) var(--ш5); }
.лист__цена .цена { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.3rem); }
.лист__загол { font-size: var(--h3); margin-block: var(--ш6) var(--ш3); }

/* Характеристики таблицей: имя слева, значение справа, пояснение мельче. */
.таблица { display: grid; gap: 0; margin: 0; border-block-start: 1px solid var(--линия); }
.таблица > div { display: grid; grid-template-columns: minmax(120px, 34%) 1fr; gap: var(--ш3);
  padding-block: var(--ш3); border-block-end: 1px solid var(--линия); align-items: baseline; }
.таблица > div > * { min-width: 0; }
.таблица dt { color: var(--туман); font-size: var(--мелкий); }
.таблица dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.таблица dd i { display: block; font-style: normal; font-weight: 400; color: var(--графит);
  font-size: var(--мелкий); margin-block-start: 4px; }

/* Проза о применении — отдельно от таблицы, чтобы не путать с фактами. */
.польза { margin-block-start: clamp(28px, 4vw, 56px); }
.польза__сетка { display: grid; gap: var(--ш3);
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.польза__сетка > * { min-width: 0; }
.польза__пункт { padding: var(--ш4); border: 1px solid var(--линия);
  border-radius: var(--радиус-мал); background: var(--молоко); }
.польза__пункт b { display: block; margin-block-end: 5px; }
.польза__пункт p { color: var(--графит); font-size: var(--мелкий); }

/* ── СКЛАД ───────────────────────────────────────────────────────────── */
.склад-полоса { display: grid; gap: var(--ш5);
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); align-items: start; }
.склад-полоса > * { min-width: 0; }
.склад-полоса p { color: var(--графит); margin-block-start: var(--ш3); }
.склад { background: var(--молоко); border: 1px solid var(--линия);
  border-radius: var(--радиус); padding: var(--ш5); margin: 0; }
.склад dt { font-size: var(--мелкий); color: var(--туман); }
.склад dd { margin: 3px 0 var(--ш4); font-weight: 600; }
.склад dd:last-child { margin-block-end: 0; }
.склад a { color: var(--зелень-текст); }

.нет-данных { padding: var(--ш4); border: 1px dashed var(--линия); border-radius: var(--радиус-мал);
  color: var(--туман); font-size: var(--мелкий); }
.описание { color: var(--графит); margin-block-start: var(--ш4); }
.описание p { margin-block-end: var(--ш3); }

/* ── КРОШКИ ──────────────────────────────────────────────────────────── */
.крошки ol { display: flex; flex-wrap: wrap; gap: var(--ш2); list-style: none; margin: 0;
  padding: var(--ш3) 0; font-size: var(--мелкий); color: var(--туман);
  width: var(--полоса); margin-inline: auto; }
.крошки li + li::before { content: '/'; margin-inline-end: var(--ш2); color: var(--линия); }
.крошки a:hover { color: var(--зелень-текст); }

/* ── ПОДВАЛ ──────────────────────────────────────────────────────────── */
.подвал { background: var(--чернила); color: #C3C7CC; padding-block: clamp(32px, 4vw, 56px) var(--ш5);
  margin-block-start: var(--ш7); }
.подвал__сетка { display: grid; gap: clamp(20px, 3vw, 40px);
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.подвал__сетка > * { min-width: 0; }
.подвал b { display: block; color: #fff; margin-block-end: var(--ш2); font-size: var(--мелкий); }
.подвал p, .подвал span { font-size: var(--мелкий); color: #8C9299; }
.подвал__список a { display: block; padding-block: 4px; font-size: var(--мелкий); transition: color var(--ход); }
.подвал__список a:hover { color: var(--зелень); }
.подвал__низ { margin-block-start: var(--ш5); padding-block-start: var(--ш4);
  border-block-start: 1px solid rgba(255,255,255,.12); font-size: var(--мелкий); color: #8C9299;
  display: flex; flex-wrap: wrap; gap: var(--ш3); justify-content: space-between; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; }
  /* Выключенное движение обязано РАСКРЫВАТЬ спрятанное. */
  .всплыв { opacity: 1 !important; transform: none !important; }
  .верх__кадр--1, .верх__кадр--4 { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ПОДБОР СО СКЛАДА — облик.

   Решение темы номер 1 («число главнее картинки») здесь доведено до
   предела: строка вместо плитки. Прораб сравнивает сечение и цену
   столбцом, а сетка плиток заставляет его прыгать глазами.

   Снимок 44×34 оставлен намеренно: он не для красоты, а чтобы отличить
   фанеру от ЦСП, не читая. Больше делать нельзя — 129 строк перестанут
   помещаться, а плотность это второе решение темы.
   ═══════════════════════════════════════════════════════════════════════ */

/* Подпись для чтения с экрана. Не display:none — тот убирает узел из
   дерева доступности, и поле остаётся безымянным. */
.скрыто {
  position: absolute; inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.подбор { background: var(--молоко); }

/* ── ПУЛЬТ ───────────────────────────────────────────────────────────── */
.пульт {
  display: grid; gap: var(--ш2);
  grid-template-columns: minmax(220px, 2.4fr) repeat(4, minmax(0, 1fr)) auto;
  align-items: stretch;
  margin-block-end: var(--ш3);
}
/* min-width:auto у элемента сетки — причина большинства выездов вправо:
   длинное имя раздела в select распирает колонку за край экрана. */
.пульт > * { min-width: 0; }

.пульт input[type="search"],
.пульт select {
  inline-size: 100%; block-size: 100%;
  min-block-size: 44px;               /* палец, а не курсор */
  padding: 0 var(--ш3);
  font: inherit; font-size: var(--мелкий); color: var(--чернила);
  background: var(--белый);
  border: 1px solid var(--линия); border-radius: var(--радиус-мал);
  transition: border-color var(--ход), box-shadow var(--ход);
}
.пульт input[type="search"] { padding-inline-start: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236A7079' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 11px 50%; background-size: 18px; }

.пульт input[type="search"]:focus-visible,
.пульт select:focus-visible,
.пульт__сброс:focus-visible {
  outline: 2px solid var(--зелень-тёмная); outline-offset: 2px;
  border-color: var(--зелень-тёмная);
}
.пульт input[type="search"]:hover, .пульт select:hover { border-color: var(--туман); }

.пульт__сброс {
  min-block-size: 44px; padding-inline: var(--ш4);
  font: inherit; font-size: var(--мелкий); color: var(--графит);
  background: var(--белый); cursor: pointer;
  border: 1px solid var(--линия); border-radius: var(--радиус-мал);
  transition: color var(--ход), border-color var(--ход);
}
.пульт__сброс:hover { color: var(--зелень-текст); border-color: var(--зелень-тёмная); }

/* ── СПРАВКА ПО СОРТАМ ───────────────────────────────────────────────── */
.справка { margin-block-end: var(--ш3); font-size: var(--мелкий); }
.справка summary {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--зелень-текст); cursor: pointer;
  padding-block: 6px;
}
.справка summary::marker { color: var(--туман); }
.справка p {
  margin: var(--ш2) 0 0; max-inline-size: 70ch;
  color: var(--графит); line-height: 1.6;
}
.справка b { color: var(--чернила); font-variant-numeric: tabular-nums; }

/* ── СЧЁТ И ПУСТОТА ──────────────────────────────────────────────────── */
.подбор__счёт {
  margin: 0 0 var(--ш2); color: var(--туман); font-size: var(--мелкий);
  font-variant-numeric: tabular-nums;
}
.подбор__пусто {
  margin: var(--ш4) 0 0; padding: var(--ш5);
  color: var(--графит); background: var(--белый);
  border: 1px dashed var(--линия); border-radius: var(--радиус-мал);
}

/* ── СПИСОК ──────────────────────────────────────────────────────────── */
.подбор__список {
  border: 1px solid var(--линия); border-radius: var(--радиус);
  background: var(--белый); overflow: hidden;
}

.строка {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto auto;
  align-items: center; gap: var(--ш3);
  padding: var(--ш2) var(--ш4);
  color: inherit; text-decoration: none;
  border-block-start: 1px solid var(--линия);
  transition: background-color var(--ход);
}
.строка:first-child { border-block-start: 0; }
/* СКРЫТИЕ ОБЯЗАНО ПОБЕЖДАТЬ РАСКЛАДКУ.
   Браузерное правило [hidden]{display:none} — часть его собственной
   таблицы, а любое авторское правило сильнее её независимо от веса.
   Поэтому .строка{display:grid} молча оставляла отфильтрованные строки
   на экране: свойство hidden стояло, а человек видел весь склад.
   Поймано снимком, а не проверкой: проверка читала то же свойство,
   которое сама и выставила, и была вечно зелёной. */
.строка[hidden] { display: none; }

.строка:hover { background: var(--зелень-фон); }
.строка:focus-visible { outline: 2px solid var(--зелень-тёмная); outline-offset: -2px; }

.строка__кадр { display: flex; align-items: center; justify-content: center;
  block-size: 34px; }
.строка__кадр img { inline-size: 44px; block-size: 34px; object-fit: contain; }

.строка__имя { min-width: 0; display: flex; flex-direction: column; }
.строка__имя i { font-style: normal; font-size: .72rem; color: var(--туман); }

.строка__сорт {
  font-size: var(--мелкий); color: var(--графит); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.строка__цена {
  font-weight: 600; white-space: nowrap;
  font-variant-numeric: tabular-nums;
  min-inline-size: 8ch; text-align: end;
}

/* Узкий экран: сорт уходит под название, цена держит правый край. */
@media (max-width: 860px) {
  .пульт { grid-template-columns: 1fr 1fr; }
  .пульт__поиск { grid-column: 1 / -1; }
  .пульт__сброс { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .строка { grid-template-columns: 36px minmax(0, 1fr) auto; padding-inline: var(--ш3); }
  .строка__кадр img { inline-size: 36px; block-size: 28px; }
  .строка__сорт { grid-column: 2; grid-row: 2; }
  .строка__цена { grid-column: 3; grid-row: 1 / span 2; }
}

/* ═══════════════════════════════════════════════════════════════════════
   СЪЁМКА СО СТАРОГО САЙТА.

   До этого у склада пиломатериалов не было ни одной фотографии
   производства — только вырезки товаров на белом. Настоящая съёмка
   лежала в снимке исходника и в сборку не поехала: 198 файлов, 25,3 МБ.

   Полоса намеренно НЕ на первом экране. Первый экран у торговой витрины
   принадлежит товару и поиску; фотография ставится там, где человек уже
   понял, что ему нужно, и решает, ехать ли за этим сюда.
   ═══════════════════════════════════════════════════════════════════════ */

.полоса-фото {
  position: relative; isolation: isolate;
  display: grid; align-items: end;
  min-block-size: clamp(220px, 26vw, 380px);
  overflow: hidden;
  background: var(--чернила);
}
.полоса-фото__кадр {
  grid-area: 1 / 1; inline-size: 100%; block-size: 100%;
  object-fit: cover; object-position: 50% 42%;
}
/* Затемнение снизу: белый текст поверх фотографии без подложки нечитаем
   на светлых участках. Градиент, а не сплошная заливка, — иначе кадр
   превращается в серое пятно. */
.полоса-фото__текст {
  grid-area: 1 / 1; align-self: end; inline-size: 100%;
  padding-block: var(--ш7) var(--ш5);
  background: linear-gradient(to top,
    rgba(15, 17, 20, .86) 0%, rgba(15, 17, 20, .62) 45%, rgba(15, 17, 20, 0) 100%);
}
.полоса-фото__место {
  margin: 0; color: #fff; font-size: var(--h3); font-weight: 600;
  text-wrap: balance;
}
.полоса-фото__низ {
  margin: var(--ш2) 0 0; color: #D8DCD6; font-size: var(--мелкий);
  max-inline-size: 60ch;
}
/* Зелёный #90BF33 на затемнении даёт 5.4:1 — выше нормы AA для мелкого
   текста. Тёмный вариант здесь НЕ годится: он рассчитан на белый фон. */
.полоса-фото__низ a {
  color: var(--зелень); text-decoration: underline; text-underline-offset: 3px;
}
.полоса-фото__низ a:hover { color: #fff; }

/* ── ДВА КАДРА В БЛОКЕ СКЛАДА ────────────────────────────────────────── */
.склад-кадры {
  display: grid; gap: var(--ш2);
  grid-template-columns: 1.26fr 1fr;   /* пропорции самих кадров */
  margin-block-start: var(--ш5);
  max-inline-size: 560px;
}
.склад-кадры > * { min-width: 0; }
.склад-кадры img {
  inline-size: 100%; block-size: 100%; max-block-size: 240px;
  object-fit: cover; border-radius: var(--радиус-мал);
  border: 1px solid var(--линия);
}

@media (max-width: 560px) {
  .полоса-фото__текст { padding-block: var(--ш6) var(--ш4); }
  .склад-кадры { grid-template-columns: 1fr 1fr; gap: var(--ш1); }
  .склад-кадры img { max-block-size: 150px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ЗАПРОС НА СКЛАД.

   Форма стоит сразу после подбора и набрана его же средствами: те же поля
   44 точки высотой, та же рамка, тот же зелёный фокус. Отдельного облика
   у формы нет намеренно — она продолжение подбора, а не новый экран.
   ═══════════════════════════════════════════════════════════════════════ */

.запрос { background: var(--зелень-фон); }
.запрос__в {
  display: grid; gap: clamp(20px, 3vw, 44px);
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: start;
}
.запрос__в > * { min-width: 0; }
.запрос__текст h2 { margin: 0 0 var(--ш3); }
.запрос__текст p { margin: 0; color: var(--графит); max-inline-size: 46ch; }
.запрос__текст a { color: var(--зелень-текст); }

.запрос__форма {
  display: grid; gap: var(--ш3);
  grid-template-columns: 1fr 1fr;
}
.запрос__форма > * { min-width: 0; }
.поле { display: grid; gap: 6px; }
.поле--широкое { grid-column: 1 / -1; }
.поле label { font-size: var(--мелкий); color: var(--графит); }
.поле input, .поле textarea {
  inline-size: 100%; min-block-size: 44px;      /* палец, а не курсор */
  padding: 10px var(--ш3);
  font: inherit; font-size: var(--текст); color: var(--чернила);
  background: var(--белый);
  border: 1px solid var(--линия); border-radius: var(--радиус-мал);
  transition: border-color var(--ход);
}
.поле textarea { min-block-size: 84px; resize: vertical; }
.поле input:hover, .поле textarea:hover { border-color: var(--туман); }
.поле input:focus-visible, .поле textarea:focus-visible {
  outline: 2px solid var(--зелень-тёмная); outline-offset: 2px;
  border-color: var(--зелень-тёмная);
}
/* Поле с ошибкой отмечается и цветом, и текстом рядом: одним цветом
   нельзя — дальтонизм у 8% мужчин. */
.поле input[aria-invalid="true"], .поле textarea[aria-invalid="true"] {
  border-color: var(--красный-текст);
}
.поле__ошибка { margin: 0; font-size: var(--мелкий); color: var(--красный-текст); }

/* Ловушка для роботов. НЕ display:none и НЕ type=hidden — и то и другое
   роботы узнают. Уводим за край экрана, оставляя поле настоящим. */
.ловушка {
  position: absolute; inset-inline-start: -9999px;
  inline-size: 1px; block-size: 1px; overflow: hidden;
}

.запрос__низ {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--ш3);
}
.запрос__ответ { margin: 0; font-size: var(--мелкий); color: var(--графит); }
.запрос__ответ[data-вид="ок"]    { color: var(--зелень-текст); font-weight: 600; }
.запрос__ответ[data-вид="беда"]  { color: var(--красный-текст); }

@media (max-width: 860px) {
  .запрос__в { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .запрос__форма { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ВИТРИНА: СКЛАД ВИДНО НА ПЕРВОМ ЭКРАНЕ.

   Было: четыре вырезки товара на белом и ни одного снимка склада.
   Плотность — второе решение темы, поэтому кадр входит полосой, а не
   половиной экрана: 129 позиций и 18 разделов обязаны остаться в поле
   зрения.
   ═══════════════════════════════════════════════════════════════════════ */

.верх__полоса-кадра {
  margin-block-start: clamp(18px, 2.4vw, 28px);
  border-radius: var(--радиус);
  overflow: hidden; line-height: 0;
  border: 1px solid var(--линия);
}
.верх__полоса-кадра img {
  inline-size: 100%; block-size: auto;
  aspect-ratio: 21 / 7;
  object-fit: cover; object-position: 50% 55%;
}

/* ── ОБЛОЖКИ РАЗДЕЛОВ ───────────────────────────────────────────────── */
/* Значок 30×30 не показывает материал. Обложка берётся из товара самого
   раздела: на обложке фанеры лежит фанера. */
.раздел__кадр {
  display: block; inline-size: 56px; block-size: 56px; flex: 0 0 auto;
  border-radius: var(--радиус-мал); overflow: hidden;
  background: var(--белый); border: 1px solid var(--линия);
}
.раздел__кадр img {
  inline-size: 100%; block-size: 100%;
  /* cover, а не contain. У четырёх разделов снимка товара нет вовсе —
     только чертежи с размерами, и обложка там вырезана из середины
     чертежа: это текстура древесины, а не вырезка на белом. contain
     оставил бы вокруг неё белые поля, и плитка выглядела бы пустой.
     Вырезки на белом при cover теряют миллиметры полей — это не потеря. */
  object-fit: cover;
  transition: transform var(--ход-длинный);
}
.раздел:hover .раздел__кадр img { transform: scale(1.07); }

/* Плитка стала выше — сетке нужна колонка пошире, иначе название
   раздела ломается на три строки. */
.разделы { grid-template-columns: repeat(auto-fill, minmax(min(268px, 100%), 1fr)); }

@media (max-width: 560px) {
  .раздел__кадр { inline-size: 46px; block-size: 46px; }
  .верх__полоса-кадра img { aspect-ratio: 16 / 9; }
}

@media (prefers-reduced-motion: reduce) {
  .раздел:hover .раздел__кадр img { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ПЕРВЫЙ ЭКРАН — СКЛАД ФОНОМ.

   Было: вырезки товара на бледно-зелёном и узкая полоса кадра под
   кнопками. Товар показан, места не видно.

   Отличие от «Лесного двора» намеренное: там штабель во всю ширину и
   затемнение снизу, здесь стеллажи и затемнение СЛЕВА — текст держит
   левую треть, кадр остаётся открытым справа. Общий движок производит
   родню, если его не остановить.
   ═══════════════════════════════════════════════════════════════════════ */
.верх {
  position: relative; isolation: isolate;
  background: #10201A;
  overflow: hidden;
}
.верх::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background-image: url("./foto/fon.jpg");
  background-size: cover;
  background-position: 62% 50%;
}
.верх::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to right, rgba(9, 22, 12, .92) 0%, rgba(9, 22, 12, .74) 46%, rgba(9, 22, 12, .34) 100%),
    rgba(9, 22, 12, .34);
}
.верх__в {
  align-items: center;
  min-block-size: clamp(420px, 54vh, 620px);
  padding-block: clamp(36px, 5vw, 76px);
}
/* Текст был тёмным по светло-зелёному. По фотографии он обязан стать
   светлым, иначе не читается ни при каком затемнении. */
.верх h1, .верх p { color: #fff; }
.верх h1 { text-shadow: 0 2px 18px rgba(4, 12, 6, .55); }
.верх p { color: #E4EAE0; }
/* Вырезки товара остаются, но становятся мельче и уходят вправо: на
   фотографии склада они читаются как товар на витрине, а не как главное. */
.верх__кадры { opacity: .97; }
.верх__полоса-кадра { display: none; }   /* полоса была заменой фона */

.верх .кнопка--рамка { color: #fff; border-color: rgba(255,255,255,.55); }
.верх .кнопка--рамка:hover { border-color: #fff; }

/* ═══════════════════════════════════════════════════════════════════════
   ПОЛОСА СЪЁМКИ СРАЗУ ПОД ПЕРВЫМ ЭКРАНОМ.

   Кадр 1777 точек шириной идёт на полосу 1440 — то есть СЖИМАЕТСЯ, а не
   растягивается. Это единственный широкий кадр без вжжённой надписи во
   всём снимке сайта; всё остальное пришлось бы тянуть в три с лишним
   раза, и это было бы мыло.
   ═══════════════════════════════════════════════════════════════════════ */
.полоса-фото { min-block-size: clamp(200px, 24vw, 340px); }
.полоса-фото__кадр { object-position: 50% 46%; }

/* ── ПАРТНЁРЫ ────────────────────────────────────────────────────────── */
.партнёры { background: var(--молоко); }
.партнёры__ряд {
  display: grid; gap: var(--ш3);
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
}
.партнёры__ряд > * { min-width: 0; }
.партнёр {
  display: block; border: 1px solid var(--линия); border-radius: var(--радиус-мал);
  overflow: hidden; background: var(--белый); line-height: 0;
}
.партнёр img { inline-size: 100%; block-size: auto; }

/* ── СТРАНИЦА ТОВАРА: ЗАКАЗ И НАЛИЧИЕ ───────────────────────────────────
   Было: одна кнопка «Позвонить» и пустая половина колонки. Замер по всем
   видам страниц дал форм 0 на 129 карточках. */
.наличие {
  display: inline-flex; align-items: center; gap: 6px;
  margin-inline-start: var(--ш3);
  padding: 4px 10px; border-radius: 100px;
  font-size: var(--мелкий); font-weight: 600;
  color: var(--зелень-текст); background: var(--зелень-фон);
}
.наличие::before { content: ""; inline-size: 7px; block-size: 7px;
  border-radius: 50%; background: var(--зелень-тёмная); }
.наличие--нет { color: var(--графит); background: var(--молоко); }
.наличие--нет::before { background: var(--туман); }

.лист__кнопки { display: flex; flex-wrap: wrap; gap: var(--ш3); margin-block-start: var(--ш5); }

.заказ { background: var(--зелень-фон); }
.заказ__в {
  display: grid; gap: clamp(20px, 3vw, 44px);
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: start;
}
.заказ__в > * { min-width: 0; }
.заказ__текст h2 { margin: 0 0 var(--ш3); }
.заказ__текст p { margin: 0; color: var(--графит); max-inline-size: 44ch; }
.заказ__текст a { color: var(--зелень-текст); }
@media (max-width: 860px) { .заказ__в { grid-template-columns: 1fr; } }

.исходный-баннер{width:min(1440px,calc(100% - 32px));margin:40px auto}.исходный-баннер a{display:block}.исходный-баннер img{display:block;width:100%;height:auto;object-fit:contain;border-radius:8px}@media(max-width:600px){.исходный-баннер{width:calc(100% - 20px);margin:24px auto}}
.source-carousel figure{margin:0}.source-carousel img{display:block;width:100%;height:auto!important;object-fit:contain!important}.source-carousel [hidden]{display:none!important}.carousel-controls,.shop-nav,.collection-links,.source-contacts{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;padding:16px}.carousel-controls button,.shop-actions button,.saved-product button,.cart-summary button{padding:10px;border:1px solid #608840;background:#fff;color:#243b16;cursor:pointer;border-radius:4px}.carousel-controls button[aria-pressed=true],.shop-actions button[aria-pressed=true]{background:#608840;color:#fff}.shop-card{min-width:0}.shop-card>.товар{height:auto}.shop-actions{display:flex;flex-wrap:wrap;gap:8px;padding:12px 0}.shop-actions a{padding:10px}.saved-products{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:24px}.saved-product{padding:16px;border:1px solid #d5dec9;min-width:0}.saved-product img{object-fit:contain;max-width:100%}.saved-product h2{font-size:20px}.saved-product input{width:90px;padding:8px}.cart-summary{margin-top:24px;padding:20px;background:#f2f8e8}.cart-copy{display:block;width:100%;margin-top:16px;min-height:120px}.compare-scroll{overflow-x:auto}.compare-scroll table{border-collapse:collapse;min-width:600px}.compare-scroll th,.compare-scroll td{border:1px solid #d5dec9;padding:16px;min-width:160px;vertical-align:top}.compare-scroll button{display:block;margin-top:10px}.shop-status{position:fixed;bottom:12px;left:12px;right:12px;z-index:100;background:#263c1a;color:white;padding:12px;pointer-events:none;max-width:600px;margin:auto}.source-shelf .товары{align-items:start}.source-contacts{background:#f2f8e8}.collection-links a{padding:8px}.shop-nav{border-bottom:1px solid #d5dec9;font-size:14px}.shop-nav span{font-weight:bold}