/* ============================================================
   VisArtis — базовый слой: сброс, типографика, сетка, компоненты
   общей оболочки (шапка, подвал, кнопки, бейджи, карточка).
   Страничные стили живут в css/<страница>.css поверх этого.
   ============================================================ */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--page-white);
  color: var(--ink-black);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Колонка: 1400px при боковом поле 40px — на ноутбуке 1440px остаётся
   по 60px воздуха до рамки окна. Поле сжимается вместе с окном (--gutter). */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

/* --- Типографика: девять ступеней, десятая — ошибка вёрстки ---
   T1 титул 34 · T2 секция 22–27 · T3 подзаголовок 20/600 ·
   T4 имя вещи и деньги 17/600 · B1 16 · B2 15 · L 14.5 · C 13.5 · M 11 */
h1, h2, h3, .serif { font-family: var(--serif); font-weight: 400; }
h1 { font-size: 34px; line-height: 1.15; margin: 0 0 var(--s2); text-wrap: balance; }
h2 { font-size: clamp(22px, 2.4vw, 27px); line-height: 1.2; margin: 0 0 var(--s2); text-wrap: balance; }
h3 { font-size: 20px; line-height: 1.3; font-weight: 600; margin: 0 0 var(--s1); text-wrap: balance; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
/* M — микро-надстрочник: единственный ярус мельче 13px */
.eyebrow {
  font-size: 11px; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-2); font-weight: 500;
}
.muted { color: var(--ink-2); }
.num { font-variant-numeric: tabular-nums; }

/* Музейная этикетка предмета: антиква, живая строка */
.label-museum { font-family: var(--serif); font-size: 20px; line-height: 1.35; }
.label-museum .who { font-weight: 600; }
.label-museum .meta { color: var(--ink-2); font-size: 16px; }

.price {
  font-family: var(--serif); font-size: 17px; font-weight: 600;
  color: var(--ink-black); font-variant-numeric: tabular-nums;
}

/* --- Кнопки: три ступени, и только три ---
   основная (заливка акцентом) · вторичная (рамка акцентом) · тихая (текст) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 22px;
  border: 1px solid transparent; border-radius: var(--r-control);
  font-weight: 500; font-size: 15px;
  transition: background .25s var(--ease), border-color .25s, color .25s, transform .1s;
}
.btn-primary, .btn-bronze { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover, .btn-bronze:hover { background: var(--accent-dark); color: var(--on-accent); }
.btn-ghost { border-color: var(--accent); color: var(--accent); background: transparent; }
.btn-ghost:hover { border-color: var(--accent-dark); color: var(--accent-dark); background: var(--accent-bg); }
.btn-quiet { color: var(--ink-2); background: transparent; min-height: 40px; }
.btn-quiet:hover { color: var(--accent); }
/* Единственный размерный модификатор: кнопка в строке таблицы или карточки.
   Рост тот же, что у тихой ступени (40px), — чтобы в ряду действий
   не встречались две высоты. Жил порознь в keeper.css и cab-sell.css
   одинаковыми копиями; канон один и лежит здесь. */
.btn-sm { min-height: 40px; padding: 0 14px; font-size: 15px; }
.btn-danger { background: transparent; border-color: var(--warn); color: var(--warn); }
.btn-danger:hover { background: var(--warn); color: #FFF; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"], .btn.is-disabled {
  background: var(--surface-2); border-color: transparent;
  color: var(--ink-3); cursor: not-allowed; transform: none;
}

/* --- Бейджи: один рецепт, меняется только цветовая пара --- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px;
  font-size: 12.5px; font-weight: 500; letter-spacing: .02em;
  border: 1px solid transparent; border-radius: var(--r-control);
  background: var(--accent-bg); color: var(--accent-dark);
}
.badge--verified::before { content: '✓'; }
.badge--auction { background: var(--accent-bg); color: var(--accent-dark); }
.badge--sold, .badge--muted { background: var(--surface-2); color: var(--ink-2); }
.badge--ok { background: var(--ok-bg); color: var(--ok); }
.badge--warn { background: var(--warn-bg); color: var(--warn); }
.badge--timer { background: transparent; border-color: var(--warn); color: var(--warn); }

/* --- Карточка предмета в выдаче ---
   `.item-card` — переходный псевдоним канонической `.mcard`: та же
   оболочка (прозрачная, без рамки и тени, фото 6px), чтобы страницы,
   которые ещё рисуют старую разметку, выглядели как главная. */
.item-card { display: block; background: transparent; border: 0; box-shadow: none; }
.item-card__photo {
  display: block;
  aspect-ratio: 4 / 5;
  background: var(--photo);
  border: 0;
  border-radius: var(--r-photo);
  box-shadow: none;
  overflow: hidden;
  position: relative;
}
.item-card__photo img {
  width: 100%; height: 100%; object-fit: cover;
  transition: opacity .35s var(--ease);
}
.item-card__photo .alt { position: absolute; inset: 0; opacity: 0; }
.item-card:hover .alt { opacity: 1; }
.item-card__badges { position: absolute; top: 10px; right: 10px; display: flex; gap: 6px; z-index: 3; }
.item-card__body { display: block; padding: 10px 2px 0; }
/* Строка автора ломала выравнивание цен в ряду (ступеньки 22 и 44px).
   Автор живёт на странице лота, а не в выдаче. */
.item-card__who { display: none; }
.item-card__title {
  font-family: var(--serif); font-size: 17px; line-height: 1.3; font-weight: 600;
  color: var(--ink-black);
  margin: 0 0 4px; min-height: 44px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.item-card__dims { display: block; font-size: 13.5px; color: var(--ink-2); }
.item-card__price {
  display: block; margin-top: 2px;
  font-family: var(--serif); font-size: 17px; font-weight: 600;
  color: var(--ink-black); font-variant-numeric: tabular-nums;
}
.item-card__price .per { font-size: 12.5px; color: var(--ink-2); font-family: var(--sans); font-weight: 400; }

/* Сетка выдачи: 4 / 3 / 2 */
.items-grid { display: grid; gap: var(--s4) var(--s3); grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .items-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .items-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s3) var(--s2); } }

/* --- Шапка --- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.site-header__row {
  display: flex; align-items: center; gap: var(--s3);
  min-height: 64px;
}
.logo { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.logo svg { height: 30px; width: auto; }
.logo b { font-family: var(--serif); font-weight: 700; font-size: 21px; letter-spacing: .01em; }

.search {
  flex: 1 1 auto; max-width: 560px; position: relative;
}
.search input {
  width: 100%; min-height: 44px;
  padding: 0 44px 0 16px;
  border: 1px solid var(--line-strong); border-radius: var(--r-control);
  background: var(--page-white); color: var(--ink-black);
  font: inherit; font-size: 15px;
}
.search input::placeholder { color: var(--ink-3); }
.search input:focus { outline: none; border-color: var(--accent); }
.search__go {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  border: 0; background: none; padding: 8px; color: var(--ink-2);
}
.site-header__nav { display: flex; gap: var(--s3); margin-left: auto; align-items: center; }
.site-header__nav a { font-size: 15px; color: var(--ink-2); }
.site-header__nav a:hover, .site-header__nav a[aria-current] { color: var(--ink); }

/* Мобильная шапка: логотип и навигация в первом ряду, поиск — вторым рядом.
   Без этого ряд не переносился и растягивал каждую страницу до ~590px. */
@media (max-width: 760px) {
  .site-header__row { flex-wrap: wrap; padding: 10px 0; row-gap: 8px; }
  /* order — только для старого ряда: в шапке v2 (.hdr-row) он уводил
     логотип в конец нескладываемого ряда и растягивал страницу вбок */
  .site-header__row .logo { order: 1; }
  .logo svg { height: 24px; }
  .logo b { font-size: 17px; }
  .site-header__nav {
    order: 2; min-width: 0; gap: 10px;
    overflow-x: auto; scrollbar-width: none;
  }
  .site-header__nav::-webkit-scrollbar { display: none; }
  .site-header__nav a { font-size: 13.5px; white-space: nowrap; }
  .search { order: 3; flex: 1 1 100%; max-width: none; }
  .search input { min-height: 40px; }
}

/* Ряд категорий-медальонов под шапкой */
.cat-strip {
  display: flex; gap: var(--s3);
  overflow-x: auto; scrollbar-width: none;
  padding: 10px 0 12px;
}
.cat-strip::-webkit-scrollbar { display: none; }
.cat-strip a {
  flex: 0 0 auto; text-align: center; width: 76px;
  font-size: 12px; color: var(--ink-2); line-height: 1.25;
}
.cat-strip a:hover { color: var(--accent-dark); }
.cat-strip img {
  width: 52px; height: 52px; margin: 0 auto 6px; border-radius: 50%;
  transition: transform .25s var(--ease);
}
.cat-strip a:hover img { transform: scale(1.08); }

/* --- Полоса обещания --- */
.promise {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--surface-1);
}
.promise__row {
  display: flex; flex-wrap: wrap; gap: 10px 36px;
  padding: 14px 0; font-size: 13.5px; color: var(--ink-2);
  justify-content: center;
}
.promise__row b { color: var(--accent); font-weight: 500; }

/* --- Подвал: страница открывается серым шапки и закрывается его
   светлым родственником; тёплого хвоста чужой гаммы больше нет --- */
.site-footer {
  margin-top: var(--s12);
  border-top: 1px solid var(--line);
  background: var(--surface-1);
  padding: var(--s6) 0 var(--s8);
  color: var(--ink-2); font-size: 13.5px;
}
.site-footer__cols { display: flex; flex-wrap: wrap; gap: var(--s6); justify-content: space-between; }
.site-footer h4 { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-black); margin: 0 0 12px; }
.site-footer li { margin-bottom: 8px; list-style: none; }
.site-footer ul { margin: 0; padding: 0; }
.site-footer a:hover { color: var(--accent); }
/* Один знак не может быть двух цветов на одной странице:
   логотип подвала — тот же акцент, что и в шапке. */
.site-footer .logo, .site-footer .logo b { color: var(--accent); }

/* Клеймо создателей — монохромное клеймо, цвет только под курсором */
.makers { display: inline-flex; align-items: center; gap: 10px; opacity: .55; transition: opacity .4s; }
.makers:hover { opacity: 1; }
.makers img { filter: grayscale(1); opacity: .8; transition: filter .4s, opacity .4s; }
.makers:hover img { filter: grayscale(1); opacity: 1; }
.makers__word { font-size: 11px; font-weight: 500; letter-spacing: .08em; opacity: 0; transition: opacity .4s; }
.makers:hover .makers__word { opacity: 1; }

/* --- Скелетоны --- */
.skeleton { background: var(--surface-2); border-radius: var(--r-control); animation: sk 1.4s ease-in-out infinite; }
@keyframes sk { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Широкое содержимое прокручивается само, страница вбок не едет */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ============================================================
   Тема: монета день/ночь и волна перехода
   ============================================================ */

.theme-coin {
  width: 38px; height: 38px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-round);
  background: var(--page-white);
  padding: 0;
  perspective: 220px;
  flex: 0 0 auto;
  transition: border-color .25s var(--ease);
}
.theme-coin__disc {
  display: block; width: 100%; height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform .62s cubic-bezier(.3, .7, .2, 1);
  border-radius: 50%;
}
.theme-coin.is-night .theme-coin__disc { transform: rotateY(180deg); }
.theme-coin__face {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  backface-visibility: hidden;
  border-radius: var(--r-round);
  color: var(--accent);
}
.theme-coin__face svg { width: 20px; height: 20px; }
.theme-coin__face--moon { transform: rotateY(180deg); color: var(--accent); }
.theme-coin:hover { border-color: var(--accent); }

/* Волна: новый вид раскрывается кругом от монеты (клип задаёт скрипт),
   старый просто стоит под ним — без встречного затухания */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 2; }

/* Запасной путь без View Transitions: мягкий перекрёстный переход */
html.theme-anim, html.theme-anim body,
html.theme-anim .site-header, html.theme-anim .site-footer,
html.theme-anim .item-card__photo, html.theme-anim .promise {
  transition: background-color .5s ease, color .5s ease, border-color .5s ease;
}

/* ============================================================
   Полотно плоское.
   Прежний «объём» — три фиксированных радиала с зерном бумаги на
   body и инсет-подсветка на фотографиях — снят целиком. На белом
   полотне заказчика он читался не как свет зала, а как грязь:
   реальные пиксели одного экрана расходились на 22 уровня яркости
   и меняли тон с тёплого песка на холодный серый. Объект теперь
   отделяется от фона рамкой или заливкой панели, а не тенью.
   ============================================================ */

/* Фотозона предмета — ровная плашка, единственный носитель цвета
   в карточке — сама фотография */
.item-card__photo, .photo-stage { background-color: var(--photo); background-image: none; }

/* Шапка отбрасывает дыхание тени только когда страница прокручена */
.site-header { transition: box-shadow .3s var(--ease); }
.site-header.is-scrolled { box-shadow: var(--shadow-hdr); }

/* ============================================================
   Правки заказчика: светло-серая шапка с фиолетом, каталог-меню
   с цветными значками, сердечки-лайки, карточка без рамки,
   пастельные категории. Образцы — Catawiki из документа.
   ============================================================ */

/* --- Шапка v2 --- */
.site-header { background: var(--header-bg); border-bottom: 1px solid var(--line); }
.hdr-top { position: relative; }
.hdr-row { display: flex; align-items: center; gap: var(--s2); min-height: 62px; }
.logo { color: var(--accent); }
.logo__word { display: flex; flex-direction: column; line-height: 1.1; }
.logo__word b { font-family: var(--serif); font-weight: 700; font-size: 21px; color: var(--accent); }
.logo__word i { font-style: normal; font-size: 11px; font-weight: 500; color: var(--ink-2); letter-spacing: .02em; }

.hdr-cat {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 42px; padding: 0 16px;
  border: 1px solid var(--accent); border-radius: var(--r-control);
  background: transparent; color: var(--accent); font-size: 15px; font-weight: 500;
  transition: background .25s var(--ease), color .25s;
}
.hdr-cat:hover, .hdr-cat[aria-expanded="true"] { background: var(--accent); color: var(--on-accent); }
.hdr-spacer { flex: 1 1 auto; }
.hdr-ico {
  display: inline-flex; align-items: center; gap: 7px;
  min-width: 40px; min-height: 40px; padding: 0 6px;
  justify-content: center; border: 0; background: none;
  color: var(--accent); font-size: 15px;
}
.hdr-ico:hover { color: var(--accent-dark); }
.hdr-user span { color: var(--accent); }

/* --- Меню пользователя: один кабинет на покупки и продажи --- */
.hdr-you { position: relative; }
.hdr-user.is-open { color: var(--accent-dark); }

.hdr-you__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 70;
  min-width: 232px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  background: var(--card);
  box-shadow: var(--shadow-pop);
}

.hdr-you__link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: var(--r-control);
  background: none;
  color: var(--ink-black);
  font: inherit;
  font-size: 15px;
  text-align: left;
  white-space: nowrap;
}
.hdr-you__link:hover { background: var(--accent-bg); color: var(--accent-dark); }

.hdr-you__sum { margin-left: auto; font-weight: 600; color: var(--accent-dark); }

.hdr-you__out {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  border-radius: 0;
  color: var(--ink-2);
}
.hdr-you__out:hover { background: none; color: var(--warn); }

.hdr-search { border-top: 1px solid var(--line); background: var(--header-bg); }
.hdr-search form { display: flex; gap: 10px; padding: 12px var(--s3); }
.hdr-search input {
  flex: 1; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--accent); border-radius: var(--r-control);
  background: var(--card); color: var(--ink); font: inherit;
}

/* Выпадающий каталог с цветными значками */
.hdr-menu {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--card); border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-pop);
  z-index: 60;
}
.hdr-menu__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 2px 28px; padding: 18px var(--s3) 22px;
}
.hdr-menu__item {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 10px; border-radius: var(--r-control);
  font-size: 15px; color: var(--ink-black);
}
.hdr-menu__item:hover { background: var(--accent-bg); color: var(--accent-dark); }
.hdr-menu__item > svg { margin-left: auto; color: var(--ink-3); }
.hdr-menu__badge {
  width: 36px; height: 36px; border-radius: var(--r-panel);
  display: grid; place-items: center; flex: 0 0 auto;
}

/* Ряд категорий со значками фиолетом */
.hdr-cats { background: var(--header-bg); border-bottom: 1px solid var(--line); }
.hdr-cats__wrap { display: flex; align-items: center; gap: 6px; position: relative; }
/* Закон §3.7: у ленты шире контейнера три признака прокрутки — затухание
   48px у правого края, кружок-стрелка и scroll-snap. Без затухания ряд
   рубил название посередине слова вплотную к стрелке; это читалось не как
   «дальше есть ещё», а как брак вёрстки. Кружок 34px + зазор 6px = 40px. */
.hdr-cats__wrap::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: 40px;
  width: 48px; pointer-events: none;
  background: linear-gradient(to right, transparent, var(--header-bg));
}
.cat-row {
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
  padding: 6px 0; flex: 1 1 auto; min-width: 0;
  scroll-snap-type: x proximity; scroll-padding-left: 2px;
}
.cat-row::-webkit-scrollbar { display: none; }
.cat-row a {
  display: inline-flex; align-items: center; gap: 7px;
  flex: 0 0 auto; padding: 7px 12px; border-radius: var(--r-control);
  font-size: 13.5px; color: var(--accent); white-space: nowrap;
  scroll-snap-align: start;
}
.cat-row a:hover { background: var(--accent-bg); color: var(--accent-dark); }
.cat-row__more {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: var(--r-round);
  border: 1px solid var(--line-strong); background: var(--page-white); color: var(--accent);
  display: grid; place-items: center;
}
.cat-row__more:hover { border-color: var(--accent); }

/* --- Сердечко-лайк: белый кружок, фиолетовая окантовка.
   Единственное, что двигается при наведении на карточку. --- */
.like {
  position: absolute; top: 10px; left: 10px; z-index: 3;
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 34px; min-width: 34px; padding: 0 9px;
  border: 0; border-radius: var(--r-pill);
  background: var(--page-white); color: var(--accent);
  box-shadow: var(--shadow-lift);
  transition: transform .2s var(--ease);
}
.like:hover { transform: scale(1.08); }
.like.is-liked svg { fill: var(--accent); }
.like__n { font-size: 13px; color: var(--ink-black); }
html[data-theme="dark"] .like { background: var(--surface-2); }

/* ============================================================
   КАНОНИЧЕСКАЯ КАРТОЧКА ПРЕДМЕТА — одна на весь сайт.
   Оболочка неизменна везде: главная, каталог, лента лота,
   аукционы, избранное, кабинет.
     · немая карточка — фото + сердечко + цена (главная);
     · подписанная — фото + сердечко + имя + цена (выдача, поиск).
   ============================================================ */
.mcard { display: block; background: transparent; border: 0; box-shadow: none; }
.mcard__photo {
  display: block; position: relative;
  aspect-ratio: 4 / 5; border-radius: var(--r-photo); overflow: hidden;
  background: var(--photo); border: 0; box-shadow: none;
}
.mcard__photo img { width: 100%; height: 100%; object-fit: cover; }
.mcard__badges { position: absolute; top: 10px; right: 10px; z-index: 3; display: flex; gap: 6px; }
.mcard__body { display: block; padding: 10px 2px 0; }
.mcard__title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-family: var(--serif); font-size: 17px; line-height: 1.3; font-weight: 600;
  color: var(--ink-black);
  margin: 0 0 4px; min-height: 44px;   /* фиксирует базовую линию цены в ряду */
}
.mcard__price {
  display: block; padding: 10px 2px 0; font-size: 17px;
  color: var(--ink-black);
}
.mcard__body .mcard__price { padding-top: 0; }
.mcard__bid {
  display: block; font-size: 11px; font-weight: 500; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-2);
}

/* --- Пастельная карточка категории с полукруглым фото --- */
.pastel-card {
  position: relative; display: block;
  border-radius: var(--r-panel); overflow: hidden;
  aspect-ratio: 3 / 4;
  padding: 20px;
}
.pastel-card__photo {
  position: absolute; top: 12%; right: -18%;
  width: 68%; aspect-ratio: 1 / 1; border-radius: var(--r-round);
  overflow: hidden; background: var(--surface-2);
}
.pastel-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.pastel-card__name {
  position: absolute; left: 20px; bottom: 20px; right: 20px;
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(18px, 1.8vw, 24px); line-height: 1.15;
  color: #1B1B1B;
}
.pastel-card:hover .pastel-card__photo { transform: scale(1.04); }
.pastel-card__photo { transition: transform .3s var(--ease); }

/* Тёмная тема: пастель зашита в разметку хардкодом и темы не читает —
   иначе семь светящихся прямоугольников на чёрной странице (12.6%
   пикселей ярче 200). Гасим саму плитку слоем полотна на 78%,
   ровно как в законе (color-mix(--pastel 22%, полотно)); фотография
   лежит выше слоя и остаётся в полную силу. */
html[data-theme="dark"] .pastel-card::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: color-mix(in srgb, var(--page-white) 78%, transparent);
  pointer-events: none;
}
html[data-theme="dark"] .pastel-card__name { color: var(--ink-black); }

/* Ссылка-переход «Посмотреть всё» — единственная форма на сайте */
.see-all {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--accent); font-size: 14.5px; font-weight: 500; line-height: 1.6;
}
.see-all:hover { color: var(--accent-dark); }
.see-all::after { content: '→'; }

@media (max-width: 900px) {
  .hdr-menu__grid { grid-template-columns: 1fr; max-height: 70vh; overflow-y: auto; }
  .logo__word i { display: none; }
  /* «Каталог» в кнопке — текстовый узел, не span: прячем через font-size,
     значки-svg держат размер атрибутами и остаются видимыми */
  .hdr-cat { font-size: 0; gap: 6px; }
}

/* Узкая шапка v2: ряд не переносится, поэтому ужимаем состав —
   подпись кабинета прячем, зазоры и отступы меньше. Без этого
   ряд выталкивался за 375px и страница скроллилась вбок. */
@media (max-width: 760px) {
  .hdr-row { gap: 6px; }
  .hdr-user span { display: none; }
  .hdr-ico { min-width: 36px; padding: 0 2px; }
  .hdr-cat { padding: 0 10px; }
  .hdr-cat svg:last-child { display: none; }  /* стрелка меню лишняя в тесноте */
  .logo { gap: 8px; }
  .logo__word b { font-size: 17px; }
}

/* ============================================================
   ОБЩИЕ КОМПОНЕНТЫ, ВЫВЕДЕННЫЕ С ГЛАВНОЙ.
   Ниже — то, что раньше жило только в home.css и потому не
   доставалось внутренним страницам. Значения канонические;
   home.css грузится позже и ничего здесь не ломает.
   ============================================================ */

/* --- Секция и её шапка: единственная форма заголовка раздела --- */
.hs { margin: var(--gap-section) 0; }
.hs__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s2); margin-bottom: 20px;
}
.hs__title {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(22px, 2.4vw, 27px); line-height: 1.2;
  color: var(--ink-black); margin: 0; text-wrap: balance;
}
.hs__ico { color: var(--accent); display: inline-flex; }
/* Две сетки, образующие один смысловой блок (эталонные «Топ-лоты»
   под «Подборкой»), сдвигаются модификатором, а не полем на глаз */
.hs--joined, .hs--tight { margin-top: -20px; }

/* --- Блок титула страницы: 34px, лид 62ch, шаг 40 / 12 / 56 --- */
.page-title { margin: var(--s5) 0 0; }
.page-lead {
  margin: 12px 0 0; max-width: 62ch;
  font-size: 16px; line-height: 1.6; color: var(--ink-2);
}
.page-title + .hs, .page-lead + .hs { margin-top: var(--gap-section); }

/* --- Прилипающие панели считают от высоты шапки, а не от числа ---
   Канон --header-h = 112px (ряд 62 + категории 50). Пока ряд
   категорий не вернули на все страницы, токен исправляет себя сам:
   там, где .hdr-cats в разметке нет (админка и зал торгов — законные
   исключения; остальные — недоделка), шапка ровно 63px, и липкие
   панели не уезжают ни под шапку, ни в зазор. */
body:not(:has(.hdr-cats)) { --header-h: 63px; }
.sticky-panel { position: sticky; top: calc(var(--header-h) + var(--s3)); }

/* ============================================================
   ПОЛЯ ВВОДА — общий пол системы.
   Правила намеренно бесспорные (:where — нулевая значимость):
   страничный css перекрывает их одним классом, но там, где поле
   никто не оформил, оно всё равно выглядит по канону.
   ============================================================ */
:where(input[type="text"], input[type="search"], input[type="email"],
       input[type="password"], input[type="tel"], input[type="url"],
       input[type="number"], input[type="date"], input[type="datetime-local"],
       input[type="time"], input:not([type]), select, textarea) {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-control);
  background: var(--page-white);
  color: var(--ink-black);
  font-family: var(--sans); font-size: 15px; line-height: 1.4;
}
:where(textarea) { padding: 10px 14px; line-height: 1.55; resize: vertical; }
:where(input, select, textarea):focus { border-color: var(--accent); }
::placeholder { color: var(--ink-3); opacity: 1; }

/* Селект рисует собственный шеврон: нативная стрелка Chrome была
   единственным системным элементом на витрине. Значимость (0,2,1)
   выбрана нарочно — выше типовых `.fld select`, чтобы страничная
   заливка не стирала шеврон вместе с фоном. */
select:not([multiple]):not([size]) {
  -webkit-appearance: none; appearance: none;
  min-height: 44px;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 4.5 L6 8 L9.5 4.5' stroke='%2363606B' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 12px;
}
html[data-theme="dark"] select:not([multiple]):not([size]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 4.5 L6 8 L9.5 4.5' stroke='%23A9A4B4' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Подписи и подсказки поля: ярус C, вторичный, а не третичный */
:where(.field) { display: block; }
:where(.field > label, .field__label) {
  display: block; margin-bottom: 6px;
  font-size: 13.5px; line-height: 1.45; color: var(--ink-2);
}
:where(.field__hint) { display: block; margin-top: 6px; font-size: 13.5px; color: var(--ink-2); }
:where(.field__err) { display: block; margin-top: 6px; font-size: 13.5px; color: var(--warn); }
:where(.field.is-error input, .field.is-error select, .field.is-error textarea) { border-color: var(--warn); }

/* ============================================================
   ТЁМНАЯ ТЕМА — страховка закона: любая заливка --accent берёт
   текст из --on-accent. Белый на светло-сиреневом #A99CCB даёт
   2.53:1 и нечитаем; --on-accent даёт 7.18:1.
   ============================================================ */
html[data-theme="dark"] .promo-phrase,
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .btn-bronze { color: var(--on-accent); }

/* Подписка на продавца — рядом с отзывами в блоке продавца */
.follow {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 36px; padding: 0 14px;
  border: 1px solid var(--accent); border-radius: var(--r-control);
  background: transparent; color: var(--accent);
  font-size: 14px; font-weight: 500;
  transition: background .25s var(--ease), color .25s;
}
.follow:hover { background: var(--accent-bg); }
.follow .follow__check { opacity: 0; }
.follow.is-on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.follow.is-on .follow__plus { opacity: 0; }
.follow.is-on .follow__check { opacity: 1; }

/* Непрочитанное в шапке. Точка на кнопке кабинета — снаружи, без числа:
   заказчица писала, что о входящих не узнать, не открыв меню. Снаружи важно
   «есть или нет», а сколько и чего — уже в самом меню. */
.hdr-you__n {
  margin-left: auto;
  min-width: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  font-weight: 600;
}
#navUser.has-unread { position: relative; }
#navUser.has-unread::after {
  content: '';
  position: absolute;
  top: 2px; right: 2px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--page-white);
}

/* --- Прежняя цена рядом со скидкой ---------------------------------------
   Зачёркнутая и тише новой: она объясняет уступку, но не спорит с ценником,
   который человек платит. Цифры табличные, чтобы в ленте числа не плясали. */
.price-was {
  color: var(--ink-3); font-size: .86em; text-decoration: line-through;
  font-variant-numeric: tabular-nums; margin-left: 2px;
}
.price-off {
  color: var(--accent); font-size: .82em; letter-spacing: .01em; white-space: nowrap;
}