:root{
  --bg:#f4f4ef; --surf:#ffffff; --ink:#1d201c; --mut:#6B6F66;
  --acc:#4c5b33; --acc2:#8a6f3c;
  --acc-ink:#ffffff; --acc-text:#4C5B33;
  --disc-bg:#8a6f3c; --disc-ink:#ffffff; --mut2:#6B6F66;
  --hero-bg:#1d201c;
  --acc-raw:#4c5b33; --acc2-raw:#8a6f3c;
  --rad:2px; --max:1400px;
  --pad:clamp(20px,5vw,80px); --gap:32px;
  --hdr-h:96px;
  --dsp:'Spectral',Georgia, 'Times New Roman', serif; --bod:'Inter',system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

html[data-theme="dark"]{--acc-ink:#0b0d12; --acc-text:#BBC1B1; --disc-bg:#CABEA7; --disc-ink:#0b0d12; --mut2:#858983}
*,*::before,*::after{box-sizing:border-box}
/* overflow-x:clip не превращает body в скролл-контейнер, поэтому
   position:sticky у липкой шапки продолжает работать. */
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{background:var(--bg);color:var(--ink);font-family:var(--bod);font-size:17px;line-height:1.65;overflow-x:clip}
body.no-scroll{overflow:hidden}
h1,h2,h3,h4{font-family:var(--dsp);font-weight:600;line-height:1.08;letter-spacing:-.015em;margin:0}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
.skip{position:absolute;left:-9999px;top:0;background:var(--acc);color:var(--acc-ink);padding:10px 16px;z-index:999}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.sec{padding:clamp(26px,3.4vw,52px) 0 clamp(14px,1.8vw,28px)}
.sec+.sec{padding-top:clamp(18px,2.4vw,38px)}
.sec__t{font-size:clamp(27px,3.4vw,50px);margin-bottom:clamp(18px,2.4vw,38px);max-width:22ch;overflow-wrap:break-word;hyphens:auto}
.eyebrow{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--acc-text);font-weight:700;margin-bottom:14px}
.lead{font-size:clamp(16px,1.35vw,20px);color:var(--mut);max-width:64ch;margin-bottom:clamp(18px,2vw,32px)}
.sec--head{padding-bottom:0}
.sec--head .lead{margin-bottom:0}
.ticks{margin-top:22px;display:grid;gap:10px}
.ticks li{position:relative;padding-left:26px;color:var(--mut)}
.ticks li:before{content:'';position:absolute;left:0;top:.55em;width:11px;height:2px;background:var(--acc)}
.ticks li b{color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.chips li{font-size:12px;letter-spacing:.02em;padding:6px 11px;border:1px solid color-mix(in srgb, var(--ink) 18%, transparent);border-radius:calc(var(--rad) * .6);color:var(--mut)}
.price{font-family:var(--dsp);font-size:22px;font-weight:600;color:var(--ink);white-space:nowrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 26px;border:1px solid transparent;border-radius:var(--rad);font-weight:600;font-size:15px;white-space:nowrap;transition:transform .16s ease,background-color .16s ease,color .16s ease,border-color .16s ease}
.btn:hover{transform:translateY(-2px)}
.btn--solid{background:var(--acc);color:var(--acc-ink)}
.btn--ghost{border-color:color-mix(in srgb, var(--ink) 28%, transparent);color:var(--ink);background:transparent}
.btn--wide{width:100%}
.btn--sm{padding:10px 17px;font-size:14px}.hdr{position:sticky;top:0;z-index:600;transition:box-shadow .25s ease,background-color .25s ease}
.hdr__in{display:flex;align-items:center;gap:32px;min-height:74px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--dsp);font-weight:700;font-size:19px;letter-spacing:-.01em;white-space:nowrap}
/* Знак бренда - вектор (SVG), а не буква в плашке: у каждого шаблона свой
   знак, свой силуэт и свой символ (см. build\logo.ps1).
   Цвета знака берутся из темы, поэтому он идёт за акцентом, за переключателем
   тёмной темы и за выбором цвета в панели настроек:
   --mark-b - плашка (силуэт), --mark-i - символ. */
.brand__mark{display:block;width:36px;height:36px;flex:none;--mark-b:var(--acc);--mark-i:var(--acc-ink)}
.brand__mark .mk-b{fill:var(--mark-b)}
.brand__mark .mk-i{fill:var(--mark-i)}
.brand__mark .mk-s{stroke:var(--mark-i)}
/* Меню стоит по центру шапки: между логотипом и правым блоком (телефон,
   иконки, кнопка) остаётся одинаковый зазор с обеих сторон. Раньше меню
   стояло сразу за логотипом и прижималось к нему.
   Отступы auto у .nav делят свободное место шапки поровну: левое и правое
   получают ровно половину, и меню встаёт посередине между логотипом и
   правым блоком. У .hdr__side margin-left:auto быть не должно - иначе
   свободное место делится на три части (левый отступ меню, правый отступ
   меню и отступ правого блока) и меню уезжает от центра.
   На узких экранах меню уезжает в выдвижную панель, поэтому правило только
   для широких. */
.nav{min-width:0}
@media (min-width:901px){
  .nav{margin-left:auto;margin-right:auto}
}
.nav ul{display:flex;gap:22px;align-items:center;flex-wrap:nowrap}
/* Пункты меню не сжимаются: при нехватке места flex ужимал их, текст вылезал
   из рамки и наезжал на соседний пункт - подписи слипались в одну строку.
   Теперь место резервируется заранее, а если его не хватает, это видно
   проверке шапки и разбирается убиранием бренда и кнопки. */
.nav>ul>li{flex:0 0 auto}
.nav a,.nav__more{font-size:15px;color:var(--mut);padding:6px 0;position:relative;transition:color .18s ease;white-space:nowrap}
.nav a:after,.nav__more:after{content:'';position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--acc);transition:right .24s ease}
.nav a:hover,.nav__more:hover{color:var(--ink)}
.nav a:hover:after,.nav__more:hover:after{right:0}
/* Правый блок шапки (телефон, иконки, кнопка) - последний в ряду, поэтому
   он и так стоит у правого края. Авто-отступ у него забирал бы часть
   свободного места у меню и ломал центрирование. */
.hdr__side{display:flex;align-items:center;gap:32px;flex:0 0 auto}
.hdr__cta{margin-left:0}
.burger{display:none;width:42px;height:42px;border:1px solid color-mix(in srgb, var(--ink) 22%, transparent);border-radius:var(--rad);background:none;padding:0;position:relative;order:9}
.burger span{position:absolute;left:11px;right:11px;height:2px;background:var(--ink);transition:transform .25s ease,opacity .2s ease}
.burger span:nth-child(1){top:14px}.burger span:nth-child(2){top:20px}.burger span:nth-child(3){top:26px}
.hdr--solid{background:var(--surf)}
.hdr--line{background:color-mix(in srgb, var(--bg) 88%, transparent);backdrop-filter:blur(10px);border-bottom:1px solid color-mix(in srgb, var(--ink) 12%, transparent)}
/* center: logo по центру, навигация вторым рядом, служебные элементы - по краям */
.hdr--center{background:var(--bg);border-bottom:1px solid color-mix(in srgb, var(--ink) 10%, transparent)}
.hdr--center .hdr__in{
  display:grid;grid-template-columns:1fr auto 1fr;
  grid-template-areas:"left brand right" "nav nav nav";
  align-items:center;row-gap:8px;padding-top:12px;padding-bottom:12px;min-height:0}
.hdr--center .brand{grid-area:brand;justify-self:center;margin:0}
.hdr--center .nav{grid-area:nav;justify-self:center;width:100%;margin:0}
.hdr--center .nav ul{flex-wrap:wrap;justify-content:center}
.hdr--center .hdr__side{grid-area:right;justify-self:end}
/* Левый край шапки с логотипом по центру: телефон и мессенджеры. */
.hdr--center .hdr__left{grid-area:left;justify-self:start;display:flex;align-items:center;gap:14px;min-width:0}
.hdr--dark{background:var(--acc);color:var(--acc-ink)}
.hdr--dark .nav a,.hdr--dark .nav__more{color:color-mix(in srgb, var(--acc-ink) 75%, transparent)}
.hdr--dark .nav a:hover,.hdr--dark .nav__more:hover{color:var(--acc-ink)}
.hdr--dark .brand__mark{--mark-b:var(--acc-ink);--mark-i:var(--acc)}
.hdr--dark .burger span{background:var(--bg)}
.hdr--dark .btn--solid{background:var(--acc-ink);color:var(--acc)}
.hdr.is-stuck{box-shadow:0 8px 30px rgba(0,0,0,.10)}
@media (max-width:1460px){
  .nav a,.nav__more{font-size:13.5px}
  .hdr__cta{padding:10px 14px;font-size:13.5px}
  .brand{font-size:17px}
  .hdr__fav{font-size:13px}
}.hero{position:relative;overflow:hidden}
.hero__t{font-size:clamp(32px,5.4vw,74px);letter-spacing:-.025em;max-width:17ch}
.hero__s{margin-top:20px;font-size:clamp(16px,1.4vw,20px);color:var(--mut);max-width:56ch}
.hero__act{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero--split{padding:clamp(36px,4.6vw,74px) 0 clamp(18px,2.2vw,36px)}
.hero__split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,64px);align-items:center}
.hero__media img{border-radius:var(--rad);width:100%;aspect-ratio:4/3;object-fit:cover}
.hero--full{padding:clamp(72px,9.6vw,152px) 0 clamp(34px,4.4vw,70px);color:var(--ink);background-size:cover;background-position:center}
.hero--full .hero__veil{position:absolute;inset:0;background:linear-gradient(100deg, color-mix(in srgb, var(--bg) 88%, transparent) 0%, color-mix(in srgb, var(--bg) 55%, transparent) 48%, color-mix(in srgb, var(--bg) 25%, transparent) 100%)}
.hero--full .hero__body{position:relative}
.hero--full .hero__s{color:color-mix(in srgb, var(--ink) 78%, transparent)}
.hero--type{padding:clamp(46px,6.4vw,108px) 0 clamp(22px,2.8vw,44px)}
.hero--type .hero__row{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,60px);align-items:end;margin-top:26px}
.hero--type .hero__t{max-width:24ch}
.hero--grid{padding:clamp(26px,3.6vw,56px) 0 clamp(16px,2vw,32px)}
.hero__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:clamp(28px,4vw,56px)}
.hero__grid img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:calc(var(--rad) * .7)}
.hero__grid figure:nth-child(2) img{aspect-ratio:3/5;margin-top:22px}
.hero__grid figure:nth-child(4) img{aspect-ratio:3/5;margin-top:-22px}
/* Первый экран-слайдер (тип hero "slider"). Фото во всю ширину, подпись
   слева, стрелки по краям кадра, точки снизу. Механизм - общий
   [data-slider] из assets/core.js: стрелки, точки, автопрокрутка, свайп. */
.hero--slider{padding:0;color:#fff;background:var(--hero-bg)}
.hs{position:relative}
.hero--slider .hs__slide{position:relative;display:none;align-items:center;min-height:clamp(460px,74vh,720px)}
.hero--slider .hs__slide.is-active{display:flex}
.hs__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hs__veil{position:absolute;inset:0;background:linear-gradient(95deg,rgba(8,9,12,.88) 0%,rgba(8,9,12,.62) 40%,rgba(8,9,12,.16) 78%,rgba(8,9,12,.05) 100%)}
/* Только вертикальные отступы: горизонтальные задаёт .wrap (--pad).
   Если обнулить их здесь, текст вылезает за край экрана. */
.hs__body{position:relative;z-index:2;width:100%;padding-top:clamp(48px,7vw,104px);padding-bottom:clamp(48px,7vw,104px)}
.hs__kicker{display:table;padding:8px 16px;border-radius:999px;border:1px solid color-mix(in srgb,var(--acc) 70%,transparent);background:color-mix(in srgb,var(--acc) 16%,transparent);color:var(--acc);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.hs__t{font-size:clamp(30px,4.4vw,58px);line-height:1.04;letter-spacing:-.025em;margin-top:22px;max-width:19ch;color:#fff}
.hero--slider .hs__slide:first-child .hs__t{font-size:clamp(34px,5.4vw,74px);max-width:17ch}
.hs__s{margin-top:18px;font-size:clamp(15px,1.3vw,19px);color:rgba(255,255,255,.84);max-width:52ch}
.hs__act{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
/* Точки и стрелки - по краям КОНТЕЙНЕРА (.wrap), как остальной контент,
   а не по краям экрана. */
.hs__nav{position:absolute;left:0;right:0;bottom:26px;z-index:4}
.hs__navin{display:flex;align-items:center;justify-content:space-between;gap:18px}
.hero--slider .hs__dots{justify-content:flex-start;gap:10px;margin:0}
.hero--slider .hs__dots .dot{width:34px;height:4px;border-radius:2px;background:rgba(255,255,255,.45);opacity:1;transform:none}
.hero--slider .hs__dots .dot.is-active{width:52px;background:var(--acc);opacity:1;transform:none}
.hs__arrows{display:flex;gap:8px}
.hs__btn{width:46px;height:46px;flex:none;border-radius:50%;border:1px solid rgba(255,255,255,.45);background:rgba(10,11,14,.38);color:#fff;font-size:20px;line-height:1;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(8px);transition:background-color .18s ease,color .18s ease,border-color .18s ease}
.hs__btn:hover{background:var(--acc);color:var(--acc-ink);border-color:var(--acc)}
/* На фото кнопка-призрак: обычный цвет (почти чёрный) не читается. */
.hero--slider .btn--ghost{color:#fff;border-color:rgba(255,255,255,.5)}
.hero--slider .btn--ghost:hover{background:#fff;color:var(--ink)}
.hero--slider .btn--solid{color:var(--acc-ink)}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);border-top:1px solid color-mix(in srgb, var(--ink) 14%, transparent);padding-top:clamp(24px,3vw,40px)}
.stat__n{display:block;font-family:var(--dsp);font-size:clamp(32px,4.4vw,58px);font-weight:700;line-height:1;color:var(--ink)}
.stat__l{display:block;margin-top:10px;font-size:14px;color:var(--mut)}
.cards{display:grid;gap:var(--gap)}
.cards--2{grid-template-columns:repeat(2,1fr)}
.cards--3{grid-template-columns:repeat(3,1fr)}
.cards--4{grid-template-columns:repeat(4,1fr)}
.cards--1{grid-template-columns:1fr}
.card{background:var(--surf);padding:clamp(22px,2.4vw,32px);border-radius:var(--rad);border:1px solid color-mix(in srgb, var(--ink) 10%, transparent)}
.card__n{display:block;font-family:var(--dsp);font-size:13px;font-weight:700;color:var(--acc-text);letter-spacing:.1em;margin-bottom:14px}
.card__t{font-size:clamp(19px,1.6vw,23px);margin-bottom:10px}
.card__d{color:var(--mut);font-size:15px}
.card__foot{display:flex;align-items:center;justify-content:space-between;gap:14px;row-gap:12px;flex-wrap:wrap;margin-top:22px;padding-top:18px;border-top:1px solid color-mix(in srgb, var(--ink) 10%, transparent)}
.card__foot>.price,.card__foot>.btn{flex:0 0 auto}
/* В карточке акции значение оффера стоит над кнопкой: подвал выглядит
   одинаково при любой длине подписи («-20%», «бесплатно», «в подарок»).
   Иначе короткое значение встаёт в строку с кнопкой, а длинное - над ней. */
.card--promo .card__foot{flex-direction:column;align-items:flex-start;gap:14px}
/* Факты кейса в карточке раздела «Портфолио»: подпись слева, значение
   справа - так цифры читаются как таблица. */
.pf__facts{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:9px}
.pf__facts li{display:flex;align-items:baseline;justify-content:space-between;gap:14px;font-size:14px;color:var(--mut);padding-top:9px;border-top:1px solid color-mix(in srgb, var(--ink) 10%, transparent)}
.pf__facts b{color:var(--ink);font-weight:600}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,70px);align-items:stretch}
.split__media{min-width:0}
.split__media img{border-radius:var(--rad);width:100%;height:100%;aspect-ratio:5/4;object-fit:cover}
.split__body{align-self:center}
.split__body .btn{margin-top:28px}
.gallery .carousel{position:relative}
.carousel{overflow:hidden}
.carousel__track{display:flex;transition:transform .45s cubic-bezier(.22,.61,.36,1)}
.carousel__item{flex:0 0 auto;padding-right:14px}
.shot{display:block;width:100%;border:0;padding:0;background:none;cursor:zoom-in;border-radius:var(--rad);overflow:hidden}
.shot img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .5s ease}
.shot:hover img{transform:scale(1.04)}
.carousel__item figcaption{margin-top:12px;font-size:15px;font-weight:600}
.cbtn,.sbtn{position:absolute;width:46px;height:46px;border-radius:50%;border:1px solid color-mix(in srgb, var(--ink) 20%, transparent);background:var(--surf);color:var(--ink);z-index:5;display:grid;place-items:center;transition:background-color .18s ease,color .18s ease}
/* У карусели под фотографией есть подпись, поэтому стрелки стоят выше
   середины карточки. У галереи товара подписи нет - стрелки должны быть
   ровно посередине фотографии. */
.cbtn{top:38%}
.sbtn{top:50%;transform:translateY(-50%)}
.cbtn--prev,.sbtn--prev{left:6px}.cbtn--next,.sbtn--next{right:6px}
.cbtn:hover,.sbtn:hover{background:var(--acc);color:var(--acc-ink);border-color:var(--acc)}
.dots{display:flex;gap:8px;justify-content:center;margin-top:22px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);counter-reset:s}
.step{position:relative;padding-top:26px;border-top:2px solid color-mix(in srgb, var(--ink) 14%, transparent)}
.step__n{display:block;font-family:var(--dsp);font-size:40px;font-weight:700;color:var(--acc-text);line-height:1;margin-bottom:12px}
.step h3{font-size:19px;margin-bottom:8px}
.step p{color:var(--mut);font-size:15px}
.tabs__nav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.tab{border:1px solid color-mix(in srgb, var(--ink) 18%, transparent);background:transparent;border-radius:var(--rad);padding:10px 18px;font-size:15px;color:var(--mut);transition:all .18s ease}
.tab.is-active{background:var(--acc);color:var(--acc-ink);border-color:var(--acc)}
.tabs__panel{background:var(--surf);border-radius:var(--rad);padding:clamp(24px,3vw,42px);border:1px solid color-mix(in srgb, var(--ink) 10%, transparent)}
.tabs__panel h3{font-size:clamp(21px,2vw,28px);margin-bottom:12px}
.tabs__panel p{color:var(--mut);max-width:62ch}
.tabs__foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:26px;padding-top:20px;border-top:1px solid color-mix(in srgb, var(--ink) 10%, transparent)}
.formband{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,64px);align-items:start}
.formband__text .sec__t{margin-bottom:14px}
/* Картинка закрывает пустоту под заголовком в левой колонке формы. */
.formband__media{margin:26px 0 0;border-radius:var(--rad);overflow:hidden;aspect-ratio:5/4;background:color-mix(in srgb, var(--ink) 6%, transparent)}
.formband__media img{width:100%;height:100%;object-fit:cover;display:block}
.form{display:grid;gap:2px}
.form .field{margin-bottom:14px}
.form label,.field-label{display:block;font-size:13px;margin-bottom:7px;color:var(--mut);letter-spacing:.02em}
.form input[type=text],.form input[type=email],.form input[type=tel],.form input[type=date],.form textarea,.form select{
  width:100%;padding:13px 15px;border:1px solid color-mix(in srgb, var(--ink) 20%, transparent);background:transparent;border-radius:var(--rad);color:var(--ink)}
.form textarea{min-height:110px;resize:vertical}
.form input:focus,.form textarea:focus,.form select:focus{border-color:var(--acc);outline:none}
.form select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:40px;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.book{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(26px,4vw,64px);align-items:start}
.book__col{background:var(--surf);border:1px solid color-mix(in srgb, var(--ink) 10%, transparent);border-radius:var(--rad);padding:clamp(22px,2.6vw,36px)}
.book__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.book__side h2{font-size:clamp(20px,2vw,26px);margin-bottom:18px}
.book__steps{list-style:none;padding:0;margin:0;display:grid;gap:16px;counter-reset:bs}
.book__steps li{counter-increment:bs;padding-left:46px;position:relative}
.book__steps li:before{content:counter(bs);position:absolute;left:0;top:0;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:var(--acc);color:var(--acc-ink);font-weight:700;font-size:14px}
.book__steps b{display:block;font-size:16px;margin-bottom:4px}
.book__steps span{color:var(--mut);font-size:15px;line-height:1.6}
.book__ct{margin-top:24px;padding-top:18px;border-top:1px solid color-mix(in srgb, var(--ink) 12%, transparent);display:flex;flex-wrap:wrap;gap:14px;font-size:15px;color:var(--mut)}
.book__ct a{color:var(--acc-text)}
.quiz{max-width:880px;margin:0 auto}
.quiz__bar{display:flex;align-items:center;gap:14px;margin-bottom:24px;font-size:13px;color:var(--mut)}
.quiz__barline{flex:1;height:4px;border-radius:2px;background:color-mix(in srgb, var(--ink) 12%, transparent);overflow:hidden}
.quiz__barline i{display:block;height:100%;width:0;background:var(--acc);transition:width .25s ease}
.quiz__step{display:none}
.quiz__step[data-quiz-active]{display:block}
.quiz__q{font-family:var(--dsp);font-size:clamp(21px,2.2vw,28px);font-weight:600;margin-bottom:18px;line-height:1.25}
.quiz__opts{display:grid;gap:10px}
.quiz__opt{text-align:left;border:1px solid color-mix(in srgb, var(--ink) 18%, transparent);background:transparent;border-radius:var(--rad);padding:15px 18px;font-size:16px;color:var(--ink);cursor:pointer;transition:border-color .18s ease,background-color .18s ease,color .18s ease}
.quiz__opt:hover{border-color:var(--acc);background:color-mix(in srgb, var(--acc) 8%, transparent)}
.quiz__opt.is-on{border-color:var(--acc);background:var(--acc);color:var(--acc-ink)}
.quiz__nav{display:flex;gap:12px;margin-top:24px}
.quiz__nav[hidden],.quiz__nav button[hidden]{display:none}
.quiz__result{display:none;border:1px solid color-mix(in srgb, var(--ink) 12%, transparent);background:var(--surf);border-radius:var(--rad);padding:clamp(22px,2.8vw,38px)}
.quiz__result[data-quiz-on]{display:block}
.quiz__result-k{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--acc-text);font-weight:700;margin-bottom:10px}
.quiz__res-t{font-size:clamp(22px,2.4vw,30px);margin-bottom:10px}
.quiz__res-d{color:var(--mut);font-size:16px;line-height:1.65}
.quiz__res-p{display:flex;align-items:baseline;gap:12px;margin-top:18px;font-size:14px;color:var(--mut)}
.quiz__res-p b{font-family:var(--dsp);font-size:22px;color:var(--ink)}
.quiz__result-text{margin-top:18px;color:var(--mut);font-size:15px}
.quiz__result-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
/* Галочка согласия: флажок - отдельная колонка, текст - вторая. Поэтому
   перенос строки внутри текста не уводит вторую строку под флажок.
   Селектор - label.consent, а не .consent: правило .form label задаёт
   подписям полей display:block и перебивает grid по специфичности.
   Сам флажок красит глобальное правило input[type=checkbox] в base.css. */
label.consent{display:grid;grid-template-columns:auto 1fr;gap:0 10px;align-items:start;font-size:13px;color:var(--mut);margin:4px 0 20px;cursor:pointer}
label.consent .consent__box{width:20px;height:20px;margin:1px 0 0}
.consent__text{display:block;line-height:1.55}
/* Ссылки внутри текста согласия: «обработку персональных данных» и
   «политикой конфиденциальности» ведут на документы шаблона. */
.consent a{color:var(--acc-text);text-decoration:underline;text-underline-offset:2px}
.consent a:hover{text-decoration:none}
.consent__err{grid-column:2;display:none}
.consent.has-error .consent__err{display:block}
.consent.has-error .consent__box{border-color:#d94f4f}
.form--sticky .consent{margin:2px 0 14px;font-size:12px}
.legal{max-width:84ch}
.legal__tblwrap{overflow-x:auto;margin:0 0 16px}
.legal__tbl{width:100%;border-collapse:collapse;font-size:14px;min-width:520px}
.legal__tbl th,.legal__tbl td{border:1px solid color-mix(in srgb, var(--ink) 12%, transparent);padding:9px 12px;text-align:left;vertical-align:top;color:var(--mut)}
.legal__tbl th{background:var(--surf);color:var(--ink);font-weight:700}
.legal__op{border:1px solid color-mix(in srgb, var(--ink) 12%, transparent);background:var(--surf);border-radius:var(--rad);padding:clamp(20px,2.6vw,32px);margin-bottom:clamp(26px,3.4vw,44px)}
.legal__op h2{font-size:clamp(20px,2vw,26px);margin-bottom:14px}
.legal__op-list{list-style:none;padding:0;margin:0;display:grid;gap:6px;font-size:15px;color:var(--mut)}
.legal__op-list b{color:var(--ink)}
.legal__op-list a{color:var(--acc-text)}
.legal__note{margin-top:14px;font-size:13px;color:var(--mut)}
.legal__sec{margin-bottom:clamp(22px,2.8vw,34px)}
.legal__sec h2{font-size:clamp(19px,1.9vw,25px);margin-bottom:14px}
.legal__sec p{color:var(--mut);font-size:16px;line-height:1.7;margin-bottom:14px}
.legal__sec p:last-child{margin-bottom:0}
.legal__upd{font-size:13px;color:var(--mut);margin-top:16px}
.nf{max-width:64ch}
.nf__code{font-family:var(--dsp);font-size:clamp(72px,12vw,150px);font-weight:700;color:var(--acc);line-height:.9;margin-bottom:10px}
.nf__hint{color:var(--mut);margin-top:12px}
.nf__btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.form-note{font-size:13px;color:var(--mut);margin-top:12px}
.form-success{border:1px solid var(--acc);border-radius:var(--rad);padding:22px}
.form-success b{display:block;font-family:var(--dsp);font-size:19px;margin-bottom:8px}
.cta{display:flex;align-items:center;justify-content:space-between;gap:clamp(20px,3vw,48px);flex-wrap:wrap;background:var(--surf);border-radius:var(--rad);padding:clamp(26px,3.4vw,52px)}
.cta__t{font-size:clamp(23px,2.6vw,36px);margin-bottom:10px}
.cta p{color:var(--mut);max-width:52ch}
.cta__act{display:flex;gap:12px;flex-wrap:wrap}
.slider{position:relative}
.slider__box{position:relative}
.slide{display:none}
.slide.is-active{display:block}
.slide blockquote{font-family:var(--dsp);font-size:clamp(19px,2vw,28px);line-height:1.35;max-width:36ch;margin-bottom:22px}
.slide figcaption b{display:block;font-size:15px}
.slide figcaption span{font-size:14px;color:var(--mut)}
/* Стрелки слайдера стоят в одной строке с точками под слайдером.
   Раньше они висели на bottom:-64px (под блоком), но [data-slider] в
   assets/base.css перекрыт overflow:hidden - стрелки обрезались и
   не были видны ни в галерее товара, ни в отзывах. */
.slider__nav{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:20px}
.slider__nav .sbtn{position:static;width:40px;height:40px;flex:none;transform:none}
.slider__nav .dots{margin-top:0}
/* Блок «Наши партнёры»: логотипы клиентов и поставщиков в слайдере.
   Заголовок и пояснение - по центру, как и сама полоса знаков. */
.logos__head{text-align:center;margin-bottom:clamp(18px,2vw,32px)}
.logos__head .sec__t{max-width:none;margin-bottom:12px}
.logos__head .sec__t:before{margin-left:auto;margin-right:auto}
.logos__head .lead{max-width:none;margin-bottom:0}
/* Селектор с классом секции - иначе правило base.css
   html[data-theme="dark"] img (специфичность выше) снова красит подложку
   под прозрачным логотипом. */
/* Знак рисуется в натуральную величину: у каждого своя ширина (по длине
   названия), и в полосе получаются ровные промежутки. Три знака на экран -
   иначе они слипаются. */
.sec--logos .logos__item img{width:auto;max-width:min(300px,100%);height:auto;display:block;margin:0 auto;opacity:.85;transition:opacity .2s ease;background-color:transparent}
/* Настоящие логотипы производителей: под каждым знаком одна и та же белая
   плитка. Раньше подложка была только в тёмной теме и подгонялась под
   ширину знака, поэтому у вытянутого вордмарка и у квадратного знака она
   получалась разного размера, а у части картинок был ещё и свой белый фон
   (фото вывески, скан). Теперь плитка одинаковая у всех знаков, а сам знак
   вписывается в неё целиком.
   Поля вокруг знака - 22 px (на телефоне 20 px): знак не липнет к краям
   плитки. Плитка на столько же подросла, чтобы сам знак остался прежнего
   размера. */
/* Поля вокруг знака: 22 px по вертикали и 32 px по горизонтали (на телефоне
   20 и 30). Знак не липнет к краям плитки. Плитка на столько же подросла,
   чтобы сам знак остался прежнего размера. */
.sec--logos--brands .logos__item{display:flex;align-items:center;justify-content:center}
.sec--logos--brands .logos__item img{width:100%;max-width:250px;height:100px;padding:22px 32px;background-color:#fff;border-radius:10px;object-fit:contain;opacity:1}
@media (max-width:640px){.sec--logos--brands .logos__item img{height:90px;padding:20px 30px}}
.sec--logos .logos__item img:hover{opacity:1}
/* Стрелки и точки - строкой под знаками, как у слайдера отзывов. */
.logos__nav{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:30px}
.logos__nav .sbtn{position:static;width:40px;height:40px;flex:none;transform:none}
.logos__nav .dots{margin-top:0}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.tile{background:var(--surf);border-radius:var(--rad);overflow:hidden;border:1px solid color-mix(in srgb, var(--ink) 10%, transparent);display:flex;flex-direction:column}
.tile__media{display:block;overflow:hidden}
.tile__media img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .5s ease}
.tile__media:hover img{transform:scale(1.05)}
.tile__body{padding:clamp(18px,2vw,26px);display:flex;flex-direction:column;flex:1}
.tile__body h3{font-size:20px;margin-bottom:9px}
.tile__body p{color:var(--mut);font-size:15px;flex:1}
.tile__foot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:18px}
.filters{display:flex;flex-wrap:wrap;gap:9px}
.filter{border:1px solid color-mix(in srgb, var(--ink) 18%, transparent);background:transparent;border-radius:calc(var(--rad) * .7);padding:9px 17px;font-size:14px;color:var(--mut)}
.filter.is-active{background:var(--acc);color:var(--acc-ink);border-color:var(--acc)}
/* Пустое состояние (избранное, сравнение, поиск): текст по центру, с отступом
   от пунктирной рамки. Горизонтальный отступ обязателен: без него текст
   прижимался к краю рамки, и страница сравнения выглядела хуже избранного. */
.empty{text-align:center;color:var(--mut);padding:40px 24px}
.prod{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(26px,4vw,60px);align-items:start}
.prod__lead{font-size:clamp(16px,1.35vw,20px);color:var(--mut)}
/* Кнопки «Избранное» и «Сравнение» - справа над ценой, в колонке товара. */
.prod__tools{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin:0 0 20px}
.prod__price{margin:0 0 20px}
.prod__buy{display:flex;flex-direction:column;gap:18px}
.prod__act{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
/* Магазин: количество, «В корзину» и «Купить в 1 клик» - в одну строку.
   Подписи «Количество» в карточке товара нет: она занимала место в
   колонке товара, и кнопка «В корзину» уезжала на вторую строку. Шаг и
   так читается однозначно - число в поле между «−» и «+», у поля есть
   aria-label.
   Ряд собран компактным: шаг 40/46 px, у кнопок плотный отступ. В
   колонке товара (≈450 px на планшете) обычные кнопки не помещались -
   «Купить в 1 клик» уезжал под «В корзину».
   flex-wrap - страховка для телефона: там в одну строку не влезает
   физически, и «Купить в 1 клик» переносится под «В корзину». */
.prod__act--qty{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch;justify-content:flex-start}
.prod__act--qty .qty{flex:0 0 auto;gap:6px}
.prod__act--qty .btn{flex:0 0 auto;padding:12px 16px}
.prod__act--qty .qty__btn{width:38px;min-height:40px}
.prod__act--qty .qty .qty__in{width:44px;min-height:40px}
/* Ритм интервалов в правой колонке: одинаковые отступы между блоками. */
.prod__rate{margin-bottom:0}
/* Метаданные товара (артикул, наличие) от кнопок покупки отделяет
   увеличенный отступ - раньше строки стояли впритык. */
.pinfo{margin-top:24px;padding-top:18px;margin-bottom:30px}
.prod__notes{margin-top:28px;display:grid;gap:18px;border-top:1px solid color-mix(in srgb, var(--ink) 12%, transparent);padding-top:22px}
.prod__notes h4{font-size:16px;margin-bottom:6px}
.prod__notes p{color:var(--mut);font-size:15px}
/* Ссылка «Нашли дешевле?» под кнопками покупки. */
.prod__cheaper{margin-top:16px;font-size:15px}
.prod__cheaper a{color:var(--acc-text);border-bottom:1px solid color-mix(in srgb, var(--acc) 45%, transparent)}
.prod__cheaper a:hover{color:var(--ink);border-color:var(--mut)}
/* Товар в окне быстрого заказа. */
.qorder{display:grid;gap:3px;padding:14px 16px;margin-bottom:20px;border:1px solid color-mix(in srgb, var(--ink) 12%, transparent);border-radius:var(--rad);background:var(--surf)}
.qorder__l{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.qorder b{font-size:16px;line-height:1.35}
.qorder__p{color:var(--acc-text);font-weight:600;font-size:15px}
/* Сумма заказа в окне быстрого заказа: появляется, когда выбрано больше
   одной штуки (считает скрипт initOneclick). */
.qorder__sum{margin-top:6px;font-size:15px;font-weight:600;color:var(--ink)}
/* Выбор количества в окне быстрого заказа: тот же шаг, что на странице
   товара. Подпись «Количество» здесь остаётся: места в строке хватает,
   а без неё кнопки «−» и «+» непонятны. */
.form--oneclick .qty{margin-top:14px}
.form--oneclick .qty__label{display:block}
.modal--oneclick .modal__dialog{width:min(460px,100%)}
.modal--cheaper .modal__dialog{width:min(520px,100%)}
.form--oneclick .consent,.form--cheaper .consent{margin-top:14px}
.cont{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,60px);align-items:start}
.cont__row{margin-bottom:22px;padding-bottom:20px;border-bottom:1px solid color-mix(in srgb, var(--ink) 12%, transparent)}
.cont__row b{display:block;font-size:13px;color:var(--mut);letter-spacing:.04em;margin-bottom:5px}
.cont__row p{font-size:17px}
/* Карта на странице контактов: настоящая карта OpenStreetMap на тайлах.
   Тайлы подставляет JS (initMaps), метка - своя SVG-булавка. Пока тайлы
   грузятся, под ними видна сетка-заглушка. */
.cont__map{position:relative;margin-top:26px;aspect-ratio:2/1;height:auto;border-radius:var(--rad);overflow:hidden;background:
  repeating-linear-gradient(0deg, color-mix(in srgb, var(--ink) 8%, transparent) 0 1px, transparent 1px 44px),
  repeating-linear-gradient(90deg, color-mix(in srgb, var(--ink) 8%, transparent) 0 1px, transparent 1px 44px),
  color-mix(in srgb, var(--ink) 4%, transparent)}
.cont__map--none{display:grid;place-items:center;color:var(--mut);font-size:14px}
.cont__map-stage{position:absolute;inset:0;overflow:hidden;cursor:grab;touch-action:pan-y}
.cont__map-stage.is-drag{cursor:grabbing}
.cont__map-canvas{position:absolute;left:0;top:0;will-change:transform}
.cont__map-tile{position:absolute;display:block;width:256px;height:256px;max-width:none;user-select:none;-webkit-user-drag:none}
.cont__map-pin{position:absolute;left:0;top:0;width:30px;height:42px;z-index:3;pointer-events:none;transform:translate(-50%,-100%);filter:drop-shadow(0 6px 8px rgba(0,0,0,.42))}
.cont__map-pin svg{width:100%;height:100%;display:block}
.cont__map-pulse{position:absolute;left:0;top:0;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;z-index:2;pointer-events:none;background:color-mix(in srgb, var(--acc) 42%, transparent);animation:mapPulse 2.6s ease-out infinite}
@keyframes mapPulse{0%{transform:scale(.5);opacity:.8}70%{transform:scale(2.2);opacity:0}100%{opacity:0}}
.cont__map-off{display:none;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;max-width:76%;text-align:center;font-size:13px;line-height:1.4;color:var(--mut);pointer-events:none}
.cont__map.is-off .cont__map-off{display:block}
.cont__map-ctrls{position:absolute;right:12px;top:12px;z-index:4;display:flex;gap:6px}
.cont__map-ctrls[hidden]{display:none}
.cont__map-btn{width:34px;height:34px;display:grid;place-items:center;padding:0;border:1px solid color-mix(in srgb, var(--ink) 14%, transparent);border-radius:10px;background:color-mix(in srgb, var(--surf) 92%, transparent);backdrop-filter:blur(8px);color:var(--ink);cursor:pointer;box-shadow:0 6px 14px rgba(0,0,0,.16);transition:background-color .18s ease,transform .18s ease}
.cont__map-btn:hover{background:var(--surf);transform:translateY(-1px)}
.cont__map-btn .ic{width:16px;height:16px}
.cont__map-cap{position:absolute;left:12px;bottom:12px;z-index:4;max-width:calc(100% - 24px);padding:9px 13px;border-radius:calc(var(--rad) * .8);background:color-mix(in srgb, var(--surf) 94%, transparent);backdrop-filter:blur(8px);border:1px solid color-mix(in srgb, var(--ink) 10%, transparent);box-shadow:0 8px 18px rgba(0,0,0,.18);font-size:13px;line-height:1.35;color:var(--ink)}
.cont__map-cap b{display:block;font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);margin-bottom:3px}
.cont__map-cap span{display:block}
.cont__map-open{display:inline-block;margin-top:6px;font-size:13px;font-weight:600;color:var(--acc-text);text-decoration:none;border-bottom:1px solid color-mix(in srgb, var(--acc) 45%, transparent)}
.cont__map-open:hover{color:var(--ink)}
.cont__map-attrib{position:absolute;left:12px;top:12px;z-index:4;padding:2px 8px;border-radius:6px;background:color-mix(in srgb, var(--surf) 88%, transparent);color:var(--mut);font-size:11px;line-height:1.5;text-decoration:none}
.cont__map-attrib:hover{color:var(--ink)}
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.post{background:var(--surf);border-radius:var(--rad);overflow:hidden;border:1px solid color-mix(in srgb, var(--ink) 10%, transparent)}
.post__media img{width:100%;aspect-ratio:16/10;object-fit:cover}
.post__body{padding:clamp(18px,2vw,26px)}
/* Подпись материала: дата и автор обычным регистром. Заглавными буквами
   строка выглядела как служебная метка, а имя автора в верхнем регистре
   читалось как крик. */
.post__meta{font-size:12px;color:var(--mut);margin-bottom:8px;letter-spacing:.01em}
.post__body h3{font-size:20px;margin-bottom:9px}
.post__body p{color:var(--mut);font-size:15px}
.post__link{display:inline-block;margin-top:16px;color:var(--acc-text);font-weight:600;font-size:15px}
.acc{max-width:900px;border-top:1px solid color-mix(in srgb, var(--ink) 14%, transparent)}
.acc__item{border-bottom:1px solid color-mix(in srgb, var(--ink) 14%, transparent)}
.acc__btn{width:100%;text-align:left;background:none;border:0;padding:24px 0;font-family:var(--dsp);font-size:clamp(17px,1.7vw,22px);font-weight:600;display:flex;justify-content:space-between;gap:20px;align-items:center}
.acc-icon{font-size:24px;color:var(--acc-text);flex:0 0 auto}
.acc__panel p{color:var(--mut);padding-bottom:24px;max-width:72ch}
.ftr{border-top:1px solid color-mix(in srgb, var(--ink) 12%, transparent);margin-top:clamp(40px,6vw,90px)}
/* Правая колонка - по содержимому, но не шире 300px: иначе длинный адрес
   одной строкой доходил до правого края и его перекрывала плавающая кнопка. */
.ftr__in{display:grid;grid-template-columns:1.2fr 1fr 1fr auto;gap:clamp(20px,3vw,46px);padding:clamp(38px,4.6vw,70px) var(--pad)}
/* Четыре колонки подвала: бренд, две колонки навигации, контакты.
   Позиции заданы явно - иначе авто-раскладка сетки путает порядок. */
.ftr__brand{grid-column:1;grid-row:1}
.ftr__col--nav{grid-column:2 / 4;grid-row:1}
.ftr__col--ct{grid-column:4;grid-row:1}
/* Навигация - в два столбика: список пунктов делится пополам, заголовок
   остаётся над обоими столбиками. */
.ftr__navs{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(20px,3vw,46px);align-content:start}
.ftr__tag{color:var(--mut);font-size:15px;margin-top:16px;max-width:34ch}
.ftr__col h4{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);margin-bottom:16px;font-family:var(--bod);font-weight:700}
.ftr__col li{font-size:15px;color:var(--mut);margin-bottom:9px}
.ftr__col a:hover{color:var(--ink)}
/* Контакты в подвале: маленькая иконка слева от строки - адрес, телефон,
   почта, режим работы. */
.ftr__ct{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.ftr__ct li{display:flex;gap:12px;align-items:flex-start;margin-bottom:0;line-height:1.45}
/* Тексты контактов не должны рвать слова. Ширину не ограничиваем: колонка
   подвала идёт по содержимому (auto), и любое ограничение текста раздувало
   max-content трека - справа появлялась пустая полоса. */
.ftr__ct li>span:not(.ftr__ct-ic),.ftr__ct li>a{min-width:0;overflow-wrap:break-word}
/* Отступ справа: без него длинный адрес доходил до самого края, где его
   перекрывала плавающая кнопка корзины. */
.ftr__col--ct{padding-right:24px}
.ftr__col{min-width:0}
.ftr__ct-ic{flex:none;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:color-mix(in srgb, var(--acc) 14%, transparent);color:var(--acc-text)}
.ftr__ct-ic .ic{width:15px;height:15px}
.ftr__soc-t{margin-top:28px}
.ftr__bot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:20px var(--pad);border-top:1px solid color-mix(in srgb, var(--ink) 10%, transparent);font-size:13px;color:var(--mut)}
.ftr--b{background:var(--surf)}
.ftr--c{background:var(--acc);color:var(--acc-ink)}
.ftr--c .ftr__col li,.ftr--c .ftr__tag,.ftr--c .ftr__col h4,.ftr--c .ftr__bot{color:color-mix(in srgb, var(--acc-ink) 82%, transparent)}
.ftr--c .ftr__bot{border-top-color:color-mix(in srgb, var(--acc-ink) 22%, transparent)}
.ftr--c .ftr__ct-ic{background:color-mix(in srgb, var(--acc-ink) 18%, transparent);color:var(--acc-ink)}
.ftr--c .ftr__col a:hover{color:var(--acc-ink)}
/* Знак бренда в подвале: на акцентном фоне плашка становится светлой,
   символ - акцентным, иначе знак тонул бы в фоне. */
.ftr--c .ftr__brand .brand__mark{--mark-b:var(--acc-ink);--mark-i:var(--acc)}
.ftr--d .ftr__in{grid-template-columns:1fr 1.15fr 1.15fr auto}
/* Кнопка корзины - круглая иконка со счётчиком. Текстовая подпись занимала
   место в углу экрана и выглядела как рекламный баннер.
   Позиция - правый край экрана, но выше середины (38 %): ровно по центру
   кнопка попадала на полосу контента и цепляла взгляд. */
.cart-btn{position:fixed;right:20px;top:38%;transform:translateY(-50%);z-index:700;width:58px;height:58px;display:grid;place-items:center;background:var(--acc);color:var(--acc-ink);border:0;border-radius:50%;padding:0;box-shadow:0 10px 30px rgba(0,0,0,.18);transition:transform .18s ease}
.cart-btn:hover{transform:translateY(calc(-50% - 2px))}
/* Пока открыта липкая форма, кнопка корзины убирается: панель занимает
   правый нижний угол и на невысоких экранах перекрывала бы кнопку. */
body.stickyform-open .cart-btn{opacity:0;visibility:hidden}
.cart-btn .ic{width:26px;height:26px}
.cart-btn b{position:absolute;top:-3px;right:-3px;background:var(--acc-ink);color:var(--acc);border-radius:50%;min-width:24px;height:24px;display:grid;place-items:center;font-size:12px;padding:0 6px;box-shadow:0 2px 10px rgba(0,0,0,.22)}
.totop{position:fixed;left:20px;bottom:20px;z-index:700;width:44px;height:44px;border-radius:50%;border:1px solid color-mix(in srgb, var(--ink) 22%, transparent);background:var(--surf);color:var(--ink);opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease}
.totop.is-visible{opacity:1;visibility:visible}
.modal__t{font-size:clamp(21px,2.2vw,28px);margin-bottom:10px}
.modal__s{color:var(--mut);margin-bottom:22px}.card{border-radius:0}
.split__media img{border-radius:0}
.hero__media img{border-radius:0}
.tile{border-radius:0}@media (max-width:1100px){
  .cards--4{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr);gap:26px}
  .steps{grid-template-columns:repeat(2,1fr)}
  .grid{grid-template-columns:repeat(2,1fr)}
  .posts{grid-template-columns:repeat(2,1fr)}
  .ftr__in{grid-template-columns:1fr 1fr}
  .ftr--d .ftr__in{grid-template-columns:1fr 1fr}
  /* Планшет: колонка товара уже, и ряд покупки в одну строку в неё не
     помещался. Отдаём колонке с ценой, количеством и кнопками больше
     места - фотография остаётся крупной, а ряд остаётся в одну строку.
     Шаг количества в окне «Купить в 1 клик» здесь тоже компактнее. */
  .prod{grid-template-columns:.85fr 1.15fr}
  .qty__btn{width:40px;min-height:40px}
  .qty .qty__in{width:48px;min-height:40px}
  /* На планшете колонки подвала возвращаются в поток: явные строки и колонки
     сетки оставили бы пустое место. */
  .ftr__brand,.ftr__col--nav,.ftr__col--ct{grid-column:auto;grid-row:auto}
  /* Контакты с соцсетями - на всю ширину, но сами контакты в две колонки:
     иначе справа оставалось пустое поле. */
  .ftr__col--ct{grid-column:1 / -1}
  .ftr__ct{grid-template-columns:1fr 1fr;column-gap:26px}
}
@media (max-width:900px){
  .burger{display:block}
  .hdr__cta{display:none}
  .book{grid-template-columns:1fr}
  .book__row{grid-template-columns:1fr}
  /* На мобильном шапка узкая: широкие отступы (32 px) выталкивали кнопку
     меню за край экрана, поэтому здесь отступы компактные. */
  .hdr__in{gap:12px}
  .hdr__side{gap:12px}
  .hdr__side{margin-left:auto}
  .hdr--center .hdr__in{grid-template-areas:"left brand burger"}
  /* На мобильном телефон и мессенджеры живут в панели меню - в шапке они бы
     отжали бренд, а левый край и так занят кнопками магазина. */
  .hdr--center .hdr__left{display:none}
  /* backdrop-filter на шапке создаёт containing block для position:fixed -
     из-за этого мобильная панель меню (position:fixed) зажималась в
     пределах шапки вместо экрана: в ней появлялись полосы прокрутки и
     пункты меню не помещались. На мобильном шапка непрозрачная, размытие
     не нужно - убираем его только на узких экранах. */
  .hdr--line{background:var(--bg);backdrop-filter:none}
  .hdr--center .burger{grid-area:burger;justify-self:end}
  .hdr--center .hdr__side{grid-area:left;justify-self:start;margin-left:0}
  /* Мобильная панель меню. Пункты раньше прижимались к верхнему краю: у .nav
     не было display:flex, поэтому justify-content:center не работал, а отступа
     сверху не было вовсе. Теперь панель - колонка с полем под крестик,
     прокручивается, контакты и мессенджеры прижаты к низу. */
  /* overflow-x:hidden обязателен: закрытое подменю выезжает за правый край
     панели (translateX(102%)), а overflow-y:auto превращает overflow-x:visible
     в auto - в панели появлялась горизонтальная полоса прокрутки.
     clip обрезает выехавшее подменю и не создаёт скролл-контейнер вовсе. */
  .nav{position:fixed;inset:0 0 0 auto;width:min(320px,86vw);background:var(--surf);display:flex;flex-direction:column;justify-content:flex-start;padding:78px 28px 28px;overflow-y:auto;overflow-x:hidden;overflow-x:clip;overscroll-behavior:contain;transform:translateX(102%);transition:transform .32s cubic-bezier(.22,.61,.36,1);z-index:700;box-shadow:-20px 0 50px rgba(0,0,0,.2)}
  .nav.is-open{transform:none}
  /* Пункты растягиваем на всю ширину панели - только так все стрелки можно
     прижать к общему правому краю. */
  .nav>ul{flex-direction:column;align-items:stretch;gap:18px;width:100%}
  .nav a,.nav__more{font-size:19px;color:var(--ink)}
  .hdr--center .nav{width:min(320px,86vw);order:0}
  .hdr--center .nav.is-open{transform:none}
  .hdr--center .nav>ul{flex-wrap:nowrap;justify-content:flex-start}
  /* Классы тесной шапки (JS ставит их на десктопе) не должны ужимать
     мобильную панель. */
  .hdr.is-tight .nav>ul,.hdr.is-nofav .nav>ul,.hdr.is-mini .nav>ul{gap:18px;flex-wrap:nowrap}
  .hdr.is-tight .nav a,.hdr.is-tight .nav__more,.hdr.is-nofav .nav a,.hdr.is-nofav .nav__more,.hdr.is-mini .nav a,.hdr.is-mini .nav__more{font-size:19px}
  /* Крестик закрытия панели. z-index выше, чем у выпадающего подменю (40),
     иначе открытое подменю перекрывало крестик. */
  .nav__x{position:absolute;top:18px;right:18px;width:42px;height:42px;display:grid;place-items:center;border:1px solid color-mix(in srgb, var(--ink) 18%, transparent);border-radius:50%;background:none;color:var(--ink);cursor:pointer;z-index:70}
  .nav__x .ic{width:17px;height:17px}
  /* Контакты и мессенджеры под пунктами меню */
  .nav__contacts{margin-top:auto;padding-top:24px;display:flex;flex-direction:column;gap:9px;border-top:1px solid color-mix(in srgb, var(--ink) 12%, transparent)}
  .nav__ct-t{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);font-weight:700}
  .nav .nav__ct{display:flex;align-items:flex-start;gap:10px;font-size:15px;color:var(--ink);text-decoration:none;line-height:1.45}
  .nav .nav__ct .ic{width:17px;height:17px;margin-top:3px;color:var(--acc-text)}
  .nav .nav__ct--phone{font-size:18px;font-weight:700}
  .nav .nav__ct--mut{color:var(--mut)}
  .nav .nav__ct:after,.nav .nav__ms:after{content:none}
  .nav__mss{display:flex;gap:10px;margin-top:12px}
  .nav__ms{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:color-mix(in srgb, currentColor 10%, transparent);transition:transform .18s ease,background-color .18s ease}
  .nav__ms:hover{transform:translateY(-2px);background:color-mix(in srgb, currentColor 16%, transparent)}
  .nav__ms .ic{width:22px;height:22px}
  /* Заказ звонка в мобильной панели: в шапке на узком экране кнопки нет. */
  .nav__cta{margin-top:8px}
  .hero__split,.hero--type .hero__row,.split,.formband,.prod,.cont{grid-template-columns:1fr}
  /* На планшете товар в одну колонку - места хватает, и ряд покупки
     снова в одну строку. Шаг количества в окне «Купить в 1 клик» здесь
     возвращает обычный размер. */
  .qty__btn{width:46px;min-height:46px}
  .qty .qty__in{width:58px;min-height:46px}
  /* Карта на мобильном идёт во всю ширину колонки - делаем её выше,
     в пропорции 4:3 на узком экране карта читается лучше, чем в 2:1. */
  .cont__map{aspect-ratio:4/3}
  .split__media img{height:auto}
  .hero__grid{grid-template-columns:repeat(2,1fr)}
  .hero__grid figure:nth-child(2) img,.hero__grid figure:nth-child(4) img{margin-top:0}
  .cta{flex-direction:column;align-items:flex-start}
  /* Плавающая кнопка корзины не должна перекрывать открытую панель меню:
     панель лежит в слое шапки (z-index 600), а кнопка - в корневом слое
     (700), поэтому без этого правила она висела поверх меню. */
  body.nav-open .cart-btn{display:none}
  /* Строка пункта с подменю: подпись слева, стрелка прижата к правому краю.
     Подменю выезжает справа, поэтому стрелка направлена вправо. */
  .nav__item{position:static;width:100%}
  .nav__item>a{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%}
  .nav__item>a .nav__caret{margin-left:auto;flex:none;transform:rotate(-45deg)}
  .nav__more{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%}
  .nav__more .nav__caret{margin-left:auto;flex:none;transform:rotate(-45deg)}
  /* Открытое подменю закрывает родительский пункт, поэтому стрелка всегда
     смотрит вправо и не прыгает вверх. */
  .nav__item.is-open .nav__caret{transform:rotate(-45deg)}
  .nav__sub{position:absolute;inset:0;display:flex;flex-direction:column;gap:2px;overflow-y:auto;overflow-x:hidden;padding:26px 28px;background:var(--surf);box-shadow:none;border:0;min-width:0;transform:translateX(102%);visibility:hidden;transition:transform .32s cubic-bezier(.22,.61,.36,1),visibility .32s ease}
  .nav__item.is-open>.nav__sub{transform:none;visibility:visible}
  .nav__sub a{font-size:17px;padding:11px 0;color:var(--ink);white-space:normal}
  .nav__back{display:flex;align-items:center;gap:8px;margin-bottom:20px;padding:10px 0;border:0;background:none;color:var(--mut);font-size:15px;cursor:pointer}
}
@media (max-width:640px){
  body{font-size:16px}
  .cards--2,.cards--3,.cards--4,.grid,.posts,.steps,.stats{grid-template-columns:1fr}
  /* На телефоне шаг количества в окне «Купить в 1 клик» ещё компактнее.
     В карточке товара ряд остаётся компактным: «количество + В корзину»
     помещаются, «Купить в 1 клик» переходит под них - в одну строку
     физически не влезает. */
  .qty__btn{width:38px;min-height:38px}
  .qty .qty__in{width:46px;min-height:38px}
  .ftr__in,.ftr--d .ftr__in{grid-template-columns:1fr}
  .ftr__col--ct{grid-column:auto}
  .ftr__ct{grid-template-columns:1fr}
  .hero--grid{grid-template-columns:1fr 1fr}
  .ftr__bot{flex-direction:column;gap:8px}
  /* Слайдер на первом экране: точки и стрелки стоят в строке под контентом,
     по краям контейнера - по центру кадра они наезжали бы на заголовок. */
  .hero--slider .hs__slide{min-height:clamp(420px,66vh,560px)}
  /* На узком экране текст идёт во всю ширину - затемняем кадр равномерно,
     иначе белая строка ложится на светлую жёлтую фотографию. */
  .hs__veil{background:linear-gradient(180deg,rgba(8,9,12,.84) 0%,rgba(8,9,12,.74) 58%,rgba(8,9,12,.58) 100%)}
  .hs__body{padding-top:clamp(36px,8vw,56px);padding-bottom:72px}
  .hs__nav{bottom:18px}
  .hs__btn{width:40px;height:40px;font-size:18px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}