/* ============================================================
   ШРИФТЫ — свои, с нашего сервера (OFL, скачаны с Google Fonts).
   Отдельный хост fonts.googleapis.com на медленном мобильном 4G
   стоил лишних соединений до первой отрисовки. Кириллические файлы
   подгружаются заранее (preload в head-assets.html).
   ============================================================ */
@font-face{font-family:"Literata";font-style:normal;font-weight:600 700;font-display:swap;src:url(/assets/fonts/literata-cyrillic.woff2) format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:"Literata";font-style:normal;font-weight:600 700;font-display:swap;src:url(/assets/fonts/literata-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:"Manrope";font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/manrope-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-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/manrope-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}

/* ============================================================
   ТОКЕНЫ
   ============================================================ */
:root{
  /* тёплая бумага и графит; зелень — точечный акцент, латунь — на тёмном */
  --paper:#F8F7F4;
  --surface:#FFFFFF;
  --surface-2:#F1EFEA;
  --edge:#E6E3DD;
  --edge-strong:#D3CFC7;
  --ink:#23211E;
  --ink-2:#4B4741;
  --muted:#6C6862;
  --pine:#14554A;
  --pine-700:#0F443B;
  --pine-100:#E8EEEC;
  --ember:#8A3E12;

  /* тёмные секции, подвал и кнопки */
  --night:#26241F;
  --night-2:#332F29;
  --frost:#F2F0EB;
  --frost-dim:#AFAAA2;
  --brass:#D8C9A8;
  --brass-soft:#F0EDE5;

  /* тона древесины по температуре */
  --tone:#C08A56;
  --tone-osina:#C79059;
  --tone-olha:#8C5330;

  --r-s:8px;
  --r-m:14px;
  --r-l:20px;
  /* «лист»: три скругления больших, одно маленькое */
  --leaf:20px 20px 20px 6px;
  --shadow-s:0 1px 2px rgba(35,33,30,.05), 0 8px 22px -14px rgba(35,33,30,.18);
  --shadow-m:0 8px 20px -10px rgba(35,33,30,.14), 0 32px 60px -34px rgba(35,33,30,.24);
  --wrap:1240px;
  --gut:clamp(16px,4vw,40px);

  --f-disp:"Literata",Georgia,"Times New Roman",serif;
  --f-body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* волнистый штрих и годовые кольца — общие мотивы оформления */
  --wave-green:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='9' viewBox='0 0 26 9'%3E%3Cpath d='M1 5c5-6 8 6 12 0s8-6 12 0' fill='none' stroke='%2314554A' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  --wave-brass:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='9' viewBox='0 0 26 9'%3E%3Cpath d='M1 5c5-6 8 6 12 0s8-6 12 0' fill='none' stroke='%23D8C9A8' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  --rings:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23D8C9A8' stroke-opacity='.30'%3E%3Cellipse cx='100' cy='100' rx='18' ry='15' stroke-width='1.6'/%3E%3Cellipse cx='99' cy='101' rx='34' ry='29' stroke-width='1.4'/%3E%3Cellipse cx='98' cy='102' rx='52' ry='45' stroke-width='1.3'/%3E%3Cellipse cx='97' cy='103' rx='70' ry='62' stroke-width='1.2'/%3E%3Cellipse cx='96' cy='104' rx='88' ry='79' stroke-width='1.1'/%3E%3C/g%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden;max-width:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-body);font-size:16px;line-height:1.62;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--pine);outline-offset:3px;border-radius:4px}

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;z-index:200;background:var(--pine);color:#fff;padding:12px 18px;border-radius:0 0 8px 0}
.skip:focus{left:0}

/* ============================================================
   ТИПОГРАФИКА
   ============================================================ */
h1,h2,h3,h4,.hero-title{font-family:var(--f-disp);font-weight:600;line-height:1.14;letter-spacing:-.012em;margin:0}
h1,.hero-title{font-size:clamp(31px,5.4vw,58px);line-height:1.07;letter-spacing:-.022em}
h2{font-size:clamp(25px,3.5vw,40px);letter-spacing:-.018em}
h3{font-size:clamp(17px,1.7vw,21px)}
p{margin:0}
.eyebrow{
  font-family:var(--f-body);font-size:12px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink);
  display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:26px;height:9px;flex:none;background:var(--wave-green) no-repeat center/contain}
.lead{font-size:clamp(15.5px,1.35vw,18.5px);color:var(--ink-2);line-height:1.66;max-width:62ch}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}

section{padding-block:clamp(56px,7.5vw,104px);position:relative}
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:clamp(28px,3.6vw,48px)}
.sec-head > div{max-width:660px}
.sec-head h2{margin-top:14px}

/* ============================================================
   КНОПКИ
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;border-radius:100px;border:1.5px solid transparent;
  font-weight:700;font-size:15px;line-height:1.2;cursor:pointer;
  transition:transform .18s cubic-bezier(.2,.8,.3,1),background .18s,color .18s,border-color .18s,box-shadow .18s,filter .18s;
  text-align:center;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--night);color:var(--frost);box-shadow:0 8px 20px -10px rgba(35,33,30,.7)}
.btn-primary:hover{background:var(--night-2);box-shadow:0 12px 26px -10px rgba(35,33,30,.75)}
.btn-ghost{background:transparent;border-color:var(--edge-strong);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink);background:rgba(36,31,28,.045)}
.btn-sm{padding:10px 17px;font-size:14px}
.btn-block{width:100%}

/* ============================================================
   ШАПКА
   ============================================================ */
.topline{
  background:var(--night);color:var(--frost-dim);font-size:12.5px;
  padding:8px 0;font-family:var(--f-body);font-weight:600;letter-spacing:.01em;
}
.topline .wrap{display:flex;gap:18px;justify-content:space-between;align-items:center;flex-wrap:wrap}
.topline b{color:#fff;font-weight:600}
.topline .tl-r{display:flex;gap:18px;opacity:.9}

header.hd{position:sticky;top:0;z-index:90;background:rgba(246,247,244,.86);backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .25s,box-shadow .25s}
header.hd.scrolled{border-bottom-color:var(--edge);box-shadow:0 1px 0 rgba(21,26,21,.03), 0 12px 24px -16px rgba(21,26,21,.18)}
section[id]{scroll-margin-top:88px}
@media (max-width:760px){ section[id]{scroll-margin-top:66px} }
.hd-in{display:flex;align-items:center;gap:clamp(14px,2.5vw,34px);height:70px}
.logo{display:flex;align-items:center;gap:11px;flex-shrink:0}
.logo-mark{
  width:36px;height:36px;border-radius:10px;flex-shrink:0;
  background:linear-gradient(155deg,#E8D3B4 0%,#C89A5E 38%,#8E5A2E 72%,#4E2C12 100%);
  position:relative;
}
.logo-mark::after{
  content:"";position:absolute;inset:0;border-radius:10px;
  background:repeating-linear-gradient(96deg,rgba(255,255,255,.16) 0 1px,transparent 1px 5px);
}
.logo-txt{font-family:var(--f-disp);font-weight:700;font-size:17px;letter-spacing:-.03em;line-height:1}


.nav{display:flex;gap:3px;margin-left:auto}
.nav a{padding:9px 13px;border-radius:100px;font-size:14.5px;font-weight:500;color:var(--ink-2);white-space:nowrap;transition:background .16s,color .16s}
.nav a:hover{background:var(--surface-2);color:var(--ink)}
.hd-cta{display:flex;align-items:center;gap:12px;flex-shrink:0}
.hd-tel{font-family:var(--f-mono);font-weight:600;font-size:15px;white-space:nowrap}
.burger{display:none;width:44px;height:44px;border:1px solid var(--edge-strong);background:var(--surface);border-radius:11px;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:4px}
.burger span{display:block;width:16px;height:1.6px;background:var(--ink);border-radius:2px;transition:transform .22s,opacity .22s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.6px) rotate(-45deg)}

@media (max-width:1080px){
  .nav{position:absolute;top:100%;left:0;right:0;background:var(--paper);flex-direction:column;padding:14px var(--gut) 26px;border-bottom:1px solid var(--edge);gap:2px;display:none;box-shadow:var(--shadow-m);max-height:calc(100vh - 110px);overflow-y:auto}
  .nav.open{display:flex}
  .nav a{padding:13px 14px;font-size:16px}
  .burger{display:flex}
  .hd-tel{display:none}
  .hd-cta{margin-left:auto}
}
@media (max-width:520px){ .hd-cta .btn{display:none} .topline .tl-r{display:none} }

/* ============================================================
   ГЕРОЙ
   ============================================================ */
.hero{padding-top:clamp(38px,5vw,64px);padding-bottom:clamp(44px,5vw,76px);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(28px,4.4vw,64px);align-items:center}
.hero .hero-title{margin:18px 0 20px}
.hero h1.eyebrow{line-height:inherit}
.hero .hero-title .warm{
  background:linear-gradient(96deg,#C89A5E,#8E5A2E 55%,#5A3316);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.hero-facts{display:flex;gap:clamp(16px,3vw,34px);flex-wrap:wrap;margin-top:34px;padding-top:26px;border-top:1px solid var(--edge)}
.hero-facts div{min-width:96px}
.hero-facts b{display:block;font-family:var(--f-disp);font-size:clamp(19px,2.1vw,25px);font-weight:600;letter-spacing:-.03em}
.hero-facts span{font-size:12.5px;color:var(--muted);line-height:1.35;display:block;margin-top:4px}

/* --- ПОДПИСЬ ПРОЕКТА: температурный диск --- */
.kiln{
  background:var(--surface);border:1px solid var(--edge);border-radius:var(--r-l);
  padding:clamp(20px,2.4vw,30px);box-shadow:var(--shadow-m);position:relative;overflow:hidden;
}
.kiln-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px}
.kiln-label{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.kiln-tag{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:100px;background:var(--pine-100);color:var(--pine);letter-spacing:.04em;text-transform:none;font-size:10px}
.kiln-temp{font-family:var(--f-disp);font-size:clamp(30px,4vw,46px);font-weight:700;letter-spacing:-.045em;line-height:1;color:var(--ink)}
.kiln-temp sup{font-size:.42em;font-weight:600;vertical-align:super;margin-left:2px;color:var(--muted)}

.board{
  height:clamp(120px,15vw,166px);border-radius:var(--r-m);position:relative;overflow:hidden;
  background:var(--tone);transition:background .35s ease;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.07);
}
.board::before{
  content:"";position:absolute;inset:0;
  background:
    repeating-linear-gradient(91deg,rgba(0,0,0,.11) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(89.4deg,rgba(255,255,255,.14) 0 2px,transparent 2px 11px),
    repeating-linear-gradient(90.6deg,rgba(0,0,0,.07) 0 1px,transparent 1px 19px);
  mix-blend-mode:overlay;
}
.board::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 60% at 18% 42%,rgba(0,0,0,.16),transparent 58%),
    radial-gradient(90% 50% at 76% 68%,rgba(0,0,0,.13),transparent 60%),
    linear-gradient(180deg,rgba(255,255,255,.1),transparent 30%,rgba(0,0,0,.1));
}
.board-tag{
  position:absolute;left:12px;bottom:12px;z-index:2;
  background:rgba(255,255,255,.9);backdrop-filter:blur(6px);
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;
  padding:5px 10px;border-radius:100px;color:var(--ink);
}

.dial{margin-top:20px}
.dial input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:26px;background:transparent;cursor:grab;display:block;
}
.dial input[type=range]:active{cursor:grabbing}
.dial input[type=range]::-webkit-slider-runnable-track{
  height:7px;border-radius:100px;
  background:linear-gradient(90deg,#EADCC4,#D2A971 30%,#A9713D 62%,#63381A);
}
.dial input[type=range]::-moz-range-track{
  height:7px;border-radius:100px;
  background:linear-gradient(90deg,#EADCC4,#D2A971 30%,#A9713D 62%,#63381A);
}
.dial input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:24px;height:24px;border-radius:50%;
  background:var(--surface);border:3px solid var(--pine);margin-top:-8.5px;
  box-shadow:0 3px 10px rgba(21,26,21,.22);
}
.dial input[type=range]::-moz-range-thumb{
  width:20px;height:20px;border-radius:50%;background:var(--surface);
  border:3px solid var(--pine);box-shadow:0 3px 10px rgba(21,26,21,.22);
}
.dial-scale{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:10.5px;color:var(--muted);margin-top:2px}

.kiln-read{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:20px;background:var(--edge);border:1px solid var(--edge);border-radius:var(--r-m);overflow:hidden}
.kiln-read div{background:var(--surface);padding:13px 12px}
.kiln-read b{display:block;font-family:var(--f-mono);font-weight:600;font-size:17px;letter-spacing:-.02em}
.kiln-read span{display:block;font-size:11px;color:var(--muted);line-height:1.3;margin-top:4px}
.kiln-note{margin-top:14px;font-size:12.5px;color:var(--muted);line-height:1.45}

@media (max-width:900px){ .hero-grid{grid-template-columns:1fr;gap:32px} }

/* ============================================================
   БЕГУЩАЯ СТРОКА
   ============================================================ */
.ticker{border-block:1px solid var(--edge);background:var(--surface);padding:13px 0;overflow:hidden;white-space:nowrap}
.ticker-in{display:inline-flex;gap:0;animation:slide 46s linear infinite}
.ticker:hover .ticker-in{animation-play-state:paused}
.ticker span{
  font-family:var(--f-mono);font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-2);padding:0 22px;display:inline-flex;align-items:center;gap:22px;
}
.ticker span::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--tone-olha);opacity:.55}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============================================================
   СВОЙСТВА
   ============================================================ */
.props{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.4vw,18px)}
.prop{
  background:var(--surface);border:1px solid var(--edge);border-radius:var(--r-m);
  padding:clamp(20px,2.2vw,28px);transition:border-color .2s,transform .2s,box-shadow .2s;
}
.prop:hover{border-color:var(--edge-strong);transform:translateY(-3px);box-shadow:var(--shadow-s)}
.prop b{display:block;font-family:var(--f-disp);font-size:clamp(28px,3.4vw,40px);font-weight:700;letter-spacing:-.045em;line-height:1;color:var(--pine)}
.prop h3{margin:14px 0 8px;font-size:16px}
.prop p{font-size:14px;color:var(--muted);line-height:1.55}
@media (max-width:880px){ .props{grid-template-columns:repeat(2,1fr)} }
@media (max-width:460px){ .props{grid-template-columns:1fr} }

/* ============================================================
   КАТАЛОГ
   ============================================================ */
.cat-bar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:26px}
.tabs{display:flex;gap:6px;flex-wrap:wrap;background:var(--surface-2);padding:5px;border-radius:100px}
.tab{
  padding:9px 16px;border-radius:100px;border:0;background:transparent;cursor:pointer;
  font-size:14px;font-weight:500;color:var(--ink-2);transition:background .16s,color .16s,box-shadow .16s;white-space:nowrap;
}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{background:var(--surface);color:var(--pine);font-weight:600;box-shadow:var(--shadow-s)}
.search{
  margin-left:auto;position:relative;min-width:220px;flex:0 1 280px;
}
.search input{
  width:100%;padding:11px 14px 11px 38px;border:1px solid var(--edge);border-radius:100px;
  background:var(--surface);font-size:14px;
}
.search input::placeholder{color:var(--muted)}
.search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);opacity:.45}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:clamp(12px,1.4vw,18px)}
.card{
  background:var(--surface);border:1px solid var(--edge);border-radius:var(--r-m);
  overflow:hidden;display:flex;flex-direction:column;
  transition:border-color .2s,transform .2s,box-shadow .2s;
}
.card:hover{border-color:var(--edge-strong);transform:translateY(-3px);box-shadow:var(--shadow-m)}
.card-vis{height:132px;position:relative;background:var(--tone-osina);overflow:hidden}
.card-vis img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card-vis .pat{position:absolute;inset:0}
.card-vis .sheen{
  position:absolute;inset:0;
  background:radial-gradient(120% 70% at 22% 30%,rgba(255,255,255,.15),transparent 55%),
             linear-gradient(180deg,rgba(255,255,255,.08),transparent 40%,rgba(0,0,0,.16));
}
.badge{
  position:absolute;top:10px;left:10px;z-index:2;
  background:rgba(255,255,255,.92);backdrop-filter:blur(5px);
  font-family:var(--f-mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  padding:4px 9px;border-radius:100px;color:var(--pine);font-weight:600;
}
.card-body{padding:16px 16px 18px;display:flex;flex-direction:column;flex:1;gap:12px}
.card h3{font-size:15.5px;line-height:1.25;font-family:var(--f-body);font-weight:600;letter-spacing:-.01em}
.specs{display:flex;flex-direction:column;gap:5px;font-size:12.5px}
.specs div{display:flex;justify-content:space-between;gap:10px;color:var(--muted)}
.specs div b{color:var(--ink-2);font-family:var(--f-mono);font-weight:500;font-size:12px}
.price{margin-top:auto;padding-top:4px}
.price .p1{font-family:var(--f-disp);font-size:19px;font-weight:600;letter-spacing:-.03em}
.price .p2{font-size:12.5px;color:var(--muted);margin-top:2px}
.card .btn{margin-top:12px}
.card.added .btn-add{background:var(--pine-100);border-color:var(--pine);color:var(--pine)}
.empty{grid-column:1/-1;padding:44px 20px;text-align:center;color:var(--muted);border:1px dashed var(--edge-strong);border-radius:var(--r-m)}
.cat-more{display:flex;justify-content:center;margin-top:22px}
.cat-more .btn{min-width:220px}
.cat-note{margin-top:20px;font-size:13px;color:var(--muted);max-width:70ch}

/* ============================================================
   СМЕТА (панель)
   ============================================================ */
.est-fab{
  position:fixed;right:20px;bottom:20px;z-index:95;
  display:none;align-items:center;gap:10px;padding:14px 20px;border-radius:100px;border:0;
  background:var(--pine);color:#fff;font-weight:600;font-size:15px;cursor:pointer;
  box-shadow:0 10px 30px rgba(44,70,50,.36);
}
.est-fab.show{display:inline-flex}
.est-fab .cnt{background:rgba(255,255,255,.22);border-radius:100px;padding:1px 9px;font-family:var(--f-mono);font-size:13px}

.est-back{position:fixed;inset:0;background:rgba(21,26,21,.4);z-index:96;opacity:0;pointer-events:none;transition:opacity .25s}
.est-back.open{opacity:1;pointer-events:auto}
.est{
  position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);z-index:97;
  background:var(--paper);border-left:1px solid var(--edge);
  transform:translateX(102%);transition:transform .3s cubic-bezier(.2,.7,.3,1);
  display:flex;flex-direction:column;
}
.est.open{transform:none}
.est-hd{padding:20px var(--gut);border-bottom:1px solid var(--edge);display:flex;justify-content:space-between;align-items:center;gap:12px}
.est-hd h3{font-size:18px}
.est-close{width:38px;height:38px;border-radius:10px;border:1px solid var(--edge-strong);background:var(--surface);cursor:pointer;font-size:18px;line-height:1}
.est-list{flex:1;overflow-y:auto;padding:14px var(--gut);display:flex;flex-direction:column;gap:10px}
.est-item{background:var(--surface);border:1px solid var(--edge);border-radius:var(--r-m);padding:13px 14px}
.est-item .t{font-size:14px;font-weight:600;line-height:1.3;padding-right:26px;position:relative}
.est-item .rm{position:absolute;right:0;top:-2px;border:0;background:transparent;cursor:pointer;color:var(--muted);font-size:17px;line-height:1;padding:2px 4px}
.est-item .rm:hover{color:var(--ember)}
.est-row{display:flex;align-items:center;gap:8px;margin-top:11px}
.est-row input{width:82px;padding:8px 10px;border:1px solid var(--edge);border-radius:9px;background:var(--surface);font-family:var(--f-mono);font-size:13.5px}
.est-row label{font-size:12.5px;color:var(--muted)}
.est-row .sum{margin-left:auto;font-family:var(--f-mono);font-weight:600;font-size:14.5px}
.est-empty{text-align:center;color:var(--muted);font-size:14px;padding:40px 10px;line-height:1.6}
.est-ft{padding:18px var(--gut) calc(18px + env(safe-area-inset-bottom));border-top:1px solid var(--edge);background:var(--surface)}
.est-tot{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.est-tot b{font-family:var(--f-disp);font-size:26px;font-weight:700;letter-spacing:-.04em}
.est-dis{font-size:11.5px;color:var(--muted);line-height:1.45;margin:8px 0 13px}

/* ============================================================
   ПРОЦЕСС
   ============================================================ */
.proc{position:relative}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,22px)}
.step{position:relative;padding-top:26px;border-top:2px solid var(--edge)}
.step.hot{border-top-color:var(--ember)}
.step.hot .n{color:var(--ember)}
.step .n{font-family:var(--f-mono);font-size:12px;font-weight:600;letter-spacing:.12em;color:var(--pine);position:absolute;top:-9px;background:var(--paper);padding-right:9px}
.step h3{font-size:17px;margin:0 0 9px}
.step p{font-size:14px;color:var(--muted);line-height:1.55}
.step .t{font-family:var(--f-mono);font-size:12px;color:var(--ink-2);margin-top:10px;display:inline-block;background:var(--surface);border:1px solid var(--edge);padding:3px 9px;border-radius:100px}
@media (max-width:880px){ .steps{grid-template-columns:repeat(2,1fr)} }
@media (max-width:480px){ .steps{grid-template-columns:1fr} }

/* ============================================================
   ПРИМЕНЕНИЕ
   ============================================================ */
.use-wrap{background:var(--surface);border:1px solid var(--edge);border-radius:var(--r-l);overflow:hidden}
.use-tabs{display:flex;border-bottom:1px solid var(--edge);overflow-x:auto;scrollbar-width:none}
.use-tabs::-webkit-scrollbar{display:none}
.use-tab{
  flex:1;min-width:132px;padding:17px 16px;border:0;background:transparent;cursor:pointer;
  font-size:14.5px;font-weight:500;color:var(--muted);border-bottom:2px solid transparent;
  transition:color .16s,border-color .16s,background .16s;white-space:nowrap;
}
.use-tab:hover{background:var(--surface-2);color:var(--ink)}
.use-tab[aria-selected="true"]{color:var(--pine);font-weight:600;border-bottom-color:var(--pine)}
.use-panel{display:none;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px);padding:clamp(22px,3vw,40px);align-items:center}
.use-panel.on{display:grid}
.use-panel h3{font-size:clamp(19px,2.2vw,26px);margin-bottom:14px}
.use-panel ul{margin:18px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.use-panel li{position:relative;padding-left:26px;font-size:14.5px;color:var(--ink-2);line-height:1.5}
.use-panel li::before{
  content:"";position:absolute;left:0;top:8px;width:13px;height:8px;
  border-left:2px solid var(--pine);border-bottom:2px solid var(--pine);
  transform:rotate(-45deg);border-radius:1px;
}
.use-panel .pick{margin-top:22px;font-size:13.5px;color:var(--muted)}
.use-panel .pick b{color:var(--ink);font-weight:600}
.use-vis{aspect-ratio:4/3;border-radius:var(--r-m);position:relative;overflow:hidden;background:var(--tone-osina)}
.use-vis img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.use-vis .sheen{position:absolute;inset:0;background:linear-gradient(160deg,rgba(255,255,255,.18),transparent 45%,rgba(0,0,0,.22))}
.use-vis .cap{
  position:absolute;left:14px;bottom:14px;background:rgba(255,255,255,.92);
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.07em;padding:6px 11px;border-radius:100px;
}
@media (max-width:820px){ .use-panel.on{grid-template-columns:1fr} .use-vis{order:-1} }

/* ============================================================
   ЗАЯВКА
   ============================================================ */
.cta-band{background:var(--pine);color:#fff;border-radius:var(--r-l);padding:clamp(24px,3.4vw,52px);position:relative;overflow:hidden}
.cta-band::before{
  content:"";position:absolute;right:-90px;top:-90px;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(200,154,94,.5),transparent 66%);pointer-events:none;
}
.cta-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3.4vw,52px);position:relative;z-index:1}
.cta-band h2{color:#fff}
.cta-band .lead{color:rgba(255,255,255,.82);margin-top:14px}
.cta-band .eyebrow{color:#C8DBC2}
.cta-band .eyebrow::before{background:#C8DBC2}
.cta-list{margin:26px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px}
.cta-list li{padding-left:25px;position:relative;font-size:14.5px;color:rgba(255,255,255,.9)}
.cta-list li::before{content:"";position:absolute;left:0;top:8px;width:12px;height:7px;border-left:2px solid #C8DBC2;border-bottom:2px solid #C8DBC2;transform:rotate(-45deg)}
.cta-contacts{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.cta-contacts a{
  display:flex;flex-direction:column;gap:2px;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:12px 18px;transition:background .18s;
}
.cta-contacts a:hover{background:rgba(255,255,255,.18)}
.cta-contacts small{font-size:11px;color:rgba(255,255,255,.62);font-family:var(--f-mono);letter-spacing:.08em;text-transform:uppercase}
.cta-contacts b{font-size:16px;font-weight:600;font-family:var(--f-mono)}

.form{background:var(--surface);border-radius:var(--r-l);padding:clamp(20px,2.6vw,32px);color:var(--ink)}
.field{margin-bottom:14px}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:6px}
.field input,.field textarea,.field select{
  width:100%;padding:13px 15px;border:1px solid var(--edge);border-radius:12px;
  background:var(--paper);font-size:15px;transition:border-color .16s,background .16s;
}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--pine);background:var(--surface);outline:none}
.field textarea{resize:vertical;min-height:88px}
.field.err input,.field.err textarea{border-color:var(--ember);background:#FDF3EE}
.field .msg{display:none;font-size:12px;color:var(--ember);margin-top:5px}
.field.err .msg{display:block}
.consent{font-size:11.5px;color:var(--muted);line-height:1.5;margin-top:12px}
.consent a{text-decoration:underline}
.form-ok{display:none;text-align:center;padding:34px 12px}
.form-ok.on{display:block}
.form-ok .ic{width:56px;height:56px;border-radius:50%;background:var(--pine-100);color:var(--pine);display:grid;place-items:center;margin:0 auto 16px;font-size:26px}
.form-ok h3{margin-bottom:10px}
.form-ok p{color:var(--muted);font-size:14.5px}
@media (max-width:900px){ .cta-grid{grid-template-columns:1fr} }

/* ============================================================
   FAQ
   ============================================================ */
.faq{max-width:900px;margin:0 auto}
.q{border-bottom:1px solid var(--edge)}
.q button{
  width:100%;text-align:left;background:transparent;border:0;cursor:pointer;
  padding:22px 44px 22px 0;font-family:var(--f-body);font-size:clamp(15.5px,1.7vw,18px);font-weight:600;
  position:relative;letter-spacing:-.01em;line-height:1.4;
}
.q button::after{
  content:"";position:absolute;right:8px;top:29px;width:11px;height:11px;
  border-right:2px solid var(--pine);border-bottom:2px solid var(--pine);
  transform:rotate(45deg);transition:transform .22s;
}
.q button[aria-expanded="true"]::after{transform:rotate(-135deg);top:33px}
.q .a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.q .a p{padding:0 40px 24px 0;color:var(--muted);font-size:15px;line-height:1.65}

/* ============================================================
   SEO / ФУТЕР
   ============================================================ */
.seo{background:var(--surface-2);border-top:1px solid var(--edge)}
.seo p{font-size:13.5px;color:var(--muted);line-height:1.72;max-width:100ch}
.seo h2{font-size:clamp(19px,2.2vw,26px);margin-bottom:16px}
.seo .geo{margin-top:16px;font-size:13px;color:var(--muted)}

footer{background:var(--ink);color:#B9C2B5;padding-block:clamp(40px,5vw,64px) 26px}
.ft-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(22px,3vw,44px)}
footer h4{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#7E8A7A;margin-bottom:16px;font-weight:600}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
footer a:hover{color:#fff}
footer .logo-txt{color:#fff}
footer .about{font-size:13.5px;line-height:1.65;margin-top:16px;max-width:38ch}
.ft-bot{margin-top:clamp(30px,4vw,52px);padding-top:22px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px;color:#7E8A7A}
@media (max-width:860px){ .ft-grid{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .ft-grid{grid-template-columns:1fr} }

/* ============================================================
   ТЁМНЫЕ СЕКЦИИ — переопределяют токены для своего поддерева
   ============================================================ */
.dk{
  --paper:#141810;
  --surface:#232B21;
  --surface-2:#191E17;
  --edge:#2E3729;
  --edge-strong:#46523F;
  --ink:#EDF1E7;
  --ink-2:#C2CCB9;
  --muted:#8B9685;
  --pine:#A4CD90;
  --pine-700:#BBDFA8;
  --pine-100:#243020;
  --ember:#E29063;
  --shadow-s:0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.26);
  --shadow-m:0 2px 8px rgba(0,0,0,.36), 0 20px 50px rgba(0,0,0,.44);
  color:var(--ink);
}
section.dk{background:var(--paper);border-block:1px solid #232B21}
.dk .btn-primary{background:var(--pine);color:#111509;box-shadow:0 6px 20px rgba(0,0,0,.4)}
.dk .btn-primary:hover{background:var(--pine-700)}
/* белые плашки на тёмном фоне стали бы нечитаемы — переворачиваем */
.dk .badge{background:rgba(16,20,13,.82);color:var(--pine)}
.dk .board-tag{background:rgba(16,20,13,.8);color:var(--ink)}
.dk .tab[aria-selected="true"]{background:var(--surface);color:var(--pine)}

/* ============================================================
   МОБИЛЬНАЯ ПАНЕЛЬ ДЕЙСТВИЙ
   ============================================================ */
.mbar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:94;
  gap:8px;padding:9px 12px calc(9px + env(safe-area-inset-bottom));
  background:rgba(246,247,244,.94);backdrop-filter:blur(14px);
  border-top:1px solid var(--edge);
}
.mbar-btn{
  flex:1;min-height:50px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:100px;font-weight:600;font-size:15.5px;letter-spacing:-.01em;
  border:1px solid var(--edge-strong);background:var(--surface);color:var(--ink);
}
.mbar-btn.pri{flex:1.35;background:var(--pine);color:#fff;border-color:var(--pine);box-shadow:0 4px 14px rgba(44,70,50,.28)}
.mbar-btn:active{transform:translateY(1px)}

/* ============================================================
   МОБИЛЬНАЯ ОПТИМИЗАЦИЯ
   ============================================================ */
@media (max-width:760px){
  body{padding-bottom:calc(68px + env(safe-area-inset-bottom));-webkit-tap-highlight-color:rgba(44,70,50,.12)}
  .mbar{display:flex}

  section{padding-block:clamp(44px,9vw,64px)}
  .hero{padding-top:26px;padding-bottom:36px}
  .hd-in{height:58px}
  .nav{max-height:calc(100vh - 96px)}

  /* 4 факта в сетку 2×2, а не в кашу из переносов */
  .hero-facts{display:grid;grid-template-columns:1fr 1fr;gap:18px 14px;margin-top:26px;padding-top:22px}
  .hero-facts div{min-width:0}
  .hero-cta{gap:9px}
  .hero-cta .btn{flex:1;min-width:150px;min-height:50px}

  /* iOS зумит поля со шрифтом меньше 16px — не даём */
  .field input,.field textarea,.field select,.search input,.est-row input,.est-row select{font-size:16px}

  /* табы каталога — горизонтальная лента вместо кучи переносов */
  .cat-bar{gap:10px;margin-bottom:20px}
  .tabs{
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);
    border-radius:0;background:transparent;scroll-snap-type:x proximity;
  }
  .tabs::-webkit-scrollbar{display:none}
  .tab{min-height:44px;padding:11px 16px;scroll-snap-align:start;border:1px solid var(--edge);background:var(--surface)}
  .tab[aria-selected="true"]{border-color:var(--pine)}
  .search{margin-left:0;flex:1 1 100%;min-width:0}
  .search input{min-height:46px}

  /* карточки: компактная строка (как в маркетплейсах), а не вертикальная карточка на весь экран */
  .grid{grid-template-columns:1fr;gap:10px}
  .card{flex-direction:row}
  .card-vis{width:108px;flex:0 0 108px;height:auto}
  .badge{font-size:10px;padding:3px 7px;top:6px;left:6px}
  .card-body{padding:10px 12px;gap:5px}
  .card h3{font-size:13px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .specs{flex-direction:row;flex-wrap:wrap;gap:2px 10px;font-size:11px}
  .specs div{gap:3px}
  .specs div b{font-size:10.5px}
  .price{margin-top:2px;padding-top:0;display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
  .price .p1{font-size:15px}
  .price .p2{font-size:10.5px;margin-top:0}
  /* «Добавить в смету» — основное действие каталога, палец должен попадать уверенно */
  .card .btn{margin-top:1px;min-height:44px;padding:7px 16px;font-size:13px;align-self:flex-start}
  .cat-more .btn{min-width:0;width:100%;min-height:48px}

  .props{gap:10px}
  .prop{padding:20px}
  .steps{gap:22px}
  .use-tab{min-height:52px;min-width:120px}
  .q button{padding:19px 40px 19px 0}
  .btn{min-height:48px}

  /* бегунок регулятора печи крупнее — пальцем в 24px попадать неудобно */
  .dial input[type=range]{height:34px}
  .dial input[type=range]::-webkit-slider-thumb{width:30px;height:30px;margin-top:-11.5px}
  .dial input[type=range]::-moz-range-thumb{width:26px;height:26px}

  .cta-band{padding:24px 18px;border-radius:18px}
  .cta-contacts{gap:9px}
  .cta-contacts a{flex:1;min-width:140px}
  .form{padding:20px 16px}

  /* смета выезжает снизу как шторка, а не сбоку */
  .est{
    top:auto;left:0;right:0;width:100%;height:86vh;height:86dvh;
    border-left:0;border-top:1px solid var(--edge);border-radius:20px 20px 0 0;
    transform:translateY(102%);overscroll-behavior:contain;
  }
  .est.open{transform:none}
  .est-hd{padding:16px var(--gut)}
  .est-ft{padding-bottom:calc(16px + env(safe-area-inset-bottom))}
  .est-row input{min-height:44px;width:88px}
  .est-fab{right:12px;bottom:calc(72px + env(safe-area-inset-bottom));padding:12px 18px}
  .est-close{width:44px;height:44px}
}

@media (max-width:400px){
  .hero-facts{gap:14px 10px}
  .hero-facts b{font-size:19px}
  .mbar-btn{font-size:14.5px}
  .cta-contacts a{min-width:100%}
}

/* появление */
.rv{opacity:1}
.rv.pending{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)}
.rv.pending.in{opacity:1;transform:none}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){ .rv.pending{opacity:1;transform:none} }

/* ============================================================
   СТРАНИЦЫ ВТОРОГО УРОВНЯ
   Всё ниже собрано на тех же токенах, что и главная: ни один
   существующий класс, цвет, шрифт или отступ не переопределяется.
   ============================================================ */

/* ── хлебные крошки ── */
.crumbs{padding-top:clamp(18px,2.4vw,26px)}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.06em;color:var(--muted)}
.crumbs li{display:flex;align-items:center;gap:8px}
.crumbs li+li::before{content:"/";opacity:.45}
.crumbs a{color:var(--muted);text-decoration:none;transition:color .16s}
.crumbs a:hover{color:var(--pine)}
.crumbs [aria-current]{color:var(--ink-2)}

/* ── шапка внутренней страницы ── */
.page-head{padding-block:clamp(30px,4vw,52px) clamp(34px,4.4vw,56px)}
.page-head h1{max-width:20ch}
.page-head .lead{margin-top:18px}
.page-head .eyebrow{margin-bottom:16px}
.page-head-facts{display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,44px);margin-top:26px}
.page-head-facts div{display:flex;flex-direction:column;gap:2px}
.page-head-facts b{font-family:var(--f-disp);font-size:clamp(19px,2.2vw,25px);font-weight:700;letter-spacing:-.03em;color:var(--pine)}
.page-head-facts span{font-size:12.5px;color:var(--muted)}

/* ── плитки категорий ── */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.4vw,18px)}
.tile{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--edge);
  border-radius:var(--r-m);overflow:hidden;transition:border-color .2s,transform .2s,box-shadow .2s}
.tile:hover{border-color:var(--edge-strong);transform:translateY(-3px);box-shadow:var(--shadow-s)}
.tile-vis{position:relative;aspect-ratio:16/10;overflow:hidden}
.tile-vis img{width:100%;height:100%;object-fit:cover}
.tile-vis .pat{position:absolute;inset:0}
.tile-body{padding:clamp(16px,1.8vw,22px);display:flex;flex-direction:column;gap:8px;flex:1}
.tile-body h3{font-size:17px}
.tile-body p{font-size:13.5px;color:var(--muted);line-height:1.55;flex:1}
.tile-price{display:flex;align-items:baseline;gap:8px;font-family:var(--f-mono);font-size:13px;color:var(--muted)}
.tile-price b{font-family:var(--f-disp);font-size:21px;font-weight:700;letter-spacing:-.03em;color:var(--ink)}
.tile-more{font-size:13.5px;font-weight:600;color:var(--pine)}
.tile:hover .tile-more{text-decoration:underline}

/* ── таблица размеров ── */
.sizes{width:100%;border-collapse:collapse;font-size:14.5px;background:var(--surface);
  border:1px solid var(--edge);border-radius:var(--r-m);overflow:hidden}
.sizes-wrap{overflow-x:auto;border-radius:var(--r-m)}
.sizes caption{text-align:left;font-size:13px;color:var(--muted);padding:0 4px 12px}
.sizes th,.sizes td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--edge)}
.sizes thead th{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);font-weight:600;background:var(--surface-2)}
.sizes tbody tr:last-child td{border-bottom:0}
.sizes tbody tr:hover{background:var(--pine-100)}
.sizes td.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.sizes td.name{font-weight:500}

/* ── текстовый блок статьи и правовых страниц ── */
.prose{max-width:74ch}
.prose h2{font-size:clamp(21px,2.6vw,30px);margin-top:clamp(34px,4vw,52px)}
.prose h3{margin-top:clamp(24px,3vw,34px)}
.prose p{margin-top:16px;font-size:16px;line-height:1.7;color:var(--ink-2)}
.prose ul,.prose ol{margin:16px 0 0;padding-left:22px;color:var(--ink-2);line-height:1.7}
.prose li+li{margin-top:8px}
.prose a{color:var(--pine);text-decoration:underline;text-underline-offset:3px}
.prose figure{margin:26px 0 0}
.prose figcaption{margin-top:10px;font-size:13px;color:var(--muted)}
.prose table{margin-top:20px}

/* ── список статей ── */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,20px)}
.post{display:flex;flex-direction:column;gap:10px;background:var(--surface);border:1px solid var(--edge);
  border-radius:var(--r-m);padding:clamp(20px,2.2vw,28px);transition:border-color .2s,transform .2s,box-shadow .2s}
.post:hover{border-color:var(--edge-strong);transform:translateY(-3px);box-shadow:var(--shadow-s)}
.post h3{font-size:18px;line-height:1.25}
.post p{font-size:14px;color:var(--muted);line-height:1.55;flex:1}
.post .tile-more{margin-top:4px}

/* ── галерея объектов ── */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,20px)}
.shot{background:var(--surface);border:1px solid var(--edge);border-radius:var(--r-m);overflow:hidden}
.shot-vis{position:relative;aspect-ratio:4/3;background:var(--surface-2)}
.shot-vis img{width:100%;height:100%;object-fit:cover}
.shot-body{padding:clamp(16px,1.8vw,22px)}
.shot-body h3{font-size:16px}
.shot-meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;
  font-family:var(--f-mono);font-size:11.5px;color:var(--muted)}
.shot-body p{margin-top:10px;font-size:13.5px;color:var(--muted);line-height:1.6}

/* ── отзывы ── */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,20px)}
.review{display:flex;flex-direction:column;gap:12px;background:var(--surface);border:1px solid var(--edge);
  border-radius:var(--r-m);padding:clamp(20px,2.2vw,28px)}
.review-txt{font-size:15px;line-height:1.65;color:var(--ink-2)}
.review-who{display:flex;flex-direction:column;gap:2px;margin-top:auto;padding-top:6px}
.review-who b{font-size:14.5px;font-family:var(--f-body);font-weight:600}
.review-who span{font-size:12.5px;color:var(--muted)}

/* ── реквизиты и правовое ── */
.legal{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 26px;background:var(--surface);
  border:1px solid var(--edge);border-radius:var(--r-m);padding:clamp(20px,2.4vw,30px);font-size:14px}
.legal div{display:flex;flex-wrap:wrap;gap:4px 10px;padding-block:7px;border-bottom:1px solid var(--edge)}
.legal div:nth-last-child(-n+2){border-bottom:0}
.legal dt,.legal span:first-child{color:var(--muted);min-width:150px}
.legal b{font-weight:600}

/* ── заглушка под контент, которого ещё нет ── */
.todo{border:1px dashed var(--edge-strong);border-radius:var(--r-m);padding:clamp(20px,2.4vw,30px);
  background:var(--surface-2);color:var(--muted);font-size:14px;line-height:1.6}
.todo b{display:block;font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ember);margin-bottom:8px}

/* ── блок «почему цена такая» ── */
.why-price{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,18px)}
.why-price > div{background:var(--surface);border:1px solid var(--edge);border-radius:var(--r-m);
  padding:clamp(20px,2.2vw,28px)}
.why-price h3{font-size:16px;margin-bottom:8px}
.why-price p{font-size:14px;color:var(--muted);line-height:1.55}

/* ── 404 ── */
.nf{text-align:center;padding-block:clamp(60px,9vw,120px)}
.nf .lead{margin:18px auto 0}
.nf-links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:30px}

@media (max-width:1000px){
  .tiles{grid-template-columns:repeat(2,1fr)}
  .posts,.gallery,.reviews,.why-price{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .tiles,.posts,.gallery,.reviews,.why-price{grid-template-columns:1fr}
  .legal{grid-template-columns:1fr}
  .legal div:nth-last-child(-n+2){border-bottom:1px solid var(--edge)}
  .legal div:last-child{border-bottom:0}
}

/* ============================================================
   ОФОРМЛЕНИЕ «СЕВЕР»
   Палитра, формы и мотивы (волнистый штрих, годовые кольца,
   «лист» — три больших скругления и одно малое) поверх прежней
   вёрстки: разметка и тексты остаются те же.
   ============================================================ */

/* ── шапка и логотип ── */
header.hd{background:rgba(248,247,244,.88);backdrop-filter:saturate(150%) blur(12px);-webkit-backdrop-filter:saturate(150%) blur(12px)}
header.hd.scrolled{box-shadow:0 10px 26px -22px rgba(35,33,30,.7)}
.logo-mark{
  /* знак рисует tools/make_icons.py — та же геометрия, что у favicon.svg */
  border-radius:9px;
  background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 64%22 role=%22img%22 aria-label=%22ThermoEcoWood%22%3E%3Cdefs%3E%3CclipPath id=%22t%22%3E%3Crect width=%2264%22 height=%2264%22 rx=%2215%22/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path=%22url(%23t)%22%3E%3Crect width=%2264%22 height=%2264%22 fill=%22%2326241F%22/%3E%3Ccircle cx=%2212%22 cy=%22118%22 r=%22124%22 fill=%22%23DFC59C%22 stroke=%22%2326241F%22 stroke-width=%221.8%22/%3E%3Ccircle cx=%2212%22 cy=%22118%22 r=%22112%22 fill=%22%23D2A971%22 stroke=%22%2326241F%22 stroke-width=%221.8%22/%3E%3Ccircle cx=%2212%22 cy=%22118%22 r=%22100%22 fill=%22%23C08D55%22 stroke=%22%2326241F%22 stroke-width=%221.8%22/%3E%3Ccircle cx=%2212%22 cy=%22118%22 r=%2288%22 fill=%22%23A0663A%22 stroke=%22%2326241F%22 stroke-width=%221.8%22/%3E%3Ccircle cx=%2212%22 cy=%22118%22 r=%2276%22 fill=%22%237E4826%22 stroke=%22%2326241F%22 stroke-width=%221.8%22/%3E%3Ccircle cx=%2212%22 cy=%22118%22 r=%2264%22 fill=%22%235C3418%22 stroke=%22%2326241F%22 stroke-width=%221.8%22/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
}
.logo-mark::after{display:none}
.logo-txt{font-size:19px;letter-spacing:-.02em;line-height:1.05}

.nav a{font-weight:600}
.nav a:hover{background:rgba(36,31,28,.06)}
.nav a[aria-current="page"]{background:var(--night);color:var(--frost)}
.hd-tel{font-family:var(--f-body);font-weight:700}
.burger{border-radius:100px;border-width:1.5px;background:transparent}
/* Literata и Manrope шире прежних шрифтов: шапку разгружаем раньше */
@media (max-width:1360px){ .nav a{padding:9px 11px} }
/* на ноутбуках и больших экранах в 1160 px содержимого должны уместиться логотип,
   семь пунктов меню, телефон и кнопка сметы, иначе кнопка вылезает за край */
@media (min-width:1081px){
  .hd-in{gap:clamp(14px,1.6vw,22px)}
  .nav a{padding:9px 8px;font-size:14px}
}
@media (max-width:1239px){ .hd-tel{display:none} }

/* ── первый экран: тёмный, с «северным сиянием» и кольцами ── */
.hero{background:var(--night);color:var(--frost);position:relative}
.hero::before,.hero::after{content:"";position:absolute;pointer-events:none}
.hero::before{
  inset:-30% -10% auto -20%;height:130%;
  background:
    radial-gradient(58% 44% at 22% 18%, rgba(216,201,168,.26), transparent 65%),
    radial-gradient(46% 40% at 82% 8%, rgba(20,85,74,.30), transparent 68%),
    radial-gradient(70% 50% at 50% 100%, rgba(27,109,95,.45), transparent 70%);
}
.hero::after{right:-150px;top:-110px;width:560px;height:560px;opacity:.55;background:var(--rings) no-repeat center/contain}
.hero .wrap{position:relative;z-index:2}
.hero .hero-title{color:#fff}
.hero .hero-title .warm{background:linear-gradient(96deg,#EFE3C6,#D8C9A8 40%,#C79059);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .eyebrow{color:var(--brass)}
.hero .eyebrow::before{background-image:var(--wave-brass)}
.hero .lead{color:var(--frost-dim)}
.hero .btn-primary{background:linear-gradient(160deg,#EFE6D2,var(--brass));color:#241F1C;box-shadow:0 8px 22px -10px rgba(216,201,168,.55)}
.hero .btn-primary:hover{filter:brightness(1.06);background:linear-gradient(160deg,#EFE6D2,var(--brass))}
.hero .btn-ghost{border-color:rgba(243,232,216,.34);color:var(--frost)}
.hero .btn-ghost:hover{border-color:var(--frost);background:rgba(243,232,216,.10)}
.hero-facts{border-top-color:rgba(243,232,216,.16)}
@media (min-width:761px){ .hero-facts{display:grid;grid-template-columns:repeat(4,auto);justify-content:start} }
.hero-facts b{color:var(--brass);font-weight:600;letter-spacing:-.02em;white-space:nowrap}
@media (max-width:760px){ .hero::after{width:320px;height:320px;right:-120px;top:-70px;opacity:.4} }
.hero-facts span{color:var(--frost-dim)}
.kiln{border:0;border-radius:var(--leaf);box-shadow:0 30px 70px -30px rgba(0,0,0,.65);color:var(--ink)}
.kiln-label{font-weight:700}
.kiln-temp{font-weight:600;letter-spacing:-.03em}
.kiln-read b{font-family:var(--f-disp);font-weight:600}

/* ── тёмные секции: тёплый графит вместо хвои ── */
.dk{
  --paper:#26241F;
  --surface:#302D27;
  --surface-2:#2B2823;
  --edge:#3F3A33;
  --edge-strong:#5A534B;
  --ink:#F2F0EB;
  --ink-2:#D6D1C8;
  --muted:#AFAAA2;
  --pine:#D8C9A8;
  --pine-700:#EFE6D2;
  --pine-100:#3A352E;
  --ember:#E29063;
  --shadow-s:0 1px 2px rgba(0,0,0,.3), 0 8px 22px -12px rgba(0,0,0,.5);
  --shadow-m:0 8px 20px -10px rgba(0,0,0,.4), 0 32px 60px -30px rgba(0,0,0,.6);
}
section.dk{
  border-block:0;overflow:hidden;
  background:
    radial-gradient(50% 60% at 30% 100%, rgba(216,201,168,.16), transparent 70%),
    radial-gradient(45% 55% at 78% 100%, rgba(20,85,74,.22), transparent 72%),
    var(--paper);
}
.dk .eyebrow{color:var(--brass)}
.dk .eyebrow::before{background-image:var(--wave-brass)}
.dk .btn-primary{background:linear-gradient(160deg,#EFE6D2,var(--brass));color:#241F1C}
.dk .btn-primary:hover{filter:brightness(1.06);background:linear-gradient(160deg,#EFE6D2,var(--brass))}
.dk .btn-ghost:hover{background:rgba(243,232,216,.08)}
.dk .prop{background:rgba(243,232,216,.05);border-color:rgba(243,232,216,.13)}
.dk .prop:hover{background:rgba(243,232,216,.09)}

/* волнистая верхняя кромка у тёмных секций и подвала */
section.dk,footer{
  --wave-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 22C150 4 300 4 450 18S750 38 900 22 1100 6 1200 16V40H0Z'/%3E%3C/svg%3E");
  -webkit-mask:var(--wave-mask) top/100% 40px no-repeat,linear-gradient(#000 0 0) 0 39px/100% calc(100% - 39px) no-repeat;
  mask:var(--wave-mask) top/100% 40px no-repeat,linear-gradient(#000 0 0) 0 39px/100% calc(100% - 39px) no-repeat;
  margin-top:-24px;position:relative;z-index:1;
}

/* ── карточки: форма «лист» ── */
.prop,.card,.tile,.post,.review,.shot,.why-price > div,.step{border-radius:var(--leaf)}
.prop b{font-weight:600;letter-spacing:-.025em}
.prop h3{font-size:17.5px}
.card h3{font-family:var(--f-disp);font-size:16px;letter-spacing:-.008em}
.price .p1,.tile-price b{font-weight:600;letter-spacing:-.015em}
.tile-more,.post .tile-more{font-weight:700;color:var(--ink)}
.tile:hover,.card:hover,.post:hover{border-color:var(--edge-strong);box-shadow:var(--shadow-m)}
@media (min-width:881px){
  .props .prop:nth-child(even),.tiles .tile:nth-child(even){margin-top:clamp(0px,2.4vw,28px)}
}
.badge{font-family:var(--f-body);font-weight:700}
.tabs{background:var(--surface-2)}
.tab{font-weight:600}
.tab[aria-selected="true"]{background:var(--night);color:var(--frost);box-shadow:none}
.dk .tab[aria-selected="true"]{background:var(--brass);color:#241F1C}
.search input{border-width:1.5px;background:var(--paper)}

/* ── технология: шаги карточками с номером в круге ── */
.step{background:var(--surface);border:1px solid var(--edge);padding:22px 20px 24px;box-shadow:var(--shadow-s)}
.step.hot{border-color:var(--edge)}
.step .n{
  position:static;display:grid;place-items:center;width:44px;height:44px;margin-bottom:16px;padding:0;
  border-radius:100px;background:var(--night);color:var(--brass);
  font-family:var(--f-disp);font-size:16px;font-weight:700;letter-spacing:0;
}
.step.hot .n{background:linear-gradient(160deg,var(--brass),#8A6A3A);color:#241F1C}
.step .t{border:0;background:var(--surface-2);font-weight:700;color:var(--muted)}
.step.hot .t{background:var(--brass-soft);color:var(--ember)}

/* ── применение ── */
.use-wrap{border-radius:var(--r-l)}
.use-tab{font-weight:600}
.use-tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--pine)}
.use-vis{border-radius:clamp(36px,7vw,96px) var(--r-l) clamp(36px,7vw,96px) var(--r-l);box-shadow:var(--shadow-m)}
.use-vis .cap{background:rgba(38,36,31,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:var(--frost);font-family:var(--f-body);font-weight:600}
.use-panel li{padding-left:28px}
.use-panel li::before{
  top:.42em;width:15px;height:11px;border:0;transform:none;border-radius:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='11' viewBox='0 0 15 11'%3E%3Cpath d='M7.5 10C7.5 4 4 1 1 1c0 5 3 9 6.5 9zM7.5 10C7.5 4 11 1 14 1c0 5-3 9-6.5 9z' fill='none' stroke='%2314554A' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
}
.use-panel .pick{padding:15px 18px;background:var(--brass-soft);border-radius:var(--r-m);color:#3A342B}

/* ── заявка: графит с кольцами ── */
.cta-band{background:var(--night);border-radius:var(--r-l) var(--r-l) var(--r-l) 8px}
.cta-band::before{right:-160px;top:-160px;width:620px;height:620px;border-radius:0;opacity:.6;background:var(--rings) no-repeat center/contain}
.cta-band .lead{color:var(--frost-dim)}
.cta-band .eyebrow{color:var(--brass)}
.cta-band .eyebrow::before{background:var(--wave-brass) no-repeat center/contain;opacity:1}
.cta-list li{padding-left:30px;color:var(--frost)}
.cta-list li::before{
  top:.2em;width:18px;height:18px;border:0;transform:none;border-radius:100px;
  background:rgba(216,201,168,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 11 11'%3E%3Cpath d='M2 5.6 4.3 8 9 2.6' fill='none' stroke='%23D8C9A8' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
}
.cta-contacts a{background:rgba(243,232,216,.07);border-color:rgba(243,232,216,.14);border-radius:var(--r-m)}
.cta-contacts a:hover{background:rgba(243,232,216,.12);border-color:rgba(216,201,168,.5)}
.cta-contacts small{font-family:var(--f-body);font-weight:600;color:var(--frost-dim)}
.cta-contacts b{font-family:var(--f-body);font-weight:700}
.form{border-radius:var(--r-l);box-shadow:var(--shadow-m)}
.field label{font-weight:700}
.field input,.field textarea,.field select{border-width:1.5px}
.form-ok .ic{background:var(--pine-100)}

/* ── вопросы: карточки с круглой стрелкой ── */
.faq{display:grid;gap:9px}
.q{background:var(--surface);border:1px solid var(--edge);border-radius:var(--r-l);overflow:hidden;transition:border-color .2s}
.q:hover{border-color:var(--edge-strong)}
.q button{padding:19px 64px 19px 22px;font-family:var(--f-disp);letter-spacing:-.005em;line-height:1.35}
.q button::after{
  right:20px;top:19px;width:24px;height:24px;border:0;border-radius:100px;transform:none;
  background:var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5 6 8.5l4-4' fill='none' stroke='%23241F1C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
  transition:transform .3s cubic-bezier(.2,.8,.3,1),background-color .2s;
}
.q button[aria-expanded="true"]::after{transform:rotate(180deg);top:19px;background-color:var(--brass-soft)}
.q .a p{padding:0 22px 21px;color:var(--ink-2)}

/* ── таблицы, крошки, статьи ── */
.sizes{border-radius:var(--r-l)}
.sizes thead th{font-family:var(--f-body);font-weight:700;letter-spacing:.09em}
.sizes td.num{font-family:var(--f-body);font-weight:600}
.sizes tbody tr:hover{background:var(--brass-soft)}
.crumbs ol{font-family:var(--f-body);font-size:13px;letter-spacing:0;font-weight:600}
.page-head-facts b{font-weight:600;letter-spacing:-.02em}
.prose ul{list-style:none;padding-left:0}
.prose ul li{position:relative;padding-left:28px}
.prose ul li::before{
  content:"";position:absolute;left:0;top:.5em;width:15px;height:11px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='11' viewBox='0 0 15 11'%3E%3Cpath d='M7.5 10C7.5 4 4 1 1 1c0 5 3 9 6.5 9zM7.5 10C7.5 4 11 1 14 1c0 5-3 9-6.5 9z' fill='none' stroke='%2314554A' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
}
.shot-meta{font-family:var(--f-body);font-weight:600}
.todo b{font-family:var(--f-body);font-weight:700}

/* ── подвал, SEO, смета, мобильная панель ── */
.seo{background:var(--surface-2);border-top:0}
footer{background:var(--night);color:var(--frost-dim);padding-top:clamp(64px,7vw,92px)}
footer h4{font-family:var(--f-disp);font-size:15px;letter-spacing:0;text-transform:none;color:#fff}
footer a:hover{color:var(--brass)}

.ft-bot{border-top-color:rgba(243,232,216,.14);color:var(--frost-dim)}
.est-fab{background:var(--night);color:var(--frost);box-shadow:0 10px 30px rgba(35,33,30,.4)}
.est-fab .cnt{background:var(--brass);color:#241F1C;font-family:var(--f-body);font-weight:700}
.est-back{background:rgba(38,36,31,.45)}
.est-close{border-radius:100px;border:0;background:var(--surface-2)}
.est-row input{font-family:var(--f-body);border-width:1.5px}
.est-row .sum{font-family:var(--f-disp)}
.mbar{background:rgba(248,247,244,.94)}
.mbar-btn{border-width:1.5px;font-weight:700}
.mbar-btn.pri{background:var(--night);border-color:var(--night);color:var(--frost);box-shadow:0 4px 14px rgba(35,33,30,.28)}
@media (max-width:760px){ body{-webkit-tap-highlight-color:rgba(35,33,30,.1)} }
/* ── страница товара ── */
.card h3 a{color:inherit}
.card h3 a:hover{text-decoration:underline;text-underline-offset:3px}
.prod{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(22px,3.4vw,48px);align-items:start}
.prod-vis{border-radius:var(--leaf);overflow:hidden;aspect-ratio:16/9;box-shadow:var(--shadow-s)}
.prod-vis img{display:block;width:100%;height:100%;object-fit:cover}
.prod-price{font-family:var(--f-disp);font-size:clamp(30px,3.4vw,40px);font-weight:700;line-height:1.1}
.prod-price span{font-family:var(--f-body);font-size:15px;font-weight:500;color:var(--muted)}
.prod-m2{margin-top:6px;color:var(--muted);font-size:15px}
.prod-specs{margin:22px 0 0;border-top:1px solid var(--edge)}
.prod-specs div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--edge);font-size:15px}
.prod-specs dt{color:var(--muted)}
.prod-specs dd{margin:0;font-weight:600;text-align:right}
.prod-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.prod-note{margin-top:14px;font-size:13.5px;color:var(--muted);line-height:1.5}
@media (max-width:880px){ .prod{grid-template-columns:1fr} }
/* ── калькулятор расхода на странице товара ── */
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(16px,2.4vw,30px);margin-top:clamp(18px,2.2vw,26px);background:var(--surface);border:1px solid var(--edge);border-radius:var(--leaf);padding:clamp(18px,2.4vw,28px);box-shadow:var(--shadow-s)}
.calc-in{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-content:start}
.calc-in label{display:flex;flex-direction:column;gap:6px;font-size:13.5px;font-weight:600;color:var(--muted)}
.calc-in input,.calc-in select{font:inherit;font-size:17px;font-weight:600;color:var(--ink);padding:10px 13px;min-height:48px;width:100%;border:1.5px solid var(--edge-strong);border-radius:12px;background:var(--paper)}
.calc-in input:focus,.calc-in select:focus{outline:2px solid var(--brass);outline-offset:1px}
.calc-out{display:flex;flex-direction:column;gap:10px}
.calc-out>div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:10px;border-bottom:1px solid var(--edge)}
.calc-out>div>span{color:var(--muted);font-size:14.5px}
.calc-out b{font-family:var(--f-disp);font-size:clamp(22px,2.4vw,28px);font-weight:700;white-space:nowrap}
.calc-note{font-size:13px;color:var(--muted);line-height:1.5}
@media (max-width:880px){ .calc{grid-template-columns:1fr} }
@media (max-width:380px){ .calc-in{grid-template-columns:1fr} }