/* ============================================================
   TOYOMI · СВЕТЛАЯ ДЕТСКАЯ АРТ-ДИРЕКЦИЯ
   Палитра, шрифты и ширины сняты замерами с эталонов:
   Whirli, Bluey, Toca Boca, Canal Toys, Woset.
   Подключается ПОСЛЕ main.css и переопределяет его.
   Правило: молоко и белый — 80% площади, фиолет 12%,
   мята/лимон/розовый — по 2-3%, только точками.
============================================================ */
:root{
  --canvas:#FFF8F0;        /* тёплое молоко — фон страницы */
  --surface:#FFFFFF;       /* карточка товара */
  --ink:#2B1A4A;           /* текст: чернильно-фиолетовый, НЕ чёрный */
  --ink-muted:#6E6288;     /* вторичный текст */
  --brand:#6B3FE4;         /* бренд, главные кнопки */
  --mint:#12CFC2;
  --lemon:#FFE24B;
  --bubble:#FF5CA8;
  --hairline:#E8E2F5;      /* рамки вместо теней */
  /* тинты полноширинных секций */
  --t-mint:#DFFAF7; --t-lav:#EEE7FF; --t-lemon:#FFF6D1; --t-rose:#FFE6F1;
  /* совместимость со старыми именами из main.css */
  --nich:var(--ink); --nich-2:var(--surface); --polotno:var(--canvas);
  --zhar:var(--brand); --smereka:var(--mint); --med:var(--lemon);
  --voloshka:var(--brand); --popil:var(--ink-muted); --sklo:var(--surface);
  --line:var(--hairline);
  /* ширины */
  --container:1440px; --wide:1760px; --reading:720px;
  --gutter:clamp(16px,4vw,72px);
  --wrap:var(--wide);
  --head-h:78px;
  /* кривые */
  --e-expo:cubic-bezier(.16,1,.3,1);
  --e-quart:cubic-bezier(.25,1,.5,1);
  --display:'Unbounded',system-ui,sans-serif;
  --text:'Onest',system-ui,sans-serif;
}
::selection{background:var(--lemon);color:var(--ink)}
body,body.dark{background:var(--canvas);color:var(--ink);font-family:var(--text);font-size:17px}
.wrap{max-width:var(--container);padding-left:var(--gutter);padding-right:var(--gutter)}
.wrap--wide{max-width:var(--wide)}
.bleed{max-width:100%;width:100%}

/* ---------- шапка: плавающая белая пилюля (приём Bluey) ---------- */
.promo{background:var(--brand);color:#fff;font-size:13.5px;padding:9px 0;text-align:center;
  letter-spacing:.01em;position:relative;z-index:60}
.promo b{font-weight:700}
.head{position:sticky;top:0;height:auto;padding:12px 0;background:transparent;box-shadow:none}
.head .wrap{background:var(--surface);border:1px solid var(--hairline);border-radius:54px;
  padding:9px 12px 9px 22px;gap:20px;box-shadow:0 2px 0 rgba(43,26,74,.04)}
.head.solid{background:transparent;backdrop-filter:none;box-shadow:none}
.head.solid .wrap{box-shadow:0 8px 26px -18px rgba(43,26,74,.4)}
.logo,.head.solid .logo{color:var(--ink);font-weight:800;font-size:21px;letter-spacing:-.035em}
.logo .dot{background:var(--brand)}
.nav a,.head.solid .nav a{color:var(--ink-muted);font-size:14.5px;font-weight:500;
  text-transform:none;letter-spacing:0;border-bottom:0;padding:8px 12px;border-radius:99px;
  transition:background .25s var(--e-quart),color .25s}
@media (hover:hover){.nav a:hover,.head.solid .nav a:hover{background:var(--t-lav);color:var(--brand)}}
.nav a[aria-current="page"]{background:var(--t-lav);color:var(--brand)}
.icon-btn,.head.solid .icon-btn{color:var(--ink);width:40px;height:40px}
@media (hover:hover){.icon-btn:hover{background:var(--t-lav);color:var(--brand)}}
.badge{background:var(--bubble);color:#fff}

/* ---------- кнопки: пилюли, вдавливаются ---------- */
.btn{border-radius:99px;height:56px;padding:0 30px;font-weight:600;font-size:16.5px;
  transition:transform .1s ease-in-out,background-color .3s ease-in-out,color .3s;overflow:visible}
.btn::before{display:none!important}
.btn-main{background:var(--brand);color:#fff;box-shadow:0 10px 0 -4px rgba(107,63,228,.22)}
.btn-ghost{background:var(--lemon);color:var(--ink);border:0;box-shadow:0 10px 0 -4px rgba(255,226,75,.4)}
.btn-dark{background:var(--ink);color:#fff}
@media (hover:hover){
  .btn-main:hover{background:#5B31CE;color:#fff;transform:scale(1.03)}
  .btn-ghost:hover{background:#FFD91F;color:var(--ink);transform:scale(1.03)}
  .btn-dark:hover{transform:scale(1.03)}
}
.btn:active{transform:scale(.96)}
.btn-s{height:46px;padding:0 20px;font-size:15px}

/* ---------- первый экран: плакат + видео (вариант A) ---------- */
.hero{min-height:100svh;background:var(--canvas);overflow:hidden;position:relative;
  display:flex;align-items:center;padding:clamp(20px,2.4vw,40px) 0}
.hero::after{display:none}
.hero-in{display:block;padding-top:0;height:auto;position:relative}
.hero-in::before{display:none}
#stage{display:none}                       /* 3D-сцена убрана: в детском магазине читается как техно-демка */
.hero h1.mega,.mega{font-family:var(--display);font-weight:800;color:var(--brand);
  font-size:clamp(40px,7.4vw,116px);line-height:.92;letter-spacing:-.045em;
  margin:0 0 clamp(16px,2vw,26px);text-transform:none;text-wrap:balance}
.mega em{font-style:normal;color:var(--ink)}
.mega .thin{font-weight:600;color:var(--ink)}
/* появление по словам */
.mega .w{display:inline-block;opacity:0;transform:translate3d(0,1.1em,0);
  transition:opacity .5s var(--e-quart),transform .6s var(--e-expo)}
.loaded .mega .w{opacity:1;transform:none}

.hero-grid{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(22px,3vw,54px);align-items:center}
.hero-copy p{margin:0 0 26px;font-size:clamp(16px,1.25vw,21px);line-height:1.5;
  color:var(--ink-muted);max-width:44ch}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
/* видео-объект */
.hero-media{position:relative;border-radius:30px;overflow:hidden;background:var(--t-mint);
  aspect-ratio:4/3;border:1px solid var(--hairline)}
.hero-media video,.hero-media img{width:100%;height:100%;object-fit:cover;display:block}
.hero-media .cap{position:absolute;left:16px;bottom:16px;background:var(--surface);
  border-radius:99px;padding:8px 16px;font-size:13.5px;font-weight:600;color:var(--ink);
  display:inline-flex;align-items:center;gap:8px}
.hero-media .cap i{width:8px;height:8px;border-radius:50%;background:var(--mint);
  display:block;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}}
/* парящие формы */
.blob{position:absolute;border-radius:50%;pointer-events:none;z-index:0;filter:blur(0)}
.blob.b1{width:120px;height:120px;background:var(--t-lemon);right:-26px;top:6%}
.blob.b2{width:78px;height:78px;background:var(--t-rose);left:-30px;bottom:16%}
.blob.b3{width:52px;height:52px;background:var(--t-mint);right:12%;bottom:-16px}
.float{animation:floating 6s ease-in-out infinite}
.float.d1{animation-delay:-2s}.float.d2{animation-delay:-4s}
@keyframes floating{0%{transform:translate(0,0)}65%{transform:translate(0,26px)}100%{transform:translate(0,0)}}

/* ---------- бегущая строка выгод ---------- */
.marquee{background:var(--brand);border:0;padding:12px 0;color:#fff}
.marquee .row{gap:38px;animation:mq 34s linear infinite}
.marquee span{font-family:var(--text);font-weight:600;font-size:15px;letter-spacing:0;
  color:rgba(255,255,255,.92);text-transform:none}
.marquee span em{color:var(--lemon);font-style:normal}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- секции ---------- */
.sec{padding:clamp(46px,5.4vw,92px) 0}
.sec.tint-mint{background:var(--t-mint)}
.sec.tint-lav{background:var(--t-lav)}
.sec.tint-lemon{background:var(--t-lemon)}
.sec-head{margin-bottom:clamp(22px,2.6vw,40px);align-items:flex-end}
.sec-head h2,.dark .sec-head h2{font-family:var(--display);font-weight:800;color:var(--ink);
  letter-spacing:-.035em;font-size:clamp(26px,3.6vw,58px);line-height:.98;text-transform:none}
.sec-head h2 em{font-style:normal;color:var(--brand)}
.sec-head p,.dark .sec-head p{color:var(--ink-muted);font-size:17px}
.sec-num{display:inline-block;background:var(--lemon);color:var(--ink);border-radius:99px;
  padding:5px 14px;font-family:var(--text);font-weight:700;font-size:12.5px;letter-spacing:.06em;
  text-transform:uppercase;margin-bottom:14px}
.link-more{color:var(--brand);border-bottom-color:var(--brand);font-weight:600}
@media (hover:hover){.link-more:hover{color:var(--bubble);border-bottom-color:var(--bubble);letter-spacing:0}}

/* ---------- ВОЗРАСТНЫЕ ПЛИТКИ — главный вход (7 из 8 эталонов) ---------- */
.ages{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(10px,1.1vw,18px)}
.age-t{position:relative;border-radius:26px;overflow:hidden;aspect-ratio:1/1.16;
  display:flex;flex-direction:column;justify-content:flex-end;padding:18px;
  border:1px solid var(--hairline);background:var(--surface);
  transition:transform .1s ease-in-out,background-color .3s ease-in-out}
.age-t .art{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden}
.age-t .art svg{width:66%;height:auto;transition:transform .5s var(--e-expo)}
.age-t b{position:relative;font-family:var(--display);font-weight:800;font-size:clamp(17px,1.5vw,25px);
  letter-spacing:-.03em;color:var(--ink)}
.age-t small{position:relative;display:block;color:var(--ink-muted);font-size:13px;margin-top:2px}
.age-t:nth-child(1){background:var(--t-mint)}
.age-t:nth-child(2){background:var(--t-lemon)}
.age-t:nth-child(3){background:var(--t-rose)}
.age-t:nth-child(4){background:var(--t-lav)}
.age-t:nth-child(5){background:var(--t-mint)}
.age-t:nth-child(6){background:var(--t-lemon)}
@media (hover:hover){
  .age-t:hover{transform:scale(1.03)}
  .age-t:hover .art svg{transform:translateY(-8px) rotate(-4deg) scale(1.06)}
}

/* ---------- типы игры (приём Whirli) ---------- */
.plays{display:flex;gap:10px;flex-wrap:wrap}
.play{display:inline-flex;align-items:center;gap:9px;background:var(--surface);
  border:1px solid var(--hairline);border-radius:99px;padding:11px 20px;font-weight:600;
  font-size:15.5px;color:var(--ink);transition:transform .1s ease-in-out,background-color .3s}
.play i{width:10px;height:10px;border-radius:50%;display:block}
@media (hover:hover){.play:hover{background:var(--brand);color:#fff;transform:scale(1.03)}}

/* ---------- карточка товара ---------- */
.card,body.dark .card{background:var(--surface);border:1px solid var(--hairline);border-radius:22px;
  transition:transform .1s ease-in-out,background-color .3s ease-in-out}
@media (hover:hover){.card:hover{transform:scale(1.03);box-shadow:none}}
.ph,body.dark .ph{background:var(--surface);border-bottom:0;padding:11%}
.card-b,body.dark .card-b{background:var(--surface);padding:4px 18px 18px}
.card-b h3,body.dark .card-b h3{color:var(--ink);font-weight:500;font-size:15.5px}
.card-b .cat,body.dark .card-b .cat{color:var(--ink-muted);font-size:12.5px}
.age,.card-b .age{color:var(--mint);font-weight:700}
.age::before{background:var(--mint)}
.price,body.dark .price{font-family:var(--display);font-weight:800;color:var(--ink);font-size:19px}
.price s,body.dark .price s{color:var(--ink-muted)}
.add,body.dark .add{background:var(--brand);color:#fff;width:46px;height:46px}
@media (hover:hover){.add:hover{background:var(--ink);transform:scale(1.08)}}
.fav,body.dark .fav{background:rgba(255,255,255,.9);color:var(--ink-muted)}
.tag{background:var(--bubble);color:#fff;border-radius:99px}
.tag.new{background:var(--lemon);color:var(--ink)}
.tag.hit{background:var(--mint);color:var(--ink)}
.sw,body.dark .sw{box-shadow:inset 0 0 0 1px var(--hairline)}
.sw[aria-pressed="true"],body.dark .sw[aria-pressed="true"]{border-color:var(--ink)}

/* ---------- интерактивная демонстрация (приём Tonies, 1 из 8) ---------- */
.demo{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(22px,3vw,52px);align-items:center}
.demo-stage{background:var(--surface);border:1px solid var(--hairline);border-radius:30px;
  aspect-ratio:1/1;display:grid;place-items:center;position:relative;overflow:hidden}
.demo-stage svg{width:56%;height:auto;transition:transform .5s var(--e-expo)}
.demo-stage.is-bouncing svg{animation:bounce .9s var(--e-quart)}
@keyframes bounce{0%{transform:scale(1)}30%{transform:scale(1.16) rotate(-6deg)}60%{transform:scale(.94) rotate(4deg)}100%{transform:scale(1)}}
.demo-pick{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.dp{width:64px;height:64px;border-radius:50%;border:2px solid var(--hairline);background:var(--surface);
  display:grid;place-items:center;transition:transform .1s ease-in-out,border-color .3s}
.dp svg{width:60%;height:auto}
@media (hover:hover){.dp:hover{transform:scale(1.08);border-color:var(--brand)}}
.dp[aria-pressed="true"]{border-color:var(--brand);background:var(--t-lav)}

/* ---------- цифры ---------- */
.figs{background:transparent;gap:clamp(10px,1.2vw,20px);grid-template-columns:repeat(4,1fr)}
.fig{background:var(--surface);border:1px solid var(--hairline);border-radius:22px;
  padding:clamp(20px,2.2vw,34px)}
.fig b{color:var(--brand);font-family:var(--display);font-weight:800;
  font-size:clamp(28px,3.4vw,52px);letter-spacing:-.04em}
.fig span{color:var(--ink-muted);text-transform:none;letter-spacing:0;font-size:14px}

/* ---------- наборы ---------- */
.boxes{gap:clamp(14px,1.5vw,24px)}
.box{border-radius:28px;color:var(--ink);min-height:250px;padding:clamp(22px,2.4vw,34px)}
.box:nth-child(1){background:var(--mint)}
.box:nth-child(2){background:var(--lemon)}
.box:nth-child(3){background:var(--bubble)}
.box h3{font-family:var(--display);font-weight:800;color:var(--ink);letter-spacing:-.03em}
.box p{color:rgba(43,26,74,.72)}
.box .pr{color:var(--ink);font-family:var(--display);font-weight:800}
.box .btn{background:var(--ink);color:#fff;box-shadow:none}
@media (hover:hover){.box .btn:hover{background:var(--brand);color:#fff}}

/* ---------- доверие ---------- */
.strip{background:var(--surface);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
  padding:26px 0;color:var(--ink)}
.strip .it{color:var(--ink-muted);font-size:14.5px}
.strip b{color:var(--ink)}
.strip svg{color:var(--brand)}

/* ---------- футер ---------- */
.foot{background:var(--ink);color:rgba(255,255,255,.66)}
.foot h4{color:#fff}
.foot .logo{color:#fff}
.foot .logo .dot{background:var(--lemon)}
.made{border-top-color:rgba(255,255,255,.14);color:rgba(255,255,255,.5)}

/* ---------- внутренние страницы ---------- */
body.dark .page-top{background:var(--t-lav);border-bottom:1px solid var(--hairline);
  padding:clamp(26px,3.4vw,54px) 0 clamp(22px,2.6vw,40px)}
body.dark .page-top h1{font-family:var(--display);font-weight:800;color:var(--ink);
  font-size:clamp(30px,4.6vw,72px);letter-spacing:-.04em;text-transform:none}
body.dark .page-top .cnt,body.dark .crumbs,body.dark .crumbs a{color:var(--ink-muted)}
body.dark .cat-layout{background:var(--canvas)}
body.dark .filters,body.dark .fopt{color:var(--ink)}
body.dark .fgroup{border-bottom-color:var(--hairline)}
body.dark .fgroup h3{color:var(--ink-muted)}
body.dark .fopt .n{color:var(--ink-muted)}
body.dark .fchip{background:var(--surface);border:1px solid var(--hairline);color:var(--ink);
  border-radius:99px;transition:transform .1s ease-in-out,background-color .25s}
body.dark .fchip[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:#fff}
body.dark .sortsel{background:var(--surface);border-color:var(--hairline);color:var(--ink);border-radius:99px}
body.dark .pill{background:var(--brand);color:#fff}
body.dark .gal-main,body.dark .thumb{background:var(--surface);border-color:var(--hairline);border-radius:24px}
body.dark .thumb[aria-pressed="true"]{border-color:var(--brand)}
body.dark .pd-info h1{font-family:var(--display);font-weight:800;color:var(--ink);
  font-size:clamp(23px,2.5vw,38px);letter-spacing:-.03em;line-height:1.06}
body.dark .pd-meta{color:var(--ink-muted)}
body.dark .pd-meta b,body.dark .pd-facts dd,body.dark .trust b{color:var(--ink)}
body.dark .pd-price .now{color:var(--ink);font-family:var(--display);font-weight:800}
body.dark .pd-price s{color:var(--ink-muted)}
body.dark .qty{background:var(--surface);border-color:var(--hairline)}
body.dark .qty button,body.dark .qty span{color:var(--ink)}
body.dark .btn-dark{background:var(--ink);color:#fff}
body.dark .pd-facts{border-top-color:var(--hairline)}
body.dark .pd-facts dt,body.dark .trust .t,body.dark .opt-row > span{color:var(--ink-muted)}
body.dark .warn{background:var(--t-lemon);border-color:#EBD48A;color:var(--ink)}
body.dark .warn b,body.dark .warn svg{color:#8A6A00}
body.dark .more-wrap .btn-dark{background:var(--surface);border:1px solid var(--hairline);color:var(--ink)}
body.dark .wrap p{color:var(--ink-muted)}
/* подбор подарка */
.gift-wrap{background:var(--t-lav);color:var(--ink);min-height:auto;padding:clamp(40px,6vw,90px) 0}
.gift-card .q{font-family:var(--display);font-weight:800;color:var(--ink);letter-spacing:-.04em}
.gift-card .qs{color:var(--ink-muted)}
.step{background:rgba(43,26,74,.14)}
.step.on{background:var(--brand)}
.opt{background:var(--surface);border:1px solid var(--hairline);border-radius:22px;color:var(--ink);
  transition:transform .1s ease-in-out,background-color .3s}
.opt b{font-family:var(--display);font-weight:800;color:var(--ink)}
.opt small{color:var(--ink-muted)}
@media (hover:hover){.opt:hover{transform:scale(1.03);border-color:var(--brand)}}
.opt[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:#fff}
.opt[aria-pressed="true"] b{color:#fff}
.opt[aria-pressed="true"] small{color:rgba(255,255,255,.82)}
.gift-nav .back{color:var(--ink-muted)}

/* ---------- появление ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s cubic-bezier(0,0,.3,1),transform .6s var(--e-expo)}
.reveal.in{opacity:1;transform:none}

/* ---------- фирменная плашка (цвета НЕ менять) ---------- */
#acx-made-by{display:flex;justify-content:center;
  padding:30px clamp(16px,6vw,48px) calc(env(safe-area-inset-bottom,0px) + 46px);background:#08081a}
#acx-made-by a{display:inline-flex;align-items:center;gap:11px;background:#0c1b54;color:#fff;
  border-radius:99px;padding:9px 22px 9px 11px;font:600 13.5px/1.2 Onest,system-ui,sans-serif;
  text-decoration:none;transition:transform .1s ease-in-out}
#acx-made-by img{width:36px;height:36px;border-radius:50%;object-fit:cover;background:#fff}
#acx-made-by b{font-weight:800;color:#ff8b2e}
@media (hover:hover){#acx-made-by a:hover{transform:scale(1.04)}}
@media(max-width:560px){#acx-made-by{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 90px)}}

/* ---------- адаптив ---------- */
@media (min-width:1600px){.grid{grid-template-columns:repeat(5,1fr)}}
@media (max-width:1100px){
  .hero-grid{grid-template-columns:1fr;gap:26px}
  .ages{grid-template-columns:repeat(3,1fr)}
  .demo{grid-template-columns:1fr}
}
@media (max-width:820px){
  .nav{display:none}
  .figs{grid-template-columns:1fr 1fr}
  .ages{grid-template-columns:repeat(2,1fr)}
  .head .wrap{padding:8px 8px 8px 16px}
}
@media (max-width:520px){
  body{font-size:16px}
  .btn{height:52px;padding:0 24px;font-size:15.5px}
  .hero-media{aspect-ratio:5/4;border-radius:24px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal,.stagger > *{opacity:1;transform:none}
  .mega .w{opacity:1;transform:none}
}

/* ---------- первый экран обязан влезать: подгонка по высоте ---------- */
/* две колонки держим до 860px — иначе на низких экранах контент не влезает */
@media (min-width:861px){
  .hero-grid{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr)}
}
@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr;gap:22px}
}
/* низкий экран (зум 150%, ноутбуки 768) */
@media (max-height:800px) and (min-width:861px){
  .hero h1.mega,.mega{font-size:clamp(30px,4.4vw,58px);margin-bottom:14px}
  .hero-copy p{font-size:15.5px;margin-bottom:18px;max-width:40ch}
  .btn{height:48px;padding:0 24px;font-size:15.5px}
  .hero-media{aspect-ratio:16/10;border-radius:24px}
  .promo{font-size:12.5px;padding:7px 0}
  .head{padding:8px 0}
}
@media (max-height:600px) and (min-width:861px){
  .hero h1.mega,.mega{font-size:clamp(26px,3.4vw,44px);margin-bottom:10px}
  .hero-copy p{font-size:14.5px;margin-bottom:14px}
  .btn{height:44px;font-size:15px}
  .hero-media{aspect-ratio:16/9;border-radius:20px}
}
/* телефон */
@media (max-width:860px){
  .hero{min-height:100svh;padding:14px 0}
  .hero h1.mega,.mega{font-size:clamp(28px,7.4vw,42px);margin-bottom:12px}
  .hero-copy p{font-size:15px;margin-bottom:16px;max-width:34ch}
  .hero-media{aspect-ratio:16/10;border-radius:22px}
  .hero-cta{gap:10px}
  .hero-cta .btn{flex:1 1 auto;height:50px;padding:0 18px;font-size:15px}
}
/* заголовок не должен вылезать за свою колонку */
.hero h1.mega,.mega{font-size:clamp(38px,5.6vw,88px);overflow-wrap:break-word}

/* ---------- полоса возрастов в первом экране ---------- */
.hero-ages{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:clamp(24px,3.4vw,54px);padding-top:clamp(18px,2.2vw,30px);
  border-top:1px solid var(--hairline)}
.ha-lab{font-weight:600;color:var(--ink-muted);font-size:15px;margin-right:6px}
.ha{display:inline-flex;align-items:center;background:var(--surface);border:1px solid var(--hairline);
  border-radius:99px;padding:10px 20px;font-weight:600;font-size:15.5px;color:var(--ink);
  transition:transform .1s ease-in-out,background-color .3s ease-in-out,color .3s}
@media (hover:hover){.ha:hover{background:var(--brand);border-color:var(--brand);color:#fff;transform:scale(1.04)}}
@media (max-height:800px) and (min-width:861px){
  .hero-ages{margin-top:20px;padding-top:16px}
  .ha{padding:8px 16px;font-size:14px}
  .ha-lab{font-size:14px}
}
@media (max-width:860px){
  .hero-ages{display:none}   /* на телефоне возраст живёт отдельной секцией ниже */
}
/* на очень низких экранах полоса возрастов не влезает — прячем, она есть секцией ниже */
@media (max-height:620px){ .hero-ages{display:none} }

/* ============================================================
   КИНО-РЕЖИССУРА СКРОЛЛА
   Нативный скролл + плавность через CSS. Прокрутку не перехватываем.
============================================================ */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* полоса прогресса чтения */
.scroll-bar{position:fixed;left:0;top:0;height:3px;width:100%;z-index:120;
  background:linear-gradient(90deg,var(--brand),var(--mint),var(--lemon));
  transform:scaleX(0);transform-origin:0 50%;will-change:transform;pointer-events:none}

/* наклон по скорости прокрутки — «вес» движения */
.grid .card,.ages .age-t{will-change:transform}
.tilt-v{transform:skewY(calc(var(--sv,0) * .5deg))}

/* горизонтальная кино-лента */
.hscroll{position:relative;height:260vh;background:var(--t-lav)}
.hscroll .sticky{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;
  justify-content:center;overflow:hidden}
.hscroll .h-head{padding:0 var(--gutter) clamp(18px,2.4vw,34px);max-width:var(--wide);
  margin:0 auto;width:100%}
.hscroll .h-track{display:flex;gap:clamp(14px,1.6vw,26px);padding-left:var(--gutter);
  will-change:transform}
.h-card{flex:0 0 clamp(260px,25vw,380px);background:var(--surface);border:1px solid var(--hairline);
  border-radius:28px;overflow:hidden;display:flex;flex-direction:column}
.h-card .pic{aspect-ratio:4/3;background:var(--t-mint);display:grid;place-items:center;overflow:hidden}
.h-card .pic svg{width:52%;height:auto;transition:transform .6s var(--e-expo)}
.h-card:nth-child(2n) .pic{background:var(--t-lemon)}
.h-card:nth-child(3n) .pic{background:var(--t-rose)}
.h-card:nth-child(4n) .pic{background:var(--t-lav)}
.h-card .txt{padding:20px 22px 24px}
.h-card h3{font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:-.03em;margin:0 0 6px}
.h-card p{margin:0;color:var(--ink-muted);font-size:14.5px;line-height:1.45}
@media (hover:hover){.h-card:hover .pic svg{transform:scale(1.09) rotate(-4deg)}}
/* индикатор ленты */
.h-prog{max-width:var(--wide);margin:clamp(18px,2.2vw,30px) auto 0;padding:0 var(--gutter);width:100%}
.h-prog i{display:block;height:3px;background:var(--hairline);border-radius:2px;position:relative;overflow:hidden}
.h-prog i::after{content:"";position:absolute;inset:0;background:var(--brand);border-radius:2px;
  transform:scaleX(var(--hk,0));transform-origin:0 50%}

/* маска-раскрытие картинок */
.clip{clip-path:inset(0 100% 0 0);transition:clip-path 1s var(--e-expo)}
.clip.in{clip-path:inset(0 0 0 0)}

/* кинетическая строка: буквы въезжают снизу */
.kin{display:inline-block;overflow:hidden;vertical-align:bottom}
.kin > i{display:inline-block;font-style:normal;transform:translateY(105%);
  transition:transform .8s var(--e-expo)}
.in .kin > i,.loaded .kin > i{transform:none}

/* «роботизированное» появление цифр — шаговая кривая */
.fig b{font-variant-numeric:tabular-nums}
.robo{transition:opacity .01s steps(1),transform .35s steps(6)}

@media (max-width:860px){
  .hscroll{height:auto;background:var(--t-lav);padding:clamp(40px,6vw,70px) 0}
  .hscroll .sticky{position:static;height:auto;display:block}
  .hscroll .h-track{overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;
    -webkit-overflow-scrolling:touch;transform:none!important}
  .h-card{scroll-snap-align:start}
  .h-prog{display:none}
}
@media (prefers-reduced-motion:reduce){
  .scroll-bar{display:none}
  .clip{clip-path:none}
  .kin > i{transform:none}
}
.h-title{font-family:var(--display);font-weight:800;letter-spacing:-.035em;margin:0;
  font-size:clamp(26px,3.6vw,58px);line-height:.98;color:var(--ink)}
.h-title em{font-style:normal;color:var(--brand)}
.h-card .txt h3{margin:0 0 6px}

/* ============================================================
   КИНЕТИКА: заголовки, одометры, переходы между страницами
============================================================ */
/* слова заголовка въезжают из-под маски */
.kw{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.06em;margin-bottom:-.06em}
.kw > i{display:inline-block;font-style:normal;transform:translateY(108%);
  transition:transform .85s var(--e-expo)}
.kin-in .kw > i{transform:none}


/* переход между страницами */
body{opacity:1;transition:opacity .24s ease-out}
body.leaving{opacity:0}
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtOut .28s var(--e-quart) both}
::view-transition-new(root){animation:vtIn .42s var(--e-expo) both}
@keyframes vtOut{to{opacity:0;transform:translateY(-14px)}}
@keyframes vtIn{from{opacity:0;transform:translateY(18px)}}

@media (prefers-reduced-motion:reduce){
  .kw > i{transform:none}
  body.leaving{opacity:1}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* ============================================================
   ПРАВКИ ПО АУДИТУ (P0/P1). Каждая — против конкретного дефекта.
============================================================ */

/* №5 hover был мёртв: .stagger.in > * {transform:none} перебивал :hover.
   Теперь transform снимается только пока блок НЕ проявлен. */
.stagger > *{transition:opacity .55s cubic-bezier(0,0,.3,1),transform .6s var(--e-expo)}
.stagger:not(.in) > *{opacity:0;transform:translateY(20px)}
.stagger.in > *{opacity:1}
/* №16 каскад появления — реальный, с шагом 60 мс */
.stagger.in > *:nth-child(1){transition-delay:0ms}
.stagger.in > *:nth-child(2){transition-delay:60ms}
.stagger.in > *:nth-child(3){transition-delay:120ms}
.stagger.in > *:nth-child(4){transition-delay:180ms}
.stagger.in > *:nth-child(5){transition-delay:240ms}
.stagger.in > *:nth-child(6){transition-delay:300ms}
.stagger.in > *:nth-child(7){transition-delay:360ms}
.stagger.in > *:nth-child(8){transition-delay:420ms}
.stagger.in > *:nth-child(9){transition-delay:480ms}
.stagger.in > *:nth-child(10){transition-delay:540ms}
.stagger.in > *:nth-child(11){transition-delay:600ms}
.stagger.in > *:nth-child(12){transition-delay:660ms}

/* №2 блок цифр разваливался: не было display:grid, b и span были inline */
.figs{display:grid;grid-template-columns:repeat(4,1fr)}
.fig{min-height:186px;display:flex;flex-direction:column;justify-content:flex-end}
.fig b{display:block;line-height:.95;margin-bottom:10px}
.fig span{display:block;line-height:1.35}

/* №3 бегущая строка рвалась на две и резалась: не было display:flex */
.marquee .row{display:flex;width:max-content;flex:none;white-space:nowrap;align-items:center}
.marquee em{margin:0 19px;color:var(--lemon);font-style:normal}

/* №4 плитки категорий: текст был #FFF8F0 на белом — контраст 1,05:1 */
.hero-card{color:var(--ink);background:var(--surface);border:1px solid var(--hairline)}
.hero-card b{color:var(--ink)}
.hero-card small{color:var(--ink-muted)}
.hero-card:nth-child(4n+1){background:var(--t-mint)}
.hero-card:nth-child(4n+2){background:var(--t-lemon)}
.hero-card:nth-child(4n+3){background:var(--t-rose)}
.hero-card:nth-child(4n+4){background:var(--t-lav)}

/* №6 в первом экране em был того же цвета — контраст пропал */
.hero h1.mega em{color:var(--ink)}

/* №7 мята на белом давала 1,96:1 — «від 6 років» не читалось */
.age,.card-b .age{color:#0B7F78}
.age::before{background:#12CFC2}

/* №14 hover карточки товара: подъём и тень вместо голого scale */
.card,body.dark .card{transition:transform .35s var(--e-expo),box-shadow .35s var(--e-expo)}
@media (hover:hover){
  .card:hover{transform:translateY(-6px) scale(1.01);
    box-shadow:0 26px 44px -30px rgba(43,26,74,.5)}
  .card:hover .ph img{transform:scale(1.07) rotate(-3deg)}
}
.ph img{transition:transform .5s var(--e-expo)}

/* №15 запрещённые кривые: ease-in-out → фирменная */
.age-t,.play,.ha,.fchip,.dp,.opt,.btn,.h-card{transition-timing-function:var(--e-quart)}
.age-t,.play,.ha,.fchip,.dp,.opt{transition-duration:.28s}

/* №12 кино-лента: заголовок уезжал под шапку, в конце был мёртвый ход */
.hscroll{height:205vh}
.hscroll .sticky{padding-top:calc(var(--head-h) + 26px)}

/* №13 демо-сцена была белой пустотой */
.demo-stage{aspect-ratio:4/3;background:var(--t-mint);transition:background-color .5s var(--e-quart)}
.demo-stage svg{width:72%}
.demo-stage[data-tint="1"]{background:var(--t-lemon)}
.demo-stage[data-tint="2"]{background:var(--t-rose)}
.demo-stage[data-tint="3"]{background:var(--t-lav)}
.demo-stage[data-tint="4"]{background:var(--t-mint)}

/* №11 ритм: не все секции одинаковой высоты */
.sec.dense{padding-top:clamp(38px,4vw,62px);padding-bottom:clamp(38px,4vw,62px)}
.sec.airy{padding-top:clamp(74px,8.4vw,132px);padding-bottom:clamp(74px,8.4vw,132px)}

/* ============================================================
   ПРУЖИННЫЕ КРИВЫЕ linear() — 2026.
   Baseline с декабря 2023, поддержка Chrome/Edge 113+, FF 112+, Safari 17.2+.
   Дают «игрушечный» отскок вместо дефолтного ease.
============================================================ */
:root{
  --spring:linear(0,.28,.78,1.06,1.13,1.08,1.01,.98,1);
  --robot:linear(0,0 20%,.35 20%,.35 45%,.8 45%,.8 70%,1 70%);
}
@supports (transition-timing-function:linear(0,1)){
  .btn{transition:transform .5s var(--spring),background-color .3s var(--e-quart),color .3s}
  .btn:active{transition-duration:.12s;transition-timing-function:var(--robot)}
  .age-t,.play,.ha,.fchip,.dp,.opt,.h-card{transition-timing-function:var(--spring);transition-duration:.42s}
  .add{transition:transform .5s var(--spring),background-color .28s var(--e-quart)}
  .card{transition:transform .5s var(--spring),box-shadow .4s var(--e-quart)}
}
/* №9 видео получает освободившееся место */
.hero-media{aspect-ratio:3/2}
@media (max-height:800px) and (min-width:861px){.hero-media{aspect-ratio:16/9}}
/* горизонтальная прокрутка страницы недопустима: обрезаем ленту и декор */
.marquee{overflow:hidden}
.hero{overflow:hidden}
.hscroll .sticky{overflow:hidden}
body{overflow-x:clip}

/* ============================================================
   НОВЫЕ СТРАНИЦЫ: корзина, список желаний, кабинет, 404
============================================================ */
body.dark .page-top h1 em{font-style:normal;color:var(--brand)}

/* корзина */
.cart-layout{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:clamp(20px,2.4vw,40px);align-items:start}
.cart-sum{background:var(--surface);border:1px solid var(--hairline);border-radius:26px;
  padding:clamp(20px,2.2vw,30px);position:sticky;top:calc(var(--head-h) + 20px)}
.cart-sum h3{font-family:var(--display);font-weight:800;font-size:20px;margin:0 0 16px;letter-spacing:-.03em}
.cart-sum dl{display:grid;grid-template-columns:1fr auto;gap:10px 12px;margin:0 0 16px;font-size:15.5px}
.cart-sum dt{color:var(--ink-muted)}
.cart-sum dd{margin:0;text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.cart-total{display:flex;justify-content:space-between;align-items:baseline;
  border-top:1px solid var(--hairline);padding-top:14px;margin-bottom:14px}
.cart-total b{font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:-.03em}
.ship-bar{height:8px;border-radius:4px;background:var(--hairline);overflow:hidden;margin-bottom:8px}
.ship-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--mint),var(--brand));
  border-radius:4px;transition:width .6s var(--e-expo)}
.ship-hint{font-size:13.5px;color:var(--ink-muted);margin:0 0 18px}
.cart-row{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:16px;align-items:center;
  background:var(--surface);border:1px solid var(--hairline);border-radius:22px;padding:14px;margin-bottom:12px}
.cart-row .pic{background:var(--t-lav);border-radius:16px;aspect-ratio:1;display:grid;place-items:center;padding:10%}
.cart-row .pic img{width:100%;height:100%;object-fit:contain}
.cart-row h4{margin:0 0 4px;font-size:15.5px;font-weight:500;line-height:1.35}
.cart-row .meta{color:var(--ink-muted);font-size:13px}
.cart-row .pr{font-family:var(--display);font-weight:800;font-size:18px;white-space:nowrap}
@media (max-width:900px){.cart-layout{grid-template-columns:1fr}.cart-sum{position:static}}

/* пустые состояния */
.empty{max-width:560px;margin:0 auto;text-align:center;padding:clamp(30px,5vw,70px) 0}
.empty-art{width:clamp(120px,14vw,190px);margin:0 auto 24px}
.empty-art svg{width:100%;height:auto}
.empty h2{font-family:var(--display);font-weight:800;font-size:clamp(22px,2.6vw,34px);
  letter-spacing:-.03em;margin:0 0 10px}
.empty p{color:var(--ink-muted);margin:0 0 24px;font-size:17px}

/* кабинет */
.acc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.4vw,22px)}
.acc-card{background:var(--surface);border:1px solid var(--hairline);border-radius:24px;
  padding:clamp(20px,2.2vw,30px);display:flex;flex-direction:column;gap:6px;
  transition:transform .42s var(--spring),box-shadow .4s var(--e-quart)}
.acc-ico{width:46px;height:46px;border-radius:14px;background:var(--t-lav);display:grid;place-items:center;margin-bottom:10px}
.acc-ico svg{width:23px;height:23px;color:var(--brand)}
.acc-card b{font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:-.02em}
.acc-card small{color:var(--ink-muted);font-size:13.5px}
@media (hover:hover){.acc-card:hover{transform:translateY(-5px);box-shadow:0 22px 40px -28px rgba(43,26,74,.45)}}
@media (max-width:900px){.acc-grid{grid-template-columns:1fr 1fr}}

/* 404 */
.nf{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,3vw,60px);align-items:center}
.nf-art svg{width:100%;height:auto}
.nf-ball{transform-origin:248px 176px;animation:roll 2.6s var(--e-quart) infinite}
@keyframes roll{0%,100%{transform:translateX(0) rotate(0)}50%{transform:translateX(-38px) rotate(-160deg)}}
@media (max-width:860px){.nf{grid-template-columns:1fr}}

/* ============================================================
   ДОРАБОТКА ВНУТРЕННИХ СТРАНИЦ (по аудиту)
============================================================ */
:root{--ring:0 0 0 3px #FFF8F0, 0 0 0 6px rgba(107,63,228,.55);--danger:#E23D6B}
.chip,.fchip,.sw,.thumb,.add,.fav,.opt,.sel-btn,.ha,.play,.age-t,.h-card{outline:none}
.chip:focus-visible,.fchip:focus-visible,.sw:focus-visible,.thumb:focus-visible,
.add:focus-visible,.fav:focus-visible,.opt:focus-visible,.sel-btn:focus-visible,
.ha:focus-visible,.play:focus-visible,.age-t:focus-visible,.h-card:focus-visible{
  outline:none;box-shadow:var(--ring)}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--brand);color:#fff;
  padding:12px 20px;border-radius:0 0 14px 0;font-weight:600}
.skip-link:focus{left:0}

/* ---------- шапка страницы каталога: две колонки вместо пустоты ---------- */
body.dark .page-top .wrap:has(.pt-ages){display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,388px);
  gap:clamp(20px,3vw,56px);align-items:end}
body.dark .page-top h1{font-size:clamp(32px,5vw,76px);line-height:.94;letter-spacing:-.045em;
  max-width:15ch;text-wrap:balance}
.pt-lbl{display:block;font-size:12.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-muted);margin-bottom:10px}
.pt-ages{display:flex;flex-wrap:wrap;gap:8px}
.pt-ages a{padding:10px 18px;border-radius:99px;background:var(--surface);border:1px solid var(--hairline);
  font-size:14.5px;font-weight:600;color:var(--ink);
  transition:transform .28s var(--e-quart),background-color .28s,color .28s}
@media (hover:hover){.pt-ages a:hover{background:var(--brand);border-color:var(--brand);color:#fff;transform:scale(1.04)}}
.pt-gift{display:inline-block;margin-top:16px;font-size:14.5px;font-weight:600;color:var(--brand);
  border-bottom:1.5px solid currentColor;padding-bottom:2px}
@media (max-width:1000px){body.dark .page-top .wrap:has(.pt-ages){grid-template-columns:1fr;gap:22px}}

/* ---------- свой селект сортировки ---------- */
.sel{position:relative;margin-left:auto}
.sel-btn{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 18px 0 20px;
  border-radius:99px;background:var(--surface);border:1px solid var(--hairline);
  font:500 14.5px/1 var(--text);color:var(--ink);white-space:nowrap;
  transition:border-color .28s var(--e-quart),background-color .28s}
.sel-cap{color:var(--ink-muted);font-weight:400}
.sel-val{font-weight:600}
.sel-arw{width:12px;height:8px;color:var(--brand);transition:transform .28s var(--e-expo)}
.sel-btn[aria-expanded="true"]{border-color:var(--brand);background:#F7F3FF}
.sel-btn[aria-expanded="true"] .sel-arw{transform:rotate(180deg)}
@media (hover:hover){.sel-btn:hover{border-color:var(--brand)}}
.sel-list{position:absolute;right:0;top:calc(100% + 8px);z-index:40;min-width:238px;margin:0;
  padding:8px;list-style:none;background:var(--surface);border:1px solid var(--hairline);
  border-radius:20px;box-shadow:0 22px 44px -26px rgba(43,26,74,.45);
  transform-origin:100% 0;animation:selIn .22s var(--e-expo)}
@keyframes selIn{from{opacity:0;transform:scale(.96) translateY(-6px)}}
.sel-list li{padding:11px 14px;border-radius:14px;font-size:15px;color:var(--ink);cursor:pointer}
@media (hover:hover){.sel-list li:hover{background:var(--t-lav)}}
.sel-list li[aria-selected="true"]{background:var(--t-lav);color:var(--brand);font-weight:600}

/* ---------- свои чекбоксы ---------- */
.fopt{display:flex;align-items:center;gap:11px;min-height:40px;padding:4px 8px 4px 8px;
  margin-left:-8px;border-radius:12px;font-size:15px;cursor:pointer;transition:background-color .2s}
@media (hover:hover){.fopt:hover{background:#F7F3FF}}
.fopt input[type=checkbox]{appearance:none;-webkit-appearance:none;margin:0;flex:none;
  width:22px;height:22px;border-radius:7px;background:var(--surface);border:2px solid var(--hairline);
  display:grid;place-content:center;cursor:pointer;
  transition:background-color .18s var(--e-quart),border-color .18s,transform .18s}
.fopt input[type=checkbox]::before{content:"";width:12px;height:9px;transform:scale(0);
  background:#fff;transition:transform .22s var(--spring);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M1 6l4.5 4.5L15 1.5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M1 6l4.5 4.5L15 1.5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.fopt input:checked{background:var(--brand);border-color:var(--brand)}
.fopt input:checked::before{transform:scale(1)}
@media (hover:hover){.fopt:hover input{border-color:var(--brand)}}
.fopt input:focus-visible{outline:none;box-shadow:var(--ring)}
.fopt input:active{transform:scale(.9)}
.fopt .n{margin-left:auto;font-size:13px;color:var(--ink-muted);font-variant-numeric:tabular-nums}

/* ---------- счётчик найденного, пустое состояние, скелетон ---------- */
.found{margin:0 0 14px;font-size:15px;color:var(--ink-muted)}
.found b{font-family:var(--display);font-weight:800;font-size:19px;color:var(--ink);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-right:4px}
.more-wrap{flex-direction:column;gap:14px;margin-top:40px}
.more-count{font-size:14px;color:var(--ink-muted);font-variant-numeric:tabular-nums}
.more-bar{width:220px;height:6px;border-radius:3px;background:var(--hairline);overflow:hidden}
.more-bar i{display:block;height:100%;border-radius:3px;
  background:linear-gradient(90deg,var(--mint),var(--brand));
  width:calc(var(--shown,12) / var(--total,1124) * 100%);transition:width .6s var(--e-expo)}
.empty-act{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.empty-alt{margin-top:22px;font-size:15px;color:var(--ink-muted)}
.empty-alt a{color:var(--brand);font-weight:600;border-bottom:1.5px solid currentColor}
.sk{background:var(--surface);border:1px solid var(--hairline);border-radius:22px;overflow:hidden}
.sk .sk-ph{aspect-ratio:1/1;background:#F3F0FA}
.sk .sk-b{padding:14px 18px 20px;display:flex;flex-direction:column;gap:10px}
.sk .l{height:12px;border-radius:6px;background:#F3F0FA}
.sk .l.w40{width:40%}.sk .l.w90{width:90%}.sk .l.w60{width:60%}.sk .l.w30{width:30%;height:18px}
.sk-ph,.sk .l{background-image:linear-gradient(100deg,transparent 20%,rgba(107,63,228,.09) 42%,transparent 64%);
  background-size:280% 100%;background-repeat:no-repeat;animation:shimmer 1.25s linear infinite}
@keyframes shimmer{from{background-position:180% 0}to{background-position:-80% 0}}

/* ---------- карточка товара ---------- */
.pd-top{background:var(--t-lav);border-bottom:1px solid var(--hairline);padding:20px 0 22px}
.pd-top .crumbs{font-size:13.5px;color:var(--ink-muted);margin:0}
.pd{padding:clamp(28px,3vw,46px) 0 70px;gap:clamp(28px,3.4vw,56px)}
body.dark .pd-info h1{font-size:clamp(26px,3.4vw,50px);line-height:1;letter-spacing:-.04em;
  margin:8px 0 12px;text-wrap:balance;max-width:19ch}
.pd-info .cat{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brand)}
body.dark .pd-price .now{font-size:clamp(34px,3.6vw,54px);line-height:1;letter-spacing:-.04em}
.pd-price s{font-size:19px}
.pd-price .save{background:var(--bubble);color:#fff;border-radius:99px;padding:6px 12px;font-size:13.5px;font-weight:700}
body.dark .gal-main{border-radius:30px;box-shadow:0 30px 60px -40px rgba(43,26,74,.42);
  position:relative;overflow:hidden;padding:6%}
body.dark .gal-main::before{content:"";position:absolute;inset:8%;border-radius:24px;
  background:radial-gradient(60% 60% at 50% 45%,var(--t-lav) 0%,rgba(238,231,255,0) 72%);z-index:0}
body.dark .gal-main img{position:relative;z-index:1;transition:transform .6s var(--e-expo)}
@media (hover:hover){.gal-main:hover img{transform:scale(1.06)}}
.gal{grid-template-columns:88px minmax(0,1fr);gap:16px}
.thumbs{gap:12px}
body.dark .thumb{border-radius:18px;padding:10px;border:1.5px solid var(--hairline)}
body.dark .thumb[aria-pressed="true"]{border-color:var(--brand);border-width:2px;
  box-shadow:0 0 0 4px rgba(107,63,228,.14)}
@media (min-width:901px){.pd-info{position:sticky;top:calc(var(--head-h) + 20px);align-self:start}}

/* ---------- результат подбора подарка ---------- */
.gr-tag{display:inline-flex;align-items:center;gap:8px;background:var(--mint);color:var(--ink);
  border-radius:99px;padding:6px 16px;font-size:12.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;margin-bottom:16px}
.gr-h{font-family:var(--display);font-weight:800;color:var(--ink);letter-spacing:-.045em;
  font-size:clamp(28px,4.4vw,64px);line-height:.96;margin:0 0 12px;text-wrap:balance}
.gr-sub{font-size:clamp(16px,1.3vw,19px);color:var(--ink-muted);margin:0 0 24px;max-width:52ch}
.gr-sub b{color:var(--brand);font-weight:700}
.gr-chips{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:clamp(24px,3vw,40px)}
.gr-chip{display:inline-flex;align-items:center;gap:9px;height:40px;padding:0 16px;
  border-radius:99px;background:var(--brand);color:#fff;font-size:14.5px;font-weight:600}
.gr-act{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(28px,3vw,44px)}
.gift-res{animation:grIn .6s var(--e-expo) both}
@keyframes grIn{from{opacity:0;transform:translateY(24px)}}
.steps-lbl{display:flex;justify-content:space-between;font-size:12.5px;color:var(--ink-muted);margin:-14px 0 20px}
.gift-nav .btn[disabled]{opacity:.42;cursor:not-allowed;box-shadow:none;pointer-events:none}
.opt:nth-child(4n+1){background:var(--t-mint)}
.opt:nth-child(4n+2){background:var(--t-lemon)}
.opt:nth-child(4n+3){background:var(--t-rose)}
.opt:nth-child(4n+4){background:var(--t-lav)}

/* ---------- тосты ---------- */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--ink);color:#fff;border-radius:99px;padding:14px 24px;font-size:15px;
  z-index:150;opacity:0;transition:opacity .3s var(--e-quart),transform .35s var(--e-expo);
  display:flex;align-items:center;gap:14px;box-shadow:0 20px 40px -20px rgba(43,26,74,.6)}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.toast button{color:var(--lemon);font-weight:700}

/* ---------- кнопка «в корзину»: состояние ---------- */
.add.done{background:var(--mint);color:var(--ink)}
@keyframes badgePop{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
.badge.pop{animation:badgePop .3s var(--e-quart)}

@media (prefers-reduced-motion:reduce){
  .sk-ph,.sk .l{animation:none;background-image:none}
  .sel-list,.gift-res{animation:none}
}

/* ============================================================
   ПРАВКИ ПО ВТОРОМУ АУДИТУ: типографика, композиция, хореография
============================================================ */
/* main.css растягивал .hero-in и убивал центрирование первого экрана */
.hero-in{flex:none}
.hero{align-items:center}

/* дисплей вернулся на полный размер, колонка текста шире */
.hero h1.mega,.mega{font-size:clamp(42px,8.4vw,132px);line-height:.86;letter-spacing:-.055em}
@media (min-width:861px){.hero-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}}
@media (max-height:800px) and (min-width:861px){
  .hero h1.mega,.mega{font-size:clamp(32px,5.2vw,72px);line-height:.9}
}
@media (max-height:600px) and (min-width:861px){
  .hero h1.mega,.mega{font-size:clamp(26px,3.8vw,50px)}
}
@media (max-width:860px){
  .hero h1.mega,.mega{font-size:clamp(40px,11.2vw,54px);line-height:.9}
}

/* заголовки секций крупнее, одной секции — типографическое событие */
.sec-head h2,.dark .sec-head h2{font-size:clamp(30px,4.6vw,74px)}
.sec-hit .sec-head h2{font-size:clamp(46px,8.4vw,120px);line-height:.84;margin-left:-.05em}
.sec-hit .sec-num{display:none}

/* мелкий кегль-контрапункт */
.cap-s{font-size:11px;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-muted);display:block}

/* разрыв сетки: одна крупная плитка */
.heroes .hero-card:first-child{grid-column:span 2;grid-row:span 2}
.heroes .hero-card:first-child b{font-size:clamp(20px,2vw,30px)}
.heroes .hero-card:first-child .ill svg,.heroes .hero-card:first-child .ill img{width:52%}
@media (max-width:820px){.heroes .hero-card:first-child{grid-column:span 2;grid-row:span 1}}

/* медиа героя выходит за правый край — композиция перестаёт быть симметричной */
@media (min-width:1100px){
  .hero-media{margin-right:calc(var(--gutter) * -1);border-radius:32px 0 0 32px}
}

/* кино-лента: контент по центру закреплённого кадра */
.hscroll .sticky{justify-content:center;padding-top:var(--head-h)}
.hscroll .h-head{padding-bottom:clamp(18px,2.4vw,34px)}

/* хореография загрузки: не всё разом */
.hero-copy p{opacity:0;transform:translateY(16px);
  transition:opacity .7s var(--e-expo) .42s,transform .8s var(--e-expo) .42s}
.hero-cta .btn{opacity:0;transform:translateY(14px);transition:opacity .6s var(--e-expo),transform .7s var(--e-expo)}
.hero-cta .btn:nth-child(1){transition-delay:.52s}
.hero-cta .btn:nth-child(2){transition-delay:.6s}
.hero-media.clip{clip-path:inset(0 0 0 100%);transition:clip-path 1s var(--e-expo) .3s}
.hero-ages{opacity:0;transform:translateY(14px);transition:opacity .7s var(--e-expo) .72s,transform .8s var(--e-expo) .72s}
.loaded .hero-copy p,.loaded .hero-cta .btn,.loaded .hero-ages{opacity:1;transform:none}
.loaded .hero-media.clip{clip-path:inset(0 0 0 0)}
.nav a{opacity:0;transform:translateY(-6px);transition:opacity .5s var(--e-quart),transform .5s var(--e-expo),background-color .25s,color .25s}
.loaded .nav a{opacity:1;transform:none}
.nav a:nth-child(1){transition-delay:.66s}.nav a:nth-child(2){transition-delay:.71s}
.nav a:nth-child(3){transition-delay:.76s}.nav a:nth-child(4){transition-delay:.81s}
.nav a:nth-child(5){transition-delay:.86s}

/* запрещённые кривые: везде фирменные */
.nav a,.icon-btn,.fchip,.sw,.thumb,.link-more{transition-duration:.22s!important;
  transition-timing-function:var(--e-quart)!important}

/* подсказка о прокрутке в первом экране */
.scroll-cue{position:absolute;left:var(--gutter);bottom:22px;display:flex;align-items:center;gap:12px;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted);z-index:3;
  opacity:0;transition:opacity .8s var(--e-expo) 1s}
.loaded .scroll-cue{opacity:1}
.scroll-cue i{width:1px;height:44px;background:var(--brand);display:block;transform-origin:top;
  animation:cue 2.2s var(--e-quart) infinite}
@keyframes cue{0%{transform:scaleY(0)}45%{transform:scaleY(1)}100%{transform:scaleY(0);transform-origin:bottom}}

/* тинт четвёртой главы */
.sec.tint-rose{background:var(--t-rose)}

@media (max-width:640px){
  .sec.airy{padding-top:44px;padding-bottom:44px}
  .hscroll{padding:24px 0}
  .demo{gap:20px}
  .demo-stage{aspect-ratio:1/1}
  .demo-stage svg{width:74%}
  .promo{font-size:12.5px;padding:7px 12px}
  .hero-cta .btn{flex:1 1 0}
  .scroll-cue{display:none}
}
@media (prefers-reduced-motion:reduce){
  .hero-copy p,.hero-cta .btn,.hero-ages,.nav a{opacity:1;transform:none}
  .hero-media.clip{clip-path:none}
  .scroll-cue i{animation:none}
}
/* CLS: резервируем место под дисплейный заголовок и медиа до загрузки шрифта */
.hero h1.mega,.mega{min-height:calc(3 * .86em)}
.hero-media{contain:layout paint}
/* LCP: лид первого экрана не прячем прозрачностью — он и есть самый крупный элемент.
   Двигаем только transform, текст рисуется сразу. */
.hero-copy p{opacity:1;transform:translateY(14px);
  transition:transform .8s var(--e-expo) .28s}
.loaded .hero-copy p{transform:none}

/* ---------- низ карточки: цена не выдавливает кнопку за край ----------
   На узкой карточке «1590 ₴ 1290 ₴» шире, чем остаток строки, и flex
   выпихивал круглую кнопку на 30px за границу карточки. */
.card-f{flex-wrap:wrap;gap:8px}
.price{min-width:0;display:inline-flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.add{flex:none}
@media (max-width:640px){
  .price{flex-direction:column;align-items:flex-start;gap:0;line-height:1.14;font-size:17px}
  .price s{font-size:12.5px}
  .add,body.dark .add{width:42px;height:42px}
}