/* ============================================================
   design-tokens.css — единый визуальный язык neoforma3d.ru
   Подключать ПЕРВЫМ на всех страницах (index.html, tovar/*.html,
   юридические). Ниже: токены → базовые компоненты → утилиты.

   Принцип: тёмная тема — основная (как hero). Светлая — по кнопке,
   через html[data-theme="light"] (см. бриф: сайт сейчас хранит выбор
   в localStorage['neoforma_theme']; менять только дефолт).
   ============================================================ */

/* ---------- 1. Токены ---------- */
:root{
  /* бренд */
  --nf-blue:#2A48D6;  --nf-blue-bg:#14257A;  --nf-blue-deep:#05081C;  --nf-blue-soft:#C6D4FF;
  --nf-red:#C8433C;   --nf-red-bg:#5A1016;   --nf-red-deep:#1A0508;   --nf-red-soft:#FFD0CB;

  /* поверхность (тёмная — основная) */
  --nf-ink:#0B0E1F;                 /* фон страницы */
  --nf-ink-2:#10142A;               /* фон секции-подложки */
  --nf-card:rgba(255,255,255,.05);  /* карточка */
  --nf-card-hover:rgba(255,255,255,.08);
  --nf-line:rgba(255,255,255,.12);  /* обводки */
  --nf-text:#FFFFFF;
  --nf-muted:rgba(255,255,255,.72);
  --nf-faint:rgba(255,255,255,.45);
  --nf-overlay:rgba(0,0,0,.55);     /* плашки на фото */
  --nf-on-accent:#FFFFFF;

  /* семантика */
  --nf-ok:#3DBE7A;  --nf-warn:#F2B138;  --nf-bad:#E5484D;

  /* форма */
  --nf-r-pill:999px; --nf-r-lg:26px; --nf-r-md:16px; --nf-r-sm:10px;
  --nf-shadow:0 20px 60px rgba(0,0,0,.45);
  --nf-shadow-blue:0 12px 40px rgba(42,72,214,.45);
  --nf-shadow-red:0 12px 40px rgba(200,67,60,.45);
  --nf-ease:cubic-bezier(.22,1,.36,1);
  --nf-spring:cubic-bezier(.34,1.56,.64,1);

  /* шрифт */
  --nf-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --nf-container:1500px;

  color-scheme:dark;
}

/* светлая тема — по явному выбору пользователя */
html[data-theme="light"]{
  --nf-ink:#F6F7FB; --nf-ink-2:#FFFFFF;
  --nf-card:#FFFFFF; --nf-card-hover:#FFFFFF;
  --nf-line:rgba(11,14,31,.10);
  --nf-text:#0B0E1F; --nf-muted:rgba(11,14,31,.70); --nf-faint:rgba(11,14,31,.45);
  --nf-overlay:rgba(11,14,31,.65);
  --nf-shadow:0 20px 60px rgba(11,14,31,.12);
  color-scheme:light;
}

/* ---------- 2. База ---------- */
html{background:var(--nf-ink)}
body.nf{margin:0; font-family:var(--nf-font); color:var(--nf-text); background:var(--nf-ink); -webkit-font-smoothing:antialiased}
.nf-container{max-width:var(--nf-container); margin:0 auto; padding:0 6vw}
@media (min-width:1600px){.nf-container{padding:0 48px}}

/* ---------- 3. Компоненты ---------- */
/* Кнопки: pill, как в hero */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:16px 34px; border-radius:var(--nf-r-pill);
  font:inherit; font-weight:700; color:var(--nf-on-accent); text-decoration:none; border:0; cursor:pointer; white-space:nowrap;
  background:var(--nf-blue); box-shadow:var(--nf-shadow-blue); transition:transform .25s var(--nf-ease),box-shadow .25s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:2px solid #fff; outline-offset:3px}
.btn--red{background:var(--nf-red); box-shadow:var(--nf-shadow-red)}
.btn--ghost{background:transparent; color:var(--nf-text); box-shadow:none; border:1px solid var(--nf-line)}
.btn--ghost:hover{background:var(--nf-card-hover)}
.btn--sm{padding:11px 20px; font-size:14px}
.btn[disabled],.btn.is-disabled{opacity:.5; pointer-events:none}

/* Бейдж-эйбров (ГОТОВЫЕ ИЗДЕЛИЯ, В НАЛИЧИИ, УНИКАЛЬНЫЙ ПОДАРОК) */
.badge{display:inline-block; padding:8px 16px; border-radius:var(--nf-r-pill); font-size:12px; letter-spacing:.2em; font-weight:700; text-transform:uppercase;
  border:1px solid var(--nf-line); background:var(--nf-card); color:var(--nf-text)}
.badge--blue{color:var(--nf-blue-soft); border-color:rgba(42,72,214,.5)}
.badge--red{color:var(--nf-red-soft); border-color:rgba(200,67,60,.5)}

/* Чипы фильтров (Все · Marvel · DC …) */
.chip{display:inline-flex; align-items:center; padding:10px 18px; border-radius:var(--nf-r-pill); font:inherit; font-size:14px; font-weight:600;
  color:var(--nf-muted); background:transparent; border:1px solid var(--nf-line); cursor:pointer; transition:all .2s}
.chip:hover{color:var(--nf-text); border-color:rgba(255,255,255,.3)}
.chip.is-on{background:var(--nf-blue); border-color:var(--nf-blue); color:#fff}

/* Карточка товара в сетке */
.pcard{position:relative; display:flex; flex-direction:column; background:var(--nf-card); border:1px solid var(--nf-line); border-radius:var(--nf-r-lg);
  overflow:hidden; color:inherit; text-decoration:none; transition:transform .3s var(--nf-ease),background .3s,box-shadow .3s}
.pcard:hover{transform:translateY(-4px); background:var(--nf-card-hover); box-shadow:var(--nf-shadow)}
.pcard__media{position:relative; aspect-ratio:4/5; background:radial-gradient(ellipse 80% 60% at 50% 70%,var(--nf-blue-bg),var(--nf-blue-deep)); overflow:hidden}
.pcard__media img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s var(--nf-ease)}
.pcard:hover .pcard__media img{transform:scale(1.04)}
.pcard__media::after{content:""; position:absolute; left:50%; bottom:-10%; width:60%; height:30%; transform:translateX(-50%); border-radius:50%; pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(120,160,255,.55),transparent 70%); opacity:0; transition:opacity .4s}
.pcard:hover .pcard__media::after{opacity:1}
.pcard__tag{position:absolute; top:12px; left:12px; padding:5px 10px; border-radius:var(--nf-r-pill); font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; background:var(--nf-red); color:#fff}
.pcard__body{display:flex; flex-direction:column; gap:6px; padding:16px 18px 18px}
.pcard__name{font-size:17px; font-weight:800; line-height:1.2; margin:0}
.pcard__meta{font-size:13px; color:var(--nf-muted)}
.pcard__row{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top:10px}
.pcard__price{font-size:20px; font-weight:800; font-variant-numeric:tabular-nums}
.pcard .btn{padding:11px 18px; font-size:14px}

/* Плашка на фото (название/цена в hero, подписи) */
.overlay-pill{display:inline-flex; align-items:center; padding:8px 14px; border-radius:var(--nf-r-pill); font-size:13px; font-weight:700;
  background:var(--nf-overlay); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.15); color:#fff}

/* Секции */
.section{padding:96px 0}
.section--tight{padding:64px 0}
.section__head{max-width:720px; margin-bottom:40px}
.section__title{font-size:clamp(30px,3.6vw,52px); font-weight:800; line-height:1.05; letter-spacing:-.01em; margin:14px 0 14px; text-wrap:balance}
.section__lead{font-size:clamp(15px,1.15vw,18px); line-height:1.5; color:var(--nf-muted); margin:0}

/* Полоса преимуществ под hero (без эмодзи) */
.trust{background:linear-gradient(180deg,var(--nf-blue-deep),var(--nf-ink)); border-bottom:1px solid var(--nf-line)}
.trust__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; padding:26px 0}
.trust__item{display:flex; gap:14px; align-items:center}
.trust__icon{width:40px; height:40px; flex:0 0 40px; border-radius:12px; border:1px solid var(--nf-line); display:grid; place-items:center; color:var(--nf-blue-soft)}
.trust__icon svg{width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.trust__t{font-weight:800; font-size:15px}
.trust__s{font-size:13px; color:var(--nf-muted)}
@media (max-width:900px){.trust__grid{grid-template-columns:1fr 1fr; gap:16px}}

/* Шапка (единая для всех страниц) */
.site-head{position:absolute; top:0; left:0; right:0; z-index:40; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 6vw; color:#fff}
.site-head--solid{position:sticky; background:rgba(11,14,31,.78); backdrop-filter:blur(12px); border-bottom:1px solid var(--nf-line); color:var(--nf-text)}
.site-head__logo{font-weight:800; letter-spacing:.22em; font-size:14px; text-decoration:none; color:inherit; text-transform:uppercase}
.site-head__nav{display:flex; gap:22px; font-size:14px; font-weight:600}
.site-head__nav a{color:inherit; text-decoration:none; opacity:.85}
.site-head__nav a:hover{opacity:1}
.site-head__tools{display:flex; gap:10px; align-items:center}
.pill{display:inline-flex; align-items:center; gap:6px; padding:10px 16px; border-radius:var(--nf-r-pill); border:1px solid var(--nf-line); background:rgba(0,0,0,.35);
  font:inherit; font-size:13px; font-weight:600; color:inherit; cursor:pointer; text-decoration:none}
@media (max-width:768px){.site-head__nav{display:none}.site-head{padding:12px 4vw}.site-head__logo{font-size:12px;white-space:nowrap;letter-spacing:.16em}.pill{padding:8px 12px;font-size:12px;white-space:nowrap}}

/* Плавающие кнопки (чат, корзина) — один стиль */
.fab{position:fixed; z-index:45; width:56px; height:56px; border-radius:50%; display:grid; place-items:center; color:#fff; cursor:pointer; border:1px solid var(--nf-line);
  background:rgba(11,14,31,.85); backdrop-filter:blur(10px); box-shadow:var(--nf-shadow); transition:transform .25s var(--nf-ease)}
.fab:hover{transform:translateY(-2px)}
.fab svg{width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:1.8}
.fab--cart{right:24px; bottom:24px}
.fab--chat{left:24px; bottom:24px}
.fab__count{position:absolute; top:-4px; right:-4px; min-width:20px; height:20px; padding:0 6px; border-radius:var(--nf-r-pill); background:var(--nf-red); color:#fff; font-size:12px; font-weight:800; display:grid; place-items:center}

/* Cookie-баннер */
.cookie{position:fixed; left:50%; bottom:20px; transform:translateX(-50%); z-index:50; width:min(920px,calc(100% - 32px)); display:flex; gap:18px; align-items:center;
  padding:16px 20px; border-radius:var(--nf-r-md); background:rgba(11,14,31,.92); border:1px solid var(--nf-line); backdrop-filter:blur(12px); box-shadow:var(--nf-shadow); font-size:14px; color:var(--nf-text)}
.cookie a{color:var(--nf-blue-soft)}
@media (max-width:640px){.cookie{flex-direction:column; align-items:stretch}}

/* Футер */
.foot{border-top:1px solid var(--nf-line); padding:56px 0 28px; color:var(--nf-muted); font-size:14px}
.foot__grid{display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:32px}
.foot h4{color:var(--nf-text); margin:0 0 12px; font-size:13px; letter-spacing:.18em; text-transform:uppercase}
.foot a{color:var(--nf-muted); text-decoration:none}
.foot a:hover{color:var(--nf-text)}
.foot__all summary{cursor:pointer; color:var(--nf-text); font-weight:700; margin:28px 0 10px}
.foot__all a{margin-right:14px; line-height:2}
@media (max-width:768px){.foot__grid{grid-template-columns:1fr}}

/* ---------- 4. Утилиты ---------- */
.muted{color:var(--nf-muted)}
.center{text-align:center}
.visually-hidden{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}