@charset "UTF-8";

/* ============================================================
   ШРИФТЫ — локальные. Раньше подключались с Google Fonts:
   это два лишних TLS-соединения на критическом пути (FCP/LCP)
   и поздняя подмена шрифта, из-за которой текст прыгал (CLS).
   ============================================================ */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/assets/fonts/inter-400-cyrillic.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/assets/fonts/inter-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('/assets/fonts/inter-500-cyrillic.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('/assets/fonts/inter-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/assets/fonts/inter-600-cyrillic.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/assets/fonts/inter-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/assets/fonts/inter-700-cyrillic.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/assets/fonts/inter-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Lora';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/assets/fonts/lora-600-cyrillic.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:'Lora';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/assets/fonts/lora-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Lora';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/assets/fonts/lora-700-cyrillic.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:'Lora';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/assets/fonts/lora-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Метрические фолбэки: пока грузится веб-шрифт, страница рисуется системным,
   но с подогнанными метриками — высота строк совпадает, и при подмене шрифта
   текст не сдвигается. Именно это убирает CLS, одного font-display мало. */
@font-face{font-family:"Inter Fallback";src:local("Arial");ascent-override:90.2%;descent-override:22.48%;line-gap-override:0%;size-adjust:107.4%}
@font-face{font-family:"Lora Fallback";src:local("Georgia");ascent-override:101.5%;descent-override:27.7%;line-gap-override:0%;size-adjust:99%}

/* ============================================================
   ЧЕЛНЫ-МОДУЛЬ — дизайн-система
   Фирменные цвета: #263141 #3a4885 #b3a17a #f3d080 #282828 #ffffff
   Заголовки: Book Antiqua (брендовый) -> Lora (Google Fonts, кириллица)
   Текст: Inter (Google Fonts)
   Правила: тап-таргеты >= 48px, флюидный ритм от 320px, AA-контраст
   ============================================================ */

/* ---------- 1. ТОКЕНЫ ---------- */
:root{
  /* Бренд */
  --ink:#263141;            /* основной тёмно-синий */
  --ink-2:#1b2432;          /* глубже — футер, оверлеи */
  --blue:#3a4885;           /* акцентный синий — ссылки */
  --blue-d:#2e3a6d;
  --gold:#b3a17a;           /* золото — CTA */
  --gold-l:#f3d080;         /* светлое золото — hover, звёзды */
  --gold-d:#9c8a63;
  --coal:#282828;

  /* Нейтрали */
  --text:#282828;
  --text-2:#5d6572;         /* вторичный текст, AA на белом */
  --line:#e3e6ea;
  --line-2:#cfd4db;
  --bg:#ffffff;
  --soft:#f6f7f9;           /* мягкая подложка секции */
  --soft-2:#eef0f4;
  --ok:#2f7a52;
  --ok-bg:#e6f2ec;
  --warn:#b3730f;
  --err:#c0392b;
  --err-bg:#fdecea;

  /* Радиусы / тени */
  --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:22px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(38,49,65,.06), 0 2px 8px rgba(38,49,65,.05);
  --sh-2:0 4px 14px rgba(38,49,65,.09), 0 12px 32px rgba(38,49,65,.07);
  --sh-3:0 18px 50px rgba(38,49,65,.16);

  /* Сетка */
  --maxw:1200px;
  --gut:clamp(16px, 4vw, 24px);         /* боковой отступ контейнера */
  --gap:clamp(12px, 2.2vw, 20px);       /* зазор в сетках */
  --sec-y:clamp(40px, 6vw, 72px);       /* вертикальный ритм секции */

  /* Типографика — флюидная от 320px до 1200px */
  --f-head:'Book Antiqua','Palatino Linotype',Palatino,'Lora','Lora Fallback',Georgia,serif;
  --f-body:'Inter','Inter Fallback',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;

  --t-base:clamp(15px, 0.92rem + 0.18vw, 17px);
  --t-sm:clamp(13px, 0.8rem + 0.1vw, 14.5px);
  --t-xs:clamp(12px, 0.74rem + 0.06vw, 13px);
  --t-lead:clamp(16px, 0.95rem + 0.35vw, 19px);
  --t-h1:clamp(26px, 1.42rem + 2.05vw, 44px);
  --t-h2:clamp(21px, 1.16rem + 1.35vw, 33px);
  --t-h3:clamp(17px, 1rem + 0.5vw, 21px);
  --t-h4:clamp(15.5px, 0.93rem + 0.28vw, 17.5px);
  --t-num:clamp(22px, 1.2rem + 1.5vw, 34px);   /* крупные цифры-факты */
  --t-price:clamp(19px, 1.05rem + 0.75vw, 25px);

  /* Тап-таргет: Google/Lighthouse требует >= 48x48 CSS px */
  --tap:48px;

  --ease:cubic-bezier(.32,.72,.28,1);
  --dur:.22s;
}

/* ---------- 2. СБРОС / БАЗА ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:96px;
  /* Полоса прокрутки резервирует место всегда. Иначе при открытии модалки
     body получает overflow:hidden, скроллбар исчезает и страницу дёргает вбок. */
  scrollbar-gutter:stable;
}
body{
  font-family:var(--f-body);
  font-size:var(--t-base);
  line-height:1.6;
  color:var(--text);
  background:var(--bg);
  min-width:320px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3,h4,h5{font-family:var(--f-head);font-weight:700;line-height:1.18;color:var(--ink);text-wrap:balance}
h1{font-size:var(--t-h1);letter-spacing:-.01em}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3)}
h4{font-size:var(--t-h4)}
p{text-wrap:pretty}
a{color:inherit;text-decoration:none}
img,picture,svg,video{display:block;max-width:100%}
img{height:auto}
ul,ol{list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:none;cursor:pointer}
table{border-collapse:collapse;width:100%}
strong,b{font-weight:700}
:target{scroll-margin-top:96px}

/* Фокус — видимый только с клавиатуры */
:focus{outline:none}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:4px}

/* Скрытие с сохранением для скринридеров */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ---------- 3. РАСКЛАДКА ---------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);width:100%}
.sec{padding-block:var(--sec-y)}
.sec--soft{background:var(--soft)}
.sec--tight{padding-block:calc(var(--sec-y) * .6)}
.sec-head{margin-bottom:clamp(20px,3vw,34px)}
.sec-head--center{text-align:center;max-width:760px;margin-inline:auto}
.sec-t{font-size:var(--t-h2);margin-bottom:8px}
.sec-s{color:var(--text-2);font-size:var(--t-sm)}
.grid{display:grid;gap:var(--gap)}
.muted{color:var(--text-2)}
.nowrap{white-space:nowrap}

/* Автоподстраивающиеся сетки — без медиазапросов, работают от 320px */
/* g-2 — раскладка «текст + медиа», ей растягивание нужно, поэтому auto-fit.
   g-3 / g-4 — сетки карточек: auto-FILL, а не auto-fit. Разница видна, когда
   карточек меньше, чем колонок: auto-fit схлопывает пустые треки и раздувает
   карточки на всю ширину, auto-fill оставляет их нормального размера. */
.g-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.g-3{grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr))}
.g-4{grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr))}

/* ---------- 4. КНОПКИ (тап-таргет 48px) ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--tap);
  padding:12px clamp(16px,2.4vw,26px);
  border-radius:var(--r);
  font-weight:600;font-size:var(--t-sm);
  text-align:center;line-height:1.25;
  cursor:pointer;
  border:2px solid transparent;
  white-space:nowrap;          /* подпись кнопки всегда в одну строку */
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),
             border-color var(--dur) var(--ease),transform .12s var(--ease),box-shadow var(--dur) var(--ease);
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
/* Кнопка на всю ширину (в формах) может переносить длинную подпись — там это нормально */
.btn--block{white-space:normal}
/* Страховка: инлайновый <svg> без width/height раздувается до дефолтных 300×150px
   и разносит кнопку. Фиксируем размер иконки для любой кнопки сайта. */
.btn svg{width:20px;height:20px;flex:none}
.btn:active{transform:translateY(1px)}
.btn[disabled],.btn[aria-disabled=true]{opacity:.55;cursor:not-allowed;pointer-events:none}

.btn--primary{background:var(--gold);color:var(--ink-2);border-color:var(--gold)}
.btn--primary:hover{background:var(--gold-l);border-color:var(--gold-l);box-shadow:var(--sh-2)}

.btn--dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn--dark:hover{background:var(--blue);border-color:var(--blue);box-shadow:var(--sh-2)}

.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn--ghost:hover{border-color:var(--ink);background:var(--soft)}

.btn--ghost-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.btn--ghost-light:hover{background:rgba(255,255,255,.12);border-color:#fff}

.btn--link{min-height:auto;padding:6px 0;color:var(--blue);font-weight:600;border:0}
.btn--link:hover{color:var(--blue-d);text-decoration:underline}

.btn--lg{min-height:54px;font-size:var(--t-base);padding-inline:clamp(20px,3vw,32px)}
.btn--block{width:100%}
.btn--icon{width:var(--tap);min-width:var(--tap);padding:0}

/* Спиннер в кнопке при отправке */
.btn.is-loading{position:relative;color:transparent!important;pointer-events:none}
.btn.is-loading::after{
  content:"";position:absolute;inset:0;margin:auto;width:20px;height:20px;
  border:2.5px solid currentColor;border-top-color:transparent;border-radius:50%;
  color:var(--ink-2);animation:spin .7s linear infinite;
}
.btn--dark.is-loading::after,.btn--ghost-light.is-loading::after{color:#fff}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- 5. ШАПКА ---------- */
.topbar{background:var(--ink);color:#c3cad6;font-size:var(--t-xs);border-bottom:1px solid rgba(255,255,255,.08)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:8px 16px;min-height:40px;flex-wrap:wrap;padding-block:4px}
.topbar a{padding:6px 0;display:inline-flex;align-items:center;min-height:34px}
.topbar a:hover{color:var(--gold-l)}
.topbar-nav{display:flex;gap:clamp(8px,1.6vw,20px);flex-wrap:wrap;margin-left:auto}
.geo-btn{display:inline-flex;align-items:center;gap:6px;color:#fff;font-weight:600;min-height:34px;cursor:pointer}
.geo-btn:hover{color:var(--gold-l)}
.geo-btn svg{width:14px;height:14px;flex:none}

.hdr{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line);transition:box-shadow var(--dur)}
.hdr.is-stuck{box-shadow:var(--sh-1)}
.hdr .wrap{display:flex;align-items:center;gap:clamp(12px,2vw,28px);min-height:72px}
.logo{display:flex;align-items:center;flex:none}
.logo img{width:clamp(132px,15vw,176px);height:auto;aspect-ratio:1000/450}
.nav{display:flex;gap:clamp(12px,1.6vw,22px);margin-left:auto}
.nav a{font-size:var(--t-sm);font-weight:500;padding:8px 2px;min-height:40px;display:inline-flex;align-items:center;position:relative;color:var(--ink);white-space:nowrap}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:2px;height:2px;background:var(--gold);transition:right var(--dur) var(--ease)}
.nav a:hover::after,.nav a[aria-current=page]::after{right:0}
.hdr-r{display:flex;align-items:center;gap:clamp(8px,1.4vw,16px);margin-left:auto}
/* Телефон и почта — одной колонкой: почта строкой под телефоном.
   Так контакты не отъедают у шапки лишнюю ширину (раньше было два блока в ряд). */
.hdr-contacts{display:flex;flex-direction:column;align-items:flex-start;gap:6px;line-height:1.25;padding-block:2px}
.hdr-phone b{font-size:clamp(15px,.9rem + .35vw,18px);font-weight:700;color:var(--ink);white-space:nowrap}
.hdr-phone:hover b{color:var(--blue)}
.hdr-mail{font-size:clamp(12px,.72rem + .12vw,13.5px);color:var(--text-2);white-space:nowrap;display:inline-flex;align-items:center;min-height:24px}
.hdr-mail:hover{color:var(--blue)}
@media(max-width:1000px){.hdr-contacts{display:none}}

/* График работы — в верхней полосе, рядом с городом */
.topbar-hours{color:#9fb0c4}
@media(max-width:1100px){.topbar-hours{display:none}}
.burger{display:none;width:var(--tap);height:var(--tap);align-items:center;justify-content:center;border-radius:var(--r-sm);border:1px solid var(--line)}
.burger span{display:block;width:22px;height:2px;background:var(--ink);position:relative;transition:var(--dur)}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:22px;height:2px;background:var(--ink);transition:var(--dur)}
.burger span::before{top:-7px}.burger span::after{top:7px}
.burger[aria-expanded=true] span{background:transparent}
.burger[aria-expanded=true] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded=true] span::after{top:0;transform:rotate(-45deg)}

/* Мобильное меню */
.mnav{position:fixed;inset:0 0 0 auto;width:min(340px,88vw);background:#fff;z-index:80;transform:translateX(100%);transition:transform .3s var(--ease);display:flex;flex-direction:column;overflow-y:auto;padding:20px var(--gut) 32px;box-shadow:var(--sh-3);visibility:hidden}
.mnav.is-open{transform:none;visibility:visible}
.mnav__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.mnav a{display:flex;align-items:center;min-height:var(--tap);padding:6px 0;font-size:16px;font-weight:500;border-bottom:1px solid var(--line)}
.mnav .btn{margin-top:20px}
.mnav__contacts{margin-top:22px;display:grid;gap:6px}
.mnav__contacts b{font-size:19px}
.scrim{position:fixed;inset:0;background:rgba(27,36,50,.55);z-index:70;opacity:0;visibility:hidden;transition:opacity .3s}
.scrim.is-open{opacity:1;visibility:visible}

/* Промежуточная ступень: меню из 7 пунктов + телефон + кнопка не влезают
   в 1200px без ужатия — уменьшаем кегль и зазоры, а не ломаем строку. */
@media(max-width:1240px){
  .nav{gap:13px}
  .nav a{font-size:13.5px}
  .hdr .wrap{gap:14px}
  .logo img{width:132px}
}
/* Утилиты видимости: одна и та же шапка обслуживает десктоп и мобилу */
.only-mob{display:none!important}
@media(max-width:1000px){
  .nav{display:none}
  .hdr-phone{display:none}
  .burger{display:flex}
  .hdr .wrap{min-height:64px}
  /* Длинная кнопка «Заказать звонок» не влезает в 390px и распирает страницу:
     на мобильных её заменяет иконка звонка, а сама кнопка живёт в бургер-меню. */
  .hdr .hdr-r > .btn--primary{display:none}
  .only-mob{display:inline-flex!important}
}
@media(max-width:640px){
  .topbar-nav{display:none}
  .topbar .wrap{justify-content:center}
}

/* ---------- 6. ХЛЕБНЫЕ КРОШКИ ---------- */
.crumbs{padding-block:14px;font-size:var(--t-xs);color:var(--text-2)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.crumbs li{display:flex;align-items:center;gap:6px}
.crumbs li:not(:last-child)::after{content:"/";color:var(--line-2)}
.crumbs a{padding:4px 0}
.crumbs a:hover{color:var(--blue);text-decoration:underline}
.crumbs [aria-current=page]{color:var(--text)}

/* ---------- 7. HERO ---------- */
.hero{background:linear-gradient(180deg,var(--soft) 0%,#fff 100%);padding-block:clamp(28px,4vw,52px) clamp(32px,5vw,60px)}
.hero__grid{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(24px,4vw,48px);align-items:center}
.hero h1 span{color:var(--blue)}
.hero__lead{font-size:var(--t-lead);color:var(--text-2);margin:16px 0 20px;max-width:56ch}
.usp{display:grid;gap:10px;margin-bottom:24px}
.usp li{display:flex;gap:10px;align-items:flex-start;font-size:var(--t-sm)}
.usp svg{width:20px;height:20px;flex:none;margin-top:2px;color:var(--ok)}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.price-from{font-size:var(--t-xs);color:var(--text-2);line-height:1.3}
.price-from b{display:block;font-size:var(--t-price);color:var(--ink);font-family:var(--f-head)}
.hero__media{position:relative;border-radius:var(--r-xl);overflow:hidden;background:linear-gradient(140deg,var(--ink) 0%,var(--blue) 100%);box-shadow:var(--sh-2)}
.hero__media img{width:100%;aspect-ratio:4/3;object-fit:contain;background:#fff}
/* Бейдж на фото. Кегль привязан к ширине вьюпорта: на планшете картинка
   крупная, и фиксированный мелкий шрифт на ней терялся. */
.hero__badge{
  position:absolute;left:clamp(12px,1.6vw,18px);bottom:clamp(12px,1.6vw,18px);
  background:rgba(255,255,255,.95);backdrop-filter:blur(6px);
  border-radius:var(--r);padding:clamp(10px,1.2vw,14px) clamp(14px,1.6vw,18px);
  font-size:clamp(12.5px,.68rem + .4vw,15px);font-weight:600;color:var(--text-2);
  box-shadow:var(--sh-2);line-height:1.35;
}
.hero__badge b{display:block;margin-top:2px;font-size:clamp(18px,.95rem + .9vw,25px);font-family:var(--f-head);color:var(--ink)}

@media(max-width:900px){
  .hero__grid{grid-template-columns:1fr}
  .hero__media{order:-1}
}

/* Мобильный герой: кнопки равной ширины в одну линию,
   цена — отдельной строкой под ними, отдельным акцентным блоком. */
@media(max-width:640px){
  .hero__cta{gap:10px}
  /* basis 160px: на 390px кнопки встают в ряд равными, на 320px честно
     переносятся и становятся равными во всю ширину — подпись не режется. */
  .hero__cta .btn{flex:1 1 160px;padding-inline:14px}
  .price-from{
    flex:1 0 100%;order:3;
    display:flex;align-items:baseline;justify-content:center;gap:8px;
    margin-top:2px;padding:12px 16px;
    background:var(--soft);border:1px solid var(--line);border-radius:var(--r);
    font-size:var(--t-sm);
  }
  .price-from b{display:inline;font-size:var(--t-h3)}
}

/* ---------- 8. ПОЛОСА ДОВЕРИЯ ---------- */
.trust{background:var(--ink);color:#fff}
.trust__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:var(--gap);padding-block:clamp(20px,3vw,28px);text-align:center}
.trust b{display:block;font-family:var(--f-head);font-size:var(--t-num);color:var(--gold-l);line-height:1.1}
/* Подпись под цифрой. Селектор именно прямого потомка: внутри <b> живёт
   <span data-count> счётчика — он должен наследовать крупный кегль, а не подпись. */
.trust__grid > div > span{display:block;font-size:var(--t-xs);color:#b9c2ce}

/* ---------- 9. КАРТОЧКИ ---------- */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease),border-color var(--dur);display:flex;flex-direction:column;position:relative}
.card:hover{box-shadow:var(--sh-2);border-color:var(--line-2);transform:translateY(-3px)}
.card__media{position:relative;background:var(--soft);aspect-ratio:4/3;overflow:hidden}
.card__media img{width:100%;height:100%;object-fit:contain;transition:transform .4s var(--ease)}
.card:hover .card__media img{transform:scale(1.04)}
.card__body{padding:clamp(12px,1.6vw,16px);display:flex;flex-direction:column;gap:8px;flex:1}
/* Заголовок карточки — НЕ тег h*. Карточка товара/категории это навигационное
   превью, а не раздел документа: 60 лишних h3 на сайт ломают структуру заголовков.
   Поэтому шрифтовое оформление задаётся здесь явно. */
.card__title{font-family:var(--f-head);font-weight:700;font-size:var(--t-h4);line-height:1.25;color:var(--ink)}
.card__title a::after{content:"";position:absolute;inset:0;z-index:1}  /* вся карточка кликабельна */
.card__specs{font-size:var(--t-xs);color:var(--text-2);line-height:1.65}
.card__foot{margin-top:auto;padding-top:6px;display:flex;justify-content:space-between;align-items:flex-end;gap:8px;flex-wrap:wrap}
.card .btn{position:relative;z-index:2}
.price{font-family:var(--f-head);font-weight:700;font-size:var(--t-price);color:var(--ink);line-height:1.2}
.price small{display:block;font-family:var(--f-body);font-size:var(--t-xs);font-weight:400;color:var(--text-2)}
.price--old{font-size:var(--t-sm);color:var(--text-2);text-decoration:line-through;font-weight:400;font-family:var(--f-body)}

.tag{position:absolute;top:10px;left:10px;z-index:2;background:var(--gold);color:var(--ink-2);font-size:11px;font-weight:700;letter-spacing:.04em;padding:5px 10px;border-radius:var(--r-sm);text-transform:uppercase}
.tag--sale{background:var(--err);color:#fff}
.tag--used{background:var(--ink);color:#fff}
.status{font-size:var(--t-xs);font-weight:600;color:var(--ok);display:inline-flex;align-items:center;gap:6px}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.status--order{color:var(--warn)}
.cond{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-xs);font-weight:600;padding:4px 10px;border-radius:var(--r-pill);width:fit-content}
.cond--good{background:var(--ok-bg);color:var(--ok)}
.cond--mid{background:#fdf3e0;color:var(--warn)}

/* Избранное */
.fav{position:absolute;top:8px;right:8px;z-index:3;width:var(--tap);height:var(--tap);display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.9);border:1px solid var(--line);transition:var(--dur)}
.fav svg{width:20px;height:20px;fill:none;stroke:var(--text-2);stroke-width:1.8;transition:var(--dur)}
.fav:hover{border-color:var(--gold)}
.fav[aria-pressed=true] svg{fill:var(--err);stroke:var(--err)}

/* ---------- 10. ПЛИТКИ / ФОРМАТЫ / УСЛУГИ ---------- */
.tile{display:flex;flex-direction:column;gap:8px;padding:clamp(18px,2.4vw,24px);border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;transition:var(--dur);position:relative}
.tile:hover{border-color:var(--gold);box-shadow:var(--sh-2);transform:translateY(-3px)}
.tile__ic{width:52px;height:52px;border-radius:var(--r);background:var(--soft-2);display:flex;align-items:center;justify-content:center;margin-bottom:6px;flex:none}
.tile__ic svg{width:26px;height:26px;color:var(--blue)}
/* Заголовок плитки — тоже не тег h*: плитка это превью-ссылка, а не раздел */
.tile__title{font-family:var(--f-head);font-weight:700;font-size:var(--t-h3);line-height:1.25;color:var(--ink)}
.tile p{font-size:var(--t-sm);color:var(--text-2)}
.tile__link{margin-top:auto;padding-top:8px;color:var(--blue);font-weight:600;font-size:var(--t-sm);display:inline-flex;align-items:center;gap:6px;min-height:40px}
.tile__link::after{content:"→";transition:transform var(--dur) var(--ease)}
.tile:hover .tile__link::after{transform:translateX(4px)}
.tile__link::before{content:"";position:absolute;inset:0}
.tile__meta{font-size:var(--t-sm);font-weight:600;color:var(--ink)}
.tile__meta span{font-weight:400;color:var(--text-2)}

/* ---------- 11. ЧИПЫ / ФИЛЬТРЫ ---------- */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);padding:10px 18px;border:1px solid var(--line-2);border-radius:var(--r-pill);font-size:var(--t-sm);font-weight:600;background:#fff;transition:var(--dur);white-space:nowrap}
.chip:hover{border-color:var(--ink);background:var(--soft)}
.chip[aria-pressed=true],.chip.is-on{background:var(--ink);border-color:var(--ink);color:#fff}

.filters{position:sticky;top:88px;align-self:start;display:grid;gap:18px;padding:20px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff}
.fbox{display:grid;gap:10px}
.fbox__t{font-size:var(--t-xs);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-2)}
/* Два поля «от/до» в узкой колонке фильтров: ужимаем горизонтальные отступы,
   иначе плейсхолдер «до 315 000» обрезается. Кегль оставляем 16px —
   иначе iOS зумит страницу при фокусе. */
.frange{display:flex;gap:8px}
.frange .input{padding-inline:10px;min-width:0}
.fchips{display:flex;flex-wrap:wrap;gap:6px}
.fchip{min-height:38px;padding:6px 12px;border:1px solid var(--line-2);border-radius:var(--r-sm);font-size:var(--t-xs);font-weight:600;background:#fff;transition:var(--dur)}
.fchip:hover{border-color:var(--ink)}
.fchip[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
.fcheck{display:flex;align-items:center;gap:10px;min-height:40px;cursor:pointer;font-size:var(--t-sm)}
.fcheck input{width:20px;height:20px;accent-color:var(--blue);flex:none;cursor:pointer}
.fcheck .cnt{margin-left:auto;color:var(--text-2);font-size:var(--t-xs)}

.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:var(--gap)}
.toolbar__cnt{font-size:var(--t-sm);color:var(--text-2)}
.sortbox{display:flex;align-items:center;gap:8px;font-size:var(--t-sm)}
.filters-toggle{display:none}
/* Шапка выезжающей панели с крестиком — рисуется только на мобильных */
.filters__head{display:none;position:sticky;top:0;z-index:2;margin:-20px -20px 4px;padding:14px 20px;
  background:#fff;border-bottom:1px solid var(--line);align-items:center;justify-content:space-between;gap:12px}
.filters__head strong{font-family:var(--f-head);font-size:var(--t-h4)}

@media(max-width:900px){
  .filters{
    position:fixed;inset:0 0 0 auto;
    width:min(360px,94vw);
    z-index:80;border-radius:0;
    transform:translateX(100%);transition:transform .3s var(--ease);
    visibility:hidden;
    /* Панель прокручивается сама, а не тянет за собой страницу.
       dvh — чтобы адресная строка мобильного браузера не срезала низ. */
    display:block;
    height:100dvh;max-height:100dvh;
    overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
    padding:20px 20px calc(28px + env(safe-area-inset-bottom));
  }
  .filters.is-open{transform:none;visibility:visible}
  .filters__head{display:flex}
  .filters .fbox{margin-bottom:18px}
  .filters-toggle{display:inline-flex}
}

/* Раскладка «сайдбар + контент»: каталог, статья (оглавление), кейс (карточка заказа).
   Сайдбар — фиксированная колонка, контент тянется. Под 900px .filters/.toc
   уезжают в off-canvas, и обёртка схлопывается в одну колонку. */
.with-side{display:flex;gap:clamp(16px,2.4vw,28px);align-items:flex-start}
.with-side__aside{flex:0 0 272px}
.with-side__main{flex:1 1 auto;min-width:0}   /* min-width:0 — иначе таблицы распирают flex-элемент */
@media(max-width:900px){
  .with-side{display:block}
  .with-side__aside{flex:none}
}

/* ---------- 11b. ОГЛАВЛЕНИЕ СТАТЬИ (скроллспай в main.js) ---------- */
.toc__t{font-size:var(--t-xs);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-2);margin-bottom:10px}
.toc ul{display:grid;gap:2px}
.toc a{display:flex;align-items:center;min-height:44px;padding:8px 0 8px 14px;
  border-left:2px solid var(--line);font-size:var(--t-sm);color:var(--text-2);
  transition:border-color var(--dur),color var(--dur)}
.toc a:hover{color:var(--ink);border-left-color:var(--line-2)}
.toc a.is-on{border-left-color:var(--gold);color:var(--ink);font-weight:600}

/* ---------- 12. ФОРМЫ ---------- */
.field{display:grid;gap:6px;margin-bottom:14px;position:relative}
.field__label{font-size:var(--t-xs);font-weight:600;color:var(--text-2)}
.field__label .req{color:var(--err)}
.input,.select,.textarea{
  width:100%;min-height:var(--tap);
  padding:12px 14px;
  border:1.5px solid var(--line-2);
  border-radius:var(--r);
  background:#fff;color:var(--text);
  font-size:16px;              /* 16px — iOS не зумит поле при фокусе */
  transition:border-color var(--dur),box-shadow var(--dur);
  -webkit-appearance:none;appearance:none;
}
.textarea{min-height:104px;resize:vertical;line-height:1.5}
.select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%235d6572' stroke-width='1.8'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:38px;cursor:pointer;
}
.input::placeholder,.textarea::placeholder{color:#9aa2ae}
.input:hover,.textarea:hover,.select:hover{border-color:var(--text-2)}
.input:focus,.textarea:focus,.select:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(58,72,133,.14);outline:none}
.field.is-invalid .input,.field.is-invalid .textarea,.field.is-invalid .select{border-color:var(--err);background:var(--err-bg)}
.field.is-valid .input,.field.is-valid .textarea{border-color:var(--ok)}
.field__err{display:none;font-size:var(--t-xs);color:var(--err);font-weight:500;align-items:flex-start;gap:5px;line-height:1.4}
.field.is-invalid .field__err{display:flex}
/* Иконка в тексте ошибки. БЕЗ этого правила инлайновый <svg> без width/height
   растягивается до дефолтных 300×150px и разносит вёрстку формы. */
.field__err svg{width:15px;height:15px;flex:none;margin-top:1px}
.field__hint{font-size:var(--t-xs);color:var(--text-2)}

/* Согласие / чекбокс */
.consent{display:flex;gap:10px;align-items:flex-start;font-size:var(--t-xs);color:var(--text-2);line-height:1.5;cursor:pointer;padding-block:6px;min-height:40px}
.consent input{width:20px;height:20px;flex:none;margin-top:1px;accent-color:var(--blue);cursor:pointer}
.consent a{color:var(--blue);text-decoration:underline}
.field.is-invalid .consent{color:var(--err)}

/* Оценка звёздами. Радиокнопки идут в разметке от 5 к 1, поэтому подсветку
   соседей делаем через ~ : наведение/выбор красит саму звезду и все после неё. */
.rating-input{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:4px}
.rating-input input{position:absolute;opacity:0;width:1px;height:1px}
.rating-input label{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;cursor:pointer;border-radius:var(--r-sm);
  color:var(--line-2);transition:color var(--dur),transform .12s var(--ease);
}
.rating-input label svg{width:30px;height:30px;fill:currentColor}
.rating-input label:hover{transform:scale(1.08)}
.rating-input input:checked ~ label,
.rating-input label:hover,
.rating-input label:hover ~ label{color:var(--gold-l)}
.rating-input input:focus-visible + label{outline:3px solid var(--blue);outline-offset:2px}
.field.is-invalid .rating-input label{color:#e8b4ae}

/* ---------- ОТЗЫВЫ В КАРТОЧКЕ ТОВАРА ---------- */
.reviews__top{display:flex;flex-wrap:wrap;gap:clamp(16px,3vw,32px);align-items:center;
  padding:clamp(16px,2.4vw,24px);background:var(--soft);border-radius:var(--r-lg);margin-bottom:var(--gap)}
.reviews__score{text-align:center;flex:none}
.reviews__score b{display:block;font-family:var(--f-head);font-size:clamp(32px,2rem+2vw,46px);line-height:1;color:var(--ink)}
.reviews__score .stars{justify-content:center;margin:6px 0 4px}
.reviews__score span{font-size:var(--t-xs);color:var(--text-2)}
.reviews__bars{flex:1 1 220px;display:grid;gap:5px;min-width:0}
.reviews__bar{display:flex;align-items:center;gap:8px;font-size:var(--t-xs);color:var(--text-2)}
.reviews__bar i{flex:none;width:34px;font-style:normal}
.reviews__bar u{flex:1;height:6px;border-radius:3px;background:var(--soft-2);text-decoration:none;overflow:hidden}
.reviews__bar u b{display:block;height:100%;background:var(--gold);border-radius:3px}
.reviews__bar em{flex:none;width:24px;text-align:right;font-style:normal}
.reviews__cta{flex:none}
.review{padding:clamp(16px,2.2vw,22px);border:1px solid var(--line);border-radius:var(--r-lg);display:grid;gap:8px}
.review__head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.review__who{font-weight:600}
.review__who small{display:block;font-weight:400;font-size:var(--t-xs);color:var(--text-2)}
.review__date{margin-left:auto;font-size:var(--t-xs);color:var(--text-2)}
.review p{font-size:var(--t-sm)}
.review__reply{margin-top:4px;padding:12px 14px;background:var(--soft);border-radius:var(--r);
  border-left:3px solid var(--blue);font-size:var(--t-sm);color:var(--text-2)}
.review__reply b{color:var(--ink)}

/* Ловушка для ботов — вне потока, невидима, но не display:none (боты это чуют) */
.hp-field{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}

/* Файл */
.filebox{display:flex;align-items:center;gap:12px;min-height:var(--tap);padding:10px 14px;border:1.5px dashed var(--line-2);border-radius:var(--r);cursor:pointer;font-size:var(--t-sm);color:var(--text-2);transition:var(--dur)}
.filebox:hover{border-color:var(--blue);background:var(--soft)}
.filebox input{position:absolute;opacity:0;width:.1px;height:.1px}
.filebox svg{width:20px;height:20px;flex:none;color:var(--blue)}

/* Итог отправки формы */
.form-note{font-size:var(--t-xs);color:var(--text-2);margin-top:10px;line-height:1.5}
.form-note a{color:inherit;text-decoration:underline}
.form-msg{display:none;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--r);font-size:var(--t-sm);margin-bottom:14px;line-height:1.5}
.form-msg.is-shown{display:flex}
.form-msg--ok{background:var(--ok-bg);color:var(--ok)}
.form-msg--err{background:var(--err-bg);color:var(--err)}
.form-msg svg{width:20px;height:20px;flex:none;margin-top:1px}

/* Тёмная форма на тёмной полосе */
.band{background:var(--ink);color:#fff;border-radius:var(--r-xl);padding:clamp(24px,4vw,44px);display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(20px,3vw,40px);align-items:center}
.band h2,.band h3{color:#fff}   /* инлайн-CTA внутри статьи использует h3 — он тоже должен быть белым */
.band p{color:#b9c2ce;font-size:var(--t-sm);margin-top:10px}
.band .field__label{color:#b9c2ce}
.band .input,.band .textarea,.band .select{border-color:transparent;background:rgba(255,255,255,.96)}
.band .consent{color:#a7b1bf}
.band .consent a{color:var(--gold-l)}
.band .form-note{color:#8d97a6}
.band .form-note a{color:#b9c2ce}
.band__row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:900px){.band{grid-template-columns:1fr}.band__row{grid-template-columns:1fr}}

/* ---------- 13. МОДАЛКА (генерируется из JS) ---------- */
.modal{
  border:none;padding:0;background:transparent;max-width:min(520px,calc(100vw - 24px));width:100%;
  margin:auto;overflow:visible;
}
.modal::backdrop{background:rgba(27,36,50,.62);backdrop-filter:blur(3px)}
.modal[open]{animation:modal-in .26s var(--ease)}
.modal[open]::backdrop{animation:fade-in .26s var(--ease)}
@keyframes modal-in{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
.modal__box{background:#fff;border-radius:var(--r-xl);padding:clamp(20px,3.4vw,32px);box-shadow:var(--sh-3);position:relative;max-height:calc(100dvh - 32px);overflow-y:auto}
.modal__close{position:absolute;top:8px;right:8px;width:var(--tap);height:var(--tap);display:flex;align-items:center;justify-content:center;border-radius:50%;color:var(--text-2);transition:var(--dur)}
.modal__close:hover{background:var(--soft-2);color:var(--ink)}
.modal__close svg{width:20px;height:20px}
.modal__t{font-size:var(--t-h3);margin-bottom:6px;padding-right:40px}
.modal__s{font-size:var(--t-sm);color:var(--text-2);margin-bottom:20px}
.modal__ok{text-align:center;padding:12px 0}
.modal__ok svg{width:64px;height:64px;margin:0 auto 16px;color:var(--ok)}
.modal__ok--err svg{color:var(--err)}
body.is-locked{overflow:hidden}

/* ---------- 14. АККОРДЕОН FAQ ---------- */
.faq{max-width:860px;margin-inline:auto;border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line)}
.qa__q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;text-align:left;
  min-height:var(--tap);padding:16px 0;font-weight:600;font-size:var(--t-h4);font-family:var(--f-head);color:var(--ink)}
.qa__q:hover{color:var(--blue)}
.qa__ic{flex:none;width:24px;height:24px;position:relative}
.qa__ic::before,.qa__ic::after{content:"";position:absolute;inset:0;margin:auto;background:var(--gold-d);transition:transform var(--dur) var(--ease)}
.qa__ic::before{width:14px;height:2px}
.qa__ic::after{width:2px;height:14px}
.qa__q[aria-expanded=true] .qa__ic::after{transform:rotate(90deg)}
.qa__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s var(--ease)}
.qa__q[aria-expanded=true]+.qa__a{grid-template-rows:1fr}
.qa__a>div{overflow:hidden}
.qa__a p{padding-bottom:18px;color:var(--text-2);font-size:var(--t-sm)}

/* ---------- 15. ТАБЫ ---------- */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none;margin-bottom:22px}
.tabs::-webkit-scrollbar{display:none}
.tab{min-height:var(--tap);padding:10px 18px;font-size:var(--t-sm);font-weight:600;color:var(--text-2);border-bottom:2px solid transparent;white-space:nowrap;transition:var(--dur)}
.tab:hover{color:var(--ink)}
.tab[aria-selected=true]{color:var(--ink);border-bottom-color:var(--gold)}
.tabpanel[hidden]{display:none}

/* ---------- 16. ТАБЛИЦЫ ---------- */
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r-lg)}
.tbl{min-width:520px;font-size:var(--t-sm)}
.tbl th{background:var(--soft);text-align:left;font-weight:600;font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.04em;color:var(--text-2);padding:14px 16px;white-space:nowrap}
.tbl td{padding:14px 16px;border-top:1px solid var(--line)}
.tbl tbody tr:hover{background:var(--soft)}
.tbl .num{font-weight:700;color:var(--ink);white-space:nowrap}
/* Спецификация — 2 колонки, зебра */
.spec{width:100%;font-size:var(--t-sm)}
.spec tr:nth-child(odd){background:var(--soft)}
.spec th{text-align:left;font-weight:400;color:var(--text-2);padding:11px 14px;width:48%}
.spec td{padding:11px 14px;font-weight:600;color:var(--ink)}

/* ---------- 17. ГАЛЕРЕЯ ---------- */
/* ---------- ВЕРХ КАРТОЧКИ ТОВАРА ----------
   Три области: заголовок, слайдер, блок покупки.
   Десктоп: слайдер слева на две строки, справа заголовок и под ним покупка.
   Мобильный/планшет: ЗАГОЛОВОК ПЕРВЫМ, затем слайдер, затем покупка —
   человек должен сначала понять, что за товар, и только потом смотреть фото. */
.product-top{
  display:grid;gap:clamp(16px,2.6vw,32px);
  grid-template-columns:1.05fr .95fr;
  grid-template-areas:
    "gal head"
    "gal buy";
  align-items:start;
}
.product-top__head{grid-area:head}
.product-top__gallery{grid-area:gal;min-width:0}
.product-top__buy{grid-area:buy;min-width:0}
@media(max-width:900px){
  .product-top{
    grid-template-columns:1fr;
    grid-template-areas:
      "head"
      "gal"
      "buy";
  }
}

/* Слайдер карточки товара: лента слайдов + стрелки + перетаскивание.
   Написан на transform — анимация идёт на GPU, без дёрганья. */
.gallery__stage{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:#fff}
.gallery__track{
  display:flex;
  transition:transform .35s var(--ease);
  cursor:grab;
  touch-action:pan-y;                 /* вертикальный скролл страницы не блокируем */
  user-select:none;-webkit-user-select:none;
}
.gallery__track.is-dragging{cursor:grabbing;transition:none}
.gallery__slide{flex:0 0 100%;width:100%}
.gallery__slide img{
  width:100%;aspect-ratio:4/3;object-fit:contain;
  pointer-events:none;               /* чтобы не перехватывал drag */
  -webkit-user-drag:none;
}

.gallery__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:rgba(255,255,255,.92);color:var(--ink);
  border:1px solid var(--line);box-shadow:var(--sh-1);
  transition:background var(--dur),opacity var(--dur),transform var(--dur);
  opacity:0;
}
.gallery__nav svg{width:20px;height:20px}
.gallery__nav--prev{left:10px}
.gallery__nav--next{right:10px}
.gallery__nav:hover{background:#fff;box-shadow:var(--sh-2)}
.gallery__stage:hover .gallery__nav,.gallery__nav:focus-visible{opacity:1}
/* На тач-устройствах наведения нет — показываем стрелки всегда */
@media(hover:none){.gallery__nav{opacity:1}}

.gallery__count{
  position:absolute;right:10px;bottom:10px;z-index:3;
  background:rgba(27,36,50,.72);color:#fff;
  font-size:var(--t-xs);font-weight:600;
  padding:5px 11px;border-radius:var(--r-pill);
}
/* Подсказка «фото увеличивается по клику» */
.gallery__zoom{
  position:absolute;left:10px;bottom:10px;z-index:3;
  display:flex;align-items:center;gap:6px;
  background:rgba(27,36,50,.72);color:#fff;
  font-size:var(--t-xs);padding:5px 11px;border-radius:var(--r-pill);
  pointer-events:none;
}
.gallery__zoom svg{width:14px;height:14px}
@media(max-width:520px){.gallery__zoom span{display:none}.gallery__zoom{padding:7px}}

/* Лента миниатюр: полосы прокрутки нет — листается перетаскиванием и стрелками,
   а также сама доезжает до активного кадра при листании большого фото. */
.gallery__thumbs{
  display:flex;gap:8px;margin-top:10px;
  overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-ms-overflow-style:none;   /* полоса скрыта */
  cursor:grab;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
}
.gallery__thumbs::-webkit-scrollbar{width:0;height:0;display:none}
.gallery__thumbs.is-dragging{cursor:grabbing}
.gallery__thumbs.is-dragging .gthumb{pointer-events:none}
.gthumb{flex:none;width:88px;border:2px solid var(--line);border-radius:var(--r-sm);overflow:hidden;background:#fff;transition:var(--dur);padding:0}
.gthumb img{width:100%;aspect-ratio:4/3;object-fit:contain}
.gthumb:hover{border-color:var(--line-2)}
.gthumb[aria-selected=true]{border-color:var(--gold)}
/* Лента миниатюр прокручивается сама (JS центрирует активную).
   На телефоне делаем кадры мельче, чтобы их влезало 4–5, а не 2. */
.gallery__thumbs{scroll-padding-inline:8px}
@media(max-width:520px){.gthumb{width:66px}}
/* Мозаика проекта */
.mosaic{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:8px;height:clamp(260px,38vw,440px)}
.mosaic__i{position:relative;border-radius:var(--r);overflow:hidden;background:var(--soft);padding:0;border:0}
.mosaic__i img{width:100%;height:100%;object-fit:cover}
.mosaic__i:first-child{grid-row:span 2}
.mosaic__more{position:absolute;inset:0;background:rgba(27,36,50,.62);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--t-h4)}
@media(max-width:640px){.mosaic{grid-template-columns:1fr 1fr;height:auto}.mosaic__i:first-child{grid-column:span 2;grid-row:auto;aspect-ratio:16/10}.mosaic__i{aspect-ratio:4/3}}
/* Лайтбокс */
.lightbox{border:none;background:transparent;max-width:100vw;max-height:100dvh;width:100%;height:100%;padding:0}
.lightbox::backdrop{background:rgba(20,26,36,.94)}
.lightbox__img{width:100%;height:100%;object-fit:contain;padding:clamp(12px,4vw,48px)}
.lightbox__close,.lightbox__nav{position:fixed;z-index:2;width:52px;height:52px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;transition:var(--dur)}
.lightbox__close:hover,.lightbox__nav:hover{background:rgba(255,255,255,.28)}
.lightbox__close{top:16px;right:16px}
.lightbox__nav--prev{left:16px;top:50%;transform:translateY(-50%)}
.lightbox__nav--next{right:16px;top:50%;transform:translateY(-50%)}
.lightbox__cnt{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);color:#fff;font-size:var(--t-sm);background:rgba(0,0,0,.4);padding:6px 14px;border-radius:var(--r-pill)}

/* ---------- 18. ШАГИ / ТАЙМЛАЙН / ЦИФРЫ ---------- */
.steps{counter-reset:s}
.step{position:relative;padding:22px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff}
.step::before{counter-increment:s;content:counter(s);display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--ink);color:var(--gold-l);font-family:var(--f-head);font-weight:700;margin-bottom:12px}
.step h3{font-size:var(--t-h4);margin-bottom:6px}
.step p{font-size:var(--t-sm);color:var(--text-2)}

.tline{position:relative;padding-left:32px;display:grid;gap:26px}
.tline::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:var(--line)}
.tline li{position:relative}
.tline li::before{content:"";position:absolute;left:-32px;top:6px;width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--gold)}
.tline b{display:block;font-family:var(--f-head);font-size:var(--t-h4);color:var(--blue)}
.tline h3{font-size:var(--t-h4);margin:2px 0 4px}
.tline p{font-size:var(--t-sm);color:var(--text-2)}

.nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));gap:var(--gap)}
.num-card{text-align:center;padding:clamp(18px,2.6vw,26px);border:1px solid var(--line);border-radius:var(--r-lg);background:#fff}
.num-card b{display:block;font-family:var(--f-head);font-size:var(--t-num);color:var(--blue);line-height:1.1}
/* Только прямой потомок: внутри <b> лежит <span data-count> счётчика,
   он обязан наследовать крупный кегль, а не превращаться в подпись. */
.num-card > span{display:block;font-size:var(--t-xs);color:var(--text-2)}
.num-card b span{font-size:inherit;color:inherit;font-family:inherit}

/* ---------- 19. ОТЗЫВЫ ---------- */
.rev{padding:clamp(18px,2.4vw,24px);border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;display:flex;flex-direction:column;gap:10px}
.stars{display:flex;gap:2px;color:var(--gold-l)}
.stars svg{width:17px;height:17px;fill:currentColor}
.rev p{font-size:var(--t-sm)}
.rev__who{margin-top:auto;font-weight:600;font-size:var(--t-sm)}
.rev__who small{display:block;font-weight:400;color:var(--text-2);font-size:var(--t-xs)}

/* ---------- 20. ТЕКСТОВЫЙ БЛОК / КОНТЕНТ ---------- */
/* ВАЖНО: этот блок стилизует ГОЛЫЕ ТЕГИ.
   Контент сюда попадает из визуального редактора CMS — менеджер пишет обычный
   текст, вставляет картинки, таблицы и видео и НЕ проставляет никаких классов.
   Поэтому ни одно правило ниже не требует класса на внутреннем теге.
   Достаточно навесить .prose на контейнер (в MODX — на вывод TV/контента). */
.prose{max-width:74ch}
.prose > *:first-child{margin-top:0}
.prose > *:last-child{margin-bottom:0}

.prose h2{font-size:var(--t-h2);margin:32px 0 12px}
.prose h3{font-size:var(--t-h3);margin:26px 0 10px}
.prose h4{font-size:var(--t-h4);margin:20px 0 8px}
.prose p{margin-bottom:14px;color:var(--text-2)}
.prose a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.prose strong,.prose b{color:var(--text);font-weight:700}
.prose em,.prose i{font-style:italic}
.prose hr{border:0;height:1px;background:var(--line);margin:28px 0}

/* Списки — маркеры рисуем сами, list-style сброшен глобально */
.prose ul{margin:0 0 16px;display:grid;gap:8px}
.prose ul li{position:relative;padding-left:24px;font-size:var(--t-sm);color:var(--text-2)}
.prose ul li::before{content:"";position:absolute;left:6px;top:9px;width:6px;height:6px;border-radius:50%;background:var(--gold)}
.prose ol{margin:0 0 16px;display:grid;gap:8px;counter-reset:p}
.prose ol li{position:relative;padding-left:28px;font-size:var(--t-sm);color:var(--text-2)}
.prose ol li::before{counter-increment:p;content:counter(p) ".";position:absolute;left:0;top:0;font-weight:700;color:var(--blue)}
.prose li ul,.prose li ol{margin:8px 0 0}

/* Картинки из редактора: адаптивные всегда, что бы менеджер ни вставил.
   Выравнивание влево/вправо (кнопки редактора) тоже поддержано. */
.prose img{max-width:100%;height:auto;border-radius:var(--r-lg);margin:20px 0}
.prose figure{margin:20px 0;max-width:100%}
.prose figure img{margin:0}
.prose figcaption{font-size:var(--t-xs);color:var(--text-2);margin-top:8px;text-align:center}
.prose img[align=left],.prose img.left{float:left;margin:6px 20px 14px 0;max-width:min(50%,340px)}
.prose img[align=right],.prose img.right{float:right;margin:6px 0 14px 20px;max-width:min(50%,340px)}
@media(max-width:640px){
  /* На телефоне обтекание всегда ломает вёрстку — картинка идёт в полную ширину */
  .prose img[align=left],.prose img.left,
  .prose img[align=right],.prose img.right{float:none;margin:20px 0;max-width:100%}
}

/* Таблица из редактора. display:block + overflow-x — таблица сама становится
   областью прокрутки, поэтому менеджеру НЕ нужно оборачивать её в контейнер. */
.prose table{
  display:block;width:fit-content;max-width:100%;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  margin:20px 0;font-size:var(--t-sm);
  border:1px solid var(--line);border-radius:var(--r-lg);
}
.prose table th{background:var(--soft);text-align:left;font-weight:600;color:var(--ink);padding:12px 16px;white-space:nowrap}
.prose table td{padding:12px 16px;border-top:1px solid var(--line);color:var(--text-2)}
.prose table tr:hover td{background:var(--soft)}

/* Видео/карты, вставленные кодом вставки */
.prose iframe,.prose video{width:100%;max-width:100%;aspect-ratio:16/9;height:auto;border:0;border-radius:var(--r-lg);margin:20px 0;display:block}

.prose blockquote{margin:20px 0;padding:16px 20px;border-left:3px solid var(--gold);background:var(--soft);border-radius:0 var(--r) var(--r) 0;color:var(--text-2)}
.prose blockquote p:last-child{margin-bottom:0}
.prose code{background:var(--soft-2);padding:2px 6px;border-radius:6px;font-size:.92em}

/* Текстовая секция на подложке (низ категорий, «о компании» и т.п.).
   Внутри — тот же .prose, поэтому редактор наполняет её как обычный текст. */
.text-block{background:var(--soft);border-radius:var(--r-xl);padding:clamp(22px,3.4vw,40px)}
.text-block .prose{max-width:none}
.callout{border-left:3px solid var(--gold);background:var(--soft);padding:16px 18px;border-radius:0 var(--r) var(--r) 0;margin:20px 0;font-size:var(--t-sm)}
.callout b{color:var(--ink)}

/* ---------- 21. ПЕРЕЛИНКОВКА ---------- */
.links-box{border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(18px,2.6vw,28px)}
.links-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:2px 20px}
.links-grid a{display:flex;align-items:center;gap:8px;min-height:44px;font-size:var(--t-sm);color:var(--blue)}
.links-grid a::after{content:"→";opacity:.5;transition:transform var(--dur)}
.links-grid a:hover{text-decoration:underline}
.links-grid a:hover::after{transform:translateX(3px)}
.cross{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:var(--gap)}
.cross__i{display:flex;gap:14px;align-items:center;padding:20px;border:1px solid var(--line);border-radius:var(--r-lg);transition:var(--dur);position:relative}
.cross__i:hover{border-color:var(--gold);box-shadow:var(--sh-1)}
.cross__i svg{width:28px;height:28px;color:var(--blue);flex:none}
.cross__title,.cross__i h3{font-size:var(--t-h4)}
.cross__i p{font-size:var(--t-xs);color:var(--text-2)}

/* ---------- 22. ПАГИНАЦИЯ ---------- */
.pager{display:flex;gap:6px;justify-content:center;margin-top:28px;flex-wrap:wrap}
.pager a,.pager span{min-width:var(--tap);min-height:var(--tap);display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:var(--r-sm);font-size:var(--t-sm);font-weight:600;padding-inline:12px}
.pager a:hover{border-color:var(--ink)}
.pager [aria-current=page]{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ---------- 23. ФУТЕР ---------- */
.ftr{background:var(--ink-2);color:#c8d2de;padding-block:clamp(36px,5vw,56px) 22px;margin-top:clamp(32px,5vw,64px)}
.ftr__cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.15fr;gap:clamp(20px,3vw,32px)}
.ftr img{width:170px;margin-bottom:14px}
/* Заголовок колонки футера — не тег h*: это навигация, а не раздел документа */
.ftr__t{font-family:var(--f-head);font-weight:700;color:#fff;font-size:var(--t-h4);margin-bottom:14px}
.ftr ul{display:grid;gap:2px}
.ftr a{display:inline-flex;align-items:center;min-height:36px;font-size:var(--t-sm)}
.ftr a{color:#dbe3ec}
.ftr a:hover{color:var(--gold-l)}
.ftr p{font-size:var(--t-sm);line-height:1.6}
.ftr__phone{display:block;color:#fff!important;font-family:var(--f-head);font-size:var(--t-h3);font-weight:700;margin-top:14px}
.ftr__soc{display:flex;gap:8px;margin-top:16px}
.ftr__soc a{width:var(--tap);height:var(--tap);min-height:var(--tap);display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.18);border-radius:var(--r-sm);transition:var(--dur)}
.ftr__soc a:hover{background:var(--gold);border-color:var(--gold);color:var(--ink-2)}
.ftr__soc svg{width:20px;height:20px}
.ftr__bot{margin-top:clamp(24px,4vw,40px);padding-top:20px;border-top:1px solid rgba(255,255,255,.14);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:var(--t-xs);color:#9dabbb}
.ftr__bot a:hover{color:#fff}
@media(max-width:900px){.ftr__cols{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.ftr__cols{grid-template-columns:1fr}}

/* ---------- 24. ЛИПКАЯ МОБИЛЬНАЯ ПАНЕЛЬ ----------
   Раскладка: слева колонка «цена + наличие», справа кнопка.
   Цена — всегда в одну строку (nowrap), иначе на 320px она ломалась пополам
   и панель превращалась в кашу. Статус — короткий, с цветной точкой. */
.sticky-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:55;display:none;
  align-items:center;gap:12px;
  padding:9px var(--gut);
  padding-bottom:calc(9px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.97);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);box-shadow:0 -4px 20px rgba(38,49,65,.1);
}
.sticky-bar__info{display:flex;flex-direction:column;gap:2px;min-width:0;line-height:1.15}
.sticky-bar__price{
  font-family:var(--f-head);font-weight:700;
  font-size:clamp(17px,4.6vw,22px);
  color:var(--ink);white-space:nowrap;
}
.sticky-bar__price small{font-family:var(--f-body);font-weight:400;font-size:11px;color:var(--text-2)}
.sticky-bar .status{font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sticky-bar .status::before{width:6px;height:6px}
/* Кнопка не сжимается и не переносит подпись — она главный элемент панели */
.sticky-bar__cta{margin-left:auto;flex:none;padding-inline:clamp(14px,4vw,22px)}
.sticky-bar__cta svg{width:18px;height:18px}
/* Позвонить — вторичное действие, поэтому иконкой */
.sticky-bar__call{flex:none;color:var(--ink)}

@media(max-width:900px){
  .sticky-bar{display:flex}
  body.has-sticky{padding-bottom:76px}
}
@media(max-width:360px){
  /* На самых узких экранах жертвуем иконкой звонка, но не ценой и не кнопкой */
  .sticky-bar__call{display:none}
  .sticky-bar{gap:8px}
}

/* ---------- 24b. КНОПКА «НАВЕРХ» (создаётся из JS) ---------- */
.to-top{
  position:fixed;right:clamp(14px,2.5vw,28px);bottom:clamp(14px,2.5vw,28px);z-index:50;
  width:var(--tap);height:var(--tap);
  display:flex;align-items:center;justify-content:center;
  background:var(--ink);color:#fff;border-radius:50%;
  box-shadow:var(--sh-2);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur),background var(--dur);
}
.to-top.is-shown{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--blue)}
.to-top svg{width:20px;height:20px}
/* На мобильных карточку/проект внизу перекрывает липкая панель — поднимаем кнопку над ней */
@media(max-width:900px){
  body.has-sticky .to-top{bottom:calc(78px + env(safe-area-inset-bottom))}
  body.has-sticky .fav-fab{bottom:calc(78px + var(--tap) + 12px + env(safe-area-inset-bottom))}
}

/* ---------- 25. ПРОЧЕЕ ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:var(--r-pill);background:var(--soft-2);color:var(--blue);font-size:var(--t-xs);font-weight:600;width:fit-content}
.meta-row{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:var(--t-sm);color:var(--text-2);margin-top:12px}
.meta-row b{color:var(--ink)}
.info-banner{display:flex;gap:14px;padding:18px 20px;background:var(--soft);border-radius:var(--r-lg);font-size:var(--t-sm);color:var(--text-2);align-items:flex-start}
.info-banner svg{width:24px;height:24px;flex:none;color:var(--blue)}
.divider{height:1px;background:var(--line);border:0;margin-block:20px}
.center{text-align:center}
.mt-lg{margin-top:clamp(20px,3vw,32px)}
.lazy-blur{filter:blur(8px);transition:filter .4s}
.lazy-blur.is-loaded{filter:none}

/* ---------- 26. ПЕЧАТЬ ---------- */
@media print{
  .topbar,.hdr,.ftr,.sticky-bar,.band,.modal,.filters,.fav{display:none!important}
  body{color:#000}
  .card,.tile{break-inside:avoid;border-color:#ccc}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:11px}
}

/* ---------- 27. ПОЛЗУНОК ЦЕНЫ (двуручковый) ----------
   Два <input type=range> лежат друг на друге: события ловит только «ручка»,
   сама дорожка прозрачна для кликов — иначе верхний инпут перехватывал бы
   нажатия по нижней ручке и она становилась недоступной. */
.prange{display:grid;gap:12px}
.prange__vals{display:flex;justify-content:space-between;gap:8px}
.prange__val{
  font-size:var(--t-sm);font-weight:600;color:var(--ink);
  background:var(--soft);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:6px 10px;min-width:88px;text-align:center;
}
.prange__rail{position:relative;height:28px;display:flex;align-items:center}
.prange__rail::before{
  content:"";position:absolute;left:0;right:0;height:4px;
  background:var(--line-2);border-radius:2px;
}
.prange__fill{position:absolute;height:4px;background:var(--gold);border-radius:2px}

.prange__input{
  position:absolute;left:0;width:100%;margin:0;
  background:none;pointer-events:none;   /* кликабельны только ручки */
  -webkit-appearance:none;appearance:none;
  height:28px;
}
.prange__input:focus{outline:none}

/* Ручка: тап-таргет крупный, визуально — кружок */
.prange__input::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:24px;height:24px;border-radius:50%;
  background:#fff;border:2px solid var(--ink);
  box-shadow:var(--sh-1);cursor:grab;pointer-events:auto;
  transition:border-color var(--dur),transform .12s var(--ease);
}
.prange__input::-webkit-slider-thumb:hover{border-color:var(--gold-d)}
.prange__input::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.1)}
.prange__input::-moz-range-thumb{
  width:24px;height:24px;border-radius:50%;
  background:#fff;border:2px solid var(--ink);
  box-shadow:var(--sh-1);cursor:grab;pointer-events:auto;
}
.prange__input:focus-visible::-webkit-slider-thumb{outline:3px solid var(--blue);outline-offset:2px}
.prange__input::-moz-range-track{background:none}

/* ---------- 28. ПРАВКИ ПО РЕЗУЛЬТАТАМ ПРОСМОТРА ---------- */

/* Поле ввода обязано быть 16px (иначе iOS зумит страницу при фокусе), но сам
   плейсхолдер можно сделать мельче — длинные подсказки перестают обрезаться. */
@media(max-width:640px){
  .input::placeholder,.textarea::placeholder{font-size:13.5px}
  .input,.textarea{text-overflow:ellipsis}
}

/* Шапка выезжающей панели фильтра: раньше из-за отрицательных отступов при
   прокрутке над ней проглядывали фильтры. Теперь панель без верхнего паддинга,
   а шапка липнет вплотную к краю и перекрывает содержимое. */
@media(max-width:900px){
  .filters{padding-top:0}
  .filters__head{
    margin:0 -20px 12px;
    padding:14px 20px;
    background:#fff;
    box-shadow:0 6px 12px -8px rgba(38,49,65,.25);
    z-index:3;
  }
}

/* Вкладки карточки: на мобильном не видно, что их можно листать.
   Справа — градиент-подсказка, он гаснет, когда доскроллили до конца. */
.tabs{position:relative}
.tabs-wrap{position:relative}
.tabs-wrap::after{
  content:"";position:absolute;top:0;right:0;bottom:1px;width:56px;
  background:linear-gradient(90deg,rgba(255,255,255,0),#fff 70%);
  pointer-events:none;opacity:0;transition:opacity var(--dur);
}
.tabs-wrap.is-scrollable::after{opacity:1}
.tabs-hint{
  display:none;align-items:center;gap:6px;
  margin:-14px 0 16px;font-size:var(--t-xs);color:var(--text-2);
}
.tabs-hint svg{width:14px;height:14px;animation:swipe-hint 1.6s ease-in-out infinite}
.tabs-wrap.is-scrollable + .tabs-hint{display:flex}
@keyframes swipe-hint{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}

/* Оглавление статьи на мобильном: липкая кнопка, доступная при любом скролле */
@media(max-width:900px){
  .toc-fab{
    position:fixed;left:clamp(14px,2.5vw,28px);bottom:clamp(14px,2.5vw,28px);z-index:50;
    display:inline-flex;align-items:center;gap:8px;
    min-height:var(--tap);padding:0 18px;
    background:var(--ink);color:#fff;border-radius:var(--r-pill);
    box-shadow:var(--sh-2);font-size:var(--t-sm);font-weight:600;
    opacity:0;visibility:hidden;transform:translateY(10px);
    transition:opacity var(--dur),transform var(--dur),visibility var(--dur);
  }
  .toc-fab.is-shown{opacity:1;visibility:visible;transform:none}
  .toc-fab svg{width:18px;height:18px;flex:none}
}
@media(min-width:901px){.toc-fab{display:none}}

/* Избранное — плавающая кнопка справа. В шапке иконка выжимала вёрстку на мобильном,
   а показывать её при пустом списке смысла нет: появляется только когда что-то добавлено. */
.fav-fab{
  position:fixed;right:clamp(14px,2.5vw,28px);bottom:calc(clamp(14px,2.5vw,28px) + var(--tap) + 12px);
  z-index:52;
  width:var(--tap);height:var(--tap);
  display:flex;align-items:center;justify-content:center;
  background:#fff;color:var(--err);
  border:1px solid var(--line);border-radius:50%;
  box-shadow:var(--sh-2);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity var(--dur),transform var(--dur),visibility var(--dur),box-shadow var(--dur);
}
.fav-fab.is-shown{opacity:1;visibility:visible;transform:none}
.fav-fab:hover{box-shadow:var(--sh-3)}
.fav-fab svg{width:22px;height:22px;fill:currentColor;stroke:currentColor;stroke-width:1.5}
.fav-fab__count{
  position:absolute;top:-4px;right:-4px;
  min-width:20px;height:20px;padding:0 5px;
  display:flex;align-items:center;justify-content:center;
  background:var(--err);color:#fff;border-radius:10px;
  font-size:11px;font-weight:700;line-height:1;border:2px solid #fff;
}
/* Кнопка «в избранное» в блоке покупки карточки товара */
.btn--fav[aria-pressed=true]{border-color:var(--err);color:var(--err)}
.btn--fav[aria-pressed=true] svg{fill:var(--err)}
.btn--fav svg{fill:none;stroke:currentColor;stroke-width:1.8}

/* Пустое состояние (избранное) */
.empty{text-align:center;max-width:520px;margin:0 auto;padding:clamp(28px,5vw,56px) 0}
.empty svg{width:72px;height:72px;margin:0 auto 18px;color:var(--line-2)}
.empty h2{margin-bottom:10px}
.empty p{color:var(--text-2);margin-bottom:22px}