/*
Theme Name: Teplo Hub
Author: Septik Hub
Description: Кастомная тема под хаб по отоплению и котельным: разборы, подбор котла/системы, гео. Тёплая дизайн-система (пламя + латунь), общий движок septik/beton-hub.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: teplo-hub
*/

/* ---------- 0. Шрифты, локально ---------- */
@font-face{font-family:Manrope;font-weight:500;font-display:swap;src:url(assets/fonts/manrope-500-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Manrope;font-weight:500;font-display:swap;src:url(assets/fonts/manrope-500-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212}
@font-face{font-family:Manrope;font-weight:700;font-display:swap;src:url(assets/fonts/manrope-700-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Manrope;font-weight:700;font-display:swap;src:url(assets/fonts/manrope-700-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212}
@font-face{font-family:Manrope;font-weight:800;font-display:swap;src:url(assets/fonts/manrope-800-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Manrope;font-weight:800;font-display:swap;src:url(assets/fonts/manrope-800-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212}
@font-face{font-family:Golos;font-weight:400;font-display:swap;src:url(assets/fonts/golos-400-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Golos;font-weight:400;font-display:swap;src:url(assets/fonts/golos-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212}
@font-face{font-family:Golos;font-weight:500;font-display:swap;src:url(assets/fonts/golos-500-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Golos;font-weight:500;font-display:swap;src:url(assets/fonts/golos-500-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212}
@font-face{font-family:Golos;font-weight:600;font-display:swap;src:url(assets/fonts/golos-600-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Golos;font-weight:600;font-display:swap;src:url(assets/fonts/golos-600-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212}
@font-face{font-family:Golos;font-weight:700;font-display:swap;src:url(assets/fonts/golos-700-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Golos;font-weight:700;font-display:swap;src:url(assets/fonts/golos-700-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212}

/* ---------- 1. Токены ---------- */
:root{
  --ink:#211c17; --ink-2:#544e46; --ink-3:#7a736a;
  --bg:#f6f1ea; --surface:#fffdf9; --surface-2:#f0e9df; --surface-3:#e7ded1;
  --line:#e2d9cc; --line-strong:#cdc2b1;
  /* пламя + латунь: белый на #cc3322 = 5.1, текст #cc3322 на тёплом фоне читаем */
  --accent:#cc3322; --accent-hover:#ab2717; --accent-ink:#b02817; --accent-soft:#fbe6df;
  --accent-mark:#cc3322; --on-accent:#fffdf9; --steel:#b7791f;
  --ok:#2f6d3f; --warn:#946015; --bad:#b3261e;
  --radius:8px; --radius-lg:14px;
  --shadow:0 1px 2px rgba(60,40,20,.06), 0 12px 30px -18px rgba(80,50,20,.28);
  --shadow-lift:0 3px 8px -2px rgba(60,40,20,.12), 0 26px 52px -24px rgba(80,50,20,.36);
  --ease:cubic-bezier(.16,1,.3,1);
  --measure:70ch;
  --step--1:clamp(.8rem,.78rem + .1vw,.86rem);
  --step-0:clamp(1rem,.97rem + .14vw,1.06rem);
  --step-1:clamp(1.2rem,1.14rem + .3vw,1.4rem);
  --step-2:clamp(1.5rem,1.36rem + .7vw,2rem);
  --step-3:clamp(1.85rem,1.55rem + 1.4vw,2.9rem);
  --step-4:clamp(2.4rem,1.9rem + 2.4vw,4.4rem);
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem;
  --sp-5:1.5rem; --sp-6:2.25rem; --sp-7:3.5rem; --sp-8:5.5rem;
  --font:Golos,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --font-display:Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --nums:tabular-nums;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#efe9e0; --ink-2:#b7afa3; --ink-3:#8f877b;
    --bg:#1a1613; --surface:#221d18; --surface-2:#28221c; --surface-3:#322a22;
    --line:#38302a; --line-strong:#4b4137;
    --accent:#ff6a4d; --accent-hover:#ff8670; --accent-ink:#ff6a4d; --accent-soft:#3a1b12;
    --accent-mark:#ff6a4d; --on-accent:#1a1613; --steel:#e0a940;
    --ok:#63b978; --warn:#d8a944; --bad:#e8776a;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 30px -18px rgba(0,0,0,.8);
    --shadow-lift:0 3px 8px -2px rgba(0,0,0,.55), 0 26px 54px -26px rgba(0,0,0,.85);
  }
}
:root[data-theme="dark"]{
  --ink:#eceae7; --ink-2:#adb0b4; --ink-3:#8a8e92;
  --bg:#161719; --surface:#1e2022; --surface-2:#22262a; --surface-3:#2a2f33;
  --line:#2f3438; --line-strong:#40464b;
  --accent:#ff6a33; --accent-hover:#ff845a; --accent-ink:#ff6a33; --accent-soft:#3a1c10;
  --accent-mark:#ff6a33; --on-accent:#161719; --steel:#5f97d6;
  --ok:#63b978; --warn:#d8a944; --bad:#e8776a;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 30px -18px rgba(0,0,0,.8);
  --shadow-lift:0 3px 8px -2px rgba(0,0,0,.55), 0 26px 54px -26px rgba(0,0,0,.85);
}

/* ---------- 2. База ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{margin:0;background:var(--bg);color:var(--ink);
  font:var(--step-0)/1.6 var(--font);font-synthesis-weight:none;text-rendering:optimizeLegibility}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--accent-ink);text-underline-offset:.18em;text-decoration-thickness:.06em}
a:hover{color:var(--ink)}
h1 a,h2 a,h3 a,h4 a,.model-card__title a{text-decoration:none}
h2 a:hover,h3 a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px}
/* Вес 500 вместо жирного и отрицательный трекинг — подпись референса. */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:800;line-height:1.1;margin:0 0 var(--sp-4);color:var(--ink);text-wrap:balance;letter-spacing:-.02em}
h1{font-size:var(--step-4);font-weight:700}
h2{font-size:var(--step-3);margin-top:var(--sp-7)}
h3{font-size:var(--step-2);margin-top:var(--sp-6)}
h4{font-size:var(--step-1);margin-top:var(--sp-5);letter-spacing:.02em}
p,ul,ol,dl{margin:0 0 var(--sp-4)}
li+li{margin-top:var(--sp-2)}
small{font-size:var(--step--1);color:var(--ink-3)}
hr{border:0;border-top:1px solid var(--line);margin:var(--sp-7) 0}
code,kbd{font-family:var(--font-mono);font-size:.92em;background:var(--surface-2);padding:.1em .35em}
blockquote{margin:var(--sp-6) 0;padding:var(--sp-5) var(--sp-6);background:var(--surface-2);
  color:var(--ink-2);font-size:var(--step-1);line-height:1.45;letter-spacing:-.02em}
blockquote :last-child{margin-bottom:0}

/* ---------- 3. Раскладка ---------- */
.wrap{width:min(100% - 2.5rem,1200px);margin-inline:auto}
.prose{max-width:var(--measure)}
.stack>*+*{margin-top:var(--sp-5)}
.layout{display:grid;gap:var(--sp-7);align-items:start}
@media (min-width:64rem){.layout{grid-template-columns:minmax(0,1fr) 21rem}}
.aside{display:grid;gap:var(--sp-5)}
@media (min-width:64rem){.aside{position:sticky;top:calc(4.5rem + var(--sp-4))}}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--sp-4);top:var(--sp-4);z-index:99;background:var(--surface);
  padding:var(--sp-3) var(--sp-4);box-shadow:var(--shadow)}

/* ---------- 4. Шапка и подвал ---------- */
.site-head{border-bottom:1px solid var(--line);background:var(--surface);position:sticky;top:0;z-index:40}
.site-head__in{display:flex;align-items:center;gap:var(--sp-5);min-height:4.5rem;padding-block:var(--sp-3)}
.brand{font-family:var(--font-display);font-weight:700;font-size:var(--step-1);letter-spacing:.02em;color:var(--ink);
  text-decoration:none;display:inline-flex;align-items:center;gap:.6rem;flex:none;text-transform:uppercase}
.brand__mark{width:1.8rem;height:1.8rem;background:var(--accent);flex:none;display:grid;
  place-items:center;color:var(--on-accent);font-family:var(--font-display);font-size:1rem;font-weight:700}
.nav{margin-left:auto}
.nav ul{display:flex;gap:var(--sp-5);list-style:none;margin:0;padding:0;flex-wrap:wrap}
.nav li{margin:0}
.nav a{color:var(--ink-2);text-decoration:none;font-size:var(--step--1);font-weight:500;letter-spacing:-.025em}
.nav a:hover,.nav .current-menu-item>a{color:var(--accent-ink)}
.head-cta{flex:none}
@media (max-width:52rem){.nav{width:100%;margin:0;order:3}.nav ul{gap:var(--sp-4)}}
.site-foot{margin-top:var(--sp-8);border-top:1px solid var(--line);background:var(--surface-2);
  padding-block:var(--sp-7);font-size:var(--step--1);color:var(--ink-3)}
.foot-grid{display:grid;gap:var(--sp-6);grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
.foot-grid ul{list-style:none;padding:0;margin:0}
.foot-grid a{color:var(--ink-2);text-decoration:none}
.foot-grid a:hover{color:var(--accent-ink)}
.foot-grid h4{margin:0 0 var(--sp-3);font-size:.75rem;text-transform:uppercase;
  letter-spacing:.04em;color:var(--ink-3);font-weight:600}

/* ---------- 5. Кнопки и метки ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.95rem 1.5rem;font-weight:700;font-size:.92rem;letter-spacing:-.01em;
  border:1px solid transparent;cursor:pointer;text-decoration:none;
  line-height:1;transition:background .16s ease,border-color .16s ease,color .16s ease,transform .1s ease}
.btn--primary{background:var(--accent);color:var(--on-accent)}
.btn--primary:hover{background:var(--accent-hover);color:var(--on-accent)}
.btn--ghost{border-color:var(--line-strong);color:var(--ink);background:transparent}
.btn--ghost:hover{border-color:var(--ink);color:var(--ink)}
.btn--accent{background:var(--ink);color:var(--bg)}
.btn--accent:hover{background:var(--ink-2);color:var(--bg)}
.btn:active:not([disabled]){transform:translateY(1px)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.badge{display:inline-block;padding:.3rem .6rem;font-size:.68rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.03em;background:var(--surface-3);color:var(--ink-2)}
.badge--ok{background:var(--accent);color:var(--on-accent)}
.badge--accent{background:var(--ink);color:var(--bg)}

/* ---------- 6. Поверхности ---------- */
.card{background:var(--surface);border:1px solid var(--line);padding:var(--sp-6)}
.card--raised{border-color:transparent;box-shadow:var(--shadow)}
.card--flush{padding:0;overflow:hidden}
.grid{display:grid;gap:1px;background:var(--line)}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(21rem,1fr))}
.grid>*{background:var(--surface)}
.model-card{display:flex;flex-direction:column;gap:var(--sp-3);text-decoration:none;
  color:inherit;height:100%;padding:var(--sp-5);border:0;transition:background .18s ease}
a.model-card:hover{background:var(--surface-2)}
.model-card__media{aspect-ratio:1/1;background:var(--surface-2);overflow:hidden;display:grid;place-items:center;padding:var(--sp-4)}
.model-card__media img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;transition:transform .4s var(--ease)}
a.model-card:hover .model-card__media img{transform:scale(1.03)}
.model-card__title{font-weight:500;font-size:var(--step-1);letter-spacing:-.04em;margin:0}
.model-card__price{font-variant-numeric:var(--nums);font-size:var(--step-1);font-weight:600;
  letter-spacing:-.035em;color:var(--ink)}
.model-card__meta{font-size:var(--step--1);color:var(--ink-3);margin-top:auto}
a.model-card:hover .model-card__title{color:var(--accent-ink)}

/* ---------- 7. Таблицы ---------- */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:var(--step--1)}
th,td{text-align:left;padding:.95rem 1.1rem;border-bottom:1px solid var(--line);vertical-align:top}
thead th{background:var(--surface-2);font-weight:600;color:var(--ink-2);white-space:nowrap;
  position:sticky;top:0;font-size:.72rem;text-transform:uppercase;letter-spacing:.03em}
tbody tr:last-child td{border-bottom:0}
tbody th{font-weight:500;color:var(--ink-2)}
td.num,th.num{font-variant-numeric:var(--nums);white-space:nowrap}

/* ---------- 8. Содержательные блоки ---------- */
.spec{display:grid;grid-template-columns:auto 1fr;gap:.55rem var(--sp-4);margin:0;font-size:var(--step--1)}
.spec dt{color:var(--ink-3)}
.spec dd{margin:0;font-weight:500}
.callout{border:1px solid var(--line);padding:var(--sp-5);background:var(--surface-2);margin:var(--sp-6) 0}
.callout__title{font-weight:600;margin:0 0 var(--sp-2);display:flex;gap:.55rem;align-items:baseline;
  color:var(--ink);font-size:.78rem;text-transform:uppercase;letter-spacing:.04em}
.callout__title::before{content:"";width:.55rem;height:.55rem;background:var(--accent-mark);flex:none}
.callout--warn .callout__title::before{background:var(--warn)}
.callout--bad .callout__title::before{background:var(--bad)}
.callout :last-child{margin-bottom:0}
.updated{font-size:var(--step--1);color:var(--ink-3);display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.updated__dot{width:.4rem;height:.4rem;background:var(--accent-mark);flex:none}
.toc{background:var(--surface-2);border:1px solid var(--line);padding:var(--sp-5);font-size:var(--step--1)}
.toc ol{margin:0;padding-left:1.2rem}
.toc a{color:var(--ink-2);text-decoration:none}
.toc a:hover{color:var(--accent-ink);text-decoration:underline}
/* Оглавление: сворачиваемое на мобиле (в потоке статьи), раскрытое в сайдбаре на десктопе */
.toc--m{margin:0}
.toc--m>summary{cursor:pointer;font-weight:700;list-style:none}
.toc--m>summary::-webkit-details-marker{display:none}
.toc--m>summary::after{content:"▾";float:right;transition:transform .15s ease}
.toc--m[open]>summary::after{transform:rotate(180deg)}
.toc--m>ol{margin-top:var(--sp-4)}
@media (min-width:64rem){.toc--m{display:none}}
@media (max-width:63.999rem){.toc--d{display:none}}
.faq details{border-bottom:1px solid var(--line);padding:var(--sp-4) 0}
.faq details:first-of-type{border-top:1px solid var(--line)}
.faq summary{cursor:pointer;font-weight:500;letter-spacing:-.03em;list-style:none;
  display:flex;justify-content:space-between;gap:var(--sp-4);align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent-ink);font-weight:400;font-size:1.3em;
  line-height:1;transition:transform .26s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq__body{display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows .3s var(--ease),opacity .22s ease}
.faq details[open] .faq__body{grid-template-rows:1fr;opacity:1}
.faq__inner{overflow:hidden;min-height:0}
.faq__inner>*{margin-top:var(--sp-3);color:var(--ink-2)}
.crumbs{font-size:var(--step--1);color:var(--ink-3);padding-block:var(--sp-4)}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.crumbs li{margin:0;display:flex;gap:.4rem;align-items:center}
.crumbs li+li::before{content:"/";color:var(--line-strong)}
.crumbs a{color:var(--ink-3);text-decoration:none}
.crumbs a:hover{color:var(--accent-ink)}

/* ---------- 9. Подборщик ---------- */
.selector{background:var(--surface);padding:var(--sp-7);box-shadow:var(--shadow)}
.selector__steps{display:grid;gap:var(--sp-6)}
.selector fieldset{border:0;margin:0;padding:0}
.selector legend{font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;
  color:var(--ink-3);margin-bottom:var(--sp-3);padding:0}
.selector__hint{font-size:var(--step--1);color:var(--ink-3);margin:-.35rem 0 var(--sp-3)}
.opts{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.opt{position:relative;flex:1 1 12rem}
.opt input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
/* Осязаемость важнее чистоты: рамка, фон и метка выбора обязательны, */
/* иначе вариант читается как строка таблицы, а не как элемент управления. */
.opt span{display:flex;align-items:center;gap:.6rem;height:100%;
  padding:1rem 1.15rem;font-size:var(--step--1);font-weight:500;letter-spacing:-.025em;
  background:var(--surface-2);border:1px solid var(--line-strong);color:var(--ink);
  transition:border-color .14s ease,background .14s ease,color .14s ease;user-select:none}
.opt span::before{content:"";width:1.05rem;height:1.05rem;flex:none;border-radius:50%;
  border:1.5px solid var(--line-strong);background:var(--surface);
  transition:border-color .14s ease,box-shadow .14s ease}
.opt:hover span{border-color:var(--ink-3);background:var(--surface)}
.opt input:checked+span{background:var(--accent-soft);border-color:var(--accent);
  color:var(--ink);font-weight:600;animation:sh-settle .18s var(--ease)}
.opt input:checked+span::before{border-color:var(--accent);
  box-shadow:inset 0 0 0 4px var(--accent)}
.opt input:focus-visible+span{outline:2px solid var(--accent-ink);outline-offset:2px}
.selector__result{margin-top:var(--sp-7);padding-top:var(--sp-6);border-top:1px solid var(--line);
  transition:opacity .2s var(--ease),filter .2s var(--ease)}
.selector__result[aria-busy="true"]{opacity:.5;filter:saturate(.35)}
.result-head{display:flex;gap:var(--sp-3) var(--sp-4);align-items:center;flex-wrap:wrap;margin-bottom:var(--sp-4)}
.result-head h3{flex:1 1 auto;min-width:12ch;margin:0}
.result-head .model-card__price{margin-left:auto}
.result-why{font-size:var(--step--1);color:var(--ink-2);background:var(--surface-2);
  padding:var(--sp-5);margin-bottom:var(--sp-5)}
.result-why ul{margin:var(--sp-2) 0 0;padding-left:1.1rem}
.is-hidden{display:none}

/* ---------- 10. Формы ---------- */
.field{display:grid;gap:.4rem;margin-bottom:var(--sp-4)}
.field label{font-size:.75rem;font-weight:600;color:var(--ink-3);text-transform:uppercase;letter-spacing:.03em}
.field input,.field textarea,.field select{font:inherit;font-size:var(--step--1);padding:.9rem 1rem;
  border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);width:100%}
.field input:focus,.field textarea:focus{border-color:var(--accent-ink);outline:none;
  box-shadow:0 0 0 3px var(--accent-soft)}
.form-note{font-size:.72rem;color:var(--ink-3);margin-top:var(--sp-3)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-msg{padding:var(--sp-4);font-size:var(--step--1);margin-bottom:var(--sp-4);animation:sh-reveal .3s var(--ease)}
.form-msg--ok{background:var(--accent-soft);color:var(--accent-ink)}
.form-msg--bad{background:var(--surface-3);color:var(--bad)}

/* ---------- 11. Служебное ---------- */
.hero{padding-block:var(--sp-8) var(--sp-6)}
.hero__lead{font-size:var(--step-1);color:var(--ink-2);max-width:var(--measure);letter-spacing:-.02em}
.related{display:grid;gap:1px;list-style:none;padding:0;margin:0;background:var(--line);border:1px solid var(--line)}
/* Словарь терминов */
.glossary{display:grid;gap:0;margin:1.5rem 0}
.glossary dt{font-weight:700;font-size:var(--step-0);margin-top:var(--sp-5);padding-top:var(--sp-4);border-top:1px solid var(--line)}
.glossary dt:first-of-type{border-top:0;margin-top:0;padding-top:0}
.glossary dt a{color:var(--accent-ink);text-decoration:none}
.glossary dt a:hover{text-decoration:underline}
.glossary dd{margin:.3rem 0 0;color:var(--ink-2);font-size:var(--step--1)}

/* Модальная форма заявки */
.sh-modal{border:none;padding:0;max-width:32rem;width:calc(100% - 2rem);border-radius:var(--radius-lg);
  background:var(--surface);color:var(--ink);box-shadow:0 24px 70px rgba(0,0,0,.35)}
.sh-modal::backdrop{background:rgba(20,18,16,.55);backdrop-filter:blur(2px)}
.sh-modal[open]{animation:sh-reveal .2s var(--ease)}
.sh-modal__card{position:relative;display:block;padding:var(--sp-6)}
.sh-modal__close{position:absolute;top:.4rem;right:.6rem;border:none;background:none;line-height:1;
  font-size:2rem;cursor:pointer;color:var(--ink-3);width:2.2rem;height:2.2rem;border-radius:var(--radius)}
.sh-modal__close:hover{color:var(--ink);background:var(--surface-2)}
.sh-modal__title{margin:0 0 .3rem;font-size:var(--step-2)}
.sh-modal__sub{margin:0 0 var(--sp-5);color:var(--ink-2);font-size:var(--step--1)}
.related a{display:block;padding:var(--sp-4);text-decoration:none;background:var(--surface);font-size:var(--step--1)}
.related a:hover{background:var(--surface-2)}
.related__why{display:block;color:var(--ink-3);font-size:.75rem;margin-top:.2rem}
.pagination{display:flex;gap:var(--sp-2);margin-top:var(--sp-7);flex-wrap:wrap}
.pagination .page-numbers{padding:.7rem 1rem;border:1px solid var(--line);text-decoration:none;font-size:var(--step--1)}
.pagination .current{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.entry-content>*{max-width:var(--measure)}
.entry-content>.table-scroll,.entry-content>figure,.entry-content>.grid,
.entry-content>.selector,.entry-content>.wide{max-width:none}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.keyfacts{background:var(--accent-soft);padding:var(--sp-5) var(--sp-6);margin:0 0 var(--sp-6)}
.keyfacts .callout__title{margin:0 0 var(--sp-3);color:var(--accent-ink)}
.keyfacts .callout__title::before{background:var(--accent-mark)}
.keyfacts ul{margin:0;padding-left:1.1rem;font-size:var(--step--1);color:var(--ink)}
.keyfacts li{font-weight:500}

/* ---------- 12. Движение ---------- */
/* Один авторский момент — разрешение подбора; остальное только обратная связь. */
@keyframes sh-resolve{from{opacity:0;clip-path:inset(0 0 100% 0);transform:translateY(.5rem)}
  to{opacity:1;clip-path:inset(0 0 0 0);transform:none}}
@keyframes sh-underline{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes sh-settle{from{transform:scale(.985)}to{transform:none}}
@keyframes sh-reveal{from{opacity:0;clip-path:inset(0 0 100% 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
.selector__result>.card{animation:sh-resolve .46s var(--ease) backwards}
.selector__result>.card:nth-child(2){animation-delay:.07s}
.selector__result>.card:nth-child(3){animation-delay:.14s}
.result-head .badge--ok{position:relative}
.result-head .badge--ok::after{content:"";position:absolute;left:0;right:0;bottom:-.3rem;height:2px;
  background:var(--ink);transform-origin:left;animation:sh-underline .4s var(--ease) .34s backwards}
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .site-head{animation:sh-head-lift linear both;animation-timeline:scroll();animation-range:0 5rem}
    @keyframes sh-head-lift{to{box-shadow:var(--shadow);border-bottom-color:transparent}}}}
@media (prefers-reduced-motion:reduce){
  .result-head .badge--ok::after{animation:none;transform:none}
  .faq__body{transition:none}}

@media (max-width:40rem){
  .selector{padding:var(--sp-5)}
  .card{padding:var(--sp-5)}
  .hero{padding-block:var(--sp-6) var(--sp-5)}
  .opt{flex:1 1 100%}
}

/* ---------- 13. Фильтр каталога ---------- */
.catalog-filter{margin-top:var(--sp-6);padding:var(--sp-5);background:var(--surface-2);
  display:grid;gap:var(--sp-3)}
.catalog-filter__row{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center}
.catalog-filter__label{font-size:.72rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.04em;color:var(--ink-3);min-width:6rem}
.chip{font:inherit;font-size:var(--step--1);font-weight:500;letter-spacing:-.02em;
  padding:.5rem .9rem;border:1px solid var(--line-strong);background:var(--surface);
  color:var(--ink-2);cursor:pointer;transition:.14s ease}
.chip:hover{border-color:var(--ink-3);color:var(--ink)}
.chip.is-active{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}
.catalog-filter__count{margin:var(--sp-1) 0 0;font-size:var(--step--1);color:var(--ink-3)}
.brand-group.is-hidden,.model-card.is-hidden,.catalog-empty.is-hidden{display:none}
@media (max-width:40rem){.catalog-filter__label{min-width:100%;margin-bottom:-.2rem}}

/* ---------- 14. Выпадающее подменю ---------- */
.nav li{position:relative}
.nav .sub-menu{position:absolute;top:100%;left:0;min-width:12rem;background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--shadow);padding:var(--sp-2);margin:0;
  list-style:none;display:grid;gap:2px;opacity:0;visibility:hidden;transform:translateY(4px);
  transition:.16s ease;z-index:50}
.nav li:hover>.sub-menu,.nav li:focus-within>.sub-menu{opacity:1;visibility:visible;transform:none}
.nav .sub-menu a{display:block;padding:.5rem .7rem;font-size:var(--step--1);white-space:nowrap}
.nav .menu-item-has-children>a::after{content:"›";margin-left:.3rem;color:var(--ink-3);
  display:inline-block;transform:rotate(90deg)}
@media (max-width:52rem){.nav .sub-menu{position:static;opacity:1;visibility:visible;transform:none;
  box-shadow:none;border:0;padding:0 0 0 var(--sp-4);background:none}}