/* ============================================================
   artantique.ru — site.css (custom rules on top of design-tokens.css)

   STRICT RULE (Phase-1 plan Task 5.2): только var(--*) токены.
   - NO hex literals (#xxxxxx)
   - NO rgb()/rgba() literals where can use vars
   - NO font-family literals (semantic names like sans/serif/mono — only via tokens)
   - ВСЁ через --paper, --ink, --accent, --f-sans, --f-mono, --f-serif, ...

   Layout / chrome only. Контентные стили — в block-specific селекторах,
   общие токены — в design-tokens.css.
   ============================================================ */

/* ----- A11y helper ----- */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* ============================================================
   PAGE FRAME
   ============================================================ */
.site-header {
  position: relative;
  z-index: 10;
}

main { display: block; }

/* ============================================================
   ANNOUNCEMENT STRIP (CNT-08)
   ============================================================ */
.announcement {
  background: var(--paper-deep);
  color: var(--paper);
  padding: 8px var(--pad-x);
  display: flex; align-items: center; justify-content: center;
  gap: 14px;
  font-family: var(--f-sans);
  font-size: 11.5px;
  letter-spacing: 0.02em;
}
/* display:flex выше перебивает браузерное [hidden]{display:none}, поэтому
   el.hidden=true (кнопка «Закрыть») не скрывал плашку — возвращаем скрытие. */
.announcement[hidden] { display: none; }
.announcement__eyebrow {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--ink-3);
  text-transform: uppercase;
}
.announcement__text  { opacity: 0.85; }
.announcement__link  {
  color: var(--paper);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid var(--rule-soft);
}
.announcement__close {
  margin-left: 14px;
  background: transparent; border: 0;
  color: var(--paper); opacity: 0.5;
  cursor: pointer;
  font-family: var(--f-sans);
  font-size: 14px;
}
.announcement__close:hover { opacity: 1; }

/* ============================================================
   UTILITY BAR (top row: phone + hours + city + login/heart/cart)
   ============================================================ */
.header-utility {
  border-bottom: 1px solid var(--rule-soft);
  /* Боковые отступы сжимаются на узких десктопах (1200–1280) вплоть до 10px, чтобы строка не переносилась. */
  padding: 8px clamp(10px, 3vw, var(--pad-x));
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  font-family: var(--f-sans);
  font-size: 11.5px;
  color: var(--ink-2);
  /* Закреплена сверху на десктоп/планшет (на мобиле скрыта — см. медиа ≤767). */
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--paper);
  box-shadow: 0 2px 6px rgba(21, 18, 15, 0.06);
}
/* Узкий десктоп (≤1300) и планшет — прячем часы, чтобы строка не переносилась. */
@media (max-width: 1300px) {
  .header-utility__hours { display: none; }
}
.header-utility__group { display: flex; gap: clamp(8px, 1.3vw, 20px); align-items: center; }
/* Правый кластер (разделы/мессенджеры/корзина) — промежуток ужимается при сужении экрана. */
.header-utility__group--right { gap: clamp(7px, 1.1vw, 18px); }
.header-utility__phone {
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
}
.header-utility__hours,
.header-utility__city { color: var(--ink-3); }
/* Адрес — ссылка на «Контакты»: тот же цвет/шрифт, без подчёркивания. */
a.header-utility__city { text-decoration: none; }
.header-utility__divider {
  width: 1px; height: 10px;
  background: var(--rule);
  display: inline-block;
}
.header-utility__link {
  color: var(--ink-2);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
}
.header-utility__link--cart { color: var(--ink); font-weight: 600; }
.header-utility__link--section { color: var(--ink); font-weight: 600; }
.header-utility__link--user { color: var(--ink); font-weight: 600; }
.count-badge {
  display: inline-block;
  text-decoration: none;
  font-family: var(--f-mono);
  font-size: 9.5px;
  font-weight: 600;
  color: var(--ink-2);
}
/* Счётчик корзины в шапке — кружок со светлой заливкой (светлее фона шапки). */
.count-badge--accent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 1px;
  border-radius: 999px;
  background: #FFFFFF;
  color: var(--accent);
  line-height: 1;
}
/* Закрашиваем ТОЛЬКО иконку корзины/сердечка (текст «Корзина» и счётчик не трогаем). */
.header-utility__link.is-filled svg,
.mobile-header__btn.is-filled svg { fill: var(--accent); stroke: var(--accent); }
/* Иконки сердечка и корзины в шапке крупнее на 30% — через transform,
   чтобы НЕ увеличивать высоту строки. Сердечко чуть приподнято к средней линии счётчика. */
.header-utility__link--fav svg { transform: scale(1.3) translateY(-1.5px); }
.header-utility__link--cart svg { transform: scale(1.3); }
/* Иконки мобильной шапки тоже крупнее на 30% (высота шапки не меняется — transform). */
.mobile-header__btn svg,
.burger svg { transform: scale(1.3); }
/* Моб. шапка: счётчики не прилеплены к увеличенным иконкам — больше отступ. */
.mobile-header__btn .count-badge { margin-left: 6px; }
/* Сердечко в моб. шапке чуть приподнято (как в десктопе). */
.mobile-header__btn--fav svg { transform: scale(1.3) translateY(-1.5px); }
/* Моб. шапка: счётчик корзины без кружка — плоская цифра. */
.mobile-header__btn .count-badge--accent {
  min-width: 0;
  height: auto;
  padding: 0;
  border-radius: 0;
  background: none;
}

/* ============================================================
   BRAND BAR (logo + search + CTA)
   ============================================================ */
.header-brand {
  position: relative;
  overflow: hidden;
  background: var(--paper-2) url('/assets/img/bg-header-1920x160.jpg') center / auto 100% no-repeat;
  border-bottom: 1px solid var(--rule-soft);
}
.header-brand__inner {
  position: relative; z-index: 1;
  padding: 0 var(--pad-x);
  display: grid;
  grid-template-columns: 260px 1fr 180px;
  align-items: center;
  gap: 40px;
}
.header-brand__inner {
  height: 120px;
}
.header-brand__logo-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.header-brand__logo-link picture {
  display: block;
  line-height: 0;
}
.header-brand__logo {
  display: block;
  height: 120px;           /* явная высота — браузер сам подберёт width по aspect-ratio */
  width: auto;
  max-width: 100%;
}
.header-brand__search {
  border-bottom: 1px solid var(--ink);
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  padding: 12px 16px;
}
.header-brand__search-icon {
  display: inline-flex; align-items: center;
  color: var(--ink-3);
}
.header-brand__search-input {
  flex: 1 1 auto; min-width: 0;
  border: 0; background: transparent; outline: none;
  font-family: var(--f-sans); font-size: 14px; color: var(--ink);
  padding: 0;
}
.header-brand__search-input::placeholder { color: var(--ink-3); }
.header-brand__search-submit {
  flex: 0 0 auto;
  border: 0; background: transparent; cursor: pointer;
  font-family: var(--f-mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-2); white-space: nowrap; text-decoration: none;
}
.header-brand__search-submit:hover { color: var(--ink); }
/* убрать нативный clear-крест (был синий, вне дизайн-системы) на случай type=search */
.header-brand__search-input::-webkit-search-cancel-button { display: none; }
.header-brand__cta {
  justify-self: end;
  background: var(--paper);
}

/* ============================================================
   MEGA NAV v2 (CAT-01 — плашка 13 разделов + hover-mega-panel)
   Источник: .planning/design/menu-final.html (2026-05-19)
   ============================================================ */
:root {
  --mn-col-w:   220px;  /* ширина одной колонки в mega-menu */
  --mn-col-gap: 32px;
}
/* Mega-menu доступен только ≥1200 (где видна .catbar); tablet/mobile override
   не нужен. */

.catbar {
  background: var(--paper);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  position: relative;
  user-select: none;
}
.catrow {
  display: flex;
  align-items: stretch;
  justify-content: center;         /* gap фиксирован сверху, лишнее → margin auto-поля */
  /* gap: потолок 14px достигается на ~1280+ viewport; ниже шкалирует линейно
     пропорционально доступному месту (1100 → ~2px). При узких экранах ниже
     1100 catbar скрывается (см. media-query). */
  gap: clamp(2px, calc((100vw - 1080px) / 14), 14px);
  padding: 0 8px;
  margin: 0 auto;
}
.cat-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;                  /* ширина строго по контенту, без ужатия */
  height: 40px;
  padding: 0 6px;
  color: var(--ink-2);
  font: 500 clamp(10.5px, 0.85vw, 12.5px)/1 var(--f-sans);
  letter-spacing: 0.04em;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: color .15s;
}
/* Ниже 1200px катбар скрывается полностью — открывается mobile-drawer
   (см. секцию RESPONSIVE внизу файла). Промежуточный «горизонтальный скролл
   плашки» больше не нужен. */
.cat-item:hover,
.cat-item.is-open,
.cat-item.is-active { color: var(--ink); }
.cat-item.is-active { font-weight: 600; }
.cat-item::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .18s cubic-bezier(.4,0,.2,1);
}
.cat-item:hover::after { transform: scaleX(1); }
.cat-item.is-open::after,
.cat-item.is-active::after { background: var(--accent); transform: scaleX(1); }

/* ----- Mega-panel ----- */
.megamenu {
  display: none;
  position: absolute;
  top: 100%;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: none;
  z-index: 200;
  box-shadow: 0 8px 24px rgba(21,18,15,.09);
  padding: 22px 24px 22px;
  overflow: hidden;
  width: fit-content;
  max-width: calc(5 * var(--mn-col-w) + 4 * var(--mn-col-gap) + 48px);
}
.megamenu.is-open { display: block; }
.megamenu::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--accent);
}
.mega-cols {
  display: flex;
  gap: var(--mn-col-gap);
  align-items: flex-start;
}
.mega-col {
  width: var(--mn-col-w);
  flex-shrink: 0;
}

/* Группы (l2) */
.m-group { margin-bottom: 0; }
.m-group + .m-group { margin-top: 6px; }

/* L2: заголовок группы */
.m-head {
  display: flex;
  align-items: baseline;
  gap: 5px;
  font: 500 11px/1.3 var(--f-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 4px 0;
  text-decoration: none;
  cursor: pointer;
  overflow-wrap: normal; hyphens: none;
  transition: color .12s;
}
.m-head.has-children {
  padding-bottom: 7px;
  margin-bottom: 5px;
  border-bottom: 1px solid var(--rule-soft);
}
.m-head:hover { color: var(--ink-2); }
.m-head .arr {
  font-size: 13px;
  font-weight: 700;
  color: var(--rule);
  flex-shrink: 0;
  letter-spacing: 0;
  line-height: 1;
  transition: color .12s;
}
.m-head:hover .arr { color: var(--ink-3); }

/* L3 */
.m-sub {
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding: 4px 0 4px 12px;
  font: 400 12.5px/1.3 var(--f-sans);
  color: var(--ink-2);
  text-decoration: none;
  letter-spacing: 0.01em;
  cursor: pointer;
  overflow-wrap: normal; hyphens: none;
  transition: color .12s;
}
.m-sub:hover { color: var(--ink); }
.m-sub .arr {
  font: 700 13px/1 var(--f-sans);
  color: var(--ink-3);
  flex-shrink: 0;
  letter-spacing: 0;
  transition: color .12s;
}
.m-sub:hover .arr { color: var(--accent); }

/* L4 и глубже — не показываем в мега-меню (по решению 2026-05-19).
   Эти уровни доступны на странице соответствующего l3-раздела. */

/* ============================================================
   MOBILE HEADER + DRAWER (MOB-01, pure CSS, no JS)
   RESEARCH §Pattern M
   ============================================================ */
#mobile-menu-toggle {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%);
}

.mobile-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 2px 12px;
  min-height: 52px;
  border-bottom: 1px solid var(--rule-soft);
  /* Фон-текстура как у десктопной .header-brand; align по левому краю, fit по высоте (owner 2026-05-24). */
  background: var(--paper-2) url('/assets/img/bg-header-1920x160.jpg') left center / auto 100% no-repeat;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  box-shadow: 0 2px 6px rgba(21, 18, 15, 0.06);
}
.mobile-header__logo {
  height: 41px; width: auto;  /* −10% от 46px, высоту шапки не меняем (C2) */
  display: block;
}
.mobile-header__group { display: flex; gap: 4px; align-items: center; }
.mobile-header__btn {
  background: none; border: none;
  padding: 6px;
  cursor: pointer;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.burger {
  background: none; border: none;
  padding: 6px;
  cursor: pointer;
  color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
}

.mobile-overlay {
  position: fixed;
  inset: 0;
  background: var(--paper-deep);
  opacity: 0;
  pointer-events: none;
  z-index: 99;
  transition: opacity 0.2s ease;
}
.mobile-drawer {
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: 320px; max-width: 88vw;
  background: var(--paper);
  z-index: 100;
  display: flex; flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.25s ease;
  /* Тень НЕ задаём в закрытом состоянии: drawer стоит за левым краем
     (translateX(-100%)), и blur тени просачивался тёмной полосой на левый край
     всех мобильных страниц. Тень только когда drawer открыт (:checked). */
}
#mobile-menu-toggle:checked ~ .mobile-drawer {
  transform: translateX(0);
  box-shadow: 0 8px 32px rgba(21, 18, 15, 0.22);
}
#mobile-menu-toggle:checked ~ .mobile-overlay {
  opacity: 0.5;
  pointer-events: auto;
}
#mobile-menu-toggle:checked ~ .mobile-drawer__close {
  opacity: 1; pointer-events: auto; transform: translateX(0);
}
/* Крестик закрытия — фиксирован ВНЕ drawer'а (в области оверлея, справа от шторки). */
.mobile-drawer__close {
  position: fixed; top: 12px; left: 332px; z-index: 101;
  width: 40px; height: 40px;
  background: var(--paper); border: 1px solid var(--rule);
  cursor: pointer; padding: 0; color: var(--ink); line-height: 0;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transform: translateX(-12px);
  transition: opacity 0.2s ease, transform 0.25s ease;
}
.mobile-drawer__close:hover { background: var(--paper-2); }
/* На очень узких экранах (max-width 88vw drawer'а) — прижать к правой стороне drawer'а. */
@media (max-width: 380px) {
  .mobile-drawer__close { left: auto; right: 8px; }
}
.mobile-drawer__nav {
  flex: 1;
  padding: 6px 0 4px; /* без пустой шапки — пункты сразу с верха drawer'а */
  display: flex; flex-direction: column;
  overflow-y: auto;
}
/* Строка пункта: split tap target — текст-ссылка слева, шеврон-раскрытие справа. */
.mobile-drawer__row {
  display: flex; align-items: stretch;
}
.mobile-drawer__row.is-active .mobile-drawer__link {
  font-weight: 600;
  border-left: 3px solid var(--accent);
  padding-left: 13px;
}
.mobile-drawer__link {
  flex: 1; min-width: 0;
  padding: 6px 16px;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0;
}
.mobile-drawer__link--info { font-weight: 600; }
.mobile-drawer__link:hover { color: var(--accent); }

/* <details> как pure-HTML аккордеон: name="m-cat-expand" в браузерах с поддержкой
   (Chrome 120+, Safari 17.5+, Firefox 134+) обеспечивает «один открыт за раз». */
.mobile-drawer__exp { display: block; }
.mobile-drawer__exp > summary { list-style: none; cursor: pointer; }
.mobile-drawer__exp > summary::-webkit-details-marker { display: none; }
.mobile-drawer__exp > summary::marker { content: ''; }

/* Шеврон раскрытия (≥44px tap-target по горизонтали). */
.mobile-drawer__chevron {
  flex: 0 0 44px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-3);
  transition: transform 0.15s ease, color 0.15s ease;
}
.mobile-drawer__exp[open] > summary .mobile-drawer__chevron {
  transform: rotate(90deg); color: var(--ink);
}

/* Подсписок (+1 уровень) — нативно скрыт details, виден когда [open]. */
.mobile-drawer__sub {
  list-style: none; margin: 0; padding: 2px 0 6px;
  background: var(--paper-2);
}
.mobile-drawer__sublink {
  display: block; padding: 5px 16px 5px 32px;
  text-decoration: none; color: var(--ink-2);
  font-family: var(--f-sans); font-size: 13px; font-weight: 400; line-height: 1.3;
}
.mobile-drawer__sublink:hover { color: var(--accent); background: var(--paper-3); }

.mobile-drawer__divider {
  height: 1px; background: var(--rule); margin: 4px 16px;
}
.mobile-drawer__foot {
  padding: 8px 16px 12px;
  border-top: 1px solid var(--rule);
  font-family: var(--f-sans);
  font-size: 11.5px;
  color: var(--ink-2);
  display: flex; flex-direction: column;
  gap: 4px;
}
.mobile-drawer__socials {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 8px;
}
.mobile-drawer__social {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}
.mobile-drawer__social:hover { color: var(--accent-hi); }
.mobile-drawer__foot-phones { margin: 0; }
.mobile-drawer__foot-phone {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}
.mobile-drawer__foot-link {
  color: var(--accent);
  text-decoration: none;
  margin-top: 8px;
}

/* ============================================================
   FOOTER (4-column dark)
   ============================================================ */
.footer {
  background: var(--paper-deep);
  color: var(--paper);
  padding: 32px var(--pad-x) 18px;
  position: relative;
  overflow: hidden;
  font-family: var(--f-sans);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr;
  gap: 48px;
  position: relative;
}
/* Кнопка «Наверх» — полоса НАД тёмным подвалом, справа. На всех версиях. */
.totop-bar {
  display: flex;
  justify-content: flex-end;
  padding: 4px var(--pad-x);
}
.totop-bar__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-decoration: none;
  transition: color 0.15s;
}
.totop-bar__link:hover { color: var(--accent); }
.footer__col-title {
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 14px;
  min-height: 12px;
}
.footer__link {
  display: block;
  color: var(--paper);
  opacity: 0.7;
  text-decoration: none;
  font-size: 12.5px;
  padding: 4px 0;
  transition: opacity 0.15s;
}
.footer__link:hover { opacity: 1; }

.footer__brand-logo {
  height: 52px;
  width: auto;
  /* Лого исходно тёмное (#7A2D2A оксблод). На тёмном фоне нужен светло-бежевый.
     invert(1) даёт зелёный (комплементарный к оксблоду). Используем filter-цепочку:
     invert → sepia → подкручиваем saturate/brightness/hue до --paper #F4F1E9. */
  filter: brightness(0) saturate(100%) invert(94%) sepia(15%) saturate(420%) hue-rotate(346deg) brightness(96%) contrast(88%);
  opacity: 0.95;
}
.footer__brand-lead {
  margin-top: 22px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--paper);
  opacity: 0.68;
  max-width: 320px;
}
.footer__socials {
  margin-top: 22px;
  display: flex; gap: 14px;
  align-items: center;
}
.footer__socials-divider { opacity: 0.3; }

.footer__contact {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--rule-soft);
}
.footer__contact-label {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px;
}
.footer__contact-phone {
  display: block;            /* телефоны друг под другом, не в строку */
  font-family: var(--f-sans);
  font-size: 18px;
  font-weight: 600;
  color: var(--paper);
  text-decoration: none;
  letter-spacing: -0.01em;
  padding: 2px 0;
}
.footer__contact-hours {
  margin-top: 4px;
  font-size: 12px;
  opacity: 0.6;
}
/* email-ссылка в колонке «Связь» — небольшой отступ от телефонов */
.footer__grid .footer__contact-phone + .footer__link { margin-top: 8px; }

.footer__rule {
  margin-top: 40px;
  border: 0;
  height: 1px;
  background: var(--rule-soft);
  opacity: 0.4;
}
.footer__bottom {
  margin-top: 18px;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--f-sans);
  font-size: 11px;
  opacity: 0.55;
}
.footer__bottom-codes {
  display: flex; gap: 14px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--paper);
}

/* ============================================================
   ERROR PANEL (errors/404, 410, also placeholder)
   ============================================================ */
.error-panel {
  padding: 40px 32px 36px;
  border: 1px solid var(--rule-soft);
  background: var(--paper-2);
  max-width: 760px;
  margin: 56px auto;
}
.error-panel__head {
  display: flex; align-items: baseline; gap: 18px;
  margin-bottom: 22px;
}
.error-panel__code {
  font-family: var(--f-sans);
  font-weight: 200;
  font-size: 96px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--accent);
}
.error-panel__title {
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: 30px;
  letter-spacing: -0.02em;
  line-height: 1.06;
  padding-bottom: 12px;
}
.error-panel__text {
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--ink-2);
  margin-bottom: 24px;
  max-width: 460px;
}

/* ============================================================
   MODAL FRAME / HEADER
   ============================================================ */
.modal-frame {
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 32px 36px 36px;
  position: relative;
  max-width: 520px;
}
.modal-frame__close {
  position: absolute;
  right: 14px; top: 14px;
  background: transparent;
  border: none;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink);
  cursor: pointer;
}
.modal-header { margin-bottom: 24px; }
.modal-header__title {
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: 28px;
  letter-spacing: -0.02em;
  line-height: 1.06;
  margin-bottom: 8px;
}
.modal-header__sub {
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-2);
  max-width: 520px;
}

/* ============================================================
   SECTION HEADER (used by main blocks — Wave 9 Stage B)
   ============================================================ */
.section-header {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 28px;
}
.section-header__left { display: flex; align-items: baseline; gap: 24px; }
.section-header__no {
  font-family: var(--f-sans);
  font-weight: 200;
  font-size: 56px;
  color: var(--ink-3);
  line-height: 1;
  letter-spacing: -0.04em;
}
.section-header__title {
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: 36px;
  letter-spacing: -0.02em;
  line-height: 1.06;
}
/* Правый блок «Похожее»: «Смотреть все →» сверху, заметка под ней — всё вправо. */
.search08-related__rhead { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.search08-related__note { text-align: right; font-size: 13px; color: var(--ink-3); font-family: var(--f-sans); max-width: 340px; }
.search08-related__note strong { color: var(--ink-2); }
.section-header__right {
  display: flex; align-items: baseline; gap: 22px;
}

/* ============================================================
   BREADCRUMBS
   ============================================================ */
.breadcrumbs {
  padding: 12px var(--pad-x);
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--ink-2);
}
.breadcrumbs__item {
  color: var(--ink-2);
  text-decoration: none;
}
.breadcrumbs__sep {
  margin: 0 8px;
  color: var(--ink-3);
}

/* ============================================================
   PRIVACY PAGE (CNT-06) static content
   ============================================================ */
.privacy {
  max-width: 760px;
  margin: 48px auto;
  padding: 0 var(--pad-x);
  font-family: var(--f-sans);
}
.privacy h1 {
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: 48px;
  letter-spacing: -0.024em;
  line-height: 1.02;
  margin-bottom: 28px;
}
.privacy h2 {
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.28;
  letter-spacing: -0.01em;
  margin: 32px 0 14px;
}
.privacy p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
  margin-bottom: 14px;
}
.privacy a { color: var(--accent); }

/* ============================================================
   TABLET-NAV (768–1199) — плоское меню с «Каталог ▾» dropdown
   ============================================================ */
.tablet-nav { display: block; background: var(--paper); }
.tablet-nav [x-cloak] { display: none !important; }
.tablet-nav__row {
  display: flex;
  align-items: stretch;
  padding: 0 var(--pad-x);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font: 500 13px/1 var(--f-sans);
}
.tablet-nav__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 14px;
  color: var(--ink-2);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  font: inherit;
  letter-spacing: 0.02em;
}
.tablet-nav__item:hover { color: var(--ink); }
.tablet-nav__item--catalog.is-open { color: var(--ink); font-weight: 600; }
.tablet-nav__item--catalog.is-open::after {
  content: '';
  position: absolute;
  left: 14px; right: 14px; bottom: 0;
  height: 2px;
  background: var(--accent);
}
.tablet-nav__chevron-btn {
  display: inline-flex;
  align-items: center;
  padding: 12px 10px 12px 2px;
  margin-left: -8px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-2);
}
.tablet-nav__chevron-btn:hover { color: var(--ink); }
.tablet-nav__chevron {
  font-size: 9px;
  transition: transform .15s;
}
.tablet-nav__chevron.is-open { transform: rotate(180deg); }
.tablet-nav__group { position: relative; display: inline-flex; align-items: center; }
.tablet-nav__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 50;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: none;
  padding: 14px 20px;
  width: max-content;
  max-width: 90vw;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
.tablet-nav__dropdown-grid {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 4px 32px;
}
.tablet-nav__dropdown-grid--1col { grid-template-columns: max-content; }
.tablet-nav__dropdown-item {
  display: block;
  padding: 6px 0;
  color: var(--ink);
  text-decoration: none;
  font-size: 13px;
}
.tablet-nav__dropdown-item:hover { color: var(--accent); }

/* ============================================================
   RESPONSIVE — show/hide chrome between mobile/tablet/desktop
   Канонические брейкпойнты (CLAUDE.md):
     desktop ≥ 1200
     tablet  768–1199
     mobile  ≤ 767
   ============================================================ */

/* desktop ≥ 1200 — показываем catbar + header-utility/brand; tablet-nav и mobile chrome скрыты */
@media (min-width: 1200px) {
  .mobile-header,
  .mobile-drawer,
  .mobile-overlay,
  .burger,
  .tablet-nav { display: none; }
}

/* tablet 768–1199 — utility+brand остаются; catbar → tablet-nav; mobile chrome скрыт;
   из utility убираем «часы работы» и дубль-ссылки разделов (О нас/Справочник/Контакты),
   которые на таблете живут в tablet-nav. CTA «Заказать звонок» ужимаем вдвое (180→90),
   освободившуюся ширину 1fr забирает поле поиска. */
@media (min-width: 768px) and (max-width: 1199px) {
  .catbar,
  .mobile-header,
  .mobile-drawer,
  .mobile-overlay,
  .burger { display: none; }
  .header-utility__hours,
  .header-utility__link--section { display: none; }
  .header-brand__inner { grid-template-columns: 260px 1fr 90px; }
  .header-brand__cta {
    padding-left: 8px;
    padding-right: 8px;
    font-size: 11px;
    text-align: center;
    line-height: 1.15;
  }
}

/* mobile ≤ 767 — весь desktop/tablet chrome скрыт, остаётся только fixed mobile-header */
@media (max-width: 767px) {
  .catbar,
  .header-utility,
  .header-brand,
  .tablet-nav { display: none; }
  /* компенсация fixed .mobile-header (52px) — чтобы контент не уезжал под шапку */
  body { padding-top: 52px; }
  /* поджимаем footer/error */
  .footer__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .error-panel { padding: 28px 20px; margin: 24px var(--pad-x); }
  .error-panel__code { font-size: 64px; }
  .error-panel__title { font-size: 22px; }
}

/* ============================================================
   HERO CAROUSEL (Stage B · Task 9.1)
   ============================================================ */
.hero-carousel {
  position: relative;
  height: 600px;
  overflow: hidden;
  background: #f4f1e9;
}
.hero-carousel__track {
  display: flex;
  height: 100%;
  transition: transform .6s cubic-bezier(.2,.7,.3,1);
  will-change: transform;
}
.hero-carousel__slide {
  flex: 0 0 100%;
  height: 100%;
  overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .hero-carousel__track { transition: none; }
}
.hero-carousel__dots {
  position: absolute;
  bottom: 20px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 8px;
  z-index: 5;
}
.hero-carousel__dot {
  width: 32px; height: 3px;
  background: rgba(244,241,233,0.35);
  border: 0; cursor: pointer; padding: 0;
  transition: background .2s;
}
.hero-carousel__dot.is-active { background: var(--accent-hi); width: 44px; }
.hero-carousel__prev,
.hero-carousel__next {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  background: transparent; border: 0;
  color: var(--paper); font-size: 44px;
  cursor: pointer; padding: 0 12px;
  opacity: .75; z-index: 5;
  transition: opacity .15s;
  line-height: 1;
  text-shadow: 0 1px 16px rgba(21,18,15,.9), 0 0 4px rgba(21,18,15,.6);
}
.hero-carousel__prev:hover,
.hero-carousel__next:hover { opacity: 1; }
.hero-carousel__prev { left: 4px; }
.hero-carousel__next { right: 4px; }
@media (max-width: 767px) {
  .hero-carousel { height: 420px; }
  .hero-carousel__prev,
  .hero-carousel__next { display: none; }
}
/* Слайд «новые поступления» (тип i) — только desktop ≥1200; на mobile/tablet
   сетка лотов не помещается. JS пересобирает слайды/точки по видимым (hero-carousel.js). */
@media (max-width: 1199px) {
  .hero-carousel__slide--no-mobile,
  .hero-carousel__dot--no-mobile { display: none; }
}

/* ——— Hero G — full-bleed lot photo ——— */
.hero-g {
  position: relative;
  height: 600px;
  overflow: hidden;
}
.hero-g__bg {
  position: absolute; inset: 0;
}
.hero-g__photo {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
/* Item slides: photo right-aligned, taller than hero, left edge fades to transparent */
.hero-g__bg--item {
  background: #dadad8;
}
.hero-g__bg--item .hero-g__photo {
  position: absolute;
  right: 0;
  top: -10%;
  width: auto;
  height: 130%;
  object-fit: unset;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 20%);
  mask-image: linear-gradient(90deg, transparent 0%, black 20%);
}
.hero-g__title--cat {
  font-size: clamp(32px, 3.2vw, 52px);
}
.hero-g__overlay {
  position: absolute; inset: 0;
  pointer-events: none;
}
/* Тёмные section-слайды (dark_image=1): тёмный градиент слева */
.hero-g:not(.hero-g--light-bg):not(.hero-g--item) .hero-g__overlay {
  background: linear-gradient(90deg, rgba(21,18,15,.65) 0%, rgba(21,18,15,.20) 38%, transparent 55%);
}
/* Светлые section-слайды (dark_image=0): светлый градиент слева под тёмным текстом */
.hero-g--light-bg .hero-g__overlay {
  background: linear-gradient(90deg, rgba(244,241,233,.85) 0%, rgba(244,241,233,.45) 35%, transparent 52%);
}
.hero-g__content {
  position: absolute; left: var(--pad-x); top: 0; bottom: 0;
  max-width: 580px;
  display: flex; flex-direction: column; justify-content: center;
  color: var(--paper);
}
.hero-g__kicker {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 22px;
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent-hi);
}
.hero-g__line {
  display: inline-block; width: 36px; height: 1px;
  background: var(--accent-hi);
}
.hero-g__title {
  font-family: var(--f-sans); font-size: clamp(44px, 4.5vw, 68px);
  font-weight: 300; line-height: 1.0;
  color: var(--paper); letter-spacing: -.028em;
  margin: 0 0 24px;
}
.hero-g__lead {
  font-size: 17px; line-height: 1.5;
  color: rgba(244,241,233,.85);
  max-width: 460px; margin-bottom: 32px;
}
/* Строка предмета (название · № · цена) — только мобильный item-слайд (см. медиа ≤767). */
.hero-g__item-line { display: none; }
.hero-g__cta {
  display: flex; gap: 14px; align-items: center;
}
.hero-g__cta .btn {
  border-color: var(--paper); background: var(--paper); color: var(--ink);
}
.hero-g__cta-link {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--paper); text-decoration: none;
  font: 500 11px/1 var(--f-sans);
  letter-spacing: .14em; text-transform: uppercase;
  border-bottom: 1px solid var(--accent-hi);
  padding-bottom: 3px;
}
/* Светлая картинка: тёмный текст поверх фото без затемнения */
.hero-g--light-bg .hero-g__content { color: var(--ink); }
.hero-g--light-bg .hero-g__title   { color: var(--ink); }
.hero-g--light-bg .hero-g__lead    { color: var(--ink-2); }
.hero-g--light-bg .hero-g__kicker  { color: var(--accent); }
.hero-g--light-bg .hero-g__line    { background: var(--accent); }
.hero-g--light-bg .hero-g__cta .btn {
  border-color: var(--ink); background: var(--ink); color: var(--paper);
}
.hero-g--light-bg .hero-g__cta-link {
  color: var(--ink); border-bottom-color: var(--accent);
}
.hero-g--light-bg .hero-g__meta { color: var(--ink-2); }

/* Overlay для предметных слайдов: левый градиент + нижний для мета-плашки */
.hero-g--item .hero-g__overlay {
  background: none;
}

.hero-g__meta {
  position: absolute; right: var(--pad-x); bottom: 22px;
  color: rgba(244,241,233,.85);
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: .08em; text-align: right; line-height: 1.7;
  text-decoration: none;
}
.hero-g__meta--link {
  text-decoration: none;
  color: rgba(244,241,233,.85);
}
.hero-g__meta--link:hover { color: var(--accent-hi); text-decoration: none; }
@media (max-width: 767px) {
  .hero-g { height: 100%; }
  .hero-g__overlay {
    background: linear-gradient(180deg, transparent 20%, rgba(21,18,15,.7) 100%);
  }
  .hero-g__content {
    left: 16px; right: 16px; top: auto;
    justify-content: flex-end; padding-bottom: 56px;
  }
  .hero-g__title { font-size: 32px; }
  .hero-g__lead { font-size: 14px; margin-bottom: 18px; }
  .hero-g__meta { display: none; }

  /* Слайд предмета: десктопное позиционирование (right:0; height:130%; width:auto)
     на квадратном мобильном уезжало вправо и резало предмет снизу.
     Здесь фото заполняет область hero целиком (cover, от центра) — без полей-полос. */
  .hero-g__bg--item { background: var(--paper-3); }
  .hero-g__bg--item .hero-g__photo {
    position: absolute; inset: 0; top: 0; right: auto;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    -webkit-mask-image: none; mask-image: none;
  }
  /* На мобильном у item-слайда вместо общего lead — строка самого предмета
     (название · № · цена), чтобы текст не повторялся на каждом слайде. */
  .hero-g--item .hero-g__lead { display: none; }
  .hero-g--item .hero-g__item-line {
    display: block;
    font-family: var(--f-mono); font-size: 12px; letter-spacing: .04em;
    line-height: 1.5; color: var(--ink);
  }
  /* Заголовок + строка предмета (тёмный текст) поверх фото. Светлая подложка
     с РАЗМЫТЫМИ КРАЯМИ: размывается сам светлый блок (псевдо-элемент с filter:blur),
     текст остаётся чётким. Только мобильный, item. */
  .hero-g--item .hero-g__title,
  .hero-g--item .hero-g__item-line { position: relative; z-index: 0; }
  .hero-g--item .hero-g__title { padding: 12px 12px 8px; margin-bottom: 0; }
  .hero-g--item .hero-g__item-line { padding: 8px 12px 12px; margin-bottom: 18px; }
  .hero-g--item .hero-g__title::before,
  .hero-g--item .hero-g__item-line::before {
    content: ''; position: absolute; inset: -8px -4px;
    background: rgba(227, 220, 201, 0.72); /* --paper-3, выраженный бежевый */
    filter: blur(30px);
    z-index: -1;
  }
}

/* ——— Hero H — salon interior ——— */
.hero-h {
  position: relative;
  height: 600px;
  overflow: hidden;
  background: var(--paper-deep);
}
.hero-h__photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero-h__backdrop {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.hero-h__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(21,18,15,.22) 0%, rgba(21,18,15,.58) 100%);
  pointer-events: none;
}
.hero-h__caption {
  position: absolute;
  left: 50%; bottom: 56px;
  transform: translateX(-50%);
  max-width: 720px; text-align: center;
  color: var(--paper);
  z-index: 2;
}
.hero-h__eyebrow {
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--accent-hi); margin-bottom: 18px;
}
.hero-h__title {
  font-family: var(--f-sans);
  font-size: clamp(36px, 4vw, 58px);
  font-weight: 300; line-height: 1.02;
  color: var(--paper); letter-spacing: -.026em;
  margin: 0 0 20px;
}
.hero-h__subtitle {
  font-size: 16px; line-height: 1.55;
  color: rgba(244,241,233,.82);
  max-width: 560px; margin: 0 auto 26px;
}
.hero-h__cta {
  display: inline-flex; gap: 12px; flex-wrap: wrap;
}
.hero-h__btn {
  display: inline-block;
  padding: 14px 26px;
  border: 1px solid var(--paper);
  background: transparent; color: var(--paper);
  font: 600 12px/1 var(--f-sans);
  letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.hero-h__btn:hover {
  background: var(--paper); color: var(--ink);
}
.hero-h__btn--accent {
  border-color: var(--accent-hi);
  background: var(--accent-hi); color: var(--ink);
}
.hero-h__btn--accent:hover {
  background: var(--paper); border-color: var(--paper); color: var(--ink);
}
.hero-h__badge {
  position: absolute; right: var(--pad-x); top: 32px;
  font-family: var(--f-mono); font-size: 10.5px;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent-hi); text-align: right; line-height: 1.5;
}
.hero-h__badge span { color: rgba(244,241,233,.6); }
@media (max-width: 767px) {
  .hero-h { height: 420px; }
  /* Во всю ширину с отступом 16px (было: схлопывалось по контенту → узкий блок,
     текст переносился в много строк и уезжал вверх под шапку). */
  .hero-h__caption {
    left: 0; right: 0; transform: none;
    max-width: none; width: 100%;
    bottom: 40px; padding: 0 16px;
  }
  .hero-h__title { font-size: 28px; }
  .hero-h__subtitle { font-size: 13px; max-width: none; }
  .hero-h__badge { display: none; }
}

/* ——— Hero I — mosaic ——— */
.hero-i {
  background: var(--paper);
  padding: 20px var(--pad-x) 20px;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
.hero-i__layout {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 40px;
  align-items: stretch;
  height: 100%;
}
.hero-i__text {
  display: flex; flex-direction: column;
  justify-content: space-between;
  padding: 24px 0;
}
.hero-i__kicker {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 22px;
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-2);
}
.hero-i__title {
  font-family: var(--f-sans);
  font-size: clamp(36px, 4vw, 60px);
  font-weight: 300; line-height: .98;
  letter-spacing: -.028em;
  color: var(--ink); margin: 0 0 24px;
}
.hero-i__lead {
  font-size: 15px; line-height: 1.55;
  color: var(--ink-2); max-width: 440px;
  margin-bottom: 26px;
}
.hero-i__cta {
  display: flex; gap: 14px; align-items: center;
  margin-bottom: 0;
}
.hero-i__foot {
  border-top: 1px solid var(--rule);
  padding-top: 14px; margin-top: 32px;
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--ink-3);
}
.hero-i__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 80px);
  gap: 8px;
  align-content: start;
}
.hero-i__tile {
  position: relative; overflow: hidden;
  text-decoration: none; color: inherit;
  background: var(--paper-3);
  grid-column: span 2; grid-row: span 2;
}
.hero-i__tile--big {
  grid-column: span 4; grid-row: span 4;
}
.hero-i__tile img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero-i__tile-fallback {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-mono); font-size: 11px; color: var(--ink-3);
}
.hero-i__tile-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 28px 12px 10px;
  background: linear-gradient(to top, rgba(21,18,15,.75), transparent);
  color: var(--paper);
}
.hero-i__tile--big .hero-i__tile-cap {
  padding: 48px 16px 14px;
}
.hero-i__tile-no {
  font-family: var(--f-mono); font-size: 9.5px;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-hi); margin-bottom: 4px;
}
.hero-i__tile-name {
  font-size: 12px; font-weight: 600;
  letter-spacing: -.01em; line-height: 1.25;
}
.hero-i__tile--big .hero-i__tile-name { font-size: 18px; }
.hero-i__tile-anons {
  font-size: 12.5px; color: rgba(244,241,233,.78); margin-top: 6px;
}
.hero-i__tile-price {
  position: absolute; right: 12px; top: 12px;
  padding: 5px 9px;
  background: var(--paper); color: var(--ink);
  font-family: var(--f-mono); font-size: 11px;
  font-weight: 600; letter-spacing: .06em;
}
@media (max-width: 1199px) {
  .hero-i__layout { grid-template-columns: 1fr; gap: 24px; min-height: auto; }
  .hero-i__grid {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(6, 72px);
  }
}
@media (max-width: 767px) {
  .hero-i { padding: 20px 16px 24px; }
  .hero-i__title { font-size: 30px; }
  .hero-i__grid {
    grid-template-rows: repeat(6, 60px);
    gap: 6px;
  }
}

/* ============================================================
   HOMEPAGE SECTIONS (Stage B · Tasks 9.2–9.5)
   ============================================================ */

/* ——— Section header ——— */
.section-header {
  display: flex; align-items: baseline;
  justify-content: space-between;
  margin-bottom: 28px;
}
.section-header__left {
  display: flex; align-items: baseline; gap: 24px;
}
.section-header__no {
  font-family: var(--f-sans); font-size: 56px;
  font-weight: 200; color: var(--ink-3); line-height: 1;
}
.section-header__title {
  font-family: var(--f-sans); font-size: 36px;
  font-weight: 400; line-height: 1.1;
  letter-spacing: -.02em; color: var(--ink);
  margin: 0;
}
.section-header__right {
  display: flex; align-items: baseline; gap: 22px;
}

/* ——— New Arrivals ——— */
.new-arrivals__inner,
.sales__inner {
  padding: 56px var(--pad-x) 64px;
}
.lot-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: 16px; row-gap: 36px;
}
.empty-state {
  font-family: var(--f-sans); font-size: 15px;
  color: var(--ink-3); font-style: italic;
  padding: 40px 0;
}
@media (max-width: 1199px) {
  .lot-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
  .lot-grid { grid-template-columns: repeat(2, 1fr); }
  .new-arrivals__inner,
  .sales__inner { padding: 36px 16px 48px; }
}

/* ——— Manifesto strip ——— */
.manifesto {
  position: relative; overflow: hidden;
  padding: 80px var(--pad-x);
  background: var(--paper-deep);
  color: var(--paper);
}
.manifesto__vine {
  position: absolute; pointer-events: none;
}
.manifesto__vine--left  { left: -30px; top: -10px; }
.manifesto__vine--right { right: -30px; bottom: -10px; }
.manifesto__inner {
  max-width: 1040px; margin: 0 auto;
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 56px; align-items: center;
}
.manifesto__kicker {
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: .22em; color: var(--ink-3);
  text-transform: uppercase; margin-bottom: 12px;
}
.manifesto__num {
  font-family: var(--f-sans); font-size: 88px;
  font-weight: 200; color: var(--accent-hi);
  line-height: 1;
}
.manifesto__years {
  font-size: 12px; color: var(--ink-3);
  letter-spacing: .04em; margin-top: 6px;
}
.manifesto__text {
  font-family: var(--f-sans); font-size: 28px;
  font-weight: 300; line-height: 1.28;
  color: var(--paper); letter-spacing: -.01em;
  margin: 0;
}
@media (max-width: 1199px) {
  .manifesto__inner { grid-template-columns: 1fr; gap: 24px; }
  .manifesto__num { font-size: 64px; }
  .manifesto__text { font-size: 22px; }
}
@media (max-width: 767px) {
  .manifesto { padding: 48px 16px; }
  .manifesto__text { font-size: 18px; }
}

/* ——— Sales ——— */
.sales {
  border-top: 1px solid var(--rule-soft);
}

/* ——— Advantages ——— */
.advantages {
  padding: 48px var(--pad-x);
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
  background: var(--paper-2);
}
.advantages__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
}
.advantages__item {
  padding: 0 22px;
  display: flex; flex-direction: column; gap: 10px;
}
.advantages__item + .advantages__item {
  border-left: 1px solid var(--rule-soft);
}
.advantages__ico {
  flex-shrink: 0;
}
.advantages__name {
  font-size: 14px; font-weight: 600;
  color: var(--ink); letter-spacing: -.005em;
}
.advantages__text {
  font-size: 12px; line-height: 1.5;
  color: var(--ink-2);
}
@media (max-width: 1199px) {
  .advantages__grid { grid-template-columns: repeat(3, 1fr); gap: 24px 0; }
  .advantages__item { padding: 0 18px; }
  .advantages__item:nth-child(3n+1) { border-left: none; }
}
@media (max-width: 767px) {
  .advantages { padding: 36px 16px; }
  .advantages__grid { grid-template-columns: repeat(2, 1fr); gap: 28px 0; }
  .advantages__item:nth-child(2n+1) { border-left: none; }
  .advantages__item:nth-child(3n+1) { border-left: 1px solid var(--rule-soft); }
}

/* ——— About snippet ——— */
.about-snippet {
  padding: 72px var(--pad-x) 32px; /* нижний отступ уменьшен (compact gap до блока 04) */
  border-top: 1px solid var(--rule-soft);
}
.about-snippet__hero {
  position: relative;
  margin: 0 0 6px; /* плотно к чёрному разделителю stats (по запросу владельца) */
  overflow: hidden;
}
.about-snippet__hero img {
  display: block;
  width: 100%;
  height: auto; /* пропорциональное сжатие по ширине страницы */
}
.about-snippet__hero-caption {
  position: absolute; right: 16px; bottom: 14px;
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: .06em; color: var(--paper);
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}
.about-snippet__layout {
  display: block; /* SVG-схематика убрана — тело занимает всю ширину */
}
.about-snippet__body .lead { margin-bottom: 18px; /* max-width убран — текст на всю ширину секции */ }
.about-snippet__intro {
  display: grid;
  grid-template-columns: 1fr 1.4fr; /* левая — header, правая — текст шире */
  gap: 48px;
  align-items: start;
  margin-bottom: 32px;
}
.about-snippet__intro-head .section-header { margin-bottom: 0; }
.about-snippet__intro .about-snippet__prose { margin-bottom: 0; }
.about-snippet__prose { text-align: justify; hyphens: auto; }
.about-snippet__statline {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  border-top: 1px solid var(--ink);
  padding-top: 18px;
  margin: 0 0 28px; /* top=0: суммарный отступ от фото до разделителя = 6px (hero margin-bottom) */
}
.about-snippet__stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0;
  flex: 1 1 auto;
}
.about-snippet__stat-n {
  font-family: var(--f-sans); font-size: 36px;
  font-weight: 300; color: var(--ink); margin-bottom: 6px;
}
.about-snippet__stat-l {
  font-size: 11px; color: var(--ink-2);
  letter-spacing: .02em; max-width: 120px; line-height: 1.35;
}
.about-snippet__cta {
  display: flex; gap: 14px; align-items: center;
  flex: 0 0 auto;
  white-space: nowrap;
}
@media (max-width: 1199px) {
  .about-snippet__stats { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 767px) {
  .about-snippet { padding: 48px 16px; }
  /* На мобиле intro стек: section-header сверху, prose снизу */
  .about-snippet__intro { grid-template-columns: 1fr; gap: 20px; }
  /* На мобиле statline вертикально: stats сверху, CTA снизу */
  .about-snippet__statline { flex-direction: column; align-items: stretch; gap: 18px; }
  .about-snippet__stats { grid-template-columns: repeat(2, 1fr); gap: 18px 0; }
  .about-snippet__stat-n { font-size: 28px; }
  .about-snippet__cta { white-space: normal; }
}

/* ——— Reviews ——— */
.reviews {
  border-top: 1px solid var(--rule-soft);
}
.reviews__inner {
  padding: 32px var(--pad-x) 72px; /* верхний отступ уменьшен (compact gap от блока 03) */
}
.reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.review-card {
  margin: 0;
  border-top: 1px solid var(--ink);
  padding-top: 18px;
}
.review-card__meta {
  display: flex; align-items: baseline;
  justify-content: space-between;
  margin-bottom: 18px;
}
.review-card__quote {
  margin: 0 0 18px;
  font-family: var(--f-sans); font-size: 17px;
  line-height: 1.5; color: var(--ink);
  letter-spacing: -.005em;
}
.review-card__author {
  font-size: 12px; color: var(--ink-2);
}
.review-card__author span {
  color: var(--ink); font-weight: 600;
}
@media (max-width: 1199px) {
  .reviews__grid { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 767px) {
  .reviews__inner { padding: 36px 16px 56px; }
  .review-card__quote { font-size: 15px; }
}

/* ============================================================
   Phase 3 gap — about subnav (D1) + pagination (J3/J5)
   Источник: about-pages.jsx → AboutSubnav. Только токены, flat.
   ============================================================ */
.about-subnav { border-bottom: 1px solid var(--rule-soft); }
.about-subnav__inner {
  display: flex; flex-wrap: wrap; gap: 28px; justify-content: center;
  padding: 0 24px;
}
.about-subnav__link {
  position: relative;
  padding: 14px 4px;
  text-decoration: none;
  color: var(--ink-2);
  font-family: var(--f-sans); font-size: 13px; font-weight: 500;
  letter-spacing: -0.005em;
}
.about-subnav__link:hover { color: var(--ink); }
.about-subnav__link--active { color: var(--ink); font-weight: 600; }
.about-subnav__link--active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--accent);
}
@media (max-width: 767px) {
  /* На мобиле subnav «Экспозиция/Заказ/История…» переносится в 3 строки
     и съедает треть экрана — скрываем, навигация остаётся в хлебных крошках. */
  .about-subnav { display: none; }
}

/* Единый страничник для всего сайта (эталон каталога). Был в lot-card.css —
   перенесён сюда (site.css грузится на всех страницах), чтобы вид совпадал везде. */
.pagination {
  display: flex; justify-content: center; align-items: center;
  gap: 8px; margin: 32px 0; flex-wrap: wrap;
}
.pagination__link {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 32px; padding: 0 12px;
  font-family: var(--f-sans); font-size: 12px; font-weight: 500;
  letter-spacing: 0.04em; color: var(--ink); text-decoration: none;
  border: 1px solid var(--rule); background: transparent;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.pagination__link:hover { background: var(--paper-2); border-color: var(--ink); }
.pagination__link--current { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pagination__link--current:hover { background: var(--ink); color: var(--paper); }
.pagination__prev, .pagination__next { padding: 0 14px; }
.pagination__gap {
  display: inline-flex; align-items: center; height: 36px; padding: 0 8px;
  color: var(--ink-3);
}

/* ============================================================
   Phase 3 gap — тело about-страниц (классы вместо inline, адаптив).
   Источник: about-pages.jsx. Только токены. Breakpoints: ≤767 / 768–1199 / ≥1200.
   ============================================================ */

/* Заголовочный блок раздела (kicker + display + опц. счётчик справа) */
.about-head { padding: 32px var(--pad-x) 24px; }
.about-head__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  margin-bottom: 12px;
}
.about-head .kicker { margin-bottom: 12px; }
.about-head__title {
  font-size: clamp(36px, 4.5vw, 56px); font-weight: 300; line-height: 1.02;
  letter-spacing: -0.028em; margin: 0;
}
.about-head__count { align-self: flex-end; white-space: nowrap; }
.about-head__count .num-tab { color: var(--ink); }
.about-head .hr-ink { margin-top: 24px; }

.about-section-pad { padding: 20px var(--pad-x) 64px; }

/* ── История — индекс: сетка карточек ── */
.history-grid { padding: 32px var(--pad-x) 28px; }
.history-cards {
  display: grid; grid-template-columns: repeat(3, 1fr);
  column-gap: 28px; row-gap: 44px;
}
.history-empty { color: var(--ink-2); }

.history-card { display: block; text-decoration: none; color: inherit; }
.history-card__date {
  font-family: var(--f-mono); font-size: 11px; font-weight: 600;
  color: var(--accent); letter-spacing: 0.08em; margin-bottom: 12px;
}
.history-card__photo {
  height: 200px; margin-bottom: 14px; overflow: hidden;
  /* Заглушка blank-image для записей без своего фото (история/статьи + «Другие статьи»).
     При наличии <img> внутри плейсхолдер перекрывается фактической картинкой. */
  background: var(--paper-3) url('/assets/img/blank-image.jpg') center / cover no-repeat;
}
.history-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.history-card__title {
  font-family: var(--f-sans); font-size: 17px; font-weight: 600;
  line-height: 1.25; letter-spacing: -0.012em; margin: 0 0 8px;
}
.history-card__preview {
  font-size: 12.5px; line-height: 1.55; color: var(--ink-2); margin: 0;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}

/* ── Статья-деталь (История · запись): центрированная колонка ── */
.article-page { max-width: 1100px; margin: 0 auto; }
.article-page__head { padding: 32px var(--pad-x) 16px; }
.article-page__head .kicker { margin-bottom: 14px; }
.article-page__title {
  font-size: clamp(32px, 4vw, 52px); font-weight: 300; line-height: 1.02;
  letter-spacing: -0.028em; margin: 0 0 28px;
}
.article-page__media { padding: 0 var(--pad-x) 24px; }
.article-page__body {
  max-width: 720px; margin: 0 auto;
  padding: 32px var(--pad-x) 24px;
  font-size: 15.5px; line-height: 1.7; color: var(--ink-2);
}
.article-page__gallery-label { margin-top: 36px; margin-bottom: 14px; }
.article-others {
  padding: 56px var(--pad-x) 72px; border-top: 1px solid var(--rule); margin-top: 40px;
}
.article-others__label { margin-bottom: 22px; }
.article-others__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 28px; row-gap: 32px;
}

/* ── Подстраницы /about/salon|zakaz|garantii (G/H/M) ── */
.about-subpage { padding: 32px var(--pad-x) 72px; }
.about-subpage__head { margin-bottom: 28px; }
.about-subpage__head .kicker { margin-bottom: 14px; }
.about-subpage__title {
  font-size: clamp(36px, 4.5vw, 56px); font-weight: 300; line-height: 1.02;
  letter-spacing: -0.028em; margin: 0;
}
/* Заголовок внутри левой колонки (salon/zakaz) — фото в aside встают вровень. */
.about-subpage__main-kicker { margin-bottom: 14px; }
.about-subpage__title--inline { margin-bottom: 28px; }
.about-subpage__grid {
  display: grid; grid-template-columns: 1.6fr 1fr; gap: 64px; align-items: start;
}
.about-prose__lead { margin-bottom: 22px; max-width: 640px; }
.about-prose { font-size: 15px; line-height: 1.65; color: var(--ink-2); margin: 0 0 22px; max-width: 640px; }
.about-note { font-size: 13px; color: var(--ink-3); margin: 0; }
.about-list__h { margin-bottom: 14px; }
.about-list { list-style: none; padding: 0; margin: 0 0 28px; font-size: 14.5px; line-height: 1.7; color: var(--ink-2); }
.about-list li { padding: 8px 0; border-bottom: 1px solid var(--rule-soft); }
.about-addr { padding: 20px; background: var(--paper-2); border: 1px solid var(--rule-soft); margin: 8px 0 24px; }
.about-addr__h { margin-bottom: 10px; }
.about-addr__street { font-size: 16px; font-weight: 500; margin-bottom: 8px; }
.about-addr__hours { font-size: 13px; color: var(--ink-2); }
.about-addr__off { color: var(--ink-3); }

/* Фото салона: desktop/tablet — столбец (lightbox), mobile — слайдшоу (G3/G4, H2). */
.salon-gallery { display: flex; flex-direction: column; gap: 12px; }
.salon-gallery__item {
  display: block; width: 100%; height: auto; cursor: zoom-in;
  border: 1px solid var(--rule-soft); background: var(--paper-3);
}

/* Сертификат подлинности (garantii, M2). */
.about-cert { margin: 0; }
.about-cert img {
  display: block; width: 100%; height: auto; cursor: zoom-in;
  border: 1px solid var(--rule-soft); background: var(--paper-3);
}
.about-cert__cap {
  margin-top: 10px; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-3);
}

@media (max-width: 1199px) {
  .history-cards { grid-template-columns: repeat(2, 1fr); }
  .article-others__grid { grid-template-columns: repeat(2, 1fr); }
  .about-subpage__grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 767px) {
  .history-cards { grid-template-columns: 1fr; }
  .article-others__grid { grid-template-columns: 1fr; }
  .about-head__row { flex-direction: column; align-items: flex-start; gap: 12px; }

  /* На мобиле дата записи истории должна явно отличаться от заголовка
     (моно-шрифт + accent + uppercase, как на десктопе, чуть крупнее). */
  .history-card__date {
    font-family: var(--f-mono);
    font-size: 12px;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 10px;
    display: block;
  }

  /* Салон/заказ: фото-столбец → горизонтальный слайдшоу. */
  .salon-gallery {
    flex-direction: row; gap: 10px; overflow-x: auto;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .salon-gallery::-webkit-scrollbar { display: none; }
  .salon-gallery__item { flex: 0 0 85%; height: 240px; object-fit: cover; scroll-snap-align: center; }
  /* Гарантии (M3): заголовок → сертификат → текст. */
  .about-subpage--garantii .about-subpage__aside { order: -1; margin-bottom: 8px; }
  .about-subpage--garantii .about-subpage__grid { display: flex; flex-direction: column; }
}

/* ── Лендинг /about/ (F): шапка, плитки, блок «О салоне» + сертификат ── */
.about-landing__header { padding: 32px var(--pad-x) 16px; }
.about-landing__head-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: end; }
.about-landing__title { font-size: clamp(44px, 5vw, 64px); font-weight: 300; line-height: 1.0; letter-spacing: -0.028em; margin: 16px 0 22px; }
.about-landing__lead { max-width: 560px; }
.about-landing__head-aside { border-top: 1px solid var(--ink); padding-top: 18px; }
.about-landing__head-aside .about-prose:last-child { margin-bottom: 0; }
.about-landing__header .hr-ink { margin-top: 36px; }

.about-landing__tiles { padding: 40px var(--pad-x) 56px; }
.about-landing__tiles-h { margin-bottom: 22px; }
.about-tiles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

.about-tile {
  position: relative; display: block; text-decoration: none;
  padding: 24px 24px 48px; min-height: 200px;
  border: 1px solid var(--rule-soft); background: var(--paper-2); color: var(--ink);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.about-tile:hover { border-color: var(--ink); }
.about-tile__num {
  font-family: var(--f-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 16px;
}
.about-tile__label { font-family: var(--f-sans); font-size: 24px; font-weight: 500; letter-spacing: -0.012em; line-height: 1.15; margin: 0 0 12px; }
.about-tile__desc { font-size: 13px; line-height: 1.55; color: var(--ink-2); margin: 0 0 18px; }
.about-tile__arrow {
  position: absolute; right: 24px; bottom: 24px;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent);
}
/* Тёмная плитка (тур): тёплый светлый текст из палитры (без хардкода hex). */
.about-tile--dark { background: var(--paper-deep); color: var(--paper); }
.about-tile--dark .about-tile__num,
.about-tile--dark .about-tile__arrow { color: var(--paper-3); }
.about-tile--dark .about-tile__desc { color: color-mix(in srgb, var(--paper) 78%, transparent); }

.about-landing__more {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start;
  padding: 16px var(--pad-x) 72px; border-top: 1px solid var(--rule-soft);
}
.about-landing__more-text { max-width: 640px; }

/* Наградные грамоты: справа от текста, небольшие превью в ряд, lightbox. */
.about-awards__h { margin-bottom: 16px; }
.about-awards__row { display: flex; flex-wrap: wrap; gap: 16px; }
.about-awards__item {
  display: block; height: 180px; width: auto; cursor: zoom-in;
  border: 1px solid var(--rule-soft); background: var(--paper-3);
}

@media (max-width: 1199px) {
  .about-landing__head-grid { grid-template-columns: 1fr; gap: 24px; }
  .about-tiles-grid { grid-template-columns: repeat(2, 1fr); }
  .about-landing__more { grid-template-columns: 1fr; gap: 28px; }
  .about-landing__more-text { margin-bottom: 0; }
}
@media (max-width: 767px) {
  /* Грамоты: горизонтальный скролл. */
  .about-awards__row { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .about-awards__item { height: 150px; flex: 0 0 auto; }
}
@media (max-width: 767px) {
  .about-tiles-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Phase 3 gap — Контакты /contacts/ (N). Классы вместо inline.
   Источник: articles-contacts.jsx → ContactsNewArtboard / 07m.
   ============================================================ */
.contacts-hero { padding: 32px var(--pad-x) 16px; }
.contacts-hero__row { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.contacts-hero__title { font-size: clamp(44px, 5vw, 64px); font-weight: 300; line-height: 1.0; letter-spacing: -0.028em; margin: 0; }
.contacts-hero__cb { align-self: flex-end; white-space: nowrap; cursor: pointer; }
.contacts-hero .hr-ink { margin-top: 24px; }

.contacts-section { padding: 32px var(--pad-x) 32px; }
.contacts-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; align-items: start; }

.contacts-row { padding: 18px 0; border-top: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft); margin-top: -1px; }
.contacts-row--last { border-bottom: 0; }
.contacts-row__label { margin-bottom: 8px; }
.contacts-row__val { font-size: 14px; color: var(--ink); }

.contacts-phone { display: inline-block; margin-right: 18px; color: var(--ink); text-decoration: none; font-size: 22px; font-weight: 500; letter-spacing: -0.01em; }
.contacts-link { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--ink); }
.contacts-link:hover { color: var(--accent); border-bottom-color: var(--accent); }
.contacts-messengers { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.contacts-hours { font-size: 14px; line-height: 1.7; color: var(--ink); }
.contacts-hours__off { color: var(--ink-3); }
.contacts-req { font-size: 12.5px; line-height: 1.7; color: var(--ink-2); }

/* Правая колонка: карта + «Как пройти» + фото (под картой). */
.contacts-map-col { display: flex; flex-direction: column; }
.contacts-map { height: 460px; border: 1px solid var(--rule); background: var(--paper-2); }

.contacts-howto { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--rule-soft); }
.contacts-howto__h { margin-bottom: 10px; }
.contacts-howto__text { font-size: 14px; line-height: 1.7; color: var(--ink-2); margin: 0; }

/* Фото салона под картой — полное (не обрезаем). */
.contacts-photo { margin: 18px 0 0; }
.contacts-photo img {
  display: block; width: 100%; height: auto; cursor: zoom-in;
  border: 1px solid var(--rule-soft); background: var(--paper-3);
}
.contacts-photo__cap {
  margin-top: 8px; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-3);
}
.contacts-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.contacts-map__link {
  align-self: flex-start; margin-top: 12px; padding: 8px 14px;
  border: 1px solid var(--ink); color: var(--ink); text-decoration: none;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
}
.contacts-map__link:hover { background: var(--ink); color: var(--paper); }

/* Обратная связь — под реквизитами в левой колонке. */
.contacts-feedback { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--ink); }
.contacts-feedback .kicker { margin-bottom: 12px; }
.contacts-form__title { font-size: 28px; font-weight: 300; letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 20px; }

@media (max-width: 1199px) {
  .contacts-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .contacts-map { height: 360px; }
}

/* ============================================================
   Phase 3 gap — Отзывы /about/otzyvy/ (L). Классы вместо inline.
   Источник: about-pages.jsx → ReviewsArtboard (04f / 04fm).
   ============================================================ */
.reviews-section { padding: 24px var(--pad-x) 72px; }
.reviews-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 64px; align-items: start; }
.reviews-empty { padding: 32px 0; color: var(--ink-2); font-size: 14px; }
.reviews-yandex { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--rule-soft); }
.reviews-aside { position: sticky; top: 24px; }

/* Карточка отзыва */
.review-item { padding: 22px 0; border-bottom: 1px solid var(--rule-soft); }
.review-item--first { border-top: 1px solid var(--ink); }
.review-item__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.review-item__meta { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.review-item__name { font-size: 15px; font-weight: 600; color: var(--ink); }
.review-item__date { color: var(--ink-3); }
.review-item__stars { font-size: 13px; letter-spacing: 0.1em; white-space: nowrap; flex-shrink: 0; }
.review-item__stars-on  { color: var(--accent); }
.review-item__stars-off { color: var(--rule); }
.review-item__text { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); margin: 0; }

/* Форма отзыва */
.review-form { border: 1px solid var(--ink); background: var(--paper-2); padding: 24px 24px 22px; }
.review-form--done { padding: 24px; }
.review-form__done-h { margin-bottom: 16px; color: var(--accent); }
.review-form__done-text { font-size: 14px; line-height: 1.6; color: var(--ink); margin: 0; }
.review-form__title { font-size: 22px; font-weight: 400; margin: 0 0 18px; letter-spacing: -0.012em; }
.review-form .label { margin-bottom: 18px; }
.review-form__field { display: block; margin-bottom: 12px; border: 0; padding: 0; }
.review-form__lbl { display: block; margin-bottom: 6px; }
.review-form__input {
  width: 100%; padding: 10px 12px; background: var(--paper); border: 1px solid var(--rule);
  font: 500 13px/1.4 var(--f-sans); color: var(--ink); outline: none;
}
.review-form__input:focus { border-color: var(--ink); }
.review-form__textarea { min-height: 100px; resize: vertical; }
.review-form__captcha { margin-bottom: 16px; }
.review-form__submit {
  width: 100%; padding: 14px 18px; background: var(--ink); color: var(--paper); border: 0;
  font: 600 12px/1 var(--f-sans); letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer;
}
.review-form__submit:hover { background: var(--accent); }
.review-form__note { font-size: 11px; color: var(--ink-2); margin-top: 12px; line-height: 1.5; }
.form-error {
  margin-bottom: 14px; padding: 10px 14px; font-size: 13px; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}

/* Кликабельные звёзды оценки (L1): DOM 5→1 + row-reverse, подсветка через :checked/:hover ~. */
.star-rating { border: 0; padding: 0; margin: 0 0 14px; }
.star-rating__stars { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; }
.star-rating__radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.star-rating__star { font-size: 26px; line-height: 1; color: var(--rule); cursor: pointer; padding: 0 3px; transition: color 0.12s ease; }
.star-rating__radio:checked ~ .star-rating__star { color: var(--accent); }
/* Превью при наведении: сбросить все, подсветить наведённую и младшие. */
.star-rating__stars:hover .star-rating__star { color: var(--rule); }
.star-rating__stars:hover .star-rating__star:hover,
.star-rating__stars:hover .star-rating__star:hover ~ .star-rating__star { color: var(--accent); }
.star-rating__radio:focus-visible + .star-rating__star { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 1199px) {
  .reviews-layout { grid-template-columns: 1fr; }
  /* L5: форма ПОД списком (естественный порядок, без order), не sticky. */
  .reviews-aside { position: static; top: auto; }
}
@media (max-width: 767px) {
  /* L5 (04fm): у формы на мобиле нет рамки. */
  .review-form { border: 0; background: transparent; padding: 24px 0 0; }
}

/* ============================================================
   Phase 3 gap — Деталь статьи (/spravochnik/articles/{id}).
   Контейнер по ширине первого фото; доп.фото ≤300px распределяются по тексту, lightbox.
   ============================================================ */
.article-detail { max-width: 900px; margin: 0 auto; padding: 24px var(--pad-x) 24px; }
.article-detail__head { padding-top: 8px; margin-bottom: 24px; }
.article-detail__head .kicker { margin-bottom: 14px; }
.article-detail__title {
  font-size: clamp(32px, 4.5vw, 52px); font-weight: 300; line-height: 1.02;
  letter-spacing: -0.028em; margin: 0;
}
.article-detail__hero { margin: 0 0 24px; }
.article-detail__hero img {
  display: block; width: 100%; height: auto; cursor: zoom-in;
  border: 1px solid var(--rule-soft); background: var(--paper-3);
}
.article-detail__body { font-size: 15.5px; line-height: 1.75; color: var(--ink-2); }
.article-detail__prose { margin-bottom: 16px; }
.article-detail__prose:last-child { margin-bottom: 0; }
.article-detail__fig { margin: 18px 0; text-align: center; }
.article-detail__fig img {
  display: inline-block; max-width: 100%; height: 300px; width: auto; cursor: zoom-in;
  border: 1px solid var(--rule-soft); background: var(--paper-3);
}
@media (max-width: 767px) {
  .article-detail__fig img { height: auto; max-height: 240px; }
}

/* ============================================================
   Phase 3 gap — Справочник: списки блоками (avtory/marki/stili/tehniki).
   Источник: spravochnik-pages.jsx → SpravochnikListArtboard (05a).
   ============================================================ */
/* Индекс справочника: 5 плиток в ряд (артборд 05). */
.spravochnik-index-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.spravochnik-tile {
  position: relative; display: block; text-decoration: none; color: inherit;
  padding: 22px 20px 24px; min-height: 220px;
  border: 1px solid var(--rule-soft); background: var(--paper-2);
  transition: border-color 0.15s ease;
}
.spravochnik-tile:hover { border-color: var(--ink); }
.spravochnik-tile__num {
  font-family: var(--f-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px;
}
.spravochnik-tile__label { font-size: 22px; font-weight: 500; letter-spacing: -0.012em; margin: 0 0 8px; line-height: 1.15; }
.spravochnik-tile__foot { position: absolute; left: 20px; right: 20px; bottom: 18px; display: flex; justify-content: space-between; align-items: baseline; }
.spravochnik-tile__count { font-size: 28px; font-weight: 200; letter-spacing: -0.02em; color: var(--ink); }
.spravochnik-tile__arrow { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--accent); }
@media (max-width: 1199px) { .spravochnik-index-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px)  { .spravochnik-index-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

/* Алфавитная навигация (авторы/марки/техники) — переход на page-N#letter-X. */
.alpha-nav__sec { padding: 8px var(--pad-x) 0; }
.alpha-nav__h { margin-bottom: 10px; }
.alpha-nav {
  display: flex; flex-wrap: wrap; gap: 0;
  border-top: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft);
  padding: 10px 0;
}
.alpha-nav__item {
  padding: 4px 12px; font-size: 14px; font-weight: 500;
  color: var(--ink); text-decoration: none;
  border-right: 1px solid var(--rule-soft);
}
.alpha-nav__item:last-child { border-right: 0; }
.alpha-nav__item:hover { background: var(--paper-2); color: var(--accent); }
.author-card[id^="letter-"] { scroll-margin-top: 88px; }

.spravochnik-list-grid { display: grid; gap: 12px; }
/* Авторы/марки/техники: компактные строки-карточки рядом (2–4 в ряд по ширине). */
.spravochnik-list-grid--rows { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
/* Стили: блоки с иллюстрацией (~4 в ряд), масштабирование под экран. */
.spravochnik-list-grid--compact { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }

.author-card {
  text-decoration: none; color: inherit;
  border: 1px solid var(--rule-soft); background: var(--paper);
  transition: border-color 0.15s ease;
}
.author-card:hover { border-color: var(--ink); }

/* ── Компактная строка (author/trademark/tech) ── */
.author-card--row { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: center; padding: 12px 14px; }
.author-card__avatar {
  width: 56px; height: 56px; background: var(--paper-3);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-serif); font-style: italic; font-size: 24px; color: var(--ink-3);
}
.author-card__info { min-width: 0; }
.author-card--row .author-card__name { font-size: 15px; font-weight: 600; letter-spacing: -0.012em; line-height: 1.2; }
.author-card__years { font-family: var(--f-mono); font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.author-card__section { font-family: var(--f-mono); font-size: 10.5px; color: var(--ink-2); margin-top: 2px; }
.author-card__count { text-align: right; flex-shrink: 0; }
.author-card__count .num-tab { font-size: 18px; font-weight: 500; }
.author-card__count .lot-no { color: var(--ink-3); }

/* ── Блок с иллюстрацией (стили) ── */
.author-card--block { display: flex; flex-direction: column; }
.author-card__media {
  height: 100px;
  background: var(--paper-3);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.author-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.author-card__body { padding: 14px 16px 16px; }
.author-card--block .author-card__name { font-size: 15px; font-weight: 600; letter-spacing: -0.012em; margin-bottom: 6px; line-height: 1.25; }
.author-card__meta { font-family: var(--f-mono); font-size: 11px; color: var(--ink-2); }
.author-card__meta .num-tab { color: var(--ink); font-size: 13px; }
.author-card__empty { color: var(--ink-3); }

/* ============================================================
   Phase 3 gap — callback modal (A4). Alpine store `modals`.
   ============================================================ */
[x-cloak] { display: none !important; }

/* Callback modal — pure-CSS checkbox-hack (без JS). Toggle: #callback-modal-toggle. */
.callback-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(20, 16, 12, 0.55);
  display: none;
}
.callback-dialog {
  position: fixed; z-index: 201;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: calc(100% - 40px); max-width: 440px;
  max-height: 90vh; overflow-y: auto;
  background: var(--paper); border: 1px solid var(--ink);
  padding: 36px 32px 32px;
  display: none;
}
.callback-toggle:checked ~ .callback-overlay,
.callback-toggle:checked ~ .callback-dialog { display: block; }
.callback-dialog__close {
  position: absolute; top: 14px; right: 14px;
  background: none; border: 0; cursor: pointer; color: var(--ink-2);
  display: inline-flex; padding: 4px;
}
.callback-dialog__close:hover { color: var(--ink); }
.callback-dialog__title {
  font-family: var(--f-display, var(--f-sans)); font-weight: 300;
  font-size: 28px; line-height: 1.05; letter-spacing: -0.02em;
  margin: 0 0 10px;
}
.callback-dialog__lead {
  font-family: var(--f-sans); font-size: 14px; color: var(--ink-2);
  line-height: 1.5; margin: 0 0 22px;
}
.callback-form { display: flex; flex-direction: column; gap: 14px; }
.callback-form__field { display: flex; flex-direction: column; gap: 6px; }
.callback-form__field span {
  font-family: var(--f-sans); font-size: 12px; color: var(--ink-2);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.callback-form__field input {
  width: 100%; padding: 11px 12px;
  background: var(--paper); border: 1px solid var(--rule);
  font: 500 14px/1.4 var(--f-sans); color: var(--ink); outline: none;
}
.callback-form__field input:focus { border-color: var(--ink); }
.callback-form__field textarea {
  width: 100%; min-height: 70px; padding: 10px 12px;
  background: var(--paper); border: 1px solid var(--rule);
  font: 400 13px/1.5 var(--f-sans); color: var(--ink); outline: none; resize: vertical;
  box-sizing: border-box;
}
.callback-form__field textarea:focus { border-color: var(--ink); }
.callback-form__submit {
  margin-top: 4px; padding: 15px 24px; width: 100%; text-align: center;
  background: var(--ink); color: var(--paper); border: 1px solid var(--ink); cursor: pointer;
  font: 600 12px/1 var(--f-sans); letter-spacing: 0.08em; text-transform: uppercase;
  transition: background .15s, color .15s;
}
.callback-form__submit:hover { background: transparent; color: var(--ink); }
/* M2 «Отправить запрос» — accent (артборд btn-accent). */
.callback-form__submit--accent {
  background: var(--accent); border-color: var(--accent);
}
.callback-form__submit--accent:hover { background: transparent; color: var(--accent); }
.callback-form__note { font-size: 11.5px; color: var(--ink-2); line-height: 1.4; }
.callback-form__note a { color: var(--ink); }
/* Окно «спасибо» — всё содержимое по центру (иконка, текст, кнопка). */
.callback-dialog__success[hidden] { display: none; }
.callback-dialog__success:not([hidden]) { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 8px 0; }
.callback-dialog__success .callback-dialog__title,
.callback-dialog__success .callback-dialog__lead { margin: 0; }
.callback-dialog__success-mark { color: var(--accent); margin-bottom: 6px; display: inline-flex; }
.callback-dialog__success .callback-form__submit { margin-top: 12px; min-width: 160px; }
@media (max-width: 767px) {
  .callback-dialog { padding: 30px 20px 24px; }
  .callback-dialog__title { font-size: 24px; }
}

/* ============================================================
   Phase 3 gap — search page (артборд «08 · Поиск»)
   Крупное поле + аккордеон расширенного поиска. Только токены.
   ============================================================ */
.search08-hero { padding: 16px var(--pad-x, 56px) 4px; }
.search08-hero__title { font-size: 44px; font-weight: 300; letter-spacing: -0.022em; margin: 0; }
/* «Найдено N» — inline в заголовке, с отступом, вторичный размер/цвет. */
.search08-hero__count { margin-left: 16px; font-size: 16px; font-weight: 400; letter-spacing: 0; color: var(--ink-2); font-family: var(--f-sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.search08-hero__count strong { color: var(--ink); font-weight: 600; }
.search08-hero__hint { margin: 8px 0 0; color: var(--ink-2); font-family: var(--f-sans); }
.search08-wrap { padding: 6px var(--pad-x, 56px) 4px; }
.search08__bar {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 22px; border: 1px solid var(--ink); background: var(--paper);
}
.search08__bar-icon { display: inline-flex; color: var(--ink-2); }
.search08__input {
  flex: 1 1 auto; min-width: 0; border: 0; outline: none; background: transparent;
  font: 400 22px/1.1 var(--f-sans); color: var(--ink); letter-spacing: -0.012em;
}
.search08__input::placeholder { color: var(--ink-3); }
.search08__input::-webkit-search-cancel-button { display: none; }
.search08__hint { font-size: 11px; color: var(--ink-3); white-space: nowrap; }
/* Фаза C: строка распознавания запроса — с инлайн-чипами. */
.search08-recognized { margin: 0; font-size: 13px; color: var(--ink-2); }
/* Только ссылка «искать целиком» — НЕ чипы-пилюли (у них свой стиль paper/ink). */
.search08-recognized a:not(.active-filters__pill) { color: var(--accent); text-decoration: underline; }
.search08-recognized--sentence { margin: 10px 0 0; line-height: 2.1; }
/* Инлайн-чипы внутри предложения: небольшой отступ + выравнивание по тексту. */
.search08-recognized .active-filters__pill { margin: 0 4px; vertical-align: middle; }
.search08__btn {
  flex: 0 0 auto; padding: 13px 24px; background: var(--ink); color: var(--paper);
  border: 0; cursor: pointer; font: 600 12px/1 var(--f-sans);
  letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
}
.search08__btn:hover { background: var(--accent); }
.search08__adv-toggle {
  width: 100%; margin-top: 14px; padding: 13px 20px;
  /* Заголовок расширенного поиска — темнее фона страницы (как панель), чтобы не сливался. */
  border: 1px solid var(--rule-soft); background: var(--paper-2); cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font: 500 13px/1.4 var(--f-sans); color: var(--ink-2); text-align: left;
}
.search08__adv-toggle:hover { background: var(--paper-3); }
.search08__adv-toggle strong { color: var(--ink); font-weight: 600; }
.search08__adv-caret { color: var(--ink-3); white-space: nowrap; }
.search08__facets {
  margin-top: -1px; padding: 22px 20px;
  /* Фон «section ground» — как у .filter-panel каталога, чтобы панель не сливалась с фоном. */
  background: var(--paper-2);
  border: 1px solid var(--rule-soft);
}
/* Раскладка фасетов поиска: 10-колоночная сетка → ряд 1 два ползунка (span 5),
   ряд 2 все 5 селектов в одну строку (span 2). Специфичность .search08 побеждает .filters__grid. */
.search08 .filters__grid { grid-template-columns: repeat(10, 1fr); }
.search08 .filters__group--range { grid-column: span 5; }
.search08 .filters__grid > .filters__group:not(.filters__group--range) { grid-column: span 2; }
@media (max-width: 1199px) {
  .search08 .filters__grid { grid-template-columns: repeat(2, 1fr); }
  .search08 .filters__group--range { grid-column: span 2; }
  .search08 .filters__grid > .filters__group:not(.filters__group--range) { grid-column: span 1; }
}
@media (max-width: 767px) {
  .search08 .filters__grid { grid-template-columns: 1fr; }
  .search08 .filters__grid > .filters__group { grid-column: span 1; }
}
.search08__group { display: flex; flex-direction: column; gap: 6px; }
.search08__select, .search08__num {
  width: 100%; padding: 10px 12px; background: var(--paper);
  border: 1px solid var(--rule); font: 500 13px/1.4 var(--f-sans); color: var(--ink); outline: none;
}
.search08__select:focus, .search08__num:focus { border-color: var(--ink); }
.search08__range { display: flex; align-items: center; gap: 8px; }
.search08__num { width: 100%; }
.search08__range-sep { color: var(--ink-3); }
.search08__actions {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 18px;
  margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--rule-soft);
}
.search08-chips {
  padding: 12px var(--pad-x, 56px) 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px 24px; flex-wrap: wrap;
}
.search08-chips__list { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 auto; }
.search08-sortbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; flex: 0 0 auto; }
/* Сортировка — прижата вправо. */
.search08-sortbar--right { margin-left: auto; }
.search08-results { padding: 16px var(--pad-x, 56px) 64px; }
/* Фаза C: полоса «Похожее» — та же горизонтальная ширина, что у результатов, + разделитель. */
.search08-related { padding: 32px var(--pad-x, 56px) 64px; border-top: 1px solid var(--rule); }
@media (max-width: 767px) {
  .search08-hero { padding: 18px 16px 4px; }
  .search08-hero__title { font-size: 28px; }
  .search08-wrap, .search08-results, .search08-chips, .search08-related { padding-left: 16px; padding-right: 16px; }
  .search08__bar { padding: 14px 16px; gap: 10px; }
  .search08__input { font-size: 17px; }
  .search08__hint { display: none; }
  .search08__btn { padding: 12px 16px; }
}

/* ============================================================
   Phase 3 gap — 360 tour modal (I1/I3/I4). Без заголовка, минимальный хром.
   ============================================================ */
.tour-modal {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(21,18,15,0.6);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.tour-modal__box {
  position: relative; width: 100%; max-width: 1200px;
  background: var(--paper-deep, #1a1612); padding: 5px;
}
.tour-modal__close {
  position: fixed; top: 16px; right: 20px; z-index: 9001;  /* ЗА модалкой, в углу экрана */
  display: inline-flex; padding: 8px;
  background: rgba(21,18,15,0.65); border: 0; cursor: pointer;
  color: var(--paper);
}
.tour-modal__close:hover { background: rgba(21,18,15,0.9); }
.tour-modal__frame { width: 100%; height: 84vh; border: 0; display: block; }
@media (max-width: 1199px) and (min-width: 768px) {
  .tour-modal { padding: 10px; }
  .tour-modal__frame { height: 82vh; }
}
@media (max-width: 767px) {
  .tour-modal { padding: 0; }
  .tour-modal__box { max-width: 100%; height: 100%; padding: 0; }
  .tour-modal__frame { height: 100vh; }
}

/* ============================================================
   SPRAVOCHNIK · Детальная страница (/spravochnik/{kind}/{slug}/)
   Артборд: spravochnik-pages.jsx → SpravochnikDetailArtboard (05b)
   Refactor 2026-05-26 (вечер): inline styles → классы для responsive.
   ============================================================ */
.spravochnik-detail { padding: 32px var(--pad-x) 24px; }
.spravochnik-detail__grid {
  display: grid;
  grid-template-columns: auto 1fr; /* левая колонка по ширине картинки */
  gap: 56px;
  align-items: start;
}
/* Когда у записи нет фото — модификатор --placeholder из шаблона.
   align-items: stretch + flex-вариант левой колонки → плейсхолдер на всю высоту правой колонки. */
.spravochnik-detail__grid--placeholder { align-items: stretch; }
.spravochnik-detail__grid--placeholder .spravochnik-detail__left {
  display: flex;
  flex-direction: column;
}
.spravochnik-detail__grid--placeholder .spravochnik-detail__portrait--placeholder {
  flex: 1; /* фактическое растягивание на оставшуюся высоту колонки */
}
.spravochnik-detail__left {
  max-width: 500px; /* ограничение левой колонки */
}
.spravochnik-detail__portrait {
  display: block;
  max-width: 500px;
  /* Без подложки-фона: только сама картинка (или плейсхолдер-буква). */
}
.spravochnik-detail__portrait img {
  display: block;
  max-width: 500px;
  max-height: 500px;
  width: auto;
  height: auto;
  object-fit: contain;
  cursor: zoom-in;
}
/* Плейсхолдер (нет фото) — blank-image.jpg как cover-фон, буква поверх.
   Ширина 500px (как фото-бокс), минимальная высота 300px — чтобы пустая
   заглушка не занимала по вертикали столько же, сколько реальное фото.
   По высоте тянется через flex: 1 в grid--placeholder (под текст справа). */
.spravochnik-detail__portrait--placeholder {
  width: 500px;
  min-height: 300px;
  background: var(--paper-3) url('/assets/img/blank-image.jpg') center / cover no-repeat;
  display: flex; align-items: center; justify-content: center;
}
.spravochnik-detail__initial {
  /* Чуть текст-теневее для контрастности поверх любой заглушки */
  text-shadow: 0 1px 3px rgba(244, 241, 233, 0.6);
}
.spravochnik-detail__initial {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 64px;
  color: var(--ink-3);
}
.spravochnik-detail__meta {
  margin-top: 12px;
  padding: 14px 16px;
  background: var(--paper-2);
  border: 1px solid var(--rule-soft);
}
.spravochnik-detail__meta-label { margin-bottom: 8px; }
.spravochnik-detail__meta-name { font-size: 18px; font-weight: 600; }
.spravochnik-detail__kicker { margin-bottom: 14px; }
.spravochnik-detail__title {
  font-size: 52px;
  font-weight: 300;
  line-height: 1.0;
  letter-spacing: -0.028em;
  margin-bottom: 24px;
}
.spravochnik-detail__subtitle {
  font-family: var(--f-mono);
  font-size: 13px;
  color: var(--ink-2);
  letter-spacing: 0.04em;
  margin-top: -16px; /* поджать к H1 (у title margin-bottom 24px) */
  margin-bottom: 24px;
}
.spravochnik-detail__bio {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-2);
  margin-bottom: 28px;
  text-align: justify;
  hyphens: auto;
}
.spravochnik-detail__bio p {
  margin: 0 0 1em;
}
.spravochnik-detail__bio p:last-child { margin-bottom: 0; }
/* Ссылки в админ-контролируемых prose-блоках — accent (var(--accent)), не дефолтные синие.
   Применяется к bio справочника, тексту статей, тексту истории и about-prose. */
.spravochnik-detail__bio a,
.article-detail__prose a,
.article-page__body a,
.about-prose a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color .15s;
}
.spravochnik-detail__bio a:hover,
.article-detail__prose a:hover,
.article-page__body a:hover,
.about-prose a:hover { color: var(--accent-hi); }
.spravochnik-detail__lots {
  padding: 40px var(--pad-x) 64px;
  border-top: 1px solid var(--ink);
}
.spravochnik-detail__empty { font-size: 15px; color: var(--ink-2); }
.spravochnik-detail__lots-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 28px;
  gap: 16px;
}
.spravochnik-detail__lots-eyebrow { margin-bottom: 8px; }
.spravochnik-detail__lots-title { font-size: 32px; font-weight: 400; }
.spravochnik-detail__lot-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: 16px;
  row-gap: 36px;
}

/* tablet 768–1199: левая auto, фото меньше */
@media (max-width: 1199px) {
  .spravochnik-detail__grid { gap: 32px; }
  .spravochnik-detail__left { max-width: 400px; }
  .spravochnik-detail__portrait { max-width: 400px; }
  .spravochnik-detail__portrait img { max-width: 400px; }
  .spravochnik-detail__portrait--placeholder { width: 400px; min-height: 400px; }
  .spravochnik-detail__title { font-size: 40px; }
  .spravochnik-detail__lot-grid { grid-template-columns: repeat(3, 1fr); }
  /* Нет фото → плейсхолдер занимает место зря, скрываем левую колонку. */
  .spravochnik-detail__grid--placeholder { grid-template-columns: 1fr; }
  .spravochnik-detail__grid--placeholder .spravochnik-detail__left { display: none; }
}

/* mobile ≤767: одна колонка, фото 320, лоты 2 в ряд */
@media (max-width: 767px) {
  .spravochnik-detail { padding: 20px var(--pad-x) 16px; }
  .spravochnik-detail__grid { grid-template-columns: 1fr; gap: 24px; }
  .spravochnik-detail__left { max-width: 320px; margin: 0 auto; }
  .spravochnik-detail__portrait { max-width: 320px; }
  .spravochnik-detail__portrait img { max-width: 320px; }
  .spravochnik-detail__portrait--placeholder { width: 320px; min-height: 320px; }
  /* Mobile: нет фото → плейсхолдер скрыт (унаследовано из tablet, но дублируем
     явно для понятности и устойчивости к изменению порядка правил). */
  .spravochnik-detail__grid--placeholder .spravochnik-detail__left { display: none; }
  .spravochnik-detail__title { font-size: 30px; margin-bottom: 16px; }
  .spravochnik-detail__bio { font-size: 14px; margin-bottom: 20px; }
  .spravochnik-detail__lots { padding: 24px var(--pad-x) 40px; }
  .spravochnik-detail__lots-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
  }
  .spravochnik-detail__lots-title { font-size: 24px; }
  .spravochnik-detail__lot-grid { grid-template-columns: repeat(2, 1fr); column-gap: 10px; row-gap: 22px; }
}

/* ─── Уведомление (корзина/избранное, $store.toast) — компактное, одной строкой ── */
.toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 20px;
  max-width: calc(100vw - 32px);
  background: var(--paper);
  border: 1px solid var(--rule);
  box-shadow: 0 8px 28px rgba(21, 18, 15, 0.16);
  white-space: nowrap;
}
.toast__icon { display: flex; flex-shrink: 0; }
.toast--add .toast__icon { color: var(--ink); }      /* чёрная галочка */
.toast--remove .toast__icon { color: var(--accent); } /* красный крестик */
.toast__text {
  font-family: var(--f-sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.toast__target {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.toast__target:hover { color: var(--accent-hi); }
.toast--enter-active,
.toast--leave-active { transition: opacity .18s ease, transform .18s ease; }
.toast--enter-from,
.toast--leave-to { opacity: 0; transform: translate(-50%, -50%) scale(0.96); }