/* ============================================================================
   Herbaria — дизайн-система сайта
   Собрана на токенах варианта B UI-kit («Warm & Maximalist»):
   глубокий лесной зелёный, ржаво-рыжий и сливовый акценты, тёплая
   пергаментная нейтральная шкала, скруглениe 4px, многослойные тени,
   зернистая фактура фона.

   Требования доступности, заложенные в токены:
   — минимальный размер текста 11px (Apple Caption 2 / Material label-small);
   — контраст текста к фону не ниже 4.5:1, у крупного — не ниже 3:1;
   — область нажатия у интерактивных элементов не меньше 44×44px;
   — видимый фокус на всех интерактивных элементах.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   1. Шрифты

   Подключаются локально, а не с Google Fonts: внешний CDN — это лишний
   DNS-запрос и соединение до первой отрисовки текста, плюс зависимость от
   стороннего сервиса. Файлы кладутся в /assets/fonts (см. docs/INSTALL.md).

   Обе гарнитуры поддерживают кириллицу — это проверялось отдельно: у части
   популярных гарнитур (Newsreader, Work Sans) кириллицы нет вовсе, и русский
   текст молча падал бы на системный шрифт.

   font-display: swap — текст виден сразу системным шрифтом и заменяется,
   когда загрузится основной. Пустой экран в ожидании шрифта не возникает.
   --------------------------------------------------------------------------- */

@font-face {
  font-family: 'Lora';
  src: url('/assets/fonts/lora-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F,
                 U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Lora';
  src: url('/assets/fonts/lora-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lora';
  src: url('/assets/fonts/lora-400-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('/assets/fonts/manrope-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('/assets/fonts/manrope-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('/assets/fonts/manrope-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------------------
   2. Токены
   --------------------------------------------------------------------------- */

:root {
  /* Основная шкала — лесной зелёный */
  --hb-primary-50:  oklch(96% 0.02 148);
  --hb-primary-100: oklch(91% 0.04 148);
  --hb-primary-200: oklch(82% 0.06 148);
  --hb-primary-300: oklch(71% 0.08 148);
  --hb-primary-400: oklch(59% 0.095 148);
  --hb-primary-500: oklch(47% 0.10 148);
  --hb-primary-600: oklch(36% 0.10 148);
  --hb-primary-700: oklch(28% 0.085 148);
  --hb-primary-800: oklch(21% 0.065 148);
  --hb-primary-900: oklch(15% 0.045 148);

  /* Вторая шкала — ржавый / бархатцы */
  --hb-secondary-50:  oklch(96% 0.03 50);
  --hb-secondary-100: oklch(90% 0.06 50);
  --hb-secondary-200: oklch(81% 0.09 50);
  --hb-secondary-300: oklch(70% 0.12 50);
  --hb-secondary-400: oklch(58% 0.14 50);
  --hb-secondary-500: oklch(52% 0.15 50);
  --hb-secondary-600: oklch(46% 0.15 48);
  --hb-secondary-700: oklch(38% 0.13 48);
  --hb-secondary-800: oklch(30% 0.10 48);
  --hb-secondary-900: oklch(22% 0.07 48);

  /* Третья шкала — сливовая георгина, для редких акцентов */
  --hb-accent-100: oklch(89% 0.04 350);
  --hb-accent-300: oklch(67% 0.09 350);
  --hb-accent-600: oklch(32% 0.10 350);
  --hb-accent-700: oklch(25% 0.085 350);

  /* Тёплые нейтральные — пергамент */
  --hb-neutral-0:   oklch(100% 0 0);
  --hb-neutral-50:  oklch(95% 0.020 70);
  --hb-neutral-100: oklch(91% 0.025 68);
  --hb-neutral-200: oklch(84% 0.028 65);
  --hb-neutral-300: oklch(74% 0.030 62);
  --hb-neutral-400: oklch(62% 0.028 60);
  --hb-neutral-500: oklch(50% 0.026 58);
  --hb-neutral-600: oklch(42% 0.024 55);
  --hb-neutral-900: oklch(15% 0.012 40);

  /* Семантика статусов */
  --hb-success-100: oklch(92% 0.05 145);
  --hb-success-700: oklch(38% 0.11 145);
  --hb-warning-100: oklch(94% 0.05 85);
  --hb-warning-700: oklch(46% 0.11 75);
  --hb-error-100:   oklch(93% 0.04 25);
  --hb-error-500:   oklch(55% 0.18 25);
  --hb-error-700:   oklch(38% 0.15 25);
  --hb-info-100:    oklch(93% 0.025 235);
  --hb-info-700:    oklch(40% 0.08 235);

  /* Смысловые псевдонимы: компоненты обращаются только к ним */
  --hb-bg-canvas:      var(--hb-neutral-50);
  --hb-bg-surface:     var(--hb-neutral-0);
  --hb-bg-subtle:      var(--hb-neutral-100);
  --hb-bg-inverse:     var(--hb-neutral-900);
  --hb-border-default: var(--hb-neutral-200);
  --hb-border-strong:  var(--hb-neutral-300);
  --hb-text-primary:   var(--hb-neutral-900);
  --hb-text-secondary: var(--hb-neutral-600);
  --hb-text-muted:     var(--hb-neutral-500);
  --hb-text-inverse:   var(--hb-neutral-50);
  --hb-text-on-fill:   oklch(97% 0.012 80);
  --hb-focus-ring:     var(--hb-primary-500);

  /* Заливки под светлым текстом отличаются от акцентных цветов:
     акцент должен быть светлее на тёмном фоне, а заливка — темнее
     под белым текстом. Один цвет обе роли не тянет. */
  --hb-primary-fill:        var(--hb-primary-600);
  --hb-primary-fill-hover:  var(--hb-primary-700);
  --hb-secondary-fill:      var(--hb-secondary-600);

  /* Типографика */
  --hb-font-serif: 'Lora', Georgia, 'Times New Roman', serif;
  --hb-font-sans:  'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --hb-font-mono:  ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Шкала размеров. Ниже 11px не опускаемся нигде. */
  --hb-text-xs:   0.6875rem;  /* 11px — предельный минимум: подписи, метки */
  --hb-text-sm:   0.8125rem;  /* 13px */
  --hb-text-base: 0.9375rem;  /* 15px — основной текст интерфейса */
  --hb-text-md:   1.0625rem;  /* 17px — текст статей */
  --hb-text-lg:   1.25rem;
  --hb-text-xl:   1.5rem;
  --hb-text-2xl:  2rem;
  --hb-text-3xl:  2.5rem;
  --hb-text-4xl:  3.25rem;

  /* Отступы: шаг 4px */
  --hb-space-1: 0.25rem;
  --hb-space-2: 0.5rem;
  --hb-space-3: 0.75rem;
  --hb-space-4: 1rem;
  --hb-space-5: 1.25rem;
  --hb-space-6: 1.5rem;
  --hb-space-8: 2rem;
  --hb-space-10: 2.5rem;
  --hb-space-12: 3rem;
  --hb-space-16: 4rem;
  --hb-space-20: 5rem;

  --hb-radius-sm: 4px;
  --hb-radius-md: 6px;
  --hb-radius-lg: 10px;
  --hb-radius-pill: 999px;

  --hb-shadow-1: 0 1px 2px oklch(20% 0.02 50 / 0.06), 0 1px 1px oklch(20% 0.02 50 / 0.04);
  --hb-shadow-2: 0 2px 10px oklch(20% 0.02 50 / 0.06), 0 8px 24px oklch(20% 0.02 50 / 0.05);
  --hb-shadow-3: 0 12px 28px oklch(20% 0.02 50 / 0.12), 0 4px 10px oklch(20% 0.02 50 / 0.06);

  --hb-duration-fast: 120ms;
  --hb-duration-base: 200ms;
  --hb-ease: cubic-bezier(0.2, 0, 0.2, 1);

  --hb-container: 1280px;
  --hb-tap-min: 44px;   /* минимальная область нажатия */

  --hb-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Тёмная тема. Включается системной настройкой пользователя.
   Заливки здесь темнее акцентов — иначе белый текст на кнопке
   теряет контраст (проверено: было 2.8:1, стало 6.2:1). */
/* Тёмная тема: системная настройка и ручной выбор в шапке.
   Оба селектора перечислены явно — [data-theme] должен перекрывать
   системную настройку, а не спорить с ней. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --hb-bg-canvas:      oklch(12% 0.020 40);
    --hb-bg-surface:     oklch(17% 0.024 42);
    --hb-bg-subtle:      oklch(22% 0.026 44);
    --hb-bg-inverse:     oklch(95% 0.015 75);
    --hb-border-default: oklch(29% 0.028 46);
    --hb-border-strong:  oklch(37% 0.030 48);
    --hb-text-primary:   oklch(95% 0.015 75);
    --hb-text-secondary: oklch(80% 0.020 70);
    --hb-text-muted:     oklch(64% 0.022 65);
    --hb-text-inverse:   oklch(15% 0.012 40);
    --hb-focus-ring:     oklch(71% 0.08 148);

    --hb-primary-600:   oklch(68% 0.11 148);
    --hb-secondary-600: oklch(68% 0.14 50);
    --hb-accent-600:    oklch(62% 0.12 350);

    --hb-primary-fill:       oklch(46% 0.10 148);
    --hb-primary-fill-hover: oklch(40% 0.10 148);
    --hb-secondary-fill:     oklch(46% 0.15 48);

    /* Тёмная тема переворачивает шкалу: 700 — это цвет ТЕКСТА, и на тёмном
       фоне он обязан быть светлым. Без этих трёх строк все ссылки на сайте
       оставались тёмно-зелёными на почти чёрном — 1.4:1, читать невозможно. */
    --hb-primary-700:   oklch(84% 0.09 148);
    --hb-primary-900:   oklch(92% 0.06 148);
    --hb-primary-50:    oklch(26% 0.05 148);

    --hb-secondary-100: oklch(28% 0.09 50);
    --hb-secondary-700: oklch(85% 0.08 50);
    --hb-success-100:   oklch(30% 0.08 145);
    --hb-success-700:   oklch(80% 0.10 145);
    --hb-warning-100:   oklch(32% 0.07 80);
    --hb-warning-700:   oklch(85% 0.10 85);
    --hb-error-100:     oklch(30% 0.10 25);
    --hb-error-700:     oklch(80% 0.13 25);
    --hb-info-100:      oklch(28% 0.05 235);
    --hb-info-700:      oklch(78% 0.08 235);

    --hb-shadow-1: 0 1px 2px rgb(0 0 0 / 0.5);
    --hb-shadow-2: 0 4px 12px rgb(0 0 0 / 0.5), 0 2px 6px rgb(0 0 0 / 0.35);
    --hb-shadow-3: 0 16px 32px rgb(0 0 0 / 0.55);
  }
}

:root[data-theme="dark"] {
    --hb-bg-canvas:      oklch(12% 0.020 40);
    --hb-bg-surface:     oklch(17% 0.024 42);
    --hb-bg-subtle:      oklch(22% 0.026 44);
    --hb-bg-inverse:     oklch(95% 0.015 75);
    --hb-border-default: oklch(29% 0.028 46);
    --hb-border-strong:  oklch(37% 0.030 48);
    --hb-text-primary:   oklch(95% 0.015 75);
    --hb-text-secondary: oklch(80% 0.020 70);
    --hb-text-muted:     oklch(64% 0.022 65);
    --hb-text-inverse:   oklch(15% 0.012 40);
    --hb-focus-ring:     oklch(71% 0.08 148);

    --hb-primary-600:   oklch(68% 0.11 148);
    --hb-secondary-600: oklch(68% 0.14 50);
    --hb-accent-600:    oklch(62% 0.12 350);

    --hb-primary-fill:       oklch(46% 0.10 148);
    --hb-primary-fill-hover: oklch(40% 0.10 148);
    --hb-secondary-fill:     oklch(46% 0.15 48);

    /* Тёмная тема переворачивает шкалу: 700 — это цвет ТЕКСТА, и на тёмном
       фоне он обязан быть светлым. Без этих трёх строк все ссылки на сайте
       оставались тёмно-зелёными на почти чёрном — 1.4:1, читать невозможно. */
    --hb-primary-700:   oklch(84% 0.09 148);
    --hb-primary-900:   oklch(92% 0.06 148);
    --hb-primary-50:    oklch(26% 0.05 148);

    --hb-secondary-100: oklch(28% 0.09 50);
    --hb-secondary-700: oklch(85% 0.08 50);
    --hb-success-100:   oklch(30% 0.08 145);
    --hb-success-700:   oklch(80% 0.10 145);
    --hb-warning-100:   oklch(32% 0.07 80);
    --hb-warning-700:   oklch(85% 0.10 85);
    --hb-error-100:     oklch(30% 0.10 25);
    --hb-error-700:     oklch(80% 0.13 25);
    --hb-info-100:      oklch(28% 0.05 235);
    --hb-info-700:      oklch(78% 0.08 235);

    --hb-shadow-1: 0 1px 2px rgb(0 0 0 / 0.5);
    --hb-shadow-2: 0 4px 12px rgb(0 0 0 / 0.5), 0 2px 6px rgb(0 0 0 / 0.35);
    --hb-shadow-3: 0 16px 32px rgb(0 0 0 / 0.55);
}

/* ---------------------------------------------------------------------------
   3. Сброс и основа
   --------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;   /* iOS не увеличивает шрифт при повороте */
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--hb-font-sans);
  font-size: var(--hb-text-base);
  line-height: 1.6;
  color: var(--hb-text-primary);
  background-color: var(--hb-bg-canvas);
  /* Зернистая фактура: SVG-шум прямо в CSS, без файла и лишнего запроса.
     Та же фактура у шапки и подвала (--hb-grain): иначе гладкие полосы
     сверху и снизу читаются как другой цвет, хотя цвет тот же. */
  background-image: var(--hb-grain);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--hb-font-serif);
  font-weight: 400;
  line-height: 1.2;
  margin: 0 0 var(--hb-space-4);
  color: var(--hb-text-primary);
  /* Заголовок не должен обрываться одиноким словом на новой строке */
  text-wrap: balance;
}

h1 { font-size: var(--hb-text-3xl); }
h2 { font-size: var(--hb-text-2xl); }
h3 { font-size: var(--hb-text-xl); }
h4 { font-size: var(--hb-text-lg); font-family: var(--hb-font-sans); font-weight: 600; }

p { margin: 0 0 var(--hb-space-4); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--hb-primary-700);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--hb-duration-fast) var(--hb-ease);
}
a:hover { color: var(--hb-primary-900); }

img { max-width: 100%; height: auto; }

/* Видимый фокус — обязателен: без него клавиатурная навигация вслепую.
   :focus-visible показывает кольцо только при навигации с клавиатуры,
   не мешая тем, кто кликает мышью. */
:focus-visible {
  outline: 2px solid var(--hb-focus-ring);
  outline-offset: 2px;
  border-radius: var(--hb-radius-sm);
}

/* Уважаем системную настройку «уменьшить движение» */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Текст только для скринридеров */
.hb-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Ссылка «к содержимому» — первая в табуляции, видна при фокусе */
.hb-skip-link {
  position: absolute;
  left: var(--hb-space-4);
  top: -100px;
  z-index: 100;
  padding: var(--hb-space-3) var(--hb-space-5);
  background: var(--hb-primary-fill);
  color: var(--hb-text-on-fill);
  border-radius: var(--hb-radius-sm);
  transition: top var(--hb-duration-base) var(--hb-ease);
}
.hb-skip-link:focus { top: var(--hb-space-4); color: var(--hb-text-on-fill); }

/* ---------------------------------------------------------------------------
   4. Сетка
   --------------------------------------------------------------------------- */

/* Поля 24 px с каждой стороны и больше ничего: на мониторе 1920 под
   содержимое остаётся 1872 px. Потолка ширины у контейнера нет — вместо
   растягивания карточек сетка добавляет колонки (см. .hb-grid). */
.hb-container {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--hb-space-6);
}

/* Страницы, где содержимое — текст и формы: строка в 1800 px нечитаема,
   поэтому им потолок ширины нужен. Сетке работ — нет. */
.hb-container--narrow { max-width: var(--hb-container); }

@media (max-width: 640px) {
  .hb-container { padding-inline: var(--hb-space-4); }
}

.hb-section { padding-block: var(--hb-space-16); }
.hb-section--tight { padding-block: var(--hb-space-10); }

/* ---------------------------------------------------------------------------
   5. Шапка и навигация
   --------------------------------------------------------------------------- */

/* Шапка живёт на том же фоне, что и страница: в макете студии она не
   выделена подложкой, её отделяет только тонкая линия. Белая подложка
   разрезала бы страницу пополам. */
.hb-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--hb-bg-canvas);
  background-image: var(--hb-grain);
  border-bottom: 1px solid var(--hb-border-default);
}

.hb-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hb-space-6);
  min-height: 64px;
}

.hb-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--hb-space-2);
  font-size: var(--hb-text-xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hb-text-primary);
  text-decoration: none;
  min-height: var(--hb-tap-min);
}
.hb-logo:hover { color: var(--hb-primary-700); }
.hb-logo svg { color: var(--hb-primary-600); flex: none; }

.hb-nav { display: flex; align-items: center; gap: var(--hb-space-1); }

.hb-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--hb-tap-min);
  padding-inline: var(--hb-space-3);
  /* Читаемость по образцу владельца: 11 px светло-серым тонким
     начертанием терялись на кремовом фоне. Крупнее, плотнее и цветом
     основного текста — разрядка остаётся, но меньше. */
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hb-text-primary);
  text-decoration: none;
  border-radius: var(--hb-radius-sm);
}
.hb-nav__link:hover { color: var(--hb-text-primary); background: var(--hb-bg-subtle); }
/* Активный пункт подчёркнут тонкой линией — как в макете */
.hb-nav__link[aria-current="page"] {
  color: var(--hb-text-primary);
  box-shadow: inset 0 -1px 0 var(--hb-primary-600);
}

.hb-header__actions { display: flex; align-items: center; gap: var(--hb-space-2); }

/* Переключатель языка */
.hb-lang { display: inline-flex; border: 1px solid var(--hb-border-strong); border-radius: var(--hb-radius-pill); overflow: hidden; }
.hb-lang__item {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding-inline: var(--hb-space-3);
  font-size: var(--hb-text-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hb-text-secondary);
  text-decoration: none;
}
.hb-lang__item:hover { background: var(--hb-bg-subtle); color: var(--hb-text-primary); }
.hb-lang__item[aria-current="true"] { background: var(--hb-primary-fill); color: var(--hb-text-on-fill); }

/* Иконки действий в шапке */
.hb-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: var(--hb-text-secondary);
  background: none;
  border: none;
  border-radius: var(--hb-radius-sm);
  cursor: pointer;
  text-decoration: none;
}
.hb-iconbtn:hover { color: var(--hb-text-primary); background: var(--hb-bg-subtle); }

@media (pointer: coarse) {
  .hb-iconbtn { width: var(--hb-tap-min); height: var(--hb-tap-min); }
}

/* Кнопка мобильного меню: видна только на узких экранах */
.hb-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--hb-tap-min);
  height: var(--hb-tap-min);
  background: none;
  border: 1px solid var(--hb-border-strong);
  border-radius: var(--hb-radius-sm);
  color: var(--hb-text-primary);
  cursor: pointer;
}

/* На узком экране шапка не вмещает всё сразу: логотип, бургер, четыре
   действия и переключатель языка. Поиск и корзина уходят — оба дублируются
   в меню и в подвале, а переключатель языка остаётся: без него человек,
   попавший не на свою версию сайта, не найдёт выхода. */
@media (max-width: 620px) {
  .hb-header__actions .hb-iconbtn { display: none; }
  .hb-logo { font-size: var(--hb-text-xs); letter-spacing: 0.1em; gap: var(--hb-space-1); }
  .hb-header__inner { gap: var(--hb-space-2); }
}

@media (max-width: 900px) {
  .hb-burger { display: inline-flex; }
  .hb-nav {
    display: none;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--hb-space-2);
    background: var(--hb-bg-surface);
    border-bottom: 1px solid var(--hb-border-default);
    box-shadow: var(--hb-shadow-2);
  }
  .hb-nav[data-open="true"] { display: flex; }
  .hb-nav__link { min-height: 48px; font-size: var(--hb-text-sm); }
  .hb-header { position: relative; }
}

/* ---------------------------------------------------------------------------
   6. Кнопки
   --------------------------------------------------------------------------- */

/* Атрибут hidden должен побеждать любой display у компонента.
   Без этой строки кнопка с display:inline-flex остаётся видимой,
   даже когда сценарий пометил её hidden. */
[hidden] { display: none !important; }

.hb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hb-space-2);
  min-height: var(--hb-tap-min);
  padding: var(--hb-space-3) var(--hb-space-6);
  font-family: var(--hb-font-sans);
  font-size: var(--hb-text-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--hb-radius-sm);
  cursor: pointer;
  transition: background-color var(--hb-duration-fast) var(--hb-ease),
              border-color var(--hb-duration-fast) var(--hb-ease),
              color var(--hb-duration-fast) var(--hb-ease);
}

.hb-btn--primary {
  background: var(--hb-primary-fill);
  color: var(--hb-text-on-fill);
  box-shadow: var(--hb-shadow-1);
}
.hb-btn--primary:hover { background: var(--hb-primary-fill-hover); color: var(--hb-text-on-fill); }

.hb-btn--secondary {
  background: transparent;
  color: var(--hb-text-primary);
  border-color: var(--hb-border-strong);
}
.hb-btn--secondary:hover { background: var(--hb-bg-subtle); color: var(--hb-text-primary); }

.hb-btn--ghost { background: transparent; color: var(--hb-primary-700); padding-inline: var(--hb-space-3); }
.hb-btn--ghost:hover { background: var(--hb-primary-50); }

.hb-btn--danger { background: transparent; color: var(--hb-error-700); border-color: var(--hb-error-100); }
.hb-btn--danger:hover { background: var(--hb-error-100); }

.hb-btn--sm { min-height: 36px; padding: var(--hb-space-2) var(--hb-space-4); font-size: var(--hb-text-xs); }
.hb-btn--block { width: 100%; }

.hb-btn:disabled, .hb-btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
   7. Бейджи статусов
   --------------------------------------------------------------------------- */

.hb-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--hb-space-1);
  min-height: 22px;
  padding-inline: var(--hb-space-2);
  font-size: var(--hb-text-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--hb-radius-sm);
  white-space: nowrap;
}

.hb-badge--available { background: var(--hb-text-primary); color: var(--hb-bg-canvas); }
.hb-badge--reserved  { background: var(--hb-secondary-100); color: var(--hb-secondary-700); }
.hb-badge--sold      { background: var(--hb-bg-subtle); color: var(--hb-text-secondary); }
.hb-badge--archived  { background: var(--hb-bg-subtle); color: var(--hb-text-muted); }
.hb-badge--draft     { background: var(--hb-warning-100); color: var(--hb-warning-700); }
.hb-badge--new       { background: var(--hb-info-100); color: var(--hb-info-700); }
.hb-badge--success   { background: var(--hb-success-100); color: var(--hb-success-700); }

/* ---------------------------------------------------------------------------
   8. Каталог

   Раскладка повторяет исходный макет студии: заголовок с пояснением справа,
   строка статусов с цветными маркерами, под ней растения и сортировка,
   затем счётчик и сетка.

   Фотография в карточке подаётся без рамки и тени: работы сняты на светлом
   фоне, и любая обводка спорит с самим снимком. Роль границы выполняет
   воздух между колонками.
   --------------------------------------------------------------------------- */

.hb-cat-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--hb-space-8);
  padding-block: var(--hb-space-6) var(--hb-space-5);
}

.hb-cat-head__title {
  margin: 0;
  font-size: 2.25rem;   /* 36px — как в макете студии */
  line-height: 1.05;
}

.hb-cat-head__note {
  max-width: 30ch;
  margin: 0;
  padding-top: var(--hb-space-2);
  font-size: var(--hb-text-xs);
  line-height: 1.5;
  color: var(--hb-text-muted);
  text-align: right;
}

@media (max-width: 700px) {
  .hb-cat-head { flex-direction: column; gap: var(--hb-space-3); }
  .hb-cat-head__note { text-align: left; max-width: none; }
}

/* --- Строка статусов -------------------------------------------------------- */

.hb-statusbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hb-space-1);
  padding-bottom: var(--hb-space-3);
  border-bottom: 1px solid var(--hb-border-default);
}

.hb-statusbar__item {
  display: inline-flex;
  align-items: center;
  gap: var(--hb-space-2);
  min-height: 30px;
  padding-inline: var(--hb-space-4);
  font-size: var(--hb-text-xs);
  /* Тонкое начертание: в макете подписи набраны светло и держатся
     за счёт разрядки, а не за счёт жира. */
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hb-text-secondary);
  text-decoration: none;
  border-radius: var(--hb-radius-sm);
  white-space: nowrap;
}
.hb-statusbar__item:hover { color: var(--hb-text-primary); background: var(--hb-bg-subtle); }

/* Активный статус — сплошная заливка, как в макете */
.hb-statusbar__item[aria-current="true"] {
  background: var(--hb-primary-fill);
  color: var(--hb-text-on-fill);
  font-weight: 500;
}
.hb-statusbar__item[aria-current="true"]:hover { background: var(--hb-primary-fill-hover); color: var(--hb-text-on-fill); }

/* Маркер статуса: цвет несёт смысл, но никогда не один — рядом всегда слово */
.hb-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: none;
}
.hb-dot--available { background: var(--hb-primary-500); }
.hb-dot--reserved  { background: var(--hb-secondary-500); }
.hb-dot--sold      { background: var(--hb-neutral-400); }
.hb-dot--archived  { background: var(--hb-neutral-600); }

.hb-statusbar__item[aria-current="true"] .hb-dot { background: currentColor; }

/* --- Растения и сортировка --------------------------------------------------- */

.hb-cat-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--hb-space-4);
  padding-block: var(--hb-space-2);
  border-bottom: 1px solid var(--hb-border-default);
}

/* Выпадающий список на <details>: работает без JavaScript,
   закрывается по Escape средствами браузера. */
.hb-dropdown { position: relative; }

.hb-dropdown__button {
  display: inline-flex;
  align-items: center;
  gap: var(--hb-space-2);
  min-height: 30px;
  padding-inline: var(--hb-space-3);
  font-size: var(--hb-text-xs);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hb-text-secondary);
  cursor: pointer;
  list-style: none;
  border-radius: var(--hb-radius-sm);
}
.hb-dropdown__button::-webkit-details-marker { display: none; }
.hb-dropdown__button:hover { color: var(--hb-text-primary); }
.hb-dropdown[open] .hb-dropdown__button { color: var(--hb-text-primary); }
.hb-dropdown[open] .hb-dropdown__button svg { transform: rotate(180deg); }
.hb-dropdown__button svg { transition: transform var(--hb-duration-fast) var(--hb-ease); }

.hb-dropdown__menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  min-width: 220px;
  max-height: 340px;
  overflow-y: auto;
  padding: var(--hb-space-2);
  background: var(--hb-bg-surface);
  border: 1px solid var(--hb-border-default);
  border-radius: var(--hb-radius-sm);
  box-shadow: var(--hb-shadow-2);
}

.hb-dropdown__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hb-space-3);
  min-height: 36px;
  padding-inline: var(--hb-space-3);
  font-size: var(--hb-text-sm);
  color: var(--hb-text-secondary);
  text-decoration: none;
  border-radius: var(--hb-radius-sm);
}
.hb-dropdown__item:hover { background: var(--hb-bg-subtle); color: var(--hb-text-primary); }
.hb-dropdown__item[aria-current="true"] { color: var(--hb-primary-700); font-weight: 500; }
.hb-dropdown__count { font-size: var(--hb-text-xs); color: var(--hb-text-muted); }

.hb-sort {
  display: flex;
  align-items: center;
  gap: var(--hb-space-1);
  font-size: var(--hb-text-xs);
}

.hb-sort__label {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hb-text-muted);
  margin-right: var(--hb-space-1);
}

.hb-sort__item {
  display: inline-flex;
  align-items: center;
  gap: var(--hb-space-1);
  min-height: 30px;
  padding-inline: var(--hb-space-3);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hb-text-secondary);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--hb-radius-sm);
}
.hb-sort__item:hover { color: var(--hb-text-primary); }
/* Активная колонка обведена рамкой, направление показывает стрелка */
.hb-sort__item[aria-current="true"] {
  color: var(--hb-text-primary);
  border-color: var(--hb-border-strong);
  font-weight: 500;
}

.hb-cat-count {
  margin: 0;
  padding-block: var(--hb-space-5) var(--hb-space-4);
  font-size: var(--hb-text-xs);
  color: var(--hb-text-muted);
}

/* --- Сетка ------------------------------------------------------------------- */

.hb-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--hb-space-8) var(--hb-space-4);
  align-items: start;
  padding-bottom: var(--hb-space-10);
}

@media (max-width: 1100px) { .hb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .hb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px)  { .hb-grid { grid-template-columns: 1fr; } }

/* Широкий монитор получает не карточки в полтора экрана, а больше работ.
   Свободное место в галерее стоит тратить на количество: разглядывать
   работу идут на её страницу, а сетка нужна, чтобы выбрать. Заодно
   карточка остаётся около 300 px, и браузеру по-прежнему хватает
   варианта фотографии на 600 px даже на экране с двойной плотностью. */
@media (min-width: 1500px) { .hb-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1800px) { .hb-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 2200px) { .hb-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); } }

.hb-card { position: relative; display: flex; flex-direction: column; }

.hb-card__link { display: block; text-decoration: none; color: inherit; }
/* Область нажатия — вся карточка, но ссылка в разметке одна:
   скринридер читает её один раз, а не по ссылке на каждый элемент. */
.hb-card__link::after { content: ''; position: absolute; inset: 0; }

/* Пропорция задаётся в разметке, у каждой карточки своя — по форме
   самой фотографии. Здесь только запасное значение на случай работы
   без фотографии. Нижний край карточек в ряду из-за этого не
   выравнивается, и это осознанно: ряд одинаковых прямоугольников
   получается только обрезкой, а обрезанная работа — уже другая работа. */
.hb-card__media {
  position: relative;
  display: block;
  aspect-ratio: 0.75;
  overflow: hidden;
  background: var(--hb-bg-subtle);
}

.hb-card__img,
.hb-card picture { display: block; width: 100%; height: 100%; }

/* Пропорция рамки совпадает с пропорцией снимка, поэтому cover ничего
   не срезает — он лишь убирает щель в доли пикселя от округления. */
.hb-card__img { object-fit: cover; }

/* Крайние формы (панорама, свиток) вписываются целиком: рамка уже
   упёрлась в границу пропорций, и cover в ней резал бы по-настоящему.
   Поля по краям читаются как паспарту. */
.hb-card__media--fit .hb-card__img { object-fit: contain; }

.hb-card__img--empty { background: var(--hb-bg-subtle); }

/* Подписи поверх фотографии: полупрозрачная светлая подложка вместо
   плотной плашки — снимок под ней остаётся виден. */
.hb-tag {
  position: absolute;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding-inline: var(--hb-space-2);
  font-size: var(--hb-text-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  border-radius: 2px;
  backdrop-filter: blur(6px);
}

.hb-tag--status   { top: var(--hb-space-2); left: var(--hb-space-2); }
.hb-tag--category {
  top: var(--hb-space-2);
  right: var(--hb-space-2);
  background: color-mix(in srgb, var(--hb-bg-surface) 82%, transparent);
  color: var(--hb-text-secondary);
  font-weight: 400;
}

.hb-tag--available { background: color-mix(in srgb, var(--hb-bg-surface) 85%, transparent); color: var(--hb-text-primary); }
.hb-tag--reserved  { background: color-mix(in srgb, var(--hb-secondary-100) 90%, transparent); color: var(--hb-secondary-700); }
.hb-tag--sold      { background: color-mix(in srgb, var(--hb-bg-subtle) 88%, transparent); color: var(--hb-text-secondary); }
.hb-tag--archived  { background: color-mix(in srgb, var(--hb-bg-surface) 85%, transparent); color: var(--hb-text-secondary); }

/* Браузеры без color-mix получат сплошную подложку — читаемость важнее эффекта */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .hb-tag--available, .hb-tag--archived, .hb-tag--category { background: var(--hb-bg-surface); }
  .hb-tag--reserved { background: var(--hb-secondary-100); }
  .hb-tag--sold { background: var(--hb-bg-subtle); }
}

.hb-card__body { padding-top: var(--hb-space-3); }

/* Категория над названием: без рамки, тем же цветом, что название, —
   мелкой разрядкой, чтобы читалась подписью к нему, а не вторым заголовком. */
.hb-card__category {
  margin: 0 0 var(--hb-space-1);
  font-size: var(--hb-text-xs);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hb-text-primary);
}

/* Растения — набором отдельных меток: по ним же работает фильтр наверху.
   Строка ровно одна и не переносится: иначе карточка с тремя длинными
   названиями становится выше соседних, и весь ряд разъезжается по высоте.
   Лишние метки просто обрезаются — полный список есть на странице работы. */
.hb-card__plants {
  display: flex;
  gap: 4px;
  height: 20px;
  margin: 0 0 var(--hb-space-2);
  padding: 0;
  overflow: hidden;
  list-style: none;
}

.hb-chip {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding-inline: 6px;
  font-size: var(--hb-text-xs);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hb-text-muted);
  white-space: nowrap;
  border: 1px solid var(--hb-border-default);
  border-radius: 2px;
}

.hb-card__title {
  font-family: var(--hb-font-serif);
  font-size: 1.0625rem;   /* 17px — как в макете */
  font-weight: 400;
  line-height: 1.3;
  margin: 0 0 var(--hb-space-2);
  /* Не больше двух строк: длинное название иначе сдвигает цену вниз
     и ломает выравнивание нижнего края карточек в ряду. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hb-card__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--hb-space-2);
  font-size: var(--hb-text-sm);
}

/* Цена набрана обычным весом: в макете она не выделена жирным,
   вес несёт название работы, а не число. */
.hb-card__price { color: var(--hb-text-primary); font-weight: 400; }
/* Цена проданной работы зачёркнута: это уже не действующее предложение */
.hb-card__price--past { text-decoration: line-through; color: var(--hb-text-muted); }

.hb-card__date { font-size: var(--hb-text-xs); color: var(--hb-text-muted); }

/* ---------------------------------------------------------------------------
   8bis. Главная страница
   --------------------------------------------------------------------------- */

.hb-eyebrow {
  margin: 0 0 var(--hb-space-3);
  font-size: var(--hb-text-xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hb-secondary-700);
}
.hb-eyebrow--onDark { color: var(--hb-primary-200); }

/* --- Обложка ---------------------------------------------------------------- */

/* Текст и снимок стоят рядом, а не текст поверх снимка: подпись на
   фотографии работы закрывает саму работу, и читаемость держится только
   на затемнении — то есть на порче снимка. */
.hb-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 42%) minmax(0, 58%);
  align-items: stretch;
  border-bottom: 1px solid var(--hb-border-default);
}

.hb-hero__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--hb-space-16) var(--hb-space-10) var(--hb-space-16) var(--hb-space-6);
}

.hb-hero__title {
  margin: 0 0 var(--hb-space-5);
  font-family: var(--hb-font-serif);
  font-size: clamp(2.25rem, 4.2vw, 3.75rem);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.01em;
}
.hb-hero__title em { font-style: italic; color: var(--hb-primary-600); }

.hb-hero__lede {
  max-width: 46ch;
  margin: 0 0 var(--hb-space-8);
  font-size: var(--hb-text-sm);
  line-height: 1.7;
  color: var(--hb-text-secondary);
}

.hb-hero__actions { display: flex; flex-wrap: wrap; gap: var(--hb-space-3); }

.hb-hero__media { position: relative; overflow: hidden; background: var(--hb-bg-subtle); }
/* Обложка кадрируется: это фон блока, а не работа на продажу.
   Работы в каталоге по-прежнему показываются целиком. */
.hb-hero__media picture,
.hb-hero__media img { display: block; width: 100%; height: 100%; object-fit: cover; max-height: none; }

/* Подпись «прокрутите вниз» — вертикально у правого края, как в макете */
.hb-hero__scroll {
  position: absolute;
  right: var(--hb-space-4);
  bottom: var(--hb-space-10);
  writing-mode: vertical-rl;
  font-size: var(--hb-text-xs);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--hb-text-muted);
  mix-blend-mode: difference;
  filter: invert(1);
}

@media (max-width: 900px) {
  .hb-hero { grid-template-columns: minmax(0, 1fr); }
  .hb-hero__text { order: 2; padding: var(--hb-space-10) var(--hb-space-6); }
  .hb-hero__media { order: 1; aspect-ratio: 4 / 3; }
  .hb-hero__scroll { display: none; }
}

/* --- Три факта -------------------------------------------------------------- */

.hb-facts { border-bottom: 1px solid var(--hb-border-default); }
.hb-facts__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--hb-space-8);
  padding-block: var(--hb-space-8);
}
@media (max-width: 700px) { .hb-facts__grid { grid-template-columns: 1fr; gap: var(--hb-space-5); } }

/* Разделители между фактами, но не по краям блока */
.hb-fact + .hb-fact { border-left: 1px solid var(--hb-border-default); padding-left: var(--hb-space-8); }
@media (max-width: 700px) {
  .hb-fact + .hb-fact { border-left: none; border-top: 1px solid var(--hb-border-default); padding: var(--hb-space-5) 0 0; }
}

.hb-fact__value {
  margin: 0 0 var(--hb-space-1);
  font-family: var(--hb-font-serif);
  font-size: var(--hb-text-xl);
  font-weight: 400;
}
.hb-fact__label { margin: 0; font-size: var(--hb-text-xs); color: var(--hb-text-muted); }

/* --- Заголовок блока -------------------------------------------------------- */

.hb-blockhead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--hb-space-6);
  margin-bottom: var(--hb-space-6);
}
.hb-blockhead--center { justify-content: center; text-align: center; margin-bottom: var(--hb-space-10); }

.hb-blockhead__title {
  margin: 0;
  font-family: var(--hb-font-serif);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 400;
}

.hb-blockhead__more {
  display: inline-flex;
  align-items: center;
  gap: var(--hb-space-2);
  min-height: var(--hb-tap-min);
  font-size: var(--hb-text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hb-text-secondary);
  text-decoration: none;
  white-space: nowrap;
}
.hb-blockhead__more:hover { color: var(--hb-text-primary); }

/* --- Переключатели категорий ------------------------------------------------ */

.hb-pills { display: flex; flex-wrap: wrap; gap: var(--hb-space-2); margin-bottom: var(--hb-space-6); }

.hb-pill {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding-inline: var(--hb-space-4);
  border: 1px solid var(--hb-border-default);
  border-radius: 2px;
  font-size: var(--hb-text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hb-text-secondary);
  text-decoration: none;
}
.hb-pill:hover { color: var(--hb-text-primary); background: var(--hb-bg-subtle); }
.hb-pill[aria-current="true"] {
  background: var(--hb-primary-fill);
  border-color: var(--hb-primary-fill);
  color: var(--hb-text-on-fill);
}

/* --- Работа крупным планом -------------------------------------------------- */

.hb-spotlight {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  border-block: 1px solid var(--hb-border-default);
  background: var(--hb-bg-surface);
}
@media (max-width: 900px) { .hb-spotlight { grid-template-columns: minmax(0, 1fr); } }

.hb-spotlight__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--hb-space-12);
  background: var(--hb-bg-canvas);
}
.hb-spotlight__media picture { display: block; max-width: 100%; }
/* Работа показывается целиком: здесь это предложение купить, а не фон. */
.hb-spotlight__media img { display: block; width: auto; max-width: 100%; max-height: min(60vh, 520px); }

.hb-spotlight__badge {
  position: absolute;
  top: var(--hb-space-4);
  left: var(--hb-space-4);
  padding: 4px var(--hb-space-3);
  background: var(--hb-bg-inverse);
  color: var(--hb-text-inverse);
  font-size: var(--hb-text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hb-spotlight__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--hb-space-12) var(--hb-space-10);
}
@media (max-width: 700px) { .hb-spotlight__body { padding: var(--hb-space-8) var(--hb-space-6); } }

.hb-spotlight__title {
  margin: 0 0 var(--hb-space-4);
  font-family: var(--hb-font-serif);
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  font-weight: 400;
}
.hb-spotlight__text {
  max-width: 52ch;
  margin: 0 0 var(--hb-space-6);
  font-size: var(--hb-text-sm);
  line-height: 1.7;
  color: var(--hb-text-secondary);
}

.hb-spotlight__specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--hb-space-4) var(--hb-space-6);
  margin: 0 0 var(--hb-space-6);
  padding-block: var(--hb-space-5);
  border-block: 1px solid var(--hb-border-default);
}
.hb-spotlight__specs dt {
  margin-bottom: 2px;
  font-size: var(--hb-text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hb-text-muted);
}
.hb-spotlight__specs dd { margin: 0; font-size: var(--hb-text-sm); }

.hb-spotlight__price {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--hb-space-4);
  margin-bottom: var(--hb-space-4);
  font-size: var(--hb-text-xl);
}
.hb-spotlight__ship { font-size: var(--hb-text-xs); color: var(--hb-text-muted); }

.hb-spotlight__actions { display: flex; gap: var(--hb-space-3); align-items: stretch; }
.hb-spotlight__actions form { flex: 1 1 auto; }

/* --- Четыре шага ------------------------------------------------------------ */

.hb-process { padding-block: var(--hb-space-16); }

.hb-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--hb-space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 1100px) { .hb-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .hb-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .hb-steps { grid-template-columns: 1fr; } }

.hb-step__num {
  display: block;
  margin-bottom: var(--hb-space-3);
  font-family: var(--hb-font-serif);
  font-size: var(--hb-text-lg);
  color: var(--hb-neutral-300);
}
.hb-step__title { margin: 0 0 var(--hb-space-2); font-size: var(--hb-text-base); font-weight: 500; }
.hb-step__text { margin: 0; font-size: var(--hb-text-sm); line-height: 1.7; color: var(--hb-text-secondary); }

/* --- Отзывы ----------------------------------------------------------------- */

.hb-words { padding-block: var(--hb-space-16); background: var(--hb-bg-subtle); }

.hb-words__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--hb-space-4);
}
@media (max-width: 900px) { .hb-words__grid { grid-template-columns: 1fr; } }

.hb-word {
  margin: 0;
  padding: var(--hb-space-6);
  background: var(--hb-bg-surface);
  border: 1px solid var(--hb-border-default);
}
.hb-word__stars { display: flex; gap: 2px; margin-bottom: var(--hb-space-3); color: var(--hb-secondary-600); }
.hb-word__quote {
  margin: 0 0 var(--hb-space-4);
  font-size: var(--hb-text-sm);
  line-height: 1.7;
  color: var(--hb-text-secondary);
}
.hb-word__author { font-size: var(--hb-text-xs); font-weight: 500; }
.hb-word__author span { display: block; font-weight: 400; color: var(--hb-text-muted); }

/* --- Индивидуальный заказ --------------------------------------------------- */

.hb-commission {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
}
@media (max-width: 900px) { .hb-commission { grid-template-columns: minmax(0, 1fr); } }

.hb-commission__media { overflow: hidden; background: var(--hb-bg-subtle); min-height: 320px; }
.hb-commission__media picture,
.hb-commission__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.hb-commission__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--hb-space-16) var(--hb-space-12);
  background: var(--hb-primary-800);
  color: var(--hb-text-inverse);
}
@media (max-width: 700px) { .hb-commission__body { padding: var(--hb-space-10) var(--hb-space-6); } }

.hb-commission__title {
  /* Цвет задаётся явно: у заголовков есть общее правило на тёмный текст,
     и на зелёной плашке оно делает заголовок нечитаемым. */
  color: var(--hb-text-inverse);
  margin: 0 0 var(--hb-space-4);
  font-family: var(--hb-font-serif);
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  font-weight: 400;
  line-height: 1.15;
}
.hb-commission__title em { font-style: italic; }
.hb-commission__text {
  max-width: 44ch;
  margin: 0 0 var(--hb-space-8);
  font-size: var(--hb-text-sm);
  line-height: 1.7;
  color: var(--hb-primary-100);
}

/* Кнопка на тёмном: обычная светлая заливка здесь спорит с фоном,
   а прозрачная с белой рамкой читается и не спорит. */
.hb-btn--onDark {
  border-color: var(--hb-primary-200);
  color: var(--hb-text-inverse);
  background: transparent;
}
.hb-btn--onDark:hover { background: var(--hb-primary-700); color: var(--hb-text-inverse); }

/* --- Письмо студии ---------------------------------------------------------- */

.hb-letter { border-top: 1px solid var(--hb-border-default); }
.hb-letter__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--hb-space-6);
  padding-block: var(--hb-space-10);
}
.hb-letter__title {
  margin: 0 0 var(--hb-space-1);
  font-family: var(--hb-font-serif);
  font-size: var(--hb-text-xl);
  font-weight: 400;
}
.hb-letter__text { margin: 0; font-size: var(--hb-text-sm); color: var(--hb-text-muted); }

.hb-letter__form { display: flex; flex-wrap: nowrap; gap: var(--hb-space-2); align-items: center; }
.hb-letter__form .hb-input { flex: 1 1 260px; min-width: 0; }
.hb-letter__form .hb-btn { flex: none; }
/* На узком экране поле и кнопка встают друг под друга: рядом им
   остаётся по сотне пикселей, и в поле не видно введённого адреса. */
@media (max-width: 620px) {
  .hb-letter__inner { flex-direction: column; align-items: stretch; }
  .hb-letter__form { flex-wrap: wrap; }
  .hb-letter__form .hb-input { flex-basis: 100%; }
  .hb-letter__form .hb-btn { width: 100%; }
}
.hb-letter__done { margin: 0; font-size: var(--hb-text-sm); color: var(--hb-success-700); }

/* Подпись только для скринридера: поле подписано плейсхолдером, но
   плейсхолдер — не подпись, он исчезает при вводе. */
.hb-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   9. Страница работы

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

.hb-pdp { border-top: 1px solid var(--hb-border-default); }

.hb-pdp__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--hb-space-4);
  padding: var(--hb-space-3) var(--hb-space-6);
  border-bottom: 1px solid var(--hb-border-default);
  font-size: var(--hb-text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hb-pdp__back,
.hb-pdp__close {
  display: inline-flex;
  align-items: center;
  gap: var(--hb-space-2);
  min-height: var(--hb-tap-min);
  color: var(--hb-text-secondary);
  text-decoration: none;
}
.hb-pdp__back:hover, .hb-pdp__close:hover { color: var(--hb-text-primary); }
.hb-pdp__close { justify-self: end; }

.hb-pdp__crumbs {
  display: flex;
  align-items: center;
  gap: var(--hb-space-2);
  justify-content: center;
  color: var(--hb-text-muted);
  text-transform: none;
  letter-spacing: 0.04em;
}
.hb-pdp__crumbs a { color: inherit; text-decoration: none; }
.hb-pdp__crumbs a:hover { color: var(--hb-text-primary); }
.hb-pdp__crumbs [aria-current] { color: var(--hb-text-primary); }

/* На узком экране от полосы остаётся только «назад»: три элемента в строку
   на телефоне не помещаются, а крошки дублируют кнопку. */
@media (max-width: 700px) {
  .hb-pdp__bar { grid-template-columns: 1fr auto; }
  .hb-pdp__crumbs { display: none; }
}

.hb-pdp__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  align-items: start;
}

@media (max-width: 1000px) {
  .hb-pdp__body { grid-template-columns: minmax(0, 1fr); }
}

/* Зона снимка: свой фон, чуть плотнее страницы — так работа читается
   как экспонат в витрине, а не как картинка на общем полотне. */
.hb-pdp__stage {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: var(--hb-space-4);
  align-items: start;
  padding: var(--hb-space-6);
  background: var(--hb-bg-subtle);
  border-right: 1px solid var(--hb-border-default);
  min-height: 60vh;
}
.hb-pdp__stage--single { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 1000px) {
  .hb-pdp__stage { border-right: none; border-bottom: 1px solid var(--hb-border-default); min-height: 0; }
}

.hb-pdp__thumbs { display: flex; flex-direction: column; gap: var(--hb-space-2); }

.hb-pdp__thumb {
  width: 72px; height: 72px;
  flex: 0 0 auto;
  padding: 3px;
  border: 1px solid var(--hb-border-default);
  border-radius: 2px;
  background: var(--hb-bg-surface);
  overflow: hidden;
  cursor: pointer;
}
.hb-pdp__thumb[aria-current="true"] { border-color: var(--hb-primary-600); border-width: 2px; padding: 2px; }
/* contain: в квадратике 72 px горизонтальная работа при обрезке
   превращается в неузнаваемую полосу из середины кадра. */
.hb-pdp__thumb img { width: 100%; height: 100%; object-fit: contain; }

/* Снимок лежит на белом листе — так его показывают в галерее. */
.hb-pdp__frame {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: var(--hb-space-6);
  background: var(--hb-bg-surface);
  border: 1px solid var(--hb-border-default);
  min-height: 0;
}

.hb-pdp__frame picture { display: block; max-width: 100%; }

/* Потолок по высоте — чтобы у вертикальной работы название и цена
   оставались в поле зрения, а не уезжали под сгиб экрана. */
.hb-detail__img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(78vh, 900px);
}

@media (max-width: 700px) {
  .hb-pdp__stage { grid-template-columns: minmax(0, 1fr); padding: var(--hb-space-4); }
  .hb-pdp__thumbs { flex-direction: row; flex-wrap: wrap; order: 2; }
  .hb-pdp__frame { padding: var(--hb-space-3); }
}

/* --- Лупа ------------------------------------------------------------------- */

/* Обёртка ровно по размеру снимка, а не по рамке: у горизонтальной работы
   в высокой рамке остаются поля, и лупа, растянутая на всю рамку,
   увеличивала бы пустоту. */
.hb-zoom { position: relative; display: block; max-width: 100%; line-height: 0; }

.hb-zoom__lens {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  /* 220% — снимок под лупой примерно вдвое крупнее показанного.
     Больше смысла нет: файл detail всё равно кончится. */
  background-size: 220%;
  opacity: 0;
  transition: opacity var(--hb-duration-fast) var(--hb-ease);
  pointer-events: none;
}

.hb-zoom.is-zooming .hb-zoom__lens { opacity: 1; }
.hb-zoom.is-zooming { cursor: zoom-in; }

/* На тач-устройствах наведения нет: там лупа не появится никогда,
   а курсор zoom-in только вводит в заблуждение. */
@media (hover: none) {
  .hb-zoom__lens { display: none; }
}

/* --- Колонка покупки -------------------------------------------------------- */

.hb-pdp__side {
  padding: var(--hb-space-8) var(--hb-space-8) var(--hb-space-12);
  display: flex;
  flex-direction: column;
}

@media (max-width: 700px) {
  .hb-pdp__side { padding: var(--hb-space-6) var(--hb-space-4) var(--hb-space-10); }
}

.hb-pdp__eyebrow {
  margin: 0 0 var(--hb-space-2);
  font-size: var(--hb-text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hb-secondary-700);
}

.hb-pdp__title {
  margin: 0 0 var(--hb-space-3);
  font-family: var(--hb-font-serif);
  font-size: var(--hb-text-2xl);
  font-weight: 400;
  line-height: 1.15;
}

.hb-pdp__price {
  margin: 0 0 var(--hb-space-5);
  padding-bottom: var(--hb-space-5);
  border-bottom: 1px solid var(--hb-border-default);
  font-size: var(--hb-text-xl);
  font-weight: 400;
}

.hb-pdp__lede {
  margin-bottom: var(--hb-space-6);
  font-size: var(--hb-text-sm);
  line-height: 1.7;
  color: var(--hb-text-secondary);
}

.hb-pdp__cta { margin-bottom: var(--hb-space-3); }

.hb-pdp__ship {
  display: flex;
  align-items: flex-start;
  gap: var(--hb-space-2);
  margin: 0 0 var(--hb-space-6);
  font-size: var(--hb-text-xs);
  line-height: 1.5;
  color: var(--hb-text-muted);
}
.hb-pdp__ship svg { flex: none; margin-top: 1px; color: var(--hb-primary-600); }

/* --- Вкладки на радиокнопках ------------------------------------------------ */

.hb-tabbed { border-top: 1px solid var(--hb-border-default); padding-top: var(--hb-space-5); }

.hb-tabbed__radio { position: absolute; opacity: 0; pointer-events: none; }

.hb-tabbed__labels { display: flex; gap: var(--hb-space-6); margin-bottom: var(--hb-space-5); }

.hb-tabbed__label {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding-bottom: var(--hb-space-2);
  border-bottom: 1px solid transparent;
  font-size: var(--hb-text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hb-text-muted);
  cursor: pointer;
}
.hb-tabbed__label:hover { color: var(--hb-text-primary); }

/* Подсветка вкладки и показ панели идут от состояния радиокнопки:
   переключение работает и без скриптов. */
.hb-tabbed__radio:nth-of-type(1):checked ~ .hb-tabbed__labels .hb-tabbed__label:nth-child(1),
.hb-tabbed__radio:nth-of-type(2):checked ~ .hb-tabbed__labels .hb-tabbed__label:nth-child(2) {
  color: var(--hb-text-primary);
  border-bottom-color: var(--hb-primary-600);
}

.hb-tabbed__panel { display: none; }
.hb-tabbed__radio:nth-of-type(1):checked ~ .hb-tabbed__panel--first,
.hb-tabbed__radio:nth-of-type(2):checked ~ .hb-tabbed__panel--second { display: block; }

/* Клавиатура: у радиокнопки нет своей рамки фокуса, показываем её на подписи */
.hb-tabbed__radio:focus-visible ~ .hb-tabbed__labels .hb-tabbed__label { outline: 2px solid var(--hb-focus-ring); outline-offset: 2px; }

/* --- Характеристики в две колонки ------------------------------------------- */

.hb-pdp__specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--hb-space-5) var(--hb-space-6);
  margin: 0;
}

.hb-pdp__spec dt {
  margin-bottom: 2px;
  font-size: var(--hb-text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hb-text-muted);
}
.hb-pdp__spec dd { margin: 0; font-size: var(--hb-text-sm); color: var(--hb-text-primary); }

.hb-pdp__care { margin: 0; font-size: var(--hb-text-sm); line-height: 1.7; color: var(--hb-text-secondary); }

.hb-pdp__plants {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: var(--hb-space-6) 0 0;
  padding: 0;
  list-style: none;
}

/* --- Вопрос о работе -------------------------------------------------------- */

.hb-pdp__ask {
  margin-top: var(--hb-space-6);
  padding-top: var(--hb-space-5);
  border-top: 1px solid var(--hb-border-default);
}
.hb-pdp__ask > summary {
  display: flex;
  align-items: center;
  min-height: var(--hb-tap-min);
  font-size: var(--hb-text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hb-text-secondary);
  cursor: pointer;
}
.hb-pdp__ask > summary:hover { color: var(--hb-text-primary); }
.hb-pdp__ask-note { margin: 0 0 var(--hb-space-4); font-size: var(--hb-text-sm); color: var(--hb-text-muted); }

/* --- Две колонки и характеристики ------------------------------------------- */

/* Раскладка «крупная колонка + узкая» — ею пользуется страница курса.
   У страницы работы своя раскладка (.hb-pdp__body), во всю ширину окна. */
.hb-split { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--hb-space-12); }
@media (max-width: 900px) { .hb-split { grid-template-columns: 1fr; gap: var(--hb-space-8); } }

.hb-specs { border-top: 1px solid var(--hb-border-default); margin-top: var(--hb-space-6); padding-top: var(--hb-space-6); }
.hb-specs__row { display: flex; gap: var(--hb-space-4); padding-block: var(--hb-space-2); font-size: var(--hb-text-sm); }
.hb-specs__label { flex: 0 0 40%; color: var(--hb-text-muted); }
.hb-specs__value { color: var(--hb-text-primary); }

/* --- Похожие работы --------------------------------------------------------- */

.hb-pdp__more {
  padding-block: var(--hb-space-12);
  border-top: 1px solid var(--hb-border-default);
  background: var(--hb-bg-canvas);
}
.hb-pdp__more-title {
  margin: 0 0 var(--hb-space-8);
  font-family: var(--hb-font-serif);
  font-size: var(--hb-text-xl);
  font-weight: 400;
}

/* ---------------------------------------------------------------------------
   10. Формы
   --------------------------------------------------------------------------- */

.hb-form { display: flex; flex-direction: column; gap: var(--hb-space-5); }
.hb-field { display: flex; flex-direction: column; gap: var(--hb-space-2); }

.hb-label {
  font-size: var(--hb-text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hb-text-secondary);
}
.hb-label__hint { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--hb-text-muted); }

.hb-input, .hb-textarea, .hb-select {
  width: 100%;
  min-height: var(--hb-tap-min);
  padding: var(--hb-space-3) var(--hb-space-4);
  font-family: var(--hb-font-sans);
  /* 16px на мобильных обязательны: при меньшем размере Safari на iOS
     принудительно масштабирует страницу при фокусе в поле. */
  font-size: var(--hb-text-md);
  color: var(--hb-text-primary);
  background: var(--hb-bg-surface);
  border: 1px solid var(--hb-border-strong);
  border-radius: var(--hb-radius-sm);
  transition: border-color var(--hb-duration-fast) var(--hb-ease);
}
.hb-textarea { min-height: 140px; resize: vertical; line-height: 1.6; }

.hb-input:focus, .hb-textarea:focus, .hb-select:focus {
  border-color: var(--hb-focus-ring);
  outline: 2px solid var(--hb-focus-ring);
  outline-offset: 1px;
}

.hb-input[aria-invalid="true"], .hb-textarea[aria-invalid="true"] {
  border-color: var(--hb-error-500);
  border-width: 1.5px;
}

.hb-error {
  display: flex;
  align-items: flex-start;
  gap: var(--hb-space-1);
  font-size: var(--hb-text-sm);
  color: var(--hb-error-700);
}

.hb-checkbox { display: flex; align-items: flex-start; gap: var(--hb-space-3); font-size: var(--hb-text-sm); cursor: pointer; }
.hb-checkbox input {
  flex: none;
  width: 20px; height: 20px;
  margin-top: 2px;
  accent-color: var(--hb-primary-600);
  cursor: pointer;
}

/* Ловушка для ботов: поле скрыто от людей, но не через display:none —
   часть ботов пропускает такие поля. Убираем из потока и из табуляции. */
.hb-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
   11. Сообщения
   --------------------------------------------------------------------------- */

.hb-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--hb-space-3);
  padding: var(--hb-space-4) var(--hb-space-5);
  font-size: var(--hb-text-sm);
  border: 1px solid transparent;
  border-radius: var(--hb-radius-sm);
}
.hb-alert--success { background: var(--hb-success-100); color: var(--hb-success-700); border-color: currentColor; }
.hb-alert--error   { background: var(--hb-error-100);   color: var(--hb-error-700);   border-color: currentColor; }
.hb-alert--info    { background: var(--hb-info-100);    color: var(--hb-info-700);    border-color: currentColor; }
.hb-alert svg { flex: none; margin-top: 2px; }

/* ---------------------------------------------------------------------------
   12. Пагинация
   --------------------------------------------------------------------------- */

.hb-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--hb-space-2);
  margin-top: var(--hb-space-12);
  padding-top: var(--hb-space-8);
  border-top: 1px solid var(--hb-border-default);
}

.hb-pagination__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--hb-tap-min);
  min-height: var(--hb-tap-min);
  padding-inline: var(--hb-space-3);
  font-size: var(--hb-text-sm);
  color: var(--hb-text-secondary);
  text-decoration: none;
  border: 1px solid var(--hb-border-default);
  border-radius: var(--hb-radius-sm);
}
.hb-pagination__item:hover { background: var(--hb-bg-subtle); color: var(--hb-text-primary); }
.hb-pagination__item[aria-current="page"] {
  background: var(--hb-primary-fill);
  border-color: var(--hb-primary-fill);
  color: var(--hb-text-on-fill);
  font-weight: 500;
}
.hb-pagination__gap { color: var(--hb-text-muted); padding-inline: var(--hb-space-1); }

/* ---------------------------------------------------------------------------
   13. Пустое состояние
   --------------------------------------------------------------------------- */

.hb-empty {
  padding: var(--hb-space-16) var(--hb-space-6);
  text-align: center;
  border: 1px dashed var(--hb-border-strong);
  border-radius: var(--hb-radius-md);
  background: var(--hb-bg-surface);
}
.hb-empty__title { font-family: var(--hb-font-serif); font-size: var(--hb-text-xl); margin-bottom: var(--hb-space-2); }
.hb-empty__text { color: var(--hb-text-secondary); margin-bottom: var(--hb-space-6); }

/* ---------------------------------------------------------------------------
   14. Подвал
   --------------------------------------------------------------------------- */

.hb-footer {
  margin-top: var(--hb-space-20);
  padding-block: var(--hb-space-12) var(--hb-space-8);
  /* Фон как у страницы (обложка, витрина) — подвал не отдельная плашка. */
  background-color: var(--hb-bg-canvas);
  background-image: var(--hb-grain);
  border-top: 1px solid var(--hb-border-default);
  font-size: var(--hb-text-sm);
}

.hb-footer__grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: var(--hb-space-10);
  padding-bottom: var(--hb-space-8);
  border-bottom: 1px solid var(--hb-border-default);
}
@media (max-width: 1000px) { .hb-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px)  { .hb-footer__grid { grid-template-columns: 1fr; gap: var(--hb-space-6); } }

.hb-footer__title {
  font-size: var(--hb-text-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hb-text-muted);
  margin-bottom: var(--hb-space-3);
}
.hb-footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--hb-space-2); }
.hb-footer__list a { color: var(--hb-text-secondary); text-decoration: none; display: inline-flex; min-height: 32px; align-items: center; }
.hb-footer__list a:hover { color: var(--hb-primary-700); text-decoration: underline; }

.hb-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--hb-space-3);
  padding-top: var(--hb-space-6);
  font-size: var(--hb-text-xs);
  color: var(--hb-text-muted);
}

/* ---------------------------------------------------------------------------
   15. Область нажатия на сенсорных экранах

   Требование «не меньше 44×44» относится к пальцу, а не к курсору. Поэтому
   компактные элементы — таблетки фильтров, переключатель языка, ссылки
   подвала — на десктопе остаются плотными, а на сенсорном вводе вырастают
   до полноценной области нажатия.

   pointer: coarse отличает палец от мыши надёжнее, чем ширина экрана:
   планшет в альбомной ориентации шире телефона, но управляется так же.
   --------------------------------------------------------------------------- */

/* Ссылки подвала: без inline-flex у строчной ссылки высота равна высоте
   текста, и нажать по ней трудно даже там, где места достаточно.
   Правило стоит до медиа-запроса ниже — иначе перебивало бы его. */
.hb-footer__bottom a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
}

@media (pointer: coarse) {
  .hb-filter,
  .hb-lang__item,
  .hb-tab,
  .hb-footer__list a,
  .hb-footer__bottom a,
  .hb-pdp__thumb,
  .hb-statusbar__item,
  .hb-dropdown__button,
  .hb-dropdown__item,
  .hb-sort__item {
    min-height: var(--hb-tap-min);
  }

  .hb-lang__item { padding-inline: var(--hb-space-4); }
  .hb-pdp__thumb { min-width: var(--hb-tap-min); }

  /* Курсы, корзина, оформление: те же 44 px для всего, что нажимают пальцем.
     Мелкая кнопка «Убрать» и хлебные крошки — самые частые промахи. */
  .hb-btn--sm,
  .hb-checkbox,
  .hb-dateopt,
  .hb-bag-row__title a {
    min-height: var(--hb-tap-min);
  }

  /* Ссылке-строке min-height не поможет, пока она inline. */
  .hb-bag-row__title a { display: inline-flex; align-items: center; }

  /* Строчные служебные ссылки — «← Корзина», «← Продолжить выбор», крошки:
     у строки высота равна высоте текста, попасть по ней пальцем трудно. */
  .hb-backlink,
  .hb-breadcrumb a {
    display: inline-flex;
    align-items: center;
    min-height: var(--hb-tap-min);
  }
}

/* ---------------------------------------------------------------------------
   16. Печать
   --------------------------------------------------------------------------- */

@media print {
  .hb-header, .hb-footer, .hb-filters, .hb-pagination, .hb-form { display: none; }
  body { background: #fff; color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 90%; }
}

/* Метка растения как ссылка — на странице работы ведёт к подборке */
.hb-chip--link { text-decoration: none; }
.hb-chip--link:hover { color: var(--hb-text-primary); border-color: var(--hb-border-strong); }

/* ---------------------------------------------------------------------------
   17. Курсы, корзина, оформление
   --------------------------------------------------------------------------- */

/* Счётчик на иконке корзины */
.hb-iconbtn--badge { position: relative; }
.hb-iconbtn__count {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 15px;
  height: 15px;
  padding-inline: 3px;
  font-size: var(--hb-text-xs);
  line-height: 15px;
  text-align: center;
  color: var(--hb-text-on-fill);
  background: var(--hb-primary-fill);
  border-radius: var(--hb-radius-pill);
}

/* --- Список курсов ---------------------------------------------------------- */

.hb-course-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--hb-space-10) var(--hb-space-8);
  padding-block: var(--hb-space-4) var(--hb-space-12);
}
@media (max-width: 820px) { .hb-course-list { grid-template-columns: 1fr; } }

.hb-course { position: relative; display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--hb-space-5); align-items: start; }
@media (max-width: 560px) { .hb-course { grid-template-columns: 1fr; } }

.hb-course__media { aspect-ratio: 4 / 5; overflow: hidden; background: var(--hb-bg-subtle); }
.hb-course__media img, .hb-course__media picture { display: block; width: 100%; height: 100%; object-fit: cover; }

.hb-course__title { font-family: var(--hb-font-serif); font-size: var(--hb-text-xl); font-weight: 400; margin: var(--hb-space-2) 0; }
.hb-course__summary { font-size: var(--hb-text-sm); color: var(--hb-text-secondary); margin-bottom: var(--hb-space-3); }

.hb-course__meta { display: flex; flex-wrap: wrap; gap: var(--hb-space-5); margin: 0; font-size: var(--hb-text-sm); }
.hb-course__meta dt { font-size: var(--hb-text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--hb-text-muted); margin-bottom: 2px; }
.hb-course__meta dd { margin: 0; }

/* Выбор даты: карточка-радио, вся строка кликабельна */
.hb-dateopt {
  display: flex;
  align-items: flex-start;
  gap: var(--hb-space-3);
  padding: var(--hb-space-3) var(--hb-space-4);
  border: 1px solid var(--hb-border-default);
  border-radius: var(--hb-radius-sm);
  cursor: pointer;
  font-size: var(--hb-text-sm);
}
.hb-dateopt:hover { border-color: var(--hb-border-strong); }
.hb-dateopt:has(input:checked) { border-color: var(--hb-primary-600); background: var(--hb-primary-50); }
.hb-dateopt input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--hb-primary-600); flex: none; }
.hb-dateopt__place,
.hb-dateopt__seats { display: block; font-size: var(--hb-text-xs); color: var(--hb-text-muted); }

/* --- Корзина и оформление --------------------------------------------------- */

/* ---------------------------------------------------------------------------
   Корзина

   Раскладка по макету студии: полоса заголовка, под ней две зоны во всю
   ширину окна — список слева на фоне страницы, сводка справа на своём фоне
   и с рамкой слева. Та же схема, что у страницы работы: покупатель уже
   привык, что справа стоит колонка с ценой и кнопкой.
   --------------------------------------------------------------------------- */

.hb-bag { border-top: 1px solid var(--hb-border-default); }

.hb-bag__head {
  display: flex;
  align-items: baseline;
  gap: var(--hb-space-4);
  padding: var(--hb-space-6) var(--hb-space-6) var(--hb-space-5);
  border-bottom: 1px solid var(--hb-border-default);
}
.hb-bag__title {
  margin: 0;
  font-family: var(--hb-font-serif);
  font-size: clamp(2rem, 3.4vw, 3rem);
  font-weight: 400;
  line-height: 1;
}
.hb-bag__count { font-size: var(--hb-text-sm); color: var(--hb-text-muted); }

.hb-bag__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  align-items: stretch;
  min-height: 60vh;
}
@media (max-width: 1000px) { .hb-bag__body { grid-template-columns: minmax(0, 1fr); min-height: 0; } }

.hb-bag__items { padding: var(--hb-space-8) var(--hb-space-6); }
@media (max-width: 700px) { .hb-bag__items { padding: var(--hb-space-6) var(--hb-space-4); } }

/* --- Строка работы ---------------------------------------------------------- */

.hb-bag-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) auto;
  gap: var(--hb-space-6);
  align-items: start;
  padding-block: var(--hb-space-6);
  border-bottom: 1px solid var(--hb-border-default);
}
.hb-bag-row:first-of-type { padding-top: 0; }

@media (max-width: 620px) {
  .hb-bag-row { grid-template-columns: 84px minmax(0, 1fr); gap: var(--hb-space-4); }
}

/* Недоступная позиция приглушена, но видна: человек должен понять,
   что именно выпало из заказа. */
.hb-bag-row--gone { opacity: 0.6; }
.hb-bag-row--gone .hb-bag-row__sum,
.hb-bag-row--gone .hb-bag-row__price { text-decoration: line-through; }

/* Высота задаётся пропорцией самой работы (в разметке), а не рамкой:
   в общей рамке у горизонтальной работы половина миниатюры была бы полем. */
.hb-bag-row__media {
  display: block;
  width: 110px;
  background: var(--hb-bg-subtle);
  overflow: hidden;
}
@media (max-width: 620px) { .hb-bag-row__media { width: 84px; } }

.hb-bag-row__media img { width: 100%; height: 100%; object-fit: cover; }

.hb-bag-row__eyebrow {
  margin: 0 0 var(--hb-space-2);
  font-size: var(--hb-text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hb-text-muted);
}
.hb-bag-row__title {
  margin: 0 0 var(--hb-space-2);
  font-family: var(--hb-font-serif);
  font-size: var(--hb-text-lg);
  font-weight: 400;
}
.hb-bag-row__title a { color: inherit; text-decoration: none; }
.hb-bag-row__title a:hover { color: var(--hb-primary-700); }

.hb-bag-row__price { margin: 0 0 var(--hb-space-4); font-size: var(--hb-text-sm); color: var(--hb-text-secondary); }

.hb-bag-row__unit {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  margin: 0;
  padding-inline: var(--hb-space-3);
  border: 1px solid var(--hb-border-default);
  font-size: var(--hb-text-xs);
  letter-spacing: 0.06em;
  color: var(--hb-text-muted);
}
.hb-bag-row__gone { margin: 0; font-size: var(--hb-text-xs); color: var(--hb-error-700); }

.hb-bag-row__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--hb-space-6);
  align-self: stretch;
}

.hb-bag-row__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--hb-tap-min);
  height: var(--hb-tap-min);
  margin: calc(-1 * var(--hb-space-2)) calc(-1 * var(--hb-space-2)) 0 0;
  padding: 0;
  border: none;
  background: none;
  color: var(--hb-text-muted);
  cursor: pointer;
}
.hb-bag-row__remove:hover { color: var(--hb-text-primary); }

.hb-bag-row__sum { font-size: var(--hb-text-lg); white-space: nowrap; }

/* На телефоне строка складывается в две: миниатюра с описанием, под ними —
   сумма и крестик в одну линию. Колонкой у правого края они занимали бы
   треть экрана под один значок. Правило стоит после базового: в CSS при
   равной специфичности выигрывает то, что ниже. */
@media (max-width: 620px) {
  .hb-bag-row__side {
    grid-column: 2;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    align-self: auto;
    gap: var(--hb-space-3);
    margin-top: var(--hb-space-4);
  }
  .hb-bag-row__remove { margin: 0; }
}

.hb-bag__back {
  display: inline-flex;
  align-items: center;
  gap: var(--hb-space-2);
  min-height: var(--hb-tap-min);
  margin-top: var(--hb-space-6);
  font-size: var(--hb-text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hb-text-secondary);
  text-decoration: none;
}
.hb-bag__back:hover { color: var(--hb-text-primary); }

/* --- Оформление заказа ------------------------------------------------------ */

/* Форма занимает всю свою зону, как в макете. Потолок ширины стоит только
   у многострочных полей: адрес в строку на 1400 px не читается. */
.hb-checkout__section > .hb-field .hb-textarea { max-width: 780px; }

.hb-checkout__section {
  padding-bottom: var(--hb-space-8);
  margin-bottom: var(--hb-space-8);
  border-bottom: 1px solid var(--hb-border-default);
}
.hb-checkout__section:last-of-type { border-bottom: none; margin-bottom: var(--hb-space-4); }

.hb-checkout__legend {
  margin: 0 0 var(--hb-space-5);
  font-size: var(--hb-text-xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hb-text-secondary);
}

.hb-checkout__note {
  display: flex;
  align-items: flex-start;
  gap: var(--hb-space-2);
  margin: var(--hb-space-4) 0 0;
  font-size: var(--hb-text-xs);
  line-height: 1.5;
  color: var(--hb-text-muted);
}
.hb-checkout__note svg { flex: none; margin-top: 1px; color: var(--hb-primary-600); }

.hb-checkout__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hb-space-4);
  flex-wrap: wrap;
}

/* --- Выбор способа: доставка и оплата --------------------------------------- */

.hb-options {
  display: flex;
  flex-direction: column;
  gap: var(--hb-space-2);
  margin: 0;
  padding: 0;
  border: none;
}

.hb-option {
  display: flex;
  align-items: center;
  gap: var(--hb-space-4);
  min-height: 68px;
  padding: var(--hb-space-4) var(--hb-space-5);
  border: 1px solid var(--hb-border-default);
  background: var(--hb-bg-surface);
  cursor: pointer;
}
.hb-option:hover { border-color: var(--hb-border-strong); }

/* Радиокнопка скрыта, но не выключена: по ней работают клавиатура,
   стрелки внутри группы и скринридер. Видимый кружок рисуется рядом. */
.hb-option input[type="radio"] {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.hb-option__mark {
  position: relative;
  flex: none;
  width: 18px; height: 18px;
  border: 1px solid var(--hb-border-strong);
  border-radius: 50%;
}
.hb-option__mark::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--hb-primary-600);
  opacity: 0;
  transition: opacity var(--hb-duration-fast) var(--hb-ease);
}

.hb-option:has(input:checked) {
  border-color: var(--hb-primary-600);
  background: var(--hb-bg-subtle);
}
.hb-option:has(input:checked) .hb-option__mark { border-color: var(--hb-primary-600); }
.hb-option:has(input:checked) .hb-option__mark::after { opacity: 1; }

/* Фокус с клавиатуры виден на всей карточке, а не на скрытом кружке. */
.hb-option:has(input:focus-visible) { outline: 2px solid var(--hb-focus-ring); outline-offset: 2px; }

/* Единственный вариант доставки: выглядит выбранным и им является,
   но нажимать в нём нечего. */
.hb-option--static { cursor: default; border-color: var(--hb-primary-600); background: var(--hb-bg-subtle); }
.hb-option--static .hb-option__mark { border-color: var(--hb-primary-600); }
.hb-option--static .hb-option__mark::after { opacity: 1; }

.hb-option__icon { flex: none; display: inline-flex; color: var(--hb-text-secondary); }
.hb-option__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hb-option__title { font-size: var(--hb-text-base); }
.hb-option__note { font-size: var(--hb-text-xs); color: var(--hb-text-muted); }
.hb-option__price { flex: none; font-size: var(--hb-text-sm); color: var(--hb-secondary-700); }

/* Браузеры без :has() — вариант остаётся выбираемым, просто без заливки:
   родная радиокнопка в этом случае показывается на своём месте. */
@supports not selector(:has(*)) {
  .hb-option input[type="radio"] { position: static; width: auto; height: auto; opacity: 1; pointer-events: auto; }
  .hb-option__mark { display: none; }
}

/* Подпись категории под названием в сводке */
.hb-summary-row__cat { display: block; font-size: var(--hb-text-xs); color: var(--hb-text-muted); }

/* Обещания под итогом */
.hb-bag__promises {
  margin: var(--hb-space-5) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--hb-space-2);
  font-size: var(--hb-text-xs);
  color: var(--hb-text-muted);
}
.hb-bag__promises li { position: relative; padding-left: var(--hb-space-4); line-height: 1.5; }
.hb-bag__promises li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.5em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--hb-primary-400);
}

/* --- Сводка заказа ---------------------------------------------------------- */

.hb-bag__summary {
  padding: var(--hb-space-8);
  background: var(--hb-bg-surface);
  border-left: 1px solid var(--hb-border-default);
  align-self: start;
  position: sticky;
  top: var(--hb-space-4);
}
@media (max-width: 1000px) {
  .hb-bag__summary { position: static; border-left: none; border-top: 1px solid var(--hb-border-default); }
}
@media (max-width: 700px) { .hb-bag__summary { padding: var(--hb-space-6) var(--hb-space-4); } }

.hb-bag__summary-title {
  margin: 0 0 var(--hb-space-5);
  font-family: var(--hb-font-serif);
  font-size: var(--hb-text-xl);
  font-weight: 400;
}

.hb-bag__lines { display: flex; flex-direction: column; gap: var(--hb-space-2); }

.hb-bag__line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--hb-space-4);
  font-size: var(--hb-text-sm);
}
.hb-bag__line > span:last-child { white-space: nowrap; }

/* Строка о доставке — единственное цветное пятно в сводке, и линия под ней
   отделяет позиции заказа от подсчёта. */
.hb-bag__delivery {
  display: flex;
  align-items: center;
  gap: var(--hb-space-2);
  margin: var(--hb-space-5) 0 0;
  padding-bottom: var(--hb-space-5);
  border-bottom: 1px solid var(--hb-secondary-600);
  font-size: var(--hb-text-xs);
  color: var(--hb-secondary-700);
}
.hb-bag__delivery svg { flex: none; }

.hb-bag__totals {
  display: flex;
  flex-direction: column;
  gap: var(--hb-space-2);
  padding-block: var(--hb-space-5);
  border-bottom: 1px solid var(--hb-border-default);
}
.hb-bag__free { color: var(--hb-secondary-700); }

.hb-bag__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--hb-space-4);
  padding-block: var(--hb-space-5) var(--hb-space-6);
}
.hb-bag__total-sum {
  font-family: var(--hb-font-serif);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  white-space: nowrap;
}

.hb-bag__cta { letter-spacing: 0.1em; text-transform: uppercase; }

.hb-bag__trust {
  margin: var(--hb-space-4) 0 0;
  font-size: var(--hb-text-xs);
  line-height: 1.6;
  text-align: center;
  color: var(--hb-text-muted);
}

.hb-cart { display: grid; grid-template-columns: minmax(0, 1.5fr) 340px; gap: var(--hb-space-10); align-items: start; }
@media (max-width: 900px) { .hb-cart { grid-template-columns: 1fr; gap: var(--hb-space-8); } }


.hb-cart__summary {
  padding: var(--hb-space-6);
  background: var(--hb-bg-surface);
  border: 1px solid var(--hb-border-default);
  border-radius: var(--hb-radius-sm);
  box-shadow: var(--hb-shadow-1);
  position: sticky;
  top: 88px;
}
@media (max-width: 900px) { .hb-cart__summary { position: static; } }

.hb-summary-rows { display: flex; flex-direction: column; gap: var(--hb-space-3); padding-bottom: var(--hb-space-4); border-bottom: 1px solid var(--hb-border-default); font-size: var(--hb-text-sm); }
.hb-summary-row { display: flex; align-items: center; justify-content: space-between; gap: var(--hb-space-3); }
.hb-summary-row__title { flex: 1 1 auto; min-width: 0; }
.hb-summary-row__price { white-space: nowrap; color: var(--hb-text-secondary); }

.hb-summary-row__thumb {
  display: block;
  width: 56px;
  height: 56px;
  flex: none;
  overflow: hidden;
  border-radius: 2px;
  background: var(--hb-bg-subtle);
}
/* contain: в сводке заказа работа должна быть узнаваема целиком,
   а не куском середины — иначе миниатюра не подтверждает ничего. */
.hb-summary-row__thumb img { width: 100%; height: 100%; object-fit: contain; }

/* Подпись о том, куда уходят данные карты */
.hb-trustline {
  display: flex;
  align-items: flex-start;
  gap: var(--hb-space-2);
  margin-top: var(--hb-space-3);
  font-size: var(--hb-text-xs);
  line-height: 1.5;
  color: var(--hb-text-secondary);
}
.hb-trustline svg { flex: none; margin-top: 2px; color: var(--hb-text-muted); }

.hb-summary-total {
  display: flex;
  justify-content: space-between;
  gap: var(--hb-space-3);
  padding-block: var(--hb-space-4);
  margin-bottom: var(--hb-space-4);
  font-size: var(--hb-text-lg);
}

/* Обложка курса: широкий кадр над описанием, пропорция как у карточки списка */
.hb-course__cover {
  margin: 0 0 var(--hb-space-6);
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--hb-bg-subtle);
}
.hb-course__cover img,
.hb-course__cover picture { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ============================================================================
   Личный кабинет покупателя и кромка чека
   ========================================================================== */

/* --- Кромка бумажного чека --------------------------------------------------

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

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

.hb-bag__summary--receipt {
  --hb-teeth-w: 24px;   /* шаг зубца */
  --hb-teeth-h: 10px;   /* его высота */

  padding-top: calc(var(--hb-space-8) + var(--hb-teeth-h));
  border-left: none;

  -webkit-mask:
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg)
      50% 0 / var(--hb-teeth-w) var(--hb-teeth-h) repeat-x,
    linear-gradient(#000 0 0) 0 var(--hb-teeth-h) / 100% calc(100% - var(--hb-teeth-h)) no-repeat;
  mask:
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg)
      50% 0 / var(--hb-teeth-w) var(--hb-teeth-h) repeat-x,
    linear-gradient(#000 0 0) 0 var(--hb-teeth-h) / 100% calc(100% - var(--hb-teeth-h)) no-repeat;
}

/* На узком экране сводка идёт под списком, и там кромка отделяет её
   от предыдущего блока вместо линии — линию в этом случае убираем. */
@media (max-width: 1000px) {
  .hb-bag__summary--receipt { border-top: none; }
}

/* --- Предложение войти перед оформлением ----------------------------------- */

.hb-signin {
  display: flex;
  align-items: center;
  gap: var(--hb-space-3);
  flex-wrap: wrap;
  margin-bottom: var(--hb-space-6);
  padding: var(--hb-space-4) var(--hb-space-5);
  border: 1px solid var(--hb-border-default);
  background: var(--hb-bg-subtle);
  font-size: var(--hb-text-sm);
}
.hb-signin__icon { flex: none; display: inline-flex; color: var(--hb-text-muted); }
.hb-signin__text { flex: 1 1 220px; color: var(--hb-text-secondary); }
.hb-signin__action {
  flex: none;
  font-size: var(--hb-text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.hb-signin--in { border-color: var(--hb-success-700); }
.hb-signin--in .hb-signin__icon { color: var(--hb-success-700); }

/* --- Адрес доставки: нужен только доставке ---------------------------------
   Самовывоз убирает поле адреса и показывает адрес студии. Всё на :has(),
   без сценариев; браузер без :has() покажет и то и другое — заполненный
   адрес при самовывозе никому не мешает, сервер его не требует. */

.hb-checkout__pickup { display: none; }

.hb-checkout:has(input[name="delivery_method"][value="pickup"]:checked) .hb-checkout__address { display: none; }
.hb-checkout:has(input[name="delivery_method"][value="pickup"]:checked) .hb-checkout__pickup { display: flex; }

/* --- Мелочи форм ----------------------------------------------------------- */

.hb-hint {
  margin-top: var(--hb-space-2);
  font-size: var(--hb-text-xs);
  color: var(--hb-text-muted);
}

.hb-alert--warning { background: var(--hb-warning-100); color: var(--hb-warning-700); border-color: currentColor; }

.hb-iconbtn.is-on { color: var(--hb-primary-700); }

.hb-done__account { margin-top: var(--hb-space-5); font-size: var(--hb-text-sm); }
.hb-done__account a { text-decoration: underline; text-underline-offset: 3px; }

/* --- Вход, регистрация, пароль ---------------------------------------------- */

.hb-auth__title {
  margin: 0 0 var(--hb-space-3);
  font-family: var(--hb-font-serif);
  font-size: var(--hb-text-3xl);
  font-weight: 400;
}
.hb-auth__lead { color: var(--hb-text-secondary); margin-bottom: var(--hb-space-6); }

.hb-auth {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--hb-space-10);
  margin-top: var(--hb-space-8);
}
@media (max-width: 820px) { .hb-auth { grid-template-columns: minmax(0, 1fr); gap: var(--hb-space-8); } }

.hb-auth__panel { padding-top: var(--hb-space-6); border-top: 1px solid var(--hb-border-strong); }

.hb-auth__legend {
  margin: 0 0 var(--hb-space-2);
  font-size: var(--hb-text-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hb-text-muted);
}

.hb-auth__link {
  display: inline-block;
  margin-top: var(--hb-space-4);
  font-size: var(--hb-text-sm);
  color: var(--hb-text-secondary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hb-auth__single { max-width: 44ch; }
.hb-auth__single--center { margin-inline: auto; text-align: center; }

.hb-auth__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  margin-bottom: var(--hb-space-5);
  border-radius: var(--hb-radius-pill);
  background: var(--hb-bg-subtle);
  color: var(--hb-text-secondary);
}

/* --- Кабинет ---------------------------------------------------------------- */

.hb-account__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--hb-space-6);
  flex-wrap: wrap;
  padding-bottom: var(--hb-space-6);
  border-bottom: 1px solid var(--hb-border-strong);
}

.hb-account__title {
  margin: 0;
  font-family: var(--hb-font-serif);
  font-size: var(--hb-text-3xl);
  font-weight: 400;
}
.hb-account__sub { margin: var(--hb-space-1) 0 0; font-size: var(--hb-text-sm); color: var(--hb-text-muted); }

.hb-account__verify {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hb-space-4);
  flex-wrap: wrap;
  margin-top: var(--hb-space-6);
}

.hb-account {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--hb-space-12);
  margin-top: var(--hb-space-8);
  align-items: start;
}
@media (max-width: 1000px) { .hb-account { grid-template-columns: minmax(0, 1fr); gap: var(--hb-space-10); } }

.hb-account__legend {
  margin: 0 0 var(--hb-space-5);
  font-size: var(--hb-text-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hb-text-muted);
}

.hb-account__empty { color: var(--hb-text-secondary); }

.hb-account__side {
  padding: var(--hb-space-6);
  background: var(--hb-bg-surface);
  border: 1px solid var(--hb-border-default);
}

/* --- Карточка заказа --------------------------------------------------------- */

.hb-order {
  padding: var(--hb-space-6) 0 var(--hb-space-8);
  border-top: 1px solid var(--hb-border-default);
}
.hb-order:first-of-type { border-top: none; padding-top: 0; }

.hb-order__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--hb-space-4);
  margin-bottom: var(--hb-space-6);
}

.hb-order__number {
  font-family: var(--hb-font-mono, ui-monospace, monospace);
  font-size: var(--hb-text-md);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.hb-order__date { margin: var(--hb-space-1) 0 0; font-size: var(--hb-text-xs); color: var(--hb-text-muted); }
.hb-order__sum { font-family: var(--hb-font-serif); font-size: var(--hb-text-xl); }

.hb-order__items {
  display: flex;
  align-items: center;
  gap: var(--hb-space-3);
  flex-wrap: wrap;
  margin-top: var(--hb-space-6);
}

/* Пропорция задаётся в разметке — по самой работе: у горизонтальных
   и квадратных работ общая квадратная рамка резала бы изображение. */
.hb-order__thumb {
  flex: none;
  width: 64px;
  overflow: hidden;
  background: var(--hb-bg-subtle);
}
.hb-order__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.hb-order__more {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--hb-space-2);
  font-size: var(--hb-text-sm);
  color: var(--hb-text-secondary);
}
.hb-order__more:hover { color: var(--hb-text-primary); }

.hb-order__section { margin-bottom: var(--hb-space-10); }
.hb-order__section:last-child { margin-bottom: 0; }

/* --- Путь заказа -------------------------------------------------------------

   Пять шагов в ряд, соединённых линией. Линия рисуется на самом шаге
   (::before), а не общим фоном: так она обрывается ровно между кружками
   и не выходит за края первого и последнего. */

.hb-track {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hb-track__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--hb-space-2);
  text-align: center;
  color: var(--hb-text-muted);
}

.hb-track__step::before {
  content: '';
  position: absolute;
  top: 15px;
  right: 50%;
  left: -50%;
  height: 1px;
  background: var(--hb-border-default);
}
.hb-track__step:first-child::before { content: none; }
.hb-track__step.is-done::before { background: var(--hb-primary-600); }

.hb-track__dot {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border: 1px solid var(--hb-border-default);
  border-radius: var(--hb-radius-pill);
  background: var(--hb-bg-surface);
  color: var(--hb-text-muted);
}

.hb-track__step.is-done .hb-track__dot {
  border-color: var(--hb-primary-600);
  color: var(--hb-primary-700);
}
.hb-track__step.is-current .hb-track__dot {
  background: var(--hb-primary-fill);
  border-color: var(--hb-primary-fill);
  color: var(--hb-text-on-fill);
}
.hb-track__step.is-done { color: var(--hb-text-secondary); }
.hb-track__step.is-current { color: var(--hb-text-primary); }

.hb-track__label { font-size: var(--hb-text-xs); }

@media (max-width: 560px) {
  .hb-track__label { font-size: 11px; letter-spacing: 0; }
  .hb-track__dot { width: 28px; height: 28px; }
  .hb-track__step::before { top: 13px; }
}

.hb-track__stopped {
  padding: var(--hb-space-4) var(--hb-space-5);
  border: 1px solid var(--hb-border-default);
  background: var(--hb-bg-subtle);
  font-size: var(--hb-text-sm);
  color: var(--hb-text-secondary);
}

/* ============================================================================
   Подменю растений: флажки, выбрать можно несколько
   ========================================================================== */

.hb-dropdown__button.is-active { color: var(--hb-primary-700); }

/* Панель вместо прежнего списка ссылок. Ширина фиксирована: названия
   растений короткие, и панель, прыгающая по ширине от набора, читается
   как сбой. */
.hb-dropdown__menu { width: 268px; display: flex; flex-direction: column; }

.hb-dropdown__list {
  display: flex;
  flex-direction: column;
  max-height: 264px;
  overflow-y: auto;
  margin: calc(var(--hb-space-1) * -1) 0 var(--hb-space-2);
}

.hb-dropdown__check {
  display: flex;
  align-items: center;
  gap: var(--hb-space-3);
  padding: var(--hb-space-2) var(--hb-space-3);
  border-radius: var(--hb-radius-sm);
  font-size: var(--hb-text-sm);
  color: var(--hb-text-primary);
  cursor: pointer;
}
.hb-dropdown__check:hover { background: var(--hb-bg-subtle); }

/* Родной флажок скрыт, но жив: работают пробел, Tab и скринридер.
   Рядом рисуется свой, который слушается общей палитры. */
.hb-dropdown__check input[type="checkbox"] {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.hb-dropdown__box {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  border: 1px solid var(--hb-border-strong);
  border-radius: 3px;
  color: var(--hb-text-on-fill);
  background: var(--hb-bg-surface);
}
.hb-dropdown__box svg { opacity: 0; }

.hb-dropdown__check input:checked ~ .hb-dropdown__box {
  background: var(--hb-primary-fill);
  border-color: var(--hb-primary-fill);
}
.hb-dropdown__check input:checked ~ .hb-dropdown__box svg { opacity: 1; }

/* Фокус с клавиатуры виден на всей строке, а не на скрытом флажке. */
.hb-dropdown__check:has(input:focus-visible) {
  outline: 2px solid var(--hb-focus-ring);
  outline-offset: -2px;
}

.hb-dropdown__name { flex: 1 1 auto; min-width: 0; }

.hb-dropdown__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hb-space-3);
  padding-top: var(--hb-space-2);
  border-top: 1px solid var(--hb-border-default);
}
.hb-dropdown__foot:has(> [hidden]:only-child) { display: none; }

.hb-dropdown__reset {
  font-size: var(--hb-text-xs);
  color: var(--hb-text-secondary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.hb-dropdown__reset:hover { color: var(--hb-text-primary); }

/* Браузеры без :has() — флажок показывается родной, на своём месте.
   Выбор при этом работает так же. */
@supports not selector(:has(*)) {
  .hb-dropdown__check input[type="checkbox"] {
    position: static;
    width: auto; height: auto;
    opacity: 1;
    pointer-events: auto;
  }
  .hb-dropdown__box { display: none; }
}

/* Строка фильтров витрины на главной: категории слева, растения справа.
   На узком экране подменю уходит под категории, а не сжимает их. */
.hb-collection-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hb-space-4);
  flex-wrap: wrap;
}
.hb-collection-tools .hb-pills { flex: 1 1 auto; }
.hb-collection-tools .hb-dropdown { flex: none; }

/* На главной подменю открывается у правого края — панель прижимается
   к нему, иначе она вылезала бы за пределы контейнера. */
.hb-collection-tools .hb-dropdown__menu { left: auto; right: 0; }

@media (max-width: 700px) {
  .hb-collection-tools .hb-dropdown__menu { left: 0; right: auto; }
}


/* ===========================================================================
   Примерочная — альтернативная страница работы
   ===========================================================================

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

   Рама и паспарту рисуются стилями, а не подставляются снимками: восемь рам
   на три паспарту на семь размеров — это больше сотни фотографий на каждую
   работу, и снять их некому. Размеры заданы в настоящих сантиметрах и
   переводятся в доли, поэтому багет на маленьком листе и выглядит толще.
   ========================================================================= */

/* Шапка поверх снимка. Класс ставит страница, макет о ней не знает. */
.hb-body--overlay .hb-header {
  position: absolute;
  inset: 0 0 auto 0;
  background: transparent;
  border-bottom: 0;
}

.hb-body--overlay .hb-header__inner { position: relative; z-index: 2; }

@media (max-width: 900px) {
  .hb-body--overlay .hb-header {
    position: sticky;
    background: var(--hb-bg-canvas);
    border-bottom: 1px solid var(--hb-border-default);
  }
}

.hb-studio { padding-bottom: var(--hb-space-10); }

/* --- Верхняя полоса --------------------------------------------------------
   Правая колонка уходит в край экрана, поэтому контейнер здесь не годится:
   отступ слева задаётся вручную тем же значением, что у .hb-container. */

.hb-studio__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 46%);
  align-items: stretch;
  min-height: min(88vh, 860px);
}

@media (max-width: 900px) {
  .hb-studio__top { grid-template-columns: minmax(0, 1fr); min-height: 0; }
}

/* --- Слева: работа --------------------------------------------------------- */

.hb-studio__piece {
  display: flex;
  flex-direction: column;
  padding: var(--hb-space-4) var(--hb-space-8) var(--hb-space-8)
           max(var(--hb-space-6), calc((100vw - var(--hb-container)) / 2));
}

@media (max-width: 900px) {
  .hb-studio__piece { padding: var(--hb-space-4) var(--hb-space-5) var(--hb-space-6); }
}

.hb-studio__bar {
  display: flex;
  align-items: center;
  gap: var(--hb-space-4);
  /* Полоса с хлебными крошками начинается ниже шапки: та лежит поверх. */
  margin-top: 56px;
  padding-bottom: var(--hb-space-4);
  font-size: var(--hb-text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .hb-studio__bar { margin-top: 0; }
}

.hb-studio__back,
.hb-studio__plain-link,
.hb-studio__crumbs a {
  display: inline-flex;
  align-items: center;
  gap: var(--hb-space-2);
  color: var(--hb-text-secondary);
  text-decoration: none;
  white-space: nowrap;
}

.hb-studio__back:hover,
.hb-studio__plain-link:hover,
.hb-studio__crumbs a:hover { color: var(--hb-text-primary); }

.hb-studio__plain-link { margin-left: auto; text-decoration: underline; text-underline-offset: 3px; }
.hb-studio__crumbs { min-width: 0; overflow: hidden; color: var(--hb-text-muted); }

@media (max-width: 640px) {
  .hb-studio__crumbs { display: none; }
}

.hb-studio__stage {
  flex: 1;
  display: grid;
  place-items: center;
  padding: clamp(var(--hb-space-4), 4vw, var(--hb-space-12)) 0;
}

/* --- Переключатель вида и размер -------------------------------------------
   Кружок с точкой, как в бумажной анкете: читается как выбор даже без цвета. */

.hb-studio__views,
.hb-studio__also-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hb-space-5);
}

.hb-studio__view {
  display: inline-flex;
  align-items: center;
  gap: var(--hb-space-2);
  font-size: var(--hb-text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hb-text-muted);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}

.hb-studio__view:hover,
.hb-studio__view.is-active { color: var(--hb-text-primary); }

.hb-studio__dot {
  width: 11px;
  height: 11px;
  border: 1px solid var(--hb-border-strong);
  border-radius: 50%;
  position: relative;
  flex: none;
}

.hb-studio__view.is-active .hb-studio__dot::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: var(--hb-primary-600);
}

.hb-studio__measure {
  margin: var(--hb-space-3) 0 0;
  font-size: var(--hb-text-sm);
  color: var(--hb-text-muted);
}

.hb-studio__measure-outer { white-space: nowrap; }

/* --- Работа в оформлении ---------------------------------------------------
   Три вложенных слоя: планка, паспарту, работа. Поля считаются в процентах
   от ширины коробки — поэтому один кусок разметки работает и крупно слева,
   и маленьким на стене. */

.hb-fit {
  --fit-frame-face: #E8E2D6;
  --fit-frame-edge: #D6CFC2;
  --fit-mat-tone: #F6F2E9;
  --fit-mat: 0;
  --fit-frame: 0;

  width: 100%;
  max-width: min(100%, 520px);
  filter: drop-shadow(0 18px 34px oklch(20% 0.02 50 / 0.16));
}

.hb-fit__frame {
  padding: calc(var(--fit-frame) * 100%);
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--fit-frame-face) 100%, white 12%) 0%,
      var(--fit-frame-face) 38%,
      var(--fit-frame-edge) 100%);
  box-shadow: inset 0 0 0 1px oklch(20% 0.02 50 / 0.16);
}

.hb-fit:not(.hb-fit--framed) .hb-fit__frame {
  padding: 0;
  background: none;
  box-shadow: none;
}

.hb-fit__mat {
  padding: calc(var(--fit-mat) * 100%);
  background: var(--fit-mat-tone);
  /* Фаска паспарту: без тонкой тени по внутреннему краю это просто белое
     поле, а не картонка с прорезью. */
  box-shadow: inset 0 0 0 1px oklch(20% 0.02 50 / 0.08);
}

.hb-fit:not(.hb-fit--matted) .hb-fit__mat {
  padding: 0;
  background: none;
  box-shadow: none;
}

.hb-fit__art {
  aspect-ratio: var(--fit-ratio, 3 / 4);
  overflow: hidden;
  background: var(--hb-bg-surface);
  box-shadow: 0 0 0 1px oklch(20% 0.02 50 / 0.10);
}

.hb-fit__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hb-fit__blank { display: block; width: 100%; height: 100%; background: var(--hb-bg-subtle); }

/* На стене работа маленькая: тень другая, и ограничение ширины снимается. */
.hb-fit--hung {
  max-width: none;
  filter: drop-shadow(0 8px 16px oklch(20% 0.02 50 / 0.32));
}

/* --- Справа: интерьер ------------------------------------------------------ */

.hb-studio__scene {
  position: relative;
  overflow: hidden;
  background: var(--hb-neutral-100);
  min-height: 420px;
}

.hb-studio__scene img,
.hb-studio__scene picture { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Затемнение под шапкой: иконки должны читаться и на светлом снимке,
   и на тёмном. Без него шапка местами исчезает. */
.hb-studio__scene::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 140px;
  background: linear-gradient(180deg, oklch(20% 0.02 50 / 0.28), transparent);
  pointer-events: none;
  z-index: 1;
}

@media (max-width: 900px) {
  .hb-studio__scene { min-height: 320px; aspect-ratio: 4 / 3; }
  .hb-studio__scene::before { display: none; }
}

/* Работа на стене. Ширина — доля от куска стены, помещающегося в кадр,
   поэтому выбор размера видно глазами, а не только в подписи. */
.hb-studio__hung {
  position: absolute;
  left: var(--hung-x, 50%);
  top: var(--hung-y, 40%);
  width: var(--hung-w, 18%);
  transform: translate(-50%, -50%);
  z-index: 1;
}

/* --- Карточка -------------------------------------------------------------- */

.hb-studio__card {
  position: absolute;
  /* Карточка прижата к правому краю и ограничена по ширине: слева от неё
     должна остаться видимой стена с работой — ради неё этот снимок здесь
     и стоит. */
  right: clamp(var(--hb-space-4), 5%, var(--hb-space-8));
  left: auto;
  width: min(400px, calc(100% - var(--hb-space-8) * 2));
  top: clamp(72px, 11%, 128px);
  z-index: 2;
  max-height: calc(100% - 180px);
  overflow-y: auto;
  padding: var(--hb-space-6);
  background: var(--hb-bg-surface);
  box-shadow: var(--hb-shadow-3);
  display: flex;
  flex-direction: column;
  gap: var(--hb-space-5);
}

@media (max-width: 1100px) {
  .hb-studio__card { width: min(340px, calc(100% - var(--hb-space-6) * 2)); padding: var(--hb-space-5); }
}

@media (max-width: 900px) {
  .hb-studio__card {
    position: static;
    width: auto;
    max-height: none;
    margin: calc(var(--hb-space-8) * -1) var(--hb-space-5) 0;
    z-index: 3;
  }
}

.hb-studio__state { display: contents; }

.hb-studio__meta { margin: 0; display: grid; gap: var(--hb-space-2); }

.hb-studio__meta-row {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: var(--hb-space-3);
  align-items: baseline;
  padding-bottom: var(--hb-space-2);
  border-bottom: 1px solid var(--hb-border-default);
}

.hb-studio__meta-row dt {
  font-family: var(--hb-font-mono);
  font-size: var(--hb-text-xs);
  letter-spacing: 0.06em;
  color: var(--hb-text-muted);
}

.hb-studio__meta-row dd { margin: 0; font-size: var(--hb-text-sm); text-align: right; }
.hb-studio__meta-row dd strong { font-weight: 600; }
.hb-studio__meta-row dd em { font-style: italic; }
.hb-studio__meta-row dd a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--hb-border-strong); }

.hb-studio__pane { display: flex; flex-direction: column; gap: var(--hb-space-4); }

.hb-studio__about {
  font-size: var(--hb-text-sm);
  line-height: 1.7;
  color: var(--hb-text-secondary);
  /* Описание в карточке подрезано: карточка лежит на снимке и не должна
     расти во весь экран. Полный текст — ниже, в характеристиках. */
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hb-studio__from { margin: 0; font-size: var(--hb-text-lg); font-weight: 600; }

/* --- Группы выбора --------------------------------------------------------- */

.hb-studio__group { border: 0; padding: 0; margin: 0; }

.hb-studio__legend {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--hb-space-3);
  width: 100%;
  padding: 0 0 var(--hb-space-3);
  font-family: var(--hb-font-mono);
  font-size: var(--hb-text-xs);
  letter-spacing: 0.06em;
  color: var(--hb-text-muted);
}

.hb-studio__chosen { font-family: var(--hb-font-sans); color: var(--hb-text-primary); font-size: var(--hb-text-sm); }

.hb-studio__kinds { display: grid; gap: var(--hb-space-2); }

.hb-studio__kind {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px var(--hb-space-3);
  padding: var(--hb-space-3) var(--hb-space-4);
  border: 1px solid var(--hb-border-default);
  border-radius: var(--hb-radius-sm);
  cursor: pointer;
}

.hb-studio__kind:hover { border-color: var(--hb-border-strong); }
.hb-studio__kind.is-active { border-color: var(--hb-primary-600); box-shadow: inset 0 0 0 1px var(--hb-primary-600); }
.hb-studio__kind.is-off { opacity: 0.55; }
.hb-studio__kind input { position: absolute; opacity: 0; pointer-events: none; }

.hb-studio__kind-name { font-size: var(--hb-text-sm); font-weight: 600; }
.hb-studio__kind-price { font-size: var(--hb-text-sm); white-space: nowrap; }
.hb-studio__kind-note { grid-column: 1 / -1; font-size: var(--hb-text-xs); color: var(--hb-text-muted); }

.hb-studio__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: var(--hb-space-2) var(--hb-space-3);
}

.hb-studio__grid--wide { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

.hb-studio__opt {
  display: inline-flex;
  align-items: center;
  gap: var(--hb-space-2);
  font-size: var(--hb-text-sm);
  cursor: pointer;
  padding: 2px 0;
  color: var(--hb-text-secondary);
}

.hb-studio__opt input { position: absolute; opacity: 0; pointer-events: none; }

.hb-studio__opt-mark {
  width: 11px;
  height: 11px;
  border: 1px solid var(--hb-border-strong);
  border-radius: 50%;
  position: relative;
  flex: none;
}

.hb-studio__opt.is-active { color: var(--hb-text-primary); }
.hb-studio__opt.is-active .hb-studio__opt-mark::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: var(--hb-primary-600);
}

.hb-studio__opt input:focus-visible + .hb-studio__opt-mark,
.hb-studio__swatch input:focus-visible + .hb-studio__chip {
  outline: 2px solid var(--hb-primary-500);
  outline-offset: 2px;
}

/* Рамы образцами. Название читается, а не угадывается по цвету: восемь
   коричневых квадратиков без подписей — лотерея, а не выбор. */
.hb-studio__swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--hb-space-3); }

.hb-studio__swatch {
  display: inline-flex;
  align-items: center;
  gap: var(--hb-space-2);
  font-size: var(--hb-text-sm);
  cursor: pointer;
  color: var(--hb-text-secondary);
}

.hb-studio__swatch input { position: absolute; opacity: 0; pointer-events: none; }
.hb-studio__swatch.is-active { color: var(--hb-text-primary); }

.hb-studio__chip {
  width: 24px;
  height: 24px;
  border-radius: 3px;
  flex: none;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--chip-face) 100%, white 14%) 0%,
    var(--chip-face) 45%,
    var(--chip-edge) 100%);
  box-shadow: inset 0 0 0 1px oklch(20% 0.02 50 / 0.2);
}

.hb-studio__swatch.is-active .hb-studio__chip {
  box-shadow: inset 0 0 0 1px oklch(20% 0.02 50 / 0.2), 0 0 0 2px var(--hb-primary-600);
}

.hb-studio__swatch-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* --- Цена и покупка -------------------------------------------------------- */

/* Цена и кнопка прилипают к низу карточки: список размеров и рам длинный,
   карточка прокручивается, и «в корзину» не должна уезжать из виду — иначе
   человек, долистав до конца, не понимает, куда нажимать. */
.hb-studio__price,
.hb-studio__pane--options [data-buy-kind] {
  position: sticky;
  bottom: 0;
  background: var(--hb-bg-surface);
  z-index: 1;
}

.hb-studio__price {
  margin: 0;
  padding-top: var(--hb-space-3);
  border-top: 1px solid var(--hb-border-default);
  font-size: var(--hb-text-xl);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.hb-studio__pane--options [data-buy-kind] { padding-bottom: var(--hb-space-2); }

@media (max-width: 900px) {
  /* На узком экране карточка не прокручивается сама — прилипать нечему. */
  .hb-studio__price,
  .hb-studio__pane--options [data-buy-kind] { position: static; }
}

.hb-studio__buy { display: grid; gap: var(--hb-space-3); }
.hb-studio__qty { display: flex; align-items: center; gap: var(--hb-space-3); font-size: var(--hb-text-sm); color: var(--hb-text-muted); }
.hb-studio__qty-select { width: auto; min-width: 64px; padding-block: 4px; }

.hb-studio__back-link,
.hb-studio__save {
  font-size: var(--hb-text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hb-text-muted);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--hb-space-2);
}

.hb-studio__back-link:hover,
.hb-studio__save:hover { color: var(--hb-text-primary); }
.hb-studio__save.is-saved { color: var(--hb-accent-600); }

.hb-studio__actions {
  display: flex;
  justify-content: flex-end;
  padding-top: var(--hb-space-3);
  border-top: 1px solid var(--hb-border-default);
}

/* --- Ниже: характеристики --------------------------------------------------- */

.hb-studio__below { padding-top: var(--hb-space-10); }

.hb-studio__specs {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--hb-space-4) var(--hb-space-6);
}

.hb-studio__spec dt {
  font-size: var(--hb-text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hb-text-muted);
}

.hb-studio__spec dd { margin: 2px 0 0; font-size: var(--hb-text-sm); }

.hb-studio__care,
.hb-studio__note { margin: var(--hb-space-5) 0 0; font-size: var(--hb-text-sm); color: var(--hb-text-secondary); line-height: 1.7; max-width: 76ch; }

.hb-studio__ship {
  display: flex;
  gap: var(--hb-space-2);
  margin: var(--hb-space-5) 0 0;
  font-size: var(--hb-text-sm);
  color: var(--hb-text-muted);
  line-height: 1.6;
  max-width: 76ch;
}

.hb-studio__ship svg { flex: none; margin-top: 3px; color: var(--hb-primary-500); }

/* --- Смотрите также --------------------------------------------------------- */

.hb-studio__also {
  padding: var(--hb-space-12) 0 var(--hb-space-16);
  border-top: 1px solid var(--hb-border-default);
  margin-top: var(--hb-space-10);
}

.hb-studio__also-title {
  margin: 0 0 var(--hb-space-5);
  font-family: var(--hb-font-serif);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 400;
}

.hb-studio__also-tabs { margin-bottom: var(--hb-space-6); }

/* --- Условная комната, пока нет снимка -------------------------------------- */

.hb-room {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--hb-neutral-100) 100%, white 42%) 0%,
    var(--hb-neutral-100) 64%);
}

.hb-room__floor {
  position: absolute;
  inset: 76% 0 0 0;
  background: color-mix(in srgb, var(--hb-neutral-200) 100%, white 16%);
  border-top: 2px solid color-mix(in srgb, var(--hb-neutral-300) 100%, white 8%);
}

.hb-room__console {
  position: absolute;
  /* Под работой, а не по центру кадра: работа висит левее середины. */
  left: 32%;
  bottom: 0;
  transform: translateX(-50%);
  width: 30%;
  height: 78%;
  background: color-mix(in srgb, var(--hb-neutral-300) 100%, white 6%);
}

.hb-room__console::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 7%;
  background: color-mix(in srgb, var(--hb-neutral-400) 100%, white 14%);
}

.hb-room__vase {
  position: absolute;
  left: 16%;
  bottom: 100%;
  width: 13%;
  height: 34%;
  background: color-mix(in srgb, var(--hb-neutral-400) 100%, white 4%);
  border-radius: 40% 40% 28% 28%;
}

@media (max-width: 560px) {
  .hb-studio__meta-row { grid-template-columns: minmax(0, 1fr); }
  .hb-studio__meta-row dd { text-align: left; }
  .hb-studio__specs { grid-template-columns: minmax(0, 1fr); }
}


/* ===========================================================================
   Страница работы: выбор и примерка на месте
   ===========================================================================

   Раскладка по макету: слева работа на своём фоне с вкладками «Отдельно» и
   «В интерьере», лентой снимков и подписью размера; справа колонка покупки
   аккордеоном. Служебная полоса и характеристики — от прежней страницы
   (.hb-pdp__*), чтобы не заводить второй набор того же самого.

   Холст слева фиксированной высоты, а не по снимку: при переключении рамы,
   размера и вида страница не должна прыгать под рукой.
   ========================================================================= */

.hb-product { border-top: 1px solid var(--hb-border-default); }

.hb-product__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 480px);
  align-items: start;
  border-bottom: 1px solid var(--hb-border-default);
}

@media (max-width: 1000px) {
  .hb-product__body { grid-template-columns: minmax(0, 1fr); }
}

/* --- Слева: работа ---------------------------------------------------------- */

.hb-product__stage {
  min-width: 0;
  padding: var(--hb-space-5) var(--hb-space-8) var(--hb-space-8);
  border-right: 1px solid var(--hb-border-default);
}

@media (max-width: 1000px) {
  .hb-product__stage { border-right: 0; border-bottom: 1px solid var(--hb-border-default); }
}

@media (max-width: 700px) {
  .hb-product__stage { padding: var(--hb-space-3) var(--hb-space-4) var(--hb-space-6); }
}

.hb-product__views {
  display: flex;
  gap: var(--hb-space-6);
  margin-bottom: var(--hb-space-4);
}

.hb-product__view {
  display: inline-flex;
  align-items: center;
  min-height: var(--hb-tap-min);
  border-bottom: 1px solid transparent;
  font-size: var(--hb-text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hb-text-muted);
  text-decoration: none;
}

.hb-product__view:hover { color: var(--hb-text-primary); }
.hb-product__view.is-active { color: var(--hb-text-primary); border-bottom-color: var(--hb-text-primary); }

.hb-product__canvas {
  --canvas-h: clamp(420px, 72vh, 820px);
  position: relative;
  height: var(--canvas-h);
  overflow: hidden;
  background: var(--hb-bg-subtle);
}

@media (max-width: 700px) {
  .hb-product__canvas { --canvas-h: clamp(320px, 62vh, 560px); }
}

.hb-product__pane { position: absolute; inset: 0; }
.hb-product__pane[hidden] { display: none; }

.hb-product__slot {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7%;
}

.hb-product__slot[hidden] { display: none; }

/* Работа вписывается и по ширине, и по высоте холста. Пропорция приходит
   из той же переменной, что и у самой работы, поэтому вертикальный лист
   не вылезает за низ, а горизонтальный — за бок. 0,72 — запас на поля
   паспарту и планку, которые рисуются снаружи работы. */
.hb-fit--stage {
  width: min(100%, calc(var(--canvas-h) * 0.72 * (var(--fit-ratio))));
  max-width: none;
}

.hb-product__slot--photo picture { display: contents; }

.hb-product__slot--photo img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(var(--canvas-h) * 0.86);
  box-shadow: var(--hb-shadow-2);
}

/* Комната повторяет пропорцию своего снимка, а не холста: положение работы
   на стене задано в долях кадра, и обрезка снимка увела бы её в сторону. */
.hb-product__pane--room {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hb-product__room {
  --room-ratio: 4 / 3;
  position: relative;
  width: min(100%, calc(var(--canvas-h) * (var(--room-ratio))));
  aspect-ratio: var(--room-ratio);
  overflow: hidden;
}

.hb-product__room > picture,
.hb-product__room > img,
.hb-product__room > picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-height: none;
}

.hb-product__room--blank { width: 100%; height: 100%; aspect-ratio: auto; }

.hb-product__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hb-space-2);
  margin-top: var(--hb-space-3);
}

.hb-product__thumb {
  display: block;
  width: 56px;
  height: 56px;
  padding: 2px;
  border: 1px solid var(--hb-border-default);
  background: var(--hb-bg-surface);
  overflow: hidden;
}

.hb-product__thumb:hover { border-color: var(--hb-border-strong); }
.hb-product__thumb.is-active { border: 2px solid var(--hb-text-primary); padding: 1px; }
.hb-product__thumb img { width: 100%; height: 100%; object-fit: cover; }

.hb-product__caption,
.hb-product__room-note {
  margin: var(--hb-space-3) 0 0;
  text-align: center;
  font-size: var(--hb-text-xs);
  color: var(--hb-text-secondary);
  letter-spacing: 0.02em;
}

.hb-product__room-note { margin-top: var(--hb-space-1); color: var(--hb-text-muted); }

/* --- Справа: колонка покупки ------------------------------------------------ */

.hb-product__side {
  padding: var(--hb-space-6) var(--hb-space-8) var(--hb-space-10);
}

@media (max-width: 700px) {
  .hb-product__side { padding: var(--hb-space-6) var(--hb-space-4) var(--hb-space-8); }
}

.hb-product__side .hb-pdp__title { margin-bottom: var(--hb-space-1); }

.hb-product__subtitle {
  display: flex;
  align-items: center;
  gap: var(--hb-space-2);
  margin: 0 0 var(--hb-space-6);
  font-size: var(--hb-text-sm);
  color: var(--hb-text-secondary);
}

/* --- Аккордеон -------------------------------------------------------------
   Родной <details>: открывается и закрывается без скриптов, с клавиатуры
   и скринридером — ничего дописывать не нужно. */

.hb-acc { border-top: 1px solid var(--hb-border-default); }
.hb-acc__item { border-bottom: 1px solid var(--hb-border-default); }

.hb-acc__head {
  display: flex;
  align-items: center;
  gap: var(--hb-space-3);
  min-height: 52px;
  list-style: none;
  font-size: var(--hb-text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hb-text-primary);
  cursor: pointer;
}

.hb-acc__head::-webkit-details-marker { display: none; }

.hb-acc__head::after {
  content: '';
  flex: none;
  width: 7px;
  height: 7px;
  margin-left: auto;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--hb-duration-base) var(--hb-ease);
  color: var(--hb-text-muted);
}

.hb-acc__item[open] > .hb-acc__head::after { transform: translateY(2px) rotate(-135deg); }
.hb-acc__head:hover { color: var(--hb-primary-700); }
.hb-acc__head:focus-visible { outline: 2px solid var(--hb-focus-ring); outline-offset: 2px; }

/* Выбранное значение видно и в свёрнутом пункте: свернуть «Оформление»
   не значит забыть, что выбрано. */
.hb-acc__value {
  min-width: 0;
  margin-left: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--hb-text-sm);
  letter-spacing: 0;
  text-transform: none;
  color: var(--hb-text-secondary);
}

.hb-acc__head:has(.hb-acc__value)::after { margin-left: 0; }

.hb-acc__body {
  display: flex;
  flex-direction: column;
  gap: var(--hb-space-4);
  padding-bottom: var(--hb-space-5);
}

.hb-product__about {
  font-size: var(--hb-text-sm);
  line-height: 1.75;
  color: var(--hb-text-secondary);
}

.hb-acc__body .hb-pdp__plants { margin: 0; }

.hb-product__hint {
  margin: 0;
  font-size: var(--hb-text-xs);
  line-height: 1.6;
  color: var(--hb-text-muted);
}

.hb-product__hint[hidden] { display: none; }

/* --- Оригинал или репродукция ---------------------------------------------- */

.hb-product__kinds {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--hb-space-2);
}

.hb-product__kind {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 56px;
  padding: var(--hb-space-2) var(--hb-space-3);
  border: 1px solid var(--hb-border-strong);
  background: var(--hb-bg-surface);
  text-align: center;
  cursor: pointer;
}

.hb-product__kind input,
.hb-product__size input,
.hb-product__frame input,
.hb-product__mat input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.hb-product__kind-name {
  font-size: var(--hb-text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hb-product__kind-note { font-size: var(--hb-text-xs); color: var(--hb-text-muted); }

.hb-product__kind:hover { border-color: var(--hb-text-secondary); }

.hb-product__kind.is-active,
.hb-product__size.is-active,
.hb-product__mat.is-active {
  background: var(--hb-primary-fill);
  border-color: var(--hb-primary-fill);
  color: var(--hb-text-on-fill);
}

.hb-product__kind.is-active .hb-product__kind-note,
.hb-product__size.is-active .hb-product__size-price,
.hb-product__mat.is-active .hb-product__mat-price { color: color-mix(in srgb, var(--hb-text-on-fill) 78%, transparent); }

.hb-product__kind.is-off {
  cursor: not-allowed;
  background: transparent;
  border-style: dashed;
  color: var(--hb-text-muted);
}

/* Фокус с клавиатуры виден на всей плашке, а не на скрытой радиокнопке. */
.hb-product__kind:has(input:focus-visible),
.hb-product__size:has(input:focus-visible),
.hb-product__mat:has(input:focus-visible),
.hb-product__frame:has(input:focus-visible) .hb-product__chip {
  outline: 2px solid var(--hb-focus-ring);
  outline-offset: 2px;
}

/* --- Оформление ------------------------------------------------------------- */

.hb-product__design { gap: var(--hb-space-5); }

.hb-product__group { margin: 0; padding: 0; border: 0; min-width: 0; }
.hb-product__group[hidden] { display: none; }

.hb-product__legend {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--hb-space-3);
  width: 100%;
  margin: 0 0 var(--hb-space-3);
  padding: 0;
  font-size: var(--hb-text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hb-text-muted);
}

.hb-product__chosen {
  font-size: var(--hb-text-xs);
  letter-spacing: 0;
  text-transform: none;
  color: var(--hb-text-primary);
}

.hb-product__sizes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: var(--hb-space-2);
}

.hb-product__size {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 52px;
  padding: var(--hb-space-2) var(--hb-space-1);
  border: 1px solid var(--hb-border-strong);
  background: var(--hb-bg-surface);
  cursor: pointer;
}

.hb-product__size:hover { border-color: var(--hb-text-secondary); }
.hb-product__size-name { font-size: var(--hb-text-sm); font-variant-numeric: tabular-nums; }
.hb-product__size-price { font-size: var(--hb-text-xs); color: var(--hb-text-muted); }

/* Рамы — образцами с подписью: восемь коричневых квадратиков без названий —
   лотерея, а не выбор. */
.hb-product__frames {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
  gap: var(--hb-space-3) var(--hb-space-2);
}

.hb-product__frame {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--hb-space-1);
  cursor: pointer;
  text-align: center;
}

.hb-product__chip {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 2px;
  color: transparent;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--chip-face) 100%, white 14%) 0%,
    var(--chip-face) 45%,
    var(--chip-edge) 100%);
  box-shadow: inset 0 0 0 1px oklch(20% 0.02 50 / 0.2);
}

.hb-product__frame.is-bare .hb-product__chip {
  background:
    repeating-linear-gradient(135deg, transparent 0 5px, var(--hb-border-strong) 5px 6px),
    var(--hb-bg-surface);
}

.hb-product__frame.is-active .hb-product__chip {
  color: #fff;
  box-shadow: inset 0 0 0 1px oklch(20% 0.02 50 / 0.2), 0 0 0 2px var(--hb-bg-canvas), 0 0 0 3px var(--hb-text-primary);
}

.hb-product__frame.is-active .hb-product__chip svg { filter: drop-shadow(0 0 1.5px rgb(0 0 0 / 0.6)); }
.hb-product__frame.is-bare.is-active .hb-product__chip { color: var(--hb-text-primary); }
.hb-product__frame.is-bare.is-active .hb-product__chip svg { filter: none; }

.hb-product__frame-name {
  font-size: var(--hb-text-xs);
  line-height: 1.25;
  color: var(--hb-text-secondary);
}

.hb-product__frame.is-active .hb-product__frame-name { color: var(--hb-text-primary); }

.hb-product__mats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: var(--hb-space-2);
}

.hb-product__mat {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2px var(--hb-space-1);
  min-height: 44px;
  padding: var(--hb-space-2);
  border: 1px solid var(--hb-border-strong);
  background: var(--hb-bg-surface);
  font-size: var(--hb-text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
}

.hb-product__mat:hover { border-color: var(--hb-text-secondary); }
.hb-product__mat-price { color: var(--hb-text-muted); letter-spacing: 0; }

/* Без рамы паспарту некуда поставить — плашки гаснут, но не исчезают:
   иначе человек не узнает, что паспарту вообще бывает. */
.hb-product__mat:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.5;
  background: transparent;
}

/* --- Итог, количество, покупка ------------------------------------------------ */

.hb-product__sum {
  margin: var(--hb-space-5) 0 0;
  display: grid;
  gap: var(--hb-space-2);
}

.hb-product__sum[hidden] { display: none; }

.hb-product__sum-row {
  display: flex;
  justify-content: space-between;
  gap: var(--hb-space-4);
  font-size: var(--hb-text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hb-text-secondary);
}

.hb-product__sum-row[hidden] { display: none; }
.hb-product__sum-row dd { margin: 0; letter-spacing: 0; font-size: var(--hb-text-sm); color: var(--hb-text-primary); font-variant-numeric: tabular-nums; }

.hb-product__sum-row--total {
  align-items: baseline;
  margin-top: var(--hb-space-2);
  padding-top: var(--hb-space-3);
  border-top: 1px solid var(--hb-border-default);
  font-family: var(--hb-font-serif);
  font-size: var(--hb-text-md);
  letter-spacing: 0;
  text-transform: none;
  color: var(--hb-text-primary);
}

.hb-product__sum-row--total dd { font-size: var(--hb-text-xl); }

.hb-product__buy {
  display: grid;
  gap: var(--hb-space-3);
  margin-top: var(--hb-space-5);
}

.hb-product__buy[hidden] { display: none; }

.hb-product__qty-row { display: flex; align-items: center; gap: var(--hb-space-3); }
.hb-product__qty-note { font-size: var(--hb-text-xs); color: var(--hb-text-muted); }

.hb-qty {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--hb-border-strong);
  background: var(--hb-bg-surface);
}

.hb-qty__btn {
  display: grid;
  place-items: center;
  width: 40px;
  min-height: 40px;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: var(--hb-text-md);
  color: var(--hb-text-secondary);
  cursor: pointer;
}

.hb-qty__btn:hover { color: var(--hb-text-primary); background: var(--hb-bg-subtle); }

.hb-qty__input {
  display: grid;
  place-items: center;
  width: 44px;
  border: 0;
  border-inline: 1px solid var(--hb-border-default);
  background: none;
  text-align: center;
  font-family: inherit;
  font-size: var(--hb-text-sm);
  color: var(--hb-text-primary);
  -moz-appearance: textfield;
  appearance: textfield;
}

.hb-qty__input::-webkit-outer-spin-button,
.hb-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* У оригинала количества нет — он один. Счётчик показан погашенным, чтобы
   строка не прыгала при переключении, и подписан «единственный экземпляр». */
.hb-qty.is-locked { opacity: 0.45; }
.hb-qty.is-locked .hb-qty__btn { cursor: default; }
.hb-qty.is-locked .hb-qty__btn:hover { background: none; color: var(--hb-text-secondary); }

.hb-product__cta {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: var(--hb-space-2);
}

.hb-product__cta .hb-btn { min-height: 48px; letter-spacing: 0.12em; text-transform: uppercase; font-size: var(--hb-text-xs); }
.hb-product__cta-form { display: contents; }

.hb-product__heart {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--hb-border-strong);
  background: var(--hb-bg-surface);
  color: var(--hb-text-secondary);
  cursor: pointer;
}

.hb-product__heart:hover { color: var(--hb-accent-600); border-color: var(--hb-text-secondary); }
.hb-product__heart.is-saved { color: var(--hb-accent-600); }
.hb-product__heart:focus-visible { outline: 2px solid var(--hb-focus-ring); outline-offset: 2px; }

.hb-product__unavailable {
  margin: 0;
  font-size: var(--hb-text-xs);
  color: var(--hb-text-muted);
}

.hb-product__info {
  display: flex;
  gap: var(--hb-space-3);
  margin-top: var(--hb-space-5);
  padding: var(--hb-space-3) var(--hb-space-4);
  border: 1px solid var(--hb-border-default);
  font-size: var(--hb-text-xs);
  line-height: 1.6;
  color: var(--hb-text-secondary);
}

.hb-product__info svg { flex: none; margin-top: 1px; color: var(--hb-text-muted); }
.hb-product__info [hidden] { display: none; }

/* --- Ниже: характеристики и коллекция -------------------------------------- */

.hb-product__more { padding-block: var(--hb-space-10) var(--hb-space-12); }

.hb-tabbed--wide { border-top: 0; padding-top: 0; }
.hb-tabbed--wide .hb-tabbed__labels {
  gap: var(--hb-space-8);
  border-bottom: 1px solid var(--hb-border-default);
  margin-bottom: var(--hb-space-6);
}
.hb-tabbed--wide .hb-tabbed__label { padding-inline: var(--hb-space-1); margin-bottom: -1px; border-bottom-width: 2px; }
.hb-tabbed--wide .hb-tabbed__panel { max-width: 76ch; }
.hb-tabbed--wide .hb-pdp__care + .hb-pdp__care { margin-top: var(--hb-space-3); }

.hb-tabbed__radio:nth-of-type(3):checked ~ .hb-tabbed__labels .hb-tabbed__label:nth-child(3) {
  color: var(--hb-text-primary);
  border-bottom-color: var(--hb-primary-600);
}
.hb-tabbed__radio:nth-of-type(3):checked ~ .hb-tabbed__panel--third { display: block; }

.hb-product__specs { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

.hb-product__more-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--hb-space-4);
}

.hb-product__more-head .hb-pdp__more-title { margin-bottom: var(--hb-space-6); }

.hb-product__browse {
  margin-bottom: var(--hb-space-6);
  font-size: var(--hb-text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hb-secondary-700);
  text-decoration: none;
  white-space: nowrap;
}

.hb-product__browse:hover { color: var(--hb-text-primary); }

/* --- Переключатель «оригинал или репродукция» над аккордеоном -------------- */

.hb-product__kind-block {
  display: flex;
  flex-direction: column;
  gap: var(--hb-space-4);
  margin-bottom: var(--hb-space-6);
}

/* Работа продаётся одним видом: переключатель виден, но не нажимается.
   Выбранный вид остаётся залитым — это ответ, а не вопрос. */
.hb-product__kind-block.is-locked .hb-product__kind { cursor: default; }
.hb-product__kind-block.is-locked .hb-product__kind:hover { border-color: var(--hb-border-strong); }
.hb-product__kind-block.is-locked .hb-product__kind.is-active:hover { border-color: var(--hb-primary-fill); }

/* --- Частые вопросы ---------------------------------------------------------- */

.hb-product__faq {
  padding-block: var(--hb-space-12) var(--hb-space-16);
  border-top: 1px solid var(--hb-border-default);
}

.hb-faq { border-top: 1px solid var(--hb-border-default); }
.hb-faq__item { border-bottom: 1px solid var(--hb-border-default); }

.hb-faq__q {
  display: flex;
  align-items: center;
  gap: var(--hb-space-4);
  min-height: 56px;
  list-style: none;
  font-size: var(--hb-text-base);
  font-weight: 500;
  color: var(--hb-text-primary);
  cursor: pointer;
}

.hb-faq__q::-webkit-details-marker { display: none; }

.hb-faq__q::after {
  content: '';
  flex: none;
  width: 7px;
  height: 7px;
  margin-left: auto;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--hb-duration-base) var(--hb-ease);
  color: var(--hb-text-muted);
}

.hb-faq__item[open] > .hb-faq__q::after { transform: translateY(2px) rotate(-135deg); }
.hb-faq__q:hover { color: var(--hb-primary-700); }
.hb-faq__q:focus-visible { outline: 2px solid var(--hb-focus-ring); outline-offset: 2px; }

.hb-faq__a {
  max-width: 72ch;
  padding-bottom: var(--hb-space-5);
  font-size: var(--hb-text-sm);
  line-height: 1.75;
  color: var(--hb-text-secondary);
}

/* Переключатель — два слова, без цен и статусов. */
.hb-product__kind { min-height: 48px; }

/* Строка «Размер» у оригинала: размер виден, но раскрывать нечего. */
.hb-acc__item--static .hb-acc__head { cursor: default; }
.hb-acc__item--static .hb-acc__head:hover { color: var(--hb-text-primary); }
.hb-acc__item--static .hb-acc__head::after { visibility: hidden; }
.hb-acc__item--static .hb-acc__value { color: var(--hb-text-primary); }

/* --- Переключатель (switch) -------------------------------------------------
   Выбор одного из нескольких — «Оригинал / Репродукция», вид паспарту.
   Плоский, как весь интерфейс: дорожка с тонкой рамкой, без теней,
   скругление то же, что у кнопок (--hb-radius-sm). От кнопок отличается
   тем, что варианты сидят в одной общей рамке, а выбранный отмечен светлой
   зелёной плашкой, которая переезжает к нему. Плашку двигает CSS по
   отмеченной радиокнопке (:has), поэтому переключатель работает и без
   скриптов. Цвета — из токенов, поэтому тёмная тема подхватывается сама. */

.hb-switch {
  --n: 2;
  --i: 0;
  --switch-pad: 3px;
  --switch-thumb: color-mix(in srgb, var(--hb-primary-fill) 14%, var(--hb-bg-surface));
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  padding: var(--switch-pad);
  border: 1px solid var(--hb-border-strong);
  border-radius: var(--hb-radius-sm);
  background: var(--hb-bg-surface);
}

.hb-switch--3 { --n: 3; }

.hb-switch::before {
  content: '';
  position: absolute;
  top: var(--switch-pad);
  bottom: var(--switch-pad);
  left: var(--switch-pad);
  width: calc((100% - var(--switch-pad) * 2) / var(--n));
  border: 1px solid color-mix(in srgb, var(--hb-primary-fill) 40%, transparent);
  border-radius: 2px;
  background: var(--switch-thumb);
  transform: translateX(calc(var(--i) * 100%));
  transition: transform 220ms var(--hb-ease);
}

.hb-switch:has(> .hb-switch__opt:nth-child(2) input:checked) { --i: 1; }
.hb-switch:has(> .hb-switch__opt:nth-child(3) input:checked) { --i: 2; }

/* Варианты сбрасывают вид прежних плашек-кнопок: рамка и заливка здесь
   не нужны, их роль играет переезжающая плашка. */
.hb-switch .hb-switch__opt,
.hb-switch .hb-switch__opt.is-active,
.hb-switch .hb-switch__opt.is-off {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: var(--hb-space-2) var(--hb-space-3);
  border: 0;
  border-radius: 2px;
  background: none;
  font-size: var(--hb-text-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  text-align: center;
  color: var(--hb-text-secondary);
  cursor: pointer;
  transition: color var(--hb-duration-fast) var(--hb-ease);
}

.hb-switch .hb-switch__opt:hover { color: var(--hb-text-primary); }
.hb-switch .hb-switch__opt:has(input:checked) { color: var(--hb-primary-700); font-weight: 600; }
.hb-switch .hb-switch__opt.is-off { color: var(--hb-text-muted); cursor: not-allowed; }
.hb-switch .hb-switch__opt:has(input:focus-visible) { outline: 2px solid var(--hb-focus-ring); outline-offset: -2px; }

/* Заблокирован: работа продаётся одним видом, или паспарту без рамы. */
.hb-switch.is-locked .hb-switch__opt { cursor: default; }
.hb-switch.is-locked .hb-switch__opt:hover { color: inherit; }
.hb-switch[data-mat-switch].is-locked { opacity: 0.5; }
.hb-switch[data-mat-switch].is-locked::before { background: var(--hb-bg-subtle); border-color: var(--hb-border-default); }

/* Браузеры без :has() — плашка не переезжает, выбранный вариант
   подсвечивается сам (класс ставит сервер и скрипт). */
@supports not selector(:has(*)) {
  .hb-switch::before { display: none; }
  .hb-switch .hb-switch__opt.is-active { background: var(--switch-thumb); color: var(--hb-primary-700); }
}


/* --- Галерея: растения метками ----------------------------------------------
   Метки идут друг за другом и переносятся в несколько рядов — весь выбор
   виден сразу, без прокрутки списка. Выбранная — сплошной заливкой, как
   активная категория строкой выше. */

.hb-cat-tools { align-items: flex-start; }

.hb-plantbar {
  display: flex;
  flex: 1 1 520px;
  min-width: 0;
}

.hb-plantbar[open] { display: block; }

.hb-plantbar__head {
  display: inline-flex;
  align-items: center;
  gap: var(--hb-space-2);
  min-height: 30px;
  margin-bottom: var(--hb-space-2);
  list-style: none;
  font-size: var(--hb-text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hb-text-secondary);
  cursor: pointer;
}

.hb-plantbar__head::-webkit-details-marker { display: none; }
.hb-plantbar__head:hover { color: var(--hb-text-primary); }
.hb-plantbar__head svg { transition: transform var(--hb-duration-fast) var(--hb-ease); }
.hb-plantbar:not([open]) .hb-plantbar__head { margin-bottom: 0; }
.hb-plantbar:not([open]) .hb-plantbar__head svg { transform: rotate(180deg); }
.hb-plantbar__count { color: var(--hb-secondary-700); letter-spacing: 0; }

.hb-plantbar__tags {
  display: flex;
  flex-wrap: wrap;
  /* По горизонтали шаг больше: остриё каждой метки выступает влево на
     половину её высоты и без запаса заходило бы на соседнюю. */
  gap: 8px 20px;
  margin: 0;
  /* Отступ слева — под остриё первой метки в ряду. */
  padding: 2px 0 var(--hb-space-3) 14px;
  list-style: none;
}

/* --- Метка растения в форме ценника -----------------------------------------
   Меньше и тише категорий строкой выше: строчные буквы, тонкая обводка без
   заливки, приглушённый текст. Форма — бирка: острие слева и дырочка под
   шнурок. Острие — повёрнутый квадрат с двумя сторонами рамки; он лежит
   поверх левого края метки, поэтому левой рамки у самой метки нет. */

.hb-ptag {
  --tag-h: 26px;
  --tag-line: var(--hb-border-strong);
  --tag-fill: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--tag-h);
  padding: 0 9px 0 13px;
  border: 1px solid var(--tag-line);
  border-left: 0;
  border-radius: 0 3px 3px 0;
  background: var(--tag-fill);
  font-size: 0.8125rem;   /* 13px — на ступень мельче категорий по весу */
  line-height: 1;
  color: var(--hb-text-secondary);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--hb-duration-fast) var(--hb-ease),
              border-color var(--hb-duration-fast) var(--hb-ease),
              background-color var(--hb-duration-fast) var(--hb-ease);
}

/* Острие: квадрат со стороной h/√2, повёрнутый на 45°, — его диагональ
   ровно в высоту метки. Видны только левая и нижняя стороны, они и дают «<». */
.hb-ptag::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: calc(var(--tag-h) * 0.7071);
  height: calc(var(--tag-h) * 0.7071);
  border-left: 1px solid var(--tag-line);
  border-bottom: 1px solid var(--tag-line);
  border-radius: 0 0 0 2px;
  background: var(--tag-fill);
  transform: translate(-50%, -50%) rotate(45deg);
  transition: inherit;
}

/* Дырочка под шнурок. */
.hb-ptag::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 2px;
  width: 4px;
  height: 4px;
  border: 1px solid var(--tag-line);
  border-radius: 50%;
  background: var(--hb-bg-canvas);
  transform: translateY(-50%);
}

.hb-ptag__name { position: relative; }

.hb-ptag__count {
  position: relative;
  font-size: var(--hb-text-xs);
  color: var(--hb-text-muted);
  font-variant-numeric: tabular-nums;
}

.hb-ptag:hover {
  --tag-line: var(--hb-text-secondary);
  color: var(--hb-text-primary);
}

.hb-ptag:focus-visible { outline: 2px solid var(--hb-focus-ring); outline-offset: 3px; }

/* Выбранная — заливкой, как активная категория. */
.hb-ptag[aria-current="true"] {
  --tag-line: var(--hb-primary-fill);
  --tag-fill: var(--hb-primary-fill);
  color: var(--hb-text-on-fill);
}

.hb-ptag[aria-current="true"] .hb-ptag__count { color: color-mix(in srgb, var(--hb-text-on-fill) 70%, transparent); }
.hb-ptag[aria-current="true"]:hover { --tag-line: var(--hb-primary-fill-hover); --tag-fill: var(--hb-primary-fill-hover); }

.hb-ptag.is-hidden { display: none; }

/* Поиск по меткам. */
.hb-plantbar__find {
  display: flex;
  align-items: center;
  gap: var(--hb-space-2);
  max-width: 260px;
  margin: 0 0 var(--hb-space-3);
  padding: 0 var(--hb-space-1);
  border-bottom: 1px solid var(--hb-border-default);
  color: var(--hb-text-muted);
}

.hb-plantbar__find[hidden] { display: none; }

.hb-plantbar__input {
  flex: 1;
  min-width: 0;
  height: 30px;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--hb-text-sm);
  color: var(--hb-text-primary);
  outline: none;
}

.hb-plantbar__input::placeholder { color: var(--hb-text-muted); }
.hb-plantbar__find:focus-within { border-bottom-color: var(--hb-text-secondary); }

.hb-cat-tools .hb-sort { padding-top: 0; }

.hb-cat-count strong { font-weight: 500; color: var(--hb-text-primary); }

.hb-cat-count__reset {
  margin-left: var(--hb-space-3);
  font-size: var(--hb-text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hb-secondary-700);
  text-decoration: none;
}

.hb-cat-count__reset:hover { color: var(--hb-text-primary); }

/* --- Список ошибок формы (partials/form-errors.php) --------------------------
   Блок над формой: что не так и ссылка на каждое поле. Плоский, как
   остальные сообщения; фокус от скрипта — рамкой, а не тенью. */
.hb-errsum { display: block; margin-bottom: var(--hb-space-6); }
.hb-errsum[hidden] { display: none; }
.hb-errsum:focus { outline: 2px solid var(--hb-error-500); outline-offset: 2px; }
.hb-errsum__title { margin: 0 0 var(--hb-space-2); font-weight: 600; }
.hb-errsum__list { margin: 0; padding-left: 1.2em; display: grid; gap: var(--hb-space-1); }
.hb-errsum__list a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.hb-errsum__list a:hover { text-decoration-thickness: 2px; }

/* Галочка согласия с ошибкой: у неё нет рамки поля, поэтому выделяется
   сама строка — иначе ошибку внизу формы легко не заметить. */
.hb-checkbox[data-invalid="true"] { color: var(--hb-error-700); }
.hb-checkbox[data-invalid="true"] input { outline: 2px solid var(--hb-error-500); outline-offset: 2px; }
.hb-error[hidden] { display: none; }

/* --- Текстовые страницы (pages/static.php): оферта, доставка, политика ----- */
.hb-doc { max-width: 76ch; }
.hb-doc__body { font-size: var(--hb-text-md); line-height: 1.75; color: var(--hb-text-secondary); }
.hb-doc__body h2 {
  margin: var(--hb-space-8) 0 var(--hb-space-3);
  font-size: var(--hb-text-xl);
  color: var(--hb-text-primary, inherit);
}
.hb-doc__body p { margin: 0 0 var(--hb-space-4); }
.hb-doc__body ul, .hb-doc__body ol { margin: 0 0 var(--hb-space-4); padding-left: 1.3em; display: grid; gap: var(--hb-space-2); }

/* Реквизиты продавца в подвале — мелко, но читаемо: их ищут модерация
   платёжного сервиса и внимательный покупатель, а не каждый посетитель. */
.hb-footer__legal { flex-basis: 100%; color: var(--hb-text-muted); }
.hb-footer__links { display: inline-flex; flex-wrap: wrap; gap: var(--hb-space-4); }
.hb-checkout__terms { display: block; }
.hb-checkout__terms a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.hb-footer__bottom { align-items: center; }


/* --- Главная: витрина ---------------------------------------------------------
   Категории, под ними метки растений — тот же блок, что в галерее. */
.hb-collection-pills { margin-bottom: var(--hb-space-4); }
.hb-collection-plants { margin-bottom: var(--hb-space-8); }

/* --- Поиск в шапке ------------------------------------------------------------ */
.hb-search { position: relative; }
.hb-search > summary { list-style: none; cursor: pointer; }
.hb-search > summary::-webkit-details-marker { display: none; }
.hb-search[open] > summary { color: var(--hb-text-primary); background: var(--hb-bg-subtle); }
.hb-search__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  display: flex;
  gap: var(--hb-space-2);
  width: min(420px, calc(100vw - 32px));
  padding: var(--hb-space-3);
  background: var(--hb-bg-surface);
  border: 1px solid var(--hb-border-default);
  border-radius: var(--hb-radius-sm);
}
.hb-search__input { flex: 1 1 auto; min-width: 0; }
@media (max-width: 700px) {
  .hb-search__panel { position: fixed; top: 64px; left: 16px; right: 16px; width: auto; }
}