/* ============================================================================
   Verdo · маркетплейс (mobile + desktop)
   Бежевая палитра + зелёные акценты
   ============================================================================ */

/* Локальные шрифты (самохостинг, без Google Fonts — скорость и доступность в РФ) */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/montserrat-v31-cyrillic_latin-regular.woff2') format('woff2');}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/montserrat-v31-cyrillic_latin-500.woff2') format('woff2');}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/montserrat-v31-cyrillic_latin-600.woff2') format('woff2');}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/montserrat-v31-cyrillic_latin-700.woff2') format('woff2');}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/playfair-display-v40-cyrillic_latin-regular.woff2') format('woff2');}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/playfair-display-v40-cyrillic_latin-700.woff2') format('woff2');}

:root {
  /* ── Botanical Premium palette (light) ─────────────────────────── */
  --bg:          #F7FCEF;
  --surface:     #FFFFFF;
  --surface-2:   #EEF4E2;
  --surface-3:   #E2EDCF;
  --text:        #0B2C16;
  --text-2:      #3C5A45;
  --text-muted:  #5F7565;  /* затемнён с #6F8472: 4.02→4.98:1 на белом — AA для мелкого текста (10-11px подписи) */

  --primary:      #1C7735;
  --primary-deep: #0F5A26;
  --primary-dark: #01270E;
  --accent:       #F2BF29;
  --accent-ink:   #83680A;   /* золото как ТЕКСТ на светлом фоне — тёмная бронза; затемнена с #9A7B0A: 3.65→4.82:1 на accent-soft (AA) */
  --accent-soft:  #FDF4D2;
  --lime:         #99C806;   /* лайм — активные бейджи, новинки */
  --rose:         #db2777;   /* уведомления, горячие лоты */
  --danger:       #dc2626;
  /* «Чернильные» варианты — цвет как ТЕКСТ на фоне темы (в dark свои, ярче) */
  --green-ink:  #0F5A26;   /* цены/суммы/зелёные ссылки: 8.4:1 на белом */
  --danger-ink: #dc2626;   /* красный текст (кнопки удаления, ошибки) */
  --rose-ink:   #db2777;   /* розовый текст (чипы избранного) */

  --border:   #DDE7CD;
  --border-2: #C4D4AA;
  --border-input: #AFC493;  /* границы полей ввода — заметнее декоративных (--border 1.28:1 → 1.89:1 на белом) */
  --shadow:    0 2px 10px rgba(11, 44, 22, 0.07);
  --shadow-lg: 0 12px 40px rgba(11, 44, 22, 0.16);

  --radius: 14px;
  --radius-sm: 10px;

  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

html[data-theme="dark"] {
  /* ── Botanical Premium palette (dark) ──────────────────────────── */
  --bg:          #07160D;
  --surface:     #102A1A;
  --surface-2:   #1B3D26;
  --surface-3:   #24492F;
  --text:        #F2F7EA;
  --text-2:      #C3D6C0;
  --text-muted:  #8AA08C;

  --primary:      #3DA85A;
  --primary-deep: #1C7735;
  --accent:       #F2BF29;
  --accent-ink:   #F2BF29;   /* в тёмной теме золото и так читается — оставляем ярким */
  --accent-soft:  rgba(242,191,41,0.16);
  --lime:         #A8DA16;
  --green-ink:  #4CBF6C;   /* 6.6:1 на surface — цены читаются (primary-deep давал 2.7:1) */
  --danger-ink: #F87171;   /* 5.6:1 (танго-красный #dc2626 на тёмном — 3.2:1) */
  --rose-ink:   #F472B6;   /* 5.8:1 */

  --border:   #284A33;
  --border-2: #3C6147;
  --border-input: #3C6147;  /* в тёмной теме = border-2, светло-зелёный из light сюда не протекает */
  --shadow:    0 2px 10px rgba(0,0,0,0.45);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.65);
}

/* Тёмная тема: переопределения для элементов с захардкоженным светлым фоном */
html[data-theme="dark"] .auth {
  background:
    radial-gradient(circle at 80% 10%, rgba(168,218,22,0.12), transparent 50%),
    radial-gradient(circle at 10% 90%, rgba(61,168,90,0.14), transparent 50%),
    linear-gradient(180deg, #102A1A 0%, #07160D 100%);
}
html[data-theme="dark"] .auction-card {
  background: linear-gradient(135deg, #1B3D26, #24492F);
  border-color: var(--accent);
}
html[data-theme="dark"] .auction-history { background: var(--surface-2); }
/* Главная кнопка: на ярком #3DA85A белый текст = 3.0:1 → глубокий зелёный фон, 5.6:1 */
html[data-theme="dark"] .btn--primary { background: var(--primary-deep); }
html[data-theme="dark"] .btn--primary:active { background: #0F5A26; }
/* «Заказ отменён»: убираем светло-розовый остров из светлой темы */
html[data-theme="dark"] .order-timeline--cancelled {
  background: rgba(220,38,38,0.14); border-color: rgba(248,113,113,0.35); color: var(--danger-ink);
}

/* accent-soft в тёмной теме уже задан в html[data-theme="dark"] выше */
/* Тёмная тема: поля чекбоксов с accent-soft */
html[data-theme="dark"] .field--row[style*="accent-soft"],
html[data-theme="dark"] [style*="accent-soft"] {
  background: rgba(217,119,6,0.15) !important;
}
/* Точка непрочитанного — окантовка по фону */
html[data-theme="dark"] .unread-dot {
  border: 2px solid var(--surface);
}
/* Список сообщений — фон треда в тёмной теме */
html[data-theme="dark"] .message-thread:hover {
  background: var(--surface-2);
}
/* alert-блок в тёмной теме */
html[data-theme="dark"] .alert {
  background: var(--surface-2);
  border-color: var(--border-2);
  color: var(--text-2);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg); color: var(--text);
  /* Офлайн-APK: позже заменить на @font-face локальные файлы */
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* iPhone в альбомной ориентации сам раздувает шрифт в узких колонках — из-за этого цена и
     кнопка на карточке товара разъезжаются, стоит человеку повернуть телефон. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overscroll-behavior-y: none;
}
body { min-height: 100vh; min-height: 100dvh; }   /* dvh: на телефоне 100vh не учитывает адресную строку */

/* Поля ввода на мобильном — не меньше 16px.
   Safari на iPhone АВТОМАТИЧЕСКИ увеличивает страницу при фокусе в поле со шрифтом <16px, и обратно
   она уже не возвращается: появляется горизонтальная прокрутка, шапка уезжает. Касалось входа,
   регистрации, поиска, чекаута, чата — то есть всех ключевых сценариев.

   🔴 `!important` ОБЯЗАТЕЛЕН (02.09.2026, проверка перед снятием заглушки). Без него правило
   защищало только поля, размер которых задан в этом файле. Но 29 полей в app.js несут размер
   инлайном (13–14px), а инлайн бьёт таблицу стилей — и ровно эти поля продолжали зумить экран:
   переписка по заказу, ответ в споре, ответ покупателю на отзыв, настройки магазина, заявка
   нового продавца, ставка за баннер. То есть защита стояла везде, кроме мест, где ей быть важнее
   всего. Ловится только на живом айфоне, потому и прожило незамеченным.
   ⚠️ Правило намеренно широкое: любое новое поле с мелким инлайновым шрифтом будет прикрыто
   автоматически, без необходимости помнить про это правило. */
@media (max-width: 767px) {
  .field input, .field textarea, .field select, .search,
  input[type="text"], input[type="email"], input[type="password"], input[type="search"],
  input[type="number"], input[type="tel"], input[type="date"], input[type="datetime-local"],
  input[type="time"], input:not([type]), textarea, select {
    font-size: 16px !important;
  }
}

/* ===== Поле категории с подсказками =====
   Печатаешь — под полем появляется список найденного, щёлкаешь по строке — она встаёт в поле.
   ⚠️ Подсказки нарисованы обычными кнопками, а не <option>: системный список select на iOS
   рисуется операционной системой, не подчиняется стилям и не даёт кликать «по подсказке» так,
   как человек ожидает. Именно на этом сломалось первое решение. */
.cat-pick { position: relative; }
.cat-pick input { width: 100%; padding-right: 34px; }
.cat-pick__clear {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; cursor: pointer; padding: 6px;
  font-size: 14px; line-height: 1; color: var(--text-muted);
}
.cat-pick__clear:hover { color: var(--text); }
.cat-pick__list {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30;
  max-height: 260px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(11, 44, 22, 0.14);
  -webkit-overflow-scrolling: touch;
}
.cat-pick__item {
  display: block; width: 100%; text-align: left;
  background: none; border: 0; cursor: pointer;
  padding: 10px 12px; font-family: inherit; font-size: 15px; color: var(--text);
  border-bottom: 1px solid var(--border);
}
.cat-pick__item:last-child { border-bottom: 0; }
.cat-pick__item:hover, .cat-pick__item:focus { background: var(--surface-2); outline: none; }
.cat-pick__empty { padding: 10px 12px; font-size: 13px; color: var(--text-muted); }

/* ===== Полоска «вышло обновление» =====
   Показывается тем, кто держит вкладку открытой сутками и потому не видит новую версию (см.
   checkForUpdate в app.js). Намеренно НЕ модальное окно: обновление — не срочная новость, человек
   должен иметь возможность дочитать страницу и нажать «Обновить», когда удобно.
   ⚠️ z-index ниже модалок (35) и подтверждений (2000): полоска не должна перекрывать то, с чем
   человек сейчас работает. Снизу поднята над нижней навигацией и безопасной зоной айфона —
   иначе на телефоне её накрыло бы панелью вкладок. */
.update-bar {
  position: fixed; z-index: 21;   /* выше нижней навигации (20), ниже модалок (35) */
  left: 12px; right: 12px;
  bottom: calc(72px + var(--safe-bottom));
  display: flex; align-items: center; gap: 10px;
  padding: 10px 10px 10px 14px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 6px 24px rgba(11, 44, 22, 0.16);
  animation: updateBarIn .2s ease-out;
}
.update-bar__text { flex: 1; font-size: 14px; font-weight: 600; }
.update-bar__close { width: 32px; height: 32px; font-size: 15px; flex: none; }
@keyframes updateBarIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .update-bar { animation: none; } }
@media (min-width: 768px) {
  /* На десктопе нижней навигации нет — полоска садится в правый угол и не занимает всю ширину. */
  .update-bar { left: auto; right: 20px; bottom: 20px; max-width: 380px; }
}

.is-hidden { display: none !important; }
.muted { color: var(--text-muted); }
.small { font-size: 13px; }
.center { text-align: center; }
.row { display: flex; align-items: center; gap: 8px; }
.spacer { flex: 1; }

/* ===== Шапка ===== */
.app-header {
  position: sticky; top: 0; z-index: 10;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: calc(10px + var(--safe-top)) 14px 10px;
}
.app-header__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.app-header__title { margin: 0; font-size: 20px; font-weight: 700; flex: 1; }
.app-header__actions { display: flex; gap: 2px; align-items: center; }
.icon-btn {
  background: transparent; border: none;
  width: 40px; height: 40px; border-radius: 10px;
  color: var(--text); display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 19px; position: relative;
}
.icon-btn:active { background: var(--surface-2); }
.bell-dot {
  position: absolute; top: 8px; right: 9px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--rose); border: 2px solid var(--surface);
}

/* ===== Auth-экран ===== */
.auth {
  min-height: 100vh;
  min-height: 100dvh;            /* учитывает выезжающую панель браузера на телефоне */
  background:
    radial-gradient(circle at 80% 10%, rgba(153,200,6,0.18), transparent 50%),
    radial-gradient(circle at 10% 90%, rgba(28,119,53,0.14), transparent 50%),
    linear-gradient(180deg, #EEF4E2 0%, #DDE7CD 100%);
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: calc(40px + var(--safe-top)) 20px calc(20px + var(--safe-bottom));
  color: var(--text);
}
/* Футер прижимается к низу, когда есть место; при нехватке — контент просто
   прокручивается (страница скроллится естественно) */
.auth .auth-footer-links { margin-top: auto; }
@media (max-width: 767px) {
  .auth { padding-top: calc(20px + var(--safe-top)); }
  .auth__logo { width: 120px; height: 120px; border-radius: 24px; }
  .auth__title { font-size: 28px; margin: 12px 0 4px; }
  .auth__card { margin: 14px auto; }
}
.auth__hero { text-align: center; }
.auth__logo { width: 220px; height: 220px; border-radius: 36px; box-shadow: var(--shadow-lg); object-fit: cover; margin-bottom: 8px; }
/* Брендовый лок-ап: канонический лист + слитная двухцветная надпись «VerdoMarket» (Playfair). */
.auth__logo-lockup { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 10px; }
.auth__leaf { width: 150px; height: 150px; object-fit: contain; }
.auth__wordmark { font-family: "Playfair Display", Georgia, serif; font-weight: 700; font-size: 42px; letter-spacing: -0.01em; line-height: 1; }
@media (max-width: 767px) { .auth__leaf { width: 120px; height: 120px; } .auth__wordmark { font-size: 34px; } }
/* Двухцветность бренда: Market всегда лайм; Verdo — тёмно-зелёный на светлом, кремовый на тёмном. */
.auth__wordmark .v, .ds-logo strong .v { color: #1a6131; }
.auth__wordmark .m, .ds-logo strong .m { color: #8fc11a; }
html[data-theme="dark"] .auth__wordmark .v, html[data-theme="dark"] .ds-logo strong .v { color: #f4efe1; }
.auth__title { margin: 18px 0 4px; font-size: 38px; font-weight: 700; letter-spacing: -0.02em; font-family: "Playfair Display", Georgia, serif; }
.auth__tagline { margin: 0; opacity: 0.8; max-width: 320px; margin-inline: auto; font-size: 14px; }
.auth__card {
  background: var(--surface); border-radius: 20px; padding: 24px 22px;
  margin: 20px auto; box-shadow: var(--shadow-lg);
  width: 100%; max-width: 400px;
}
.auth__tabs { display: flex; background: var(--surface-2); border-radius: 10px; padding: 3px; margin-bottom: 16px; }
.auth__tab {
  flex: 1; background: transparent; border: none; padding: 8px 12px;
  border-radius: 8px; font-weight: 600; color: var(--text-muted); cursor: pointer;
}
.auth__tab.is-active { background: var(--surface); color: var(--green-ink); box-shadow: var(--shadow); }

/* ===== Поля ===== */
.field { display: block; margin-bottom: 12px; }
.field--row { display: flex; align-items: center; gap: 10px; }
.field--row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--primary); }
.field__label {
  display: block; font-size: 12px; font-weight: 700;
  color: var(--text-muted); margin-bottom: 5px;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.field input[type="text"], .field input[type="email"], .field input[type="password"],
.field input[type="search"], .field input[type="number"], .field input[type="time"],
.field input[type="date"], .field input[type="datetime-local"], .field input[type="tel"],
.field input:not([type]),
.field textarea, .field select, .search {
  width: 100%; background: var(--surface-2);
  border: 1px solid var(--border-input); border-radius: 10px;
  color: var(--text); font-size: 15px; padding: 11px 14px;
  font-family: inherit; outline: none;
}
.field input:focus, .field textarea:focus, .field select:focus, .search:focus {
  border-color: var(--primary); background: var(--surface);
}
.field textarea { resize: vertical; min-height: 80px; border-radius: 14px; }

/* Поле пароля с кнопкой-глазиком */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { width: 100%; padding-right: 44px; box-sizing: border-box; }
.pw-eye {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; cursor: pointer; padding: 6px;
  font-size: 18px; line-height: 1; opacity: 0.65;
}
.pw-eye:hover { opacity: 1; }

/* === Единый стиль ВСЕХ textarea (в т.ч. вне .field) ===
   Скруглённые углы, тянутся только по вертикали, не вылезают за контейнер вправо.
   Инлайн-стили конкретных полей при необходимости переопределяют это. */
textarea {
  border-radius: 14px;
  resize: vertical;
  max-width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  line-height: 1.45;
  background: var(--surface-2);
  border: 1px solid var(--border-input);
  color: var(--text);
  padding: 11px 14px;
  font-size: 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(28, 119, 53, 0.12);
}
/* Чат-поля, которые намеренно без ручного ресайза, оставляем как есть */
textarea[style*="resize:none"], textarea[style*="resize: none"] { resize: none; }
.field-hint { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.field-count { font-size: 11px; color: var(--text-muted); text-align: right; margin-top: 2px; }
.search { margin-bottom: 12px; }

/* Группа полей в одной строке */
.field-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* 🔴 БЕЗ ЭТОГО СТРАНИЦА ЕЗДИТ ВБОК НА УЗКИХ ЭКРАНАХ (найдено 19.08.2026, Safari на iPhone).
   Элемент CSS-сетки по умолчанию имеет `min-width: auto` — он не может стать уже своего
   содержимого. У `input` собственная минимальная ширина считается от атрибута `size` (около
   двадцати символов), и `width: 100%` её НЕ побеждает: сто процентов берутся от колонки, а колонка
   раздувается под поле. Две такие колонки требуют больше ширины, чем есть у телефона, сетка
   вылезает за экран — и вся страница начинает ездить из стороны в сторону.
   Лечится `min-width: 0`: он разрешает колонке и полю сжиматься. Заметно только на узких экранах,
   поэтому на большом мониторе такую верстку можно годами не увидеть. */
.field-grid-2 > * { min-width: 0; }
.field-grid-2 input, .field-grid-2 select, .field-grid-2 textarea { min-width: 0; }

/* ===== Кнопки ===== */
.btn {
  border: none; border-radius: 12px;
  padding: 12px 18px; font-size: 15px; font-weight: 600;
  cursor: pointer; font-family: inherit;
  transition: opacity 0.15s, transform 0.1s;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.btn:active { transform: scale(0.97); }
.btn--primary { background: var(--primary); color: #fff; }
.btn--primary:active { background: var(--primary-deep); }
.btn--accent  { background: var(--accent); color: #0B2C16; } /* был #fff — 1.71:1 нечитаемо на золоте; тёмный = 8.84:1 */
.btn--ghost   { background: transparent; color: var(--green-ink); }
.btn--outline { background: transparent; color: var(--text); border: 1px solid var(--border-2); }
.btn--danger  { background: var(--danger); color: #fff; }
.btn--block   { width: 100%; }
.btn--small   { padding: 7px 12px; font-size: 14px; }
/* состояние disabled — единое правило ниже, в блоке ТЗ-4 (.btn:disabled, .btn[disabled]) */

/* ===== Role select ===== */
.role-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.role-btn {
  text-align: left; background: var(--surface-2);
  border: 2px solid transparent; border-radius: 12px;
  padding: 10px 12px; color: var(--text); cursor: pointer; font-family: inherit;
}
.role-btn strong { display: block; font-size: 13px; margin-bottom: 2px; }
.role-btn span { font-size: 11px; color: var(--text-muted); }
.role-btn.is-selected { border-color: var(--primary); background: var(--surface); }

/* ===== Основная область ===== */
.main { padding: 12px 14px calc(80px + var(--safe-bottom)); }
.screen { animation: fadeIn 0.2s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ===== Каталог: баннер магазина ===== */
.shop-banner {
  background: linear-gradient(135deg, var(--primary), var(--primary-deep));
  color: #fff; border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 12px;
  display: flex; align-items: center; gap: 12px; cursor: pointer;
}
.shop-banner__icon {
  width: 48px; height: 48px; border-radius: 14px;
  background: rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center; font-size: 24px;
}
.shop-banner__title { font-weight: 700; font-size: 16px; display: flex; align-items: center; gap: 6px; }
.shop-banner__sub { font-size: 12px; opacity: 0.9; }
.shop-banner__sub-row { display: flex; gap: 12px; margin-top: 2px; }
.shop-banner__follow {
  background: rgba(255,255,255,0.2); color: #fff;
  border: 1px solid rgba(255,255,255,0.4); border-radius: 999px;
  padding: 5px 12px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.shop-banner__follow.is-following { background: var(--accent); border-color: var(--accent); color: #0B2C16; } /* тёмный текст на золоте вместо унаследованного #fff */

/* ===== Сетка растений ===== */
.plants-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (min-width: 640px) { .plants-grid { grid-template-columns: repeat(3, 1fr); } }

.plant-card {
  background: var(--surface); border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(11,44,22,0.08), 0 1px 3px rgba(11,44,22,0.05);
  border: 1px solid var(--border); cursor: pointer;
  display: flex; flex-direction: column;
  transition: transform 0.18s, box-shadow 0.18s;
}
.plant-card:hover { box-shadow: 0 6px 24px rgba(11,44,22,0.13), 0 2px 8px rgba(11,44,22,0.07); transform: translateY(-2px); }
.plant-card:active { transform: scale(0.98); }
.plant-card__img {
  aspect-ratio: 1;
  background: linear-gradient(145deg, var(--surface-2), var(--surface-3));
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.plant-placeholder__leaf { width:46%;height:46%;opacity:0.42;flex-shrink:0; }
.plant-placeholder__cat {
  position:absolute;bottom:6px;left:0;right:0;
  text-align:center;font-size:10px;font-weight:700;
  color:var(--text-muted);letter-spacing:0.07em;
  text-transform:uppercase;line-height:1;pointer-events:none;
}
.plant-card__img::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(28,119,53,0.12), transparent 65%);
}
.plant-card__status {
  position: absolute; top: 8px; left: 8px;
  padding: 3px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 700;
  background: rgba(255,255,255,0.92); color: #0F5A26; /* подложка всегда белая — фикс. тёмный, НЕ green-ink */
  text-transform: uppercase; letter-spacing: 0.05em;
  /* Префикс -webkit- нужен для Safari: без него размытие на iPhone просто не применяется. */
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.plant-card__status--reserved { background: var(--accent); color: #0B2C16; }
.plant-card__status--sold { background: var(--text-muted); color: #fff; }
.plant-card__status--auction { background: var(--rose); color: #fff; }
/* Кнопка «быстро в корзину» — правый нижний угол плитки */
.plant-card__cart {
  position: absolute; bottom: 8px; right: 8px;
  width: 38px; height: 38px; border-radius: 50%; /* был 34px — увеличена тач-цель */
  background: var(--primary); color: #fff; border: 1.5px solid var(--accent); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 23px; line-height: 1; z-index: 2;
  box-shadow: 0 2px 6px rgba(0,0,0,0.28);
  transition: transform 0.15s, background 0.15s;
}
.plant-card__cart:hover { transform: scale(1.12); }
.plant-card__cart:disabled { background: var(--text-muted); cursor: default; box-shadow: none; }

/* Кнопка «в избранное» */
.plant-card__fav {
  position: absolute; top: 8px; right: 8px;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,0.88); border: 1.5px solid var(--accent); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; line-height: 1; transition: transform 0.15s, background 0.15s;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); color: var(--text-muted);
  z-index: 1; overflow: hidden;
  padding-bottom: 1px;
}
.plant-card__fav:hover { transform: scale(1.12); background: #fff; }
.plant-card__fav.is-fav { color: var(--rose); }
html[data-theme="dark"] .plant-card__fav { background: rgba(7,22,13,0.82); color: var(--text-muted); border-color: var(--accent); }
html[data-theme="dark"] .plant-card__fav:hover { background: rgba(27,61,38,0.95); }
html[data-theme="dark"] .plant-card__fav.is-fav { color: var(--rose); }
.plant-card__body { padding: 12px 14px 16px; }
.plant-card__name { font-size: 14px; font-weight: 600; line-height: 1.3; margin-bottom: 2px; }
.plant-card__latin { font-size: 12px; color: var(--text-muted); font-style: italic; margin-bottom: 8px; }
.plant-card__price { font-size: 16px; font-weight: 700; color: var(--green-ink); }

/* ===== Bottom Nav ===== */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 20;
  background: var(--surface);
  border-top: 1px solid var(--border);
  display: grid; grid-template-columns: repeat(5, 1fr);
  padding-bottom: max(10px, var(--safe-bottom));
  box-shadow: 0 -4px 20px rgba(91, 67, 30, 0.06);
}
.nav-btn {
  background: transparent; border: none; padding: 10px 4px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: var(--text-muted); cursor: pointer; font-family: inherit;
  font-size: 11px; font-weight: 500; position: relative;
}
.nav-btn.is-active { color: var(--primary); }
.nav-btn:active { background: var(--surface-2); }
.nav-btn svg { stroke: currentColor; }
.nav-btn__badge {
  position: absolute; top: 4px; right: calc(50% - 18px);
  background: var(--rose); color: #fff;
  font-size: 9px; font-weight: 700; padding: 0 5px;
  height: 16px; line-height: 16px; border-radius: 999px;
  min-width: 16px; text-align: center;
}

/* Пока открыт любой полноэкранный слой — страница под ним не прокручивается.
   Сделано на CSS через :has(), а не флагом в JS: слои открываются и закрываются из десятка мест,
   и любой пропущенный вызов оставил бы страницу заблокированной. Здесь состояние всегда совпадает
   с реальной видимостью слоя. Старые браузеры без :has() просто ведут себя как раньше.
   ВАЖНО: экран входа/регистрации сюда НЕ входит — там форма выше экрана и её низ нужно доскроллить. */
html:has(#modal-screen:not(.is-hidden)),
html:has(#chat-screen:not(.is-hidden)),
html:has(#ann-screen:not(.is-hidden)),
html:has(#notif-screen:not(.is-hidden)) {
  overflow: hidden;
}

/* Поле, на которое ругнулась форма: подсвечиваем, чтобы человек не искал его глазами по длинной
   карточке товара. Снимается по первому вводу (см. toastField в app.js). */
.field-invalid {
  border-color: var(--danger-ink, #F87171) !important;
  box-shadow: 0 0 0 3px rgba(248, 113, 113, .18);
  animation: fieldShake .3s ease-out;
}
@keyframes fieldShake {
  0%, 100% { transform: translateX(0) }
  25% { transform: translateX(-4px) }
  75% { transform: translateX(4px) }
}

/* ===== Сообщение администрации (модалка при заходе) =====
   Ровно по центру экрана, затемнение вокруг, закрытие крестом или щелчком мимо карточки.
   z-index 45 — выше общих модалок (40): объявление показывается на входе, до того как человек
   что-то откроет, и перекрывать его нечему. Ниже док-оверлея и просмотрщика фото. */
.ann-screen {
  position: fixed; inset: 0; z-index: 45;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  /* Затемнение усилено 20.08.2026 (0.55 → 0.62, в тёмной теме 0.74). Окно «сливалось с фоном» —
     и дело было не в яркости рамки: чем темнее фон вокруг, тем сильнее выступает карточка,
     причём без единой кричащей линии. */
  background: rgba(11, 44, 22, 0.62);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  animation: annFade .16s ease-out;
}
html[data-theme="dark"] .ann-screen { background: rgba(3, 10, 6, 0.74); }
.ann-screen.is-hidden { display: none; }
@keyframes annFade { from { opacity: 0 } to { opacity: 1 } }
.ann-card {
  position: relative;
  width: 100%; max-width: 460px;
  max-height: calc(100vh - 32px); overflow-y: auto;
  background: var(--surface); color: var(--text);
  /* Рамка + фирменная золотая полоса по верху (решение владельца 20.08.2026). Полоса даёт окну
     узнаваемость и цепляет взгляд, не обводя весь периметр яркой линией: объявление чаще рядовое
     («перерыв в отправках»), и кричать одинаково громко про всё — быстрый путь к тому, что окно
     перестанут читать. */
  border: 1px solid var(--border-2);
  border-top: 3px solid var(--accent);
  border-radius: 14px; padding: 22px 20px 18px;
  box-shadow: 0 18px 48px rgba(11, 44, 22, .28);
  animation: annPop .18s ease-out;
}
/* 🔴 В ТЁМНОЙ ТЕМЕ ПОДЛОЖКА НА ТОН СВЕТЛЕЕ — ЭТО И БЫЛА ПРИЧИНА «СЛИВАЕТСЯ С ФОНОМ».
   `--surface` там #102A1A, а фон страницы #07160D: разница почти неразличима, и никакая рамка
   этого не чинит — она лишь обводит невидимое. `--surface-2` (#1B3D26) поднимает карточку над
   фоном, как это уже сделано для истории аукциона. В светлой теме окно остаётся белым. */
html[data-theme="dark"] .ann-card { background: var(--surface-2); }
@keyframes annPop { from { transform: translateY(8px) scale(.98); opacity: .6 } to { transform: none; opacity: 1 } }
.ann-card__close { position: absolute; top: 8px; right: 8px; }
.ann-card__from {
  font-size: 11px; letter-spacing: .02em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 6px; padding-right: 28px;
}
.ann-card__title { margin: 0 0 10px; font-size: 18px; line-height: 1.25; padding-right: 28px; }
/* Перенос по словам обязателен: в объявление вставляют ссылки и артикулы без пробелов, и без
   этого длинная строка растянула бы карточку за край экрана на телефоне. */
.ann-card__body {
  font-size: 14px; line-height: 1.5; color: var(--text-2);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.ann-card__foot { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }

/* ===== Modal screens (полноэкранные модалки) ===== */
.modal-screen {
  /* z-index ВЫШЕ чата (.chat-screen=35): модалка, открытая ИЗ чата (напр. «Выдать промокод»),
     должна ложиться поверх диалога, а не под него. Ниже намеренно-верхних слоёв (док-оверлей 1980,
     просмотрщик фото, баннеры режима просмотра). */
  position: fixed; inset: 0; z-index: 40;
  background: var(--bg); overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;        /* прокрутка модалки не «протекает» на страницу под ней */
  padding-bottom: calc(20px + var(--safe-bottom));
}
.detail-header {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  background: var(--surface); border-bottom: 1px solid var(--border);
  padding: calc(8px + var(--safe-top)) 8px 8px;
}
.detail-header__title { font-weight: 600; font-size: 15px; flex: 1; text-align: center; }
.detail-body { padding: 14px 16px; }

/* Липкая панель покупки на карточке товара.
   На телефоне кнопка «В корзину» раньше стояла обычным блоком в середине страницы: после фото,
   описания, блока магазина и условий доставки её приходилось искать прокруткой. Теперь на мобильном
   она прилипает к низу экрана вместе с ценой. На десктопе — обычный блок, там страница видна целиком. */
.buy-bar { display: flex; align-items: center; gap: 10px; }
.buy-bar .btn { flex: 1; margin: 0; }
.buy-bar__price { display: none; font-weight: 700; font-size: 17px; white-space: nowrap; }
@media (max-width: 767px) {
  .buy-bar {
    position: sticky; bottom: 0; z-index: 4;
    margin: 10px -16px 0;                 /* на всю ширину .detail-body (padding 14px 16px) */
    padding: 10px 16px calc(10px + var(--safe-bottom));
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 14px rgba(0,0,0,0.07);
  }
  .buy-bar__price { display: block; }
}

/* «Сегодня» — мобильный экран действий продавца. На телефоне кабинет не должен быть уменьшенным
   десктопом: нужны отгрузка, ответы и быстрое добавление товара, остальное удобнее с компьютера.
   На десктопе блок скрыт — там слева полное меню разделов. */
.sdash-today { display: none; }
@media (max-width: 767px) {
  .sdash-today { display: block; margin: 0 0 14px; }
  .sdash-today__title { font-weight: 700; font-size: 15px; margin: 0 0 8px; }
  .sdash-today__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .sdash-today__btn {
    position: relative;
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
    min-height: 64px; padding: 10px 12px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
    color: var(--text); font-family: inherit; font-size: 13px; font-weight: 600;
    text-align: left; cursor: pointer;
  }
  .sdash-today__btn:active { background: var(--surface-2); }
  .sdash-today__icon { font-size: 20px; line-height: 1; }
  .sdash-today__badge {
    position: absolute; top: 8px; right: 10px;
    background: var(--rose); color: #fff;
    font-size: 11px; font-weight: 700; line-height: 18px;
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; text-align: center;
  }
}

/* Вход в «Магазины» из каталога (в нижней панели это место занято корзиной).
   На десктопе не нужен — там магазины в боковом меню. */
.catalog-shops-link { display: none; }
@media (max-width: 767px) { .catalog-shops-link { display: inline-flex; } }

/* ===== Карточка растения (детальная) ===== */
.plant-hero {
  aspect-ratio: 1; background: linear-gradient(145deg, var(--surface-2), var(--surface-3));
  border-radius: var(--radius); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  position: relative; margin-bottom: 16px;
}
.plant-hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(16,185,129,0.2), transparent 65%);
}
.plant-title { font-size: 22px; font-weight: 700; margin: 0 0 4px; font-family: "Playfair Display", Georgia, serif; }
.plant-latin { font-style: italic; color: var(--text-muted); margin: 0 0 10px; font-size: 14px; }
.plant-price-row {
  display: flex; align-items: baseline; justify-content: space-between; margin: 16px 0;
}
.plant-price { font-size: 28px; font-weight: 800; color: var(--green-ink); }
.plant-status {
  font-size: 12px; font-weight: 700;
  padding: 6px 12px; border-radius: 999px;
  background: var(--surface-2); color: var(--green-ink);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.plant-section {
  background: var(--surface); border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 12px;
  border: 1px solid var(--border);
}
.plant-section h4 { margin: 0 0 8px; font-size: 14px; font-weight: 700; }
.plant-section p { margin: 0; font-size: 14px; line-height: 1.5; }
.plant-care-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.care-item { background: var(--surface-2); border-radius: 10px; padding: 10px 12px; }
.care-item__label { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 2px; }
.care-item__value { font-size: 14px; font-weight: 600; }

/* ===== Empty state ===== */
.empty-state {
  text-align: center; padding: 40px 20px;
  background: var(--surface); border-radius: var(--radius);
  border: 1px dashed var(--border-2);
}
.empty-state__icon { font-size: 56px; margin-bottom: 12px; }
.empty-state h3 { margin: 0 0 6px; }
.empty-state p { margin: 0; color: var(--text-muted); font-size: 14px; }

/* ===== Профиль ===== */
.profile { padding: 4px 0; }
.profile__head {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface); border-radius: var(--radius);
  padding: 16px; margin-bottom: 16px; box-shadow: var(--shadow);
  border: 1px solid var(--border);
}
.profile__avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-deep));
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; color: #fff;
}
.profile__name { font-weight: 700; font-size: 17px; }
.profile__role { font-size: 13px; color: var(--text-muted); }
.profile__section { margin-bottom: 18px; }
.profile__section h4 {
  margin: 0 0 8px; font-size: 11px; font-weight: 700;
  color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em;
  padding-left: 14px;
}
.row-btn {
  width: 100%; background: var(--surface);
  border: 1px solid var(--border); border-top: none;
  padding: 14px 16px; text-align: left;
  display: flex; justify-content: space-between; align-items: center;
  cursor: pointer; color: var(--text); font-size: 14px; font-family: inherit;
}
.row-btn:first-child { border-radius: var(--radius) var(--radius) 0 0; border-top: 1px solid var(--border); }
.row-btn:last-child  { border-radius: 0 0 var(--radius) var(--radius); }
.row-btn:hover { background: var(--surface-2); }
.row-btn--danger { color: var(--rose); }

/* ===== Кнопка «Кабинет» в боковой навигации ===== */
.ds-nav__btn--seller {
  border: 1.5px solid var(--primary);
  color: var(--green-ink);
  font-weight: 700;
  background: rgba(16,185,129,0.06);
}
.ds-nav__btn--seller:hover { background: rgba(16,185,129,0.12) !important; color: var(--green-ink) !important; }
.ds-nav__btn--seller.is-active { background: var(--primary) !important; color: #fff !important; border-color: var(--primary) !important; }
.ds-nav__btn--admin {
  border-color: var(--accent) !important;
  color: var(--green-ink) !important;
  background: rgba(242,191,41,0.08) !important;
}
.ds-nav__btn--admin:hover { background: rgba(242,191,41,0.15) !important; }
.ds-nav__btn--admin.is-active { background: var(--primary-dark) !important; color: var(--accent) !important; border-color: var(--accent) !important; }
.ds-nav__divider { height: 1px; background: var(--border); margin: 4px 6px 8px; }

/* ===== Кабинет продавца (.sdash) — стили ниже, в разделе «Двухколоночный layout»
   (~стр. 1330). Здесь был полный дубликат блока — вычищен 04.07.2026 (UI-аудит §3.2):
   второй блок и так перекрывал этот, рендер не изменился. ===== */

/* ===== Страница магазина ===== */
.shop-page__top {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 0 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.shop-page__url {
  flex: 1; font-size: 12px; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.shop-page__url a { color: var(--green-ink); text-decoration: none; }
.shop-page__url a:hover { text-decoration: underline; }

/* (мобайл/десктоп медиаблоки кабинета — тоже в разделе ~стр. 1330, дубликат вычищен) */
.row-btn:last-child { border-radius: 0 0 var(--radius) var(--radius); }
.row-btn:only-child { border-radius: var(--radius); border-top: 1px solid var(--border); }
.row-btn:active { background: var(--surface-2); }
.row-btn--danger { color: var(--danger-ink); }
.row-btn .badge {
  background: var(--rose); color: #fff;
  border-radius: 999px; padding: 2px 8px;
  font-size: 11px; font-weight: 700;
}

/* ===== Кабинет продавца ===== */
.seller-stats {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 14px;
}
.stat-card {
  background: var(--surface); border-radius: var(--radius);
  border: 1px solid var(--border); padding: 12px; text-align: center;
}
.stat-card__num { font-size: 22px; font-weight: 800; color: var(--green-ink); }
.stat-card__label { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.seller-tabs {
  display: flex; overflow-x: auto; gap: 4px;
  padding: 6px 0 12px;
  margin: 0 -14px 12px;
  padding-left: 14px; padding-right: 14px;
  border-bottom: 1px solid var(--border);
  scrollbar-width: none;
}
.seller-tabs::-webkit-scrollbar { display: none; }
.seller-tab {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 7px 14px;
  font-size: 13px; font-weight: 600; color: var(--text-muted);
  cursor: pointer; white-space: nowrap; font-family: inherit;
}
.seller-tab.is-active {
  background: var(--primary); color: #fff; border-color: var(--primary);
}
.seller-tab .badge-mini {
  background: var(--rose); color: #fff;
  border-radius: 999px; padding: 0 6px; font-size: 10px;
  margin-left: 4px; font-weight: 700;
}

/* ===== Списки в ЛК продавца ===== */
.list-item {
  background: var(--surface); border-radius: var(--radius);
  border: 1px solid var(--border); padding: 12px 14px;
  margin-bottom: 8px; display: flex; gap: 12px; align-items: center;
  cursor: pointer;
}
.list-item:active { background: var(--surface-2); }
.list-item__thumb {
  width: 50px; height: 50px; border-radius: 10px;
  background: linear-gradient(145deg, var(--surface-2), var(--surface-3));
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; overflow: hidden; position: relative;
}
.list-item__body { flex: 1; min-width: 0; }
.list-item__title { font-weight: 600; font-size: 15px; }
.list-item__sub { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.list-item__right { text-align: right; font-size: 14px; }
.list-item__right strong { display: block; color: var(--green-ink); }

/* Карточка товара в кабинете продавца: на мобиле кнопки уходят в строку снизу,
   чтобы текст не сжимался в столбик по одному слову */
@media (max-width: 767px) {
  .seller-plant-item { flex-wrap: wrap; align-items: flex-start; }
  .seller-plant-item .list-item__body { flex: 1 1 0; min-width: 0; }
  .seller-plant-item .list-item__right { width: 100%; text-align: left; margin-top: 8px; }
  .seller-plant-item .list-item__right strong { display: inline-block; margin-right: 10px; }
  .seller-plant-item .list-item__right > div { justify-content: flex-start !important; }
}

/* ===== Промокоды ===== */
.promo-code {
  display: inline-block;
  background: var(--accent-soft); color: var(--accent-ink);
  border: 1px dashed #B8860B;
  border-radius: 8px; padding: 4px 10px;
  font-family: monospace; font-weight: 700; font-size: 13px;
  letter-spacing: 0.05em;
}

/* ===== Сообщения ===== */
.message-thread {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.message-thread:active { background: var(--surface-2); }
.message-thread__avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-deep));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; flex-shrink: 0;
}
.message-thread__body { flex: 1; min-width: 0; }
.message-thread__name { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.message-thread__preview {
  font-size: 14px; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.message-thread__time { font-size: 12px; color: var(--text-muted); text-align: right; }
.unread-dot {
  display: inline-block;
  width: 9px; height: 9px;
  background: var(--rose); border-radius: 50%;
}

/* Тумблер-переключатель (reusable) — напр. вкл/выкл реферальной программы */
.switch { position: relative; display: inline-block; width: 42px; height: 24px; flex: none; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch__slider { position: absolute; inset: 0; cursor: pointer; background: var(--border); border-radius: 24px; transition: background .2s; }
.switch__slider::before { content: ''; position: absolute; height: 18px; width: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .2s; }
.switch input:checked + .switch__slider { background: var(--primary); }
.switch input:checked + .switch__slider::before { transform: translateX(18px); }

/* Диалог */
.chat-screen {
  display: flex; flex-direction: column;
  height: 100vh; height: 100dvh; background: var(--bg);   /* dvh — чтобы строка ввода не уезжала за нижнюю панель браузера на мобильном */
  position: fixed; inset: 0; z-index: 35;
}
.chat-body {
  flex: 1; overflow-y: auto;
  padding: 14px; display: flex; flex-direction: column; gap: 8px;
}
.chat-msg {
  max-width: min(75%, 560px);
  padding: 9px 13px; border-radius: 16px;
  font-size: 14px; word-wrap: break-word; line-height: 1.4;
}
.chat-msg--in { background: var(--surface); align-self: flex-start; border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.chat-msg--out { background: var(--primary); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.chat-msg img { max-width: 100%; border-radius: 8px; margin: 4px 0; }
.chat-msg__time { font-size: 10px; opacity: 0.7; margin-top: 2px; }
.chat-quick-replies {
  display: flex; gap: 6px; padding: 8px 8px 0;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  background: var(--surface);
}
.chat-quick-replies.is-hidden { display: none; }
.qr-chip {
  flex: 0 0 auto; max-width: 220px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 16px;
  padding: 6px 12px; font-size: 13px; cursor: pointer; font-family: inherit;
}
.qr-chip:hover { border-color: var(--primary, #1C7735); }
.qr-chip--edit { font-weight: 700; padding: 6px 11px; color: var(--text-muted); }

.chat-input-row {
  display: flex; gap: 6px; padding: 8px;
  background: var(--surface); border-top: 1px solid var(--border);
  padding-bottom: calc(8px + var(--safe-bottom));
}
.chat-input {
  flex: 1; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 20px;
  padding: 10px 14px; font-size: 15px; outline: none;
  font-family: inherit;
  color: var(--text);
}
.chat-input::placeholder { color: var(--text-muted); }
.chat-input:focus { border-color: var(--primary); }
.attach-btn {
  width: 40px; height: 40px; flex-shrink: 0;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 50%;
  font-size: 22px; line-height: 1; cursor: pointer;
  color: var(--text);
  display: inline-flex; align-items: center; justify-content: center;
}
.attach-btn--send { background: var(--primary); color: #fff; border-color: var(--primary); }
.attach-btn:hover { background: var(--surface-3); }
.attach-btn--send:hover { background: var(--primary-deep); }

/* ===== Уведомления (Drawer) ===== */
.notif-screen {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 100%; max-width: 380px;
  background: var(--bg); z-index: 40;
  box-shadow: var(--shadow-lg);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;   /* инерционный скролл на iOS */
  overscroll-behavior: contain;
  animation: slideInRight 0.2s ease;
}
/* последние уведомления не должны прятаться за нижней навигацией / вырезом */
#notifBody { padding-bottom: calc(80px + var(--safe-bottom, 0px)); }
@keyframes slideInRight { from { transform: translateX(100%); } to { transform: none; } }
.notif-screen .detail-header { background: var(--surface); position: sticky; top: 0; z-index: 2; }
.notif-item {
  padding: 12px 14px; border-bottom: 1px solid var(--border);
  display: flex; gap: 10px; align-items: flex-start;
  position: relative;
}
/* Крестик «убрать это уведомление» — приглушён, чтобы не спорил с содержимым */
.notif-item__hide {
  position: absolute; top: 8px; right: 8px;
  background: none; border: none; cursor: pointer; padding: 4px 6px;
  color: var(--text-muted); font-size: 13px; line-height: 1; opacity: .55; border-radius: 6px;
}
.notif-item__hide:hover { opacity: 1; background: var(--surface-2); }
.notif-item__body { padding-right: 22px; }   /* текст не заезжает под крестик */
.notif-item__icon { font-size: 22px; flex-shrink: 0; }
.notif-item__body { flex: 1; min-width: 0; }
.notif-item__title { font-weight: 600; font-size: 14px; }
.notif-item__text { font-size: 14px; color: var(--text-2); margin-top: 2px; white-space: pre-wrap; }
.notif-item__time { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.notif-item.is-unread { background: rgba(16,185,129,0.05); }

/* ===== Аукцион ===== */
.auction-card {
  background: linear-gradient(135deg, var(--surface-2), var(--surface-3));
  border-radius: var(--radius);
  border: 2px solid var(--accent);
  padding: 14px; margin-bottom: 12px;
}
.auction-timer {
  background: var(--accent); color: #0B2C16; /* был #fff — нечитаемо на золоте */
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  font-weight: 700; font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.auction-timer.is-ending { background: var(--rose); animation: pulse 1.2s infinite; }
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}
.auction-bid-row {
  display: flex; gap: 8px; margin-top: 10px;
  align-items: center;
}
.auction-bid-input {
  flex: 1; padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface);
  font-size: 16px; font-weight: 700; color: var(--accent-ink);
  outline: none; font-family: inherit;
}
.auction-history {
  background: var(--surface); border-radius: 10px;
  padding: 8px 12px; margin-top: 10px;
  max-height: 120px; overflow-y: auto;
}
.auction-bid-item {
  display: flex; justify-content: space-between;
  padding: 4px 0; font-size: 13px;
  border-bottom: 1px solid var(--border);
}
.auction-bid-item:last-child { border-bottom: none; }
.auction-bid-item__user { font-weight: 600; }

/* ===== Выставка (live) ===== */
.exhibition-banner {
  background: linear-gradient(135deg, #dc2626, #db2777);
  color: #fff; border-radius: var(--radius);
  padding: 12px 16px; margin-bottom: 12px;
  display: flex; align-items: center; gap: 12px;
  animation: pulse 2s infinite;
}
.exhibition-banner__live {
  background: rgba(255,255,255,0.25); padding: 3px 8px;
  border-radius: 999px; font-size: 11px; font-weight: 800;
  letter-spacing: 0.05em;
}
.exhibition-item {
  background: var(--surface); border-radius: var(--radius);
  border: 1px solid var(--border); margin-bottom: 12px;
  overflow: hidden;
}
.exhibition-item__photos {
  display: flex; gap: 2px; aspect-ratio: 16/10;
  background: var(--surface-2);
}
.exhibition-item__photo {
  flex: 1; min-width: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; background: linear-gradient(145deg, var(--surface-2), var(--surface-3));
}
.exhibition-item__body { padding: 12px 14px; }
.exhibition-item__title { font-weight: 600; font-size: 14px; }
.exhibition-item__row { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.exhibition-item__price { font-size: 18px; font-weight: 700; color: var(--green-ink); }
.exhibition-item__tag {
  font-size: 10px; font-weight: 700;
  padding: 3px 8px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.exhibition-item__tag--unique { background: var(--accent-soft); color: var(--accent-ink); }
.exhibition-item__tag--multiple { background: var(--surface-2); color: var(--text-muted); }

/* ===== Period selector (для статистики и фильтров) ===== */
.period-tabs {
  display: flex; gap: 6px; margin-bottom: 14px;
  background: var(--surface-2); padding: 3px; border-radius: 10px;
}
.period-tab {
  flex: 1; padding: 8px 4px; border: none;
  background: transparent; border-radius: 8px;
  font-size: 13px; font-weight: 600; color: var(--text-muted);
  cursor: pointer; font-family: inherit;
}
.period-tab.is-active { background: var(--surface); color: var(--green-ink); box-shadow: var(--shadow); }

/* ===== Toast уведомления ===== */
.toast-stack {
  position: fixed; inset: 0;
  padding: 14px;
  z-index: 100; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.toast {
  background: rgba(0,0,0,0.85); color: #fff;
  padding: 10px 16px; border-radius: 10px;
  font-size: 13px; margin-bottom: 6px;
  animation: toastIn 0.2s ease;
  pointer-events: auto;
  text-align: center;
  max-width: 100%;
}
@keyframes toastIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

/* ===== Confirm-окно (замена браузерного confirm) ===== */
.confirm-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; animation: confirmFade .12s ease;
}
@keyframes confirmFade { from { opacity: 0; } to { opacity: 1; } }
.confirm-box {
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 14px;
  padding: 22px; max-width: 400px; width: 100%;
  box-shadow: 0 16px 48px rgba(0,0,0,0.35);
  animation: confirmPop .14s ease;
}
@keyframes confirmPop { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
.confirm-box__msg { font-size: 15px; line-height: 1.5; margin-bottom: 18px; }
.confirm-box__actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.confirm-box__actions .btn { min-width: 104px; }

/* uiPrompt — то же окно подтверждения, но с полем ввода (замена нативному prompt).
   Подпись прижата к полю, иначе между вопросом и вводом висит воздух в 18px. */
.confirm-box--prompt .confirm-box__msg { margin-bottom: 10px; font-weight: 700; }
.confirm-box--prompt input[type="text"],
.confirm-box--prompt textarea {
  width: 100%; box-sizing: border-box;
  padding: 9px 11px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface-2); color: var(--text); font: inherit; font-size: 14px;
}
.confirm-box--prompt textarea { resize: vertical; min-height: 76px; }
.confirm-box--prompt input[type="text"]:focus,
.confirm-box--prompt textarea:focus { outline: none; border-color: var(--primary); }

/* ===== Inline alert ===== */
.alert {
  background: var(--accent-soft); color: var(--accent-ink);
  border-left: 3px solid var(--accent);
  border-radius: 8px; padding: 10px 12px;
  font-size: 13px; margin-bottom: 12px;
}

/* ===== Knowledge base ===== */
.articles-list { display: flex; flex-direction: column; gap: 10px; }
.article-card {
  background: var(--surface); border-radius: var(--radius);
  padding: 14px 16px; box-shadow: var(--shadow);
  border: 1px solid var(--border); cursor: pointer;
}
.article-card:active { background: var(--surface-2); }
/* Хаб «Уход»: чипы-фильтры и метки на карточке */
.care-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 11px; border-radius: 999px; cursor: pointer;
  font-size: 13px; line-height: 1; white-space: nowrap;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border);
}
.care-chip:hover { background: var(--surface-2); }
.care-chip.is-active { background: var(--brand, #1c7735); border-color: var(--brand, #1c7735); color: #fff; }
.care-card-chip {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 11px; line-height: 1.5; color: var(--text-muted);
  background: var(--surface-2); border: 1px solid var(--border);
}
.care-group > summary { list-style: none; }
.care-group > summary::-webkit-details-marker { display: none; }
.care-group > summary::before { content: '▸ '; color: var(--text-muted); }
.care-group[open] > summary::before { content: '▾ '; }
.article-card__title { font-weight: 600; font-size: 15px; margin-bottom: 4px; }
.article-card__meta {
  font-size: 12px; color: var(--text-muted);
  display: flex; gap: 8px; align-items: center;
}
.article-card__meta .badge {
  background: var(--surface-2); color: var(--green-ink);
  padding: 2px 8px; border-radius: 999px; font-weight: 600;
}
.article-hero { font-size: 28px; font-weight: 700; margin: 0 0 8px; line-height: 1.2; font-family: "Playfair Display", Georgia, serif; }
.article-meta { color: var(--text-muted); font-size: 13px; margin-bottom: 18px; }
.article-content { font-size: 15px; line-height: 1.6; color: var(--text-2); }
.article-content h3 { font-size: 17px; font-weight: 700; margin: 20px 0 8px; color: var(--text); }
.article-content p { margin: 0 0 12px; }
.article-content ul { padding-left: 18px; margin: 0 0 12px; }
.article-content li { margin-bottom: 6px; }

/* ===== Seller block в карточке растения ===== */
.seller-block {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; background: var(--surface-2);
  border-radius: 12px; margin-bottom: 12px;
}
.seller-block__avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-deep));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700;
}
.seller-block__info { flex: 1; }
.seller-block__name { font-weight: 600; font-size: 14px; }
.affiliate-list { display: flex; flex-direction: column; gap: 8px; }
.affiliate-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; background: var(--surface-2);
  border-radius: 10px; text-decoration: none; color: var(--text);
}
.affiliate-item__icon { font-size: 26px; }
.affiliate-item__name { flex: 1; font-size: 14px; font-weight: 500; }
.affiliate-item__arrow { color: var(--primary); font-size: 18px; }
.disclaimer { font-size: 11px; color: var(--text-muted); margin-top: 8px; }

/* ============================================================================
   DESKTOP LAYOUT  (≥ 768px)
   ============================================================================ */
.desktop-sidebar { display: none; }
.desktop-header { display: none; }

@media (min-width: 768px) {
  body {
    display: grid;
    grid-template-columns: 260px 1fr;
    min-height: 100vh;
    padding-bottom: 0;
  }
  /* Скрываем мобильные элементы */
  .bottom-nav { display: none !important; }
  .app-header { display: none !important; }
  /* Auth остаётся отдельным фуллскрин-экраном */
  #screen-auth { grid-column: 1 / -1; }
  /* is-hidden должен перебивать display:flex !important у сайдбара/шапки,
     иначе на auth-экране они «вытекают» снизу */
  .desktop-sidebar.is-hidden,
  .desktop-header.is-hidden { display: none !important; }

  /* Desktop sidebar */
  .desktop-sidebar {
    display: flex !important;
    flex-direction: column;
    background: var(--surface);
    border-right: 1px solid var(--border);
    padding: 18px 14px;
    height: 100vh;
    position: sticky; top: 0;
    overflow-y: auto;
  }
  .ds-logo {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 22px; padding: 0 6px;
  }
  .ds-logo img { width: 44px; height: 44px; border-radius: 11px; }
  .ds-logo strong { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; font-family: "Playfair Display", Georgia, serif; }
  .ds-nav { display: flex; flex-direction: column; gap: 2px; margin-bottom: 18px; }
  .ds-nav__btn {
    background: transparent; border: none;
    padding: 10px 12px; border-radius: 10px;
    display: flex; align-items: center; gap: 10px;
    color: var(--text-2); font-size: 15px; font-weight: 500;
    cursor: pointer; text-align: left; font-family: inherit;
    position: relative;
  }
  .ds-nav__btn:hover { background: var(--surface-2); color: var(--text); }
  .ds-nav__btn.is-active { background: var(--primary-deep); color: #fff; } /* глубже и контрастнее (5.6→8.4:1) */
  .ds-nav__btn.is-active svg { stroke: #fff; }
  .ds-nav__btn svg { stroke: currentColor; }
  .ds-nav__badge {
    background: var(--rose); color: #fff;
    border-radius: 999px; padding: 0 6px;
    font-size: 11px; font-weight: 700;
    margin-left: auto; min-width: 18px; text-align: center;
  }
  .ds-section-title {
    font-size: 11px; font-weight: 700;
    color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em;
    margin: 14px 6px 8px;
  }
  .ds-cats { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
  .ds-cat {
    background: transparent; border: none;
    padding: 7px 12px; border-radius: 8px;
    display: flex; justify-content: space-between; align-items: center;
    color: var(--text-2); font-size: 14px; font-family: inherit;
    cursor: pointer; text-align: left;
  }
  .ds-cat:hover { background: var(--surface-2); }
  html[data-theme="dark"] .ds-cat:hover {
    background: rgba(242,191,41,0.1);
    border: 1px solid var(--accent);
    color: var(--text);
  }
  .ds-cat.is-active { background: var(--primary); color: #fff; }
  .ds-cat__count { font-size: 12px; color: var(--text-muted); }
  .ds-cat.is-active .ds-cat__count { color: rgba(255,255,255,0.8); }
  .ds-tags { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 6px; }
  .ds-tag {
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: 999px; padding: 4px 10px;
    font-size: 12px; cursor: pointer; color: var(--text-2);
    font-family: inherit;
  }
  .ds-tag.is-active { background: var(--primary); color: #fff; border-color: var(--primary); }

  /* Desktop top header */
  .desktop-header {
    display: flex !important;
    align-items: center; gap: 14px;
    position: sticky; top: 0; z-index: 9;
    background: var(--bg);
    padding: 14px 24px;
    border-bottom: 1px solid var(--border);
  }
  .desktop-header__search { flex: 1; max-width: 520px; position: relative; }
  .desktop-header__search input {
    width: 100%; padding: 10px 14px 10px 38px;
    border: 1px solid var(--border); border-radius: 999px;
    background: var(--surface); color: var(--text);
    font-size: 14px; outline: none; font-family: inherit;
  }
  .desktop-header__search input:focus { border-color: var(--primary); }
  .desktop-header__search::before {
    content: '🔍'; position: absolute;
    left: 14px; top: 50%; transform: translateY(-50%);
    font-size: 14px; opacity: 0.6;
  }
  .desktop-header__actions { margin-left: auto; display: flex; gap: 4px; }

  /* Main с большими отступами */
  #main {
    padding: 14px 24px 24px;
    max-width: 1400px;
  }

  /* Карточки растений — больше колонок */
  .plants-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; }
  @media (min-width: 1100px) { .plants-grid { grid-template-columns: repeat(5, 1fr); } }

  /* Карточки крупнее */
  .plant-card__body { padding: 12px 14px 14px; }
  .plant-card__name { font-size: 14px; }
  .plant-card__price { font-size: 17px; }

  /* Модалки центрированные (на ПК) */
  .modal-screen {
    background: rgba(0,0,0,0.5);
    display: block;
    padding: 40px 20px;
    overflow-y: auto;
  }
  .modal-screen.is-hidden { display: none; }
  .modal-screen > .detail-header,
  .modal-screen > .detail-body {
    background: var(--surface);
    max-width: 760px;
    margin: 0 auto;
  }
  .modal-screen > .detail-header {
    border-radius: 14px 14px 0 0;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
    position: sticky; top: -40px; z-index: 5;
  }
  .modal-screen > .detail-body {
    border-radius: 0 0 14px 14px;
    box-shadow: var(--shadow-lg);
    padding: 20px 24px 28px;
  }

  /* Компактные окна (opts.center) — по центру экрана */
  .modal-screen.is-centered {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    min-height: 100%;
  }
  .modal-screen.is-centered > .detail-header { position: static; top: auto; }

  /* Чат на десктопе — широкое окно (командный чат удобнее читать).
     Нужна явная width: при right:auto без неё ширина = по содержимому (≈узко). */
  .chat-screen {
    width: min(1100px, 94vw); left: 50%; transform: translateX(-50%);
    height: 80vh; top: 10vh; bottom: auto; right: auto;
    border-radius: 14px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
  }

  /* Notif drawer — справа (на всю высоту, со скроллом списка) */
  .notif-screen { max-width: 400px; top: 0; bottom: 0; height: auto; }

  /* Магазины — горизонтальная сетка */
  .shops-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
  }

  /* Профиль и кабинет шире */
  .profile, .seller-stats {
    max-width: 720px;
  }

  /* Каталог: filter row */
  .desktop-filter-row {
    display: flex; gap: 10px; align-items: center;
    margin-bottom: 14px; flex-wrap: wrap;
  }
  .desktop-filter-row .muted { font-size: 13px; }
}

/* ===== Маркетплейс-блоки ===== */
.marketplace-hero {
  /* Botanical Premium hero — место под фоновое изображение: var(--hero-bg-image) */
  background:
    var(--hero-bg-image, none),
    linear-gradient(140deg, var(--primary-dark) 0%, #0F5A26 55%, #1C7735 100%);
  background-size: cover; background-position: center;
  color: #fff;
  border-radius: var(--radius);
  padding: 28px 24px 24px;
  margin-bottom: 18px;
  position: relative; overflow: hidden;
}
/* Декоративное золотое кольцо */
.marketplace-hero::after {
  content: ''; position: absolute;
  right: -40px; top: -40px;
  width: 200px; height: 200px;
  border-radius: 50%;
  border: 2px solid rgba(242,191,41,0.25);
  box-shadow: 0 0 0 30px rgba(242,191,41,0.07), 0 0 0 60px rgba(242,191,41,0.03);
  pointer-events: none; z-index: 0;
}
.marketplace-hero::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,44,22,0.08) 0%, rgba(11,44,22,0.35) 100%);
  pointer-events: none; z-index: 0;
}
.marketplace-hero > * { position: relative; z-index: 1; }
.marketplace-hero h2 {
  margin: 0 0 8px; font-size: 24px; font-weight: 700;
  font-family: "Playfair Display", Georgia, serif;
  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.marketplace-hero p { margin: 0; opacity: 0.92; font-size: 14px; max-width: 480px; }
.marketplace-hero__actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; position: relative; z-index: 1; }
.marketplace-hero .btn--outline {
  background: rgba(255,255,255,0.18); color: #fff;
  border-color: rgba(255,255,255,0.5);
}
.marketplace-hero .btn--accent {
  background: var(--accent); color: #0B2C16; font-weight: 700;
}

.section-title {
  display: flex; justify-content: space-between; align-items: center;
  margin: 22px 0 12px;
}
.section-title h3 { margin: 0; font-size: 17px; font-weight: 700; }
.section-title a { color: var(--green-ink); font-size: 13px; cursor: pointer; }

/* Карточка отзыва */
.review-card {
  background: var(--surface-2); border-radius: 10px;
  padding: 10px 12px; margin-bottom: 8px;
  border-left: 3px solid var(--primary);
}
.review-card__head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 4px; font-size: 13px;
}
.review-card__author { font-weight: 600; }

/* ── Бейджи покупателя: значки у ника + витрина в профиле ── */
.badge-chips { display: inline-flex; gap: 3px; margin-left: 5px; vertical-align: middle; }
.badge-chip { display: inline-flex; cursor: help; line-height: 0; }
.badge-chip svg { display: block; }
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-top: 8px; }
.badge-card { border: 1px solid var(--border); border-radius: 12px; padding: 10px; text-align: center; background: var(--surface); position: relative; }
.badge-card.is-shown { border-color: var(--primary); }
.badge-card .badge-chips { margin: 0 0 4px; }
.badge-card .badge-chip svg { width: 30px; height: 30px; }
.badge-card__title { font-size: 13px; font-weight: 600; }
.badge-card__desc { margin-top: 2px; line-height: 1.35; }
.badge-card__flag { margin-top: 6px; font-size: 11px; color: var(--primary); font-weight: 600; }
.badge-pick { display: flex; align-items: center; gap: 9px; padding: 8px 4px; border-bottom: 1px solid var(--border); cursor: pointer; }
.badge-pick:last-child { border-bottom: none; }
.badge-pick__cb { width: 17px; height: 17px; flex-shrink: 0; }
.badge-pick .badge-chip svg { width: 22px; height: 22px; }
.badge-pick__label { font-size: 14px; }

/* Плашка официального лица (администрация/модерация) в спорах — тёмно-зелёный жирный */
.chat-staff-label { color: var(--green-ink); font-weight: 800; letter-spacing: .2px; }
.review-card__stars { color: var(--accent-ink); }
.review-card__text { font-size: 14px; line-height: 1.5; color: var(--text-2); }
.review-card__date { font-size: 11px; color: var(--text-muted); margin-top: 5px; }

/* Карточка магазина в маркетплейсе */
.shop-card {
  background: var(--surface); border-radius: var(--radius);
  border: 1px solid var(--border); overflow: hidden;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(11,44,22,0.07);
  transition: transform 0.18s, box-shadow 0.18s;
}
.shop-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(11,44,22,0.12); }
.shop-card:active { transform: scale(0.98); }
.shop-card__cover {
  height: 100px;
  background: linear-gradient(140deg, var(--primary-dark) 0%, var(--primary) 100%);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 40px; position: relative; overflow: hidden;
}
.shop-card__cover::after {
  content: ''; position: absolute;
  right: -20px; top: -20px;
  width: 100px; height: 100px;
  border-radius: 50%;
  border: 1.5px solid rgba(242,191,41,0.3);
  box-shadow: 0 0 0 20px rgba(242,191,41,0.06);
}
.shop-card__body { padding: 12px 14px 14px; }
.shop-card__name { font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 4px; }
.shop-card__meta { font-size: 13px; color: var(--text-muted); margin-top: 4px; display: flex; gap: 10px; flex-wrap: wrap; }
.shop-card__rating { color: var(--accent-ink); font-weight: 600; }
/* Золотые звёзды — используется везде где показывается рейтинг */
.stars { color: var(--accent-ink); letter-spacing: 1px; }
.stars-dim { color: #d1d5db; } /* пустые звёзды */
/* Рейтинг на баннере магазина — кликабелен */
.shop-rating-btn {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 20px;
  padding: 3px 10px; cursor: pointer; font-size: 12px; color: var(--text);
  display: inline-flex; align-items: center; gap: 5px;
  transition: background 0.15s, border-color 0.15s;
}
.shop-rating-btn:hover { background: var(--surface-3); }

/* ============================================================================
   КАБИНЕТ ПРОДАВЦА — полноэкранный Layout A (левая панель + контент)
   ============================================================================ */

/* Кнопка кабинета в основном сайдбаре — выделена цветом */
.ds-nav__btn--seller {
  border: 1.5px solid var(--primary);
  color: var(--green-ink);
  font-weight: 700;
  background: rgba(16,185,129,0.06);
}
.ds-nav__btn--seller:hover { background: rgba(16,185,129,0.12) !important; color: var(--green-ink) !important; }
.ds-nav__btn--seller.is-active { background: var(--primary) !important; color: #fff !important; border-color: var(--primary) !important; }
.ds-nav__divider { height: 1px; background: var(--border); margin: 4px 6px 8px; }

/* Экран: убираем лишние анимации */
.seller-dashboard-screen { animation: none; }

/* Двухколоночный layout */
.sdash { display: flex; align-items: flex-start; gap: 0; }

/* Левый нав */
.sdash__nav {
  width: 200px; flex-shrink: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 6px;
  position: sticky; top: 70px;
  max-height: calc(100vh - 90px);
  overflow-y: auto;
}

/* Правая область контента */
.sdash__main { flex: 1; min-width: 0; padding-left: 18px; }
.sdash__stats { margin-bottom: 16px; }

/* Группы в левом нав */
.seller-nav-group {
  font-size: 10px; font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 8px 8px 3px;
}
/* Шапка нава */
.sdash__nav-header {
  padding: 6px 8px 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.sdash__nav-shop { font-weight: 700; font-size: 14px; color: var(--text); }
.sdash__nav-meta { font-size: 11px; color: var(--text-muted); margin-top: 1px; }

/* Элементы нава */
.seller-nav-item {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; text-align: left;
  padding: 9px 10px; border-radius: 10px;
  font-size: 13px; color: var(--text-2);
  background: none; border: none;
  cursor: pointer; font-family: inherit;
  font-weight: 500; margin-bottom: 1px;
  transition: background 0.1s;
}
.seller-nav-item:hover { background: var(--surface-2); color: var(--text); }
.seller-nav-item.is-active { background: var(--primary); color: #fff; }

/* Бейджи в нав */
.seller-nav-badge {
  background: var(--rose); color: #fff;
  border-radius: 999px; padding: 1px 6px;
  font-size: 10px; font-weight: 700;
  min-width: 18px; text-align: center;
  line-height: 16px; flex-shrink: 0;
}

/* Мобильный вид: нав → горизонтальный скролл */
@media (max-width: 767px) {
  .sdash { flex-direction: column; }
  .sdash__nav {
    width: 100%; position: static;
    max-height: none; border-radius: var(--radius) var(--radius) 0 0;
    border-bottom: none; padding: 8px 8px 0;
    display: flex; flex-wrap: nowrap;
    overflow-x: auto; overflow-y: visible;
    gap: 4px; scrollbar-width: none;
  }
  .sdash__nav::-webkit-scrollbar { display: none; }
  .sdash__nav-header { display: none; }
  .seller-nav-group { display: none; }
  .seller-nav-item {
    white-space: nowrap; flex-shrink: 0; width: auto;
    padding: 7px 12px; border-radius: 999px;
    background: var(--surface-2); font-size: 13px;
    justify-content: center; margin-bottom: 8px;
  }
  .seller-nav-item.is-active { background: var(--primary); color: #fff; }
  .sdash__main { padding-left: 0; padding-top: 12px; }
  .seller-dashboard-screen { padding: 0 !important; }
}

/* На десктопе — компенсируем padding от #main для full-width */
@media (min-width: 768px) {
  #screen-seller-dashboard {
    margin: -14px -24px -24px;
    padding: 20px 24px 24px;
    min-height: calc(100vh - 70px);
  }
}


/* ===== Консоль: плитки магазинов ===== */
.admin-shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.admin-shop-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 10px 10px;
  text-align: center;
  cursor: pointer;
  transition: box-shadow 0.15s, border-color 0.15s;
  position: relative;
}
.admin-shop-tile:hover { box-shadow: var(--shadow); border-color: var(--primary); }
.admin-shop-tile--deleted { opacity: 0.5; pointer-events: none; }
.admin-shop-tile__avatar { display: flex; justify-content: center; margin-bottom: 8px; }
.admin-shop-tile__name { font-weight: 700; font-size: 13px; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-shop-tile__owner { font-size: 11px; margin-bottom: 2px; }
.admin-shop-tile__gmv { font-size: 11px; }
.admin-shop-tile__badge {
  position: absolute; top: 6px; right: 6px;
  color: #fff; border-radius: 4px; padding: 1px 5px; font-size: 10px; font-weight: 700;
}

/* ===== Oversight bar смещает контент ===== */
#oversight-bar ~ #desktop-main-wrap,
body:has(#oversight-bar[style*="flex"]) #app-header,
body:has(#oversight-bar[style*="flex"]) #desktop-header { top: 38px; }

/* ===== 🔴 ГЛОБАЛЬНЫЕ ПОЛОСЫ СВЕРХУ НЕ ДОЛЖНЫ ЗАНИМАТЬ ЯЧЕЙКУ ГРИДА (02.09.2026) =====
   Плашка продавца (#verdoSellerSetup) и баннер объявления (#verdoAnnounce) вставляются из скрипта
   ПЕРВЫМ ребёнком <body>. На телефоне это просто липкая полоса сверху. А на десктопе body — грид
   `260px 1fr`, и первый ребёнок занимает ячейку САЙДБАРА: меню уезжает во вторую колонку, контент —
   за край экрана. Экран выглядит сломанным, и человек не может пользоваться сайтом.
   Так и вышло у магазина-черновика: плашка «Магазин одобрен, оформите его» сама и закрыла ему
   дорогу к оформлению.
   ⚠️ Полосу растягиваем на всю строку и снимаем `sticky`: липкая полоса на десктопе перекрывала бы
   верх сайдбара (оба с `top:0`). Внизу страницы она не нужна — это приветствие, а не панель.
   ⚠️ Правило по ID, а не по классу: элементы создаются в скрипте с инлайновыми стилями, и класс
   пришлось бы добавлять там же — то есть чинить вёрстку правкой логики.
   🔴 `!important` У POSITION ОБЯЗАТЕЛЕН, И ЭТО НЕ ПЕРЕСТРАХОВКА. `position:sticky` задан ИНЛАЙНОМ
   в скрипте, а инлайн сильнее правила из файла: без `!important` строка молча не работала бы.
   Поймано измерением при аудите правки — на глаз раскладка уже выглядела почин��нной, потому что
   `grid-column` (инлайном не заданный) применялся, а снятие sticky — нет. Половина правки,
   выглядящая как целая, — худший вид починки. */
@media (min-width: 768px) {
  #verdoSellerSetup,
  #verdoAnnounce {
    grid-column: 1 / -1;
    position: static !important;
  }
}

/* ===== Сайт-футер ===== */
.site-footer {
  background: var(--primary-dark);
  color: rgba(242,247,234,0.9);
  padding: 16px 22px 0;
  margin-top: 20px;
  border-top: 2px solid var(--accent);
}
/* Основной ряд: бренд слева, колонки-ссылки справа во всю ширину */
.site-footer__inner {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  max-width: 1180px;
  margin: 0 auto;
}
.site-footer__brand { flex: 0 0 auto; max-width: 240px; }
.site-footer__logo { display: flex; align-items: center; gap: 8px; }
.site-footer__leaf { width: 30px; height: 30px; object-fit: contain; }
.site-footer__name { font-family: "Playfair Display", Georgia, serif; font-weight: 700; font-size: 21px; letter-spacing: -0.01em; line-height: 1; }
.site-footer__name .v { color: #f4efe1; }   /* инверсия на тёмном: кремовый */
.site-footer__name .m { color: #8fc11a; }   /* лайм */
.site-footer__tagline { font-size: 12px; color: rgba(242,247,234,0.6); margin: 8px 0 12px; line-height: 1.4; }
.site-footer__links {
  flex: 1 1 auto;
  display: flex;
  justify-content: space-between;
  gap: 20px 24px;
  flex-wrap: wrap;
}
.site-footer__col { min-width: 120px; }
.site-footer a {
  color: rgba(242,247,234,0.85);
  text-decoration: none;
  font-size: 12px;
  line-height: 1.75;
  display: block;
  transition: color 0.15s;
}
.site-footer a:hover { color: var(--lime); }
.site-footer__col-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--lime);
  margin: 0 0 4px;
}
/* Низ: реквизиты + дисклеймер в 1–2 строки */
.site-footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  max-width: 1180px;
  margin: 14px auto 0;
  padding: 8px 0 calc(10px + var(--safe-bottom));
  text-align: center;
  font-size: 11px;
  color: rgba(242,247,234,0.5);
}
.site-footer__legal { display: block; }
.site-footer__disclaimer {
  display: block;
  font-size: 10.5px;
  color: rgba(242,247,234,0.4);
  margin-top: 3px;
}
.site-footer__sbp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border-radius: 8px;
  padding: 4px 11px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: #18223A;
  box-shadow: 0 1px 4px rgba(0,0,0,0.20);
}
.site-footer__sbp-mark { flex-shrink: 0; display: block; }
.site-footer__sbp-text { line-height: 1; }

/* Компактный футер на экране входа */
.auth-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 14px;
  padding: 12px 16px calc(12px + var(--safe-bottom));
  font-size: 11px;
}
.auth-footer-links a {
  color: var(--text-muted);
  text-decoration: none;
  opacity: 0.85;
}
.auth-footer-links a:hover { color: var(--primary); }

/* Мобильный отступ футера — не перекрывается нижней навигацией */
@media (max-width: 767px) {
  .site-footer {
    padding-bottom: calc(80px + var(--safe-bottom));
  }
  .site-footer__inner { flex-direction: column; gap: 16px; }
  .site-footer__brand { max-width: none; }
  .site-footer__links { justify-content: flex-start; gap: 14px 28px; }
  .site-footer__col { min-width: 130px; }
}

/* Футер внутри desktop-main-wrap — правильное позиционирование */
#desktop-main-wrap { display: flex; flex-direction: column; min-height: 100vh; }
#desktop-main-wrap > #main { flex: 1; }

/* ===== Botanical Premium — дополнительные стили ===== */

/* Числа в stat-card — золотом (accent-ink: читаемо в светлой теме) */
.stat-card__num { color: var(--accent-ink); }

/* Plant hero — обновлённый градиент */
.plant-hero::before {
  background: radial-gradient(circle at 30% 30%, rgba(28,119,53,0.18), transparent 65%);
}

/* Золотые звёзды — обновление */
.stars { color: var(--accent-ink); letter-spacing: 1px; }
.stars-dim { color: var(--border-2); }

/* Кнопка избранного в каталоге (мобильный) */
.fav-btn-wrap { position: relative; display: contents; }

/* Золотой разделитель в сайдбаре */
.ds-section-title {
  border-top: 1px solid rgba(242,191,41,0.2);
  padding-top: 12px;
  color: var(--accent);
  font-size: 10px;
}

/* Аватары сообщений — золотая обводка */
.message-thread__avatar {
  background: linear-gradient(135deg, var(--primary), var(--primary-deep));
  color: #fff; font-weight: 700;
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
  border: 2px solid rgba(242,191,41,0.3);
}

/* Кабинет продавца — верхние цифры золотом */
.sdash__stats .stat-card { border: 1px solid var(--border); }
.sdash__stats .stat-card__num { font-size: 24px; font-weight: 800; color: var(--accent-ink); }

/* Тёмная тема — захардкоженные цвета аукциона → var */
html[data-theme="dark"] .plant-card__img {
  background: linear-gradient(145deg, var(--surface-2), var(--surface-3));
}
html[data-theme="dark"] .plant-hero {
  background: linear-gradient(145deg, var(--surface-2), var(--surface-3));
}
html[data-theme="dark"] .marketplace-hero .btn--outline {
  background: rgba(255,255,255,0.12);
  color: #F2F7EA;
}

/* Bottom-nav shadow — зелёный вместо бежевого */
.bottom-nav {
  box-shadow: 0 -4px 20px rgba(11,44,22,0.08);
}

/* Профиль — section separator */
.profile__section { border-top: 1px solid var(--border); padding-top: 14px; margin-top: 14px; }
.profile__section:first-of-type { border-top: none; margin-top: 0; }

/* ===== Премиальные золотые рамки + кнопки шапки ===== */
/* Круглые кнопки колокольчик/тема/профиль с золотой обводкой (как в макете тёмной темы) */
.desktop-header__actions .icon-btn,
.app-header__actions .icon-btn {
  border: 1px solid var(--border-2);
  border-radius: 50%;
}
.desktop-header__actions .icon-btn:hover,
.app-header__actions .icon-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
html[data-theme="dark"] .desktop-header__actions .icon-btn,
html[data-theme="dark"] .app-header__actions .icon-btn {
  border-color: rgba(242,191,41,0.45);
}
/* Тёмная тема: hover насыщенно-золотой (специфичность выше базового hover) */
html[data-theme="dark"] .desktop-header__actions .icon-btn:hover,
html[data-theme="dark"] .app-header__actions .icon-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(242,191,41,0.1);
}

/* Тонкая золотистая рамка на карточках и панелях — ровно, на всех ключевых элементах */
.plant-card,
.shop-card,
.stat-card,
.article-card,
.plant-section,
.review-card,
.list-item,
.shop-banner,
.admin-shop-tile {
  border: 1px solid rgba(242,191,41,0.32);
}
html[data-theme="dark"] .shop-card:hover {
  border-color: var(--accent);
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}
html[data-theme="dark"] .admin-shop-tile:hover {
  border-color: var(--accent);
}
html[data-theme="dark"] .plant-card,
html[data-theme="dark"] .shop-card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .article-card,
html[data-theme="dark"] .plant-section,
html[data-theme="dark"] .review-card,
html[data-theme="dark"] .list-item,
html[data-theme="dark"] .admin-shop-tile {
  border-color: rgba(242,191,41,0.26);
}
/* Акцентная золотая линия сверху ключевых блоков-героев */
.marketplace-hero { border: 1px solid rgba(242,191,41,0.35); }

/* Золото на пунктах левого меню (Каталог, Магазины, Мои покупки, Сообщения, Уход) */
.ds-nav__btn { border: 1px solid transparent; }
.ds-nav__btn:hover { border-color: rgba(242,191,41,0.40); }
.ds-nav__btn.is-active { border-color: var(--accent); }
html[data-theme="dark"] .ds-nav__btn:hover {
  border-color: var(--accent);
  color: var(--text);
  background: rgba(242,191,41,0.1);
}
/* Нижняя навигация (мобайл) — активный пункт с золотой подсветкой сверху */
.nav-btn.is-active::after {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 26px; height: 3px; border-radius: 0 0 3px 3px; background: var(--accent);
}
/* Чуть заметнее рамка на карточках товара */
.plant-card { border: 1px solid rgba(242,191,41,0.40); }
.plant-card:hover { border-color: var(--accent); }
html[data-theme="dark"] .plant-card { border-color: rgba(242,191,41,0.32); }
html[data-theme="dark"] .plant-card:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 6px 24px rgba(0,0,0,0.4);
}

/* Логотип: бежевая плашка со скруглением и золотой окантовкой */
.auth__logo {
  width: 200px; height: 200px;
  border-radius: 28px;
  border: 3px solid var(--accent);
  object-fit: cover;
  background: #F9F0DE;
  box-shadow: 0 8px 28px rgba(11,44,22,0.18);
}
.ds-logo img {
  border-radius: 10px !important;
  border: 2px solid var(--accent);
  object-fit: cover !important;
  background: #F9F0DE;
}

/* Счётчик корзины на иконке */
.icon-btn__badge {
  position: absolute; top: 2px; right: 0;
  background: var(--rose); color: #fff;
  font-size: 9px; font-weight: 700; line-height: 15px;
  min-width: 15px; height: 15px; padding: 0 4px;
  border-radius: 999px; text-align: center;
  border: 1.5px solid var(--surface);
}

/* DS-logo mark — поддержка logo-mark.png */
.ds-logo-mark { width: 32px; height: 32px; border-radius: 8px; object-fit: contain; }

/* Hero — место под фоновое фото растения */
.marketplace-hero--has-photo { background-size: cover !important; }

/* ===== Фото/видео товара: превью в формах ===== */
.photo-preview-grid {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px;
}
.photo-preview-item {
  position: relative; width: 80px; height: 80px;
  border-radius: 8px; overflow: visible; flex-shrink: 0;
}
.photo-preview-thumb {
  width: 80px; height: 80px; object-fit: cover;
  border-radius: 8px; border: 1px solid var(--border);
  display: block;
}
.photo-preview-remove {
  position: absolute; top: -6px; right: -6px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--danger); color: #fff; border: none;
  font-size: 14px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0; z-index: 2;
}
.photo-preview-main {
  position: absolute; bottom: 2px; left: 2px; right: 2px;
  background: rgba(0,0,0,0.55); color: #fff;
  font-size: 9px; font-weight: 700; text-align: center;
  border-radius: 0 0 6px 6px; padding: 2px 0;
  text-transform: uppercase; letter-spacing: 0.05em;
}

/* Видео-метка на карточке */
.plant-card__video-badge {
  position: absolute; bottom: 28px; right: 6px;
  background: rgba(0,0,0,0.55); color: #fff;
  font-size: 10px; font-weight: 700; padding: 2px 5px;
  border-radius: 4px; pointer-events: none;
}

/* Галерея дополнительных фото в детальной карточке */
.plant-gallery {
  display: flex; gap: 6px; overflow-x: auto;
  margin: -8px 0 14px; padding-bottom: 4px;
}
.plant-gallery__thumb {
  width: 72px; height: 72px; object-fit: cover;
  border-radius: 8px; flex-shrink: 0;
  border: 1px solid var(--border); cursor: pointer;
}
.plant-gallery__thumb:hover { border-color: var(--primary); }

/* ===== Корзина ===== */
.cart-shop-group { margin-bottom: 16px; }
.cart-shop-name {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; color: var(--text-muted);
  margin-bottom: 8px; padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.cart-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.cart-item:last-child { border-bottom: none; }
.cart-item__body { flex: 1; min-width: 0; }
.cart-item__name { font-size: 14px; font-weight: 600; line-height: 1.3; margin-bottom: 2px; }
.cart-item__price { font-size: 13px; color: var(--text-muted); }
.cart-item__disc { color: var(--primary); font-weight: 700; }
.cart-item__actions {
  display: flex; align-items: center; gap: 4px; flex-shrink: 0;
}
.cart-qty-btn {
  width: 28px; height: 28px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface-2);
  font-size: 16px; cursor: pointer; display: flex;
  align-items: center; justify-content: center; padding: 0;
  color: var(--text);
}
.cart-qty-btn:hover { border-color: var(--primary); color: var(--primary); }
.cart-qty-val { min-width: 20px; text-align: center; font-size: 14px; font-weight: 600; }
.cart-item__del {
  width: 28px; height: 28px; border: none; background: none;
  cursor: pointer; font-size: 16px; color: var(--text-muted);
  padding: 0; margin-left: 2px;
}
.cart-item__del:hover { color: #ef4444; }

.cart-summary { padding: 12px 0; border-top: 2px solid var(--border); margin-top: 4px; }
.cart-summary__row {
  display: flex; justify-content: space-between;
  font-size: 14px; padding: 2px 0; color: var(--text-muted);
}
.cart-summary__row--disc { color: var(--primary); font-weight: 600; }
.cart-summary__row--total { font-size: 16px; font-weight: 700; color: var(--text); margin-top: 4px; }

.cart-promo-row {
  display: flex; gap: 8px; align-items: center; margin-top: 10px;
}
.cart-promo-row input {
  flex: 1; padding: 8px 12px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--surface);
  color: var(--text); font-family: inherit; font-size: 14px;
}
.cart-promo-applied {
  margin-top: 10px; padding: 8px 12px;
  background: var(--accent-soft); border-radius: 8px;
  border: 1px solid var(--accent); font-size: 13px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
}

/* ===== Адресная книга в профиле ===== */
.address-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border);
}
.address-row:last-of-type { border-bottom: none; }
.address-row__info { flex: 1; min-width: 0; }
.address-row__name { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.address-row__actions { display: flex; gap: 4px; flex-shrink: 0; flex-wrap: wrap; }
.address-badge {
  display: inline-block; background: var(--primary); color: #fff;
  font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 4px;
  vertical-align: middle; margin-left: 4px; text-transform: uppercase;
}

/* ===== Чекаут ===== */
.checkout-section {
  margin-bottom: 16px; padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.checkout-section:last-of-type { border-bottom: none; margin-bottom: 0; }
.checkout-section__title {
  font-size: 13px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 10px;
}
.checkout-addr-list { display: flex; flex-direction: column; gap: 8px; }
.checkout-addr-item {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 12px; border-radius: 10px; cursor: pointer;
  border: 1.5px solid var(--border); background: var(--surface);
  transition: border-color 0.15s;
}
.checkout-addr-item.is-selected { border-color: var(--primary); background: rgba(28,119,53,0.05); }
.checkout-delivery-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px; cursor: pointer;
  border: 1.5px solid var(--border); background: var(--surface);
  margin-bottom: 6px; transition: border-color 0.15s;
}
.checkout-delivery-item.is-selected { border-color: var(--primary); background: rgba(28,119,53,0.05); }
.checkout-payment-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 10px;
  border: 1.5px solid var(--primary); background: rgba(28,119,53,0.05);
}

/* ===== Панель сортировки и фильтра ===== */
.catalog-sort-bar { margin-bottom: 4px; }
/* Верхняя панель каталога (15.07.2026): табы режима слева, сортировка+фильтры справа, одной
   строкой. На узких экранах flex-wrap переносит сортировку под табы (мобилка группируется сверху). */
.catalog-topbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.catalog-topbar__tabs { margin-bottom: 0; flex: 0 1 360px; min-width: 240px; }
.catalog-sort-bar--top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 0 auto; }
.catalog-sort-bar--top .catalog-sort-tabs { margin-bottom: 0; }
.catalog-sort-bar--top .catalog-filter-bar { margin-bottom: 0; }
/* CTA «Открыть свой магазин» в десктоп-шапке (15.07.2026; видимостью управляет app.js updateHeaderCta) */
.header-cta { display: flex; align-items: center; gap: 10px; margin: 0 14px; flex-shrink: 0; }
.header-cta__btn { padding: 8px 16px; border-radius: 999px; font-size: 13px; white-space: nowrap; }
.header-cta__hint { font-size: 12px; color: var(--text-muted); line-height: 1.25; max-width: 190px; }
.header-cta__hint b { color: var(--green-ink); }
@media (max-width: 1180px) { .header-cta__hint { display: none; } }   /* тесно — оставляем только кнопку */
.catalog-sort-tabs {
  display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px;
}
.catalog-sort-btn {
  padding: 5px 12px; border-radius: 20px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text-muted); font-size: 12px;
  font-weight: 600; cursor: pointer; transition: all 0.15s;
}
.catalog-sort-btn.is-active {
  background: var(--primary); color: #fff; border-color: var(--primary);
}
.catalog-sort-btn:hover:not(.is-active) { border-color: var(--primary); color: var(--primary); }

/* Строка кнопки фильтров */
.catalog-filter-bar {
  display: flex; gap: 8px; align-items: center; margin-bottom: 12px;
}
.catalog-filter-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 14px; border-radius: 20px;
  border: 1.5px solid var(--border);
  background: var(--surface); color: var(--text-muted);
  font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.15s;
}
.catalog-filter-toggle.has-filters {
  border-color: var(--primary); color: var(--primary);
}
.filter-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px;
  background: var(--primary); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 1;
}

/* Чипы выбора */
.catalog-filters__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-chip {
  padding: 5px 13px; border-radius: 999px;
  border: 1.5px solid var(--border);
  background: var(--surface); color: var(--text-muted);
  font-size: 13px; cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.filter-chip.is-active {
  border-color: var(--primary); background: var(--primary);
  color: #fff; font-weight: 600;
}
.filter-chip:hover:not(.is-active) { border-color: var(--primary); color: var(--primary); }

/* ===== Панель фильтров ===== */
.catalog-filters { position: relative; }
.catalog-filters__overlay { display: none; }

/* Десктоп: разворачивается на месте */
.catalog-filters__body {
  display: none;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px 18px;
  margin-bottom: 14px;
  box-shadow: var(--shadow);
}
.catalog-filters.is-open .catalog-filters__body { display: block; }

.catalog-filters__header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px;
}
.catalog-filters__section { margin-bottom: 14px; }
.catalog-filters__label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--text-muted); margin-bottom: 8px;
}
.catalog-filters__price-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.catalog-filters__dash { color: var(--text-muted); }
.catalog-filter-input {
  width: 100px; padding: 6px 10px; border: 1.5px solid var(--border);
  border-radius: 8px; background: var(--surface); color: var(--text);
  font-size: 13px; font-family: inherit;
}
.catalog-filter-input:focus { border-color: var(--primary); outline: none; }
.catalog-filters__footer { margin-top: 8px; }

/* Мобайл: bottom-sheet */
@media (max-width: 768px) {
  .catalog-filters__overlay {
    display: block; position: fixed; inset: 0;
    background: rgba(0,0,0,0.45); z-index: 400;
    opacity: 0; pointer-events: none;
    transition: opacity 0.25s;
  }
  .catalog-filters.is-open .catalog-filters__overlay {
    opacity: 1; pointer-events: auto;
  }
  .catalog-filters__body {
    display: block !important; position: fixed; bottom: 0; left: 0; right: 0;
    z-index: 401; border-radius: 20px 20px 0 0;
    max-height: 82vh; overflow-y: auto;
    padding: 20px 18px env(safe-area-inset-bottom, 24px);
    border: none; border-top: 1.5px solid var(--border);
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
    box-shadow: 0 -4px 30px rgba(0,0,0,0.18);
  }
  .catalog-filters.is-open .catalog-filters__body { transform: translateY(0); }
}
.catalog-filter-check input { cursor: pointer; }

/* ===== Галерея миниатюр в openPlant ===== */
.plant-gallery__thumb.is-active {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary);
}

/* ===== Скидочный бейдж ===== */
.discount-badge {
  display: inline-flex; align-items: center;
  background: var(--danger); color: #fff; /* был #ef4444 — 3.76:1; #dc2626 даёт 4.83:1 */
  font-size: 12px; font-weight: 700; padding: 2px 7px;
  border-radius: 12px; vertical-align: middle; margin-left: 6px;
}
.discount-badge--sm {
  font-size: 10px; padding: 1px 5px; border-radius: 8px; margin-left: 4px;
}
.plant-price--old {
  font-size: 14px; font-weight: 400; color: var(--text-muted);
  text-decoration: line-through;
}

/* ===== Похожие товары ===== */
.similar-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.similar-card {
  border-radius: 10px; overflow: hidden; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border);
  transition: box-shadow 0.15s;
}
.similar-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.similar-card__img {
  aspect-ratio: 1; background: linear-gradient(145deg, var(--surface-2), var(--surface-3));
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; position: relative;
}
.similar-card__img img { width:100%;height:100%;object-fit:cover; }
.similar-card__name {
  font-size: 12px; font-weight: 600; padding: 6px 8px 2px;
  line-height: 1.3; overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.similar-card__price { font-size: 13px; font-weight: 700; padding: 0 8px 8px; color: var(--green-ink); }

/* ===== Блок доставки в openPlant ===== */
.delivery-info-list { display: flex; flex-direction: column; gap: 6px; }
.delivery-info-row {
  display: flex; align-items: center; gap: 8px; font-size: 13px;
}
.delivery-info-row__label { font-weight: 600; min-width: 120px; }
.delivery-info-row__price { color: var(--green-ink); font-weight: 700; }

/* ===== Таймлайн заказа ===== */
.order-timeline {
  display: flex; align-items: flex-start; gap: 0; margin: 12px 0;
}
.order-timeline--cancelled {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; background: #fef2f2; border-radius: 10px;
  border: 1px solid #fecaca; color: #ef4444; font-size: 14px;
  font-weight: 600; margin: 12px 0;
}
.order-timeline__step {
  display: flex; flex-direction: column; align-items: center;
  flex: 1; min-width: 0;
}
.order-timeline__dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--border); border: 2px solid var(--border);
  flex-shrink: 0; transition: all 0.2s;
}
.order-timeline__step.is-done .order-timeline__dot {
  background: var(--primary); border-color: var(--primary);
}
.order-timeline__step.is-active .order-timeline__dot {
  background: var(--accent); border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(242,191,41,0.25);
}
.order-timeline__label {
  font-size: 11px; font-weight: 600; margin-top: 4px; text-align: center;
  color: var(--text-muted);
}
.order-timeline__step.is-done .order-timeline__label,
.order-timeline__step.is-active .order-timeline__label { color: var(--text); }
.order-timeline__ts { font-size: 10px; text-align: center; margin-top: 1px; }
.order-timeline__line {
  flex: 1; height: 2px; background: var(--border);
  margin-top: 6px; align-self: flex-start;
}

/* ===== Ответ продавца на отзыв ===== */
.review-reply {
  margin-top: 8px; padding: 8px 12px;
  background: var(--surface-2); border-radius: 8px;
  border-left: 3px solid var(--primary);
}
.review-reply__label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--primary); margin-bottom: 4px;
}
.review-reply__text { font-size: 13px; line-height: 1.5; }

/* ===== Fulfillment badges ===== */
.fulfillment-badge {
  display: block; padding: 8px 12px; border-radius: 8px;
  font-size: 13px; margin-bottom: 10px; line-height: 1.4;
  background: rgba(28,119,53,0.08); border: 1px solid rgba(28,119,53,0.25);
  color: var(--text);
}
.fulfillment-badge--preorder {
  background: rgba(242,191,41,0.12); border-color: rgba(242,191,41,0.4);
}
.plant-card__preorder-badge {
  position: absolute; top: 28px; left: 4px;
  background: var(--accent); color: #0B2C16;
  font-size: 9px; font-weight: 800; padding: 2px 5px;
  border-radius: 4px; pointer-events: none; text-transform: uppercase;
}
/* Пассивный бейдж «цена снизилась» в экране Избранное (pull, без пушей).
   Левый нижний угол картинки — не пересекается со статусом (сверху-слева),
   сердцем (сверху-справа) и корзиной (снизу-справа). */
.plant-card__drop-badge {
  position: absolute; bottom: 8px; left: 8px;
  background: var(--rose, #e5484d); color: #fff;
  font-size: 11px; font-weight: 800; padding: 3px 7px;
  border-radius: 999px; pointer-events: none; letter-spacing: .2px;
  box-shadow: 0 1px 4px rgba(0,0,0,.18);
}
.plant-card__drop-was {
  color: var(--muted, #8a8f98); text-decoration: line-through;
  font-size: 12px; font-weight: 600; margin-left: 6px;
}
.plant-card__drop-note {
  display: block; color: var(--rose, #e5484d);
  font-size: 11px; font-weight: 600; margin-top: 1px;
}

/* ===== Витрина (showcase) ===== */
.showcase-section { margin-bottom: 18px; }
/* ── Карточка эксперта (модалка) ───────────────────────────────────────────────
   Было: узкая колонка 480px, три голых абзаца подряд, кнопка действия под ними,
   справа пустота. Стало: шапка с фактами, две колонки (текст + липкая панель действия),
   секции с декоративной полосой. На мобильном колонки схлопываются, действие уходит вниз. */
.expert-card__hero {
  display: flex; gap: 14px; align-items: center;
  padding: 14px; margin-bottom: 14px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(28,119,53,0.12), rgba(242,191,41,0.10));
  border: 1px solid var(--border);
}
.expert-card__ava {
  width: 72px; height: 72px; border-radius: 50%; overflow: hidden; flex: none;
  background: var(--surface); display: flex; align-items: center; justify-content: center;
  font-size: 40px; box-shadow: 0 2px 10px rgba(0,0,0,0.12);
}
.expert-card__ava img { width: 100%; height: 100%; object-fit: cover; }
.expert-card__name { font-weight: 700; font-size: 18px; line-height: 1.25; }
.expert-card__badge { background: var(--primary); color: #fff; border-radius: 4px; padding: 1px 6px; font-size: 12px; white-space: nowrap; }
/* Строка фактов — то, за что платят: город, рейтинг, число материалов. Раньше это лежало
   третьим абзацем текста, и компетенцию приходилось вычитывать. */
.expert-card__facts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; font-size: 12px; color: var(--text-muted); }
/* Разделитель между фактами: без него «📍 Воронеж Новый эксперт» читается одной фразой */
.expert-card__facts span + span::before { content: '· '; opacity: 0.55; }
.expert-card__specs { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 8px; }
.expert-card__grid { display: grid; gap: 16px; }
.expert-sec { margin-bottom: 14px; padding-left: 12px; border-left: 3px solid var(--primary); }
.expert-sec h4 { margin: 0 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.expert-sec p { margin: 0; white-space: pre-wrap; line-height: 1.55; }
/* Выбор эксперта под задачу (шаг 2 формы вопроса). Строка-карточка: аватар, имя с тегом
   «по вашей теме», факты, специализации, цена. Выбранная подсвечена рамкой — человек должен
   видеть, за что именно платит, до нажатия кнопки. */
.consult-pick {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 10px 12px; margin-bottom: 8px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--surface); transition: border-color .12s;
}
.consult-pick:hover { border-color: var(--primary); }
.consult-pick.is-selected { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.consult-pick__ava {
  flex: 0 0 46px; width: 46px; height: 46px; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center; font-size: 22px;
  background: var(--surface-2); border: 1px solid var(--border);
}
.consult-pick__ava img { width: 100%; height: 100%; object-fit: cover; }
.consult-pick__tag {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; font-weight: 700;
  color: #fff; background: var(--primary); border-radius: 999px; padding: 1px 7px;
}
.consult-pick__specs { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.consult-pick__price { flex: 0 0 auto; text-align: right; font-weight: 800; font-size: 15px; }
@media (max-width: 520px) {
  .consult-pick { align-items: flex-start; }
  .consult-pick__price { font-size: 14px; }
}

/* Подпись автора-эксперта под статьёй базы ухода: сверху — атрибуция, снизу — приглашение
   к консультации. Кликабельна целиком, ведёт в карточку эксперта. */
.care-byline {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  margin: 10px 0; padding: 10px 12px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--surface-2); line-height: 1.35;
}
.care-byline:hover { border-color: var(--primary); }
.care-byline--cta { margin-top: 16px; background: var(--primary-soft, var(--surface-2)); }
.care-byline__ava {
  flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
  background: var(--surface); border: 1px solid var(--border);
}
.care-byline__ava img { width: 100%; height: 100%; object-fit: cover; }
.care-byline__go { margin-left: auto; color: var(--text-muted); font-size: 20px; }

.expert-card__side {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px; background: var(--surface-2); height: fit-content;
}
.expert-card__price { font-size: 22px; font-weight: 800; }
@media (min-width: 760px) {
  .expert-card__grid { grid-template-columns: 1fr 280px; align-items: start; }
  .expert-card__side { position: sticky; top: 8px; }   /* действие не уезжает при чтении биографии */
}

/* Карточка эксперта — плитка в сетке (как товары и магазины), а не полоса во всю ширину.
   На широком экране растянутая строка с маленьким аватаром выглядит пустой; плитка ещё и
   нормально масштабируется, когда экспертов станет больше одного. */
.expert-tiles {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.expert-tile {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
  padding: 14px 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  cursor: pointer; transition: transform 0.15s, box-shadow 0.15s;
}
.expert-tile:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(11,44,22,0.12); }
.expert-tile:active { transform: scale(0.98); }
.expert-tile__avatar {
  width: 64px; height: 64px; border-radius: 50%; overflow: hidden;
  background: var(--surface-2);
  display: flex; align-items: center; justify-content: center; font-size: 32px;
  margin-bottom: 2px;
}
.expert-tile__avatar img { width: 100%; height: 100%; object-fit: cover; }
.expert-tile__name { font-weight: 700; font-size: 14px; line-height: 1.3; }
.expert-tile__badge { background: var(--primary); color: #fff; border-radius: 4px; padding: 1px 5px; font-size: 10px; }
/* Слоган в две строки: у экспертов он бывает длинным, а плитки должны стоять ровно */
.expert-tile__tagline {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.35;
}
.expert-tile__specs { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; margin-top: 2px; }
.expert-tile__price { margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--accent-ink); }

/* «Живой зал» выставки: общий чат эфира. Высота фиксирована — лента не должна выталкивать
   позиции выставки за экран; прокрутка внутри, автоскролл к свежему. */
.exh-chat__body {
  max-height: 220px; overflow-y: auto; overscroll-behavior: contain;
  border: 1px solid var(--border); border-radius: 10px;
  padding: 8px 10px; background: var(--surface-2);
}
.exh-chat__msg { font-size: 13px; line-height: 1.45; margin-bottom: 5px; position: relative; padding-right: 22px; }
.exh-chat__flag {
  position: absolute; top: 0; right: 0;
  background: none; border: 0; padding: 0 4px;
  color: var(--text-muted); font-size: 12px; cursor: pointer; opacity: 0.5;
}
.exh-chat__flag:hover, .exh-chat__flag:focus-visible { opacity: 1; color: var(--rose); }
.exh-chat__msg b { font-weight: 700; margin-right: 5px; }
.exh-chat__msg--seller b { color: var(--primary); }
.exh-chat__form { display: flex; gap: 6px; margin-top: 8px; }
.exh-chat__form input {
  flex: 1; padding: 9px 11px; font-size: 16px;   /* 16px — иначе iOS зумит страницу при фокусе */
  border: 1px solid var(--border-input); border-radius: 10px;
  background: var(--surface); color: var(--text); font-family: inherit;
}

/* Метка контекста на сообщении в чате: «про какой заказ/товар» — видно без пролистывания вверх */
.chat-msg__ctx {
  font-size: 11px; font-weight: 600; opacity: 0.75;
  margin-bottom: 3px;
}
/* Плашка над полем ввода: следующий вопрос уйдёт с меткой; крестик её снимает */
.chat-ctx-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: 0 0 8px; padding: 6px 10px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px;
  font-size: 12px;
}
.chat-ctx-bar button {
  background: none; border: 0; padding: 2px 6px;
  color: var(--text-muted); font-size: 14px; cursor: pointer;
}

/* Кнопка «Все →» справа в заголовке ленты: уводит в полный список с включённой подборкой.
   Раскладку заголовка не трогаем — у .showcase-section__header ниже уже flex + space-between. */
.showcase-section__all {
  background: none; border: 0; padding: 4px 2px;
  color: var(--primary); font-family: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
.showcase-section__all:active { opacity: 0.6; }
.showcase-section__header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.showcase-section__title { font-size: 15px; font-weight: 700; }
.showcase-carousel {
  display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.showcase-carousel::-webkit-scrollbar { height: 10px; }
.showcase-carousel::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 6px; border: 2px solid var(--bg); }
.showcase-carousel::-webkit-scrollbar-thumb:hover { background: var(--accent); }
.showcase-card {
  flex-shrink: 0; width: 130px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--border);
  cursor: pointer; transition: box-shadow 0.15s;
  scroll-snap-align: start; overflow: hidden;
}
.showcase-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.1); }
.showcase-card__img {
  width: 130px; height: 100px; background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 42px; overflow: hidden; position: relative;
}
.showcase-card__img img { width:100%;height:100%;object-fit:cover; }
.showcase-card__name {
  font-size: 12px; font-weight: 600; padding: 6px 8px 2px;
  line-height: 1.3; overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.showcase-card__price { font-size: 12px; font-weight: 700; padding: 0 8px 8px; color: var(--green-ink); }
.showcase-card--shop { width: 110px; }
.showcase-card--shop .showcase-card__img {
  height: 80px; background: transparent; align-items: center; justify-content: center;
}

/* ===== Финансовый дашборд ===== */
.finance-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px;
}
.finance-card {
  background: var(--surface-2); border-radius: 12px; padding: 12px 14px;
  border: 1px solid var(--border);
}
.finance-card--green { border-color: var(--primary); background: rgba(28,119,53,0.06); }
.finance-card--hold  { border-color: var(--accent);  background: rgba(242,191,41,0.08); }
.finance-card__label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 4px; }
.finance-card__value { font-size: 18px; font-weight: 800; color: var(--text); line-height: 1.2; }
.finance-card__value--dim { color: var(--text-muted); }
.finance-card__sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* ===== Массовые операции ===== */
.bulk-panel {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 8px 10px; background: var(--surface-2); border-radius: 10px;
  border: 1px solid var(--border); margin-bottom: 8px;
}
.bulk-panel__count { font-size: 13px; font-weight: 700; margin-right: 4px; }
.list-item--selected { background: rgba(28,119,53,0.07); border-left: 3px solid var(--primary); }

/* Пояснение fulfillment в чекауте */
.fulfillment-notice {
  padding: 8px 12px; border-radius: 8px; font-size: 13px;
  margin-bottom: 8px; line-height: 1.4;
}
.fulfillment-notice--stock {
  background: rgba(28,119,53,0.07); border: 1px solid rgba(28,119,53,0.25);
}
.fulfillment-notice--preorder {
  background: rgba(242,191,41,0.1); border: 1px solid rgba(242,191,41,0.35);
}

/* ===== Магазины — квадратные плитки (п.2) ===== */
.shop-tiles-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 4px 0;
}
@media (min-width: 600px)  { .shop-tiles-grid { grid-template-columns: repeat(3, 1fr); } }

.shop-tile {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start;
  padding: 16px 10px 12px;
  cursor: pointer;
  transition: box-shadow 0.15s, border-color 0.15s;
  position: relative;
  text-align: center;
  gap: 6px;
}
.shop-tile:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 16px rgba(242,191,41,0.16);
}
.shop-tile__avatar { flex-shrink: 0; }
.shop-tile__name {
  font-size: 13px; font-weight: 700; line-height: 1.3;
  overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.shop-tile__rating { font-size: 13px; }
.shop-tile__meta { font-size: 11px; margin-top: -2px; }
.shop-tile__follow { margin-top: auto; width: 100%; }   /* прижата к низу — кнопки выровнены вне зависимости от высоты контента (бейдж «Основатель» и т.п.) */

/* Бейджи продвижения (золотая ⭐ на карточках и плитках) УДАЛЕНЫ 30.07.2026.
   Две причины. Первая — правовая: звезда выделяла платно продвинутый товар среди
   однородных в общем каталоге, то есть создавала рекламу БЕЗ пометки и erid.
   Вторая — вкусовая: эмодзи-звезда с тенью и радиальной подложкой выглядела
   дёшево. Платное размещение теперь живёт только в помеченной полосе. */

/* ===== Карусели витрины — полноразмерные карточки (п.4) ===== */
.showcase-plant-card {
  flex-shrink: 0;
  width: clamp(140px, 42vw, 180px);
  cursor: pointer;
}
/* На десктопе карточки чуть крупнее */
@media (min-width: 900px) { .showcase-plant-card { width: 200px; } }

/* Горизонтальный скролл каруселей */
.showcase-carousel {
  display: flex; gap: 10px; overflow-x: auto;
  padding: 8px 2px 12px; /* верхний отступ — чтобы золотая рамка при наведении не срезалась */
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: auto;
}
.showcase-carousel .plant-card,
.showcase-carousel .showcase-plant-card {
  scroll-snap-align: start;
}

/* ===== Авто-карусель «Новинки» (marquee) ===== */
.marquee-container {
  overflow: hidden;
  /* верхний/нижний отступ чтобы золотая рамка card при hover не срезалась */
  padding: 8px 0 12px;
  cursor: grab;
}
.marquee-container:active { cursor: grabbing; }
.marquee-rail {
  display: flex;
  gap: 12px;
  /* width будет считаться JS; will-change для GPU-слоя */
  will-change: transform;
  /* НЕ overflow, НЕ scroll-snap — движение через JS */
}
/* Карточки в marquee того же размера что showcase-plant-card */
.marquee-rail .plant-card,
.marquee-rail .showcase-plant-card {
  flex-shrink: 0;
  width: clamp(140px, 42vw, 180px);
  /* убираем snap, не нужен */
  scroll-snap-align: unset;
}
@media (min-width: 900px) {
  .marquee-rail .plant-card,
  .marquee-rail .showcase-plant-card { width: 200px; }
}

/* ===== Блок «Продвигается»: две рамки рядом (товары | магазины) ===== */
/* ── Полоса продвижения (реклама): СТАТИЧНАЯ, не листается ────────────────────
   Сколько влезло по ширине — столько и показано: 5 / 3 / 2 по брейкпоинтам.
   Ни рамки, ни подложки: рекламное место должно выглядеть дорого, а «врезка»
   с серым фоном читалась как баннер с сайта 2010-х. Ротацию состава делает
   порядок «у кого меньше показов — тот выше» (см. promotedRotation в app.js). */
.promo-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}
.promo-row__head {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 10px; flex-wrap: wrap;
}
.promo-row__title { font-weight: 700; font-size: 17px; }
.promo-row__label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--text-muted);
}
.promo-card { cursor: pointer; min-width: 0; }
.promo-card__img {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface-2);
}
.promo-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.promo-card__name {
  margin-top: 8px; font-size: 13px; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.promo-card__price { margin-top: 2px; font-size: 15px; font-weight: 700; }
.promo-card__shop { margin-top: 3px; font-size: 12px; color: var(--text-muted); }
/* erid — обязателен по ч. 17 ст. 18.1, но не должен спорить с фото: мелко и приглушённо */
.promo-card__erid {
  margin-top: 1px; font-size: 10px; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.promo-slot {
  min-width: 0;
  border: 1.5px dashed var(--border-2); border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 10px; cursor: pointer; text-align: center;
  color: var(--text-muted); background: var(--surface);
  aspect-ratio: 4 / 3;
}
/* Если в полосе ТОЛЬКО заглушка (продвигаемых нет, продавец видит приглашение) — растягиваем её
   на всю ширину компактной горизонтальной полоской. Иначе одинокая высокая карточка стоит слева,
   а справа зияет пустая строка. Это правило было у прежней ленты и потерялось при её удалении —
   случай уже был решён, а решение уехало вместе со старой вёрсткой. */
.promo-row > .promo-slot:only-child {
  grid-column: 1 / -1;
  aspect-ratio: auto;
  flex-direction: row;
  gap: 10px;
  padding: 14px 12px;
}
.promo-row > .promo-slot:only-child .promo-slot__plus { font-size: 18px; }
.promo-slot:hover { border-color: var(--primary); color: var(--primary); }
.promo-slot__plus { font-size: 22px; line-height: 1; }
.promo-slot__text { font-size: 12px; font-weight: 600; }
.promo-slot__cta { font-size: 11px; color: var(--primary); font-weight: 700; }

/* ── Ползунок-переключатель ──────────────────────────────────────────────── */
.ui-switch {
  position: relative; display: inline-block;
  width: 42px; height: 24px; border-radius: 999px;
  background: var(--border-2); transition: background .18s; flex-shrink: 0;
}
.ui-switch.is-on { background: var(--primary); }
.ui-switch__knob {
  position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  transition: transform .18s;
}
.ui-switch.is-on .ui-switch__knob { transform: translateX(18px); }
/* Полоса продвижения: 5 / 3 / 2 карточки. Листать нельзя, поэтому число мест ОБЯЗАНО
   совпадать с тем, что влезает: иначе оплаченные карточки уехали бы за экран навсегда. */
@media (max-width: 900px) {
  .promo-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .promo-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .promo-row__title { font-size: 16px; }
}

/* ===== Плашка «Магазин площадки» ===== */
.platform-shop-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: linear-gradient(135deg, var(--primary), var(--primary-deep));
  color: #fff; font-size: 10px; font-weight: 800;
  padding: 2px 8px; border-radius: 8px;
  letter-spacing: 0.03em; vertical-align: middle;
  margin-left: 6px;
}

/* ===== База знаний / контент экспертов ===== */
.content-grid {
  display: grid; gap: 12px;
  grid-template-columns: 1fr;
}
@media (min-width: 600px) { .content-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .content-grid { grid-template-columns: repeat(3, 1fr); } }

.content-card {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px; border-radius: var(--radius);
  border: 1.5px solid var(--border); background: var(--surface);
  transition: box-shadow 0.15s, border-color 0.15s;
}
.content-card:hover { border-color: var(--primary); box-shadow: var(--shadow); }
.content-card--paid { border-color: var(--accent); }
.content-card__icon { font-size: 28px; flex-shrink: 0; }
.content-card__body { flex: 1; min-width: 0; }
.content-card__title { font-size: 14px; font-weight: 700; line-height: 1.3; margin-bottom: 4px; }
.content-card__author { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.content-card__desc { font-size: 13px; color: var(--text-2); margin-bottom: 8px; line-height: 1.4; }
.content-card__footer { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.content-verified-badge {
  display: inline-flex; align-items: center;
  background: rgba(28,119,53,0.1); color: var(--primary);
  font-size: 10px; font-weight: 700; padding: 1px 6px;
  border-radius: 6px; border: 1px solid rgba(28,119,53,0.3);
}

/* ===== Защищённый просмотрщик ===== */
.protected-viewer { position: relative; }
.protected-viewer__meta {
  font-size: 13px; color: var(--text-muted);
  margin-bottom: 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.protected-viewer__content {
  position: relative; overflow: hidden;
  border: 1px solid var(--border); border-radius: 10px;
  padding: 16px; background: var(--surface);
  /* Блокируем выделение */
  user-select: none; -webkit-user-select: none; -moz-user-select: none;
}
.protected-viewer__text {
  font-size: 14px; line-height: 1.7; color: var(--text);
  position: relative; z-index: 1;
}
.protected-viewer__pdf-stub {
  text-align: center; padding: 32px 16px;
  position: relative; z-index: 1;
}
.protected-viewer__watermark {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none; overflow: hidden;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 32px; padding: 24px;
  transform: rotate(-30deg) scale(1.4);
}
.protected-viewer__watermark span {
  font-size: 12px; font-weight: 600; white-space: nowrap;
  color: rgba(11,44,22,0.08); letter-spacing: 0.05em;
}
html[data-theme="dark"] .protected-viewer__watermark span {
  color: rgba(242,247,234,0.08);
}

/* ===== Уход — дисклеймер ===== */
.care-disclaimer {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 12px;
  font-size: 12px; color: var(--text-2); line-height: 1.5;
  margin-bottom: 16px;
}
.care-disclaimer span:first-child { flex-shrink: 0; font-size: 16px; }

/* ===== Уход — лента задач ===== */
.care-tasks-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.care-task-item {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 12px;
}
.care-task-item--overdue { border-color: #ef4444; background: rgba(239,68,68,0.05); }
.care-task-item__icon { font-size: 20px; flex-shrink: 0; }
.care-task-item__body { flex: 1; min-width: 0; }
.care-task-item__label { font-size: 14px; font-weight: 500; }
.care-task-item__due { font-size: 12px; color: var(--text-2); margin-top: 2px; }
.care-task-item__due.is-overdue { color: #ef4444; font-weight: 600; }
.care-task-item__done { flex-shrink: 0; }

/* ===== Уход — сетка растений ===== */
.my-plants-grid { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.my-plant-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px;
  cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.my-plant-card:hover { border-color: var(--primary); box-shadow: var(--shadow); }
.my-plant-card__photo { flex-shrink: 0; }
.my-plant-card__body { flex: 1; min-width: 0; }
.my-plant-card__name { font-weight: 600; font-size: 15px; }
.my-plant-card__cat { margin-top: 2px; }
.my-plant-card__water { margin-top: 4px; }

@media (min-width: 600px) {
  .my-plants-grid { display: grid; grid-template-columns: 1fr 1fr; }
}

/* ===== Финансы 2.0 ===== */
.fin-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
.fin-kpi-grid--sm {
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 0;
}
@media (min-width: 520px) {
  .fin-kpi-grid { grid-template-columns: repeat(3, 1fr); }
  .fin-kpi-grid--sm { grid-template-columns: repeat(4, 1fr); }
}
.fin-kpi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
}
.fin-kpi-card__val {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
}
.fin-kpi-card__val--accent { color: var(--accent-ink); }
.fin-kpi-card__label {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 3px;
}
.fin-kpi-card__sub {
  font-size: 11px;
  color: var(--text-2);
  margin-top: 2px;
}

.fin-section {
  margin-bottom: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.fin-section__title {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 12px;
  color: var(--text);
}

.fin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.fin-table th {
  text-align: left;
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.fin-table td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.fin-table tr:last-child td { border-bottom: none; }
.fin-table tr:hover td { background: var(--surface-2); }
.fin-num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ===== Журнал 2.0 ===== */
.jlog-filters {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 12px;
}
.jlog-period-tabs { margin-bottom: 8px; }
.jlog-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
  margin-top: 10px;
}

.jlog-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.jlog-entry {
  display: flex;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  background: var(--surface);
  transition: background .1s;
}
.jlog-entry:last-child { border-bottom: none; }
.jlog-entry:hover { background: var(--surface-2); }

.jlog-entry__time {
  flex-shrink: 0;
  width: 70px;
  font-size: 11px;
  color: var(--text-muted);
  padding-top: 2px;
  line-height: 1.4;
}
.jlog-entry__body { flex: 1; min-width: 0; }
.jlog-entry__header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.jlog-entry__action { font-size: 13px; }
.jlog-entry__meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-2);
  margin-bottom: 2px;
}
.jlog-actor { font-weight: 600; }
.jlog-target { color: var(--text-muted); }
.jlog-reason { font-size: 12px; color: var(--text-muted); margin-top: 2px; font-style: italic; }

/* Чип категории в журнале. Базовый вид — нейтральный: категорий на сервере 18, и чип НЕ должен
   зависеть от того, завели ли для неё цвет (раньше стилей было шесть, а сервер писал семнадцать —
   остальные рисовались как голый текст на пустом фоне). Цветом выделяем только те, что нужно
   ловить глазом: деньги, доступ к чужим данным, санкции. */
.jlog-cat {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
  white-space: nowrap;
  background: var(--surface-2);
  color: var(--text-muted);
}
.jlog-cat--moderation { background: rgba(239,68,68,0.12); color: #dc2626; }
.jlog-cat--disputes   { background: rgba(239,68,68,0.12); color: #dc2626; }
.jlog-cat--finance    { background: rgba(242,191,41,0.15); color: var(--accent-ink); }
.jlog-cat--orders     { background: rgba(242,191,41,0.15); color: var(--accent-ink); }
.jlog-cat--shops      { background: rgba(28,119,53,0.12);  color: var(--primary); }
.jlog-cat--users      { background: rgba(99,102,241,0.12); color: #6366f1; }
.jlog-cat--roles      { background: rgba(20,184,166,0.12); color: #0d9488; }
.jlog-cat--system     { background: rgba(20,184,166,0.12); color: #0d9488; }
/* переписка и объявления — доступ к чужому контенту, помечаем отдельно */
.jlog-cat--message_threads { background: rgba(168,85,247,0.12); color: #9333ea; }
.jlog-cat--other      { background: var(--surface-2); color: var(--text-muted); }

.jlog-diff {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  font-size: 12px;
  background: var(--surface-2);
  border-radius: 6px;
  padding: 2px 8px;
}
.jlog-diff__before { color: #dc2626; text-decoration: line-through; }
.jlog-diff__arrow  { color: var(--text-muted); }
.jlog-diff__after  { color: var(--primary); font-weight: 600; }

/* ===== Тред заказа ===== */
.order-thread {
  margin-top: 16px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.order-thread__title {
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 10px;
  color: var(--text);
}
.order-thread__list {
  max-height: 220px;
  overflow-y: auto;
  background: var(--surface-2);
  border-radius: var(--radius);
  padding: 10px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.order-thread__input-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.order-thread-msg {
  max-width: 85%;
  padding: 7px 10px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.4;
}
.order-thread-msg--out {
  align-self: flex-end;
  background: var(--primary);
  color: #fff;
  border-bottom-right-radius: 3px;
}
.order-thread-msg--in {
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom-left-radius: 3px;
}
.order-thread-msg__meta {
  font-size: 10px;
  opacity: 0.7;
  margin-bottom: 3px;
}
.order-thread-msg__text { word-break: break-word; }

/* ============================================================================
   Модерация клиентов — статус блокировки и карточки жалоб
   ============================================================================ */

/* Статус-плашка в карточке клиента */
.block-status {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; border-radius: var(--radius-sm);
}
.block-status--full {
  background: rgba(219,39,119,0.08); border: 1px solid var(--rose);
}
.block-status--chat {
  background: var(--accent-soft); border: 1px solid var(--accent);
}
html[data-theme="dark"] .block-status--full {
  background: rgba(219,39,119,0.14);
}
html[data-theme="dark"] .block-status--chat {
  background: rgba(242,191,41,0.12);
}
.block-status__icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; line-height: 1; }
.block-status__label { font-size: 14px; font-weight: 600; line-height: 1.3; }
.block-status__reason { font-size: 12px; color: var(--text-muted); margin-top: 3px; }

/* Группа action-кнопок (нет блока) */
.block-actions { display: flex; flex-direction: column; }
.block-actions__separator {
  height: 1px; background: var(--border); margin: 10px 0;
}

/* ============================================================================
   ПРОДВИЖЕНИЕ — CSS-дополнения
   ============================================================================ */

/* 1. Выбранный тариф в модалках буста/промо
      Работает только через :has() — ванильный CSS, без JS
   ------------------------------------------------------------------ */
label:has(> input[name="boostTier"]:checked),
label:has(> input[name="shopPromoTier"]:checked) {
  border-color: var(--primary) !important;
  background: rgba(28, 119, 53, 0.07);
  box-shadow: 0 0 0 2px rgba(28, 119, 53, 0.18);
}
label:has(> input[name="boostTier"]):hover,
label:has(> input[name="shopPromoTier"]):hover {
  border-color: var(--primary);
  background: rgba(28, 119, 53, 0.04);
  cursor: pointer;
}
html[data-theme="dark"] label:has(> input[name="boostTier"]:checked),
html[data-theme="dark"] label:has(> input[name="shopPromoTier"]:checked) {
  background: rgba(28, 119, 53, 0.15);
  box-shadow: 0 0 0 2px rgba(28, 119, 53, 0.35);
}
html[data-theme="dark"] label:has(> input[name="boostTier"]):hover,
html[data-theme="dark"] label:has(> input[name="shopPromoTier"]):hover {
  background: rgba(28, 119, 53, 0.09);
}

/* 2. Блок «Продвигается» — тег «реклама»
      Заменяет стилизацию голого .muted на читаемый тег
   ------------------------------------------------------------------ */
.showcase-ad-label {
  display: inline-flex; align-items: center;
  font-size: 9px; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid var(--border);
  background: var(--surface-2);
  padding: 1px 5px;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: middle;
  line-height: 1.6;
}
html[data-theme="dark"] .showcase-ad-label {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
}

/* Бейдж блокировки в списке клиентов */
.client-block-badge {
  display: inline-flex; align-items: center;
  font-size: 12px; margin-left: 6px;
  vertical-align: middle; line-height: 1;
  opacity: 0.8;
}
.client-block-badge--full { opacity: 1; }

/* Карточки жалоб в модерации */
.report-card {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 10px;
  background: var(--surface);
}
.report-card--buyer {
  border-left: 3px solid var(--rose);
}
html[data-theme="dark"] .report-card {
  border-color: var(--border);
}
.report-card__header {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 6px;
}
.report-card__type {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-muted);
  background: var(--surface-2); padding: 2px 7px;
  border-radius: 4px; flex-shrink: 0; white-space: nowrap;
}
.report-card--buyer .report-card__type {
  background: rgba(219,39,119,0.1); color: var(--rose-ink);
}
html[data-theme="dark"] .report-card--buyer .report-card__type {
  background: rgba(219,39,119,0.18);
}
.report-card__target { font-size: 14px; font-weight: 600; }
.report-card__meta {
  font-size: 12px; color: var(--text-muted); margin-bottom: 6px;
}
.report-card__reason {
  font-size: 13px; margin: 0 0 10px;
  line-height: 1.5; color: var(--text-2);
}
.report-card__actions {
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
}
/* На узком экране danger-кнопка на всю ширину */
@media (max-width: 420px) {
  .report-card__actions { flex-direction: column; }
  .report-card__actions .btn { width: 100%; }
}

/* Дисклеймер «живой товар» */
.plant-live-disclaimer {
  font-size: 12px;
  color: var(--text-muted);
  background: var(--surface-2);
  border-radius: 8px;
  padding: 8px 12px;
  border-left: 3px solid var(--primary);
  line-height: 1.5;
}

/* ============================================================================
   ТЗ-4 POLISH — radii, button states, empty-states, grid, dark theme
   ============================================================================ */

/* ── П.1 Единая система радиусов (--radius / --radius-sm) ─────────────────── */
.care-item     { border-radius: var(--radius-sm); }
.seller-block  { border-radius: var(--radius-sm); }
.similar-card  { border-radius: var(--radius-sm); }
.finance-card  { border-radius: var(--radius-sm); }
.bulk-panel    { border-radius: var(--radius-sm); }

/* Единый padding stat-card */
.stat-card { padding: 12px 14px; }

/* Список-айтемы: hover-эффект (active уже есть) */
.list-item { transition: border-color .15s, box-shadow .15s; }
.list-item:hover { border-color: rgba(242,191,41,0.5); box-shadow: var(--shadow); }

/* Карточки магазинов и товаров — padding тела единый */
.shop-card__body { padding: 12px 14px 14px; }

/* ── П.2 Состояния кнопок ─────────────────────────────────────────────────── */

/* Primary — hover чуть светлее */
.btn--primary:hover { background: #22903e; }
html[data-theme="dark"] .btn--primary:hover { background: #1F8339; } /* был #4bbf6a — белый текст 2.5:1; теперь 4.8:1, чуть светлее нового тёмного базового */

/* Outline — hover с зелёным акцентом */
.btn--outline:hover  { border-color: var(--primary); color: var(--primary); background: rgba(28,119,53,0.04); }
.btn--outline:active { background: var(--surface-2); }
html[data-theme="dark"] .btn--outline:hover  { background: rgba(61,168,90,0.1); }

/* Ghost */
.btn--ghost:hover  { background: var(--surface-2); }
.btn--ghost:active { background: var(--surface-3); transform: scale(0.97); }

/* Danger */
.btn--danger:hover { background: #b91c1c; }

/* Accent */
.btn--accent:hover { background: #d9ab00; }

/* Disabled — блокируем scale и pointer */
.btn:disabled, .btn[disabled] {
  opacity: 0.42; cursor: not-allowed; pointer-events: none;
}
/* Focus-visible — кольцо для клавиатурной навигации */
.btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: inherit;
}
.icon-btn:focus-visible,
.nav-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
/* icon-btn hover */
.icon-btn:hover:not(:disabled) { background: var(--surface-2); }
/* nav-btn hover */
.nav-btn:hover { background: var(--surface-2); }
/* role-btn hover */
.role-btn:hover { border-color: var(--border-2); background: var(--surface-2); }

/* ── П.3 Пустые состояния ─────────────────────────────────────────────────── */

/* Flex-колонка + центрование */
.empty-state {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
/* CTA-зона */
.empty-state__action { margin-top: 16px; }

/* Компактный вариант для inline-контекстов */
.empty-state--compact { padding: 24px 16px; }
.empty-state--compact .empty-state__icon { font-size: 40px; margin-bottom: 8px; }

/* Нет разрыва, если нет фона (в списках без рамки) */
.empty-state--bare {
  background: none; border: none;
  padding: 28px 16px;
}

/* ── П.4+5 Сетки и тёмная тема ────────────────────────────────────────────── */

/* plants-grid: чуть больший gap на широких экранах */
@media (min-width: 1200px) {
  .plants-grid { gap: 16px; }
}

/* Убираем прыжок высоты у plant-card__body — min-height на имя */
.plant-card__name { min-height: 2.6em; }

/* Dark mode — order timeline cancelled */
html[data-theme="dark"] .order-timeline--cancelled {
  background: rgba(239,68,68,0.12);
  border-color: rgba(239,68,68,0.32);
  color: #f87171;
}

/* Dark mode — promo-code */
html[data-theme="dark"] .promo-code {
  color: var(--accent-ink);
  background: rgba(242,191,41,0.1);
  border-color: rgba(242,191,41,0.45);
}

/* Dark mode — care task overdue */
html[data-theme="dark"] .care-task-item--overdue {
  background: rgba(239,68,68,0.1);
  border-color: rgba(239,68,68,0.38);
}

/* Dark mode — selected checkout items */
html[data-theme="dark"] .checkout-addr-item.is-selected,
html[data-theme="dark"] .checkout-delivery-item.is-selected {
  background: rgba(61,168,90,0.1);
}

/* Dark mode — list-item selected */
html[data-theme="dark"] .list-item--selected {
  background: rgba(61,168,90,0.1);
}

/* Dark mode — content verified badge */
html[data-theme="dark"] .content-verified-badge {
  background: rgba(61,168,90,0.15);
  border-color: rgba(61,168,90,0.35);
}

/* Dark mode — notif unread */
html[data-theme="dark"] .notif-item.is-unread {
  background: rgba(61,168,90,0.07);
}

/* Dark mode — showcase-card border */
html[data-theme="dark"] .showcase-card {
  border-color: var(--border);
}

/* Dark mode — art card active */
html[data-theme="dark"] .article-card:active,
html[data-theme="dark"] .article-card:hover  { background: var(--surface-2); }

/* Dark mode — fields input-text readable */
html[data-theme="dark"] .field input,
html[data-theme="dark"] .field textarea,
html[data-theme="dark"] .field select,
html[data-theme="dark"] .search {
  color: var(--text);
  background: var(--surface-2);
  border-color: var(--border);
}

/* Dark mode — auction bid input */
html[data-theme="dark"] .auction-bid-input {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--accent);
}

/* Dark mode — cart promo input */
html[data-theme="dark"] .cart-promo-row input {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text);
}

/* Dark mode — jlog diff colors (slightly softer) */
html[data-theme="dark"] .jlog-diff__before { color: #f87171; }
html[data-theme="dark"] .jlog-diff__after  { color: var(--primary); }

/* Dark mode — finance-card green / gold accents visible */
html[data-theme="dark"] .finance-card--green {
  background: rgba(61,168,90,0.1);
  border-color: rgba(61,168,90,0.35);
}
html[data-theme="dark"] .finance-card--hold {
  background: rgba(242,191,41,0.1);
  border-color: rgba(242,191,41,0.35);
}

/* Dark mode — stat-card numbers always readable */
html[data-theme="dark"] .stat-card__num,
html[data-theme="dark"] .sdash__stats .stat-card__num { color: var(--accent); }

/* Стабильная ширина и padding сеток на разных устройствах */
@media (max-width: 767px) {
  #main.main { padding: 12px 12px calc(80px + var(--safe-bottom)); }
}

/* ============================================================================
   Обложки магазинов, бейдж «проверен», редизайн карточек
   ============================================================================ */

/* ── Бейдж «Проверен» ─────────────────────────────────────────────────────── */
.verified-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--primary); color: #fff;
  font-size: 10px; font-weight: 800; line-height: 1;
  vertical-align: middle; margin-left: 5px; flex-shrink: 0;
}
.verified-badge--sm { width: 13px; height: 13px; font-size: 8px; margin-left: 3px; }
html[data-theme="dark"] .verified-badge { background: var(--primary); }

/* ── Превью обложки в настройках ─────────────────────────────────────────── */
.shop-cover-preview {
  width: 100%; height: 120px; border-radius: var(--radius);
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px dashed var(--border-2);
}
.shop-cover-preview__hint {
  font-size: 13px; color: rgba(255,255,255,0.75);
  font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
/* «Безопасная зона» обложки: центр виден на всех экранах, боковые ~20% могут обрезаться на узких */
.cover-safe-overlay { position: absolute; inset: 0; pointer-events: none; display: flex; }
.cover-safe-overlay::before, .cover-safe-overlay::after { content: ''; flex: 0 0 20%; background: rgba(0,0,0,0.30); }
.cover-safe-zone {
  flex: 1; display: flex; align-items: center; justify-content: center;
  border-left: 1px dashed rgba(255,255,255,0.65); border-right: 1px dashed rgba(255,255,255,0.65);
}
.cover-safe-zone span {
  font-size: 11px; color: rgba(255,255,255,0.9);
  background: rgba(0,0,0,0.4); padding: 2px 8px; border-radius: 10px;
}

/* ── Карточка магазина: shop-tile (редизайн) ─────────────────────────────── */
/* Убираем старый padding — теперь у тайла overflow:hidden + обложка flush */
.shop-tile {
  padding: 0;
  overflow: hidden;
  align-items: stretch;
  gap: 0;
}
.shop-tile__cover {
  width: 100%; height: 130px; flex-shrink: 0;
  position: relative;
  background: linear-gradient(135deg, var(--primary-dark) 0%, #0F5A26 55%, #1C7735 100%);
}
/* Обложка магазина в списках — ленивая картинка поверх градиента-заглушки (см. shopCoverImg).
   Аватар и бейджи лежат выше неё по z-index, поэтому порядок в разметке значения не имеет. */
.shop-cover-img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}
.shop-tile__avatar-ring {
  z-index: 1;
  position: absolute; bottom: -22px; left: 50%; transform: translateX(-50%);
  border-radius: 14px;
  border: 3px solid var(--surface);
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  background: var(--surface);
  overflow: hidden; flex-shrink: 0;
  line-height: 0;
}
html[data-theme="dark"] .shop-tile__avatar-ring { border-color: var(--surface); }
.shop-tile__body {
  padding: 30px 10px 12px;
  display: flex; flex-direction: column;
  align-items: center; gap: 4px;
  width: 100%; flex: 1;
}
.shop-tile__name {
  font-size: 14px; font-weight: 700; line-height: 1.3;
  text-align: center;
  overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.shop-tile__rating { font-size: 12px; }
.shop-tile__meta { font-size: 11px; color: var(--text-muted); }
.shop-tile__follow { margin-top: 6px; width: 100%; }

/* Сетка магазинов: десктоп max 4 колонки */
@media (min-width: 900px)  { .shop-tiles-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1200px) { .shop-tiles-grid { grid-template-columns: repeat(4, 1fr); } }

/* ── Мини-карточка магазина в карусели (shopMiniCard) ───────────────────── */
.showcase-card--shop { width: 155px; padding: 0; overflow: hidden; }
.shop-mini-cover {
  width: 100%; height: 64px; flex-shrink: 0;
  position: relative;
  background: linear-gradient(135deg, var(--primary-dark) 0%, #0F5A26 55%, #1C7735 100%);
}
.shop-mini-avatar {
  z-index: 1;
  position: absolute; bottom: -14px; left: 12px;
  border-radius: 9px;
  border: 2.5px solid var(--surface);
  background: var(--surface);
  overflow: hidden; line-height: 0;
  box-shadow: 0 1px 5px rgba(0,0,0,0.15);
}
html[data-theme="dark"] .shop-mini-avatar { border-color: var(--surface); }
.shop-mini-body {
  padding: 20px 10px 8px;
}
.showcase-card--shop .showcase-card__name {
  padding: 0; margin-bottom: 2px;
  font-size: 12px;
}

/* ── Страница магазина: обложка-баннер ──────────────────────────────────── */
.shop-page-cover {
  width: 100%; height: 240px;
  position: relative;
  border-radius: var(--radius) var(--radius) 0 0;
  margin-bottom: 0;
  overflow: visible;
  background: linear-gradient(135deg, var(--primary-dark) 0%, #0F5A26 55%, #1C7735 100%);
}
.shop-page-cover__avatar {
  position: absolute; bottom: -32px; left: 20px;
  border-radius: 20px;
  border: 4px solid var(--surface);
  box-shadow: 0 4px 16px rgba(0,0,0,0.22);
  background: var(--surface);
  overflow: hidden; line-height: 0;
}
html[data-theme="dark"] .shop-page-cover__avatar { border-color: var(--surface); }
.shop-page-header {
  /* Двухколоночная шапка: слева инфо (справа от торчащего аватара), справа — кнопки
     действий (заполняют правую половину, раньше пустовавшую; дизайн-разбор 20.07.2026).
     padding-left = левый край(20) + аватар(80) + рамка(8) + зазор(12). */
  display: flex; align-items: flex-start; gap: 24px;
  padding: 16px 20px 14px 120px;
  min-height: 52px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.shop-page-header__info { flex: 1; min-width: 0; }
/* кнопки действий в РЯД, компактные справа (не забирают полширины); инфо слева растягивается */
.shop-page-header__actions {
  display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; align-items: flex-start;
}
.shop-page-header__actions .btn { white-space: nowrap; }
@media (max-width: 767px) {
  /* на телефоне колонки складываются: инфо под аватаром (padding-top освобождает
     место под торчащий аватар), кнопки в ряд под инфо на всю ширину поровну */
  .shop-page-header { flex-direction: column; gap: 12px; padding: 44px 20px 14px; }
  .shop-page-header__actions { width: 100%; }
  .shop-page-header__actions .btn { flex: 1; }
}
.shop-page-header__name {
  font-size: 20px; font-weight: 700;
  font-family: "Playfair Display", Georgia, serif;
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
  margin-bottom: 4px;
}
.shop-page-header__bio {
  font-size: 14px; color: var(--text-2); margin-bottom: 8px;
}
.shop-page-header__meta {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
@media (min-width: 768px) {
  .shop-page-cover { height: 360px; }
  .shop-page-cover__avatar { bottom: -40px; }
  /* аватар торчит на 40px — колонка инфо начинается у его верхней трети, справа */
  .shop-page-header { padding-top: 20px; padding-left: 124px; }
}

/* ============================================================================
   Промо-полоса: геометрия карточек задана в .promo-row / .promo-card выше.
   Прежний скоуп .promo-marquee (120×150 с фото 80px, бегущая строка, рамка с
   подложкой) удалён 30.07.2026: платное место показывало растение ХУЖЕ, чем
   бесплатный каталог, а два движущихся конвейера рядом читались как дешёвая
   врезка. Полоса теперь статичная сетка, карточка — с крупным фото.
   ============================================================================ */
html[data-theme="dark"] .promo-slot {
  background: var(--surface-2);
  border-color: var(--border-2);
}

/* ============================================================================
   Хаб «Продвижение», модалка рассылки, бейдж избранного, кнопки 🚀/✉️
   ============================================================================ */

/* ── Хаб: обёртка ─────────────────────────────────────────────────────────── */
.promote-hub { max-width: 640px; }

/* ── Активные продвижения ─────────────────────────────────────────────────── */
.promote-active {
  background: var(--surface);
  border: 1.5px solid var(--primary);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 16px;
}
.promote-active__title {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--primary); margin-bottom: 10px;
}
.promote-active-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--border);
}
.promote-active-item:first-of-type { border-top: none; padding-top: 0; }
.promote-active-item__icon { font-size: 18px; flex-shrink: 0; line-height: 1.3; }
.promote-active-item__body { flex: 1; min-width: 0; }
.promote-active-item__name { font-size: 14px; font-weight: 600; }

html[data-theme="dark"] .promote-active {
  border-color: var(--primary);
  background: rgba(61,168,90,0.06);
}

/* ── Карточки-каналы ──────────────────────────────────────────────────────── */
.promote-channels { display: flex; flex-direction: column; gap: 10px; }

.promote-channel {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex; align-items: flex-start; gap: 12px;
  transition: border-color .15s, box-shadow .15s;
}
.promote-channel:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 12px rgba(242,191,41,0.12);
}
html[data-theme="dark"] .promote-channel:hover {
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
.promote-channel__icon {
  font-size: 26px; flex-shrink: 0; margin-top: 1px; line-height: 1;
}
.promote-channel__body { flex: 1; min-width: 0; }
.promote-channel__title {
  font-size: 15px; font-weight: 700; margin-bottom: 4px;
}
.promote-channel__tiers {
  font-size: 12px; font-weight: 600;
  color: var(--text-2); margin-top: 7px;
  background: var(--surface-2);
  display: inline-block; padding: 3px 8px;
  border-radius: 6px;
}
.promote-channel__cta {
  flex-shrink: 0;
  align-self: center;
  white-space: nowrap;
}

/* ── Модалка рассылки: ценовой блок ──────────────────────────────────────── */
.mailing-price-block {
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin: 2px 0 14px;
}
.mailing-price-block__row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 14px;
}
.mailing-price-block__total {
  font-size: 22px; font-weight: 800;
  color: var(--green-ink);
}
html[data-theme="dark"] .mailing-price-block {
  background: var(--surface-2);
  border-color: var(--border);
}
html[data-theme="dark"] .mailing-price-block__total { color: var(--primary); }

/* ── Бейдж «в избранном» ─────────────────────────────────────────────────── */
.plant-fav-badge {
  display: inline-flex; align-items: center; gap: 3px;
  background: rgba(219,39,119,0.08);
  border: 1px solid rgba(219,39,119,0.22);
  color: var(--rose-ink);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px; font-weight: 600;
  line-height: 1.4;
}
html[data-theme="dark"] .plant-fav-badge {
  background: rgba(219,39,119,0.15);
  border-color: rgba(219,39,119,0.35);
}

/* ── Кнопки 🚀 и ✉️ в списке товаров: выделены цветом ───────────────────── */
.btn--boost {
  color: var(--primary);
  border-color: rgba(28,119,53,0.45);
}
.btn--boost:hover {
  background: rgba(28,119,53,0.07);
  border-color: var(--primary);
}
.btn--mailing {
  color: #0077b6;
  border-color: rgba(0,119,182,0.4);
}
.btn--mailing:hover {
  background: rgba(0,119,182,0.07);
  border-color: #0077b6;
}
html[data-theme="dark"] .btn--boost {
  color: var(--primary);
  border-color: rgba(61,168,90,0.45);
}
html[data-theme="dark"] .btn--boost:hover {
  background: rgba(61,168,90,0.1);
}
html[data-theme="dark"] .btn--mailing {
  color: #48cae4;
  border-color: rgba(72,202,228,0.4);
}
html[data-theme="dark"] .btn--mailing:hover {
  background: rgba(72,202,228,0.08);
  border-color: #48cae4;
}

/* ── Мобайл: канал-карточки в столбик, кнопка под текстом ────────────────── */
@media (max-width: 560px) {
  .promote-channel { flex-wrap: wrap; }
  .promote-channel__cta { width: 100%; text-align: center; }
}

/* ============================================================================
   Рекламный баннер в шапке каталога (слот: header)
   Горизонтальная полоса под строкой поиска, над витриной.
   Десктоп 1200×200 px (6:1) — широкие экраны; мобайл 1080×360 px (3:1) — узкие.
   Эти же размеры объявлены рекламодателю в аукционе и проверяются при загрузке (см. app.js,
   checkBannerCreative) — правишь тут, правь и там.
   ============================================================================ */
.header-banner-strip {
  position: relative;
  display: block;
  width: 100%;
  margin: 10px 0 12px;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--surface-2);
  line-height: 0; /* убираем gap под img */
}
.header-banner-strip__ad-label {
  position: absolute;
  top: 6px; left: 8px;
  font-size: 9px; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: rgba(255,255,255,0.82);
  border: 1px solid var(--border);
  padding: 1px 5px;
  border-radius: 4px;
  line-height: 1.6;
  z-index: 2;
  pointer-events: none;
}
html[data-theme="dark"] .header-banner-strip__ad-label {
  background: rgba(0,0,0,0.55);
  border-color: rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.65);
}
/* 🔴 ВЫСОТА ПОЛОСЫ ФИКСИРОВАНА ПРОПОРЦИЕЙ (29.07.2026, замечание Олега «баннер стал тоньше»).
   Было: `height: auto; max-height: 200px` — то есть высоту задавала САМА КАРТИНКА и текущая
   ширина колонки. Следствия, которые и поймал владелец:
     • при колонке 1000 px картинка 1200×200 рисовалась 167 px — полоса «тоньше», хотя ничего
       не менялось;
     • высота карусели тянется по самому высокому слайду → достаточно одному рекламодателю
       загрузить картинку не в 6:1, и разъезжаются ВСЕ слайды, включая купленные на аукционе.
       Человек получал не тот формат, за который заплатил, из-за соседа по ротации.
   Теперь пропорция задана контейнеру (6:1 на десктопе = объявленные 1200×200, 3:1 на мобайле
   = 1080×360), а картинки растягиваются на всю высоту слайда с `cover`. Пропорция стоит на
   КОНТЕЙНЕРЕ, а не на картинке: слайд без нужного креатива тогда не схлопывает полосу. */
.header-banner-strip { aspect-ratio: 6 / 1; }
.banner-carousel__track, .banner-carousel__slide { height: 100%; }
.header-banner-strip__img {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Широкие экраны → десктопный вариант */
@media (min-width: 600px) {
  .header-banner-strip__img--desktop { display: block; }
}
/* Узкие экраны → мобильный вариант (1080×360 = 3:1, полоса выше по пропорции) */
@media (max-width: 599px) {
  .header-banner-strip { aspect-ratio: 3 / 1; }
  .header-banner-strip__img--mobile { display: block; }
}

/* Баннер-карусель (этап 2): ротация слайдов разных рекламодателей */
.banner-carousel__track {
  display: flex;
  width: 100%;
  transition: transform 0.6s ease;
  will-change: transform;
}
.banner-carousel__slide {
  flex: 0 0 100%;
  width: 100%;
  position: relative;
  cursor: pointer;
}
.banner-carousel__dots {
  position: absolute;
  bottom: 6px; left: 0; right: 0;
  display: flex; justify-content: center; gap: 6px;
  z-index: 2; line-height: 0;
}
.banner-carousel__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(0,0,0,0.18);
  transition: background 0.2s;
}
.banner-carousel__dot.is-active { background: #fff; }
.banner-carousel__dot { cursor: pointer; padding: 0; appearance: none; }

/* Стрелки ручного перелистывания (как на крупных маркетплейсах).
   Только десктоп: на телефоне они перекрывали бы креатив, там работает свайп и точки. */
.banner-carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px; height: 34px;
  display: none;                      /* включается в @media ниже */
  align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: rgba(255,255,255,0.92);
  color: #1a1a1a;
  font-size: 22px; line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  opacity: 0;                         /* проявляются при наведении на баннер */
  transition: opacity 0.18s, background 0.18s;
  z-index: 3;
}
.banner-carousel__nav--prev { left: 10px; }
.banner-carousel__nav--next { right: 10px; }
.banner-carousel:hover .banner-carousel__nav { opacity: 1; }
.banner-carousel__nav:hover { background: #fff; }
.banner-carousel__nav:focus-visible { opacity: 1; outline: 2px solid var(--accent, #99C806); outline-offset: 2px; }
@media (min-width: 768px) {
  .banner-carousel__nav { display: flex; }
}


/* ============================================================
   Listings board (Частные объявления)
   ============================================================ */
:root {
  --listings-accent: #EF9F27;
  --listings-soft:   #FAEEDA;
}
html[data-theme="dark"] {
  --listings-soft: #3A2800;
}

/* Disclaimer banner */
.listings-disclaimer {
  background: var(--listings-soft);
  border: 1px solid var(--listings-accent);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 12px;
  color: #854F0B;
}
html[data-theme="dark"] .listings-disclaimer { color: #F5C97A; }
.listings-disclaimer__body { margin-top: 4px; }

/* Add button */
.btn--listings {
  background: var(--listings-accent);
  color: #4A2A00;
  border: none;
  margin-bottom: 6px;
}
.btn--listings:hover { background: #D98C1A; }

/* Counter / seller note */
.listings-note {
  text-align: center;
  margin-bottom: 12px;
}

/* Section headers */
.listings-section-title {
  margin: 14px 0 8px;
}

/* Grid */
.listings-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 16px;
}
@media (min-width: 1100px) {
  .listings-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 560px) {
  .listings-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Card */
.listing-card {
  border: 1px solid var(--listings-accent);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface);
  display: flex;
  flex-direction: column;
}
.listing-card--sold { opacity: 0.6; }

/* Thumbnail area */
.listing-card__thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--surface-2);
  flex-shrink: 0;
}
.listing-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.listing-card__img--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}
.listing-card__sold-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.03em;
}
.listing-card__video-badge {
  position: absolute;
  bottom: 4px;
  right: 4px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 10px;
  border-radius: 4px;
  padding: 0 4px;
  line-height: 1.6;
}

/* Card body */
.listing-card__body {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.listing-card__title {
  font-weight: 600;
  font-size: 13px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.listing-card__price {
  font-size: 15px;
  font-weight: 700;
}
.listing-card__meta {
  font-size: 11px;
}
.listing-card__warning {
  font-size: 10px;
  color: #854F0B;
}
html[data-theme="dark"] .listing-card__warning { color: #F5C97A; }
.listing-card__actions {
  margin-top: 6px;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.listing-card__btn-danger {
  color: var(--danger-ink);
  border-color: var(--danger-ink);
}

/* Search bar */
.listings-search-bar {
  margin-bottom: 8px;
}
.listings-search-bar__input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  box-sizing: border-box;
}
.listings-search-bar__input:focus {
  outline: none;
  border-color: var(--listings-accent);
}

/* Filter panel */
.listings-filter-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
  align-items: center;
}
.listings-filter-panel__select,
.listings-filter-panel__input {
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  min-width: 0;
}
.listings-filter-panel__input {
  width: 90px;
}
.listings-filter-panel__reset {
  margin-left: auto;
}

/* Promo card (inline listings-promo-card) */
.listings-promo-card {
  background: var(--listings-soft);
  border: 1px solid var(--listings-accent);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 12px;
  color: #854F0B;
}
html[data-theme="dark"] .listings-promo-card { color: #F5C97A; }

/* Note blocks inside the listing form */
.listings-note {
  background: var(--surface-2);
  border-radius: 10px;
  padding: 8px 10px;
  margin-bottom: 10px;
  font-size: 12px;
}
.listings-note--warn {
  background: var(--listings-soft);
  border: 1px solid var(--listings-accent);
  color: #854F0B;
}
html[data-theme="dark"] .listings-note--warn { color: #F5C97A; }
.listings-note__cta { margin-top: 6px; }

/* Плашка результата онлайн-сверки ИНН (DaData/ФНС НПД) в карточке заявки */
.inn-check {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  border-radius: 10px;
  padding: 7px 11px;
  margin: 8px 0;
  font-size: 12.5px;
  line-height: 1.45;
}
.inn-check__ic { flex: 0 0 auto; }
.inn-check--ok   { background: rgba(28,119,53,0.08);  color: var(--green-ink); }
.inn-check--warn { background: rgba(242,191,41,0.16); color: #854F0B; }
.inn-check--bad  { background: rgba(220,38,38,0.08);  color: var(--danger-ink); }
html[data-theme="dark"] .inn-check--ok   { background: rgba(61,168,90,0.16);  color: #8FE0A6; }
html[data-theme="dark"] .inn-check--warn { background: rgba(242,191,41,0.16); color: #F5C97A; }
html[data-theme="dark"] .inn-check--bad  { background: rgba(220,38,38,0.18);  color: #F2A0A0; }

/* Centered hint line under the "add listing" button */
.listings-hint-line { text-align: center; margin-bottom: 12px; }

/* Disclaimer links / notes */
.listings-disclaimer a,
.listings-promo-card a {
  color: inherit;
  text-decoration: underline;
}

/* ============================================================================
   UI-аудит 04.07.2026: плитка каталога, чекаут, фотовьюер
   ============================================================================ */

/* Продавец + рейтинг на плитке каталога (доверие к магазину) */
.plant-card__seller {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Свёрнутые информационные блоки чекаута (длинные юр-тексты) —
   меньше «стены плашек» перед кнопкой оплаты; тексты внутри не менялись */
.checkout-fold {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 10px;
}
.checkout-fold summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
}
.checkout-fold[open] summary { margin-bottom: 8px; }

/* Полноэкранный просмотр фото товара переиспользует вьюер выставок
   (#photoViewer, инлайн-стили в renderPhotoViewer в app.js) — отдельный CSS не нужен */

/* Мобильная навигация кабинета продавца И консоли владельца: вместо горизонтальной
   ленты из 20+ пунктов без заголовков групп — нативный select с optgroup. На десктопе скрыт. */
.sdash-nav-select { display: none; }
@media (max-width: 767px) {
  .sdash-nav-select {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-2);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    margin-bottom: 8px;
  }
  #sellerSideNav .seller-nav-group,
  #sellerSideNav .seller-nav-item,
  #adminSideNav .seller-nav-group,
  #adminSideNav .seller-nav-item { display: none; }
}

/* Кнопка «Показать ещё» в гриде каталога — на всю ширину грида */
.catalog-more-btn {
  grid-column: 1 / -1;
  margin-top: 4px;
}

/* Видимый фокус с клавиатуры (доступность, десктоп) — только :focus-visible,
   чтобы не рисовать рамку при кликах мышью/тапах */
.btn:focus-visible,
.icon-btn:focus-visible,
.nav-btn:focus-visible,
.ds-nav__btn:focus-visible,
.catalog-sort-btn:focus-visible,
.filter-chip:focus-visible,
.seller-nav-item:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Дубль поиска (дизайн-разбор 18.07.2026): на десктопе поиск живёт в шапке
   (#desktopSearchInput), вторая строка в каталоге прячется — товары поднимаются на ряд выше.
   На мобилке шапочного поиска нет — строка остаётся единственным поиском. */
@media (min-width: 768px) {
  .catalog-search-row { display: none; }
}

/* Карусели рекомендаций в карточке товара («Ещё из магазина», «Уход для растения»):
   системный скроллбар → тонкий в цвет темы (дизайн-разбор 18.07.2026) */
.similar-grid { scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; }
.similar-grid::-webkit-scrollbar { height: 6px; }
.similar-grid::-webkit-scrollbar-track { background: transparent; }
.similar-grid::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 3px; }
.similar-grid::-webkit-scrollbar-thumb:hover { background: var(--primary); }

/* ── «Своя витрина» магазина (body.is-storefront) ──────────────────────────────
   Покупатель пришёл по личной ссылке магазина и видит только его ассортимент:
   прячем переход в общий список магазинов и рекламу чужих. Юр-блоки (оферта,
   сервисный сбор, реквизиты продавца, роль площадки) НЕ скрываем — ЗоЗПП/289-ФЗ. */
body.is-storefront [data-tab="shops"],
body.is-storefront #dsSidebarAd,
body.is-storefront .header-banner-strip,
body.is-storefront .promo-row,
body.is-storefront .promo-row__head { display: none !important; }
/* ── Рекламное окно в сайдбаре: ротация слайдов (4 сек) + подпись под картинкой ── */
.sidebar-ad { position: relative; margin-top: 14px; }
.sidebar-ad__slide { display: none; }
.sidebar-ad__slide.is-active { display: block; animation: sidebarAdFade .35s ease; }
@keyframes sidebarAdFade { from { opacity: 0 } to { opacity: 1 } }
.sidebar-ad__caption {
  margin-top: 6px; font-size: 13px; line-height: 1.35; color: var(--text); font-weight: 600;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.sidebar-ad__dots { display: flex; justify-content: center; gap: 5px; margin-top: 7px; }
.sidebar-ad__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--border-2, #ccc); transition: background .2s, transform .2s; }
.sidebar-ad__dot.is-active { background: var(--primary); transform: scale(1.25); }

/* ── Рекламная карточка в ленте каталога (мобильные: сайдбара там нет) ── */
.feed-ad { display: flex; flex-direction: column; overflow: hidden; }
.feed-ad__img { position: relative; width: 100%; aspect-ratio: 1 / 1; background: var(--surface-2); }
.feed-ad__label {
  position: absolute; top: 6px; left: 6px; font-size: 9px; text-transform: uppercase; letter-spacing: .04em;
  color: #fff; background: rgba(0,0,0,.45); padding: 2px 6px; border-radius: 4px;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.feed-ad__caption {
  padding: 7px 9px 9px; font-size: 13px; line-height: 1.35; color: var(--text); font-weight: 600;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* Маркировка в карточке рекламы: рекламодатель + erid. По ст. 18.1 38-ФЗ они обязаны быть в самой
   рекламе, а не только в сайдбарной версии того же креатива. Мелко, но читаемо — как в выдаче
   поисковиков: назначение служебное, внимание на себя не тянет. */
.feed-ad__marking {
  padding: 0 9px 8px; font-size: 9.5px; line-height: 1.3; color: var(--text-muted);
  word-break: break-word;
}
@media (min-width: 768px) { .feed-ad { display: none !important; } }   /* на десктопе реклама живёт в сайдбаре */

/* ── Диаграмма посещаемости в консоли (столбики на CSS, без библиотек) ── */
.tr-chart {
  display: flex; align-items: flex-end; gap: 3px; height: 90px;
  padding: 6px 4px; background: var(--surface-2); border-radius: 10px; overflow-x: auto;
}
.tr-bar { flex: 1 1 6px; min-width: 5px; height: 100%; display: flex; align-items: flex-end; }
.tr-bar__col {
  width: 100%; background: var(--primary); border-radius: 3px 3px 0 0;
  display: flex; align-items: flex-end; opacity: .85; transition: opacity .15s;
}
.tr-bar:hover .tr-bar__col { opacity: 1; }
.tr-bar__mob { width: 100%; background: var(--primary-deep, #0F5A26); border-radius: 0 0 3px 3px; }

/* Заглушка вместо «рваной картинки», если фото товара не отображается */
.photo-broken {
  width: 100%; height: 100%; display: flex; flex-direction: column; gap: 6px;
  align-items: center; justify-content: center; background: var(--surface-2);
  color: var(--text-muted); font-size: 12px; border-radius: inherit;
}
.photo-broken span:first-child { font-size: 30px; opacity: .55; }

.storefront-exit { display: block; text-align: center; font-size: 11px; opacity: .7; margin-top: 6px; }
.storefront-exit a { color: inherit; text-decoration: underline; cursor: pointer; }