/* ══════════════════════════════════════════════════════════════════════
   ТЁМНЫЙ РЕЖИМ

   Не «покрасить всё в чёрный», а переопределить смысл цветов.

   На всех страницах сайта живут почти одни и те же переменные: --ink это
   текст, --clay приглушённый текст, --sand и --border линии, --cream и
   --white поверхности. Значит тёмный режим — это не правка семи файлов, а
   один набор значений: те же имена, другие цвета. Компонент, который никто
   не трогал, становится тёмным сам.

   ПОЧЕМУ НЕ ЧЁРНЫЙ.
   Чистый #000 на телефоне даёт ощущение дыры: белый текст на нём звенит, а
   тени и границы исчезают, и карточки сливаются в кашу. Здесь основа тёплая
   и коричневатая — под цветочный магазин, — а поверхности отличаются друг от
   друга светлотой, чтобы карточка читалась как карточка.

   ПОЧЕМУ БУКВЫ НЕ ЧИСТО БЕЛЫЕ.
   #fff на тёмном режет глаза и в темноте буквально слепит: люди включают
   тёмный режим как раз ночью. Основной текст чуть тёплый и приглушённый.

   ПОЧЕМУ НЕ МАКСИМАЛЬНЫЙ КОНТРАСТ.
   Первый вариант был почти чёрный фон и почти белый текст: разница около
   15:1. По всем меркам безупречно — и владелец сказал, что смотреть на это
   неприятно. Он прав: 15:1 хорошо для одной строки на вывеске и утомительно
   для экрана, в который смотрят подряд. Сейчас около 10:1 — с большим запасом
   по читаемости, но без звона.

   ЦВЕТА ТОЛЬКО ТОКЕНАМИ.
   Значения вписываются в одном месте — в наборе ниже. Раньше по файлу были
   рассыпаны сорок оттенков, подобранных на глаз под тогдашний фон; стоило
   тронуть фон, и все они превратились в пятна. Если нужен оттенок между
   поверхностями — это --gz-raise или --gz-sink, а не новое число.
══════════════════════════════════════════════════════════════════════ */

:root {
  /* Светлая тема: значения совпадают с тем, что было, — чтобы ничего не
     сдвинулось у тех, кто тёмный режим не включал. */
  --gz-bg:        #fdf8f4;
  --gz-surface:   #ffffff;
  --gz-surface-2: #f8f4ef;
  --gz-line:      #e8ddd0;
  --gz-text:      #2a1f16;
  --gz-dim:       #5c4a3a;
  --gz-faint:     #9c8472;
  --gz-shadow:    rgba(107, 79, 58, .12);

  /* Плавность смены. Переходим ТОЛЬКО цвета: если пустить transition на всё,
     при переключении поедут размеры и положение — и вместо смены темы будет
     видно, как страница разъезжается. */
  --gz-swap: 320ms;
}

/* ── Тёмная тема ────────────────────────────────────────────────────────── */

:root[data-theme="dark"] {
  --gz-bg:        #272019;
  --gz-surface:   #322a23;
  --gz-surface-2: #3c332c;
  --gz-line:      #4a3e34;
  --gz-text:      #ddd2c6;
  --gz-dim:       #ab9a8c;
  --gz-faint:     #8d7c6d;
  --gz-shadow:    rgba(0, 0, 0, .38);

  /* Два оттенка ВОКРУГ поверхности — для градиентов и вложенных плашек.
     Раньше на их месте были числа, подобранные на глаз, и каждая правка
     палитры оставляла их позади. */
  --gz-raise: #3e3630;   /* чуть светлее поверхности: приподнятая плашка */
  --gz-sink:  #2c251e;   /* чуть темнее: утопленная, вложенная */

  /* Общие имена всех страниц. Одно место — и тёмными становятся сразу
     главная, заказы, профиль, чат, отзывы и вход. */
  --cream:  var(--gz-surface);
  --sand:   var(--gz-surface-2);
  --taupe:  #5a4a3d;
  --clay:   var(--gz-dim);
  --bark:   #ddcec0;
  --ink:    var(--gz-text);
  --white:  var(--gz-surface);
  --border: var(--gz-line);

  /* Фирменный розовый НЕ трогаем.

     Сначала я его осветлил — думал, на тёмном он читается глухо. Проверка
     показала обратное: этим же цветом залиты кнопки с белым текстом, и
     осветление уронило их контраст до 2.4. Исходный оттенок хорош в обеих
     ролях: как фон под белыми буквами и как текст на тёмном (5.4). */
  --rose:   #c97b6e;

  /* Фон сплошных кнопок. В светлой теме этот токен не задан и подставляется
     --bark, поэтому светлая тема не изменилась ни на пиксель. В тёмной
     --bark стал светлым (он же цвет текста) — и белые надписи на кнопках
     пропали бы. Берём розовый: он одинаков в обеих темах и с белым читается. */
  --btn-solid: #c97b6e;
  --blush:  #c98d7e;

  --leaf:    #8fb07f;
  --success: #8fb07f;
  --danger:  #e2705e;
  --gold:    #e0bb63;
}

/* ── Основа страницы ────────────────────────────────────────────────────── */

:root[data-theme="dark"] body {
  background-color: var(--gz-bg);
  color: var(--gz-text);
  /* Тёплые пятна фона на тёмном превращаются в грязные разводы — гасим их
     и оставляем ровный фон с едва заметным теплом. */
  background-image:
    radial-gradient(ellipse at 15% 18%, rgba(201, 123, 110, .07) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 82%, rgba(201, 123, 110, .05) 0%, transparent 50%);
}

/* Поверхности, которые в светлой теме были жёстко белыми. Перечислены
   выборочно и по смыслу: белый текст на розовой кнопке обязан остаться белым,
   и трогать его нельзя. */
:root[data-theme="dark"] .product-card,
:root[data-theme="dark"] .cart-panel,
:root[data-theme="dark"] .wishlist-panel,
:root[data-theme="dark"] .search-panel,
:root[data-theme="dark"] .modal-sheet,
:root[data-theme="dark"] .review-card,
:root[data-theme="dark"] .faq-item,
:root[data-theme="dark"] .reviews-overall,
:root[data-theme="dark"] .or-card,
:root[data-theme="dark"] .or-section,
:root[data-theme="dark"] .or-header,
:root[data-theme="dark"] .otk,
:root[data-theme="dark"] .otk-rest,
:root[data-theme="dark"] .promo-box,
:root[data-theme="dark"] .cart-order-summary {
  background: var(--gz-surface);
  color: var(--gz-text);
  border-color: var(--gz-line);
}

/* Поля ввода: на тёмном белое поле бьёт по глазам сильнее всего остального —
   это самый крупный светлый прямоугольник на экране. */
:root[data-theme="dark"] input,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select {
  background: var(--gz-surface-2);
  color: var(--gz-text);
  border-color: var(--gz-line);
}
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder { color: var(--gz-faint); }

/* Шапка при прокрутке становилась почти белой — на тёмном это вспышка. */
:root[data-theme="dark"] header.scrolled,
:root[data-theme="dark"] header.solid {
  background: rgba(50, 42, 35, .97) !important;
}

/* Нижняя панель приложения. */
:root[data-theme="dark"] .app-bnav {
  background: rgba(50, 42, 35, .97);
  border-top-color: var(--gz-line);
}

/* Тёмный фон каталога-«КФС» и прочих светлых секций. */
:root[data-theme="dark"] .cat-menu,
:root[data-theme="dark"] .cat-menu-inner {
  background: rgba(50, 42, 35, .96);
  border-color: var(--gz-line);
}

/* ── Переключатель темы ─────────────────────────────────────────────────── */

.theme-toggle {
  position: relative;
  width: 38px; height: 38px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: none; cursor: pointer; padding: 0;
  color: inherit;
  border-radius: 50%;
  -webkit-tap-highlight-color: transparent;
}

/* Солнце и луна лежат друг на друге и меняются поворотом: кнопка должна
   показывать, что произойдёт, а не что сейчас — поэтому днём видна луна. */
.theme-toggle svg {
  position: absolute;
  width: 21px; height: 21px;
  transition: transform 420ms cubic-bezier(.34, 1.4, .64, 1), opacity 260ms ease;
}
.theme-toggle .tt-moon { opacity: 1; transform: rotate(0deg) scale(1); }
.theme-toggle .tt-sun  { opacity: 0; transform: rotate(-90deg) scale(.5); }

:root[data-theme="dark"] .theme-toggle .tt-moon { opacity: 0; transform: rotate(90deg) scale(.5); }
:root[data-theme="dark"] .theme-toggle .tt-sun  { opacity: 1; transform: rotate(0deg) scale(1); }

.theme-toggle:active { transform: scale(.9); }

/* ── Смена темы: мягкий переход ─────────────────────────────────────────── */

/* Класс висит доли секунды — ровно на время смены. Постоянный transition на
   всей странице замедлял бы наведение и прокрутку. */
.gz-swapping,
.gz-swapping *:not(svg):not(svg *) {
  transition:
    background-color var(--gz-swap) ease,
    color var(--gz-swap) ease,
    border-color var(--gz-swap) ease,
    fill var(--gz-swap) ease !important;
}

@media (prefers-reduced-motion: reduce) {
  .gz-swapping, .gz-swapping * { transition: none !important; }
  .theme-toggle svg { transition: opacity 120ms ease; }
}

/* ══════════════════════════════════════════════════════════════════════
   ТОЧЕЧНЫЕ ПРАВКИ ПО НАХОДКАМ ПРОВЕРКИ

   Всё ниже — не догадки, а список того, что нашла проверка контраста:
   светлые пятна и места, где текст сливался с фоном. Каждое правило
   отвечает за конкретную находку.
══════════════════════════════════════════════════════════════════════ */


/* Липкая лента категорий: была почти белой полосой поверх тёмной страницы. */
:root[data-theme="dark"] .cat-filter,
:root[data-theme="dark"] .cat-filter-inner {
  background: rgba(31, 25, 20, .88) !important;
  border-color: var(--gz-line);
}
:root[data-theme="dark"] .cat-chip { background: var(--gz-surface-2); color: var(--gz-dim); border-color: var(--gz-line); }
:root[data-theme="dark"] .cat-chip.active, :root[data-theme="dark"] .cat-chip.is-on { background: var(--rose); color: #fff; border-color: var(--rose); }

/* Кнопка цены на карточке: светлая плашка со светлым текстом. */
:root[data-theme="dark"] .btn-price { background: var(--gz-surface-2); color: var(--gz-text); }
:root[data-theme="dark"] .btn-price .bp-now { color: var(--gz-text); }
:root[data-theme="dark"] .btn-price .bp-old { color: var(--gz-faint); }

/* Шапки выдвижных панелей — самые крупные светлые прямоугольники. */
:root[data-theme="dark"] .cart-header, :root[data-theme="dark"] .wishlist-panel-header, :root[data-theme="dark"] .search-panel-header {
  background: rgba(50, 42, 35, .95) !important;
  border-bottom-color: var(--gz-line);
}

/* Кнопки, залитые цветом ТЕКСТА (--ink): в тёмной теме он стал светлым, и
   светлые буквы оказались на светлом фоне. Возвращаем им смысл: тёмная
   кнопка со светлой надписью. */
:root[data-theme="dark"] .reviews-login-btn, :root[data-theme="dark"] .reviews-count-pill, :root[data-theme="dark"] .rvp-back, :root[data-theme="dark"] .rvp-chip {
  background: var(--gz-surface-2) !important;
  color: var(--gz-text) !important;
  border-color: var(--gz-line);
}
:root[data-theme="dark"] .rvp-chip.active { background: var(--rose) !important; color: #fff !important; border-color: var(--rose); }

:root[data-theme="dark"] .wishlist-empty-cta { background: var(--gz-surface-2); color: var(--gz-text); }

/* Раздел «О нас»: подписи под цифрами почти пропадали. */
:root[data-theme="dark"] .about-stat label, :root[data-theme="dark"] .about-stat-label { color: var(--gz-dim); }

/* Вопросы и ответы: секция держала свой светлый фон. */
:root[data-theme="dark"] .faq-section, :root[data-theme="dark"] .faq-inner, :root[data-theme="dark"] .faq-header { background: transparent; }
:root[data-theme="dark"] .faq-title { color: var(--gz-text); }
:root[data-theme="dark"] .faq-q, :root[data-theme="dark"] .faq-q-text { color: var(--gz-text); }
:root[data-theme="dark"] .faq-q-arrow { color: var(--rose); }
:root[data-theme="dark"] .faq-a, :root[data-theme="dark"] .faq-a-inner, :root[data-theme="dark"] .faq-a-inner p, :root[data-theme="dark"] .faq-a-inner li { color: var(--gz-dim); }
:root[data-theme="dark"] .faq-a-inner b { color: var(--gz-text); }

/* Ярлыки на фотографии товара — тонкий случай: они лежат поверх снимка,
   и фон им нужен плотный, иначе текст спорит с картинкой. */
/* Ярлык красит админ в настройках товара, и в тёмной теме этот цвет не
   меняется: он тот же самый букет обозначает. Здесь только тень под текстом —
   чтобы белые буквы держались на любой выбранной заливке. */
:root[data-theme="dark"] .product-tag {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

/* Нижняя полоса конструктора букета. */
:root[data-theme="dark"] .b-bar { background: rgba(50, 42, 35, .96) !important; border-top-color: var(--gz-line); }
:root[data-theme="dark"] .b-bar-count, :root[data-theme="dark"] .b-bar-info { color: var(--gz-text); }
:root[data-theme="dark"] .b-bar-btn { background: var(--rose); color: #fff; }

/* Доставка и оплата: тёмная секция, где карточки оставались светлыми. */
:root[data-theme="dark"] .delivery-card { background: var(--gz-surface); border-color: var(--gz-line); }
:root[data-theme="dark"] .delivery-card h3, :root[data-theme="dark"] .delivery-card p { color: var(--gz-text); }

/* Тени на тёмном должны быть глубже: светлая тень на тёмном фоне не видна
   вовсе, и карточки теряют объём. */
:root[data-theme="dark"] .product-card, :root[data-theme="dark"] .review-card, :root[data-theme="dark"] .or-card, :root[data-theme="dark"] .otk {
  box-shadow: 0 6px 22px -12px var(--gz-shadow);
}

/* ── Второй заход проверки ──
   Светлых пятен не осталось, но пять надписей всё ещё сливались с фоном.
   Ниже — ровно они. */

/* Плюс у вопроса: розовый на тёмном хорош как текст, но этот знак мелкий,
   а мелкому нужен запас контраста больше, чем крупному. */
:root[data-theme="dark"] .faq-q-arrow { color: var(--gz-text); }

/* Подпись в поиске. */
:root[data-theme="dark"] .search-hint-label { color: var(--gz-dim); }

/* Полоса «Установить приложение» — она своя, тёмная, и в светлой теме белые
   буквы на ней читались. В тёмной фон стал светлее текста: возвращаем ей
   собственный тёмный фон, а не общий. */
:root[data-theme="dark"] .pwa-bar {
  background: var(--gz-surface-2);
  border-color: var(--gz-line);
  color: var(--gz-text);
}
:root[data-theme="dark"] .pwa-bar-install { background: var(--rose); color: #fff; }
:root[data-theme="dark"] .pwa-bar-close { color: var(--gz-dim); }
:root[data-theme="dark"] .pwa-bar-text, :root[data-theme="dark"] .pwa-bar-title { color: var(--gz-text); }

/* ── Третий заход ──
   Замер показал то, чего не видно по названию класса: у стрелки вопроса и у
   крестика полосы есть СВОИ светлые фоны — розовый кружок и бежевая кнопка.
   Менять им цвет текста было бессмысленно: светлое на светлом так и остаётся.
   Меняем фон. */
:root[data-theme="dark"] .faq-q-arrow {
  background: var(--gz-surface-2) !important;
  color: var(--rose) !important;
}
:root[data-theme="dark"] .faq-item.open .faq-q-arrow {
  background: var(--rose) !important;
  color: #fff !important;
}
:root[data-theme="dark"] .pwa-bar-close {
  background: var(--gz-surface-2) !important;
  color: var(--gz-dim) !important;
}
/* А здесь наоборот: цвет был вписан вручную (#5c4a3a) мимо переменных, и
   тёмная тема о нём не знала. */
:root[data-theme="dark"] .pwa-bar-text b,
:root[data-theme="dark"] .pwa-bar-text { color: var(--gz-text) !important; }

/* ══════════════════════════════════════════════════════════════════════
   ПРОСЬБА РАЗРЕШИТЬ УВЕДОМЛЕНИЯ

   Своё окошко перед системным. Системное показывается один раз в жизни: нажал
   «Блокировать» — и вернуть его нельзя ничем, только руками в настройках
   сайта, куда никто не полезет. Поэтому сначала объясняем зачем, и системное
   показываем только тому, кто уже согласился.
══════════════════════════════════════════════════════════════════════ */

.gz-ask {
  position: fixed; z-index: 9998;
  left: 12px; right: 12px;
  bottom: calc(70px + env(safe-area-inset-bottom));
  max-width: 460px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px;
  padding: 15px 16px;
  background: var(--gz-surface, #fff);
  border: 1.5px solid var(--gz-line, #e8ddd0);
  border-radius: 18px;
  box-shadow: 0 14px 40px -16px rgba(90, 60, 45, .4);
  /* Появляется снизу и мягко: окно с просьбой не должно врываться. */
  transform: translateY(24px); opacity: 0;
  transition: transform .32s cubic-bezier(.32,.72,0,1), opacity .28s ease;
}
.gz-ask.is-in { transform: translateY(0); opacity: 1; }

.gz-ask-ico {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(201, 123, 110, .14);
  color: var(--rose, #c97b6e);
}
.gz-ask-main { flex: 1; min-width: 0; }
.gz-ask-t { font: 800 14.5px Lato, sans-serif; color: var(--gz-text, #2a1f16); margin-bottom: 4px; }
.gz-ask-s { font-size: 12.5px; line-height: 1.5; color: var(--gz-dim, #5c4a3a); }

.gz-ask-btns { display: flex; gap: 8px; width: 100%; }
.gz-ask-btns button {
  flex: 1; border-radius: 11px; padding: 11px 12px; cursor: pointer;
  font: 700 13px Lato, sans-serif; border: 1.5px solid transparent;
  transition: background .16s, border-color .16s, transform .1s;
}
.gz-ask-btns button:active { transform: scale(.97); }
.gz-ask-no {
  background: transparent; border-color: var(--gz-line, #e8ddd0);
  color: var(--gz-dim, #5c4a3a);
}
.gz-ask-no:hover { background: var(--gz-surface-2, #f8f4ef); }
.gz-ask-yes { background: var(--rose, #c97b6e); color: #fff; }
.gz-ask-yes:hover { background: #b06657; }

@media (min-width: 901px) { .gz-ask { bottom: 20px; } }
@media (prefers-reduced-motion: reduce) {
  .gz-ask { transition: opacity .2s ease; transform: none; }
}

/* ── Страницы товара и оплаты ──
   Их собственные стили лежат внутри самих страниц, поэтому переменные до них
   не дошли: шапка товара и кнопка на экране оплаты остались светлыми. */
:root[data-theme="dark"] header.ph,
:root[data-theme="dark"] #ph {
  background: rgba(50, 42, 35, .96) !important;
  border-bottom-color: var(--gz-line);
  color: var(--gz-text);
}
:root[data-theme="dark"] .pay-btn-primary {
  background: var(--rose) !important;
  color: #fff !important;
  border-color: var(--rose);
}
:root[data-theme="dark"] .pay-btn-ghost,
:root[data-theme="dark"] .pay-btn-secondary {
  background: var(--gz-surface-2) !important;
  color: var(--gz-text) !important;
  border-color: var(--gz-line);
}
:root[data-theme="dark"] .pay-result,
:root[data-theme="dark"] .pay-card,
:root[data-theme="dark"] .pay-box {
  background: var(--gz-surface);
  color: var(--gz-text);
  border-color: var(--gz-line);
}

/* ── Страницы за входом: профиль, заказы, чат ──
   Сюда человек попадает после покупки, и именно здесь всплыло то, что общая
   проверка не видела: она ходила только по открытым страницам. */

/* Шапка профиля была задана белым цветом напрямую, мимо переменных. */
:root[data-theme="dark"] .ua-header {
  background: rgba(50, 42, 35, .95);
  border-bottom-color: var(--gz-line);
}
:root[data-theme="dark"] .ua-pwa-toggle {
  background: var(--gz-surface-2);
}
:root[data-theme="dark"] .ua-pwa-toggle:hover { background: var(--gz-raise); }
:root[data-theme="dark"] .ua-pwa-toggle-title { color: var(--gz-text); }
:root[data-theme="dark"] .ua-pwa-toggle-sub { color: var(--gz-dim); }

:root[data-theme="dark"] .or-empty a:hover { background: #b56a5e; }

/* Техподдержка узнаётся по фиолетовому. Тёмный фиолетовый на тёмном фоне не
   виден совсем, поэтому берём тот же цвет, но светлее — узнаваемость цела. */
:root[data-theme="dark"] .ch-support-name,
:root[data-theme="dark"] .ch-support-hero h3 {
  color: #c9a0f5 !important;
}
:root[data-theme="dark"] .ch-support-pill { border-color: var(--gz-surface); }

/* ══════════════════════════════════════════════════════════════════════════
   ГРАДИЕНТЫ

   Отдельный разговор. Проверка контраста смотрит на цвет фона, а у градиента
   цвета фона нет — он «прозрачный». Поэтому целые белые карточки проходили
   проверку незамеченными: отзывы, блок отслеживания заказа, вопросы-ответы.
   Нашлись, только когда проверку научили разбирать сам градиент и брать из
   него ХУДШУЮ точку.

   Здесь же — белые кольца в тенях: их не видит никакая проверка контраста,
   потому что это не текст и не фон.
   ══════════════════════════════════════════════════════════════════════════ */

/* Карточка отзыва — самая крупная из потерянных: белая на всю ширину. */
:root[data-theme="dark"] .rv-card {
  background: linear-gradient(162deg, var(--gz-raise) 0%, var(--gz-surface) 100%);
  border-color: var(--gz-line);
}
/* Кольцо вокруг аватарки было белым. */
:root[data-theme="dark"] .rv-avatar {
  background: linear-gradient(135deg, var(--rose) 0%, #8a5f52 100%);
  box-shadow: 0 0 0 3px var(--gz-surface),
              0 0 0 4px rgba(201, 123, 110, .28),
              0 4px 12px rgba(0, 0, 0, .35);
}
:root[data-theme="dark"] .reviews-more-btn {
  background: linear-gradient(135deg, var(--rose) 0%, #b5675a 100%);
}

/* Кнопка входа и регистрации: светлый конец градиента съедал белую надпись. */
:root[data-theme="dark"] .auth-btn {
  background: linear-gradient(135deg, var(--rose), #8a5f52);
}

/* Вопросы-ответы. */
:root[data-theme="dark"] .faq-section { background: var(--gz-bg); }
:root[data-theme="dark"] .faq-q-icon,
:root[data-theme="dark"] .faq-cta {
  background: linear-gradient(135deg, var(--gz-surface-2) 0%, var(--gz-surface) 100%);
  border-color: var(--gz-line);
}

/* Отслеживание заказа на главной и в «Моих заказах». Тёплый оттенок сохраняем:
   по нему человек отличает обычный ход дела от сдвинутого времени. Оттенки
   здесь СВОИ, а не токены: они несут смысл — спокойно, тревожно, сдвинуто, —
   и должны отличаться от обычной поверхности, а не совпадать с ней. */
:root[data-theme="dark"] .otk,
:root[data-theme="dark"] .otk-etaline,
:root[data-theme="dark"] .or-eta,
:root[data-theme="dark"] .or-courier {
  background: linear-gradient(135deg, var(--gz-raise) 0%, var(--gz-surface) 100%);
  border-color: var(--gz-line);
}
:root[data-theme="dark"] .otk--bad {
  background: linear-gradient(135deg, #3a2723 0%, #322320 100%);
  border-color: #5c3a31;
}
:root[data-theme="dark"] .otk-eta.is-soon {
  background: linear-gradient(135deg, #3f2b25, #352520);
  border-color: #6b4438;
  color: #edb0a0;
}
:root[data-theme="dark"] .otk-etaline.is-late,
:root[data-theme="dark"] .or-eta.is-late {
  background: linear-gradient(135deg, #3c2e20 0%, #322822 100%);
  border-color: #66512d;
}
:root[data-theme="dark"] .or-card--active {
  background: linear-gradient(135deg, var(--gz-surface) 60%, rgba(201, 123, 110, .10) 100%);
}

/* Затухание длинного описания на карточке товара. Градиент прикрывает обрыв
   текста и обязан совпадать с фоном карточки — белым он рисовал бы полосу. */
:root[data-theme="dark"] .product-more {
  /* Прозрачный конец берём того же тона, что и фон карточки: иначе на переходе
     проступает серая полоса. */
  background: linear-gradient(90deg, rgba(50, 42, 35, 0), var(--gz-surface) 45%);
}

/* Плашка «Отзыв на букет» внутри карточки — последний светлый градиент. */
:root[data-theme="dark"] .rv-product {
  background: linear-gradient(135deg, var(--gz-surface-2), var(--gz-raise));
}

/* Карточка техподдержки узнаётся по сиреневому. В тёмной теме сиреневый берём
   не светлее, а глубже — узнаваемость та же, а текст на нём читается. */
:root[data-theme="dark"] .ch-support-card {
  background: linear-gradient(135deg, #372a48 0%, #322645 50%, #3a2b3e 100%);
  border-color: rgba(168, 85, 247, .28);
}
:root[data-theme="dark"] .ch-support-card::before {
  background: radial-gradient(circle, rgba(168, 85, 247, .16), transparent 70%);
}
:root[data-theme="dark"] .ch-support-hero {
  background: linear-gradient(135deg, #372a48, #322645);
  border-color: rgba(168, 85, 247, .22);
}
:root[data-theme="dark"] .ch-support-hero p { color: #c3a8d8; }
:root[data-theme="dark"] .ch-support-hero-avatar { border-color: var(--gz-surface); }

/* Аватарка в профиле: буква имени белым по светлому концу градиента. */
:root[data-theme="dark"] .ua-avatar {
  background: linear-gradient(135deg, var(--rose), #8a5f52);
}

/* Кружки пустой корзины и пустого избранного: внутри значок, и светлый конец
   градиента его съедал. */
:root[data-theme="dark"] .cart-empty-icon,
:root[data-theme="dark"] .wishlist-empty-icon {
  background: linear-gradient(135deg, var(--gz-surface-2) 0%, #7a4c42 100%);
}

/* Метки состояния: «в наличии», «нет в наличии», «онлайн». Тёмно-зелёный и
   тёмно-красный писались по светлой подложке; на тёмной подложке нужен тот же
   цвет, но светлее — иначе метка есть, а прочесть её нельзя. */
:root[data-theme="dark"] .ch-support-online {
  color: #6ee7a0 !important;
  background: rgba(34, 197, 94, .14) !important;
}
:root[data-theme="dark"] .pi-status-badge.in  { background: rgba(34, 197, 94, .14); color: #6ee7a0; }
:root[data-theme="dark"] .pi-status-badge.out { background: rgba(239, 68, 68, .14); color: #f6a4a4; }

/* ── Мелочь, которую проверка не ловит по размеру ──
   Кружок меньше пары сантиметров она пропускает как «мелочь», а на тёмном
   экране именно такой белый кружок и бросается в глаза первым. */

/* Сердечко на карточке лежит поверх фотографии. Белый кружок там уместен на
   светлом сайте, а на тёмном светится фонариком — берём тёмное стекло. */
:root[data-theme="dark"] .like-btn {
  background: rgba(20, 15, 12, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--gz-text);
}
:root[data-theme="dark"] .like-btn.liked { background: rgba(20, 15, 12, .7); }

/* Логотип в шапке. Наверху он лежит на фотографии и осветляется; когда шапка
   становится плотной, осветление снимают — на белой шапке нужен тёмный знак.
   В тёмной теме шапка тёмная, поэтому осветление остаётся. */
:root[data-theme="dark"] header.scrolled .logo img {
  filter: brightness(0) invert(1);
  opacity: .92;
}

/* Значок в центре нижней панели — рисунок тёмной краской: на тёмной панели он
   пропадал совсем. */
:root[data-theme="dark"] .app-bnav-center-btn img {
  filter: brightness(0) invert(1);
  opacity: .55;
}
:root[data-theme="dark"] .app-bnav-center-item.active .app-bnav-center-btn img { opacity: 1; }

/* ── Второй шаг корзины ──
   Проверка тёмной темы открывала корзину, но не доходила до оформления: там
   свой подвал, своя полоса шагов и своя плашка о сроке. Всё это оставалось
   светлым — то есть самый ответственный экран покупки был единственным, где
   тёмная тема не работала. */
:root[data-theme="dark"] .cart-footer {
  background: rgba(50, 42, 35, .95);
  border-top-color: var(--gz-line);
}
:root[data-theme="dark"] .cart-footer-label,
:root[data-theme="dark"] .cart-btn-back { color: var(--gz-dim); }
:root[data-theme="dark"] .cart-footer-total { color: var(--gz-text); }
:root[data-theme="dark"] .cart-footer-note  { color: var(--gz-dim); }

:root[data-theme="dark"] .cart-prep-banner {
  background: linear-gradient(135deg, var(--gz-surface-2) 0%, var(--gz-surface) 100%);
  color: var(--gz-text);
  border-color: var(--gz-line);
}

/* Шаг, до которого ещё не дошли, — приглушённый, но читаемый. */
:root[data-theme="dark"] .cart-step-name { color: var(--gz-dim); }
:root[data-theme="dark"] .cart-step-num  { background: var(--gz-surface-2); color: var(--gz-dim); }
:root[data-theme="dark"] .cart-step.active .cart-step-name { color: var(--gz-text); }

/* Звёзды в форме отзыва: незаполненная была цвета песка, который на тёмном
   фоне исчезает — человек не видел, куда нажимать. */
:root[data-theme="dark"] .star-pick-btn { color: var(--gz-faint); }
:root[data-theme="dark"] .star-pick-btn.is-on,
:root[data-theme="dark"] .star-pick-btn.active { color: #e8b54a; }

:root[data-theme="dark"] .user-menu-dropdown {
  background: var(--gz-surface);
  border-color: var(--gz-line);
}
:root[data-theme="dark"] .user-menu-item { color: var(--gz-text); }
:root[data-theme="dark"] .user-menu-item:hover { background: var(--gz-surface-2); }

/* Тона меток в профиле: на тёмном те же смыслы, но текст светлее заливки. */
:root[data-theme="dark"] .ua-menu-badge--good { color: #8fce8f; }
:root[data-theme="dark"] .ua-menu-badge--warn { color: #e6c065; }
:root[data-theme="dark"] .ua-menu-badge--bad  { color: #f19483; }