/* КАРТОЧКА СОРТА: две колонки, галерея, переключатель размера, окошки, цена (дорожка A волны 2).

   🔴 ВИД ПРИВЕДЁН К УТВЕРЖДЁННОМУ МАКЕТУ `..\ozelenenie\maket\volna-2\15-kartochka.jpg`
   (волна 2, `docs/spec/v2-a-product-card.md`). Макет утверждён Кириллом лично 01.08.2026 после
   шести отбракованных вариантов, и правило работы с ним прямое: когда привычка спорит
   с макетом, побеждает макет. Поэтому здесь не «сжато поаккуратнее», а: крупная фотография
   со скруглением, ровный ряд миниатюр, песочные плашки посадки и гарантии под ценой, щедрые
   строки размеров и две развернутых во всю ширину полосы — описание и характеристики.

   ⚠️ МЕНЯЛСЯ ТОЛЬКО ВИД. Механика — галерея, переключатель ссылками, окошки, счётчик, корзина —
   осталась ровно та же: волна 2 приводит к макету уже построенное, а не строит новое.

   🔴 ПЕРЕСОБРАНА КУСКОМ Н2 (`docs/spec/n2-product-card-two-columns.md`) после требования Кирилла
   01.08.2026 «надо исправлять». Корень был структурный: страница шла в ОДНУ колонку, фотография
   занимала первый экран целиком, и человек не видел ни цены, ни кнопки, пока не прокрутит.

   🔴 ЗДЕСЬ СТОЯЛО «Раскладку в две колонки страница не получает — текст шире `--width-text`
   не читается». Снято: правило верно для СТАТЬИ и неверно для товара. У товара справа не текст,
   а решение о покупке — цена, наличие, размер, кнопка, — и его место рядом с фотографией,
   а не под ней. Ограничение ширины при этом никуда не делось, оно переехало на те блоки,
   которые действительно текст: описание и таблицу характеристик (см. низ файла).

   🔴 ОДИН ФАЙЛ НА ОБА ЭКРАНА И ОДНА РАЗМЕТКА. Колонки делает сетка, а порядок строк на узком
   экране — свойство `order`. Двух шаблонов у страницы нет и быть не может: они разъедутся
   на первой же правке, и увидит это клиент с телефона, а не мы с монитора (🅱️5).

   🔴 НИ ОДНОГО КОДА ЦВЕТА В ЭТОМ ФАЙЛЕ. Все цвета — именами ролей из `tokens.css`: набери
   здесь свой зелёный, и на одной странице окажутся два зелёных, причём разъедутся они молча —
   браузер на несовпадение оттенков не жалуется (🅱️5). Проверяется это не глазами:
   `core/site/tests/test_product_card.py`, проверка U-8-01 читает файл и краснеет на любом коде.

   🔴 Классы `.availability`, `.availability--none` и `.zvonok` СЮДА НЕ ПЕРЕЕЗЖАЮТ: они про состояние
   товара и стоят и в разделе, и в карточке, поэтому владелец у них один — `site.css`.
   Переопределять их здесь нельзя, иначе одно слово начнёт означать в двух местах разное.
   Единственное, что этот файл делает с ними, — снимает отступ АБЗАЦА внутри своей строки
   доверия: это раскладка моего блока, а не вид состояния товара.

   🔴 Мобильный вид первым (3.3): узкий экран получает простой поток сверху вниз, широкому
   добавляются колонки. Каталог растений смотрят с телефона, стоя на участке.

   ═══════════════════════════════════════════════════════════════════════════════
   🔴 ПЕРЕНОС ВИДА 05.08.2026, спецификация `docs/spec/v10-visual-transfer.md`, кусок 4.

   Что изменилось под страницей: рамка сайта положила ОДИН закреплённый слой видео на всё
   окно (`.backdrop` в `site.css`), и карточка теперь лежит поверх движущейся картинки,
   а не поверх ровной краски. Отсюда три следствия, и все три видны глазом:

   1. Сплошная заливка блока закрывает видео наглухо и возвращает стык, ради снятия которого
      фон и переделывался. Поэтому крупный снимок, полосы, поле размера, плашки и плитки
      стали СТЕКЛОМ: `--steklo-panel` под крупной панелью, `--steklo-plitka` под мелким
      блоком, `--fon-kartochki` там, где сквозь блок читают текст.

   2. Тёмная линия на живом фоне читается как царапина на стекле: под ней видно кадр.
      Все границы — светлая кромка `--frame`, под курсором `--frame-navedenie`.
      ⚠️ У ленты миниатюр рамка была цвета полотна страницы (`--fon`) — на видео она стала
      бы тёмным штрихом вокруг каждого снимка. Теперь она `transparent`: место занимает,
      краски не кладёт.

   3. Зелёный `--akcent` — единственный цвет действия на сайте (решение Кирилла 04.08.2026,
      дословно: «я уже говорил что песочные кнопки это пиздец, их надо убрать»). Значит
      залитая зелёным плашка «Посадка 30%» читалась бы как вторая кнопка рядом с «В корзину».
      Плашки стали стеклом; зелёная заливка осталась ровно у ДВУХ предметов, и оба —
      выделенный факт, а не действие: гарантия (`--zalivka-glavnaya`) и выбранная строка
      размера.

   ⛔ `backdrop-filter` в этом файле нет ни одного и заводить его нельзя: размытие остаётся
   ровно на шапке сайта. Замер 04.08.2026 — 108 кадров в секунду против 135.

   ⛔ В переходах меняются положение и прозрачность, цвет кромки и заливка. Ни `filter`,
   ни `box-shadow`, ни `width`: замер того же дня дал 20 длинных кадров против 1. Отсюда
   у кнопки «В корзину» пропало `filter: brightness` — тень и рамка меняются мгновенно,
   а поднимается кнопка по-прежнему плавно.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Ширина страницы товара ──────────────────────────────────────────────── */
/* 🔴 Шире текстовой колонки, и приём тот же, что у страницы раздела (`catalog.css`): правило
   стоит ЗДЕСЬ, потому что этот файл подключает только карточка, — текстовые страницы своей
   ширины не меняют, и трогать рамку сайта ради товара не пришлось.

   Без этой строки двух колонок не бывает вовсе: в 46 см текстовой колонки фотография и блок
   покупки не помещаются рядом ни на каком экране. */
/* 🔴 КОЛОНКА СТРАНИЦЫ ЗАДАЁТСЯ ПЕРЕМЕННОЙ, А НЕ ШИРИНОЙ `main`. До 08.08.2026 здесь стояло
   `main { max-width: var(--width-catalog) }`, и этого было мало: рамка сайта рисует ещё
   и подвал, а он о ширине страницы не знал ничего и вставал во всю ширину окна. На мониторе
   2540 текст начинался на 918-й точке, подвал под ним — на 19-й.

   Теперь страница объявляет СВОЮ колонку, а `main` и подвал берут её оба (`site.css`). */
:root {
  --width-page: var(--width-catalog);
}

/* ── Каркас страницы ─────────────────────────────────────────────────────── */
/* 🔴 СТРАНИЦА — ОБЫЧНЫЙ ПОТОК, А ДВЕ КОЛОНКИ ДЕЛАЕТ ОТДЕЛЬНАЯ ПОЛОСА `.product__verh`.
   Здесь стояла сетка на всю страницу, и в ней прилипающая колонка стояла клеткой второй
   строки — вместе с блоками описания, характеристик и похожих, лежавшими строками ниже.

   🔴 ЭТО И БЫЛ ПУНКТ 16 КИРИЛЛА: «при мотании колесика ui элементы НАСЛАИВАЮТСЯ, это пиздец».
   Корень найден ЗАМЕРОМ живым браузером, а не рассуждением (🅰️19): клетка сетки ограничивает
   только абсолютно спозиционированного ребёнка, а обычный ребёнок считает границы прилипания
   по контейнеру целиком. Контейнером была вся страница товара — колонка и уезжала поверх всего,
   что ниже. На 1440×900 замер дал 69 пересечений за одну прокрутку, на 1024×640 — 73.

   🔴 Лечение уровня причины: у полосы двух колонок появился свой узел, и он же стал границей.
   Пределов высоты, потолков и запасов снизу здесь нет ни одного — колонке просто больше
   некуда ехать. Число, подобранное на глаз, устарело бы на первом же новом блоке (🅰️23). */
.product {
  display: flow-root;
}

/* Полоса двух колонок. На узком экране колонки одна: фотография, под ней блок покупки —
   ровно тот порядок, в котором они стоят в разметке. Сетка объявлена и здесь, хотя колонка
   одна, чтобы широкому экрану осталось добавить вторую, а не переустраивать раскладку. */
.product__verh {
  display: grid;
  row-gap: 0;
}

/* ── Хлебные крошки ──────────────────────────────────────────────────────── */
/* Стрелка рисуется ЗНАКОМ ПЕРЕД шагом, а не разделителем в разметке: разделитель в тексте
   прочитал бы вслух экранный диктор и увидел бы робот нейросети, а это оформление, а не слово.
   Первый шаг стрелки не получает — соседского селектора перед ним нет по устройству.

   ⚠️ Знак сменился с «→» на «›» по макету: жирная стрелка тянула на себя взгляд наравне
   с названиями разделов, а крошки — это подпись пути, а не навигация первого плана. */
.kroshki {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--o-1) var(--o-2);
  margin: var(--o-5) 0 0;
  font-size: var(--t-s);
  color: var(--tekst-tihiy);
}

.kroshki__shag + .kroshki__shag::before {
  content: "·";
  margin-right: var(--o-2);
}

/* Текущая страница — обычным текстом и цветом основного текста: она не ссылка, потому что
   ведёт на саму себя. */
.kroshki__shag--zdes { color: var(--tekst); }

/* 🔴 БЕЗ ПОДЧЁРКИВАНИЯ. Правка Кирилла 11, дословно: «деревья с нижним подчеркиванием»,
   и общим пунктом 2: «нижние подчеркивания все убираем в визуале сразу».

   ⚠️ Ссылка при этом остаётся отличимой от текста: она песочная, а соседние шаги крошек —
   тихие и светлый. Убрать подчёркивание и не оставить ни одного признака означало бы
   спрятать саму ссылку. */
.kroshki a { text-decoration: none; }

/* ── Заголовок сорта ─────────────────────────────────────────────────────── */
/* Название — самый крупный элемент страницы, цена сразу за ним. Латынь под названием и серым:
   она для тех, кто сверяет сорт по прайсу, а не для покупателя. */
.product__header { margin: 0; }

.product__name { margin: var(--o-4) 0 var(--o-1); font-size: var(--t-xxl); }

.product__latin {
  margin: 0 0 var(--o-5);
  color: var(--tekst-tihiy);
  font-style: italic;
  font-size: var(--t-m);
}

/* Кегли берутся шкалой `--t-*`, а не набираются в единицах: шкала уменьшена решением Кирилла
   04.08.2026 целиком, и своё число рядом с ней означало бы, что на одной странице живут две
   разные лестницы размеров. */
.product__subtitle { margin: var(--o-6) 0 var(--o-4); font-size: var(--t-xl); }

/* ── Галерея ─────────────────────────────────────────────────────────────── */
.gallery { margin: var(--o-4) 0 var(--o-5); }

/* 🔴 ПОДЛОЖКА СНИМКА СТАЛА СТЕКЛОМ, 05.08.2026 (v10, раздел 4). Здесь стояла сплошная
   зелёная заливка `--fon-vybran`, и это был САМЫЙ БОЛЬШОЙ прямоугольник краски на карточке:
   снимок стоит `contain`, то есть до краёв рамки не достаёт, и по бортам оставалась широкая
   полоса сплошного цвета — ровно на пол-экрана, поверх живого видео.
   Теперь борта — `--steklo-panel`, и сквозь них видно тот же фон, что и вокруг карточки.

   🔴 ОБЪЁМ, 02.08.2026 — по прототипу, одобренному Кириллом. Снимок не лежит в плоскости
   страницы: крупное скругление, глубокая тень и светлая кромка по верху поднимают его над
   фоном. На тёмной гамме одной тени мало — она невидима; работает пара «тень вниз +
   подсветка сверху», и обе лежат внутри `--ten-3`. */
.gallery__large {
  position: relative;
  background: var(--steklo-panel);
  border: 1px solid var(--frame);
  border-radius: var(--r-xl);
  box-shadow: var(--ten-3);
  overflow: hidden;
}

/* 🔴 `contain` обязателен и снимается только вместе с решением канона: на странице товара
   растение должно быть видно ЦЕЛИКОМ, обрезать его нельзя (U3, Р-3).

   🔴 ВЫСОТА НА ТЕЛЕФОНЕ УРЕЗАНА С 70 ДО 40 ЕДИНИЦ ЭКРАНА — это кусок Н2 и это не вкус.
   При 70 фотография занимала весь первый экран, и цена оказывалась ниже сгиба: человек уходил,
   не узнав, сколько это стоит. Требование Р-1 прямое — цена и кнопка выше сгиба и на телефоне
   тоже. На широком экране ограничение возвращается к 70: там фотография стоит в своей колонке
   и цену собой не закрывает. */
.gallery__main {
  display: block;
  width: 100%;
  max-height: 40vh;
  object-fit: contain;
}

/* 🔴 СТРЕЛКА — ТОНКИЕ ЛИНИИ БЕЗ ОКНА И ПОЧТИ ПРОЗРАЧНАЯ. Правка Кирилла 13, дословно:
   «стрелки поехали ( и должны быть тонкими линями, без серого окна, почти прозрачные,
   не закрывать фото».

   ⛔ Здесь стояла кнопка с заливкой карточки, рамкой и скруглением — то самое «серое окно».
   Снято целиком: ни заливки, ни рамки, ни радиуса. Осталась площадь для пальца — она
   прозрачна и потому фотографию не закрывает, а нажимается по-прежнему во всю свою величину.

   🔴 «Не закрывать фото» решается двумя вещами сразу: прозрачностью и КРАЕМ. Стрелки прижаты
   к самому борту рамки, а крупный снимок стоит `contain` — то есть по бортам у него поля
   подложки, и в них стрелки и попадают. На снимке они оказываются только тогда, когда он
   заполняет рамку целиком, и там их держит прозрачность.

   ⚠️ Прозрачность задана долей, а не цветом с прозрачностью: код цвета в файле дорожки
   запрещён (Р-8), а доля — это не цвет, а сколько его видно. При наведении стрелка проявляется
   полностью: человек уже поднёс к ней курсор, прятать её больше не от кого. */
.gallery__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 3.4rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--tekst);
  opacity: 0.45;
  cursor: pointer;
}

.gallery__arrow:hover,
.gallery__arrow:focus-visible { opacity: 1; }

/* Сам уголок: две тонкие линии, повёрнутые на четверть оборота, — тот же приём, которым
   нарисована стрелка разворачиваемой полосы внизу страницы. Знаком из шрифта он не печатается:
   толщина и рост знака в каждой системе свои, и именно из-за этого стрелка «поехала» —
   она стояла в кнопке не по центру. У повёрнутых рамок центра мимо не бывает. */
.gallery__corner {
  width: 0.85rem;
  height: 0.85rem;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
}

.gallery__arrow--back { left: 0.2rem; }
.gallery__arrow--forward { right: 0.2rem; }

.gallery__arrow--back .gallery__corner {
  transform: translateX(0.2rem) rotate(-135deg);
}

.gallery__arrow--forward .gallery__corner {
  transform: translateX(-0.2rem) rotate(45deg);
}

/* 🔴 ЛЕНТА — РОВНЫЙ РЯД ИЗ ЧЕТЫРЁХ, а не полоса с прокруткой вбок (волна 2, Р-1: «лента
   миниатюр под ней ровным рядом из четырёх»). Здесь стояло `overflow-x: auto` с доводом
   «прокрутка не съедает пол-экрана» — снято макетом: у прокрутки вбок нет видимого края,
   и снимки за краем человек просто не находит, а четыре в ряд помещаются даже в поле телефона.

   Сетка, а не гибкая строка: при пяти и более снимках второй ряд встаёт под первым ровно
   тем же шагом, а при двух миниатюры остаются своего размера и не растягиваются на всю ширину.
   Четвёртая колонка при этом задана числом — это ряд с макета, а не «сколько поместится». */
.gallery__strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--o-2);
  list-style: none;
  margin: var(--o-3) 0 0;
  padding: 0;
}

/* Рамка стоит у КАЖДОЙ миниатюры, а не только у текущей: появись она только при отметке —
   лента дёргалась бы на две точки при каждом переключении.

   🔴 У НЕТЕКУЩИХ ОНА СТАЛА ПРОЗРАЧНОЙ, 05.08.2026 (v10). Здесь стоял цвет полотна страницы
   (`--fon`) с доводом «цвет фона и означает — рамки не видно». На сплошном полотне это было
   верно; под страницей теперь едет видео, и та же рамка превратилась в тёмный штрих вокруг
   каждой из четырёх миниатюр — четыре царапины на стекле подряд. `transparent` держит то же
   место и не кладёт краски вовсе; цветом это не является, и сторож цветов на него молчит.

   🔴 ОБЪЁМ, 02.08.2026: нетекущие миниатюры приглушены, текущая — в зелёной обводке
   и с тенью. Раньше все были одинаково яркими, и выбранная не читалась. Под курсором
   миниатюра слегка поднимается — это единственный способ показать, что она нажимается. */
.gallery__small {
  border: 2px solid transparent;
  border-radius: var(--r-s);
  line-height: 0;
  opacity: .62;
  transition: opacity var(--hod), border-color var(--hod), transform var(--hod);
}

.gallery--live .gallery__small:hover {
  opacity: .9;
  transform: translateY(-2px);
}

/* Отметка текущего снимка: без неё человек не понимает, что именно он сейчас видит крупно.
   Рамка, а не заливка — миниатюра занимает всё место, заливки под ней не видно. */
.gallery__small--current {
  border-color: var(--akcent);
  opacity: 1;
  box-shadow: var(--ten-1);
}

/* Размер задан не числом, а колонкой сетки и соотношением сторон: числом он разъехался бы
   с шириной колонки на каждом новом экране, а квадрат под фотографией растения — это то,
   что стоит на макете. */
.gallery__small img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--r-xs);
}

/* Палец над мелким снимком появляется только у живой галереи: класс ставит скрипт. Без скрипта
   щелчок ничего не меняет, и обещать его курсором было бы враньём. */
.gallery--live .gallery__small img,
.gallery--live .gallery__main { cursor: pointer; }

/* ── Увеличение на весь экран ────────────────────────────────────────────── */
/* Разметку этого блока собирает скрипт: без скрипта увеличения нет вовсе (U3, Р-3), и пустой
   слой в странице был бы мусором, который через месяц никто не объяснит (🅱️23).

   Подложка НЕПРОЗРАЧНАЯ и цветом основного текста: полупрозрачность потребовала бы кода цвета
   с долей непрозрачности, а такого имени в `tokens.css` нет — и заводить его может только
   координатор. */
.uvelichenie {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--o-4);
  background: var(--fon-glubokiy);
}

.zoom__photo {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.uvelichenie__krest {
  position: absolute;
  top: var(--o-3);
  right: var(--o-3);
  min-width: 2.6rem;
  padding: var(--o-1) var(--o-3);
  border: 1px solid var(--frame);
  border-radius: var(--r-s);
  background: var(--fon-kartochki);
  color: var(--tekst);
  font: inherit;
  font-size: var(--t-xl);
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--hod);
}

.uvelichenie__krest:hover { border-color: var(--frame-navedenie); }

/* ── Правая колонка: всё, что нужно для решения о покупке ─────────────────── */
/* 🔴 ПОРЯДОК СТРОК НА УЗКОМ ЭКРАНЕ ЗАДАЁТСЯ ЗДЕСЬ, А НЕ В РАЗМЕТКЕ (Р-1). В разметке блоки
   стоят так, как их читает робот нейросети и человек с отключёнными стилями, и это порядок
   канона: название → преимущества → цена → посадка → гарантия → размеры → кнопка.

   🔴 НА ТЕЛЕФОНЕ КНОПКА «В КОРЗИНУ» СТОИТ ВЫШЕ СПИСКА РАЗМЕРОВ, и это не перестановка ради
   красоты, а вопрос Кирилла 31.07.2026 (волна 2, Р-5): при девяти размерах кнопка уезжала
   ниже сгиба, и человек её не видел. Порядок узкого экрана: название → цена → количество →
   кнопка → размеры → плашки → преимущества.

   ⚠️ Надпись «Размер» и сам выпадающий список номера больше не делят: с правки Кирилла 21 они
   лежат в ОДНОМ узле `.size` и разъехаться не могут по устройству. Прежде это были два
   соседних блока с намеренно равными номерами — согласовывать их вручную больше не нужно. */
/* 🔴 ОДИН ВЕРТИКАЛЬНЫЙ РИТМ НА ВСЮ КОЛОНКУ ПОКУПКИ. Правка Кирилла 05.08.2026, дословно:
   «весь блок с инфой о карточке кривой, у всего своя длинна, все везде торчит, ui-окна
   визуально не синхронизированны».

   Замер живого сайта до правки: расстояния между шестью блоками колонки шли
   0 · 40 · 16 · 24 · 32 точки. Каждый блок нёс свой собственный отступ, назначенный
   когда-то отдельно, и вместе они складывались в лесенку без правила.

   Стало: расстояние задаёт САМА КОЛОНКА одним значением, а собственные вертикальные
   отступы детей снимаются. Добавится седьмой блок — он встанет в тот же ритм,
   ничего не настраивая. Так же, как это сделано для полос ниже. */
.product__column {
  display: flex;
  flex-direction: column;
  gap: var(--o-5);
}

/* ⚠️ ИМЯ КЛАССА НАЗВАНО ДВАЖДЫ, И ЭТО НЕ ОПЕЧАТКА. Собственные отступы детей объявлены
   НИЖЕ по файлу с такой же силой селектора (`.price`, `.size`, `.doverie` — по одному
   классу), и при равной силе побеждает тот, кто ниже. Первый заход это и показал: зазоры
   не обнулились, а выросли ровно на величину нового расстояния — 24 · 64 · 40 · 48 · 56.
   Повтор класса поднимает силу правила на ступень и делает это без `!important`, который
   в проекте оставлен ровно одному правилу — `[hidden]`. */
.product__column.product__column > * { margin-top: 0; margin-bottom: 0; }

.product__column > .product__header { order: 1; }
.product__column > .price { order: 2; }
.product__column > .deystviya { order: 3; }
.product__column > .size { order: 4; }
.product__column > .doverie { order: 5; }
.product__column > .plyusy { order: 6; }

/* ── Три буллета-преимущества ────────────────────────────────────────────── */
/* Текст собирает сервер из данных растения (`views._pluses`), здесь только вид. Галочка —
   свой знак, а не картинка по ссылке: `default-src 'none'` запрещает загрузку откуда бы
   то ни было, и чужой значок просто не приехал бы. */
/* 🔴 ОБЪЁМ, 02.08.2026: три обещания стали плашками в строку, а не столбиком текста
   с галочками. На прототипе это первое, что отличает карточку от списка. */
.plyusy {
  display: flex;
  flex-wrap: wrap;
  gap: var(--o-2);
  list-style: none;
  margin: 0 0 var(--o-6);
  padding: 0;
}

/* Отступ между буллетами на макете щедрый: три строки читаются как три отдельных обещания,
   а не как сплошной абзац. Сжать их — ровно то «сжимание воздуха», которое запрещено. */
/* 🔴 ТАБЛЕТКА-СТЕКЛО, а не заливка (v10, раздел 4): три обещания стоят в самом верху правой
   колонки, прямо над ценой, — это первое место, где на живом фоне видно, стекло у нас
   или краска. Под курсором меняется только кромка и положение: тень и размытие в переходах
   запрещены замером. */
/* 🔴 ТРИ ПЛАШКИ ДЕЛЯТ СТРОКУ ПОРОВНУ И ДОХОДЯТ ДО ПРАВОГО КРАЯ КОЛОНКИ, 05.08.2026.
   Правка Кирилла, дословно: «весь первый блок стал ещё хуже. Это невозможно читать, каждое
   слово на разном месте».

   Замер живого сайта показал, где именно рвётся. Колонка покупки 526 точек, а внутри неё
   17 разных левых краёв и 19 правых. Три плашки шли по своему слову — 161 · 144 · 143 —
   и кончались на 1189 при правом крае колонки 1252: строка не доходила до края на 63 точки
   и обрывалась в случайном месте.

   Вертикальный ритм при этом был уже ровным: все пять зазоров между блоками по 24 точки.
   То есть «на разном месте» было не про вертикаль, а про то, что ни один край не совпадал
   с соседним.

   `flex: 1 1 0` делит строку поровну от НУЛЯ, а не от ширины слова: `1 1 auto` оставило бы
   плашки разными — длинная получила бы больше короткой. */
.benefits__row {
  display: inline-flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  gap: var(--o-2);
  margin: 0;
  padding: var(--o-2) var(--o-3);
  border: 1px solid var(--frame);
  border-radius: var(--r-pill);
  background: var(--steklo-plitka);
  font-size: var(--t-xs);
  transition: border-color var(--hod), transform var(--hod);
}

.benefits__row:hover {
  border-color: var(--frame-navedenie);
  transform: translateY(-1px);
}

.plyusy__galka { color: var(--akcent); font-weight: 700; }

/* ── Цена выбранного размера ─────────────────────────────────────────────── */
/* 🔴 Самый крупный элемент страницы после названия: человек пришёл за ценой. */
.price { margin: 0 0 var(--o-4); }
/* 🔴 КЕГЛЬ ПРИЕХАЛ ИЗ ШКАЛЫ, 05.08.2026. Здесь стояло `2rem` — 32 точки, набранные числом,
   и это было БОЛЬШЕ названия растения: `--t-xxl` тянется от 22 до 28. То есть цена была
   крупнее заголовка страницы, и иерархия стояла вверх ногами.
   Теперь цена и название одной ступени `--t-xxl`; различают их начертание и семейство —
   название набрано антиквой, цена гротеском в 600. */
.price__now { font-size: var(--t-xxl); font-weight: 600; line-height: 1.1; letter-spacing: -.015em; }
.price__before {
  margin-left: var(--o-3);
  color: var(--tekst-tihiy);
  font-size: var(--t-m);
  text-decoration: line-through;
}
/* 🔴 Карточка без размерных ступеней: на месте цены слово «Под заказ» (кусок v17).
   Кегль и начертание те же, что у цены, — строка стоит на её месте и обязана весить столько
   же, иначе колонка после названия провисает. Цвет тихий: это не цифра, за которой пришли,
   а честный ответ, что цифры сегодня нет. */
.price--under-order {
  color: var(--tekst-tihiy);
  font-size: var(--t-xxl);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.015em;
}

/* ── Доверие: две песочные плашки и строка наличия ────────────────────────── */
/* 🔴 ПЛАШКИ И ОКОШКИ — ОДНО И ТО ЖЕ, а не два блока подряд (разбор — в шаблоне). Вторая
   запись суммы посадки на той же странице была бы и вторым местом одной правды, и вторым
   узлом, который скрипт обязан не забыть подменить.

   🔴 РЯД, А НЕ СТОЛБИК (волна 2, макет): посадка и гарантия стоят рядом под ценой двумя
   песочными плашками. Здесь стояли три одинаковые строки со значком «✓» слева — снято
   макетом вместе с самим значком.

   ⚠️ Перенос по строкам обязателен и работает на раскрытие: плашка с раскрытым пояснением
   становится шире оставшегося места и уезжает на свою строку целиком, а не сплющивает
   соседнюю. Соседняя при этом остаётся плашкой — ничего не прыгает. */
/* 🔴 СТОЛБИК ОДИНАКОВЫХ СТРОК, А НЕ РЯД ПЛАШЕК ПО СЛОВУ. 05.08.2026, правка Кирилла
   «каждое слово на разном месте».

   Замер восьми страниц товара у западных питомников (`fast-growing-trees`, `naturehills`,
   `gardenersdream`, `bakker`, `davidaustin`, `paramountplants`, `monrovia` плюс Apple как
   эталон ритма) дал единый ответ: доверие подаётся СТОЛБИКОМ строк одной высоты, а не рядом
   плашек. У `fast-growing-trees` это `ul.flex flex-col gap-2` со строками про гарантию,
   доставку и наличие; у `bakker` пять строк с галочкой; у `gardenersdream` две строки
   под кнопкой.

   Ряд давал у нас две плашки шириной 175 и 197 при колонке 526 — правый край обрывался
   на 146 точек раньше края, а строка наличия под ними шла во всю ширину. Три соседние строки,
   каждая своей длины, и читаются как «на разном месте».

   ⚠️ «Посадка 30%» и «Гарантия 2 года» остаются: это наше отличие от всех восьми, ни у кого
   работы на участке нет. Меняется форма подачи, а не состав. */
.doverie {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--o-2);
  list-style: none;
  margin: 0 0 var(--o-5);
  padding: 0;
}

/* Строка столбика: своей ширины у неё нет, ширину задаёт столбик. */
.trust__row { min-width: 0; }

/* 🔴 Наличие — своей строкой во всю ширину и тихим цветом (Р-1). Цвет задан МОЕЙ строке
   и достаётся `.availability` наследованием — это не переопределение чужого класса: размер,
   начертание и отступы состояния товара остаются за `site.css`, где у них один владелец
   на раздел и на карточку (разбор — в шапке файла).

   ⚠️ Отступ абзаца внутри снимается по той же причине: это раскладка моего блока. Пояснение
   внутри раскрытого окошка под правило не подпадает — оно лежит внутри `.hint`,
   то есть не прямым потомком строки. */
/* 🔴 НАЛИЧИЕ — ТАКОЕ ЖЕ ОКОШКО, ЧТО ПОСАДКА И ГАРАНТИЯ, С ЗЕЛЁНОЙ ОБВОДКОЙ. 05.08.2026,
   правка Кирилла: «„в наличии n" галка — должно быть в своём ui-окошке, которое находится
   на одном уровне с гарантией. Но обводку окошка сделай зелёной, как окошко с „В КОРЗИНУ"».

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

   ⚠️ Зелёная кромка берётся у КНОПКИ ПОКУПКИ (`--akcent-pokupki`), а не заводится своим
   цветом: зелёный на карточке означает ровно одно — «это можно купить», — и второй зелёный
   рядом с первым стёр бы разницу между «в наличии» и «в корзину».

   ⚠️ Правило видит только строку с наличием, а не «нет в продаже»: у снятого товара
   зелёная рамка обещала бы обратное написанному внутри неё. */
.doverie__stroka--nalichie {
  color: var(--tekst-tihiy);
}

.doverie__stroka--nalichie .availability:not(.availability--none) {
  /* ⚠️ `max-width: none` обязателен: у абзацев на сайте стоит предел ширины текстовой строки,
     и без снятия окошко наличия вышло бы 717 точек при соседних 1152 — то есть встало бы
     не «на одном уровне с гарантией», а короче её. Здесь это не строка текста, а окошко. */
  max-width: none;
  padding: var(--o-2) var(--o-4);
  border: 1px solid var(--akcent-pokupki);
  border-radius: var(--r-pill);
  background: var(--steklo-plitka);
  color: var(--tekst);
  font-size: inherit;
}

.trust__row > p { margin: 0; }

/* ── Плашки «посадка» и «гарантия» ───────────────────────────────────────── */
/* 🔴 ЗАЛИВКА СНЯТА, ПЛАШКА СТАЛА СТЕКЛОМ. 05.08.2026, спецификация v10, раздел 3.

   Что было и почему это перестало работать. Плашка красилась `--akcent` с тёмным текстом
   поверх — на макете волны 2 этот цвет был ПЕСОЧНЫМ и означал «важная деталь». 04.08.2026
   Кирилл убрал песочные кнопки («я уже говорил что песочные кнопки это пиздец, их надо
   убрать»), и `--akcent` стал зелёным — единственным цветом действия на сайте. С этого дня
   плашка «Посадка 30%» выглядела ровно как кнопка «В корзину», стоящая парой строк ниже:
   две зелёные таблетки подряд, из которых нажимается одна. Человек тычет в обе.

   Что стало: корпус — `--steklo-plitka`, кромка — `--frame`, текст обычный светлый.
   Плашка по-прежнему нажимается (это `details`), и признак нажимаемости даёт круглый знак
   вопроса на слове, а не цвет заливки.

   Скругление `--r-pill`: плашка на макете — таблетка, а не карточка с уголками. */
.hint {
  position: relative;
  padding: var(--o-2) var(--o-4);
  border: 1px solid var(--frame);
  border-radius: var(--r-pill);
  background: var(--steklo-plitka);
  color: var(--tekst);
  transition: border-color var(--hod);
}

.hint:hover { border-color: var(--frame-navedenie); }

/* 🔴 ОДНА ПЛАШКА ИЗ ДВУХ ОСТАЁТСЯ ЗЕЛЁНОЙ, И ЭТО ГАРАНТИЯ. `--zalivka-glavnaya` заведена
   в палитре ровно под этот случай — «выделенный факт, а не действие», и названа там прямо
   гарантией на два года. Зелёного здесь ровно столько, сколько нужно, чтобы глаз выделил
   строку: это вуаль поверх фона, а не сплошная краска, поэтому текст на ней остаётся
   светлым, а не тёмным, — тёмный полагается только сплошной зелёной кнопке.

   ⚠️ ПРИЗНАК ВИСИТ НА СТРОКЕ СПИСКА, А НЕ НА САМОЙ ПЛАШКЕ, и это не стилистика. Проверка
   `test_u5_02` считает в теле страницы дословные вхождения `<details class="hint">` и ждёт
   ровно два: допиши модификатор в тот же атрибут — и счёт станет один, то есть исправная
   страница уронит исправный тест. Файл теста чужой, править его дорожка не имеет права. */
.trust__row--primary .hint {
  background: var(--zalivka-glavnaya);
  border-color: var(--kromka-glavnaya);
}

/* Отклик на наведение приходится объявлять зелёной плашке отдельно: у правила выше вес
   такой же, как у `.hint:hover`, и стоит оно ниже — то есть побеждает в обоих состояниях
   сразу, и кромка под курсором не светлела бы вовсе. */
.trust__row--primary .hint:hover { border-color: var(--frame-navedenie); }

/* 🔴 РАСКРЫТИЕ ПО НАВЕДЕНИЮ, 02.08.2026. Требование Кирилла дословно: «у карточки товара
   пропало всплывающее окно при наведении на посадка 30% и гарантия 2 года».

   Пояснение всплывает НАД плашкой отдельным слоем, а не раздвигает строку: раскрытие
   на месте сдвигало бы вниз кнопку покупки — ровно то, за что уже досталось меню
   («сдвиг всей страницы при нажатии»).

   ⚠️ Только там, где наведение существует: на телефоне его нет, и там остаётся щелчок —
   плашка так и осталась `details` и открывается сама, без единой строки скрипта.

   ⚠️ Правило адресовано ЛЮБОМУ ребёнку, кроме заголовка: у посадки внутри абзац,
   у гарантии — список и абзац. Перечислять их поимённо значило бы забыть третий. */
/* 🔴 РАСКРЫТАЯ ПЛАШКА ВСПЛЫВАЕТ НАД СТРОКОЙ, А НЕ РАЗДВИГАЕТ ЕЁ. 02.08.2026.
   Раскрытие на месте сдвигало бы вниз кнопку покупки — ровно то, за что уже досталось
   меню («сдвиг всей страницы при нажатии»). Само раскрытие ставит `product.js`
   при наведении; на телефоне оно происходит щелчком, и там всплытие не нужно —
   правило живёт только там, где есть курсор. */
@media (hover: hover) {
  .hint[open] > :not(summary) {
    position: absolute;
    bottom: calc(100% + 0.7rem);
    left: 0;
    /* 🔴 СЛОЙ ВЫШЕ СОСЕДНИХ БЛОКОВ КАРТОЧКИ (список размеров — 5) И НИЖЕ ЗАКРЕПЛЁННОЙ
       ШАПКИ (8). Стояло 20 — выше всего на сайте, включая шапку и увеличенный снимок,
       и это два наслоения сразу: плашка всплывает ВВЕРХ, поэтому у прокрученной карточки
       она вылезала поверх шапки, а при открытом снимке на полный экран — поверх снимка.
       Подсказка живёт НА странице, значит и слой у неё страничный. */
    z-index: 6;
    width: max(20rem, 100%);
    margin: 0;
    padding: var(--o-4);
    border: 1px solid var(--frame);
    border-radius: var(--r-m);
    background: var(--fon-kartochki);
    box-shadow: var(--ten-3);
    color: var(--tekst);
    font-weight: 400;
    font-size: var(--t-xs);
    line-height: 1.5;
    text-align: left;
  }

  /* У гарантии внутри два узла — список условий и оговорка. Второй встаёт НАД первым,
     а не поверх него: иначе они наложились бы друг на друга. */
  .hint[open] > :not(summary) ~ :not(summary) {
    bottom: calc(100% + 0.7rem);
    transform: translateY(-100%);
  }

  /* Раскрытая плашка остаётся таблеткой: содержимое ушло в отдельный слой, и разгибать
     торцы больше незачем. */
  .hint[open] {
    padding: var(--o-2) var(--o-4);
    border-radius: var(--r-pill);
  }
}

/* Треугольник браузера убран: на слове стоит свой круглый значок вопроса, и два указателя
   на одно действие читаются как два разных действия (решение Кирилла 30.07.2026).

   🔴 СТРОКА БОЛЬШЕ НЕ ГИБКАЯ, И ЭТО ПРАВКА ВЫРАВНИВАНИЯ (пункт 14). Здесь стояло
   `display: flex` с отступом между детьми — и отступ вставал НЕ ТОЛЬКО перед значком:
   гибкая строка режет текст на куски по границам узлов, поэтому «Посадка», «30» и «%»
   становились тремя отдельными предметами, и между ними появлялись две дырки.
   На плашке читалось «Посадка  30  %».

   ⚠️ Обычная строка текста этого не делает вовсе: слова в ней остаются словами. Значок
   при этом по-прежнему стоит ровно по середине строки — он сам гибкий внутри себя,
   и держит его `vertical-align`, а не родитель. */
.hint__word {
  display: block;
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}

.hint__word::-webkit-details-marker { display: none; }

/* Круглый значок — ровно то, что назвал Кирилл: «небольшим круглым ui-окошком на слове».
   Размер задан и по ширине, и по высоте: иначе кружок расплывается в овал на длинном слове.

   🔴 ЗНАЧОК — ОБВОДКА, А НЕ ЗАЛИВКА, И ТЕПЕРЬ ЭТО ЕЩЁ И ЕДИНСТВЕННЫЙ ПРИЗНАК НАЖИМАЕМОСТИ.
   Плашка стала стеклом (разбор выше), то есть цветом она больше ничего не обещает; открыть
   пояснение зовёт этот кружок. Цвет знака и обводки берётся у текста плашки (`currentColor`),
   поэтому на зелёной плашке гарантии он остаётся таким же светлым, как на стеклянной.

   ⚠️ Прижатия вправо больше нет: плашка сжата по содержимому, и `margin-left: auto` растянул
   бы её на всю строку ради одного кружка. */
.hint__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  /* Отступ и подъём стоят ЗДЕСЬ, а не отступом у родителя: у родителя он разошёлся бы
     по всем словам строки (разбор — выше). */
  margin-left: var(--o-2);
  vertical-align: -0.15em;
  width: 1.25rem;
  height: 1.25rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: none;
  font-size: var(--t-xs);
  font-weight: 700;
}

.hint p { margin: var(--o-2) 0 0; }
.hint__list { margin: var(--o-2) 0 0; padding-left: var(--o-5); }

/* ── Размер: надпись и выпадающий список ─────────────────────────────────── */
/* 🔴 ПРАВКА КИРИЛЛА 21: «Стоит по умолчанию маленький размер - кликаешь - и выбираешь нужный.
   И надпись Размер рядом с размером». Отменяет решение волны 2 «размеры строками в столбик».

   Надпись и выбранный размер стоят В ОДНОЙ СТРОКЕ — это и есть «рядом». Перенос разрешён:
   при девяти размерах и узком экране подпись уезжает над строкой выбора, а не сплющивает её. */
/* 🔴 ПОДПИСЬ НАД ПОЛЕМ, А НЕ СЛЕВА ОТ НЕГО, 05.08.2026. Стояли они в одну строку, и поле
   выбора начиналось не от левого края колонки, а от 802-й точки при крае колонки 726 —
   то есть единственный крупный элемент блока был сдвинут вправо на 76 точек относительно
   названия, цены и кнопки. Это одна из семнадцати разных линий старта, которые Кирилл
   и увидел как «каждое слово на разном месте».

   Так же это устроено у всех, на кого мы смотрели: подпись к полю стоит над полем,
   и оба начинаются от одной линии. */
.size {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--o-2);
  margin: 0 0 var(--o-5);
}

/* Надпись — по-прежнему заголовок раздела (`h2`), поэтому у неё снимаются собственные отступы:
   расстояние задаёт строка, в которой она стоит. Размер её меньше прежнего «Размер и упаковка»:
   это подпись к полю выбора, а не заголовок блока в полстраницы. */
.size__label {
  margin: 0;
  flex: 0 0 auto;
  font-size: var(--t-m);
  font-weight: 400;
  color: var(--tekst-tihiy);
}

/* Сам выпадающий занимает остаток строки: поле выбора во всю ширину — это то, по чему человек
   узнаёт поле выбора. `min-width: 0` обязателен — без него длинное название размера
   не даёт полю сжаться и выталкивает подпись со строки.

   ⚠️ `relative` здесь не оформление, а точка отсчёта для раскрытого списка: без него список
   считал бы левый и правый край от всей страницы и вылез бы во всю её ширину. */
/* ⚠️ `flex: 0 0 auto`, А НЕ `1 1 12rem`, И ЭТО НЕ МЕЛОЧЬ. Пока подпись и поле стояли в строку,
   основной осью была горизонталь, и `12rem` означало «начальная ШИРИНА поля». С 05.08.2026
   подпись стоит НАД полем, ось стала вертикальной — и то же самое число превратилось
   в начальную ВЫСОТУ: поле выбора выросло с 60 до 222 точек и оставило под собой пустую
   полосу в двести точек. Поймано снимком локальной страницы сразу после правки. */
.size__choice {
  position: relative;
  flex: 0 0 auto;
  min-width: 0;
}

/* Свёрнутое состояние — одна строка с рамкой: выглядит как поле, а не как заголовок.
   Треугольник браузера убран тем же приёмом, что у плашек и полос: справа стоит своя стрелка,
   и два указателя на одно действие читаются как два разных действия. */
/* 🔴 ПОЛЕ ВЫБОРА — СТЕКЛО СО СВЕТЛОЙ КРОМКОЙ (v10, раздел 4). До 02.08.2026 это была плоская
   панель с серой рамкой — «системный» вид из нулевых; до 05.08.2026 — стекло на старых
   ролях `--steklo-fon` и `--glass-frame`, заведённых, когда живого фона ещё не было.
   Сейчас корпус и кромка берутся теми же именами, что у всех остальных стеклянных блоков
   сайта, — иначе на одной странице оказалось бы два разных стекла, и разошлись бы они молча.

   ⛔ Тень из перечня переходов убрана: в переходах меняются положение, прозрачность и цвет,
   а `box-shadow` пересчитывается каждый кадр (замер v10, раздел 2, пункт 1). Тень в раскрытом
   виде осталась, она просто появляется сразу. */
.size__current {
  display: flex;
  align-items: center;
  gap: var(--o-4);
  padding: var(--o-4);
  border: 1px solid var(--frame);
  border-radius: var(--r-m);
  background: var(--steklo-plitka);
  cursor: pointer;
  list-style: none;
  transition: border-color var(--hod);
}

.size__current:hover { border-color: var(--frame-navedenie); }

.size__current::-webkit-details-marker { display: none; }

/* Раскрытое поле смыкается со списком под собой: два скруглённых торца между полем и списком
   читались бы как два разных блока, а это один выбор. */
.size__choice[open] .size__current {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-color: var(--akcent);
  box-shadow: var(--ten-2);
}

.size__name { font-weight: 700; }

/* Стрелка вниз — те же две рамки с поворотом, что у полос описания и характеристик.
   Раскрытое поле поворачивает её вверх: это единственный знак того, что список открыт,
   кроме самого списка. */
.size__arrow {
  flex: 0 0 auto;
  width: 0.6rem;
  height: 0.6rem;
  margin-left: auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-0.2rem) rotate(45deg);
}

.size__choice[open] .size__arrow { transform: translateY(0.1rem) rotate(-135deg); }

/* ── Переключатель размера ───────────────────────────────────────────────── */
/* 🔴 СПИСОК ЛЕЖИТ НАД СТРАНИЦЕЙ, А НЕ РАЗДВИГАЕТ ЕЁ. Это прямой ответ на правку Кирилла 4
   про меню — «что за выпадающее зеленая площадь и сдвиг всей страницы при нажатии» — и та же
   ошибка здесь стоила бы того же: раскрытый список из девяти размеров сдвинул бы вниз кнопку
   «в корзину», то есть увёл бы главное действие из-под пальца ровно в момент выбора.

   ⚠️ Слой (`z-index`) назван числом меньшим, чем у увеличения снимка: увеличение — это полный
   экран поверх всего, и список размеров не имеет права оказаться над ним. */
/* 🔴 СПИСОК ПОДНЯТ НАД СТРАНИЦЕЙ ТЕНЬЮ, А НЕ ЯРКОСТЬЮ ЗАЛИВКИ (v10). Он всплывает поверх
   живого фона и поверх кнопки покупки, и без глубокой тени под ним видео просвечивало бы
   так же, как под самой страницей, — список читался бы как часть фона, а не как открытое
   меню. Корпус `--fon-kartochki`: сквозь него движение угадывается, но текст остаётся
   читаемым. */
/* 🔴 СПИСОК НЕПРОЗРАЧЕН, И ЭТО НЕ ВКУС. Правка Кирилла 05.08.2026, дословно: «КРИТИЧНО!
   при выборе размера попап не перекрывает другие надписи на фоне и все сливается».

   Стояло `--fon-kartochki` — а он полупрозрачен на 86 сотых, это записано у него в `tokens.css`
   и сделано намеренно: под карточкой лежит видео, и движение обязано угадываться. Сквозь
   оставшиеся четырнадцать сотых на снимке читались кнопка «В корзину» и счётчик, лежащие ПОД
   списком: зелёная кнопка светила сквозь строку размера, и обе надписи наезжали друг на друга.

   Всплывающий слой обязан быть глухим по определению: он закрывает то, что под ним, — иначе
   он не слой, а узор. Стекло на сайте остаётся везде, где под ним фон, а не другой текст.

   ⚠️ ВНУТРЕННЕГО ПОЛЯ У СПИСКА БОЛЬШЕ НЕТ, и это вторая правка того же снимка: «выпадающий
   список размеров не симметричен с самой надписью». Поле давало строкам отступ 8 точек,
   и текст строки начинался на 760-й при тексте поля на 743-й — на 17 точек правее. Теперь
   строки идут от края до края панели, а их собственное поле равно полю поля выбора. */
.sizes {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--frame);
  border-top: 0;
  border-bottom-left-radius: var(--r-m);
  border-bottom-right-radius: var(--r-m);
  background: var(--fon-spiska);
  box-shadow: var(--ten-3);
}

/* Строки внутри списка — стекло, а не второй слой того же корпуса: два одинаковых
   полупрозрачных слоя друг на друге дают мутное пятно вместо ряда строк. */
/* 🔴 СТРОКА — ПОЛОСА ВО ВСЮ ШИРИНУ ПАНЕЛИ, А НЕ ПЛИТКА ВНУТРИ НЕЁ. 05.08.2026, правка
   Кирилла про несимметричность списка и надписи в поле.

   Было: у каждой строки своя рамка и своё скругление, а панель давала им поле 8 точек.
   Получалось два вложенных прямоугольника, и текст строки уезжал на 17 точек правее текста
   в самом поле выбора — то есть выбранный размер и он же в списке стояли не друг под другом.

   Стало: строки идут от края до края, разделены одной линией, и их собственное поле равно
   полю поля выбора. Выбранный размер в списке оказывается ровно под своей же надписью. */
.sizes__row {
  border: 0;
  border-bottom: 1px solid var(--frame);
  border-radius: 0;
  margin: 0;
  background: transparent;
  transition: background var(--hod);
}

.sizes__row:last-child { border-bottom: 0; }

.sizes__row:hover { background: var(--steklo-plitka); }

/* 🔴 ВЫБРАННАЯ СТРОКА — ЗЕЛЁНАЯ ВУАЛЬ, А НЕ СПЛОШНАЯ ЗАЛИВКА. 05.08.2026, v10 раздел 4:
   здесь стоял `--fon-vybran`, сплошной цвет, и на живом фоне он выглядел прямоугольником
   краски посреди стеклянного списка. `--zalivka-glavnaya` заведена в палитре под ровно этот
   случай — «выделенный факт», зелёный переход поверх фона.

   Рамка остаётся `--akcent` и того же размера, что у остальных строк: акцент означает
   «активная строка», а утолщённая рамка дёргала бы список на точку при переключении. */
.sizes__row--selected {
  background: var(--zalivka-glavnaya);
  border-color: var(--akcent);
}

.sizes__row--selected:hover { border-color: var(--akcent); }

/* 🔴 СТРОКА — СЕТКА ИЗ ТРЁХ КОЛОНОК, А НЕ ГИБКАЯ СТРОКА С ПЕРЕНОСОМ (волна 2, макет):
   высота слева, упаковка сразу за ней, цена справа, наличие ПОД ЦЕНОЙ и тоже справа.
   Гибкая строка ставила наличие либо в тот же ряд, либо во всю ширину под высотой — на макете
   оно стоит вторым этажом правой колонки, и это разница не вкуса: цена и число под ней
   читаются как одна мысль «столько стоит, столько есть».

   ⚠️ Первая колонка задана содержимым, средняя тянется, третья снова содержимым: так цены
   разных строк выстраиваются в один столбец, а он и есть то, ради чего человек смотрит
   в список.

   Ссылка занимает всю строку целиком: попасть по строке пальцем на телефоне надо с первого
   раза, а не по надписи внутри неё. */
.sizes__row a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: var(--o-1) var(--o-4);
  /* ⚠️ Боковое поле РАВНО полю поля выбора (`.size__current`, `var(--o-4)`), и это
     не совпадение, а условие: по нему выбранный размер в списке встаёт ровно под своей же
     надписью в свёрнутом поле. Стояло `--o-5` — на восемь точек больше, и вместе с полем
     панели давало сдвиг в 17 точек. */
  padding: var(--o-4);
  color: var(--tekst);
  text-decoration: none;
}

/* 🔴 ВЫСОТА ЗАНИМАЕТ ОДИНАКОВОЕ МЕСТО ВО ВСЕХ СТРОКАХ, И ЭТО ПРАВКА ВЫРАВНИВАНИЯ (пункт 14
   Кирилла: «опять выравнивание поехало по пизде как и везде»).

   Каждая строка списка — своя сетка, и колонки СВОИХ сеток шириной не делятся: «40–60 см»
   уже, чем «80–100 см», поэтому упаковка в каждой строке начиналась со своей точки, и столбик
   выглядел рваным. Ровно та же жалоба стоит у Кирилла про плитки главной: «каждое слово
   в разном месте в ячейке».

   ⚠️ Задано МИНИМУМОМ, а не жёсткой шириной: минимум выравнивает обычные ступени и уступает
   тем, что длиннее, — такая строка станет шире, а не обрежется. Жёсткая ширина обрезала бы. */
.sizes__height { min-width: 6.5rem; font-weight: 700; }
/* 🔴 НА УЗКОМ ЭКРАНЕ МИНИМУМ СНИМАЕТСЯ. Найдено проверкой вида 02.08.2026: при ширине
   телефона «200–250 см» и «WRB50» вместе с ценой в строку не влезали, и текст вылезал
   за свой блок. Минимум ставился ради ровного столбика упаковок — на телефоне столбик
   и так один, выравнивать нечего, а место дороже. */
@media (max-width: 480px) {
  .sizes__height { min-width: 0; }
  .sizes__row a { column-gap: var(--o-2); }
}
.sizes__packaging { color: var(--tekst-tihiy); }
/* Цена в третьей колонке и прижата вправо: в столбик цены сравниваются, вразнобой — нет. */
.sizes__price { text-align: right; font-weight: 700; white-space: nowrap; }
/* Наличие — второй этаж третьей колонки, под ценой и по её краю. */
.sizes__availability {
  grid-column: 3;
  text-align: right;
  color: var(--tekst-tihiy);
  font-size: var(--t-s);
}

/* ── Количество и кнопка в корзину ───────────────────────────────────────── */
/* 🔴 КНОПКА — ГЛАВНОЕ ДЕЙСТВИЕ СТРАНИЦЫ: заливка акцентом и ВСЯ ШИРИНА КОЛОНКИ (волна 2,
   Р-1). Раньше она делила строку со счётчиком и телефоном; на макете это широкая полоса,
   и строки «или позвонить» под ней нет вовсе — она снята решением Кирилла 01.08.2026 (Р-3).

   🔴 Счётчик поэтому уезжает на строку ВЫШЕ кнопки, а не встаёт с ней рядом: полная ширина
   кнопки и сосед в той же строке — требования взаимоисключающие, и выбор между ними сделан
   макетом. Делает это `flex-basis: 100%` у самой кнопки (ниже) — она забирает строку целиком,
   и счётчику остаётся предыдущая. */
/* 🔴 СЧЁТЧИК И КНОПКА — ОДНОЙ СТРОКОЙ, 05.08.2026. Кнопка была объявлена `flex-basis: 100%`
   и потому всегда уезжала на свою строку, а счётчик оставался висеть над ней узким блоком
   в 128 точек при колонке 526 — ещё одна строка, обрывающаяся не там, где соседние.

   Так это устроено у тех, на кого мы смотрели, и это проверено сырой разметкой лично:
   у `fast-growing-trees` строка объявлена `grid grid-cols-1 gap-3 lg:grid-cols-[auto_1fr]` —
   на узком экране столбиком, на широком счётчик по содержимому и кнопка на остаток.
   У `naturehills` и `davidaustin` то же самое флексом.

   Повторяем ровно этот приём, включая поведение на телефоне: там кнопка обязана быть
   во всю ширину, а счётчик над ней — на узкой строке они вдвоём не помещаются. */
.deystviya {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: var(--o-3);
  margin: var(--o-2) 0 0;
}

@media (min-width: 30rem) {
  .deystviya { grid-template-columns: auto 1fr; }
}

/* Счётчик стоит РЯДОМ с кнопкой и не растягивается: он выбирает число, а не запускает
   действие, и одинаковая с кнопкой ширина читалась бы как две равные кнопки. */
/* 🔴 ОБЪЁМ, 02.08.2026: счётчик стал таблеткой со стеклом — как поле размера и как плашки
   рядом. Прямоугольник с серой рамкой был единственным местом страницы, где форма
   не совпадала ни с чем соседним. */
.kolichestvo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  padding: var(--o-1);
  border: 1px solid var(--frame);
  border-radius: var(--r-pill);
  background: var(--steklo-plitka);
}

/* Знаки приходят с сервера скрытыми и показываются скриптом: без него менять нечего (🅱️23).
   Само число видно всегда — без скрипта кнопка кладёт одну штуку, и счётчик не врёт. */
.kolichestvo__shag {
  min-width: 2.6rem;
  padding: var(--o-3) 0;
  border-radius: var(--r-pill);
  transition: background var(--hod), transform 90ms ease;
  border: 0;
  background: var(--fon-kartochki);
  color: var(--tekst);
  font: inherit;
  font-size: var(--t-l);
  line-height: 1;
  cursor: pointer;
}

/* 🔴 ОБЪЁМ, 02.08.2026: у кнопок счётчика не было НИ ОДНОГО состояния — ни наведения,
   ни нажатия. Кнопка без отклика неотличима от надписи.
   ⚠️ Под курсором кладётся `--blik-navedeniya` — белое пятно, которым в палитре помечен
   «свет под курсором на плитке». Прежняя роль `--steklo-fon-navedenie` осталась от гаммы
   без живого фона и на карточке больше не встречается ни разу. */
.kolichestvo__shag:hover { background: var(--blik-navedeniya); }
.kolichestvo__shag:active { transform: scale(.9); }

.kolichestvo__chislo {
  min-width: 2.2rem;
  padding: var(--o-3) var(--o-1);
  text-align: center;
  font-weight: 700;
}

/* 🔴 ВО ВСЮ ШИРИНУ КОЛОНКИ — прямое требование Р-1 и то, что стоит на макете. `flex-basis`
   в сто процентов, а не `flex: 1`: второе отдало бы кнопке лишь остаток строки после счётчика,
   и ширина зависела бы от того, двузначное число в счётчике или однозначное.

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

   🔴 ЦВЕТ ЗАКРЫТ РОЛЯМИ, ДОЛГА БОЛЬШЕ НЕТ. Правка Кирилла 01.08.2026, дословно: «надпись
   в корзину делаем светло-зеленого цвета, это мкркетинг, так и у озона и вб». Роли
   `--akcent-pokupki`, `--akcent-pokupki-navedenie` и `--tekst-na-pokupke` заведены
   координатором в `tokens.css`, и этот файл ими только пользуется.

   🔴 НАДПИСЬ НА КНОПКЕ ТЁМНАЯ, И ЭТО ЗАМЕР, А НЕ ВКУС (`--tekst-na-pokupke`): отношение
   яркостей тёмной надписи к зелёному — 9,0 при пороге 4,5, светлой — 1,8. То есть светлая
   надпись на зелёной кнопке не проходила по контрасту вовсе, и стало это видно только когда
   зелёный из редкой кнопки покупки превратился в единственный цвет действия на сайте. */
.v-korzinu {
  /* ⚠️ `flex-basis: 100%` снят 05.08.2026: он был тем самым правилом, из-за которого кнопка
     всегда переносилась на свою строку. Ширину теперь задаёт сетка строки — кнопка забирает
     остаток после счётчика. */
  padding: var(--o-4) var(--o-5);
  /* 🔴 ЗЕЛЁНАЯ, А НЕ ПЕСОЧНАЯ, и это не оттенок акцента, а другая роль. Решение Кирилла
     01.08.2026: «надпись в корзину делаем светло-зеленого цвета, это мкркетинг, так и у озона
     и вб». Песочный ведёт по сайту, зелёный покупает: одна краска на оба смысла стёрла бы
     разницу между «посмотреть» и «купить» (`tokens.css`, `--akcent-pokupki`). */
  border: 1px solid var(--akcent-pokupki);
  /* 🔴 ОБЪЁМ, 02.08.2026: пилюля вместо прямоугольника, мягкий градиент вместо плоской
     заливки и тень своего цвета. Под курсором кнопка приподнимается, при нажатии
     вдавливается — без отклика она читается как картинка, а не как кнопка. */
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, var(--akcent-pokupki-navedenie), var(--akcent-pokupki));
  box-shadow: var(--ten-pokupki);
  /* ⛔ ИЗ ПЕРЕЧНЯ ПЕРЕХОДОВ УБРАНЫ `box-shadow` И `filter`, 05.08.2026 (v10, раздел 2,
     пункт 1). Обе величины браузер пересчитывает каждый кадр заново, а положение отдаёт
     видеокарте: замер 04.08.2026 дал 108 кадров в секунду против 135 и 20 длинных кадров
     против одного. Кнопка занимает всю ширину колонки, то есть это самый большой предмет,
     который на карточке вообще отвечает на курсор. Тень и рамка меняются мгновенно,
     подъём остаётся плавным — глазом это читается так же. */
  transition: transform var(--hod), border-color var(--hod);
  color: var(--tekst-na-pokupke);
  font: inherit;
  font-size: var(--t-lid);
  font-weight: 700;
  cursor: pointer;
}

/* Наведение — светлее на один шаг, тем же именем роли, которым красит свою главную кнопку
   первый экран (`home.css`): одно действие на всём сайте отвечает одинаково, иначе человек
   решает, что это разные кнопки.
   ⛔ Осветления через `filter: brightness` здесь больше нет — разбор в перечне переходов
   выше. Светлее кнопка становится самой заливкой: верх градиента и есть светлый шаг роли. */
.v-korzinu:hover {
  border-color: var(--akcent-pokupki-navedenie);
  transform: translateY(-2px);
  box-shadow: var(--ten-pokupki-navedenie);
}

.v-korzinu:active { transform: translateY(0) scale(.985); }

/* Ответ на действие человека: кнопка сообщает, что товар уже в корзине. Надпись ставит
   `cart.js`, здесь только вид. Заливка снимается — до нажатия она звала нажать,
   после нажатия звать больше не нужно.
   ⚠️ Ореол снимается вместе с заливкой: зелёное свечение под кнопкой без зелёной кнопки
   выглядит как пятно на стекле. */
.v-korzinu--polozheno {
  background: var(--fon-kartochki);
  color: var(--akcent);
  box-shadow: none;
}

/* ── Развернуть: «Описание» и «Характеристики» ───────────────────────────── */
/* 🔴 ДВЕ ПОЛОСЫ ВО ВСЮ ШИРИНУ ПОД ОБЕИМИ КОЛОНКАМИ, ОБЕ ЗАКРЫТЫ. Решение Кирилла 01.08.2026
   (волна 2, Р-2): «характеристики надо разворачивать, будут ещё, которые мы не добавили»
   и «где раздел "описание"? — тоже разворачиваемый».

   🔴 Подложка — роль «полоса во всю ширину», а не «карточка»: карточка на этой странице уже
   занята строкой размера и панелью покупки, и брать её имя для другого объекта значило бы
   развести имя роли с тем, что она означает.

   ⚠️ Никакого кода раскрытия здесь нет и не будет: это `details`, он открывается сам.
   Скрипт карточки к этим полосам не притрагивается вовсе (Р-2 — прямой запрет). */
/* ⚠️ Боковые поля задаёт САМА полоса, а не её содержимое: `box-sizing` во всём проекте
   оставлен по умолчанию, и таблица шириной в сто процентов с собственными полями вылезла бы
   за подложку. У полосы поля есть, у детей — только отступы сверху и снизу. */
/* 🔴 ОБЪЁМ, 02.08.2026: полоса стала стеклом со светлой кромкой и крупным скруглением.
   Плоская заливка сливалась с фоном страницы, и три полосы читались как три ступеньки
   одного серого пятна. */
/* 🔴 ПОЛОСА СЖАТА 04.08.2026 — правка Кирилла по живому сайту, пункт 7б спецификации v5,
   дословно: «как выделил красным - сокращаем строчку с описанием и харкой».
   Было: отступ полосы 1,3 rem сверху и снизу, заголовок 1,35 rem, зазор между полосами
   0,8 rem — три закрытые полосы занимали треть экрана, не сказав ни слова. Полоса свёрнута,
   то есть её работа — назвать раздел и не мешать; высоту ей давало содержимое, которого
   на экране нет. */
/* 🔴 ПОЛОСЫ СТОЯТ РЯДОМ, А НЕ СТОЛБИКОМ ВО ВСЮ ШИРИНУ. Правка Кирилла 05.08.2026,
   дословно: «у нас характеристика в длинну занимает полэкрана».

   Замер до правки: закрытая полоса — 1152 точки шириной при содержимом «Описание» плюс
   стрелка, то есть 161 точка. Тысяча точек пустой плашки ради одного слова, и так три раза
   подряд.

   ⚠️ Раскрытая полоса забирает всю строку (`width: 100%`), и это не украшение: текст
   энциклопедии в колонке шириной со слово «Характеристики» читать нельзя. Перенос по строкам
   (`flex-wrap`) держит остальные полосы на месте — они просто съезжают под раскрытую. */
/* 🔴 ПОЛОСЫ СТОЛБИКОМ, А НЕ РЯДОМ С ПЕРЕНОСОМ. Правка Кирилла 05.08.2026:
   «ui-окно каждый раз по-разному открывается».

   Замерено по его сценарию — открыть все три подряд, потом закрыть одну: раскрытая полоса
   забирала всю ширину, закрытая оставалась узкой и ПРИЛИПАЛА к её строке сбоку. Каждый
   следующий клик менял раскладку по-новому. Ряд с переносом для блоков, меняющих ширину
   при раскрытии, не годится в принципе.

   Заголовки теперь столбиком, каждый по ширине своего слова — то, ради чего ряд заводился
   («характеристика в длину занимает полэкрана»), сохранено. Открытой всегда остаётся ОДНА:
   полосы связаны атрибутом `name` в разметке, это родная группировка `details`,
   а не наш скрипт. */
/* 🔴 ПОЛОСЫ УЖЕ СТРАНИЦЫ — РОВНО ПО ШИРИНЕ ПОЛЯ «РАЗМЕР». 05.08.2026, правка Кирилла:
   «длина блоков хар-ки описание и энциклопедия надо уменьшить… сделай их такой же длины,
   как окошко с размером, чтобы всё симметрично было».

   Было 1152 точки во всю ширину полотна при поле выбора в 526 — вдвое длиннее всего, что
   стоит над ними. Стало 526: полоса и поле выбора одной длины, и страница читается двумя
   колонками, а не одной широкой лентой под двумя узкими.

   ⚠️ Ширина берётся ТЕМ ЖЕ выражением, что колонка покупки в сетке `.product__verh`
   (48 долей из 100 за вычетом промежутка 3,5rem), а не числом 526: набери её числом —
   и она разъедется с колонкой на первой же правке сетки.

   ⚠️ Полосы прижаты влево, под галерею, а не под колонку покупки. Прижатые вправо, они
   оставили бы пустой всю левую половину страницы под снимками. */
.strips {
  width: calc((100% - 3.5rem) * 0.48);
  margin-bottom: var(--o-2);
}

@media (max-width: 60rem) {
  /* На узком экране колонок нет вовсе, и полоса занимает всю ширину — сужать её там не с чем
     соотноситься, а читать текст в половину узкого экрана нельзя. */
  .strips { width: auto; }
}

/* 🔴 ЗАКРЫТАЯ ПОЛОСА — МЕЛКИЙ БЛОК, РАСКРЫТАЯ — КРУПНАЯ ПАНЕЛЬ, И СТЕКЛО У НИХ РАЗНОЕ.
   05.08.2026, спецификация v10, раздел 8. Закрытая полоса это одно слово со стрелкой,
   она стоит в ряду с соседними и обязана быть лёгкой — `--steklo-plitka`, светлое стекло.
   Раскрытая забирает всю строку и держит на себе несколько экранов текста; светлое стекло
   под таким объёмом означало бы чтение прямо по движущемуся кадру, поэтому раскрытая
   получает `--steklo-panel` — плотное стекло вниз, роль «крупная панель поверх фона».

   ⚠️ Заливка меняется по признаку `[open]`, а не по наведению, и в перечне переходов её
   поэтому нет: раскрытие — это смена состояния разом, а не движение. */
/* 🔴 ЗАКРЫТЫЕ ПОЛОСЫ ОДНОЙ ШИРИНЫ, 05.08.2026. Правка Кирилла, дословно: «в чем сложность
   то сделать ui-окошко везде одной длинны? почему три разных обрезка?»

   Здесь стояло `width: fit-content`, и три полосы получали ширину по своему слову: замер
   живой страницы дал 114 · 175 · 159 точки при одном и том же левом крае. Три прямоугольника
   разной длины друг под другом читаются не как список, а как обрезанные куски.

   Стало: ширину задаёт строка, а не слово внутри. Так устроен раскрывающийся список
   на странице товара у всех, на кого мы смотрели, — полоса это строка раздела, и её край
   совпадает с краем соседней. Раскрытие ширину больше не меняет: раньше полоса прыгала
   со 114 на 1152 при щелчке. */
.strip {
  width: 100%;
  margin: 0 0 var(--o-2);
  padding: 0 var(--o-5);
  border: 1px solid var(--frame);
  border-radius: var(--r-l);
  background: var(--steklo-plitka);
  transition: border-color var(--hod);
}

.strip[open] {
  background: var(--steklo-panel);
  box-shadow: var(--ten-1);
}

.strip:hover { border-color: var(--frame-navedenie); }

/* Треугольник браузера убран тем же приёмом, что у плашек: справа стоит своя стрелка,
   и два указателя на одно действие читаются как два разных действия. */
.strip__heading {
  display: flex;
  align-items: center;
  gap: var(--o-4);
  padding: var(--o-3) 0;
  cursor: pointer;
  list-style: none;
}

.strip__heading::-webkit-details-marker { display: none; }

/* Заголовок остаётся тегом `h2` — полоса это раздел страницы, а не украшение. Собственные
   отступы заголовка при этом снимаются: расстояние задаёт сама полоса, иначе строка съезжает
   относительно стрелки, стоящей рядом. */
.strip__name { margin: 0; font-size: var(--t-m); }

/* 🔴 Стрелка нарисована ДВУМЯ РАМКАМИ И ПОВОРОТОМ, а не картинкой и не знаком из шрифта:
   картинку по ссылке не пустит политика содержимого (`default-src 'none'`), а знак «⌄»
   рисуется в разных системах по-разному и в половине из них не рисуется вовсе.

   Цвет берётся у текста (`currentColor`) — своего у стрелки нет, она часть заголовка.
   Раскрытая полоса поворачивает её вверх: это единственный знак того, что полоса открыта,
   кроме самого содержимого. */
.strip__arrow {
  flex: 0 0 auto;
  width: 0.65rem;
  height: 0.65rem;
  /* 🔴 СТРЕЛКА ПРИЖАТА К ПРАВОМУ КРАЮ, 05.08.2026. Прежний комментарий здесь говорил
     «прижимать её не к чему: полоса по ширине содержимого» — полоса перестала быть такой
     в тот же день. Стрелка, стоящая сразу за словом посреди широкой строки, читается как
     часть слова, а не как знак раскрытия: у раскрывающихся списков она всегда на краю. */
  margin-left: auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-0.2rem) rotate(45deg);
}

.strip[open] .strip__arrow { transform: translateY(0.1rem) rotate(-135deg); }

/* Содержимое полосы отбито от её низа: раскрытая таблица, упирающаяся в край подложки,
   читается как обрезанная.

   ⚠️ Уход перечислен здесь же, а не получил своего отступа рядом: это ТА ЖЕ полоса, что
   описание и характеристики, и разойдись у них низ — три одинаковых на вид блока стояли бы
   с разным воздухом внутри, причём заметить это можно было бы только глазами на карточке,
   где заполнены все три (🅰️6). */
.strip > .harakteristiki,
.strip > .care,
.strip > .description { margin: 0 0 var(--o-5); }

/* ── Характеристики и описание ───────────────────────────────────────────── */
/* 🔴 Ширина текста ограничена ЗДЕСЬ, а не у всей страницы: колонка в 74 см нужна фотографии
   и сетке похожих, а строка описания такой длины не читается. Ровно это ограничение раньше
   стояло на всей странице и мешало двум колонкам (см. шапку файла). */
.harakteristiki {
  border-collapse: collapse;
  margin: 0 0 var(--o-5);
  width: 100%;
  max-width: var(--width-text);
}

.harakteristiki th,
.harakteristiki td {
  text-align: left;
  padding: var(--o-2) var(--o-4) var(--o-2) 0;
  border-bottom: 1px solid var(--frame);
  vertical-align: top;
}

/* Название характеристики — второстепенное, значение основное: человек читает столбец
   значений, а не столбец подписей. */
.harakteristiki th { font-weight: 400; color: var(--tekst-tihiy); width: 45%; }

.description { margin: 0 0 var(--o-5); max-width: var(--width-text); }

/* ── Уход (волна 3, дорожка О) ───────────────────────────────────────────── */
/* 🔴 ТЕ ЖЕ ПРАВИЛА, ЧТО У ОПИСАНИЯ, И ЭТО РЕШЕНИЕ, А НЕ ЛЕНЬ. Уход — такой же длинный текст,
   написанный человеком, и лежит он в такой же развернутой полосе; свой шрифт, свой отступ
   или своя ширина у него означали бы, что два одинаковых предмета на одной странице выглядят
   по-разному без всякой причины (🅰️6).

   ⚠️ Ширина ограничена текстовой колонкой по той же причине, что у описания: строка шириной
   в 74 см не читается. Правило набрано отдельной строкой, а не приписано к `.description` через
   запятую, — так у полосы ухода видно её собственные границы, а не «ещё один селектор в чужом
   правиле», которое следующая правка описания унесёт с собой. */
.care { margin: 0 0 var(--o-5); max-width: var(--width-text); }

/* ── Энциклопедия ────────────────────────────────────────────────────────── */
/* 🔴 ТЕ ЖЕ ПРАВИЛА, ЧТО У ОПИСАНИЯ И УХОДА, по тому же доводу: три длинных текста человека
   в трёх одинаковых полосах обязаны выглядеть одинаково, иначе один предмет получает три вида
   без всякой причины (🅰️6). Отдельной строкой, а не через запятую к соседям, — чтобы правка
   описания не унесла с собой чужие полосы.

   ⚠️ Латинские имена внутри текста приходят курсивом (`<i>`), выделения — полужирным (`<b>`).
   Своих правил им здесь не задаём: браузер рисует и то и другое сам, а лишнее правило стало бы
   вторым местом, где решается вид латыни на странице. */
.encyclopedia { margin: 0 0 var(--o-5); max-width: var(--width-text); }

/* ── Отзывы (волна 3, дорожка О) ─────────────────────────────────────────── */
/* 🔴 ПЕРЕЧЕНЬ СЕГОДНЯ ПУСТ, И БЛОКА НА СТРАНИЦЕ НЕТ ВОВСЕ — ни одного из этих правил браузер
   сегодня не применяет. Это законное состояние, а не мёртвый код: разметка блока стоит
   в шаблоне и рождается в тот день, когда в `core/site/reviews.py` появится первая строка
   (🅱️23 — форма окончательная, временно только содержимое).

   ⛔ Ни звёзд, ни средней оценки, ни счётчика: рисовать их нечем (разбор — в шаблоне).
   Правил под них здесь поэтому тоже нет ни одного — оформление того, чего не существует,
   через месяц читается как «здесь что-то было» и его боятся трогать. */
.reviews { margin: 0 0 var(--o-5); }

/* Столбик, а не сетка плиток: отзыв читают подряд, а не сравнивают между собой. Ширина —
   текстовая по той же причине, что у описания и ухода. */
.reviews__list {
  display: flex;
  flex-direction: column;
  gap: var(--o-3);
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: var(--width-text);
}

/* Отзыв — карточка на подложке, ровно как полоса описания: так видно, где кончается один
   человек и начинается другой. Отдельная роль фона под это не заводится — «карточка» уже
   означает на этой странице ровно это, поднятый над полотном прямоугольник.
   ⚠️ Кромка и тень добавлены 05.08.2026: без них полупрозрачная карточка на живом фоне
   не имеет края вовсе — видно, что текст лежит на чём-то более тёмном, но где кончается
   один отзыв и начинается второй, глаз не находит. */
.review {
  padding: var(--o-4) var(--o-5);
  border: 1px solid var(--frame);
  border-radius: var(--r-m);
  background: var(--fon-kartochki);
  box-shadow: var(--ten-1);
}

/* Имя выделено начертанием, а не цветом: акцентный цвет на странице означает действие
   (кнопка, ссылка, активная строка), и имя человека, покрашенное им, читалось бы как ссылка,
   по которой можно нажать. */
.review__author { margin: 0; font-weight: 700; }

/* Дата — тихая и мелкая: она подпись к словам, а не сами слова. Своей строкой, потому что
   `time` — строчный элемент и без этого прилип бы к тексту отзыва снизу. */
.review__date {
  display: block;
  margin: var(--o-1) 0 var(--o-2);
  color: var(--tekst-tihiy);
  font-size: var(--t-s);
}

/* Перенос длинного неразрывного слова обязателен: текст чужой, и в нём встречается что угодно —
   от адреса до слова без пробелов на всю строку. Без переноса такое слово растягивает карточку
   и вылезает за край на телефоне. */
.review__text { margin: 0; overflow-wrap: anywhere; }

/* ── Где зимует: карта России и таблица (правка Кирилла 20в) ─────────────── */
/* 🔴 «ГДЕ карта с приживаеомстью? (хотя бы заготовка под нее)» — блок-ответ на этот вопрос.
   Слева карта, справа расшифровка шкалы и те же пять полей сорта, что стоят у образца рядом
   с его картой: зона · взрослая высота · диаметр кроны · свет · скорость роста.

   🔴 КАРТА НАСТОЯЩАЯ С 04.08.2026. Здесь стояла схема из девяти горизонтальных полос
   и подсветка отдельным узлом поверх неё — приём, единственно возможный при картинке,
   вставленной тегом `img`. Теперь карта вставлена в страницу разметкой (`_russia_map.html`),
   у каждого региона свой контур со своим кодом, и закраска стала обычным правилом стилей.

   ⚠️ Блока нет вовсе, если не названа нижняя зона. Правил «на случай пустоты» здесь поэтому
   нет: пустого состояния у блока не существует, он просто не рождается.

   🔴 БЛОК СОБРАН В КРУПНУЮ ПАНЕЛЬ-СТЕКЛО, 05.08.2026 (v10, раздел 8). До этой правки у него
   не было ни фона, ни границ: четыре разных предмета — строка зон, карта, шкала из шести
   полос и таблица — просто лежали в потоке страницы друг под другом. На сплошном полотне это
   читалось как один блок, потому что вокруг ничего не происходило. На живом фоне за ними
   идёт кадр, и карта с таблицей перестали держаться вместе: шесть цветных квадратиков шкалы
   на движущемся видео выглядят как рассыпанный мусор, а не как легенда к карте рядом.
   Панель `--steklo-panel` со светлой кромкой возвращает им общую границу. */
.hardiness {
  margin: 0 0 var(--o-5);
  padding: var(--o-5);
  border: 1px solid var(--frame);
  border-radius: var(--r-xl);
  background: var(--steklo-panel);
  box-shadow: var(--ten-2);
}

/* Заголовок внутри панели свой верхний отступ отдаёт: расстояние до верхнего края задают
   поля панели, и сложенные вместе они давали бы двойной воздух над словами «Где зимует». */
.hardiness > .product__subtitle { margin-top: 0; }

/* 🔴 ГЛАВНАЯ СТРОКА БЛОКА: интервал зон и мороз, который он означает. Крупнее подписи и выше
   карты, потому что человек читает её первой, а карта — та же мысль картинкой.

   Точка-разделитель тихим цветом: она знак препинания, а не смысл, и в озвучке экранного
   диктора её нет вовсе (`aria-hidden` в разметке). */
/* 🔴 `position: relative` СТОИТ ЗДЕСЬ РАДИ ВСПЛЫВАШКИ, И ЭТО ЕЁ ГЛАВНОЕ СВОЙСТВО. Считайся
   всплывашка от самой кнопки, на телефоне она вылезала бы за край экрана всякий раз, когда
   кнопка стоит справа: ширина у неё своя, а места справа от кнопки нет. Считаясь от строки,
   она физически не может быть шире блока — строка тянется во всю его ширину. */
.hardiness__range {
  position: relative;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--o-1) var(--o-2);
  margin: 0 0 var(--o-4);
  font-size: var(--t-lid);
}

.hardiness__zones { font-weight: 600; }
.hardiness__dot { color: var(--tekst-tihiy); }

/* Градусы не рвутся по строкам: «−40» на одной строке, «°C» на другой читается как опечатка,
   а на телефоне строка ломается именно здесь. */
.hardiness__frost { color: var(--tekst-tihiy); white-space: nowrap; }

/* 🔴 ДВЕ КОЛОНКИ ИЛИ ОДНА — РЕШАЕТ САМА СЕТКА, БЕЗ МЕДИАЗАПРОСА. Приём тот же, что у сетки
   похожих внизу файла: колонка заводится, только если под неё есть место, иначе карта и таблица
   встают в столбик. Своего порога ширины здесь поэтому нет — третий порог на странице означал бы
   третье место, где решается «когда экран широкий», и разъехались бы они молча (🅰️6).

   `min(…, 100%)` вместо голых единиц — та же причина, что у похожих: единица считается
   от базового шрифта браузера, а человек его увеличивает, и колонка вылезала бы за край
   на телефоне. */
/* ⚠️ Доли ряда неравные: карте отдано больше, потому что она и есть предмет блока.
   Ниже 60 рем ряд рассыпается в столбик — на телефоне карта и таблица рядом не помещаются. */
.hardiness__row {
  display: grid;
  gap: var(--o-5) var(--o-6);
  align-items: start;
}


/* Карта не растёт бесконечно: на широком экране она делит ряд с расшифровкой и таблицей,
   а без предела на узком заняла бы весь экран целиком и отодвинула таблицу за сгиб. */
/* 🔴 ПРАВАЯ КОЛОНКА БЛОКА: легенда зон и таблица характеристик под ней. Свой узел, а не
   двое соседей в сетке, потому что колонка обязана рассыпаться в столбик целиком: разъедься
   легенда с таблицей на узком экране, и человек читал бы градусы отдельно от размеров.

   ⚠️ Класс был в разметке БЕЗ единого правила, и поймал это сторож `0-стили-01`: «класс есть
   в шаблоне, а правила для него нет — человек видит голый текст, и браузер об этом
   не сообщает». Оформление без правила выглядит как забытый кусок, а не как решение. */
.hardiness__side {
  display: flex;
  flex-direction: column;
  gap: var(--o-5);
  min-width: 0;
}

/* 🔴 КАРТА КРУПНЕЕ: 32 → 46 рем. Правка Кирилла 05.08.2026, показана стрелками на снимке.
   Предмет блока — сама карта, а занимала она меньше половины ряда: рядом стояли шкала
   и таблица, и глаз читал их первыми. Предел остаётся: без него на узком экране карта
   заняла бы всё и отодвинула таблицу за сгиб. */
.hardiness__map {
  max-width: 46rem;
}

/* 🔴 ПОДЛОЖКА КАРТЫ ОСТАЁТСЯ НЕПРОЗРАЧНОЙ, И ЭТО ЕДИНСТВЕННОЕ МЕСТО КАРТОЧКИ, ГДЕ ЗАЛИВКА
   СОХРАНЕНА СОЗНАТЕЛЬНО. Под сушей здесь лежит не украшение, а вода: карта показывает
   климат шестью красками по 388 замеренным точкам, и пропусти мы сквозь неё движущийся
   кадр — цвет полосы менялся бы вместе с фоном, то есть карта врала бы прямо на глазах.
   Заливка при этом от края до края НЕ идёт: она кончается вместе с рисунком карты, а вокруг
   стоит стеклянная панель блока. */
.hardiness__picture {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-m);
  background: var(--fon-glubokiy);
}

/* 🔴 ПРАВИЛО ОСТАЁТСЯ, ХОТЯ СХЕМА ЗАКРАСКИ ПО РЕГИОНУ СНЕСЕНА (05.08.2026). Правку
   «Где зимует» на климатический растр карта получила 04.08.2026, и рисунок с закраской
   отбором `data-regions` (`_russia_map.html`) вставкой больше нигде не стоит — заменён
   на `_russia_map_climate.html` (класс путей там свой, `karta__kontur`, разбор ниже).
   Но файл `_russia_map.html` со старой разметкой физически остался лежать в шаблонах:
   в нём контуры регионов по-прежнему помечены классом `.karta__region`, и сторож
   рассинхрона (`test_styles.py`) видит любой `.html` в проекте, а не только включённые.
   Убери отсюда это правило — и класс `karta__region`, живой в том мёртвом файле, останется
   без стиля, а сторож покраснеет на находке, которая не имеет отношения к этой правке. Удалить
   сам файл — решение за пределами этих четырёх файлов, не эта правка. */
.karta__region {
  fill: var(--fon-polosy);
  stroke: var(--frame);
  stroke-width: 0.8;
  stroke-linejoin: round;
}

/* ── Знак вопроса у шкалы и всплывашка под ним ───────────────────────────── */
/* 🔴 ЭТО КНОПКА, А НЕ ЗНАЧОК, и причина проверяемая: на телефоне наведения не существует,
   там есть только касание. Значок, открываемый наведением, на телефоне не открывается никак —
   а телефон у нас половина покупателей. Наведение мышью стоит ПОВЕРХ нажатия, а не вместо
   него, и подключает его `product.js` только там, где устройство наведение умеет.

   Вид взят у круглого значка плашек «посадка» и «гарантия» (`.hint__icon`) — это один и тот же
   предмет на одной странице, и выглядеть он обязан одинаково. */
.hardiness__help {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: none;
  color: var(--tekst-tihiy);
  font: inherit;
  font-size: var(--t-xs);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: color var(--hod);
}

.hardiness__help:hover,
.hardiness__help[aria-expanded="true"] { color: var(--akcent); }
.hardiness__help:focus-visible { outline: 2px solid var(--akcent); outline-offset: 2px; }

/* 🔴 ТРИ ТРЕБОВАНИЯ СТАНДАРТА WCAG 1.4.13 «Content on Hover or Focus», и все три сделаны
   в `product.js`: всплывашка УБИРАЕТСЯ (Esc, клик вне, крестик, повторное нажатие),
   НАВОДИТСЯ (не гаснет, пока ведёшь к ней мышь) и СТОЙКАЯ (сама по таймеру не исчезает).

   🔴 ШИРИНА СЧИТАЕТСЯ ОТ СТРОКИ, А НЕ ОТ КНОПКИ. `left: 0` вместе с `position: relative`
   у `.hardiness__range` означает «от левого края строки», а строка тянется во всю ширину
   блока — значит на телефоне всплывашка физически не может вылезти за край экрана. Считайся
   она от кнопки, ей пришлось бы вылезать вправо, и на узком экране половина текста ушла бы
   за границу окна вместе с горизонтальной прокруткой всей страницы.

   🔴 ШИРИНУ ЗАДАЮТ ДВА КРАЯ (`left` и `right`), А НЕ СВОЙСТВО `width`, И ЭТО НЕ РАВНОЗНАЧНО.
   `box-sizing` во всём проекте оставлен по умолчанию (тот же разбор у полос выше), поэтому
   `width: 100%` означает сто процентов ПОД СОДЕРЖИМОЕ, а поля и рамка прибавляются сверху.
   Замерено 04.08.2026 в эмуляции телефона 390 точек: всплывашка выходила 377 точек вместо 342
   и уносила страницу вбок на 12 точек. Два края решают ту же задачу без этой арифметики:
   ширину подбирает браузер, а `max-width` держит её в разумных пределах на широком экране. */
.hardiness__tip {
  position: absolute;
  z-index: 6;
  top: calc(100% + 0.6rem);
  left: 0;
  right: 0;
  display: none;
  max-width: 26rem;
  padding: var(--o-4);
  border: 1px solid var(--frame);
  border-radius: var(--r-m);
  background: var(--fon-kartochki);
  box-shadow: var(--ten-3);
  color: var(--tekst);
  /* Начертание и размер заданы заново, а не унаследованы: строка над картой крупная,
     и всплывашка без сброса приезжала бы её размером. */
  font-size: var(--t-xs);
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
}

.hardiness__tip[data-otkryto] { display: block; }

.hardiness__tip p { margin: 0 0 var(--o-2); }
.hardiness__tip p:last-child { margin-bottom: 0; }

/* Отступ справа — место под крестик: без него заголовок заезжает под кнопку закрытия. */
.hardiness__tip-name {
  font-weight: 700;
  padding-right: var(--o-5);
}

.hardiness__tip-close {
  position: absolute;
  top: var(--o-1);
  right: var(--o-2);
  appearance: none;
  border: 0;
  padding: var(--o-1) var(--o-2);
  background: none;
  color: var(--tekst-tihiy);
  font: inherit;
  font-size: var(--t-m);
  line-height: 1;
  cursor: pointer;
  border-radius: var(--r-xs);
}

.hardiness__tip-close:hover { color: var(--tekst); }
.hardiness__tip-close:focus-visible { outline: 2px solid var(--akcent); outline-offset: 2px; }

/* Таблица набрана теми же правилами, что таблица характеристик выше, — и это ОДИН предмет
   на странице в двух местах, а не два разных. Своих отступов и своих границ у неё нет:
   разойдись они, человек прочитал бы две таблицы одного вида как две разные сущности. */
.hardiness__table {
  border-collapse: collapse;
  width: 100%;
  max-width: var(--width-text);
}

.hardiness__table th,
.hardiness__table td {
  text-align: left;
  padding: var(--o-2) var(--o-4) var(--o-2) 0;
  border-bottom: 1px solid var(--frame);
  vertical-align: top;
}

.hardiness__table th { font-weight: 400; color: var(--tekst-tihiy); width: 45%; }

/* ⛔ ПРАВИЛО `.hardiness__note` УДАЛЕНО 05.08.2026 вместе с самим абзацем: он пересказывал
   шкалу и подсказку под знаком вопроса третьим разом. Слова Кирилла: «этот текст просто
   удаляй, оно не нужно тут». Оформление без разметки — забытый кусок, а не решение. */

/* ── Климатический растр: новая карта «Где зимует» по 388 точкам сетки ─────
   🔴 РЯДОМ СО СТАРОЙ СХЕМОЙ ВЫШЕ, 04.08.2026. Правило `.karta__region { fill:
   var(--fon-polosy); ...}` выше в этом файле красит весь субъект целиком —
   из-за него яблоня была обещана на Новой Земле: административно это
   Архангельская область, физически арктическая пустыня. Новый рисунок
   (`_russia_map_climate.html`) красит не субъект, а замеренную точку — 388
   штук по сетке 2×4 градуса, — а правило цвета живёт РОВНО в одном месте:
   `product.js`, функция `hardinessBand`. Здесь ниже только сама краска
   и раскладка суши / границ / растра, ни одного условия про зоны.

   ⚠️ ЦВЕТ ДОСТАЁТСЯ НАСЛЕДОВАНИЕМ, И ЭТО ЕДИНСТВЕННЫЙ СПОСОБ, КОТОРЫЙ РАБОТАЕТ.
   Контуры суши лежат один раз (`<g id="karta-regiony">` внутри `<defs>`), а слоёв,
   которые их клонируют через `<use>`, два: подложка (`.karta__zemlya`) и границы
   поверх (`.karta__granicy-sverhu`). Внутрь копии, которую делает `<use>`, составной
   селектор из документа НЕ ЗАХОДИТ — туда проходят только наследуемые свойства
   вроде `fill` и `stroke`. Поэтому у путей нет собственной заливки, а класс им дан
   свой, `karta__kontur`: со старым именем `karta__region` их красило бы правило
   прежней карты выше по файлу, и верхний слой границ залил бы собой весь растр.
   Замерено 04.08.2026 на живой карточке вишни.

   ⚠️ У САМОГО `karta__kontur` ПОЭТОМУ НЕТ ЗАЛИВКИ И ОБВОДКИ — И ЭТО НЕ ЗАБЫТОЕ ПРАВИЛО.
   Задай здесь `fill` или `stroke`, и он перекрыл бы наследование от `.karta__zemlya` /
   `.karta__granicy-sverhu` ровно так, как это уже один раз сломало карту под именем
   `karta__region` (разбор выше). `fill-rule: nonzero` — единственное свойство, которое можно
   назвать не трогая цвет: это и есть значение по умолчанию для SVG-путей, так что рисунок
   не меняется ни на пиксель, а класс путей карты перестаёт быть текстом без единого правила
   для сторожа `test_styles.py`. */
.karta__kontur {
  fill-rule: nonzero;
}

.karta__zemlya {
  fill: var(--fon-polosy);
}

.karta__granicy-sverhu {
  fill: none;
  stroke: var(--fon-kartochki);
  stroke-width: .8;
  stroke-linejoin: round;
}

/* Растр обязан сглаживаться, а не пикселить: он считается в 600 точек ширины
   (`product.js`, `RASTER_WIDTH`), а рисунок карты тянется на всю ширину блока —
   увеличение без сглаживания дало бы на глаз видимую мозаику из квадратов. */
.karta__klimat {
  image-rendering: auto;
}

/* ── Шкала климатической карты: шесть полос легенды ─────────────────────────
   🔴 РАЗМЕТКУ ШЕСТИ СТРОК РИСУЕТ ШАБЛОН, ЦВЕТ — ЗДЕСЬ. Номер полосы каждой
   строки (`data-band`) совпадает НАПРЯМУЮ с тем, что возвращает `hardinessBand`
   в `product.js`, — единственное место, где решается, какая полоса какому
   климату отвечает. Здесь эта связь не пересчитывается, только красится
   по готовому номеру. */
/* 🔴 ТРИ КОЛОНКИ НА ВСЮ ШКАЛУ, А НЕ СВОЯ СТРОКА У КАЖДОГО ПУНКТА. Правка Кирилла
   05.08.2026, дословно: «обозначения шкал написаны криво, текст скачет».

   Было: каждый пункт — отдельная гибкая строка. Пока имя полосы короткое, пояснение
   начиналось сразу за ним; у длинного имя переносилось, и пояснение съезжало на другое
   место. Шесть строк — шесть разных отступов, глазу не за что зацепиться.

   Стало: сетка задана на СПИСКЕ, а пункты объявлены `display: contents` — их ячейки
   попадают в общие колонки, и все имена начинаются на одной вертикали, все пояснения
   на другой. `max-content` у средней колонки берёт ширину самого длинного имени. */
.hardiness__scale {
  display: grid;
  grid-template-columns: auto minmax(min-content, 14rem) 1fr;
  align-items: baseline;
  column-gap: var(--o-3);
  row-gap: var(--o-2);
  list-style: none;
  margin: 0 0 var(--o-5);
  padding: 0;
  font-size: var(--t-s);
}

.hardiness__scale-item {
  display: contents;
  color: var(--tekst-tihiy);
}

/* Имя полосы — короткая суть («зимует уверенно»), она обязана читаться первой и заметнее
   пояснения рядом с ней: своим цветом строки, а не тихим, унаследованным от родителя. */
.hardiness__scale-name {
  color: var(--tekst);
  font-weight: 600;
}

/* Пояснение остаётся тихим цветом строки — оно расшифровка имени, а не вторая мысль, поэтому
   правило здесь то же, что уже стоит на `.hardiness__scale-item`, просто названное явно
   на своём узле (класс есть в разметке — правило для него нужно, а не наследование молчком). */
.hardiness__scale-note {
  color: var(--tekst-tihiy);
}

/* Квадратик своей заливки не получает здесь: она задана шестью правилами
   ниже, по номеру полосы. Пропущенный номер оставил бы квадратик пустым,
   а не похожим на соседей серым, — так дыру в перечне видно глазами. */
.hardiness__scale-swatch {
  width: 0.85rem;
  height: 0.85rem;
  /* ⚠️ По ВЕРХНЕЙ строке, а не по центру ячейки: пояснение справа занимает две-три строки,
     и центрированный квадратик уезжал от своего имени вниз на полстроки. Сдвиг вниз
     на 0,15 рем ставит его на оптическую середину первой строки. */
  align-self: start;
  margin-top: 0.15rem;
  border-radius: var(--r-xs);
}

.hardiness__scale-item[data-band="0"] .hardiness__scale-swatch { background: var(--hardiness-band-0); }
.hardiness__scale-item[data-band="1"] .hardiness__scale-swatch { background: var(--hardiness-band-1); }
.hardiness__scale-item[data-band="2"] .hardiness__scale-swatch { background: var(--hardiness-band-2); }
.hardiness__scale-item[data-band="3"] .hardiness__scale-swatch { background: var(--hardiness-band-3); }
.hardiness__scale-item[data-band="4"] .hardiness__scale-swatch { background: var(--hardiness-band-4); }
.hardiness__scale-item[data-band="5"] .hardiness__scale-swatch { background: var(--hardiness-band-5); }

/* ── Похожие растения ────────────────────────────────────────────────────── */
/* 🔴 ПЛИТКИ ОДНОГО РОСТА И С КАРТИНКОЙ — правка Кирилла 17: «в рекомендациях ПРОПАЛИ фотки,
   съехали слова».

   ⚠️ «Съехали» лечится не отступом, а тем, что у плиток появился общий каркас: снимок
   постоянной формы сверху, название под ним, цена прижата к низу. Прежде плитки были разной
   высоты и с разной раскладкой внутри, потому что единственным их каркасом была длина названия.

   `min(…, 100%)` вместо голых единиц — тот же случай, что в сетке раздела: единица считается
   от базового шрифта браузера, а человек его увеличивает, и колонка вылезала бы за край поля
   на телефоне.

   🔴 `align-items: stretch` здесь по умолчанию и снимать его нельзя: именно оно делает все
   плитки ряда одного роста, а «прижать цену к низу» работает только внутри плитки полной
   высоты. */
.pohozhie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr));
  gap: var(--o-4);
  list-style: none;
  margin: 0 0 var(--o-5);
  padding: 0;
}

/* 🔴 ОБЪЁМ, 02.08.2026: плитка поднимается под курсором, снимок внутри неё медленно
   увеличивается. Прежняя тень в один пиксель на тёмном фоне не видна вовсе — она была
   ровно тем случаем, когда правило есть, а результата нет. */
/* ⚠️ ЭТА ПЛИТКА НЕСЁТ СВОИ ИМЕНА КЛАССОВ ВМЕСТО ОБЩИХ `card__*`, И ЭТО НАЗВАННЫЙ ДОЛГ
   (спецификация v10, раздел 9, пункт 3). Свести её с плиткой раздела нельзя из этого файла:
   разметку плитки держит `_card.html`, файл чужой дорожки. Поэтому вид здесь наводится
   ТЕМИ ЖЕ приёмами и теми же ролями, что у плитки раздела, — корпус `--fon-kartochki`,
   кромка `--frame`, под курсором подъём и `--frame-navedenie`, — но имена остаются свои.
   Сведение имён — отдельная правка и другой файл.

   ⛔ `box-shadow` из перечня переходов убран (v10, раздел 2, пункт 1): плиток в ряду до
   восьми, и каждая пересчитывала бы тень покадрово. Тень меняется сразу, подъём — плавно. */
.pohozhaya {
  background: var(--fon-kartochki);
  border: 1px solid var(--frame);
  border-radius: var(--r-l);
  box-shadow: var(--ten-1);
  overflow: hidden;
  transition: transform var(--hod-medlenno), border-color var(--hod);
}

.pohozhaya:hover {
  transform: translateY(-6px);
  box-shadow: var(--ten-3);
  border-color: var(--frame-navedenie);
}

/* 🔴 СНИМОК ПОСТОЯННОЙ ФОРМЫ И ВО ВСЮ ШИРИНУ ПЛИТКИ. Форма задана отношением сторон, а не
   высотой в единицах: высота числом разъехалась бы с шириной колонки на каждом новом экране,
   и ряд снова стал бы рваным — ровно то, на что жалуется правка 17.

   `cover`, а не `contain`: на плитке важна узнаваемость, а не полнота растения. Целиком
   растение показывает страница сорта, и там стоит `contain` — это разные задачи. */
.pohozhaya__foto {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  /* Заливка видна только пока снимок едет: `cover` заполняет рамку целиком. Стекло вместо
     прежнего сплошного `--fon-vybran` — чтобы пустое место до загрузки не было зелёным
     прямоугольником поверх видео. */
  background: var(--steklo-plitka);
  transition: transform 700ms cubic-bezier(.22, .68, .24, 1);
}

.pohozhaya:hover .pohozhaya__foto { transform: scale(1.07); }

/* 🔴 ЗАГЛУШКА ВМЕСТО ОТСУТСТВУЮЩЕГО СНИМКА, 04.08.2026. Форму 4:3 она берёт у соседнего
   правила и потому встаёт ровно на место снимка: подписи всех плиток ряда остаются
   на одной линии. Увеличения под курсором у неё нет — увеличивать нечего. */
.pohozhaya__foto--net {
  display: flex;
  align-items: center;
  justify-content: center;
  /* `border-box`: в проекте по умолчанию `content-box`, и боковые поля прибавлялись
     к ширине 100% — заглушка вылезала за край плитки. То же правило у `.card__photo--net`. */
  box-sizing: border-box;
  padding: 0 var(--o-4);
  background: var(--steklo-plitka);
  color: var(--tekst-tihiy);
  font-size: var(--t-m);
  text-align: center;
  transition: none;
}

.pohozhaya:hover .pohozhaya__foto--net { transform: none; }

/* Зелёная галочка своего правила здесь не имеет: она одна на все плитки и на карточку,
   класс `in-stock`, правило в `site.css`. */

/* 🔴 Снятое с продажи ПРИГЛУШАЕТСЯ, а не прячется: человек должен видеть, что мы этим торгуем,
   и позвонить. Предзаказ этого не получает — он обычный товар, его можно заказать сегодня. */
.pohozhaya--net { opacity: 0.6; }

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

   🔴 БОКОВЫХ ПОЛЕЙ У ССЫЛКИ БОЛЬШЕ НЕТ, они переехали на сами надписи. Причина одна: снимок
   обязан идти от края до края плитки, а поле у общего родителя отодвинуло бы его от края
   на ту же величину, что и текст, и картинка встала бы в рамку из фона. Тем же приёмом
   и по той же причине сделана плитка раздела (`card.css`) — это один и тот же предмет
   на двух страницах, и выглядеть он обязан одинаково. */
.similar__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-bottom: var(--o-4);
  color: var(--tekst);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.similar__name,
.pohozhaya__latyn,
.similar__price,
.similar__availability {
  padding: 0 var(--o-4);
}

/* Отступ сверху задаётся ПЕРВОЙ надписи, а не общему полю: без снимка она стоит первой
   в плитке и упиралась бы в её верхний край. */
.similar__name { margin-top: var(--o-4); font-size: var(--t-m); }
.pohozhaya__latyn { font-style: italic; font-size: var(--t-s); color: var(--tekst-tihiy); }
.similar__price { margin-top: auto; padding-top: var(--o-2); font-size: var(--t-lid); font-weight: 700; }
.similar__availability { font-size: var(--t-s); color: var(--tekst-tihiy); }

/* ── Экран пошире: крупнее название и цена ───────────────────────────────── */
/* ⚠️ Строки размера здесь больше не перестраиваются: сетка из трёх колонок с наличием под
   ценой одинакова на любом экране, и второго описания одной раскладки для этого не нужно. */
@media (min-width: 40rem) {
  /* Кегли имени и цены приезжают шкалой (tokens.css) и от ширины не зависят. */
}

/* ── Широкий экран: ДВЕ КОЛОНКИ ──────────────────────────────────────────── */
/* 🔴 Это и есть кусок Н2 (Р-1). Слева фотография, справа решение о покупке; крошки над обеими,
   характеристики, описание и похожие — под обеими, во всю ширину.

   🔴🔴 СЕТКА ПЕРЕЕХАЛА СО СТРАНИЦЫ НА ПОЛОСУ `.product__verh`, И ЭТО ЛЕЧЕНИЕ ПУНКТА 16
   («ui элементы НАСЛАИВАЮТСЯ»). Здесь стояла сетка на всю страницу с явными строками
   и с оговоркой, что явные строки «убирают источник неожиданностей целиком». Они убрали
   не тот источник: клетка сетки НЕ ограничивает прилипающего ребёнка — она ограничивает
   только абсолютно спозиционированного, — и правая колонка считала границы по всей странице.
   Замер живым браузером: 69 пересечений с описанием и характеристиками за одну прокрутку
   на 1440×900 (разбор — в шапке `.product`).

   🔴 Теперь в сетке РОВНО ДВА ребёнка — фотография и колонка, — и строк не нужно вовсе:
   двое детей в двух колонках раскладываются одним рядом сами. Крошки, полосы, похожие
   и звонок лежат снаружи, в обычном потоке страницы, где им и место.

   🔴 Правая колонка ЛИПКАЯ, и это сохранено: пока человек листает галерею, цена и кнопка
   остаются на экране. `align-items: start` здесь обязателен — без него колонка растянулась бы
   на всю высоту ряда, и прилипать ей было бы некуда.

   ⚠️ Колонка выше фотографии не прилипает вовсе, и это ВЕРНОЕ поведение, а не сломанное:
   ряд ровно её высоты, ехать некуда. Прежде в этом случае она уезжала вниз по всей странице. */
@media (min-width: 60rem) {
  /* ⚠️ Доли ряда карты неравные: карте отдано больше, потому что она и есть предмет
     блока. Правило лежит здесь, а не в своём медиазапросе с тем же условием: два
     запроса на одну ширину — это два места одной правды, и проверка раскладки
     (`test_n2_01a`) читает первый попавшийся. */
  .hardiness__row { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }

  /* 🔴 ТАБЛИЦА ЗАНИМАЕТ ОБЕ КОЛОНКИ И СТОИТ СТРОКОЙ НИЖЕ. Правка Кирилла 05.08.2026:
     «под картой место на ещё одну карту… не карту увеличивать, а расположение ui менять».

     Замер до правки: ряд 619 точек высотой, карта 335 — под ней 284 точки пустоты. Пустота
     бралась не из размеров карты, а из того, что правая колонка несла и шкалу, и таблицу,
     а левая одну карту. Теперь карта (335) и шкала (333) стоят рядом почти вровень,
     таблица уходит под них. Ряд стал НИЖЕ прежнего.

     ⚠️ Ширину таблицы держит её собственный `max-width: var(--width-text)`: растянутая
     на 1102 точки, она развела бы название и значение по разным краям экрана. */
  .hardiness__table { grid-column: 1 / -1; }

  .product__verh {
    grid-template-columns: minmax(0, 52fr) minmax(0, 48fr);
    column-gap: 3.5rem;
    align-items: start;
    /* Воздух под крошками задан ПОЛОСЕ, а не каждой колонке по отдельности: заданный
       по отдельности, он и разъехался (пункт 14). Одна величина — одна линия старта. */
    margin-top: var(--o-5);
  }

  .product__column {
    position: sticky;
    top: 1rem;
  }

  /* 🔴 Снимков нет — колонок тоже нет. Иначе левая половина страницы осталась бы пустой
     дырой, а блок покупки — сжатым в 45 сотых ширины без всякой причины. Признак ставит
     разметка (`product--no-photos`), потому что «есть ли фотографии» — это данные,
     а не ширина экрана.

     ⚠️ Прилипание при этом снимается тоже: прилипать не к чему, слева больше нет ничего,
     и колонка, ползущая по пустой странице, — это ровно тот пункт 16, который здесь чинится. */
  .product--no-photos .product__verh { display: block; }
  .product--no-photos .product__column { position: static; }

  /* 🔴 ПОРЯДОК ПРАВОЙ КОЛОНКИ ВОЗВРАЩАЕТСЯ К ПОРЯДКУ РАЗМЕТКИ: перестановка нужна была
     только сгибу телефона (разбор — у самой колонки выше).

     🔴🔴 И ВОЗВРАЩАЛСЯ ОН ЗДЕСЬ НЕ ВСЕГДА — ЭТО НАЙДЕНО ГЛАЗАМИ 01.08.2026 И ЭТО ПУНКТ 14
     («опять выравнивание поехало по пизде»). Здесь стояла одна строка `.product__column > *`,
     и она проигрывала: у правил узкого экрана селектор ИМЕНОВАННЫЙ, а именованный весит
     больше, чем «любой ребёнок», — и медиазапрос этого не меняет, потому что вес правила
     считается раньше порядка в файле. На широком экране колонка молча оставалась в порядке
     телефона: кнопка стояла над размерами, плашки под ними, а буллеты — в самом низу,
     то есть ровно наоборот утверждённому макету.

     🔴 Лечится ТЕМ ЖЕ ВЕСОМ, а не пометкой «важное»: каждый селектор перечислен поимённо,
     весит столько же, стоит ниже — и потому выигрывает. Пометка «важное» победила бы тоже,
     но она отключает вес у всего правила разом, и следующая перестановка перестала бы
     работать молча (🅰️4-5 — чиним причину, а не признак).

     ⚠️ Перечень обязан совпадать с перечнем узкого экрана. Что они не разошлись, сторожит
     проверка `test_v3_14_02`: она берёт селекторы из узкой части файла и требует каждому
     пары в широкой. Список, который держат в голове, стареет на первом же новом блоке. */
  .product__column > .product__header { order: 0; }
  .product__column > .price { order: 0; }
  .product__column > .deystviya { order: 0; }
  .product__column > .size { order: 0; }
  .product__column > .doverie { order: 0; }
  .product__column > .plyusy { order: 0; }

  /* Фотография снова во весь свой рост: в собственной колонке она цену не закрывает. */
  .gallery__main { max-height: 70vh; }

  /* 🔴 ОБЕ КОЛОНКИ НАЧИНАЮТСЯ С ОДНОЙ ЛИНИИ — это пункт 14 («выравнивание поехало»).
     У фотографии здесь стоял отступ сверху в одну единицу, а у названия — ноль, и верх снимка
     оказывался ниже верха заголовка ровно на эту единицу. На макете они стоят вровень. */
  .gallery { margin-top: 0; }

  .product__name { margin-top: 0; }

  /* Полосы описания и характеристик отбиты от блока покупки: между кнопкой и первой полосой
     стоит заметный воздух, и он же отделяет «решение о покупке» от «подробностей для тех,
     кто ещё читает».

     🔴 ВОЗДУХ ЗАДАН ОБЁРТКЕ, А НЕ ПЕРВОЙ ПОЛОСЕ. Здесь стояло `.product > .strip:first-of-type`
     и с 05.08.2026 не срабатывало ни разу: полосы переехали внутрь `<div class="strips">`
     (правка Кирилла «у нас характеристика в длинну занимает полэкрана»), то есть прямыми
     детьми страницы быть перестали. Правило осталось живым по виду и мёртвым по делу —
     кнопка «В корзину» упиралась в полосу описания без единой точки воздуха. */
  .strips { margin-top: var(--o-6); }
}