/* PHARM X NUTRITION — фирменные детали оформления.

   20.08.2026 выбран синий вариант. «Зал», «Металл», «Лаборатория» и «Светлый»
   вместе с переключателем убраны — их снимки остались в презентации клиенту.
   Базовая палитра лежит в styles.css (:root), здесь — только то, что делает
   витрину фирменной: логотип, синий на действиях, золото на статусах. */

/* ─── Логотип в шапке ──────────────────────────────────── */
.brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
.brand .mark { height: 32px; width: auto; display: block; flex: 0 0 auto; }
.brand-t {
  font-size: 13.5px; font-weight: 800; font-style: italic; letter-spacing: .04em;
  line-height: 1.1; min-width: 0; white-space: nowrap;
}
.brand-t span { color: var(--accent); margin: 0 .18em; }
.brand-t small {
  display: block; font-size: 10.5px; font-weight: 400; color: var(--dim);
  letter-spacing: 0; margin-top: 2px; text-transform: none; font-style: normal;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 400px) { .brand-t small { display: none; } }

/* ─── Светлая витрина: карточкам нужны границы, а не тени ── */
.card { border: 1px solid rgba(14,22,32,.07); }
.card .pic,
.hero { background: linear-gradient(160deg, #f7fbff, #eaf3fb); }
.icon-btn { border: 1px solid rgba(14,22,32,.09); }
.bar { background: rgba(14,22,32,.09); }
.bar i { background: linear-gradient(90deg, var(--accent), #29a2de); }
.toast { background: var(--ink); color: #fff; }
.devbar { background: #fdf0cf; color: #6b4b00; }

/* ─── Золото — там, где про статус и выгоду ─────────────── */
.tag { background: linear-gradient(180deg, #e3c36b, var(--gold)); color: #23180a; }
.cashback,
.hint.ok,
.sum .l.minus b { color: #8a6b1f; }
.lvl { background: linear-gradient(135deg, #f6ecd2, #ffffff); }
.ord .st { color: #8a6b1f; background: rgba(185,143,46,.12); }

/* ─── Премиум: та же отделка, но на тёмном ──────────────────
   ⚠ Правила выше зашиты светлыми цветами и перебивают переменные
      (этот файл грузится после styles.css) — поэтому тёмному варианту
      нужен явный ответ на каждое из них. */
body[data-theme="dark"] .card .pic,
body[data-theme="dark"] .hero { background: linear-gradient(160deg, #121b24, #0b1219); }
body[data-theme="dark"] .card { border-color: rgba(255,255,255,.13); }
body[data-theme="dark"] .icon-btn { border-color: rgba(255,255,255,.14); }
body[data-theme="dark"] .bar { background: rgba(255,255,255,.12); }
body[data-theme="dark"] .bar i { background: linear-gradient(90deg, var(--gold), #f0d78f); }
body[data-theme="dark"] .lvl { background: linear-gradient(135deg, rgba(219,186,102,.16), #151d26); }
body[data-theme="dark"] .cashback,
body[data-theme="dark"] .hint.ok,
body[data-theme="dark"] .sum .l.minus b { color: #dbba66; }
body[data-theme="dark"] .ord .st { color: #dbba66; background: rgba(219,186,102,.14); }
body[data-theme="dark"] .toast { background: #1e2a36; color: #fff; }