/* ═══════════════════════════════════════════════════════════════
   HOMIUM DESIGN SYSTEM — tokens
   ───────────────────────────────────────────────────────────────
   Единственный источник правды для цвета, шрифтов, отступов и
   теней каталога. Взято 1:1 из `assets/brand/Homium — Бренд-
   платформа.html` (:root, строки 19–31 + доп. переменные, найденные
   по ходу файла: terra-lt/terra-dk/sage-lt/muted-dk).

   Ничего здесь не хардкодится по шаблонам — партиалы и components.css
   ссылаются только на переменные ниже. Если для нового слайда нужен
   цвет/отступ, которого тут нет, — добавляем токен сюда, а не пишем
   произвольное значение в partial.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Цвет — палитра бренда ── */
  --espresso:  #2C2A24;  /* фон тёмных слайдов, основной текст на светлом */
  --terra:     #C0845A;  /* акцент — eyebrow, ключевые pill, цвет иконки лого */
  --terra-lt:  #D4A07A;  /* терракота светлее — hover/вторичный акцент */
  --terra-dk:  #A06840;  /* терракота темнее — eyebrow на светлом фоне */
  --linen:     #E8D8C4;  /* текст на тёмном фоне (второстепенный) */
  --cream:     #F5EFE4;  /* фон светлых слайдов, текст на тёмном (основной) */
  --sage:      #8AADA0;  /* второй акцент — Comfort-линейка, чек-маркеры */
  --sage-lt:   #A8C4B8;  /* sage светлее */
  --oak:       #5A4A3A;  /* фон "тёплых" слайдов (бренд-идея, Home-линейка) */
  --muted:     #A09880;  /* второстепенный текст на тёмном */
  --muted-dk:  #7A7060;  /* второстепенный текст на светлом */

  /* ── Типографика ── */
  --font-display: 'Cormorant Garamond', serif; /* заголовки, названия, цитаты */
  --font-body:    'Jost', sans-serif;          /* тело, лейблы, eyebrow */

  /* ── Отступы (8pt-ритм, от пилюль до будущих секций сайта) ── */
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs:  12px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  32px;
  --space-xl:  48px;
  --space-2xl: 64px;
  --space-3xl: 96px;

  /* ── Радиусы ──
       --radius-control — базовый радиус для интерактивных элементов
       (pill-бейдж, btn, input, select-trigger): скруглённый прямоугольник,
       НЕ капсула. Решение 2026-08-13 — уходим от полностью круглых краёв
       по всей системе (кнопки/меню/поля не должны читаться как "таблетки").
       --radius-pill оставлен как токен на случай точечного круглого
       элемента (иконка-кнопка и т.п.), но компоненты по умолчанию на
       него больше не ссылаются. */
  --radius-control: 10px;
  --radius-lg:   24px;
  --radius-md:   20px;
  --radius-sm:   14px;
  --radius-pill: 100px;

  /* ── Тени / elevation — пронумерованная шкала "приподнятости"
       (по методологии Apple HIG: не "какая-то тень", а уровень —
       чем выше номер, тем элемент "ближе к пользователю"). ── */
  --elevation-1: 0 4px 16px rgba(44,42,36,.12);                                     /* тонкая — thumb, карточка в покое */
  --elevation-2: 0 8px 32px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.10);    /* стандартная — pill, btn в покое */
  --elevation-3: 0 12px 40px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.14);   /* высокая — hover/active состояния */

  /* оттеночные варианты elevation-2/3 для цветных pill/btn — терракота/шалфей светятся своим цветом, не просто чёрной тенью */
  --shadow-dark:  0 8px 32px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
  --shadow-terra: 0 8px 32px rgba(160,104,64,.35), inset 0 1px 0 rgba(255,255,255,.12);
  --shadow-terra-hover: 0 12px 36px rgba(160,104,64,.45), inset 0 1px 0 rgba(255,255,255,.14);
  --shadow-light: 0 8px 32px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.30);
  --shadow-sage:  0 8px 32px rgba(106,141,130,.30), inset 0 1px 0 rgba(255,255,255,.14);

  /* ── Переходы (hover-динамика pill/card/btn — 1:1 из бренд-платформы) ── */
  --ease-spring: cubic-bezier(.34,1.56,.64,1); /* лёгкий перелёт — фирменный hover-фил */
  --ease-standard: cubic-bezier(.4,0,.2,1);
  --duration-fast: .2s;
  --duration-base: .35s;

  /* ── Семантические роли — слой поверх примитивов (Apple HIG:
       компонент ссылается не на "terra", а на "surface-accent";
       если бренд-палитра когда-нибудь поменяется, меняется только
       этот блок, компоненты — нет). Две поверхности: светлая (cream)
       и тёмная (espresso/oak) — у каждой свой набор ролей. ── */
  --color-surface:        var(--cream);
  --color-surface-alt:    var(--linen);
  --color-surface-dark:   var(--espresso);
  --color-surface-dark-alt: var(--oak);

  --color-text:            var(--espresso);   /* текст на светлой поверхности */
  --color-text-muted:      var(--muted-dk);
  --color-text-on-dark:    var(--cream);       /* текст на тёмной поверхности */
  --color-text-on-dark-muted: var(--muted);

  --color-border:          rgba(90,74,58,.14); /* тонкая линия на светлом (divline, карточки) */
  --color-border-on-dark:  rgba(192,132,90,.25);

  --color-accent:          var(--terra);       /* акцентный цвет действия/фокуса на обеих поверхностях */
  --color-accent-contrast: var(--cream);       /* текст поверх акцентной заливки */
}

/* Cormorant Garamond, Jost, Caveat — SIL Open Font License 1.1 (хостинг у себя разрешён).
   Файл создан scripts/build_fonts.py — руками не править. */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(/fonts/caveat-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(/fonts/caveat-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(/fonts/caveat-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 400;
  font-display: swap;
  src: url(/fonts/cormorant-garamond-italic-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 400;
  font-display: swap;
  src: url(/fonts/cormorant-garamond-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 400;
  font-display: swap;
  src: url(/fonts/cormorant-garamond-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url(/fonts/cormorant-garamond-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url(/fonts/cormorant-garamond-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url(/fonts/cormorant-garamond-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 200 500;
  font-display: swap;
  src: url(/fonts/jost-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 200 500;
  font-display: swap;
  src: url(/fonts/jost-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 200 500;
  font-display: swap;
  src: url(/fonts/jost-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ═══════════════════════════════════════════════════════════════
   HOMIUM SITE — стили страниц
   ───────────────────────────────────────────────────────────────
   Слой поверх design-system/tokens.css (цвета, шрифты, отступы,
   радиусы, тени — только оттуда). Механика плиток направлений
   (.dir-tile) перенесена 1:1 со слайда «Основные разделы»
   бренд-платформы: squircle 28%, градиент 157°, блик ::after.
   ═══════════════════════════════════════════════════════════════ */

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

/* width/height у <img> проставляет сборка (build_site.py, postprocess_html) — чтобы
   браузер заранее зарезервировал место и страница не «прыгала» при загрузке фото.
   Высота при этом остаётся автоматической: иначе атрибут растянул бы картинку, у
   которой в CSS задана только ширина (реальный случай — превью форм в категории).
   :where даёт нулевую специфичность — любое правило автора по-прежнему сильнее. */
:where(img[width][height]) { height: auto; }

/* ── Полноэкранные секции с привязкой прокрутки — механика
   бренд-платформы: один экран = одна мысль, промежуточных
   положений нет. scroll-padding-top равен высоте прилипшей шапки,
   иначе она перекрывает верх секции при остановке. ── */
html {
  scroll-padding-top: 56px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  /* Страховка от горизонтальной прокрутки вбок целиком — реальный кейс
     с телефона (2026-09-08): при свайпе по фото палец чуть уходит по
     диагонали, и без этой строки вся страница едет в сторону вместе с
     фото. Каталогу горизонтальный скролл не нужен ни при каких условиях. */
  overflow-x: hidden;
}
body { overflow-x: hidden; }
html.snap { scroll-snap-type: y mandatory; }
.snap .hero, .snap .dirs, .snap .b2b, .snap .brand, .snap .ftr {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.dirs, .b2b, .brand {
  min-height: calc(100vh - 56px);
  display: flex; flex-direction: column; justify-content: center;
}

.site {
  background: var(--cream);
  color: var(--espresso);
  font-family: var(--font-body);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 var(--space-md); }

a { color: inherit; text-decoration: none; }

/* ── Типографика страниц ── */
.eyebrow {
  font-size: 11px; font-weight: 400; letter-spacing: .28em;
  text-transform: uppercase; color: var(--terra-dk);
  margin-bottom: var(--space-sm);
}
.eyebrow--light { color: var(--terra-lt); }
.h1, .h2 {
  font-family: var(--font-display); font-weight: 300; line-height: 1.05;
}
.h1 { font-size: clamp(34px, 4.5vw, 56px); }
.h2 { font-size: clamp(30px, 4vw, 48px); margin-bottom: var(--space-xl); }
.h2--light { color: var(--cream); }

/* ── Шапка — nav бренд-платформы 1:1: стекло rgba(44,42,36,.92) +
   blur 12px, терракотовая линия снизу, слева иконка-монограмма
   и разреженный словесный знак. ── */
.hdr {
  position: sticky; top: 0; z-index: 10;
  height: 56px;
  background: rgba(44, 42, 36, .92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(192, 132, 90, .12);
}
.hdr__in {
  height: 100%;
  display: flex; align-items: center; gap: var(--space-lg);
  padding: 0 48px;
}
.hdr__logo { display: flex; align-items: center; gap: 10px; }
.hdr__logo-icon { display: block; flex-shrink: 0; }
.hdr__logo-icon svg { width: 28px; height: auto; display: block; }
.hdr__logo-text { display: block; color: var(--cream); }
/* Словесный знак — вектор фирменного начертания, а не набранный текст.
   Высоту задаёт место, ширина считается по пропорции. */
.wordmark { height: 1em; width: auto; display: block; }
.hdr__logo-text .wordmark { height: 19px; }
.hdr__toggle, .hdr__burger { display: none; }
.hdr__nav { display: flex; gap: var(--space-lg); margin-left: auto; }
.hdr__nav a {
  font-size: 13px; letter-spacing: .06em; color: var(--linen);
  transition: color .2s ease;
}
.hdr__nav a:hover { color: var(--terra-lt); }

/* ── Атмосферные круги — «тарелки» тонкой линией за контентом.
   В бренд-платформе координаты прописаны для каждого слайда
   (#slide-3/5/7/8/9/10), но выключены глобальным display:none —
   здесь включены по её же параметрам: 220–700px, вынос за край,
   терракота .10–.15 и sage .08–.12 вторым акцентом.
   Размер и место каждого круга задаёт секция через переменные. ── */
.atmo { position: relative; overflow: hidden; }
.atmo > * { position: relative; z-index: 1; }
.atmo::before, .atmo::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  border: 1px solid transparent;
  pointer-events: none;
  z-index: 0;
}
.atmo::before {
  width: var(--c1-size); height: var(--c1-size);
  inset: var(--c1-pos);
  border-color: var(--c1-color, rgba(192, 132, 90, .15));
}
.atmo::after {
  width: var(--c2-size); height: var(--c2-size);
  inset: var(--c2-pos);
  border-color: var(--c2-color, rgba(138, 173, 160, .12));
}
/* Круги сверх штатных двух (::before/::after — их только два, по числу
   psevdo-элементов) — обычные <i>, тот же рисунок круга (тонкая линия,
   размер/позиция/цвет — инлайн-стилем на каждом, см. index.html).
   Специфичность .atmo > .atmo-ring (2 класса) намеренно выше, чем у
   .atmo > * выше (класс+universal) — иначе тот перебивал бы inline-незаданный
   position на relative/z-index:1, и круги встали бы в поток вместо фона. */
.atmo-ring { border-radius: 50%; border: 1px solid; pointer-events: none; }
.atmo > .atmo-ring { position: absolute; z-index: 0; }

/* ── «Пилюля» — фирменный контейнер сайта. База и два наполнения,
   1:1 .pill / .pill--dark / .pill--ghost бренд-платформы: светлая
   рамка-хайлайт, диагональный блик поверх. Форма — скруглённый
   прямоугольник, НЕ капсула: radius-control, тот же принцип, что уже
   был закреплён в tokens.css («уходим от полностью круглых краёв —
   кнопки не должны читаться как таблетки», решение 2026-08-13), просто
   раньше .glass-pill на него не ссылался — поправлено по прямой просьбе
   заказчика 2026-09-09 (то же название класса оставлено, чтобы не
   переименовывать компонент по всему проекту). ── */
.glass-pill {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-control);
  border: 1px solid rgba(255, 255, 255, .10);
  position: relative; overflow: hidden;
}
.glass-pill::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, .07) 0%, transparent 60%);
  pointer-events: none;
}
/* глубокий espresso с подсветкой сверху — знак, метки */
.glass-pill--dark {
  background: linear-gradient(135deg, #3A3830, #2C2A24 55%, #1E1C18);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06);
}
/* шалфей — второй акцент палитры; тёмный текст читается лучше светлого */
.glass-pill--sage {
  background: linear-gradient(135deg, #A0C0B4, #8AADA0 55%, #6A8D82);
  box-shadow: 0 8px 32px rgba(106, 141, 130, .30), inset 0 1px 0 rgba(255, 255, 255, .14);
  color: var(--espresso);
}
/* полупрозрачное стекло с терракотовой рамкой — слоган, вторичное */
.glass-pill--ghost {
  background: rgba(44, 42, 36, .5);
  border-color: rgba(192, 132, 90, .25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ── Первый экран — как обложка бренд-платформы: ровный espresso,
     концентрические круги-«тарелки» терракотовой линией, иконка-монограмма
     из тарелок и утвари над словесным знаком. ── */
.hero {
  /* -58px компенсирует высоту прилипшей шапки: экран целиком */
  min-height: calc(100vh - 58px);
  display: flex; align-items: center;
  background:
    linear-gradient(90deg, rgba(12, 11, 9, .75) 0%, rgba(12, 11, 9, .35) 14%, transparent 32%),
    radial-gradient(ellipse 62% 58% at calc(74% - 100px) calc(46% - 100px), rgba(90, 74, 58, .385) 0%, transparent 72%),
    linear-gradient(158deg, #3A3830 0%, #2C2A24 52%, #1B1916 100%);
  color: var(--cream);
  position: relative;
  overflow: hidden;
}
/* Композиция — 1:1 раскладка обложки КП (scripts/_kp_v2_template.html:
   .cover-hero/.cover-left/.cover-right): кольца+знак+название слева,
   фото-мозаика справа, одной строкой по центру экрана. 2026-09-22. */
.hero__in {
  max-width: 1320px; margin: 0 auto; padding: 0 var(--space-md);
  width: 100%;
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  gap: 56px;
}
.hero__left {
  flex: none; width: 598px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.hero__emblem { position: relative; flex: none; width: 598px; height: 598px; }
.hero__emblem .stage { position: absolute; inset: 0; top: auto; left: auto; transform: none; width: 100%; height: 100%; }
.hero__emblem .hero__icon { position: absolute; inset: 0; }

.hero__text {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 13px;
}
.hero__brand {
  /* тот же терракотовый, что залит в монограмме (#C0845A = --terra).
     Раньше .glass-pill.glass-pill--dark (тёмная капсула-подложка) —
     заказчик попросил убрать пилюлю, оставить голое название; padding
     (был подогнан под размер капсулы) убран вместе с ней — теперь
     просто текст в общем gap колонки .hero__text. 2026-09-09. */
  color: var(--terra);
  animation: rise-in .3s ease-out .9s backwards;
  position: relative;
  /* теперь это заголовок первого уровня: сбрасываем его браузерные
     поля/размер/жирность, чтобы вид остался таким же, как у прежнего абзаца */
  margin: 0; font: inherit;
}
/* Размер вордмарка в hero (не хедера) — точное число с обложки КП
   (.cover-wordmark svg{height:38px}), не выдуманное. */
/* Размер вордмарка в hero — увеличен на 20% от буквального числа
   обложки КП (38px) пропорционально увеличенному значку. */
.hero__left .hero__brand .wordmark { height: 60px; }
/* Слоган — тот же почерк и цвет, что на обложке КП (.cover-slogan),
   размер — пропорционально увеличен вместе с остальной композицией. */
.hero__slogan {
  font-family: 'Caveat', cursive; font-weight: 500;
  font-size: 49px;
  line-height: 1.22;
  color: var(--sage-lt);
  white-space: nowrap;
  position: relative;
  animation: rise-in .3s ease-out 1.1s backwards;
}
.hero__cta {
  font-size: 21px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase;
  padding: 27px 60px; gap: 16px;
  animation: rise-in .3s ease-out 1.5s backwards;
  transition: transform .2s ease;
}
.hero__cta em { font-style: normal; transition: transform .2s ease; }
.hero__cta:hover { transform: translateY(-2px); }
.hero__cta:hover em { transform: translateX(4px); }

/* Мозаика справа — те же пропорции, что .cover-mosaic на обложке КП
   (2 колонки, квадрат+портрет вперемешку, 3:4 по flex). Ширина/высота
   не зафиксированы числом — высота тянется наравне с левой колонкой
   (.hero__in{align-items:stretch}), ширина считается из неё через
   aspect-ratio: так верх и низ мозаики ВСЕГДА совпадают с кольцами и
   кнопкой слева, без подбора отступов на глаз. 2026-09-22. */
.hero__right { flex: none; display: flex; align-items: center; justify-content: center; }
.hero__mosaic {
  width: 598px; height: 733px; /* зона фото +30% по просьбе заказчицы, 2026-09-22 */
  display: flex; gap: 18px;
  animation: rise-in .35s ease-out .65s backwards;
}
.cm-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.cm-ph {
  width: 100%; border-radius: 10px;
  /* top, не center: важная часть кадра (верх корзин/предметов) обрезалась
     сверху при вписывании cover в плитку. 2026-09-22. */
  background-size: cover; background-position: center top;
}
.cm-ph--sq { flex: 3; }
.cm-ph--tall { flex: 4; }

@media (max-width: 1400px) {
  .hero { padding-top: 10px; padding-bottom: var(--space-xl); }
  .hero__in { flex-direction: column; gap: var(--space-lg); }
  .hero__left { width: auto; height: auto; }
  /* Кольца сами по себе не занимают весь квадрат .hero__emblem (внутри
     svg-разметки у окружностей есть свой отступ от края) — равный CSS-
     зазор (space-lg и там, и там) визуально читался как больший интервал
     сверху, чем настоящий зазор до фото снизу. Подтягиваем текст ближе
     к видимому краю колец, зазор до мозаики снизу не трогаем. 2026-09-22. */
  .hero__text { margin-top: -30px; }
  /* +20% по просьбе заказчицы (2026-09-22) — вступает в силу только там,
     где именно vw-предел решает (узкие телефоны), на планшетах правит
     потолок 460px, его не трогаем. */
  .hero__emblem { width: min(460px, 84vw); height: min(460px, 84vw); }
  .hero__mosaic { width: min(520px, 82vw); height: auto; aspect-ratio: 4 / 5; }
}
/* Тонкая подгонка (кольца ближе к названию, кнопка не трогается) — только
   на широких экранах, где вручную подобранные пиксели имеют смысл. На
   мобильном они утаскивали кольца под шапку и обрезали низ мозаики
   (hero{overflow:hidden}) — заказчица явно указала на это 2026-09-22,
   на мобильном отступов просто нет, всё живёт обычным потоком/gap. */
@media (min-width: 1401px) {
  .hero__emblem { top: -50px; }
  .hero__text { margin-top: -72px; }
  .hero__brand { top: -30px; }
  .hero__slogan { top: -30px; }
}

@keyframes rise-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Сцена: кольца-орбиты и приборы — вписаны в квадрат .hero__emblem. */
.stage {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(1000px, 98vmin); height: min(1000px, 98vmin);
  pointer-events: none; z-index: 0;
}
.stage__ring { stroke-width: 1.4; }
.stage__ring--outer { stroke: rgba(192, 132, 90, .28); }
.stage__ring--mid   { stroke: rgba(138, 173, 160, .40); }
.stage__ring--rim   { stroke: rgba(192, 132, 90, .28); }


/* ── Сборка экрана: орбиты → знак. Один проход, 2,6 с.
   Кольца вычерчиваются через stroke-dashoffset: штрих равен длине
   окружности (2πr), поэтому линия «выезжает» из точки. Знак ставится
   на стол — проявление с лёгким доворотом. ── */
@keyframes stage-draw { to { stroke-dashoffset: 0; } }
@keyframes hero-place {
  from { opacity: 0; transform: rotate(-8deg) scale(.94); }
  to   { opacity: 1; transform: rotate(0) scale(1); }
}

.stage__ring { stroke-dasharray: 1; stroke-dashoffset: 1; }
/* отрицательное смещение разворачивает обход — линия идёт против часовой */
.stage__ring--mid { stroke-dashoffset: -1; }

.stage__ring--outer { animation: stage-draw .75s cubic-bezier(.4, 0, .2, 1) forwards; }
.stage__ring--rim   { animation: stage-draw .75s cubic-bezier(.4, 0, .2, 1) forwards; }
.stage__ring--mid   { animation: stage-draw .5s cubic-bezier(.4, 0, .2, 1) .25s forwards; }
.hero__icon { animation: hero-place .4s cubic-bezier(.34, 1.4, .64, 1) .55s backwards; }

/* Уважаем системную настройку «уменьшить движение»: показываем итог сразу. */
@media (prefers-reduced-motion: reduce) {
  .stage__ring, .hero__icon, .hero__brand, .hero__cta { animation: none; stroke-dashoffset: 0; }
  .hero__slogan { animation: none; }
}

.hero__icon { display: flex; align-items: center; justify-content: center; }
/* Точное число с обложки КП (.cover-icon svg{width:150px}). */
.hero__icon svg {
  width: 213px; height: auto; display: block;
  filter: drop-shadow(0 24px 60px rgba(0, 0, 0, .6)) drop-shadow(0 4px 16px rgba(0, 0, 0, .4));
}
@media (max-width: 1400px) {
  .hero__icon svg { width: 36%; }
}

/* Узор из предметов иконотеки — фактура подложки, не рисунок:
   держим его тише декоративных пятен, иначе спорит с карточками. */
.pattern {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  color: var(--terra-dk);
  opacity: .07;
  pointer-events: none;
  z-index: 0;
}

/* ── Плитки направлений ── */
.dirs {
  position: relative;
  padding: var(--space-2xl) 0;
  background:
    radial-gradient(ellipse 60% 50% at 78% 12%, rgba(192, 132, 90, .06) 0%, transparent 70%),
    linear-gradient(180deg, #EDE4D4 0%, #E7DCC8 45%, #DFD2B9 100%);
}
.dirs .wrap { position: relative; z-index: 1; }
.dirs__grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}
.dir-card {
  display: flex; align-items: center; gap: var(--space-lg);
  background: linear-gradient(157deg, #FFFFFF 0%, #FEFCF8 60%, #FAF5EC 100%);
  border: 1px solid rgba(90, 74, 58, .04);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow:
    0 18px 40px rgba(90, 74, 58, .14),
    0 3px 8px rgba(90, 74, 58, .07),
    inset 0 1px 0 rgba(255, 255, 255, .95);
  transition: transform .25s ease, box-shadow .25s ease;
}
.dir-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 26px 54px rgba(90, 74, 58, .18),
    0 4px 10px rgba(90, 74, 58, .08),
    inset 0 1px 0 rgba(255, 255, 255, .95);
}
.dir-card__text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dir-card__text b {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(24px, 2.6vw, 32px); line-height: 1.1;
}
.dir-card__comp { font-size: 13px; line-height: 1.55; color: var(--muted-dk); }
.dir-card__cta {
  margin-top: 6px;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--terra-dk);
}
.dir-card__cta em { font-style: normal; transition: margin-left .2s ease; }
.dir-card:hover .dir-card__cta em { margin-left: 6px; }

/* «В разработке» — состояние вычисляется сборкой из реестра, не руками */
.dir-card--soon { background: linear-gradient(157deg, #FBF7F0 0%, #F7F1E7 60%, #F0E8DA 100%); }
.dir-card--soon .dir-tile { filter: saturate(.55); opacity: .8; }
.dir-card--soon .dir-card__cta { color: var(--muted-dk); letter-spacing: .14em; }
.dir-card--soon:hover {
  transform: none;
  box-shadow: 0 18px 40px rgba(90, 74, 58, .14), 0 3px 8px rgba(90, 74, 58, .07),
              inset 0 1px 0 rgba(255, 255, 255, .95);
}

/* squircle-плитка — механика бренд-платформы 1:1 */
.dir-tile {
  --tile: clamp(120px, 14vw, 168px);
  width: var(--tile); height: var(--tile);
  flex-shrink: 0;
  border-radius: 28%;
  display: grid; place-items: center;
  position: relative;
  /* матовое стекло: заливка полупрозрачная, поэтому сквозь плитку
     просвечивает карточка; рамка отделяет её от светлого фона */
  border: 1.5px solid rgba(255, 255, 255, .55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  /* грань стекла: светлая фаска сверху, тёмная снизу, мягкий контур */
  box-shadow:
    0 10px 22px rgba(44, 42, 36, .18),
    inset 0 2px 1px rgba(255, 255, 255, .70),
    inset 0 -2px 2px rgba(44, 42, 36, .18),
    inset 0 0 0 1px rgba(255, 255, 255, .18);
}
.dir-tile::after {
  content: ''; position: absolute; inset: 0; border-radius: 28%;
  background: linear-gradient(157deg, rgba(255, 255, 255, .26), transparent 46%);
}
.dir-tile svg {
  width: 46%; height: 46%;
  fill: none; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.dir-tile--sm { --tile: 88px; }
/* Плашка-фото вместо иконки на градиенте (см. build_site.py:
   category_visuals) — тот же squircle .dir-tile, но без стеклянной
   рамки/блика ::after — они рассчитаны на цветной фон, на фото не нужны. */
.dir-tile--photo {
  border: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: 0 10px 22px rgba(44, 42, 36, .18);
  overflow: hidden;
}
.dir-tile--photo::after { display: none; }
.dir-tile__img { width: 100%; height: 100%; object-fit: cover; }
.dir-tile--terra {
  background: linear-gradient(157deg, rgba(214, 160, 115, .92), rgba(192, 132, 90, .92) 58%, rgba(172, 113, 72, .92));
}
.dir-tile--terra svg { stroke: #FFF7EF; }
.dir-tile--oak {
  background: linear-gradient(157deg, rgba(107, 90, 71, .92), rgba(90, 74, 58, .92));
}
.dir-tile--oak svg { stroke: #F0E2CF; }
.dir-tile--sage {
  background: linear-gradient(157deg, rgba(166, 194, 183, .90), rgba(138, 173, 160, .90) 60%, rgba(116, 151, 140, .90));
}
.dir-tile--sage svg { stroke: #FFFDF8; }
/* Светлая плитка сливается со светлой карточкой — рамка темнее остальных */
.dir-tile--linen {
  background: linear-gradient(157deg, rgba(240, 228, 210, .90), rgba(229, 212, 190, .90));
  border-color: rgba(90, 74, 58, .34);
}
.dir-tile--linen svg { stroke: #A06840; }

/* ── Для бизнеса ── */
.b2b {
  background: linear-gradient(135deg, #3A3830 0%, #2C2A24 60%, #1E1C18 100%);
  color: var(--cream);
  padding: var(--space-2xl) 0;
  /* координаты #slide-8: круги по диагонали, оба за краем */
  --c1-size: 460px; --c1-pos: -130px auto auto -130px; --c1-color: rgba(192, 132, 90, .30);
  --c2-size: 520px; --c2-pos: auto -140px -160px auto; --c2-color: rgba(138, 173, 160, .22);
}
/* заказчик уточнил: «уже» имелось в виду по высоте, не по ширине (первая
   попытка — max-width:590px на .wrap — была неверной, убрана). .dirs/.b2b/
   .brand у сайта — секции на весь экран (общее правило min-height:
   calc(100vh - 56px), см. выше) — переопределяем только для .b2b вдвое
   меньше, остальные секции не трогаем. 2026-09-09. */
.b2b { min-height: calc((100vh - 56px) / 2); }
.b2b__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md);
  margin-bottom: var(--space-xl);
}
.b2b__card {
  border: 1px solid rgba(192, 132, 90, .25);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  background: linear-gradient(135deg, #3A3830, #2C2A24 55%, #1E1C18);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .07);
  position: relative; overflow: hidden;
}
/* мягкое пятно света в углу — глубина вместо плоской заливки (.cg2-pill) */
.b2b__card::before {
  content: '';
  position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(ellipse 60% 50% at 30% 20%, rgba(192, 132, 90, .12) 0%, transparent 70%);
  pointer-events: none;
}
.b2b__card > * { position: relative; z-index: 1; }
.b2b__card b {
  display: block;
  font-family: var(--font-display); font-weight: 400; font-size: 24px;
  margin-bottom: var(--space-xs);
}
.b2b__card p { font-size: 14px; line-height: 1.7; color: var(--linen); }
/* Кнопка «Написать» — тот же .glass-pill.glass-pill--sage, что и «Каталог →»
   в hero (реально используемый на сайте компонент, не .btn-main — тот
   определён в CSS, но нигде не подключён в разметке). Модификатор только
   даёт карточный размер+стрелку-hover, без hero-шной entrance-анимации. */
.b2b__cta {
  margin-top: var(--space-sm);
  font-size: 13px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase;
  padding: 14px 30px; gap: 10px;
  transition: transform .2s ease;
}
.b2b__cta em { font-style: normal; transition: transform .2s ease; }
.b2b__cta:hover { transform: translateY(-2px); }
.b2b__cta:hover em { transform: translateX(4px); }
.b2b__manager { font-size: 13px; color: var(--linen); opacity: .8; margin-top: var(--space-sm); }
/* Запасные каналы связи под основной кнопкой — тот же паттерн, что
   .ftr__col a/span (var(--muted), hover var(--linen)): на случай сбоя
   одного мессенджера у партнёра остаётся способ достучаться. 2026-09-23. */
.b2b__channels {
  display: flex; flex-wrap: wrap; gap: 4px 16px;
  margin-top: 10px;
  font-size: 13px; color: var(--muted);
}
.b2b__channels a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.b2b__channels a:hover { color: var(--linen); }

.btn-main {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; letter-spacing: .08em; color: var(--cream);
  background: linear-gradient(135deg, #D4986A, #C0845A 50%, #A06840);
  box-shadow: var(--shadow-terra);
  border-radius: var(--radius-control);
  padding: 14px 28px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn-main:hover { transform: translateY(-2px); box-shadow: var(--shadow-terra-hover); }
.btn-main em { font-style: normal; transition: transform .2s ease; }
.btn-main:hover em { transform: translateX(4px); }
/* страница 404: две кнопки в ряд под текстом */
.notfound__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--space-lg); }

/* ── О бренде ── */
.brand {
  /* Круги (.atmo) убраны по просьбе заказчика — вместо них тот же
     узор-подложка, что в блоке «Каталог» (.dirs): та же .pattern
     (иконки-предметы), тот же приём position:relative+overflow:hidden
     на секции и .wrap{position:relative;z-index:1} поверх узора,
     1:1 с .dirs ниже. 2026-09-09. */
  position: relative;
  overflow: hidden;
  padding: var(--space-2xl) 0;
  background:
    radial-gradient(ellipse 55% 45% at 20% 85%, rgba(138, 173, 160, .12) 0%, transparent 70%),
    linear-gradient(180deg, #EFE5D4 0%, var(--cream) 50%, #FBF7F0 100%);
}
.brand .wrap { position: relative; z-index: 1; }
.brand__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md);
}
/* Карточки-заливки — крупная подпись видна с одного взгляда (был тихий
   кремовый фон+тонкая рамка, эскиз заказчика попросил заметнее). Цвета —
   точные значения по просьбе заказчика 2026-09-09: база — #706E6C
   (нейтральный тёплый серый), акцент — sage (--sage), обе с белым
   (кремовым) текстом. Было: espresso/terra-градиенты с тёмным текстом
   на акценте — заказчик попросил заменить на эти два конкретных цвета. */
.brand__card {
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-lg) var(--space-xl);
  box-shadow: var(--elevation-1);
}
.brand__card--base {
  /* заказчик попросил вернуть тёмный (было #706E6C, не подошло) —
     тот же тёмный градиент, что у .cover-hero/.banner__pane--text. */
  background: linear-gradient(157deg, #3A3830 0%, #2C2A24 58%, #1B1916 100%);
  color: var(--cream);
}
.brand__card--accent {
  background: var(--sage);
  color: var(--cream);
}
.brand__card b {
  display: block;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(28px, 3.2vw, 38px);
  margin-bottom: var(--space-xs);
}
.brand__card--base p { color: var(--linen); }
.brand__card--accent p { color: var(--cream); }
.brand__card p { font-size: 14px; line-height: 1.7; }

/* Страница «Контакты» (2026-09-23, перекомпоновано 2026-09-24 по просьбе
   заказчика — 2 квадратных блока в размер баннера выше, тот же приём
   сетки: .banner{grid-template-columns:1fr 1fr}/.banner__pane{aspect-ratio:1;
   max-height:560px}). Карточка менеджера — тот же приём, что
   .brand__card--base, кнопки — тот же .glass-pill, что у «Написать»
   в блоке B2B и «Каталог →» в hero. */
.contact-top { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.contact-card, .contact-form-card {
  aspect-ratio: 1; max-height: 560px;
  display: flex; flex-direction: column;
}
/* Заказчик попросил плашку менеджера цветом «Muted dark» (var(--muted-dk))
   со страницы стилей вместо espresso-градиента .brand__card--base — тот же
   класс (радиус/паддинг/тень/цвет текста) остаётся, перекрываем только фон.
   Позже этого правила в файле, чем .brand__card--base — при равной
   специфичности выигрывает то, что ниже (см. правило проекта №12). */
.contact-card { background: var(--muted-dk); }
.contact-links { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: var(--space-md); }
.contact-links__item {
  font-size: 12px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase;
  padding: 13px 16px; gap: 8px;
  transition: transform .2s ease;
}
.contact-links__item em { font-style: normal; transition: transform .2s ease; }
.contact-links__item:hover { transform: translateY(-2px); }
.contact-links__item:hover em { transform: translateX(4px); }
.contact-card__foot {
  margin-top: auto; padding-top: var(--space-md);
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-sm);
}
.contact-card__phone { font-size: 14px; line-height: 1.6; color: var(--linen); }
.contact-card__phone a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.contact-qr {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 4px;
  text-align: center; text-decoration: none;
}
.contact-qr img {
  width: 76px; height: 76px; padding: 6px;
  background: var(--cream); border-radius: var(--radius-md); box-shadow: var(--elevation-1);
}
.contact-qr span { font-size: 10px; color: var(--muted-dk); max-width: 88px; line-height: 1.4; }

/* Блок адрес/часы/реквизиты — переехал вниз, во всю ширину, 3 колонки
   (заказчик попросил поменять местами с формой 2026-09-24). Та же светлая
   карточка, что и форма выше. */
.contact-details {
  margin-top: var(--space-xl);
  padding: var(--space-lg);
  background: linear-gradient(157deg, #FFFFFF 0%, #FEFCF8 60%, #FAF5EC 100%);
  border: 1px solid rgba(90, 74, 58, .08);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 40px rgba(90, 74, 58, .14), 0 3px 8px rgba(90, 74, 58, .07);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg);
}
.contact-details p:not(.ftr__head) { margin-top: 4px; font-size: 14px; line-height: 1.6; color: var(--muted-dk); }
@media (max-width: 860px) {
  .contact-top { grid-template-columns: 1fr; }
  .contact-card, .contact-form-card { aspect-ratio: auto; max-height: none; }
  .contact-details { grid-template-columns: 1fr; }
}

/* Форма «Написать нам» (2026-09-24) — светлая карточка тем же приёмом
   фона/тени, что .dir-card (белый градиент на кремовой секции), отделяет
   «оставить заявку» от тёмной карточки Павла с мессенджерами; теперь в
   правом квадрате верхнего ряда, тот же размер, что у карточки Павла. */
.contact-form-card {
  padding: var(--space-lg);
  background: linear-gradient(157deg, #FFFFFF 0%, #FEFCF8 60%, #FAF5EC 100%);
  border: 1px solid rgba(90, 74, 58, .08);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 40px rgba(90, 74, 58, .14), 0 3px 8px rgba(90, 74, 58, .07);
}
.contact-form-card b {
  display: block;
  font-family: var(--font-display); font-weight: 400; font-size: 22px;
  color: var(--espresso); margin-bottom: 4px;
}
.contact-form-card > p { font-size: 14px; color: var(--muted-dk); margin-bottom: var(--space-md); }
.contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
.contact-form__field {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: var(--space-sm); font-size: 13px; color: var(--muted-dk);
}
.contact-form__row .contact-form__field { margin-top: 0; }
.contact-form__field input, .contact-form__field textarea {
  font: inherit; font-size: 14px; color: var(--espresso);
  padding: 11px 14px;
  border: 1px solid rgba(90, 74, 58, .18);
  border-radius: var(--radius-control);
  background: var(--cream);
  transition: border-color .2s ease;
}
.contact-form__field input:focus, .contact-form__field textarea:focus { outline: none; border-color: var(--terra); }
.contact-form__consent { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; font-size: 13px; line-height: 1.5; cursor: pointer; }
.contact-form__consent input { margin-top: 3px; flex: none; accent-color: var(--terra); }
.contact-form__consent a { text-decoration: underline; }
.contact-form__field textarea { resize: vertical; min-height: 56px; font-family: inherit; }
.contact-form__hp { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.contact-form__submit { margin-top: var(--space-md); border: 0; cursor: pointer; }
.contact-form__submit:disabled { opacity: .6; cursor: default; transform: none; }
.contact-form__status { margin-top: var(--space-sm); font-size: 13px; min-height: 1em; }
.contact-form__status[data-state="ok"] { color: var(--sage); }
.contact-form__status[data-state="error"] { color: var(--terra-dk); }
@media (max-width: 560px) {
  .contact-form__row { grid-template-columns: 1fr; }
}

/* Фото под карточками — та же рамка/скругление, что у .banner__pane,
   и та же честная заглушка-«ещё нет фото» (.banner__pane--stub/.banner__rings),
   когда assets/brand/base-accent.* ещё не положен (см. build_site.py). */
.brand__photo {
  /* тот же зазор, что между .brand__grid — сверху и снизу от карточек
     одинаковое расстояние, заказчик попросил явно (было --space-xl,
     заметно больше межколоночного --space-md). 2026-09-09. */
  margin-top: var(--space-md);
  /* width:100% явно, не «по умолчанию блочного элемента» — иначе
     aspect-ratio + max-height вместе пересчитывают ШИРИНУ из урезанной
     высоты (браузер честно держит пропорцию 21:9, но раз высота упёрлась
     в max-height:480px, он сужает блок до 480*21/9=1120px вместо полных
     1132px контейнера) — правый край съезжал на 12px, не дотягиваясь до
     края карточек сверху. С явным width:100% высота продолжает капаться
     в 480px, но ширина больше не «плывёт» вслед за ней. 2026-09-09. */
  width: 100%;
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 21 / 9;
  max-height: 480px;
}
/* object-position чуть ниже центра — в исходнике сверху много пустой
   стены, снизу тарелки/приборы упираются в край кадра; без сдвига
   центрированный кроп 21:9 обрезает низ переднего блюда. */
.brand__photo-img { width: 100%; height: 100%; object-fit: cover; object-position: center 80%; display: block; }
.brand__photo--stub {
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(ellipse 70% 90% at 50% 50%, rgba(90, 74, 58, .45) 0%, transparent 70%),
    linear-gradient(158deg, #322F29 0%, #262420 60%, #1B1916 100%);
}
.brand__photo-note {
  position: relative; z-index: 1;
  font-family: var(--font-display); font-style: italic; font-size: 15px;
  color: var(--linen);
}

/* ── Баннер раздела — два квадратных сегмента ──
   Слева текст на фирменном градиенте, справа фото. Сегменты держат
   квадрат, пока хватает высоты: потолок не даёт баннеру расти на
   широких мониторах до половины экрана. ── */
.banner {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  max-width: 1180px;
  /* воздух под шапкой: вплотную к ней баннер читался как её продолжение */
  margin: var(--space-xl) auto 0;
  padding: 0 var(--space-md);
  color: var(--cream);
}
.banner__pane {
  position: relative;
  aspect-ratio: 1;
  max-height: 560px;
  overflow: hidden;
  /* тот же радиус, что у карточек: на сайте нет прямых углов */
  border-radius: var(--radius-lg);
}
.banner__pane--text {
  display: flex; align-items: center;
  /* тот же приём, что на первом экране: свет в стороне фото,
     диагональный переход к тёмному */
  background:
    radial-gradient(ellipse 70% 60% at 88% 42%, rgba(90, 74, 58, .50) 0%, transparent 72%),
    linear-gradient(158deg, #3A3830 0%, #2C2A24 52%, #1B1916 100%);
}
.banner__img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Правый сегмент без фото — кольца-«тарелка» на том же градиенте */
.banner__pane--stub {
  background:
    radial-gradient(ellipse 70% 90% at 50% 50%, rgba(90, 74, 58, .45) 0%, transparent 70%),
    linear-gradient(158deg, #322F29 0%, #262420 60%, #1B1916 100%);
}
.banner__rings {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  pointer-events: none;
}
.banner__rings i {
  grid-area: 1 / 1;
  border-radius: 50%;
  border: 1px solid rgba(192, 132, 90, .28);
  aspect-ratio: 1;
}
.banner__rings i:nth-child(1) { width: 72%; }
.banner__rings i:nth-child(2) { width: 66%; border-color: rgba(138, 173, 160, .40); }
.banner__rings i:nth-child(3) { width: 49%; }
.banner__logo { grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; width: 34%; }
.banner__logo svg {
  width: 100%; height: auto; display: block;
  filter: drop-shadow(0 24px 60px rgba(0, 0, 0, .6)) drop-shadow(0 4px 16px rgba(0, 0, 0, .4));
}

/* Модификатор для страницы серии — тот же баннер, что у направления/
   категории, но текста в нём больше (имя + клейм + лид + цифры), в
   квадратную рамку категории он не влезает и обрезался бы по высоте.
   Текстовая панель растёт по контенту; фото-панели тоже снимаем
   aspect-ratio — иначе она держит квадрат по своей ширине (grid не
   растягивает высоту ячейки с заданным aspect-ratio, даже если сосед
   выше). Без aspect-ratio фото-панель — обычный блок, стретчится по
   умолчанию на высоту строки, а .banner__img (height:100%, object-fit:
   cover) достраивает картинку под неё. Разница почти незаметна на
   Маракеше (там текст короче и высоты случайно совпадали), но видна
   на Японии, где текста больше. */
.banner--tall .banner__pane--text,
.banner--tall .banner__pane--media { aspect-ratio: auto; max-height: none; }

.banner__in { padding: var(--space-2xl) var(--space-xl); }
.banner__title {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(28px, 3.6vw, 52px); line-height: 1.05;
  max-width: 14ch;
}
.banner__text {
  margin-top: var(--space-md);
  font-size: 14px; line-height: 1.6; color: var(--linen);
}

/* ── Плашки категорий: по две в ряд, на телефоне по одной ── */
.cat-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}
.cat-card {
  display: flex; gap: var(--space-lg);
  background: linear-gradient(157deg, #FFFFFF 0%, #FEFCF8 60%, #FAF5EC 100%);
  border: 1px solid rgba(90, 74, 58, .04);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow:
    0 18px 40px rgba(90, 74, 58, .14),
    0 3px 8px rgba(90, 74, 58, .07),
    inset 0 1px 0 rgba(255, 255, 255, .95);
  transition: transform .25s ease, box-shadow .25s ease;
}
.cat-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 26px 54px rgba(90, 74, 58, .18),
    0 4px 10px rgba(90, 74, 58, .08),
    inset 0 1px 0 rgba(255, 255, 255, .95);
}
.cat-card__icon { --tile: 84px; }
.cat-card__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cat-card__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(22px, 2.2vw, 28px); line-height: 1.1;
}
.cat-card__lead { font-size: 15px; color: var(--terra-dk); }
.cat-card__text { font-size: 14px; line-height: 1.65; color: var(--muted-dk); }
.cat-card__items {
  margin-top: 4px;
  font-size: 12px; line-height: 1.5; color: var(--muted-dk); opacity: .8;
}
.cat-card__cta {
  margin-top: var(--space-2xs);
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--terra-dk);
}
.cat-card__cta em { font-style: normal; transition: margin-left .2s ease; }
.cat-card:hover .cat-card__cta em { margin-left: 6px; }

.dpage__intro {
  max-width: 62ch; margin-bottom: var(--space-2xl);
  font-size: 16px; line-height: 1.7; color: var(--muted-dk);
}

/* ── Карточка серии — мини-презентация ──
   Образ первичен, текст служебен: слева крупный кадр, справа палитра,
   факты цифрами и ряд форм. Человек понимает состав серии, не проваливаясь
   внутрь. На узких экранах кадр уходит наверх, формы — в прокрутку. ── */
/* Расстояние между сериями держит контейнер, а не отступ у карточки:
   так у последней не остаётся лишнего хвоста перед подвалом. Зазор крупный —
   у карточек мягкая тень, при малом промежутке они читаются как одна плита. */
.series-list { display: grid; gap: var(--space-3xl); }

.series {
  display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
  gap: var(--space-2xl);
  align-items: center;
  /* Сплошной белый — одинаково для всех серий, вне зависимости от того,
     что на фото (предметка на белом, кадр в сцене, обтравка на тон).
     Раньше карточка получала кремовый градиент или белый в зависимости
     от типа фото серии (см. историю flat_bg в series_cards()) — заказчик
     отметил, что от этого фон карточки visibly плавал между разделами
     (Корзины — белый, Сервировка — бежевый), хотя должен быть системным
     и одним и тем же везде. */
  background: #FFFFFF;
  border: 1px solid rgba(90, 74, 58, .04);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow:
    0 18px 40px rgba(90, 74, 58, .14),
    0 3px 8px rgba(90, 74, 58, .07),
    inset 0 1px 0 rgba(255, 255, 255, .95);
}
.series__media {
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-md);
  overflow: hidden;
  /* белый, не кремовый: предметная съёмка почти всегда на чистом белом
     фоне — кремовая рамка была бы видна как шов вокруг кадра при
     object-fit:contain (не по всем сериям фото квадратное).
     У Маракеша/Японии кадр — обтравка на тоне серии и залит целиком,
     фон контейнера тут ни на что не влияет. */
  background: #FFFFFF;
}
.series__media img {
  width: 100%; height: 100%; object-fit: contain;
  transition: transform .6s cubic-bezier(.2, .6, .2, 1);
}
/* модификатор после базы, иначе при равной специфичности не сработает:
   предметка вписывается в квадрат, кадр в среде — заполняет его */
.series__media--scene img { object-fit: cover; }
.series:hover .series__media img { transform: scale(1.04); }

.series__body { min-width: 0; }
.series__name {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(30px, 3.4vw, 44px); line-height: 1.05;
}
/* Обещание серии — отдельной строкой антиквой. Лид описывает («марокканский
   орнамент…»), клейм утверждает, и звучать он должен как подзаголовок,
   а не как первая строка абзаца. Есть не у каждой серии. */
.series__claim {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(19px, 1.9vw, 26px); line-height: 1.25;
  margin-top: var(--space-xs); max-width: 22ch;
}
.series__lead {
  margin-top: var(--space-2xs);
  max-width: 46ch; font-size: 15px; line-height: 1.7; color: var(--muted-dk);
}

/* факты цифрами, а не прилагательными */
.series__facts {
  display: flex; gap: var(--space-xl);
  margin: var(--space-lg) 0;
  list-style: none;
}
.series__facts b {
  display: block;
  font-family: var(--font-display); font-weight: 400; font-size: 32px; line-height: 1;
}
.series__facts span {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-dk);
}

/* палитру показываем, а не описываем */
.series__colors { display: flex; gap: 8px; margin-bottom: var(--space-lg); }
.sw {
  width: 22px; height: 22px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(44, 42, 36, .18);
}
/* формы серии — состав виден сразу */
.series__forms {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(96px, 1fr);
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}
.mini { min-width: 0; }
.mini img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: contain;
  background: #FFFFFF;
  border-radius: var(--radius-sm);
  transition: transform .3s ease;
}
.mini:hover img { transform: translateY(-3px); }
/* съёмки формы ещё нет — честная пустая плитка вместо чужой карточки */
.mini__gap {
  display: block; width: 100%; aspect-ratio: 3 / 4;
  border-radius: var(--radius-sm);
  background: repeating-linear-gradient(135deg,
    #F7F1E7 0 8px, #F2EADC 8px 16px);
  box-shadow: inset 0 0 0 1px rgba(90, 74, 58, .08);
}
.series__foot {
  display: flex; align-items: baseline; gap: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(90, 74, 58, .10);
}
.series__price { font-family: var(--font-display); font-size: 26px; }
.series__soon {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-dk);
}

/* ── Страница направления ── */
.dpage { padding: var(--space-lg) 0 var(--space-3xl); }
.dpage .h2 { margin-bottom: var(--space-lg); }
.crumbs {
  display: flex; gap: 10px; align-items: baseline;
  font-size: 12px; letter-spacing: .05em; color: var(--muted-dk);
  margin-bottom: var(--space-lg);
}
.crumbs a:hover { color: var(--terra-dk); }
.crumbs b { font-weight: 400; color: var(--espresso); }
/* Та же строка на странице серии — сразу под цветной полосой sbanner,
   своего отступа сверху у .dpage тут нет, добавляем локально. */
.scrumbs { padding-top: var(--space-lg); }
.scrumbs .crumbs { margin-bottom: 0; }
.dpage__head {
  display: flex; align-items: center; gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
}
.dpage__comp { margin-top: 8px; font-size: 14px; color: var(--muted-dk); }
.dpage__series {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-md);
}
.series-card {
  background: linear-gradient(157deg, #FFFFFF 0%, #FCF8F1 58%, #F2E9DA 100%);
  border: 1px solid rgba(90, 74, 58, .08);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--elevation-1);
}
.series-card b {
  display: block;
  font-family: var(--font-display); font-weight: 400; font-size: 26px;
  margin-bottom: 6px;
}
.series-card p { font-size: 13px; color: var(--muted-dk); margin-bottom: var(--space-sm); }
.series-card__soon {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted-dk);
}
.dpage__empty { max-width: 52ch; }
.dpage__empty p {
  font-size: 15px; line-height: 1.7; color: var(--muted-dk);
  margin-bottom: var(--space-lg);
}

/* ── Футер ── */
.ftr {
  background: linear-gradient(180deg, #302E28 0%, #2C2A24 45%, #1B1916 100%);
  color: var(--muted);
}
.ftr__in { max-width: 1180px; margin: 0 auto; padding: var(--space-2xl) var(--space-md) var(--space-lg); }
.ftr__mark { color: var(--terra); margin-bottom: var(--space-xl); }
.ftr__mark .wordmark { height: 34px; }
.ftr__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid rgba(232, 216, 196, .12);
}
.ftr__col { display: flex; flex-direction: column; gap: 10px; }
.ftr__head {
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--terra-lt);
  margin-bottom: 4px;
}
.ftr__col a, .ftr__col span { font-size: 13px; color: var(--muted); }
.ftr__col a:hover { color: var(--linen); }
.ftr__bottom {
  display: flex; justify-content: space-between; gap: var(--space-md);
  padding-top: var(--space-md);
  font-size: 12px;
}

/* ── Мобильный ── */
@media (max-width: 860px), (max-height: 700px) {
  html.snap { scroll-snap-type: none; }
  .dirs, .b2b, .brand { min-height: 0; }
}

@media (max-width: 860px) {
  /* Плашки категорий — в одну колонку */
  .cat-grid { grid-template-columns: 1fr; }
  /* Карточка серии: кадр наверх, формы — в горизонтальную прокрутку */
  .series-list { gap: var(--space-2xl); }   /* карточки выше — зазор меньше */
  .series { grid-template-columns: 1fr; gap: var(--space-lg); }
  .series__facts { gap: var(--space-lg); }
  .series__forms {
    grid-auto-columns: 104px;
    overflow-x: auto; padding-bottom: 6px;
    scrollbar-width: thin;
  }
  /* Баннер: сегменты друг под другом, текст первым */
  .banner { grid-template-columns: 1fr; }
  .banner__pane { aspect-ratio: 16 / 10; max-height: none; }
  .banner__pane--media { aspect-ratio: 1; }
  .banner--tall .banner__pane--text { aspect-ratio: auto; }
  .banner__in { padding: var(--space-xl) var(--space-md); }

  /* Бургер: три полосы, при открытии складываются в крест */
  .hdr__burger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    margin-left: auto;
    width: 44px; height: 44px; padding: 0 10px;
    cursor: pointer;
  }
  .hdr__burger span {
    display: block; height: 1.5px; background: var(--cream);
    transition: transform .25s ease, opacity .2s ease;
  }
  .hdr__toggle:checked ~ .hdr__burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .hdr__toggle:checked ~ .hdr__burger span:nth-child(2) { opacity: 0; }
  .hdr__toggle:checked ~ .hdr__burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  .hdr__nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: rgba(44, 42, 36, .96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(192, 132, 90, .12);
  }
  .hdr__toggle:checked ~ .hdr__nav { display: flex; }
  .hdr__nav a {
    padding: 16px 20px; font-size: 15px;
    border-top: 1px solid rgba(232, 216, 196, .08);
  }

  .hero__slogan { font-size: clamp(17px, 4.2vw, 22px); }
  .hero__left .hero__brand .wordmark { height: clamp(28px, 10vw, 46px); }
  .hdr__in { padding: 0 16px; }
  .hdr__nav { display: none; }
  .dirs__grid { grid-template-columns: 1fr; }
  .b2b__grid, .brand__grid { grid-template-columns: 1fr; }
  .brand__photo { aspect-ratio: 4 / 3; max-height: none; }
  .ftr__mark { color: var(--terra); margin-bottom: var(--space-xl); }
.ftr__mark .wordmark { height: 34px; }
.ftr__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .cat-card { flex-direction: column; }
  .cat-card__icon { --tile: 72px; }

  /* Плитка слева, текст рядом: в колонку карточка растягивалась,
     плитка теряла квадрат, а строка состава ломалась на три. */
  .dir-card {
    gap: var(--space-md);
    padding: var(--space-md);
    align-items: center;
  }
  .dir-tile { --tile: 92px; }
  .dir-card__text b { font-size: 21px; }
  .dir-card__comp { font-size: 12px; line-height: 1.5; }
  .dir-card__cta { font-size: 11px; margin-top: 2px; }
  .ftr__bottom { flex-direction: column; }
}

/* ═══ СТРАНИЦА СЕРИИ ═══════════════════════════════════════════
   Четыре блока: эмоция · росписи · модели · статья.
   Эмоция — единственная тёмная полоса во всю ширину на светлом
   сайте: слом ритма делает вход в серию событием, а цвет полосы
   приходит из данных серии (--tone), так что характер у каждой
   серии свой без отдельной вёрстки. ═══════════════════════════ */

.sbanner {
  /* Свет идёт слева направо: тёмный край у текста, светлый — у предметов.
     Ровная заливка делала полосу плоской и «печатной». */
  background: linear-gradient(96deg,
    var(--tone-deep) 0%, var(--tone) 46%, var(--tone-light) 100%);
  padding: var(--space-xl) 0;
  overflow: hidden;
}
/* На светлом тоне текст переворачивается в тёмный: cream по кремовому
   не читается вовсе. Признак приходит из данных — считается по яркости. */
.sbanner--light .sbanner__name,
.sbanner--light .sbanner__claim,
.sbanner--light .sbanner__facts b { color: var(--espresso); }
.sbanner--light .sbanner__lead { color: var(--muted-dk); opacity: 1; }
.sbanner--light .sbanner__facts span { color: var(--muted-dk); opacity: 1; }
.sbanner--light .eyebrow--light { color: var(--terra-dk); }

.sbanner__in {
  display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
  gap: var(--space-2xl); align-items: center;
}
.sbanner__name {
  color: var(--cream);
  font-size: clamp(44px, 6vw, 76px); line-height: 1;
  margin: var(--space-xs) 0 var(--space-md);
}
.sbanner__claim {
  font-family: var(--font-display); font-size: clamp(21px, 2.2vw, 30px);
  line-height: 1.25; color: var(--linen); max-width: 20ch;
}
.sbanner__lead {
  margin-top: var(--space-md);
  max-width: 46ch; font-size: 15px; line-height: 1.75;
  color: var(--linen); opacity: .8;
}
.sbanner__facts {
  display: flex; gap: var(--space-xl);
  margin-top: var(--space-xl); list-style: none;
}
.sbanner__facts b {
  display: block; color: var(--cream);
  font-family: var(--font-display); font-weight: 400; font-size: 34px; line-height: 1;
}
.sbanner__facts span {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--linen); opacity: .65;
}

/* Раскладка предметов: не сетка, а стол — предметы лежат внахлёст
   и разного размера, иначе четыре круга читаются как таблица. */
.sbanner__collage { position: relative; aspect-ratio: 1.12; }
.sbanner__plate {
  /* Кладём предмет ЦЕНТРОМ в заданную точку поля, а не прижимаем к краю:
     иначе уменьшенный кадр (посуда с ручками) уезжал бы от середины
     композиции вслед за своим размером. */
  position: absolute; border-radius: 50%;
  transform: translate(-50%, -50%);
  width: calc(var(--w) * var(--k, 1));
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .24));
}
/* Четыре квадранта без нахлёста: каждая тарелка чуть меньше половины
   поля, между ними зазор. Крупность сохранена за счёт того, что правая
   колонка стала шире, а не за счёт наложения предметов друг на друга.
   Движения по наведению нет — полоса читается как снятый кадр. */
.sbanner__plate--1 { --w: 47%; left: 27%; top: 24%; }
.sbanner__plate--2 { --w: 44%; left: 74%; top: 23%; }
.sbanner__plate--3 { --w: 44%; left: 27%; top: 77%; }
.sbanner__plate--4 { --w: 47%; left: 74%; top: 77%; }

.spage { padding: var(--space-3xl) 0; }
.spage--decors { background: #FBF7F1; }
.spage__intro {
  max-width: 54ch; margin: calc(var(--space-xl) * -1 + 4px) 0 var(--space-xl);
  font-size: 15px; line-height: 1.75; color: var(--muted-dk);
}

/* ── Росписи ── */
.decors {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: var(--space-lg);
}
/* Кадры обтравлены — тарелка лежит прямо на фоне страницы, без белой
   подложки под ней; тень поэтому не box-, а drop-shadow по силуэту. */
.decor img {
  width: 100%; aspect-ratio: 1; object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(90, 74, 58, .18));
  transition: transform .3s ease;
}
.decor:hover img { transform: translateY(-4px); }
.decor figcaption { margin-top: var(--space-sm); text-align: center; }
.decor figcaption b { display: block; font-size: 14px; }
.decor figcaption span { font-size: 12px; color: var(--muted-dk); }

/* ── Карточка модели — перенесена из лендинга Маракеша 1:1 ──
   Слева факты, справа галерея. Плашки серии/роли и плитка «Группа ГОСТ»
   убраны по правке заказчика. ── */
/* overflow-anchor:none на всей карточке — «scroll anchoring» браузера
   может выбрать якорем не сам аккордеон, а что угодно рядом (например
   фото), и подвинуть именно его при раскрытии большого списка пилюль
   (см. .acc). Отключаем на всю карточку, не только на .acc, для
   надёжности. 2026-09-08. */
.form-card { padding: 0; overflow-anchor: none; }
/* Несколько форм серии подряд — разделяем полосой, иначе карточки
   слипаются в одну простыню фактов. */
.form-card + .form-card {
  margin-top: var(--space-2xl);
  padding-top: var(--space-2xl);
  border-top: 1px solid var(--hairline, rgba(44, 42, 36, .1));
}
.split-layout { display: flex; align-items: flex-start; gap: var(--space-2xl); }
.split-layout__text { flex: 1; min-width: 0; }
.split-layout__media { width: 520px; flex-shrink: 0; }

/* Три независимых блока — название / цена / артикул (2026-09-08, третий
   заход). Ни флексбокс, ни baseline, ни простая стопка не дают точно
   заданного поведения: цена — низ ПЕРВОЙ строки названия; артикул — низ
   ВТОРОЙ строки (даже виртуальной, если название в одну строку), а если
   строк 3 и больше — низ САМОЙ ПОСЛЕДНЕЙ. Это возможно только через
   реальное измерение строк заголовка в JS (Range.getClientRects, см.
   <script> ниже, positionModelHead()) — считать которая строка где
   заканчивается чистым CSS нельзя, число строк заранее не известно.
   Поэтому на десktoпе цена/артикул сняты из потока (position:absolute,
   .model-head — их контейнер) и получают top/bottom из JS; на мобильном
   эта механика не нужна вовсе — там обычный поток колонкой. */
.model-head { position: relative; display: flex; flex-wrap: wrap; gap: var(--space-md); }
/* Название — обратно на антикву .display--lg (Cormorant, как и было);
   попытка свести к шрифту цены не прижилась, откатили. 2026-09-09:
   полужирный, но не «сильно» — 330 читался слишком тонким на фоне общей
   правки карточки. 500 — не произвольное число: у Cormorant Garamond на
   сайте загружены только начертания 300/400/500 (см. base.html, ссылка
   на Google Fonts), это САМЫЙ жирный реально существующий файл шрифта —
   что-то жирнее (600/700) браузер всё равно подменит на ближайшее
   загруженное, то есть молча откатит на то же 500. */
.model-head h3 { flex: 1; min-width: 0; font-weight: 500; }
.model-head__art { font-size: 12px; color: var(--muted-dk); white-space: nowrap; }
/* 2026-09-09: было 24px/#443F34 — тот же вес и почти та же величина, что
   у названия (Cormorant 600, ~20-34px), два разных шрифта спорили за
   внимание вместо ясной иерархии «имя ведёт, цена — рядом, тише».
   Название не трогаем (уже несколько заходов правок с заказчиком, см.
   комментарии у .display--lg выше) — просто снижаем вес и размер цены. */
.model-head__price {
  font-family: var(--font-body); font-weight: 450; white-space: nowrap;
  font-size: 17px; line-height: 1; color: var(--muted-dk);
}
@media (min-width: 861px) {
  .model-head__price, .model-head__art { position: absolute; right: 0; }
}
/* Цена без комплектаций дублировалась на десктопе — в .model-head уже
   показана, а .acc-static (см. ниже) висел дополнительной строкой снизу
   без единой причины её не убрать (в отличие от .acc--price с
   комплектациями, там ниже ещё список — его прячем только у summary,
   не целиком). 2026-09-08. */
.acc--price > .acc__summary { display: none; }
/* .card-product__price несёт margin-top для старой раскладки (цена под
   свотчами) — внутри триггера аккордеона это лишняя высота, из-за неё
   строка «Цена» была заметно выше строки «Описание» при одинаковом
   паддинге. */
.acc--price .acc__summary .card-product__price { margin-top: 0; }
/* Свотчи цвета/росписи внутри триггера — тоже только мобильный кейс
   (см. .split-layout__text .acc--variant > .acc__summary { display:none }
   не нужен: на десктопе .acc__summary неактивен через pointer-events, но
   ВИДИМ по умолчанию — здесь его прячем совсем, чтобы название текущего
   варианта не дублировало уже видимые пилюли ниже). 2026-09-08. */
.acc--variant > .acc__summary { display: none; }
.acc__summary-label {
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-dk);
}
/* «Комплектация» слева, цена справа (перед стрелкой) — не слепленные в
   одну строку у левого края. flex:1 — чтобы эта обёртка забрала всё
   доступное место ВНУТРИ .acc__summary (там она — единственный «контент»
   рядом со стрелкой-псевдоэлементом), тогда её собственный space-between
   уже реально есть куда растягивать. align-items:flex-end, не center —
   подпись (13px) и цена (24px) разного размера, по центру цена визуально
   «провисает» ниже подписи; по нижнему краю оба текста встают на одну
   линию. 2026-09-08. */
.acc__summary-row { display: flex; flex: 1; align-items: flex-end; justify-content: space-between; gap: var(--space-sm); }
/* Строка-заглушка вместо аккордеона, когда выбирать не из чего (один
   цвет/роспись, одна комплектация) — тот же паддинг/бордер, что у
   .acc__summary, но без шеврона и без клика. */
.acc-static { padding: var(--space-sm) 0; font-size: 15px; color: var(--color-text); }
/* Цена без комплектаций выбирать не из чего, аккордеон ни к чему — но
   строка должна остаться той же строкой, что «Комплектация» выше и
   «Описание»/варианты ниже: подпись «Цена» слева, сама цена справа
   (разметка — .acc__summary-row внутри, см. HTML). 2026-09-08 (второй
   заход, было — просто цена без подписи, заказчик попросил подпись).
   Правый край цены при этом должен совпадать с тем, где останавливается
   цена в аккордеоне «Комплектация» — там справа ещё есть место под
   стрелку (8px сама стрелка + gap), а у этой строки стрелки нет вовсе
   (не <summary>, псевдоэлемент-стрелка на неё не вешается). Без этого
   отступа цена съезжала на 24px правее, чем у карточек с комплектацией —
   по странице цены не выстраивались в одну линию. */
.acc--price.acc-static { padding-right: calc(8px + var(--space-sm)); }
/* На десктопе цена уже показана в .model-head — эта строка дублировала
   её (без комплектаций скрывать больше нечего, в отличие от .acc--price
   с реальным списком комплектаций ниже). Правило должно идти ПОСЛЕ
   базового .acc--price.acc-static выше — при равной специфичности
   (два класса и там, и там) выигрывает то, что ниже по файлу; раньше
   стояло раньше и десктопное display:flex его перебивало. 2026-09-08. */
@media (min-width: 861px) {
  .acc--price.acc-static { display: none; }
}

.display { font-family: var(--font-display); font-weight: 300; line-height: 1.05; }
/* Название модели (единственное место, где используется .display--lg) —
   2026-09-08: жирнее и цветом #2C2A24 (было — тоньше/терракотовый), плюс
   сам блок «название+цена» уменьшен примерно на 30% по просьбе заказчика. */
.display--lg { font-size: clamp(20px, 2.8vw, 34px); font-weight: 600; color: #443F34; }
.form-card__desc {
  margin-top: var(--space-md); max-width: 52ch;
  line-height: 1.7; color: var(--muted-dk);
}

.price { display: flex; align-items: baseline; gap: var(--space-sm); flex-wrap: wrap; }
.card-product__price { margin-top: var(--space-md); }
/* НЕ антиква: у Cormorant цифра «1» рисуется как заглавная «I» — на
   ценнике это нечитаемо. Вес и размер и так делают цену самой тяжёлой.
   24px — тоже часть правки «блок на 30% меньше» (было 34px). */
.price-now {
  font-family: var(--font-body); font-weight: 500;
  font-size: 24px; line-height: 1; color: #2C2A24;
}

.spec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: var(--space-xs); }
/* 2026-09-09: было --space-lg (32px) — заказчик прямо показал стрелками
   избыток воздуха между блоками карточки, сжато на ступень. */
.card-product__specs { margin-top: var(--space-md); }
.spec-tile {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
  padding: var(--space-sm) var(--space-2xs);
  border-radius: var(--radius-control);
  background: var(--color-surface-alt);
}
.spec-tile svg { color: var(--terra-dk); flex-shrink: 0; }
.spec-tile__value { font-size: 13px; font-weight: 500; color: var(--color-text); }
.spec-tile__label { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); }

/* margin-top было --space-lg (32px) — сжато вместе с остальными отступами
   карточки, 2026-09-09. */
.swatches { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-top: var(--space-sm); }
.swatch {
  display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 13px;
  color: inherit; background: var(--color-surface); cursor: pointer;
  border: 1px solid rgba(44, 42, 36, .14); border-radius: var(--radius-control);
  padding: 6px 12px 6px 7px;
  transition: border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard),
              background var(--duration-fast) var(--ease-standard);
}
.swatch i { width: 18px; height: 18px; border-radius: 6px; display: block; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); }
/* Роспись вместо цвета — заливки нет, свотч показывает кадр целиком, чтобы
   десятки росписей различались на глаз, а не по подписи. */
.swatch--thumb i { background-size: cover; background-position: center; }
.swatch:hover { border-color: rgba(44, 42, 36, .34); }
.swatch.active {
  border-color: var(--espresso);
  box-shadow: 0 0 0 1px var(--espresso);
  background: var(--color-surface-alt);
}
.swatch:focus-visible { outline: 2px solid var(--terra); outline-offset: 2px; }

/* 2026-09-09: черта после каждой строки (Штучно/Пара/Набор) убрана —
   разделяли воздухом, не линией; верхняя черта над списком тоже убрана —
   она шла сразу после блока свотчей, ещё один разделитель почти впритык.
   Список остаётся секцией — за это отвечает отступ margin-top у .kits,
   не бордер. Паддинг строки — тот же, что был при бордере (--space-sm):
   первая попытка увеличить его до --space-md (компенсация за пропавшую
   линию) оказалась перебором, три строки расползались слишком широко. */
.kits { margin-top: var(--space-lg); }
.kit {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  padding: var(--space-xs) 0; /* 2026-09-09: было --space-sm — ещё компактнее, заказчик показал стрелками */
}
.kit__name { font-size: 15px; }
.kit__meta { display: block; font-size: 12px; color: var(--muted-dk); margin-top: 2px; }
/* Не --font-display — та же причина, что и у .price-now выше: у Cormorant
   цифра «1» рисуется как заглавная «I». 2026-09-09: было 24px — тот же
   размер, что у цены в шапке карточки (.model-head__price, теперь 17px) —
   цены в списке комплектаций вспомогательные, крупная цена только одна,
   наверху. Цвет — тот же var(--muted-dk), что у цены в шапке (было
   #2C2A24, тёмный — одна и та же роль «цена» должна быть одного цвета
   везде на карточке, не только размера). */
.kit__price { font-family: var(--font-body); font-weight: 500; font-size: 16px; white-space: nowrap; color: var(--muted-dk); }

/* Аккордеон «Описание»/«Цена» (нативный <details>) — 2026-09-08, только
   для телефона (JS снимает [open] там же, где ширина ≤860px). На
   десктопе остаётся открытым и неактивным (см. media-запрос ниже) —
   визуально то же самое, что было всегда. */
/* overflow-anchor:none — браузер по умолчанию пытается компенсировать
   резкие изменения высоты страницы, сам подвигая скролл («scroll
   anchoring»); для маленьких блоков (Описание) сдвиг незаметен, а для
   большого списка пилюль (Цвет/Роспись, десятки штук) — заметный прыжок
   экрана, из-за которого уезжает фото. Раскрытие аккордеона должно
   только разворачивать контент вниз, не трогая скролл вообще. */
/* margin-top было --space-md (24px) — сжато вместе с остальными отступами
   карточки, 2026-09-09 (это же правило — граница «Описание»/«Комплектация»,
   трогать саму черту не просили, только воздух вокруг нее). */
.acc { border-top: 1px solid rgba(44, 42, 36, .10); margin-top: var(--space-sm); overflow-anchor: none; }
.acc__summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-sm); padding: var(--space-sm) 0; cursor: pointer;
  list-style: none; font-size: 13px; line-height: 1; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted-dk);
}
.acc__summary::-webkit-details-marker { display: none; }
/* Стрелка всегда смотрит вниз — и закрыто, и открыто (заказчик явно
   попросил не переворачивать её вверх при разворачивании, 2026-09-08). */
.acc__summary::after {
  content: ''; width: 8px; height: 8px; flex-shrink: 0;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.acc--price .acc__summary { text-transform: none; letter-spacing: 0; }
.acc__body { padding-bottom: var(--space-sm); }
.acc--desc .acc__body { margin-top: 0; }
.acc--price .kits { margin-top: 0; border-top: 0; }

.gallery { display: flex; flex-direction: column; gap: var(--space-sm); }
/* 2026-09-30: рамка фиксирована на 3:4 (вертикальный формат маркетплейсов,
   под него теперь готовится весь новый контент) — раньше форму окна
   задавала сама фотография (--r), и при переключении цвета/кадра рамка
   меняла пропорции, «дышала», уезжала вся вёрстка ниже; затем короткое
   время рамку фиксировали квадратом. Фото по-прежнему вписывается ЦЕЛИКОМ
   (contain, не cover) — обрезки нет никогда, у не-3:4 кадров просто
   спокойные поля по бокам/сверху-снизу. Фон рамки — белый (не --cream
   страницы): совпадает с фоном самой предметки, поле не выглядит вставкой.
   `--r` в JS оставлен как мёртвый код на будущее, если решим вернуться к
   переменной пропорции. */
.gallery-main {
  position: relative; border-radius: var(--radius-md); overflow: hidden;
  aspect-ratio: 3 / 4; background: #fff;
  box-shadow: var(--elevation-1);
}
/* Трек-карусель — нативная горизонтальная прокрутка со scroll-snap
   (2026-09-08, заменяет ручную имитацию свайпа через touch-события,
   которая угоняла скролл всей страницы вбок). Кадр реально «едет» за
   пальцем и сам доезжает до соседнего — то же ощущение, что в
   приложениях маркетплейсов, без единой строчки жестовой математики. */
.gallery-track {
  display: flex; width: 100%; height: 100%;
  overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  /* Не давать свайпу «перетечь» в скролл страницы на первом/последнем
     кадре (та самая жалоба «экран убегает вбок»), даже с overflow-x:
     hidden на html/body — двойная страховка. */
  overscroll-behavior-x: contain;
}
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-slide {
  flex: 0 0 100%; width: 100%; height: 100%; scroll-snap-align: start;
  display: flex; align-items: center; justify-content: center; cursor: zoom-in;
}
.gallery-slide img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.gallery-slide img.is-portrait-fit,
.lightbox__slide img.is-portrait-fit { width: 100%; height: 100%; object-fit: cover; }

/* Лупа в углу главного фото — только десктоп, 2026-09-08. По клику
   открывает полноценный просмотрщик (.lightbox ниже: крупное фото, своя
   лента превью, стрелки). На телефоне бессмысленна (там уже есть
   жест-своп по самому фото), поэтому скрыта по умолчанию. */
.gallery-zoom {
  display: none; position: absolute; right: 12px; bottom: 12px; z-index: 2;
  width: 36px; height: 36px; border-radius: 50%; border: 0;
  align-items: center; justify-content: center; cursor: zoom-in;
  background: rgba(255, 255, 255, .92); color: var(--espresso);
  box-shadow: var(--elevation-1);
}
@media (min-width: 861px) {
  .gallery-zoom { display: flex; }
}
/* Просмотрщик открывается кликом и остаётся открытым (не по наведению).
   Внутри свой scroll-snap трек, тем же приёмом, что .gallery-track в
   самой карточке — на телефоне свайп работает нативно, без единой строчки
   жестовой математики. 2026-09-08, второй заход: стрелки листания
   (.lightbox__arrow ниже) сперва убрали вовсе («люди и так свайпают»), но
   это верно только для тача — на десктопе свайпа нет, а тянуть трек мышью
   неудобно, туда стрелки вернули. */
.lightbox {
  display: none; position: fixed; inset: 0; z-index: 200;
  align-items: center; justify-content: center;
  background: rgba(44, 42, 36, .82); padding: 6vh 6vw;
}
.lightbox.is-open { display: flex; }
.lightbox__body { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); max-width: 90vw; }
.lightbox__stage { position: relative; }
.lightbox__track {
  display: flex; width: min(80vw, 54vh, 480px); height: auto; aspect-ratio: 3 / 4;
  overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; overscroll-behavior-x: contain;
  background: #fff; border-radius: var(--radius-md);
}
.lightbox__track::-webkit-scrollbar { display: none; }
.lightbox__slide {
  flex: 0 0 100%; width: 100%; height: 100%; scroll-snap-align: start;
  display: flex; align-items: center; justify-content: center;
}
.lightbox__slide img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.lightbox__rail { display: flex; gap: var(--space-2xs); overflow-x: auto; max-width: 90vw; padding-bottom: 4px; scrollbar-width: thin; }
.lightbox__thumb {
  width: 42px; height: 56px; flex-shrink: 0; border-radius: var(--radius-sm); overflow: hidden;
  border: 2px solid transparent; cursor: pointer; padding: 0; background: none; opacity: .6;
  transition: opacity var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.lightbox__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lightbox__thumb:hover { opacity: .85; }
.lightbox__thumb.active { opacity: 1; border-color: var(--terra); }
.lightbox__close {
  position: absolute; top: 24px; right: 24px; width: 40px; height: 40px;
  border: 0; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .92); color: var(--espresso);
  box-shadow: var(--elevation-1);
}
/* Стрелки листания — тот же кружок, что у крестика закрытия, СНАРУЖИ
   фото, вплотную к его границе (.lightbox__stage — обёртка ровно вокруг
   трека, см. HTML) — не поверх снимка и не у края экрана: на широком
   мониторе трек уже уже (max-width:640px), у края viewport стрелки
   оказывались далеко от снимка. 2026-09-08, третий заход (позиция —
   сперва прижал внутрь на фото, оказалось нужно снаружи). Только
   десктоп (мышь тянуть трек неудобна, свайпа нет); на телефоне свайп по
   фото и так листает, см. JS: [hidden], если фото вообще одно — там
   листать некуда в любом случае. */
.lightbox__arrow {
  display: none; position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer;
  align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .92); color: var(--espresso);
  box-shadow: var(--elevation-1);
}
.lightbox__arrow--prev { right: 100%; margin-right: 12px; }
.lightbox__arrow--next { left: 100%; margin-left: 12px; }
@media (min-width: 861px) {
  .lightbox__arrow:not([hidden]) { display: flex; }
}
.gallery-rail { display: flex; gap: var(--space-2xs); overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.gallery-rail__item {
  width: 72px; height: 72px; flex-shrink: 0;
  border-radius: var(--radius-sm); overflow: hidden;
  border: 2px solid transparent; cursor: pointer; padding: 0; background: none;
  opacity: .6; transition: opacity var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.gallery-rail__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-rail__item:hover { opacity: .85; }
.gallery-rail__item.active { opacity: 1; border-color: var(--terra); }

/* Точки-пагинация под фото — замена ленты превью на телефоне (эскиз
   заказчика, 2026-09-08). На десктопе не показываются, там своя лента. */
.gallery-dots { display: none; justify-content: center; gap: 6px; }
.gallery-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(44, 42, 36, .22); transition: all var(--duration-fast) var(--ease-standard); }
.gallery-dot.active { width: 16px; border-radius: 3px; background: var(--terra-dk); }

/* ── Статья ── */
.spage--article { background: #FBF7F1; }
.article { max-width: 68ch; }
.article__h {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(22px, 2.4vw, 30px); line-height: 1.2;
  margin: var(--space-xl) 0 var(--space-sm);
}
.article p { font-size: 16px; line-height: 1.8; margin-bottom: var(--space-sm); }

@media (max-width: 860px) {
  .sbanner { padding: var(--space-2xl) 0; }
  .sbanner__in { grid-template-columns: 1fr; gap: var(--space-xl); }
  .sbanner__collage { order: -1; }         /* кадр первым, как в карточке серии */
  .sbanner__facts { gap: var(--space-lg); }
  .spage { padding: var(--space-2xl) 0; }
  .split-layout { flex-direction: column; gap: var(--space-sm); }
  .split-layout__media { width: 100%; }
  /* Стык между двумя карточками моделей подряд — на телефоне было 128px
     (margin+padding по 64px, десктопный «воздух» между большими блоками
     текст+фото). На узком экране это выглядит как разрыв. Сокращено на
     65% (заказчик), десктоп не трогаем. */
  .form-card + .form-card { margin-top: 22px; padding-top: 22px; }
  /* Название модели на телефоне — 19px (сначала уменьшили до 16px «блок
     на 30% меньше», потом заказчик попросил чуть крупнее, +20% от 16px).
     2026-09-08: было white-space:nowrap + многоточие (в одну строку) —
     но при аномально длинном «Название» (необрезанные старые данные,
     см. clean_model_name) блок физически раздувал всю карточку вбок за
     границы экрана вместо обрезки — nowrap требует явно ограниченной
     ширины, а .model-head h3 её не гарантирует. Заказчик попросил вместо
     этого перенос на вторую строку — заодно устойчиво к любой длине
     названия, не только к типичной. */
  .split-layout__text .display--lg {
    font-size: 19px; white-space: normal; overflow-wrap: break-word;
  }
  .decors { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: var(--space-md); }

  /* Порядок блоков карточки модели на телефоне — эскиз заказчика,
     2026-09-08: название → фото (своп) → характеристики → варианты →
     описание/цена свёрнуты. display:contents «растворяет» текстовую
     колонку — её дети становятся такими же управляемыми flex-элементами
     .split-layout, как и .split-layout__media, и получают свой order
     независимо от него (иначе колонку можно двигать только целиком).
     align-items:stretch — без него дети «дисолвленной» колонки сжимаются
     по контенту (у .split-layout по умолчанию flex-start), а без явной
     ширины сетка .spec-grid не может посчитать, сколько колонок влезает.

     Отступ между блоками теперь только один — gap самого .split-layout
     (уменьшен здесь же до --space-sm); у swatches/.acc свои собственные
     margin-top (нужны на десктопе, где .split-layout — не flex-колонка)
     обнулены на телефоне, иначе получалось двойное расстояние (margin
     поверх gap) — заказчик это и увидел как «слишком просторно». */
  .split-layout { align-items: stretch; }
  .split-layout__text { display: contents; }
  .model-head {
    order: 1; flex-direction: column; align-items: stretch; text-align: left;
    gap: 2px; margin-left: 4px;
  }
  /* На мобильном цена/артикул — не абсолютное позиционирование (это
     только десктопная механика, см. base-правило выше), а обычный поток:
     название, затем сразу артикул следующей строкой (цена вообще скрыта
     тут, она уже есть в свёрнутом аккордеоне «Комплектация»/статичной
     строке ниже). */
  .model-head__price { display: none; }
  .split-layout__media { order: 2; }
  .spec-grid { order: 3; margin-top: 0; }
  .acc--variant { order: 4; margin-top: 0; }
  .acc--desc { order: 5; margin-top: 0; }
  .acc--price { order: 6; margin-top: 0; }
  .acc--variant > .acc__summary,
  .acc--price > .acc__summary { display: flex; }
  .acc-static { margin-top: 0; padding: 8px 0; }

  /* Описание/Цена — компактнее и одной высоты (заказчик прислал скриншот
     с разной высотой строк): меньше вертикальный паддинг у обеих, и цена
     внутри триггера аккордеона уменьшена — на весь экран должна влезать
     вся карточка целиком, а не только её часть. */
  .acc__summary { padding: 8px 0; }
  .acc--price .price-now { font-size: 16px; }

  /* Характеристики — один ряд со скроллом, не сетка с переносом (эскиз
     заказчика: там это явно горизонтальная лента, не блок 2×3). 2026-09-08:
     плашки сужены (92px → 68px, отступ поменьше) — типовые 4-5 штук
     должны помещаться на экране целиком, без прокрутки; прокрутка
     остаётся страховкой для серий с большим числом плашек. */
  .spec-grid {
    display: flex; overflow-x: auto; gap: 6px;
    padding-bottom: 4px; scrollbar-width: thin;
  }
  /* Плашки растянуты на всю ширину ряда (= ширина главного фото) —
     flex:1 вместо фиксированной ширины: 3 плашки будут пошире, 5 —
     поуже, но ряд всегда встык с краями карточки. min-width — чтобы не
     схлопнулись в нечитаемое пятно, если плашек когда-нибудь станет
     больше 5-6 — тогда включится overflow-x как и раньше. */
  .spec-tile { flex: 1 1 0; min-width: 50px; padding: 8px 2px; }
  .spec-tile svg { width: 15px; height: 15px; }
  .spec-tile__value { font-size: 10px; }
  .spec-tile__label { font-size: 7px; }

  .gallery-rail { display: none; }
  .gallery-dots { display: flex; }
}

/* Аккордеон неактивен на десктопе — <details open> в разметке и так
   выглядит как обычный открытый текст; без этого клик по summary мог бы
   его случайно свернуть на широком экране, где сворачивания не должно
   быть вообще. */
@media (min-width: 861px) {
  .acc__summary { pointer-events: none; cursor: default; }
  .acc__summary::after { display: none; }
}

/* Переход на страницу серии — из подвала карточки, на месте заглушки */
.series__more {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--terra-dk); transition: color .2s ease;
}
.series__more:hover { color: var(--terra); }
.series__more em { font-style: normal; transition: transform .2s ease; display: inline-block; }
.series__more:hover em { transform: translateX(3px); }

/* ── Стрелка «наверх» — squircle-плитка тем же приёмом, что и .dir-tile
   (градиент 157°, блик ::after), только маленькая и фиксированная. ── */
.to-top {
  position: fixed; right: var(--space-lg); bottom: var(--space-lg); z-index: 40;
  width: 48px; height: 48px; border: 0; border-radius: 28%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(157deg, rgba(214, 160, 115, .95), rgba(192, 132, 90, .95) 58%, rgba(172, 113, 72, .95));
  box-shadow: 0 10px 22px rgba(44, 42, 36, .28), inset 0 1px 0 rgba(255, 255, 255, .18);
  cursor: pointer;
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.to-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.to-top:hover { background: linear-gradient(157deg, rgba(224, 172, 128, .95), rgba(192, 132, 90, .95) 58%, rgba(172, 113, 72, .95)); }
.to-top svg {
  width: 20px; height: 20px; fill: none; stroke: #FFF7EF;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
@media (prefers-reduced-motion: reduce) {
  .to-top { transition: opacity .01s linear; }
}
@media (max-width: 640px) {
  .to-top { right: var(--space-md); bottom: var(--space-md); width: 44px; height: 44px; }
}

/* ── Логотипы партнёров — вписаны в карточку .b2b__card «Уже в
   продаже» (не отдельная секция — заказчик попросил убрать секцию
   внизу и уместить логотипы в пустое место существующей карточки,
   2026-09-24). Маленькие бейджи в 5 колонок, тот же светлый градиент,
   что у .dir-card, только компактнее — тут просто "узнаваемая мелочь",
   не самостоятельный блок. ── */
.b2b__logos {
  margin-top: var(--space-md);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.b2b__logos img {
  display: block;
  width: 100%;
  height: 40px;
  padding: 5px 10px;
  object-fit: contain;
  background: linear-gradient(157deg, #FFFFFF 0%, #FEFCF8 60%, #FAF5EC 100%);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}

@media (max-width: 640px) {
  .b2b__logos { grid-template-columns: repeat(5, 1fr); gap: 6px; }
  .b2b__logos img { height: 26px; padding: 4px 6px; }
}