/* Avenir — тема Aubergine. Общие токены и компоненты для витрины и секций DS.
   Подключается в sections-*.html. Правила: ai-kit.md в DS-хабе brands/avenir/. */
@font-face { font-family:'Pequena Neo'; src:url('assets/fonts/pequenaneo-bold.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'Pequena Neo'; src:url('assets/fonts/pequenaneo-black.woff2') format('woff2'); font-weight:900; font-display:swap; }
@font-face { font-family:'Nunito'; src:url('assets/fonts/Nunito-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Nunito'; src:url('assets/fonts/Nunito-SemiBold.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Nunito'; src:url('assets/fonts/Nunito-Bold.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'Nunito'; src:url('assets/fonts/Nunito-ExtraBold.woff2') format('woff2'); font-weight:800; font-display:swap; }

:root {
  --bg:#15101D; --surface:#1E1729; --surface-2:#281F35;
  --line:rgba(199,140,255,.15); --line-l:rgba(199,140,255,.07);
  --violet:#B066FF; --violet-l:#CDA0FF; --violet-d:#7C3FD4;
  --gold:#FFB86B; --gold-d:#F09B3E; --cream:#F5F0D6;
  /* --t3 идёт на мелкий текст (крошки, возраст, подписи) → держим AA ≥4.5
     на всех фонах темы; #83768F давал 3.7 на --surface-2. */
  --t1:#ECE6F3; --t2:#B3A6C6; --t3:#92879D;
  --green:#5FD98A;
  /* цветокод категорий */
  --c-gravury:#FFE33B; --c-vyazanie:#F056A5; --c-shityo:#B980FF; --c-biser:#29C5F6;
  --c-shnurovka:#3ED058; --c-braslety:#FF4D45; --c-mega:#FFB03A; --c-applikacii:#A8D34A;
  --cw:1240px;
  --r-s:10px; --r-m:16px; --r-l:22px; --r-xl:28px;
  --sh-md:0 8px 24px rgba(0,0,0,.4); --sh-lg:0 18px 40px rgba(0,0,0,.5);
  /* Типо-шкала (валидный clamp — пробелы вокруг +/- обязательны).
     Display/H — Pequena Neo Black; body/lead/caption — Nunito. */
  --fs-display:clamp(46px, 6vw + 14px, 92px);      /* hero (шкала purple-pop) */
  --fs-h1:clamp(34px, 3vw + 14px, 56px);
  --fs-h2:clamp(28px, 2.4vw + 6px, 42px);          /* заголовок секции */
  --fs-h3:clamp(21px, 0.8vw + 15px, 28px);         /* подзаголовок */
  --fs-lead:clamp(17px, 0.5vw + 15px, 20px);       /* вводный абзац */
  --fs-body:16px; --fs-small:13.5px;
  --lh-tight:1.0; --lh-head:1.08; --lh-body:1.62;
  /* Шкала отступов (refactoring-ui: константная, не произвольные px). */
  --space-1:4px; --space-2:8px; --space-3:16px; --space-4:24px; --space-5:32px; --space-6:48px; --space-7:64px; --space-8:96px;
  /* Ритм секций — единый источник (как .section в purple-pop). */
  --section-gap:clamp(48px, 5vw, 80px);
  /* вынесено из правил, чтобы светлая тема переопределялась одним блоком */
  --head-bg:rgba(21,16,29,.9);
  --foot-bg:#120D19;
  --hero-grad:linear-gradient(135deg,#2A1740,#1A1226 55%,var(--bg));
  --scrim:rgba(10,7,15,.6);
  /* Краска на акцентных заливках (gold/violet). Заливки одинаковы в обеих темах,
     поэтому текст на них НЕ должен ходить за --t1/--cream — иначе в светлой
     теме получим тёмное на тёмном. Токены намеренно не переопределяются. */
  --on-gold:#2A1706; --on-violet:#1A1022;
}

/* Светлая тема — настоящая брендовая палитра из VIS: кремовый фон #F8EDDC
   и коричневый #3D2B1F, а не «инверсия Aubergine». Фиолет остаётся акцентом.
   Значения подобраны под AA: --t3 #736353 (4.57 на худшем фоне),
   --green #186334 (5.42 на плашке «в наличии»). */
/* Светлая тема = Purple Pop (холодный фиолет-пайпер, plum-текст, жёлтый CTA). */
:root[data-theme="light"] {
  --bg:#F6F3FB; --surface:#FFFFFF; --surface-2:#EFEAF7;
  --line:rgba(138,63,224,.16); --line-l:rgba(138,63,224,.08);
  --violet-l:#8A3FE0;      /* ссылки/акцент-текст на светлом (AA на paper) */
  --gold:#FDB714; --gold-d:#E8A200;   /* жёлтый CTA Purple Pop */
  --cream:#2A1145;         /* этим токеном красятся заголовки → на светлом это plum-ink */
  --t1:#2A1145; --t2:#574473; --t3:#6E5A87;
  --green:#186334;
  --on-gold:#2A1145; --on-violet:#FFFFFF;
  --sh-md:0 8px 24px rgba(138,63,224,.10); --sh-lg:0 18px 40px rgba(138,63,224,.16);
  --head-bg:rgba(255,255,255,.92);
  --foot-bg:#EFEAF7;
  --hero-grad:linear-gradient(135deg,#EAD9FF,#F3EDFB 55%,var(--bg));
  --scrim:rgba(42,17,69,.45);
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--t1); font:var(--fs-body)/var(--lh-body) 'Nunito',-apple-system,system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
img { max-width:100%; display:block; }
.wrap { max-width:var(--cw); margin:0 auto; padding:0 clamp(18px,4vw,40px); }
/* Ритм секций — единая вертикальная сетка страницы. Все страницы (витрина,
   командный центр) наследуют из DS. :not(:first-child) поднимает специфичность
   над .wrap{margin:0 auto}, иначе секции-.wrap теряли бы вертикальный отступ. */
main > section:first-child { margin-top:0; }
main > section:not(:first-child) { margin-top:var(--section-gap); }
a { color:var(--violet-l); text-decoration:none; }
a:hover { color:var(--violet); }
/* иерархия задана явно: семейство + размер + вес + интерлиньяж + трекинг */
h1,h2,h3,h4 { font-family:'Pequena Neo','Nunito',sans-serif; color:var(--cream); margin:0; }
h1 { font-weight:900; font-size:var(--fs-h1); line-height:var(--lh-head); letter-spacing:-.005em; }
h2 { font-weight:900; font-size:var(--fs-h2); line-height:var(--lh-head); letter-spacing:-.005em; }
h3 { font-weight:900; font-size:var(--fs-h3); line-height:var(--lh-head); }
h4 { font-weight:900; font-size:19px; line-height:1.15; }
.lead { font-size:var(--fs-lead); line-height:1.5; color:var(--t2); }
.small { font-size:var(--fs-small); color:var(--t3); }
code { background:var(--surface-2); padding:2px 7px; border-radius:6px; font-size:.85em; color:var(--gold); font-family:ui-monospace,monospace; }

/* фирменная нить фиолет→золото */
.brand-line { height:2px; background:linear-gradient(90deg,var(--violet-d),var(--violet),var(--gold)); }

/* кнопки */
.btn { display:inline-block; border:0; border-radius:999px; padding:14px 30px; font:800 16px 'Nunito'; cursor:pointer; transition:transform .18s, background .18s; }
.btn.cta { background:var(--gold); color:var(--on-gold); }
.btn.cta:hover { background:var(--gold-d); transform:translateY(-2px); }
.btn.ghost { background:transparent; color:var(--violet-l); border:1.5px solid var(--line); }
.btn.ghost:hover { border-color:var(--violet); }
.add { width:48px; height:48px; border-radius:999px; background:var(--gold); color:var(--on-gold); border:0; font:800 24px 'Nunito'; cursor:pointer; transition:transform .18s, background .18s; }
.add:hover { background:var(--gold-d); transform:scale(1.08); }

/* бейджи */
.badge { display:inline-block; border-radius:999px; padding:6px 14px; font:800 12px 'Nunito'; }
.b-new { background:var(--violet); color:var(--on-violet); } .b-hit { background:var(--gold); color:var(--on-gold); }
.b-stock { background:rgba(95,217,138,.16); color:var(--green); } .b-out { background:rgba(179,166,198,.16); color:var(--t3); }

/* карточка товара */
.pcard { background:var(--surface); border:1px solid var(--line-l); border-radius:var(--r-l); padding:16px; transition:transform .22s cubic-bezier(.16,1,.3,1), border-color .22s, box-shadow .22s; }
.pcard:hover { transform:translateY(-4px); border-color:var(--violet); box-shadow:var(--sh-lg); }
.pcard .ph { background:#fff; border-radius:14px; overflow:hidden; position:relative; }
.pcard .ph::after { content:''; position:absolute; inset:auto 0 0 0; height:3px; background:var(--cc,var(--violet)); opacity:0; transition:opacity .22s; }
.pcard:hover .ph::after { opacity:1; }
.pcard img { width:100%; aspect-ratio:1; object-fit:contain; mix-blend-mode:multiply; }
.pcard .name { font:700 17px/1.32 'Nunito'; margin:14px 2px 4px; min-height:46px; color:var(--t1); }
.pcard .age { font:600 13px 'Nunito'; color:var(--t3); padding:0 2px; }
.pcard .row { display:flex; justify-content:space-between; align-items:center; margin-top:12px; padding:0 2px; }
.pcard .price { font:900 26px 'Pequena Neo'; color:var(--cream); }

/* DS-обёртка секции: подпись + блок по единой левой линии .wrap (без вложенных сдвигов) */
.demo-wrap { border:0; border-radius:0; overflow:visible; margin:0 0 52px; background:none; }
.demo-label { display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:0 0 12px; margin:0 0 22px; background:none; border:0; border-bottom:1px solid var(--line-l); flex-wrap:wrap; border-radius:0 !important; }
.demo-label b { font:800 15px 'Nunito'; color:var(--cream); }
.demo-label span { font:600 13px 'Nunito'; color:var(--t3); }
.demo-body { padding:0; }

/* хедер витрины секций */
.dshead { background:linear-gradient(135deg,#2A1740,#1A1226 55%,var(--bg)); border-bottom:1px solid var(--line-l); }
.dshead-in { padding-top:36px; padding-bottom:32px; }
.dshead .eyebrow { font:800 12px 'Nunito'; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin-bottom:8px; }
.dshead h1 { font-size:clamp(28px,4vw,46px); line-height:1.06; }
.dshead p { color:var(--t2); max-width:64ch; margin-top:10px; }
nav.subnav { position:sticky; top:0; z-index:20; background:var(--head-bg); backdrop-filter:blur(12px); border-bottom:1px solid var(--line-l); }
.subnav-in { display:flex; gap:22px; overflow-x:auto; padding:12px clamp(18px,4vw,40px); max-width:var(--cw); margin:0 auto; font:700 13px 'Nunito'; text-transform:uppercase; letter-spacing:.05em; }
.subnav a { color:var(--t2); white-space:nowrap; } .subnav a:hover { color:var(--cream); }
.eyebrow { font:800 12px 'Nunito'; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); display:inline-flex; align-items:center; gap:8px; }
/* signature: клевер из логотипа как фирменный маркер */
.clover { display:inline-block; width:1em; height:1em; background:currentColor; vertical-align:-.12em;
  -webkit-mask:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 13c-1.6-2.4-5.5-3-6.9-1.1-1.1 1.5-.2 3.7 1.8 4.1-1.7 1.1-1.8 3.5-.3 4.6 1.7 1.2 4.3-.1 5.4-2.6 1.1 2.5 3.7 3.8 5.4 2.6 1.5-1.1 1.4-3.5-.3-4.6 2-.4 2.9-2.6 1.8-4.1C17.5 10 13.6 10.6 12 13z' fill='black'/%3E%3Cpath d='M11 13V5' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
  mask:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 13c-1.6-2.4-5.5-3-6.9-1.1-1.1 1.5-.2 3.7 1.8 4.1-1.7 1.1-1.8 3.5-.3 4.6 1.7 1.2 4.3-.1 5.4-2.6 1.1 2.5 3.7 3.8 5.4 2.6 1.5-1.1 1.4-3.5-.3-4.6 2-.4 2.9-2.6 1.8-4.1C17.5 10 13.6 10.6 12 13z' fill='black'/%3E%3Cpath d='M11 13V5' stroke='black' stroke-width='2'/%3E%3C/svg%3E"); }

/* утилитарный моно-слой: коды товара (артикул, EAN) — «язык» ассортимента */
.mono { font-family:ui-monospace,'SF Mono',Menlo,monospace; font-variant-numeric:tabular-nums; letter-spacing:.02em; }

/* line-иконки (SVG-маска в currentColor) вместо эмодзи */
.ic { display:inline-block; width:24px; height:24px; background:currentColor; vertical-align:middle;
  -webkit-mask:center/contain no-repeat; mask:center/contain no-repeat; }
.ic-screen { -webkit-mask-image:var(--m); mask-image:var(--m); --m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='13' rx='2'/%3E%3Cpath d='M8 21h8M12 17v4'/%3E%3Cpath d='M4 4l16 16' stroke-width='2'/%3E%3C/svg%3E"); }
.ic-shield { -webkit-mask-image:var(--m); mask-image:var(--m); --m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 4.4-3 7.7-7 9-4-1.3-7-4.6-7-9V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E"); }
.ic-spark { -webkit-mask-image:var(--m); mask-image:var(--m); --m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3c0 4 1.5 6 6 6-4.5 0-6 2-6 6 0-4-1.5-6-6-6 4.5 0 6-2 6-6z'/%3E%3Cpath d='M18 15c0 2 .7 2.8 2.5 2.8-1.8 0-2.5 1-2.5 2.7 0-1.8-.7-2.7-2.5-2.7 1.8 0 2.5-.8 2.5-2.8z'/%3E%3C/svg%3E"); }
.ic-gift { -webkit-mask-image:var(--m); mask-image:var(--m); --m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='9' width='16' height='11' rx='1'/%3E%3Cpath d='M4 9h16M12 9v11'/%3E%3Cpath d='M12 9C9 9 7 7.5 7 6s2-2 5 3c3-5 5-4.5 5-3s-2 3-5 3z'/%3E%3C/svg%3E"); }
.ic-pin { -webkit-mask-image:var(--m); mask-image:var(--m); --m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21c4-4.5 7-7.7 7-11a7 7 0 1 0-14 0c0 3.3 3 6.5 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E"); }
.ic-truck { -webkit-mask-image:var(--m); mask-image:var(--m); --m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6h11v10H2zM13 9h4l3 3v4h-7z'/%3E%3Ccircle cx='7' cy='18' r='1.6'/%3E%3Ccircle cx='17' cy='18' r='1.6'/%3E%3C/svg%3E"); }
.ic-card { -webkit-mask-image:var(--m); mask-image:var(--m); --m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 10h18M7 15h4'/%3E%3C/svg%3E"); }

/* ===== UI-компоненты (Фаза B) ===== */
/* формы */
.field { margin-bottom:16px; }
.field label { display:block; font:700 13px 'Nunito'; color:var(--t2); margin-bottom:6px; }
.input, .select, .textarea { width:100%; background:var(--surface); border:1.5px solid var(--line); border-radius:var(--r-m);
  padding:13px 15px; font:400 15px 'Nunito'; color:var(--t1); transition:border-color .18s; }
.input::placeholder, .textarea::placeholder { color:var(--t3); }
.input:focus, .select:focus, .textarea:focus { outline:none; border-color:var(--violet); }
.textarea { min-height:96px; resize:vertical; }
.select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23B3A6C6' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:40px; }
.check { display:flex; align-items:center; gap:10px; cursor:pointer; font:600 14px 'Nunito'; color:var(--t1); margin:8px 0; }
.check input { appearance:none; width:20px; height:20px; border:1.5px solid var(--line); border-radius:6px; background:var(--surface); flex-shrink:0; transition:all .15s; position:relative; cursor:pointer; }
.check input:checked { background:var(--violet); border-color:var(--violet); }
.check input:checked::after { content:''; position:absolute; inset:0; background:center/70% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23150F1D' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M5 12l4 4 10-10'/%3E%3C/svg%3E"); }
.check input[type=radio] { border-radius:50%; }
.check input[type=radio]:checked::after { background:none; inset:5px; border-radius:50%; background:#150F1D; }
.switch { position:relative; width:46px; height:26px; flex-shrink:0; }
.switch input { appearance:none; width:100%; height:100%; background:var(--surface-2); border:1px solid var(--line); border-radius:999px; cursor:pointer; transition:background .18s; }
.switch input:checked { background:var(--violet); border-color:var(--violet); }
.switch input::after { content:''; position:absolute; top:3px; left:3px; width:19px; height:19px; border-radius:50%; background:var(--cream); transition:transform .18s; }
.switch input:checked::after { transform:translateX(20px); }

/* аккордеон (FAQ) */
.acc { border:1px solid var(--line-l); border-radius:var(--r-m); overflow:hidden; background:var(--surface); }
.acc details { border-bottom:1px solid var(--line-l); } .acc details:last-child { border-bottom:0; }
.acc summary { padding:16px 20px; cursor:pointer; font:800 15px 'Nunito'; color:var(--cream); list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.acc summary::-webkit-details-marker { display:none; }
.acc summary::after { content:'+'; color:var(--gold); font:400 22px 'Nunito'; transition:transform .2s; }
.acc details[open] summary::after { transform:rotate(45deg); }
.acc details p { padding:0 20px 16px; color:var(--t2); font-size:14px; margin:0; }

/* табы */
.tabs { display:flex; gap:4px; background:var(--surface); border:1px solid var(--line-l); border-radius:999px; padding:4px; width:fit-content; }
.tabs button { border:0; background:transparent; color:var(--t2); font:700 14px 'Nunito'; padding:9px 20px; border-radius:999px; cursor:pointer; transition:all .18s; }
.tabs button.on { background:var(--violet); color:#150F1D; }

/* рейтинг-звёзды */
.stars { display:inline-flex; gap:2px; color:var(--gold); }
.stars .ic-star { width:18px; height:18px; background:currentColor; -webkit-mask:center/contain no-repeat var(--sm); mask:center/contain no-repeat var(--sm); --sm:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2l2.9 6.3 6.8.7-5 4.6 1.4 6.7L12 17.8 5.9 20.3 7.3 13.6l-5-4.6 6.8-.7z'/%3E%3C/svg%3E"); }
.stars .ic-star.off { color:var(--surface-2); }
.rating-num { color:var(--cream); font:800 14px 'Nunito'; margin-left:6px; } .rating-cnt { color:var(--t3); font-size:13px; margin-left:4px; }

/* бейдж сложности (уровень 1-3) */
.diff { display:inline-flex; align-items:center; gap:8px; font:700 13px 'Nunito'; color:var(--t2); }
.diff .dots { display:inline-flex; gap:3px; }
.diff .dot { width:8px; height:8px; border-radius:50%; background:var(--surface-2); }
.diff .dot.on { background:var(--green); }
.diff.lvl2 .dot.on { background:var(--gold); } .diff.lvl3 .dot.on { background:var(--c-braslety); }

/* хлебные крошки */
.crumbs { display:flex; gap:8px; align-items:center; font:600 13px 'Nunito'; color:var(--t3); flex-wrap:wrap; }
.crumbs a { color:var(--t2); } .crumbs a:hover { color:var(--violet-l); }
.crumbs .sep { color:var(--t3); }

/* пагинация */
.pager { display:flex; gap:6px; } .pager a { min-width:40px; height:40px; display:grid; place-items:center; border:1px solid var(--line); border-radius:10px; color:var(--t2); font:700 14px 'Nunito'; }
.pager a:hover { border-color:var(--violet); color:var(--cream); } .pager a.on { background:var(--violet); border-color:var(--violet); color:var(--on-violet); }

/* счётчик количества */
.stepper { display:inline-flex; align-items:center; border:1.5px solid var(--line); border-radius:999px; overflow:hidden; }
.stepper button { width:40px; height:40px; border:0; background:var(--surface); color:var(--cream); font:400 20px 'Nunito'; cursor:pointer; } .stepper button:hover { background:var(--surface-2); }
.stepper span { min-width:44px; text-align:center; font:800 16px 'Nunito'; color:var(--cream); }

/* тултип */
.tip { position:relative; border-bottom:1px dashed var(--t3); cursor:help; }
.tip::after { content:attr(data-tip); position:absolute; bottom:130%; left:50%; transform:translateX(-50%) translateY(4px); background:var(--surface-2); color:var(--t1); font:600 12px 'Nunito'; padding:8px 12px; border-radius:8px; white-space:nowrap; border:1px solid var(--line); opacity:0; pointer-events:none; transition:all .18s; }
.tip:hover::after { opacity:1; transform:translateX(-50%) translateY(0); }

/* тост */
.toast { display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--green); border-radius:var(--r-m); padding:14px 18px; max-width:360px; color:var(--t1); font:700 14px 'Nunito'; box-shadow:var(--sh-lg); }
.toast.err { border-left-color:var(--c-braslety); }

/* пустое состояние */
.empty { text-align:center; padding:48px 24px; } .empty .art { width:80px; margin:0 auto 16px; opacity:.7; } .empty h4 { color:var(--cream); margin-bottom:6px; } .empty p { color:var(--t3); font-size:14px; }

/* скелетон */
.skel { background:linear-gradient(100deg,var(--surface) 30%,var(--surface-2) 50%,var(--surface) 70%); background-size:200% 100%; animation:shine 1.3s linear infinite; border-radius:10px; }
@keyframes shine { to { background-position:-200% 0; } }
@media (prefers-reduced-motion:reduce) { .skel { animation:none; } }

/* прогресс-бар (шаги checkout) */
.steps { display:flex; align-items:center; gap:0; } .steps .st { display:flex; align-items:center; gap:10px; color:var(--t3); font:800 13px 'Nunito'; }
.steps .st .num { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:var(--surface-2); color:var(--t2); border:1px solid var(--line); }
.steps .st.on .num { background:var(--gold); color:#2A1706; border-color:transparent; } .steps .st.on { color:var(--cream); }
.steps .bar { flex:1; height:2px; background:var(--line); margin:0 12px; min-width:24px; }

/* ===== секции витрины (Фаза B2) ===== */
/* «что в наборе» — снятие боли №1 «пришлось докупать» */
.whatsin { display:grid; grid-template-columns:1fr 1fr; gap:14px 32px; }
.whatsin .col :is(h2,h3,h4) { color:var(--cream); font:900 17px 'Pequena Neo'; margin-bottom:10px; }
.whatsin li { list-style:none; display:flex; align-items:flex-start; gap:10px; color:var(--t1); font-size:14.5px; padding:6px 0; }
.whatsin li::before { content:''; width:18px; height:18px; flex-shrink:0; margin-top:1px; background:var(--green); -webkit-mask:center/contain no-repeat var(--ck); mask:center/contain no-repeat var(--ck); --ck:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); }
.whatsin .col.home li::before { background:var(--t3); --ck:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E"); }
.whatsin ul { padding:0; margin:0; }

/* отзывы с фото результата */
.reviews { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.review { background:var(--surface); border:1px solid var(--line-l); border-radius:var(--r-l); padding:18px; }
.review .head { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.review .av { width:38px; height:38px; border-radius:50%; background:var(--surface-2); display:grid; place-items:center; color:var(--violet-l); font:800 15px 'Nunito'; }
.review .nm { color:var(--cream); font:800 14px 'Nunito'; } .review .stars { --s:14px; }
.review p { color:var(--t2); font-size:14px; margin:0 0 12px; line-height:1.5; }
.review .pic { background:#fff; border-radius:12px; aspect-ratio:16/10; overflow:hidden; }
.review .pic img { width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; }

/* trust-строка */
.trust-row { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.trust-c { text-align:center; padding:20px; }
.trust-c .ic { width:30px; height:30px; color:var(--violet-l); margin:0 auto 10px; }
.trust-c b { display:block; color:var(--cream); font:800 15px 'Nunito'; margin-bottom:3px; } .trust-c span { color:var(--t3); font-size:13px; }
@media (max-width:760px){ .whatsin,.reviews,.trust-row { grid-template-columns:1fr; } }