/* ============================================================
   Voltshop | KMS — чёрно-золотая тема поверх стилей копии.
   Основа — графит и золотой металл: фон почти чёрный, акценты золотые.
   Подключается после assets/index-*.css и перекрывает её палитру.
   ============================================================ */

:root,
.dark,
.tropical-theme {
  --background: #0a0806;
  --foreground: #f7f0e2;
  --card: #17110a;
  --card-foreground: #f7f0e2;
  --popover: #120d08;
  --popover-foreground: #f7f0e2;
  --primary: #e8b337;
  --primary-foreground: #140d04;
  --secondary: #221a10;
  --secondary-foreground: #f7f0e2;
  --muted: #221a10;
  --muted-foreground: #a89778;
  --accent: #ffd970;
  --accent-foreground: #140d04;
  --destructive: #d9534f;
  --border: #3d3018;
  --input: #3d3018;
  --ring: #e8b337;
  --radius: 2px;
}

body { background: #0a0806; color: #f7f0e2; }

/* золотые декоративные слои тропической темы не нужны */
.tropical-theme:before,
.tropical-theme:after,
.tropical-theme .decor-ring,
.tropical-theme .decor-dots { display: none; }
.hero > .steam-background { display: none; }

/* ---------- шапка ---------- */

.tropical-theme {
  color: #f7f0e2;
  background: radial-gradient(ellipse 90% 60% at 50% 0%, #241a09 0%, #0f0b06 45%, #0a0806 100%);
}

.topline,
.tropical-theme .topline {
  color: #170f03;
  background: linear-gradient(90deg, #8a5a12 0%, #e8b337 40%, #ffd970 62%, #c9922c 100%);
  letter-spacing: .14em;
  border-bottom: 0;
}
.topline span { color: #3d2a08; }

.nav,
.tropical-theme .nav {
  background: #0d0a07;
  border-bottom: 1px solid #3d3018;
  border-color: #3d3018;
}
.nav nav { font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.nav nav a { color: #a89778; }
.nav nav a:hover { color: #f7f0e2; }
.nav nav a:after { background: #e8b337; }

/* логотип в одну строку: VOLT SHOP® */
.tropical-wordmark,
.tropical-wordmark > span { color: #f7f0e2; }
.tropical-wordmark > span { color: #e8b337; }

.tropical-wordmark {
  flex-direction: row;
  align-items: baseline;
  gap: .3em;
  line-height: 1;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.tropical-wordmark > span {
  margin: 0 !important;
  letter-spacing: -.02em !important;
}
.age-card .tropical-wordmark { justify-content: center; align-items: baseline; }

.bag,
.tropical-theme .bag { color: #f7f0e2; }
.bag b,
.tropical-theme .bag b { color: #170f03; background: #e8b337; border-radius: 2px; }

.account-button,
.tropical-theme .account-button {
  color: #f7f0e2;
  background: #1c1409;
  border: 1px solid #4a3a1c;
  border-color: #4a3a1c;
  border-radius: 2px;
}
.account-button:hover,
.tropical-theme .account-button:hover {
  color: #170f03;
  background: #e8b337;
  border-color: #e8b337;
}

/* ---------- hero ---------- */

.tropical-hero,
.tropical-theme .tropical-hero,
.hero { background: none; }

.hero h1 { color: #f7f0e2; }

.hero h1 > span,
.tropical-theme .hero h1 > span {
  color: transparent;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(100deg, #8a5a12 0%, #e8b337 35%, #ffe9a8 55%, #c9922c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: none;
}

.eyebrow,
.tropical-theme .eyebrow { color: #a89778; letter-spacing: .14em; text-transform: uppercase; }

.dot,
.tropical-theme .dot { background: #e8b337; box-shadow: 0 0 0 5px #e8b33726; }

.hero-bottom p,
.tropical-theme .hero-bottom p { color: #a89778; }
.section-head p,
.tropical-theme .section-head p { color: #a89778; }
.hero-arrow { color: #e8b337; }

/* ---------- кнопки и пилюли ---------- */

.primary-button,
.tropical-theme .primary-button,
.round-link,
.age-primary,
.tropical-theme .round-link {
  color: #170f03;
  background: linear-gradient(110deg, #d3a02c, #f5cf63);
  border: 1px solid #e8b337;
  border-radius: 2px;
  font-weight: 700;
}
.primary-button:hover,
.round-link:hover,
.age-primary:hover { background: linear-gradient(110deg, #b8860b, #e3b445); border-color: #b8860b; }

.offer-tag,
.tropical-theme .offer-tag {
  color: #170f03;
  background: linear-gradient(110deg, #d3a02c, #f5cf63);
  border-radius: 2px;
  letter-spacing: .1em;
  font-weight: 700;
}

/* ---------- каталог ---------- */

.catalog,
.tropical-theme .catalog {
  color: #f7f0e2;
  background: #0a0806;
  border-radius: 0;
  margin: 0;
  border-top: 1px solid #3d3018;
}

.filters button,
.tropical-theme .filters button {
  color: #f7f0e2;
  background: #17110a;
  border: 1px solid #4a3a1c;
  border-color: #4a3a1c;
  border-radius: 2px;
}
.filters button.active,
.filters button:hover,
.tropical-theme .filters button.active,
.tropical-theme .filters button:hover {
  color: #170f03;
  background: #e8b337;
  border-color: #e8b337;
}

.tilt-surface,
.tropical-theme .tilt-surface {
  background: #17110a;
  border: 1px solid #3d3018;
  border-radius: 2px;
  box-shadow: 0 16px 36px #00000080;
  padding: 10px;
}

.product-art,
.tropical-theme .product-art {
  color: #f7f0e2;
  border: 1px solid #3d3018;
  border-radius: 2px;
}

/* плитки — разные оттенки тёплого графита */
.product-art.acid,
.tropical-theme .product-art.acid { color: #f7f0e2; background: #1c1409; }
.product-art.silver,
.tropical-theme .product-art.silver { color: #f7f0e2; background: #221a10; }
.product-art.blue,
.tropical-theme .product-art.blue { color: #f7f0e2; background: #14100a; }
.product-art.orange,
.tropical-theme .product-art.orange { color: #f7f0e2; background: #241a0c; }
.product-art.pink,
.tropical-theme .product-art.pink { color: #f7f0e2; background: #2a1d0d; }
.product-art.dark,
.tropical-theme .product-art.dark { color: #f7f0e2; background: #0d0a07; }

.product-art:has(.real-product) { background: #17110a !important; }
.product:hover .product-art { transform: translateY(-3px); box-shadow: 0 0 0 1px #e8b337; }

.product-meta p { color: #a89778; }
.product-meta h3,
.tropical-theme .product-meta h3 { color: #f7f0e2; }
.prices { color: #f7f0e2; }
.prices small { color: #a89778; }

.add,
.tropical-theme .add {
  color: #170f03;
  background: linear-gradient(110deg, #d3a02c, #f5cf63);
  border: 1px solid #e8b337;
  border-radius: 2px;
}
.add:hover,
.tropical-theme .add:hover { color: #170f03; background: #c9962a; border-color: #c9962a; }

/* ---------- плашка «в твоём ритме» ---------- */

.brand-strip,
.tropical-theme .brand-strip {
  color: #170f03;
  background: linear-gradient(115deg, #8a5a12 0%, #e8b337 32%, #ffe9a8 52%, #ddb04a 72%, #a8730f 100%);
  border-radius: 0;
}
.brand-strip em,
.tropical-theme .brand-strip em { color: #4a3208; }
.brand-strip > span { color: #3d2a08; }
.brand-strip > button { color: #170f03; border: 1px solid #170f03; border-radius: 2px; }

/* ---------- подвал ---------- */

footer,
.tropical-theme footer { color: #f7f0e2; border-color: #3d3018; }
footer small { color: #a89778; }
footer .logo { color: #f7f0e2; }

/* ---------- корзина, диалоги, аккаунт ---------- */

.cart-title span { color: #a89778; }
.cart-lines,
.cart-line,
.loyalty-block,
.account-order { border-color: #3d3018; }
.quantity button { color: #f7f0e2; border-color: #4a3a1c; }
.quantity button:hover { color: #170f03; background: #e8b337; border-color: #e8b337; }
/* невыбранные вкусы: базовая тема красит их в белый, в тёмной это нечитаемо */
.variant {
  color: #f7f0e2;
  background: #1c1409;
  border: 1px solid #4a3a1c;
}
.variant:hover { border-color: #e8b337; }
.variant small,
.level span:nth-child(2),
.account-order span { color: #a89778; }
.variant.active,
.account-tabs button.active,
.payment-choice label.active,
.loyalty-percent { color: #170f03; background: #e8b337; border-color: #e8b337; }
.variant.active small { color: #4a3208; }
.variant:disabled { opacity: .45; }
.loyalty-bar { background: #221a10; }
.loyalty-bar span { background: linear-gradient(90deg, #8a5a12, #f5cf63); }
.account-tabs button { color: #f7f0e2; border-color: #4a3a1c; }
.dialog-added button { color: #170f03; background: #e8b337; }

.toast > svg,
.toast button { color: #e8b337; }
/* сообщения об ошибках: тёмная подложка вместо светло-розовой */
.form-error,
.error-state,
.dialog-added.warn {
  color: #ffb3a0;
  background: #3a1a12;
  border: 1px solid #7a3a28;
}
.dialog-added.warn svg { color: #ffb3a0; }

/* поля оформления заказа и выбор оплаты — тоже светлые в базовой теме */
.checkout-form input,
.checkout-form textarea,
.payment-choice label {
  color: #f7f0e2;
  background: #1c1409;
  border: 1px solid #4a3a1c;
}
.checkout-form input::placeholder,
.checkout-form textarea::placeholder { color: #8a7a5c; }
.payment-choice label.active { color: #170f03; background: #e8b337; border-color: #e8b337; }

.skeleton-card { background: #17110a; box-shadow: 0 16px 36px #00000080; }
.cart-thumb:has(> img),
.cart-thumb:has(img) { background: #17110a; }

.promo { border: 1px solid #4a3a1c; border-radius: 2px; }
.promo button {
  color: #f7f0e2;
  background: #221a10;
  border-left: 1px solid #4a3a1c;
}
.promo button:hover { color: #170f03; background: #e8b337; border-color: #e8b337; }
.promo input::placeholder { color: #8a7a5c; }
.promo-success { color: #7fc47f; }

.loyalty-hint {
  color: #f7f0e2;
  background: #1c1409;
  border: 1px dashed #8a5a12;
  border-radius: 2px;
}
.loyalty-hint:hover { border-color: #e8b337; }
.loyalty-block {
  background: #120d08;
  border: 1px solid #3d3018;
  border-radius: 2px;
}
.loyalty-levels { border-top: 1px solid #3d3018; }
.loyalty-head .eyebrow { color: #a89778; }

/* ---------- подтверждение возраста ---------- */

.age-gate { background: radial-gradient(circle at 50% 25%, #241a09, #060402 72%); }
.age-card {
  color: #f7f0e2;
  background: #120d08;
  border: 1px solid #4a3a1c;
  border-radius: 2px;
  box-shadow: 0 30px 80px #000000cc;
}
.age-card h2 { color: #f7f0e2; }
.age-card p { color: #a89778; }
.age-card .tropical-wordmark { color: #f7f0e2; }
.age-secondary { color: #f7f0e2; border: 1px solid #4a3a1c; border-radius: 2px; }
.age-secondary:hover { background: #221a10; }

/* ---------- фотографии ---------- */

.product-art img,
.product-art .real-product,
.cart-thumb img,
.product-dialog img { transition: filter .35s ease, transform .35s ease; }

/* ---------- баннеры акций ---------- */

.offers { margin: 0 4% 44px; }
.offers-track,
.offer { border-radius: 2px; }
.offer {
  background: #120d08;
  border: 1px solid #3d3018;
}
.offer:hover { border-color: #e8b337; }
.offers-dots button { border: 1px solid #4a3a1c; border-radius: 2px; }
.offers-dots button.active { background: #e8b337; border-color: #e8b337; }

/* ---------- фокус ---------- */

:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible { outline: 2px solid #e8b337; outline-offset: 3px; }

/* ---------- тёмные поверхности диалогов ---------- */

.cart-sheet {
  background: #120d08 !important;
  border-left: 1px solid #3d3018;
}
.product-dialog {
  background: #120d08 !important;
  border: 1px solid #3d3018;
}
.product-dialog .product-art { border-radius: 2px; }

/* ---------- острые углы вместо скруглений ---------- */

.filters button,
.primary-button,
.account-button,
.round-link,
.age-primary,
.age-secondary,
.offer-tag,
.variant,
.account-tabs button,
.payment-choice label,
input,
textarea,
select,
button,
[data-slot="sheet-content"],
[data-slot="dialog-content"] { border-radius: 2px; }