/* ==========================================================================
   Дизайн-система 2026 — «Nordic Atelier»
   Референсы: USM (швейцарская сетка), Carl Hansen (редакционная антиква),
   Vitra (полноэкранные ракурсы), Article (тёплые нейтрали), Schoolhouse (oklch)
   ========================================================================== */

@import url('/static/fonts/fonts.css');

/* ------------------------------- токены --------------------------------- */
:root {
  /* Палитра: чистый белый + графит + волосяные линии.
     Замер лидеров рынка 2026 (USM, Vitra, Dede, Carl Hansen): фон чисто-белый,
     текст почти чёрный, цвет отсутствует, всё держится на линиях и воздухе.
     До этого был тёплый «пергамент» (98.6% 0.004 85) и терракотовый акцент —
     читалось как шаблон интернет-магазина, а не как магазин 2026 года. */
  --paper: #ffffff;                        /* основной фон */
  --surface: #f6f6f5;                      /* подложки, плашки */
  --surface-2: #efefed;                    /* поля, вложенные блоки */
  --ink: #111111;                          /* основной текст */
  --ink-2: #555551;                        /* вторичный текст (7.5:1) */
  --ink-3: #74746e;                        /* подписи (4.6:1 — WCAG AA) */
  --line: #e4e4e1;                         /* волосяные линии */
  --line-strong: #c6c6c2;

  /* Акцент. В системе ровно один цвет — и живёт он не на кнопках, а на
     мелких метках-пилюлях (номер раздела, метка направления). Так устроен
     award-уровень 2026: цвет работает как точка входа в раздел, а не как
     заливка интерфейса. Тёмный текст на акценте — 5.3:1 (WCAG AA). */
  --accent: #e4572e;
  --accent-ink: #17120f;
  --accent-deep: #c2451f;
  --accent-soft: #fbeee9;
  --accent-light: #f0a288;
  --success: #2f6f4f;
  --danger: #b3261e;

  --night: #0e0e0d;                        /* тёмные секции */
  --night-2: #1a1a18;

  /* типографика
     Заголовки — Instrument Serif: редакционная антиква с узким начертанием,
     она держит крупный кегль и не спорит с фотографией изделия.
     Playfair Display оставлен запасным: если Instrument не загрузится,
     вёрстка не поедет. */
  --font-display: 'Instrument Serif', 'Playfair Display', 'Iowan Old Style', Georgia, serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* fluid-шкала: база 1440px, min 360
     Замеры конкурентов: USM h1 = 96.1 px (1440), String.se h2 = 73 px (w300),
     Dede h1 = 39 px (Montserrat w100), Carl Hansen h1 = 36 px (w700).
     Заголовок первого экрана держим на уровне USM: 96 px в две строки. */
  --fs-display: clamp(2.6rem, .2rem + 6.4vw, 6rem);
  --fs-h1-product: clamp(2.1rem, 1rem + 3.2vw, 3.6rem);
  --fs-h2: clamp(1.75rem, .9rem + 2.6vw, 3.05rem);
  --fs-h3: clamp(1.15rem, 1rem + .5vw, 1.45rem);
  --fs-lead: clamp(1rem, .96rem + .22vw, 1.13rem);
  --fs-body: 1rem;
  --fs-sm: .875rem;
  --fs-xs: .78rem;
  --fs-label: .72rem;

  /* ритм: контейнер 1440 (как у USM), вертикальный воздух большой */
  --container: 1440px;
  --gutter: clamp(20px, 3.4vw, 44px);
  --section-y: clamp(72px, 8.6vw, 148px);
  --radius: 0px;
  --radius-lg: 0px;

  --shadow-sm: 0 1px 2px oklch(24% .014 55 / .05), 0 4px 14px oklch(24% .014 55 / .04);
  --shadow-md: 0 4px 12px oklch(24% .014 55 / .06), 0 18px 44px oklch(24% .014 55 / .07);
  --shadow-lg: 0 10px 30px oklch(24% .014 55 / .09), 0 40px 80px oklch(24% .014 55 / .11);

  --header-h: 72px;
  --ease: cubic-bezier(.22, .68, .3, 1);
}

/* ------------------------------ базис ----------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 20px);
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.62;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'ss01';
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.028em;
  margin: 0 0 .4em;
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: var(--fs-display); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: -.012em; }
p { margin: 0 0 1.05em; }
a { color: inherit; text-decoration: none; transition: color .2s var(--ease), opacity .2s var(--ease); }
img { max-width: 100%; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
button { font: inherit; }

::selection { background: var(--accent); color: var(--accent-ink); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter); }
.container-narrow { max-width: 820px; }
.muted { color: var(--ink-2); }
.note { font-size: var(--fs-sm); line-height: 1.55; color: var(--ink-2); }

/* --------------------------- кадры и подложки ----------------------------- */
/* У донора два типа изображений: вырезки изделия на белом фоне и
   настоящие фотографии (интерьер, выставка).
   Вырезку белым можно растворить на бумаге страницы — тогда изделие
   стоит прямо на фоне, без белой плитки. Фотографию растворять нельзя:
   получится серый прямоугольник и уедет тон снимка.
   Поэтому у подложки белый фон, а для вырезки он убирается. */
/* Фото стоят на белом, без плиток и рамок. Так сделано у Vitra, String,
   Carl Hansen и Another Country: изделие просто стоит на странице, а
   структуру сетки держат линии и воздух, а не заливка ячеек.
   isolation обязателен: без него multiply смешивается с фоном страницы,
   а не с белой подложкой, и у вырезки остаётся видимый прямоугольник. */
.media-plate { background: #fff; isolation: isolate; }
.is-cutout { mix-blend-mode: multiply; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 1.2rem;
}
.eyebrow::before {
  content: "";
  width: 40px;
  height: 1px;
  background: var(--line-strong);
}

/* ------------------------------ кнопки ---------------------------------- */
/* Кнопка в 2026-м магазине: чёрная заливка без радиуса, тонкий кегль,
   много воздуха внутри. Вторая кнопка — не рамка, а текстовая ссылка. */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: var(--line-strong);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  padding: 15px 28px;
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: .92rem;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: .01em;
  cursor: pointer;
  text-align: center;
  overflow: hidden;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .15s var(--ease);
}
.btn:hover { --btn-bd: var(--ink); }
.btn:active { transform: translateY(1px); }

.btn-primary { --btn-bg: var(--ink); --btn-fg: #fff; --btn-bd: var(--ink); }
.btn-primary:hover { --btn-bg: var(--ink-2); --btn-bd: var(--ink-2); --btn-fg: #fff; }

.btn-accent { --btn-bg: var(--accent); --btn-fg: var(--accent-ink); --btn-bd: var(--accent); }
.btn-accent:hover { --btn-bg: var(--accent-deep); --btn-bd: var(--accent-deep); --btn-fg: var(--accent-ink); }

.btn-outline { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line-strong); }
.btn-outline:hover { --btn-bg: var(--ink); --btn-fg: #fff; --btn-bd: var(--ink); }

.btn-ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: transparent; padding-inline: 8px; }
.btn-ghost:hover { --btn-bg: transparent; --btn-fg: var(--ink); }

.btn-sm { padding: 10px 16px; font-size: var(--fs-sm); }
.btn-lg { padding: 17px 34px; font-size: 1rem; }
.btn-block { width: 100%; }

/* ссылка-«стрелка»: обычный регистр, тонкая линия под текстом */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: .95rem;
  font-weight: 450;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line-strong);
  transition: border-color .25s var(--ease), color .25s var(--ease), gap .25s var(--ease);
}
.arrow-link:hover { color: var(--ink); border-color: var(--ink); gap: 15px; }

/* ------------------------------ шапка ----------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgb(255 255 255 / .88);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--line); background: #fff; }

.header-inner {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 44px);
}

/* Логотип — только вордмарк. Чёрный квадрат с иконкой читался как
   шаблон: у лидеров рынка в шапке либо знак, либо название без подложки. */
.logo { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.logo-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.logo-text strong {
  font-family: var(--font-display);
  font-size: 1.24rem;
  font-weight: 400;
  letter-spacing: -.018em;
  color: var(--ink);
  /* Название не должно выталкивать шапку за экран: при нехватке
     места строка обрезается многоточием, а не ломает вёрстку. */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.logo-text small {
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 3px;
}

.main-nav { display: flex; gap: clamp(14px, 2vw, 30px); margin-left: auto; }
/* Кнопка заказа в меню — только на телефоне: в шапке там места нет,
   а без неё посетитель не мог заказать расчёт, не вернувшись на главную. */
.nav-cta { display: none; }
.main-nav a {
  position: relative;
  color: var(--ink-2);
  font-size: .89rem;
  font-weight: 450;
  padding: 6px 0;
  white-space: nowrap;
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .32s var(--ease);
}
.main-nav a:hover { color: var(--ink); }
.main-nav a:hover::after,
.main-nav a.active::after { transform: scaleX(1); transform-origin: left; }
.main-nav a.active { color: var(--ink); }

.header-actions { display: flex; align-items: center; gap: 12px; }
.cart-link { position: relative; display: grid; place-items: center; width: 34px; height: 34px; }
.cart-link:hover { color: var(--ink-3); }
.cart-count {
  position: absolute;
  top: -6px; right: -6px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  display: grid; place-items: center;
  background: var(--ink);
  color: #fff;
  font-size: .75rem;
  font-weight: 600;
  border-radius: 999px;
}
.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
}
.burger span { width: 22px; height: 1.5px; background: var(--ink); border-radius: 2px; transition: .25s var(--ease); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ------------------------------- герой ----------------------------------- */
/* Первый экран — типографика ведёт, фотография поддерживает.
   Замеры лидеров 2026: USM — h1 96 px на контейнере 1440, фотография
   справа и правда меньше заголовка; Vitra — тот же приём.
   От мозаики из четырёх плиток отказались (читалась как маркетплейс),
   бегущую строку направлений внизу — тоже (дешёвый приём 2018 года). */
.hero {
  position: relative;
  padding: clamp(40px, 4.6vw, 78px) 0 0;
  border-bottom: 1px solid var(--line);
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  gap: clamp(40px, 6vw, 104px);
  align-items: end;
  padding-bottom: clamp(44px, 5.4vw, 88px);
}
.hero-text { max-width: 44rem; }

.hero h1 {
  font-size: var(--fs-display);
  line-height: .99;
  letter-spacing: -.035em;
  margin: 14px 0 .3em;
  text-wrap: balance;
}
.hero-sub {
  font-size: var(--fs-lead);
  line-height: 1.58;
  color: var(--ink-2);
  max-width: 42ch;
  margin-bottom: 2.2rem;
}
.hero-actions {
  display: flex;
  gap: clamp(22px, 2.4vw, 34px);
  align-items: center;
  flex-wrap: wrap;
}

/* Тонкая строка фактов под первым экраном: без крупных цифр-счётчиков. */
.hero-facts {
  display: flex;
  gap: 0 clamp(20px, 2.4vw, 36px);
  flex-wrap: wrap;
  padding: 17px 0;
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--ink-2);
}
.hero-facts li { display: flex; align-items: baseline; gap: 7px; }
.hero-facts li + li { padding-left: clamp(20px, 2.4vw, 36px); border-left: 1px solid var(--line); }
.hero-facts strong { font-weight: 500; color: var(--ink); }
.hero-facts span { color: var(--ink-2); }

/* --------------------------- сцена первого экрана ------------------------ */
/* Кадр изделия показывается в натуральную величину: у донора снимки
   365–600 px, и растянутый до пол-экрана кадр сразу выдаёт себя
   размытостью. Кадр не больше натурального — увеличение запрещено. */
.hero-stage {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: min(100%, 400px);
  margin-left: auto;
}
.hero-plate {
  position: relative;
  display: block;
  /* Вырезка стоит прямо на белой странице — без серой плитки и рамки.
     Фон кадра растворяется в белый режимом multiply. */
  background: transparent;
  isolation: auto;
  overflow: hidden;
}
.hero-plate img {
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: contain;
  transition: transform .9s var(--ease);
}
.hero-plate:hover img { transform: scale(1.03); }

/* Подпись под кадром: название антиквой, цена справа, тонкая линия сверху. */
.hero-caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding-top: 13px;
  border-top: 1px solid var(--ink);
}
.hero-caption-name {
  font-family: var(--font-display);
  font-size: 1.24rem;
  line-height: 1.28;
  letter-spacing: -.016em;
  min-width: 0;
}
.hero-caption-name:hover { color: var(--ink-3); }
.hero-caption-price { font-size: var(--fs-sm); color: var(--ink-2); white-space: nowrap; }

/* Список позиций под кадром — редакционный: волосяные линии, название
   антиквой, цена справа. Никаких рамок и плашек. */
.hero-index { border-top: 1px solid var(--line); }
.hero-index li { border-bottom: 1px solid var(--line); }
.hero-index a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 0;
}
.hero-index-name {
  font-family: var(--font-display);
  font-size: 1.02rem;
  line-height: 1.3;
  letter-spacing: -.012em;
  min-width: 0;
}
.hero-index-price { font-size: var(--fs-sm); color: var(--ink-2); white-space: nowrap; }
.hero-index a:hover .hero-index-name { color: var(--ink-3); }
.hero-index-arrow { color: var(--ink-3); transition: transform .35s var(--ease); }
.hero-index-all:hover .hero-index-arrow { transform: translateX(5px); color: var(--ink); }

/* --------------------- строка направлений вместо бегущей ---------------- */
/* Раньше внизу шла бесконечная лента названий. В 2026-м магазине такой
   приём не используют: направления перечисляют один раз, списком. */
.dir-bar { border-bottom: 1px solid var(--line); }
.dir-bar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.dir-bar a {
  padding: 16px 26px 16px 0;
  margin-right: 26px;
  border-right: 1px solid var(--line);
  font-size: var(--fs-label);
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--ink-3);
  transition: color .25s var(--ease);
}
.dir-bar a:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.dir-bar a:hover { color: var(--ink); }

/* ------------------------------ секции ---------------------------------- */
.section { padding-block: var(--section-y); }
/* Страница статьи: отступ снизу шапки страницы и сверху секции складывались
   в пустой провал в 150px. Здесь верхний отступ уменьшен вдвое. */
.section-article { padding-top: clamp(40px, 5vw, 88px); }
.section-surface { background: var(--surface); }
/* Разделитель секций — волосяная линия, а не смена фона: разные фоны
   секций ломают ровный ритм полосы. */
.section-lined { border-top: 1px solid var(--line); }
.section-night { background: var(--night); color: oklch(86% 0 0); }
.section-night h1, .section-night h2, .section-night h3 { color: #fff; }
.section-night p { color: oklch(72% 0 0); }
.section-night .usp-num { color: #8b8b86; }

.section-head { max-width: 760px; margin-bottom: clamp(34px, 4vw, 60px); }
.split-head {
  max-width: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.section-title { margin-bottom: .3rem; }
.section-sub { color: var(--ink-2); font-size: var(--fs-lead); max-width: 62ch; margin: 0; }
.section-night .section-sub { color: oklch(78% .012 72); }

.page-head { padding-block: clamp(40px, 5vw, 84px) clamp(40px, 5vw, 76px); border-bottom: 1px solid var(--line); }
.page-head h1 { font-size: clamp(2.3rem, 1.4rem + 2.9vw, 4rem); margin-bottom: .32em; letter-spacing: -.028em; }
.page-head-sub { color: var(--ink-2); max-width: 68ch; font-size: var(--fs-lead); margin: 0; }

.breadcrumbs {
  display: flex;
  gap: 9px;
  font-size: var(--fs-xs);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 1.4rem;
  flex-wrap: wrap;
}
.breadcrumbs a { color: var(--ink-3); }
.breadcrumbs a:hover { color: var(--ink); }

/* --------------------- список категорий (редакционный) ------------------ */
.cat-list { border-top: 1px solid var(--line); }
.cat-item {
  display: grid;
  grid-template-columns: 62px 1fr auto 40px;
  gap: clamp(14px, 3vw, 40px);
  align-items: center;
  padding: clamp(18px, 2.2vw, 30px) 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left .35s var(--ease), background .35s var(--ease);
}
.cat-item:hover { padding-left: 14px; background: var(--surface); }
.cat-index { font-size: var(--fs-xs); letter-spacing: .1em; color: var(--ink-3); }
.cat-name {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.05rem + .9vw, 2rem);
  letter-spacing: -.018em;
  line-height: 1.15;
}
.cat-count { font-size: var(--fs-sm); color: var(--ink-3); white-space: nowrap; }
.cat-arrow {
  display: block;
  font-size: 1rem;
  color: var(--ink-3);
  text-align: right;
  transition: color .3s var(--ease), transform .3s var(--ease);
}
.cat-item:hover .cat-arrow { color: var(--ink); transform: translateX(5px); }


/* --------------------- разделы каталога: фотокарточки -------------------- */
.cat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 258px), 1fr));
  gap: clamp(14px, 1.8vw, 26px) clamp(12px, 1.6vw, 24px);
}
.cat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper);
}
.cat-card-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.cat-card-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: clamp(10px, 1.2vw, 20px);
  transition: transform .8s cubic-bezier(.2, .7, .3, 1);
}
.cat-card:hover .cat-card-media img { transform: scale(1.05); }
.cat-card-placeholder {
  position: absolute;
  inset: 0;
  background: var(--surface);
}
.cat-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 44px 22px 0;
}
.cat-card-title {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + .7vw, 1.65rem);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -.018em;
  color: var(--ink);
}
.cat-card-meta {
  font-size: var(--fs-sm);
  color: var(--ink-3);
}
.cat-card-arrow {
  position: absolute;
  right: 0;
  bottom: clamp(22px, 2.2vw, 30px);
  font-size: 1rem;
  color: var(--ink-3);
  transition: color .3s var(--ease), transform .3s var(--ease);
}
.cat-card:hover .cat-card-arrow {
  color: var(--ink);
  transform: translateX(5px);
}

/* ------------------------------ товары ---------------------------------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 288px), 1fr));
  /* Замер конкурентов (1440): 4 колонки, gap 20–24 px. Раньше вертикальный
     разнос доходил до 35 px — сетка расползалась и карточки переставали
     читаться строкой. */
  gap: clamp(16px, 1.7vw, 26px) clamp(12px, 1.6vw, 24px);
}
/* Карточка товара — как у лидеров рынка: фото без рамки и тени,
   текстовая часть на общем фоне, никакого «коробочного» декора. */
.product-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
}
/* Фото донора приходят разных пропорций: 600x600, 600x450, 600x800, портретные.
   Обрезать нельзя — срезается мебель, поэтому вписываем кадр целиком
   в подложку, как в студийной съёмке. Белой плитки под кадром нет:
   режим multiply растворяет белый фон рендера, и изделие стоит на общем
   фоне страницы — без рамки и рамки-подложки. */
.product-card-media {
  position: relative;
  display: block;
  /* 16/10, а не 1:1: у лидеров рынка карточка широкая (1.6:1…2.33:1),
     квадрат читается как витрина маркетплейса. */
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.product-card-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: clamp(8px, 1vw, 16px);
  transition: transform .7s var(--ease);
}
.product-card:hover .product-card-media img { transform: scale(1.045); }
.product-card-media-placeholder {
  display: grid;
  place-items: center;
  width: 100%; height: 100%;
  font-family: var(--font-display);
  font-size: 2.6rem;
  color: var(--line-strong);
}
.badge {
  position: absolute;
  top: 12px; left: 12px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.badge-muted { background: oklch(24% .014 55); color: #fff; }
.badge-accent { background: var(--accent); color: var(--accent-ink); left: auto; right: 12px; }

.product-card-body { padding: 16px 0 0; display: flex; flex-direction: column; flex: 1; }
.product-card-kicker {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: 12px;
  /* Две строки под категорию и отметку: у карточки «Под заказ» отметка
     уходит на вторую строку, и без резерва цены в ряду разъезжаются. */
  min-height: 2.4em;
}
.product-card-cat {
  font-size: var(--fs-label);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.product-card-title {
  font-size: 1.02rem;
  font-weight: 400;
  line-height: 1.32;
  margin: .3rem 0 .3rem;
  letter-spacing: -.006em;
  /* Название занимает две строки при любой длине: иначе в ряду цены
     разъезжаются по высоте, и ряд перестаёт быть ровным. */
  min-height: calc(2 * 1.32em);
}
.product-card-title a { color: var(--ink); }
.product-card-title a:hover { color: var(--ink-3); }
.product-card-sum { font-size: var(--fs-sm); color: var(--ink-3); margin: 0 0 .9rem; flex: 1; }
/* Отметка о сроке изготовления — строкой в тексте, а не плашкой на фото:
   у лидеров рынка в карточке товара нет ни рамок, ни бейджей. */
.product-card-note {
  font-size: var(--fs-label);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}
.product-card-old { font-size: var(--fs-xs); color: var(--ink-3); text-decoration: line-through; }
.product-card-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-top: 10px;
  /* Цена прижата к низу карточки — ряд читается по одной линии. */
  margin-top: auto;
}
.product-card-price { display: flex; align-items: baseline; gap: 5px; }
/* Цена — всегда одной строкой. В узкой карточке «11 500 ₽» распадалась
   на три строки: «11», «500», «₽». */
.product-card-price strong { font-size: 1.02rem; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; }
.product-card-price small { font-size: var(--fs-xs); color: var(--ink-3); }

/* Быстрый просмотр: у лидеров рынка в карточке товара кнопок нет —
   видна только фотография, название и цена. Ссылка проявляется по
   наведению на карточку, место в вёрстке зарезервировано, чтобы
   сетка не прыгала. На сенсорных экранах показывается всегда. */
.product-card-quick {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-size: var(--fs-xs);
  letter-spacing: .02em;
  color: var(--ink-3);
  border-bottom: 1px solid var(--line-strong);
  opacity: 0;
  transition: color .18s ease, border-color .18s ease, opacity .22s var(--ease);
}
.product-card:hover .product-card-quick,
.product-card:focus-within .product-card-quick { opacity: 1; }
.product-card-quick:hover,
.product-card-quick:focus-visible { color: var(--ink); border-bottom-color: var(--ink); }
@media (hover: none) {
  .product-card-quick { opacity: 1; }
}


/* --------------------- чипы разделов (приём USM) -------------------------- */
.cat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.cat-chips a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 20px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: .92rem;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
  transition: border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.cat-chips a:hover { border-color: var(--ink); }
.cat-chips a.active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.cat-chip-count {
  font-size: .78rem;
  color: var(--ink-3);
  letter-spacing: .02em;
}
.cat-chips a.active .cat-chip-count { color: oklch(98.6% .004 85 / .6); }
.category-nav-title {
  display: block;
  font-size: var(--fs-label);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: .8rem;
}
.section-tight { padding-top: clamp(36px, 4vw, 60px); padding-bottom: 0; }
/* Витрина каталога: между чипами и сеткой не должно быть пустого поля. */
.section-catalog { padding-top: clamp(28px, 3vw, 52px); }

/* ------------------------------ каталог ---------------------------------- */
.catalog-layout { display: grid; grid-template-columns: 268px 1fr; gap: clamp(28px, 4vw, 64px); align-items: start; }
.catalog-sidebar { position: sticky; top: calc(var(--header-h) + 24px); }
.filter-form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  margin-bottom: 24px;
}
.filter-check { display: flex; align-items: center; gap: 10px; font-size: .92rem; margin-bottom: 14px; cursor: pointer; }
.filter-check input { width: 16px; height: 16px; accent-color: var(--accent); }
.filter-reset { display: block; margin-top: 12px; font-size: var(--fs-sm); text-align: center; }

.category-nav { display: flex; flex-direction: column; }
.category-nav > a, .cat-group > a {
  display: block;
  padding: 10px 0 10px 16px;
  color: var(--ink-2);
  font-size: .93rem;
  border-left: 1px solid var(--line);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.category-nav > a:hover, .cat-group > a:hover { color: var(--ink); border-left-color: var(--ink-3); }
.category-nav > a.active, .cat-group > a.active { color: var(--ink); border-left-color: var(--ink); font-weight: 500; }
.cat-group > a { font-weight: 500; color: var(--ink); }
.cat-sub { margin: 0 0 6px; }
.cat-sub a {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0 7px 28px;
  font-size: .87rem;
  color: var(--ink-3);
  border-left: 1px solid var(--line);
}
.cat-sub a:hover { color: var(--ink); }
.cat-sub a.active { color: var(--ink); }
.cat-count { font-size: .78rem; color: var(--ink-3); }

.catalog-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px 28px;
  margin-bottom: clamp(26px, 3vw, 40px);
  flex-wrap: wrap;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.catalog-filter { display: flex; align-items: center; gap: 14px; }
.catalog-filter .filter-check { margin-bottom: 0; }
.catalog-filter .filter-reset { margin-top: 0; margin-left: 0; }
.cat-chips-sub { margin-top: 12px; }
.cat-chips-sub a { font-size: .85rem; padding: 8px 16px; color: var(--ink-2); }
.cat-chips-sub a.active { background: var(--surface-2); border-color: var(--ink); color: var(--ink); }
.catalog-search { display: flex; gap: 8px; flex: 1; max-width: 420px; }
.catalog-search input {
  flex: 1;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: .93rem;
  font-family: inherit;
  background: var(--paper);
  color: var(--ink);
  transition: border-color .2s var(--ease);
}
.catalog-search input:focus { outline: none; border-color: var(--ink); }
.catalog-count { font-size: var(--fs-sm); color: var(--ink-3); }

.pagination { display: flex; gap: 6px; justify-content: center; margin-top: clamp(38px, 5vw, 64px); flex-wrap: wrap; }
.page {
  min-width: 42px; height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink-2);
  font-size: .9rem;
  transition: all .2s var(--ease);
}
.page:hover { border-color: var(--ink); color: var(--ink); }
.page.current { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.empty-state { text-align: center; padding: clamp(50px, 8vw, 90px) 20px; }
.error-code { font-family: var(--font-display); font-size: clamp(3.5rem, 2rem + 5vw, 6rem); color: var(--line-strong); display: block; line-height: 1; }

/* -------------------------- карточка товара ------------------------------ */
/* Сверху нужен воздух, но не провал: общий отступ секции (168px на 1440)
   съедал первый экран целиком. */
.product-page { padding-top: clamp(28px, 3.4vw, 56px); }
.product-detail { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(36px, 5vw, 88px); align-items: start; }
/* Главный кадр показываем в его собственной пропорции: у донора есть и
   квадрат, и портрет 3:4, и ландшафт. Высота ограничена, чтобы страница
   не превращалась в ленту, но пропорция не искажается.
   Серой плиты под кадром нет: она уменьшала изделие и читалась как рамка
   вокруг фотографии. Режим multiply убирает белый фон рендера — изделие
   стоит прямо на бумаге. */
.product-gallery-main {
  display: grid;
  place-items: center;
  overflow: hidden;
  min-height: 300px;
}
/* Главный кадр показывается в натуральную величину: снимки донора —
   600 px по ширине, а колонка шире. Растянутый кадр выглядит
   раздутым и мыльным — ровно то, за что ругался клиент. */
.product-gallery-main img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 74vh;
  object-fit: contain;
}
.product-gallery-empty { display: grid; place-items: center; font-family: var(--font-display); font-size: 4rem; color: var(--line-strong); }
.product-gallery-thumbs { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
/* Миниатюра: без рамки, активный кадр помечен линией снизу. */
.thumb {
  width: 76px; height: 76px;
  padding: 0;
  border: 0;
  border-bottom: 2px solid transparent;
  overflow: hidden;
  background: #fff;
  cursor: pointer;
  transition: border-color .2s var(--ease);
}
.thumb img { width: 100%; height: 100%; object-fit: contain; background: var(--surface); }
.thumb:hover { border-bottom-color: var(--line-strong); }
.thumb.active { border-bottom-color: var(--accent); }

.product-cat {
  font-size: var(--fs-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.product-info h1 { font-size: var(--fs-h1-product); margin: .5rem 0 .38rem; letter-spacing: -.026em; }
.product-summary { color: var(--ink-2); font-size: var(--fs-lead); }

/* Блок цены: без рамки, заливки и радиуса. Отделяет тонкая линия сверху —
   цена читается частью страницы, а не виджетом в рамочке. */
.product-price-box {
  margin: 34px 0 30px;
  padding-top: 26px;
  border-top: 1px solid var(--ink);
  background: transparent;
}
.price-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.price-current { font-family: var(--font-display); font-size: clamp(2rem, 1.5rem + 1.6vw, 2.9rem); font-weight: 400; letter-spacing: -.02em; }
.price-unit { color: var(--ink-3); font-size: .9rem; }
.price-old { color: var(--ink-3); text-decoration: line-through; font-size: 1rem; }
.stock-line { font-size: .88rem; margin: .5rem 0 1.2rem; display: flex; align-items: center; gap: 8px; }
.stock-line.in-stock { color: var(--success); }
.stock-line.on-order { color: var(--ink-2); }

.qty-row { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.qty-label { font-size: .9rem; color: var(--ink-2); }
.qty-input {
  width: 94px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: .95rem;
  font-family: inherit;
  background: var(--paper);
  color: var(--ink);
  transition: border-color .2s var(--ease);
}
.qty-input:focus { outline: none; border-color: var(--ink); }
.qty-sm { width: 68px; padding: 6px 8px; }
.product-order-form { margin-bottom: 10px; }

/* Липкая панель покупки. На десктопе не нужна: там цена и кнопка и так
   рядом. На телефоне — единственный способ не листать до кнопки. */
.buy-bar { display: none; }
.buy-bar-info { min-width: 0; }
.buy-bar-price { display: block; font-size: 1.05rem; font-weight: 500; letter-spacing: -.01em; }

.product-specs, .product-description { margin-top: 34px; }
.product-specs h2, .product-description h2 { font-size: 1.25rem; margin-bottom: .8rem; }
.specs-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.specs-table th, .specs-table td { text-align: left; padding: 12px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.specs-table th { color: var(--ink-3); font-weight: 400; width: 42%; }
.prose { color: var(--ink-2); }
.related { margin-top: clamp(56px, 7vw, 100px); }

/* ------------------------------ корзина ---------------------------------- */
.cart-layout { display: grid; grid-template-columns: 1fr 340px; gap: clamp(24px, 3vw, 48px); align-items: start; }
.cart-table { width: 100%; border-collapse: collapse; margin-bottom: 22px; }
.cart-table th {
  text-align: left;
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink-3);
  font-weight: 500;
  padding: 0 14px 12px;
  border-bottom: 1px solid var(--ink);
}
.cart-table td { padding: 18px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; font-size: .95rem; }
.cart-item-title { display: flex; flex-direction: column; gap: 3px; }
.cart-item-title a { font-family: var(--font-display); font-size: 1.06rem; color: var(--ink); }
.cart-item-title a:hover { color: var(--ink-3); }
.cart-item-title small { font-size: var(--fs-sm); color: var(--ink-3); }
.cart-sum { font-family: var(--font-display); font-size: 1.08rem; }
.inline-form { display: flex; gap: 6px; align-items: center; }

.cart-summary {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px;
  position: sticky;
  top: calc(var(--header-h) + 24px);
}
.cart-summary h2 { font-size: 1.35rem; margin-bottom: 1.1rem; }
.summary-row { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0; font-size: .95rem; }
.summary-total { border-top: 1px solid var(--line-strong); margin-top: 12px; padding-top: 16px; }
.summary-total strong { font-family: var(--font-display); font-size: 1.6rem; font-weight: 500; letter-spacing: -.015em; }
.cart-summary .btn { margin-top: 14px; }

/* ----------------------------- оформление -------------------------------- */
.checkout-layout { display: grid; grid-template-columns: 1fr 340px; gap: clamp(24px, 3vw, 48px); align-items: start; }
.form-block { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px 28px; margin-bottom: 18px; }
.form-block legend {
  font-family: var(--font-display);
  font-size: 1.2rem;
  padding: 0 10px;
  color: var(--ink);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; }
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.field > span { font-size: var(--fs-sm); color: var(--ink-2); }
.field em { color: var(--danger); font-style: normal; }
.field input, .field textarea {
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: .96rem;
  font-family: inherit;
  background: var(--paper);
  color: var(--ink);
  width: 100%;
  transition: border-color .2s var(--ease);
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--ink); }
.field textarea { resize: vertical; }
/* Файл к заявке: планировка, смета, спецификация. */
/* Поле файла. Нативный input прячем, но оставляем доступным: подпись
   открывает выбор файла, а имя выбранного показывает скрипт. Нативные
   подписи браузера («Choose File», «No file chosen») на русской странице
   выглядели чужеродно.

   Селектор с двумя классами — не из вкуса: правило `.field input` выше
   по специфичности и возвращало бы полю `width: 100%`, из-за чего
   спрятанный input растягивался на весь экран и давал горизонтальную
   прокрутку на странице. */
.field .file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.field .file-input:focus-visible + .file-drop {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.file-drop {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink-2);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.file-drop:hover { border-color: var(--ink); }
.file-drop-btn {
  padding: 7px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font-size: var(--fs-sm);
  white-space: nowrap;
}
.file-drop-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.field small { font-size: var(--fs-xs); color: var(--ink-3); }

.radio-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.radio-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  background: var(--paper);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.radio-card:hover { border-color: var(--line-strong); }
.radio-card:has(input:checked) { border-color: var(--ink); background: var(--surface); }
.radio-card input { margin-top: 3px; accent-color: var(--accent); }
.radio-card span { display: flex; flex-direction: column; gap: 3px; }
.radio-card strong { font-size: .95rem; font-weight: 500; }
.radio-card small { font-size: var(--fs-sm); color: var(--ink-3); }

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

/* ------------------------------ контакты --------------------------------- */
.contacts-layout { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.contact-block { margin-bottom: 34px; }
.contact-block h2 { font-size: 1.25rem; margin-bottom: .7rem; }
.contact-block p { margin: 0 0 .4rem; color: var(--ink-2); }
.plain-list li { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: .94rem; }
.plain-list span { color: var(--ink-3); }

.contact-form-wrap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 36px);
  position: sticky;
  top: calc(var(--header-h) + 24px);
}
.lead-form { display: flex; flex-direction: column; }

.alert { padding: 14px 18px; border-radius: var(--radius); font-size: .93rem; margin-bottom: 20px; }
.alert-success { background: oklch(93% .04 150); color: oklch(42% .1 150); border: 1px solid oklch(84% .06 150); }
.alert-error { background: oklch(93% .045 30); color: oklch(45% .14 30); border: 1px solid oklch(85% .06 30); }

/* ------------------------- блок о производстве --------------------------- */
/* Два кадра без рамок и теней: раньше вторая фотография лежала поверх
   первой с белым «бортом» 6 px и тенью — приём фотоколлажа 2016 года. */
.about-grid {
  display: grid;
  grid-template-columns: 1.04fr .96fr;
  gap: clamp(36px, 6vw, 96px);
  align-items: center;
}
/* Два снимка рядом, а не коллаж со наложением: наложение читалось как
   случайная вёрстка. Кадр вписывается целиком (contain) — снимки
   донора не режутся. */
.about-media {
  display: grid;
  grid-template-columns: 1.32fr 1fr;
  gap: clamp(12px, 1.4vw, 22px);
  align-items: end;
}
.about-figure { background: var(--paper); }
.about-figure img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.about-figure-1 { aspect-ratio: 4/3; }
.about-figure-2 { aspect-ratio: 4/3; }
.about-text p { color: var(--ink-2); font-size: var(--fs-lead); }
.feature-list { margin: 30px 0 34px; display: flex; flex-direction: column; }
.feature-list li {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 20px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  align-items: baseline;
}
.feature-list li:last-child { border-bottom: 1px solid var(--line); }
.feature-list strong { font-weight: 500; font-size: .95rem; }
.feature-list span { font-size: .93rem; color: var(--ink-2); }

/* -------------------------------- USP ------------------------------------ */
/* Четыре преимущества — колонки, разделённые волосяными линиями, без
   фона-карточки: у лидеров рынка тёмные полосы держат на воздухе. */
.usp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0 clamp(26px, 4vw, 56px);
}
.usp {
  padding-top: 22px;
  border-top: 1px solid oklch(32% .014 55);
}
.usp-num {
  font-family: var(--font-sans);
  font-size: .72rem;
  letter-spacing: .18em;
  color: #8b8b86;
  display: block;
  margin-bottom: 1.1rem;
}
.usp h3 { font-size: 1.24rem; margin-bottom: .45rem; }
.usp p { font-size: .93rem; margin: 0; color: oklch(72% .008 75); }

/* -------------------------------- CTA ------------------------------------ */
/* Полоса во всю ширину экрана, без коробки-контейнера: у лидеров рынка
   тёмный блок идёт от края до края, а не карточкой внутри колонки. */
.cta-section { padding-block: clamp(56px, 7vw, 110px); }
.cta-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(28px, 4vw, 64px);
  flex-wrap: wrap;
}
.cta-band .section-title { color: #fff; margin-bottom: .5rem; }
.cta-band .section-sub { color: oklch(74% 0 0); max-width: 52ch; }
.btn-invert { --btn-bg: #fff; --btn-fg: #111; --btn-bd: #fff; }
.btn-invert:hover { --btn-bg: #e4e4e1; --btn-bd: #e4e4e1; --btn-fg: #111; }

/* --------------------- текст страницы (в т.ч. из донора) --------------- */
.prose-page { max-width: 860px; }
/* Галерея фотографий — по ширине контейнера, а не в колонке статьи. */
.prose-page:has(.gallery-grid) { max-width: none; }
.prose-page:has(.gallery-grid) > p { max-width: 860px; }
.prose-page > *:first-child { margin-top: 0; }
.prose-page h1 { font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.8rem); margin: 0 0 .5em; }
.prose-page h2 {
  font-size: clamp(1.35rem, 1.15rem + .7vw, 1.85rem);
  margin: 1.9em 0 .6em;
  padding-top: .8em;
  border-top: 1px solid var(--line);
}
.prose-page h3 { font-size: 1.2rem; margin: 1.5em 0 .5em; }
.prose-page p { font-size: 1.04rem; line-height: 1.72; color: var(--ink-2); margin: 0 0 1.15em; }
.prose-page a { color: var(--ink); border-bottom: 1px solid var(--line-strong); }
.prose-page a:hover { border-bottom-color: var(--ink); }
.prose-page ul, .prose-page ol { margin: 0 0 1.3em; padding-left: 1.3em; list-style: disc; }
.prose-page ol { list-style: decimal; }
.prose-page li { font-size: 1.02rem; line-height: 1.68; color: var(--ink-2); margin-bottom: .45em; }
.prose-page img { border-radius: var(--radius); margin: 1.2em 0; width: 100%; }
.prose-page table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: .95rem; }
.prose-page th, .prose-page td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.prose-page th { color: var(--ink-3); font-weight: 500; }
.prose-page blockquote {
  margin: 1.6em 0;
  padding: .3em 0 .3em 24px;
  border-left: 2px solid var(--line-strong);
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.45;
  color: var(--ink);
}
.prose-page iframe { max-width: 100%; border-radius: var(--radius); }
.prose-page .row { margin-bottom: 1.4em; }
.prose-page [class*="col-"] { margin-bottom: 1em; }

/* ------------------------ витрина раздела «проекты» ---------------------- */
/* Направление, его изделия и ссылка в каталог. Кадры на общем фоне:
   белый фон рендера растворяется, рамок и подложек нет. */
.showcase { margin-top: 0; }
/* Текст раздела идёт после витрины: между ними нужен воздух. */
.prose-page--after { margin-top: clamp(48px, 6vw, 96px); }
.showcase-head { margin-bottom: clamp(28px, 3.4vw, 52px); max-width: 760px; }
.showcase-head .section-title { margin-bottom: .5rem; }
.showcase-row {
  padding-top: clamp(28px, 3vw, 44px);
  margin-top: clamp(28px, 3vw, 44px);
  border-top: 1px solid var(--line);
}
.showcase-row:first-of-type { padding-top: 0; margin-top: 0; border-top: 0; }
.showcase-row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.showcase-title {
  font-size: clamp(1.4rem, 1.15rem + 1vw, 2rem);
  margin: 0;
  letter-spacing: -.02em;
}
.showcase-items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 34px);
}
.showcase-item { display: flex; flex-direction: column; gap: 11px; }
.showcase-item-media {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.showcase-item-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .7s var(--ease);
}
.showcase-item:hover .showcase-item-media img { transform: scale(1.04); }
.showcase-item-title { font-size: .95rem; line-height: 1.35; color: var(--ink-2); }
.showcase-item:hover .showcase-item-title { color: var(--ink-3); }

/* --------------------------- листинг раздела ---------------------------- */
/* Редакционные строки с волосяными линиями. Сетка с рамкой и перемычками
   читалась как таблица каталога, а не как список материалов. */
.section-listing { border-top: 1px solid var(--line); margin-top: clamp(48px, 6vw, 96px); }
.section-listing a {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(18px, 2.2vw, 28px) 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left .35s var(--ease);
}
.section-listing a:hover { padding-left: 14px; }
.section-listing .listing-title { font-family: var(--font-display); font-size: clamp(1.25rem, 1.05rem + .8vw, 1.75rem); line-height: 1.2; letter-spacing: -.018em; }
.section-listing .listing-meta { font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.section-listing .listing-excerpt { font-size: .92rem; color: var(--ink-2); margin: 0; max-width: 62ch; }
.success-panel { text-align: center; padding: 20px 0; }
.success-icon {
  display: inline-grid;
  place-items: center;
  width: 68px; height: 68px;
  border-radius: 999px;
  background: oklch(93% .04 150);
  color: var(--success);
  font-size: 1.9rem;
  margin-bottom: 1.4rem;
}
.order-summary {
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px;
  margin: 30px 0;
}
.order-summary h2 { font-size: 1.2rem; margin-bottom: .9rem; }
.mini-items li { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: .93rem; }
.mini-price { font-weight: 500; white-space: nowrap; }
.success-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* -------------------------------- подвал ---------------------------------- */
.site-footer { background: var(--night); color: oklch(84% .01 75); padding: clamp(48px, 6vw, 88px) 0 clamp(40px, 5vw, 72px); }
.footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.2fr; gap: clamp(24px, 3vw, 48px); }
.footer-title {
  display: block;
  color: var(--paper);
  font-family: var(--font-display);
  font-size: 1.05rem;
  margin-bottom: 1rem;
}
.footer-links li { margin-bottom: .6rem; font-size: .9rem; }
.footer-links a { color: oklch(80% .01 75); }
.footer-links a:hover { color: var(--paper); }
.site-footer .muted { color: oklch(66% .012 72); }
.site-footer p { font-size: .9rem; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border-top: 1px solid oklch(32% .014 55);
  margin-top: clamp(36px, 4vw, 60px);
  padding-top: 22px;
  font-size: var(--fs-xs);
  letter-spacing: .02em;
}
.footer-wordmark {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 1rem + 7vw, 7rem);
  line-height: 1.02;
  letter-spacing: -.03em;
  color: oklch(26% .014 55);
  margin: clamp(32px, 5vw, 64px) 0 0;
  user-select: none;
}

/* ---------------------- появление при скролле ----------------------------- */
/* появление при скролле — только когда JS доступен, иначе контент виден сразу */
.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* каскад появления карточек — по позиции в сетке */
.product-grid .reveal:nth-child(1) { --reveal-delay: 0ms; }
.product-grid .reveal:nth-child(2) { --reveal-delay: 60ms; }
.product-grid .reveal:nth-child(3) { --reveal-delay: 120ms; }
.product-grid .reveal:nth-child(4) { --reveal-delay: 180ms; }
.product-grid .reveal:nth-child(n+5) { --reveal-delay: 220ms; }

/* ------------------------- быстрый просмотр ---------------------------- */
/* Модальное окно поверх каталога: карточка товара целиком, без перехода. */
.quick-view-dialog {
  position: relative;
  width: min(980px, calc(100vw - 2 * var(--gutter)));
  max-width: none;
  max-height: calc(100vh - 2 * var(--gutter));
  border: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
}
.quick-view-dialog::backdrop { background: oklch(19% 0.012 55 / .55); }
.quick-view-body { padding: clamp(20px, 3vw, 44px); overflow: auto; }
.quick-view {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
}
.quick-view-media img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--surface-2);
}
.quick-view-placeholder {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  background: var(--surface-2);
  font-size: clamp(3rem, 6vw, 5rem);
  color: var(--ink-3);
}
.quick-view-title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 400;
  margin: .2rem 0 .5rem;
}
.quick-view-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 1.4rem; }
.quick-view-close {
  position: absolute;
  top: 6px;
  right: 10px;
  z-index: 1;
  background: none;
  border: 0;
  padding: 4px 8px;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--ink-2);
  cursor: pointer;
}
.quick-view-close:hover { color: var(--ink); }

/* -------------------------------- адаптив --------------------------------- */
/* Промежуточная ширина: навигация и кнопка в шапке перестают помещаться
   и подписи навигации переносились на две строки. Сжимаем шаг и кегль,
   кнопку в шапке убираем — она есть в меню и в первом экране. */
@media (max-width: 1340px) {
  .main-nav { gap: 14px; }
  .main-nav a { font-size: .84rem; }
  .header-inner { gap: 18px; }
  .header-actions .btn { padding-inline: 14px; font-size: .84rem; }
}
@media (max-width: 1180px) {  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-text { max-width: none; }
  .hero h1 { max-width: 18ch; }
  /* В одну колонку сцена не прижата к правому краю. Кадр остаётся
     в натуральной величине: растягивать снимок донора нельзя. */
  .hero-stage { width: min(100%, 400px); margin-left: 0; }
  .about-grid { grid-template-columns: 1fr; gap: 48px; }
  .about-media { max-width: 620px; }
  .catalog-layout { grid-template-columns: 1fr; }
  .catalog-sidebar { position: static; }
  .category-nav { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .category-nav > a, .cat-group > a { border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; margin: 0; }
  .cat-sub { display: none; }
  .product-detail { grid-template-columns: 1fr; gap: 32px; }
  .quick-view { grid-template-columns: 1fr; gap: 24px; }
  .cart-layout, .checkout-layout, .contacts-layout { grid-template-columns: 1fr; }
  .cart-summary, .contact-form-wrap { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 820px) {
  :root { --header-h: 62px; }
  .main-nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    background: var(--paper);
    flex-direction: column;
    gap: 0;
    padding: 6px var(--gutter) 22px;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    display: none;
  }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .burger { display: flex; }
  .header-actions .btn { display: none; }
  .logo-text small { display: none; }
  /* Название фабрики в шапке ужимается: вместе с корзиной и бургером
     строка шапки не должна выходить за вьюпорт — иначе страница
     получала горизонтальную прокрутку на 2 px. */
  .logo-text strong { font-size: 1rem; }
  .hero-facts { gap: 8px 22px; }
  .hero-facts li + li { padding-left: 22px; }
  .dir-bar a { padding: 13px 18px 13px 0; margin-right: 18px; }
  .feature-list li { grid-template-columns: 1fr; gap: 4px; }
  .about-figure-2 { width: 72%; }
  .form-grid, .radio-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 26px; }
  .cat-item { grid-template-columns: 40px 1fr 36px; }
  .cat-count { display: none; }
  /* Направления каталога — горизонтальной лентой: в столбик одиннадцать
     чипов занимали весь первый экран, и товаров не было видно. */
  .cat-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-bottom: 2px;
  }
  .cat-chips::-webkit-scrollbar { display: none; }
  .cat-chips a { scroll-snap-align: start; }
  .cart-table thead { display: none; }
  .cart-table tr { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; padding: 16px 0; border-bottom: 1px solid var(--line); }
  .cart-table td { border: 0; padding: 3px 0; }
  .cart-table td:first-child { grid-column: 1 / -1; }
  .cart-table td:nth-child(2) { display: none; }
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 156px), 1fr)); gap: 12px; }
  .product-card-body { padding: 14px 15px 16px; }
  .product-card-title { font-size: .95rem; }
  .product-card-price strong { font-size: 1.05rem; }
  /* Низ карточки на 390 px: карточка шириной 171 px, и цена с кнопкой
     быстрого просмотра в одну строку не помещались — «11 500 ₽»
     разваливалась на три строки. Цена — своей строкой, кнопка — под ней. */
  .product-card-foot { flex-direction: column; align-items: flex-start; gap: 4px; }
  .product-card-price { flex-wrap: nowrap; }
  .product-card-quick { white-space: nowrap; }

  /* Направления каталога — в две колонки. Одиннадцать карточек в одну
     колонку занимали 4500 px, и до товаров было семь экранов. */
  .cat-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 148px), 1fr)); gap: 12px; }
  .cat-card-title { font-size: .9rem; }
  .cat-card-meta { font-size: var(--fs-xs); }
  .section { padding-block: clamp(48px, 12vw, 84px); }

  /* Витрина раздела: на телефоне изделия идут в две колонки, в одну
     кадр был бы слишком мелким, чтобы что-то разглядеть. */
  .showcase-items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .showcase-item-title { font-size: .85rem; }

  /* Заказ из мобильного меню: без кнопки посетитель не мог оставить
     заявку, не вернувшись на главную. */
  .main-nav .nav-cta {
    display: block;
    margin-top: 18px;
    padding: 14px 18px;
    border: 1px solid var(--ink);
    border-bottom-width: 1px;
    text-align: center;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--ink);
  }
  .main-nav .nav-cta::after { display: none; }

  /* Липкая панель покупки: цена и «В корзину» — под рукой. */
  .buy-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    padding: 10px var(--gutter);
    background: var(--paper);
    border-top: 1px solid var(--line);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .07);
  }
  .buy-bar[hidden] { display: none; }
  .buy-bar .btn { flex: 0 0 auto; padding: 12px 20px; }
  /* Место под панель, чтобы подвал не уезжал под неё. */
  .product-page { padding-bottom: calc(var(--section-y) + 60px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .site-header, .site-footer, .cart-summary, .btn { display: none !important; }
}

/* --------------------- галерея страницы ---------------------------------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: clamp(10px, 1.4vw, 18px);
  margin: 0 0 clamp(36px, 5vw, 64px);
}
.gallery-item { margin: 0; }
.gallery-item a {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--surface-2);
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2, .7, .3, 1);
}
.gallery-item:hover img { transform: scale(1.04); }

/* ==================================================================
   СИСТЕМА v2 — по award-референсам (Awwwards SOTD / CSSDA WOTD / FWA).
   Сигнатура магазина: пилюльная навигация, нумерованные разделы,
   один акцентный цвет на метках и движение появления.
   ================================================================== */

/* --- шапка: навигация пилюлями ----------------------------------- */
.main-nav { display: flex; gap: 7px; margin-left: auto; align-items: center; }
.main-nav a {
  padding: 8px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-2);
  font-size: .84rem;
  font-weight: 450;
  letter-spacing: 0;
  white-space: nowrap;
  transition: color .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease);
}
.main-nav a::after { display: none; }
.main-nav a:hover { color: var(--ink); border-color: var(--ink-3); }
.main-nav a.active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

/* --- заголовок раздела с номером ---------------------------------- */
.sec-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 22rem);
  gap: clamp(14px, 1.8vw, 30px);
  align-items: start;
  margin-bottom: clamp(30px, 3.6vw, 56px);
}
.sec-head-body { min-width: 0; }
.sec-head .section-title { margin-bottom: .25rem; }
.sec-head .eyebrow { margin-bottom: .7rem; }
.sec-head .section-sub { align-self: end; }
/* Номер раздела — пилюля акцентным цветом: единственное цветное
   пятно на странице, и оно ведёт по структуре. */
.sec-num {
  display: inline-grid;
  place-items: center;
  min-width: 38px;
  height: 28px;
  padding: 0 11px;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  line-height: 1;
}

/* --- горизонтальный скроллер товаров ------------------------------ */
/* Ряд, который листается вбок: на 1440 px показывает 4,5 позиции и
   намекает на продолжение. На мобильном — те же карточки в ряд. */
.scroller {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-inline: var(--gutter);
  /* Без scroll-padding первая карточка примагничивается к краю окна и ряд
     уезжает на 44 px влево: колонка перестаёт совпадать с сеткой разделов. */
  scroll-padding-left: var(--gutter);
  cursor: grab;
}
.scroller::-webkit-scrollbar { display: none; }
.scroller.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.scroller-track {
  display: flex;
  align-items: stretch;
  gap: clamp(14px, 1.6vw, 24px);
  width: max-content;
  padding-right: var(--gutter);
}
.scroller-card {
  flex: 0 0 auto;
  width: clamp(232px, 21vw, 310px);
  scroll-snap-align: start;
}

/* --- подсказка прокрутки в первом экране --------------------------- */
.scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: clamp(30px, 3.4vw, 52px);
  font-size: var(--fs-label);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.scroll-cue span[aria-hidden] { color: var(--accent); font-size: 1rem; }
.scroll-cue:hover { color: var(--ink); }

/* --- появление: кадр «оседает», текст поднимается ------------------ */
.js .reveal img { transform: scale(1.05); transition: transform 1.1s var(--ease); }
.js .reveal.is-visible img { transform: none; }
.js .reveal { transition: opacity .8s var(--ease), transform .8s var(--ease); }

/* --- метка направления пилюлей ------------------------------------ */
.tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: 999px;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1;
}

/* --- адаптив ------------------------------------------------------- */
@media (max-width: 1180px) {
  .sec-head { grid-template-columns: auto minmax(0, 1fr); }
  .sec-head .section-sub { grid-column: 2; }
}
@media (max-width: 820px) {
  /* Меню по-прежнему скрыто до нажатия на бургер: правило .main-nav из
     блока выше пришло позже и вернуло display:flex на всех ширинах. */
  .main-nav { display: none; }
  .main-nav.open { display: flex; }
  .main-nav a {
    padding: 13px 16px;
    border: 1px solid var(--line);
    border-radius: 999px;
    margin-bottom: 10px;
  }
  .main-nav a.active { background: var(--ink); border-color: var(--ink); color: #fff; }
  .scroller-card { width: 66vw; }
}

/* --- нижняя полоса первого экрана: факты + подсказка прокрутки ------ */
.hero-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(18px, 3vw, 48px);
  flex-wrap: wrap;
}
.hero-bottom .hero-facts { flex: 1 1 auto; }
.hero-bottom .scroll-cue { margin-top: 0; }
@media (max-width: 820px) {
  .hero-bottom { padding-bottom: 26px; }
}

/* ================= карточка товара: липкая галерея и статусы ========= */
@media (min-width: 1181px) {
  /* Кадр остаётся на экране, пока читаешь описание и характеристики:
     приём дорогих каталогов, где изделие не уезжает из поля зрения. */
  .product-gallery { position: sticky; top: calc(var(--header-h) + 20px); }
}
.product-gallery-main { background: transparent; isolation: isolate; }
.product-gallery-main img { width: auto; max-width: 100%; }

/* Статус наличия — пилюля, как метки разделов. */
.stock-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px;
  border-radius: 999px;
  font-size: var(--fs-label);
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1;
  margin: .9rem 0 1.4rem;
}
.stock-line.in-stock { background: #eaf3ee; color: #2f6f4f; }
.stock-line.on-order { background: #f2f2f0; color: #555551; }
.stock-line::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; }

/* Нумерация блоков внутри карточки товара. */
.product-specs h2, .product-description h2 { margin-top: 1.1rem; }
.product-specs .sec-num, .product-description .sec-num { margin-bottom: .8rem; }
.product-specs h2, .product-description h2 { font-size: 1.5rem; }
.related { margin-top: clamp(56px, 7vw, 110px); }
.related .sec-head { margin-bottom: clamp(22px, 2.6vw, 40px); }

/* ====================== каталог: шапка раздела ========================= */
.catalog-toolbar { align-items: center; }
.catalog-search input {
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
  padding: 10px 2px;
  background: transparent;
}
.catalog-search input:focus { border-bottom-color: var(--ink); }
.catalog-search .btn { border-radius: 999px; }
.catalog-count { font-size: var(--fs-sm); color: var(--ink-3); letter-spacing: .04em; }

/* Быстрый просмотр: кадр в натуральную величину, как на странице товара. */
.quick-view-media img { width: auto; max-width: 100%; height: auto; background: transparent; }
.quick-view-media { isolation: isolate; }

/* ==================================================================
   ПЕРВЫЙ ЭКРАН: ОБЛАКО ИЗДЕЛИЙ
   Приём Floema (Awwwards Site of the Day, 13.05.2026): изделия
   разбросаны по полю мелкими кадрами, а не собраны в сетку карточек.
   Пока съёмки нет, это единственный способ показать богатство каталога:
   кадры показываются меньше натуральной величины, поэтому размытость
   исходника не читается, а лишних рамок и подложек нет.
   ================================================================== */

.hero-cloud {
  min-height: clamp(540px, 76vh, 740px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: clamp(26px, 2.6vw, 46px);
  overflow: hidden;
}

/* Облако — слой под заголовком. Ссылка кликабельна, но не перехватывает
   прокрутку: pointer-events выключены у контейнера. */
.cloud {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* Нижняя граница — полоса фактов: под неё облако не заходит. */
  height: calc(100% - 112px);
  pointer-events: none;
  z-index: 0;
}
.cloud-item {
  position: absolute;
  display: block;
  pointer-events: auto;
  line-height: 0;
  opacity: .92;
  transition: opacity .45s var(--ease), transform .55s var(--ease);
}
.cloud-item img {
  display: block;
  width: 100%;
  height: auto;
  /* Растворение на бумаге страницы: белый фон кадра сливается со страницей.
     isolation обязателен — иначе смешивание пойдёт с фоном страницы. */
  mix-blend-mode: multiply;
  isolation: isolate;
}
.cloud-item:hover { opacity: 1; transform: translateY(-4px); }

/* Раскладка облака. Координаты — константы композиции: центр экрана
   (30–70 % по ширине) оставлен под заголовок и лид, изделия держат
   периметр и нижнюю кромку. Кадры мелкие: иначе проявляется размытость
   исходника донора. */
.cloud-item:nth-child(1)  { left: 2%;    top: 8%;  width: 108px; }
.cloud-item:nth-child(2)  { left: 9%;    top: 62%; width: 84px;  opacity: .58; }
.cloud-item:nth-child(3)  { left: 17%;   top: 1%;  width: 118px; }
.cloud-item:nth-child(4)  { left: 22%;   top: 34%; width: 78px;  opacity: .48; }
.cloud-item:nth-child(5)  { left: 12%;   top: 84%; width: 92px;  opacity: .7; }
.cloud-item:nth-child(6)  { left: 28%;   top: 86%; width: 100px; opacity: .8; }
.cloud-item:nth-child(7)  { left: 74%;   top: 2%;  width: 116px; }
.cloud-item:nth-child(8)  { left: 83%;   top: 30%; width: 88px;  opacity: .55; }
.cloud-item:nth-child(9)  { left: 90%;   top: 8%;  width: 98px; }
.cloud-item:nth-child(10) { left: 93%;   top: 58%; width: 78px;  opacity: .48; }
.cloud-item:nth-child(11) { left: 78%;   top: 84%; width: 86px;  opacity: .62; }
.cloud-item:nth-child(12) { left: 60%;   top: 90%; width: 76px;  opacity: .44; }

/* Заголовок по центру: тип ведёт, изделия работают фактурой. */
.hero-center {
  position: relative;
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(18px, 3vh, 46px) 0 clamp(26px, 3.4vh, 54px);
}
.hero-center .eyebrow { letter-spacing: .16em; }
.hero-center h1 {
  max-width: 17ch;
  margin-inline: auto;
}
.hero-center .hero-sub {
  max-width: 52ch;
  margin-bottom: 2rem;
}
.hero-center .hero-actions { justify-content: center; }

@media (max-width: 1180px) {
  .cloud-item:nth-child(3),
  .cloud-item:nth-child(7) { width: 118px; }
  .cloud-item:nth-child(9) { width: 100px; }
}

@media (max-width: 820px) {
  /* На телефоне облако превращается в ровный ряд из четырёх изделий:
     разброс по полю съел бы половину экрана, а заголовок остался бы
     без воздуха. */
  .hero-cloud { min-height: 0; padding-top: 12px; }
  .cloud {
    position: static;
    height: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 0 var(--gutter) 26px;
    pointer-events: auto;
  }
  /* Селектор с :nth-child перебивает .cloud-item по специфичности,
     поэтому ширину сбрасываем для всех позиций сразу. */
  .cloud .cloud-item:nth-child(n) {
    position: static;
    width: auto;
    opacity: .9;
  }
  .cloud-item:nth-child(n + 5) { display: none; }
  .cloud-item img { mix-blend-mode: normal; }
}

/* ==================================================================
   НАПРАВЛЕНИЯ: разворот + три блока, без сетки одинаковых карточек
   ================================================================== */
.dir-lead {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.7vw, 30px);
  margin-top: clamp(26px, 3vw, 48px);
}
.dir-lead-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  transition: border-color .35s var(--ease);
}
.dir-lead-item.is-wide { grid-column: span 2; grid-row: span 2; }
.dir-lead-item:hover { border-bottom-color: var(--ink); }
.dir-lead-media {
  display: block;
  /* Кадр показывается в натуральную величину: если он шире колонки —
     уменьшается, но никогда не растягивается. */
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dir-lead-media img {
  width: auto;
  max-width: 100%;
  max-height: 460px;
  height: auto;
  display: block;
}
.dir-lead-item.is-wide .dir-lead-media { min-height: 320px; }
.dir-lead-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 34px;
}
.dir-lead-title {
  font-size: clamp(1.32rem, 1.05rem + .7vw, 1.85rem);
  line-height: 1.12;
  letter-spacing: -.015em;
  color: var(--ink);
}
.dir-lead-item.is-wide .dir-lead-title { font-size: clamp(1.7rem, 1.2rem + 1.3vw, 2.5rem); }
.dir-lead-count {
  font-size: var(--fs-sm);
  color: var(--ink-2);
}
.dir-lead-arrow {
  position: absolute;
  right: 0;
  bottom: 16px;
  color: var(--ink-3);
  transition: transform .35s var(--ease), color .35s var(--ease);
}
.dir-lead-item:hover .dir-lead-arrow { transform: translateX(5px); color: var(--ink); }

/* Остальные направления — строкой, волосяные линии. */
.dir-rest {
  list-style: none;
  margin: clamp(26px, 3vw, 46px) 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
  columns: 3;
  column-gap: clamp(20px, 2.4vw, 44px);
}
.dir-rest li { break-inside: avoid; border-bottom: 1px solid var(--line); }
.dir-rest a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 11px 0;
  color: var(--ink-2);
  font-size: var(--fs-sm);
  transition: color .22s var(--ease);
}
.dir-rest a:hover { color: var(--ink); }
.dir-rest-count { color: var(--ink-3); font-variant-numeric: tabular-nums; }

@media (max-width: 1180px) {
  .dir-lead { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dir-lead-item.is-wide { grid-column: span 2; grid-row: auto; }
  .dir-rest { columns: 2; }
}
@media (max-width: 820px) {
  .dir-lead { grid-template-columns: minmax(0, 1fr); }
  .dir-lead-item.is-wide { grid-column: auto; }
  .dir-lead-media { min-height: 140px; }
  .dir-rest { columns: 1; }
}

/* Направления — крупная типографика с номерами. Фото разделов не
   показываются: снимки донора «в интерьере» в крупном блоке выдают пол,
   плинтус и надпись. Предмет работает в облаке первого экрана. */
.dir-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(24px, 3.4vw, 68px);
  margin-top: clamp(26px, 3vw, 48px);
}
.dir-item {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: baseline;
  gap: clamp(14px, 1.6vw, 26px);
  padding: clamp(20px, 2.2vw, 34px) 0;
  border-top: 1px solid var(--line);
  transition: border-color .35s var(--ease);
}
.dir-item:hover { border-top-color: var(--ink); }
.dir-num {
  font-size: var(--fs-sm);
  color: var(--accent);
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
}
.dir-name {
  font-size: clamp(1.5rem, 1.1rem + 1.25vw, 2.45rem);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--ink);
}
.dir-count {
  font-size: var(--fs-sm);
  color: var(--ink-2);
  white-space: nowrap;
}
.dir-arrow {
  color: var(--ink-3);
  transition: transform .35s var(--ease), color .35s var(--ease);
}
.dir-item:hover .dir-arrow { transform: translateX(5px); color: var(--ink); }

@media (max-width: 1180px) {
  .dir-list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px) {
  .dir-item { grid-template-columns: auto minmax(0, 1fr) auto; }
  .dir-count { grid-column: 2; }
}