/* ===== Шрифты (локальные, без запросов к Google) ===== */
@font-face{font-family:"Golos Text";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/golos-text-cyrillic-400-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Golos Text";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/golos-text-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Golos Text";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/golos-text-cyrillic-500-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Golos Text";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/golos-text-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Golos Text";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/golos-text-cyrillic-600-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Golos Text";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/golos-text-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/montserrat-cyrillic-600-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/montserrat-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/montserrat-cyrillic-700-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/montserrat-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:800;font-display:swap;src:url(fonts/montserrat-cyrillic-800-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:800;font-display:swap;src:url(fonts/montserrat-latin-800-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ===== Токены: тёплая светлая палитра (без тёмной темы) ===== */
:root{
  color-scheme:light;
  --bg:#FAF5EC;          /* сливочный фон */
  --bg-2:#F5ECDF;        /* песочный */
  --panel:#FFFFFF;
  --ink:#2E2925;         /* тёплый графит */
  --ink-soft:#6E645B;
  --line:#EBDFCF;
  --line-2:#F2E9DC;
  --accent:#B8694A;      /* приглушённая глина (вместо яркой терракоты) */
  --accent-2:#D9A487;    /* светлая глина */
  --accent-ink:#95502F;  /* для ссылок и текста на светлом, 5.6:1 */
  --accent-soft:#F5E6DB;
  --green:#1F4E3D;
  --green-2:#2F6A50;
  --green-line:#8FB5A2;
  --green-ink:#1F5A43;
  --green-soft:#E3EEE6;
  --sky-soft:#E4F1F7;
  --rose-soft:#FBE7E4;
  --sun-soft:#FFF3D6;
  --warn:#C0362C;
  /* старые имена — для совместимости со страницами калькуляторов */
  --paper:var(--bg); --pencil:var(--accent-ink); --tape:var(--accent); --tape-ink:#fff;
  --display:"Montserrat", "Golos Text", system-ui, sans-serif;
  --body:"Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r-s:12px; --r-m:20px; --r-l:28px;
  --shadow-s:0 1px 2px rgba(60,40,20,.08), 0 4px 14px rgba(60,40,20,.08);
  --shadow-m:0 2px 6px rgba(60,40,20,.08), 0 16px 40px rgba(60,40,20,.14);
  --shadow-l:0 4px 10px rgba(60,40,20,.10), 0 24px 56px rgba(60,40,20,.18);
  --grad:linear-gradient(135deg, #2F6A50, #1F4E3D); /* основные кнопки и итог — зелёные, белый текст ≥ 6:1 */
  --grad-text:linear-gradient(135deg, #B8694A, #95502F);
  --wrap:1140px;
}

/* ===== База ===== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; color:var(--ink);
  background:var(--bg) url(img/bg-tools.svg) 0 0 / 320px 320px repeat;
  font:400 17px/1.65 var(--body);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent-ink); text-underline-offset:3px; text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
img,svg{max-width:100%}
:focus-visible{outline:3px solid var(--accent-2); outline-offset:2px; border-radius:6px}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 16px}
@media (min-width:700px){ .wrap{padding:0 24px} }
h1,h2,h3{font-family:var(--display); line-height:1.18; letter-spacing:-.01em; margin:0 0 .5em; hyphens:auto; -webkit-hyphens:auto; overflow-wrap:break-word; color:var(--ink)}
h1{font-size:clamp(27px, 4.6vw, 42px); font-weight:800}
h2{font-size:clamp(21px, 3vw, 27px); font-weight:700; margin-top:1.6em}
h3{font-size:18px; font-weight:600; font-family:var(--body); letter-spacing:0; margin-top:1.4em}
p{margin:0 0 1em}
.muted{color:var(--ink-soft)}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ico{display:inline-grid; place-items:center; width:48px; height:48px; border-radius:14px; flex:none; background:var(--accent-soft); color:var(--accent-ink)}
.ico svg{width:26px; height:26px}
.ico.g-dacha{background:var(--green-soft); color:var(--green-ink)}
.ico.g-stroyka{background:var(--accent-soft); color:var(--accent-ink)}
.ico.g-banya{background:var(--rose-soft); color:#A2452E}
.ico.g-sky{background:var(--sky-soft); color:#2D6E8A}
.ico.g-sun{background:var(--sun-soft); color:#9A6A08}

/* ===== Шапка ===== */
/* Шапка: тёплый песок с мягкой текстурой древесных волокон */
.site-head{position:sticky; top:0; z-index:40;
  background:url(img/head-wood.svg) 0 0 / 480px 64px repeat, linear-gradient(180deg, #F5EBDB, #EFE2CD);
  border-bottom:1px solid #E2D0B4; box-shadow:0 8px 24px rgba(60,40,20,.12)}
.site-head .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:94px}
.logo{display:flex; flex:none; align-items:center; gap:11px; color:var(--ink); text-decoration:none}
.logo-img{display:block; height:74px; width:auto}
.head-tag{margin-right:auto; padding-left:16px; border-left:1px solid var(--line); font-size:13px; line-height:1.35; color:var(--ink-soft)}
.head-tag{display:none} /* слоган теперь в полосе над шапкой */
@media (max-width:860px){ .logo-img{height:58px} }
.logo-text{display:flex; flex-direction:column; line-height:1}
.logo-name{font:700 19px/1 var(--display); letter-spacing:-.02em}
.logo-name em{font-style:normal; color:var(--accent)}
.logo-sub{font-size:12.5px; color:var(--ink-soft); margin-top:5px; letter-spacing:.01em}
.site-nav{display:flex; gap:4px; font-size:15px; font-weight:600}
.site-nav a{color:var(--ink); text-decoration:none; padding:9px 14px; border-radius:999px; white-space:nowrap}
.site-nav a:hover{background:rgba(255,255,255,.7)}
.site-nav a[aria-current="page"]{background:var(--green-soft); color:var(--green-ink)}
@media (max-width:860px){
  .site-head .wrap{flex-wrap:wrap; gap:0; min-height:0; padding-top:10px}
  .site-nav{order:2; width:100%; overflow-x:auto; margin:8px -16px 0; padding:0 16px 10px; scrollbar-width:none}
  .site-nav::-webkit-scrollbar{display:none}
  .site-nav a{display:inline-flex; align-items:center; min-height:44px; background:var(--panel); border:1px solid var(--line); padding:0 15px; font-size:15px}
}
.tape{display:none}

/* ===== Хлебные крошки ===== */
.crumbs{font-size:14px; color:var(--ink-soft); margin:22px 0 10px}
.crumbs a{color:var(--ink-soft); text-decoration:none}
.crumbs a:hover{color:var(--accent-ink); text-decoration:underline}

/* ===== Общий заголовок страниц (404, политика) ===== */
.hero{padding:44px 0 12px}
.hero .lead{font-size:clamp(17px, 2.2vw, 20px); max-width:36em; color:var(--ink-soft)}

/* ===== Главная: первый экран ===== */
.home-hero{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:28px; align-items:center; padding:40px 0 18px}
.home-hero .kicker{display:inline-flex; align-items:center; gap:8px; background:var(--green-soft); color:var(--green-ink); font-weight:600; font-size:14px; padding:7px 14px 7px 10px; border-radius:999px; margin-bottom:18px}
.home-hero .kicker svg{width:18px; height:18px}
.home-hero h1{font-size:clamp(30px, 4.8vw, 52px); font-weight:800; line-height:1.1; margin-bottom:.35em}
.home-hero h1 em{font-style:normal; background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent}
.home-hero .lead{font-size:clamp(17px, 2vw, 20px); color:var(--ink-soft); max-width:31em; margin-bottom:24px}
.hero-cta{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:22px}
.hero-art{position:relative}
.hero-art img{display:block; width:100%; height:auto}
.quick{display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0}
.quick a{display:inline-flex; align-items:center; gap:7px; background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:7px 13px 7px 9px; color:var(--ink); text-decoration:none; font-size:14.5px; box-shadow:var(--shadow-s)}
.quick a:hover{border-color:var(--accent-2)}
.quick svg{width:18px; height:18px; color:var(--accent)}
@media (max-width:860px){
  .home-hero{grid-template-columns:1fr; padding-top:24px; gap:8px}
  .hero-art{max-width:420px; margin:10px auto 0}
}

/* ===== Полоса доверия ===== */
.trust{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; list-style:none; margin:26px 0 8px; padding:0}
.trust li{display:flex; gap:12px; align-items:center; background:var(--panel); border-radius:var(--r-m); padding:14px 16px; box-shadow:var(--shadow-s); font-size:14.5px; line-height:1.35}
.trust b{display:block; font-size:15.5px; margin-bottom:2px}
.trust .ico{width:42px; height:42px; border-radius:12px}
.trust .ico svg{width:23px; height:23px}
@media (max-width:980px){ .trust{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width:520px){ .trust{grid-template-columns:1fr} }

/* ===== Разделы и карточки калькуляторов ===== */
.index-group{margin:56px 0 0; scroll-margin-top:112px}
.group-head{display:flex; align-items:center; gap:14px; margin:0 0 18px}
.group-head h2{margin:0; font-size:clamp(22px, 3vw, 30px); font-weight:800}
.group-head p{margin:2px 0 0; color:var(--ink-soft); font-size:15px}
.calc-list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:14px}
.calc-list a{position:relative; display:flex; flex-direction:column; height:100%; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-m); color:var(--ink); text-decoration:none; box-shadow:var(--shadow-s); overflow:hidden; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.calc-list a:hover{transform:translateY(-4px); box-shadow:var(--shadow-l); border-color:var(--green-line)}
.card-img{display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; background:var(--bg-2); transition:transform .4s ease}
.calc-list a:hover .card-img,.posts a:hover .card-img{transform:scale(1.04)}
.card-body{position:relative; display:flex; flex-direction:column; gap:6px; flex:1; padding:16px 18px 16px; background:var(--panel)}
.card-img + .card-body .ico{margin:-42px 0 4px; border:3px solid var(--panel); box-shadow:var(--shadow-s); width:52px; height:52px}
.calc-list .ico{margin-bottom:8px}
.calc-list .t{font-weight:600; font-size:18px; line-height:1.3}
.calc-list .d{color:var(--ink-soft); font-size:14.5px; line-height:1.45; flex:1}
.calc-list .q{display:block; margin-top:8px; font-weight:600; font-size:14px; color:var(--accent-ink)}
.calc-list .q svg{width:16px; height:16px; vertical-align:-3px; margin-left:2px; transition:transform .18s ease}
.calc-list a:hover .q svg{transform:translateX(3px)}
.soon{padding:14px 18px; color:var(--ink-soft); font-size:15px}

/* ===== Как это работает ===== */
.how{margin:56px 0 0; background:var(--panel); border-radius:var(--r-l); padding:28px clamp(18px,4vw,40px) 30px; box-shadow:var(--shadow-s)}
.how h2{margin-top:0}
.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:22px; counter-reset:s}
.steps li{counter-increment:s; position:relative; padding-top:48px}
.steps li::before{content:counter(s); position:absolute; top:0; left:0; width:36px; height:36px; border-radius:50%; background:var(--grad); color:#fff; font:800 16px/36px var(--display); text-align:center}
.steps b{display:block; font-size:17px; margin-bottom:4px}
.steps p{margin:0; color:var(--ink-soft); font-size:15.5px}
@media (max-width:760px){ .steps{grid-template-columns:1fr} }

/* ===== Статьи на главной ===== */
.posts{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:14px}
.posts a{display:flex; flex-direction:column; height:100%; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-m); color:var(--ink); text-decoration:none; box-shadow:var(--shadow-s); overflow:hidden; transition:transform .18s ease, box-shadow .18s ease}
.posts a:hover{transform:translateY(-4px); box-shadow:var(--shadow-l)}
.posts .card-body{padding:16px 18px 18px}
.posts .t{display:block; font-weight:600; font-size:17px; line-height:1.35; margin-bottom:6px}
.posts .d{display:block; color:var(--ink-soft); font-size:14.5px; line-height:1.45}
.see-all{display:inline-flex; align-items:center; gap:6px; margin-top:14px; font-weight:600}
.see-all svg{width:16px; height:16px}

/* ===== Страница калькулятора ===== */
.calc-head{display:flex; gap:18px; align-items:flex-start; padding:4px 0 6px}
.calc-head .ico{width:64px; height:64px; border-radius:18px; margin-top:4px}
.calc-head .ico svg{width:34px; height:34px}
.calc-head h1{margin-bottom:.3em}
.calc-head .lead{max-width:40em; color:var(--ink-soft); margin:0}
@media (max-width:560px){ .calc-head .ico{display:none} }
.calc{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:22px; align-items:start; margin:22px 0 8px}
@media (max-width:860px){ .calc{grid-template-columns:1fr} }
.panel{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-m); padding:22px; box-shadow:var(--shadow-m)}
.panel > h2:first-child{margin-top:0; font-size:18px; font-family:var(--body); font-weight:600; letter-spacing:0}
.panel h2{font-size:18px; font-family:var(--body); font-weight:600; letter-spacing:0; margin:1.2em 0 .7em}

.tabs{display:flex; gap:4px; flex-wrap:wrap; margin:0 0 18px; background:var(--bg-2); padding:4px; border-radius:14px}
.tabs button{
  flex:1 1 auto; font:500 15px/1 var(--body); color:var(--ink-soft); background:transparent; cursor:pointer;
  border:0; border-radius:11px; padding:11px 14px; min-height:44px; transition:background .15s ease, color .15s ease;
}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-pressed="true"]{background:var(--panel); color:var(--ink); font-weight:600; box-shadow:var(--shadow-s)}

.field{margin:0 0 16px}
.field label,.field .label{display:block; font-weight:500; font-size:16px; margin:0 0 7px}
.field .hint{display:block; font-size:14.5px; color:var(--ink-soft); margin-top:5px; line-height:1.45}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.row3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px}
@media (max-width:420px){ .row3{grid-template-columns:1fr 1fr} }
.unit{position:relative}
.unit input{padding-right:46px}
.unit::after{content:attr(data-unit); position:absolute; right:14px; top:50%; transform:translateY(-50%); color:var(--ink-soft); font-size:15px; pointer-events:none}
input[type="text"],input[type="number"],select{
  width:100%; font:500 17px/1.2 var(--body); color:var(--ink); background:var(--bg);
  border:1.5px solid var(--line); border-radius:var(--r-s); padding:12px 14px; min-height:50px;
  appearance:none; -webkit-appearance:none; transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
input[type="text"]:hover,select:hover{border-color:#DCCBB4}
input[type="text"]:focus,input[type="number"]:focus,select:focus{outline:none; border-color:var(--green-line); background:#fff; box-shadow:0 0 0 4px rgba(47,106,80,.18)}
select{background-image:linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%), linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position:calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size:6px 6px; background-repeat:no-repeat; padding-right:38px}
input[aria-invalid="true"]{border-color:var(--warn); background:#FFF6F5}
.check{display:flex; gap:10px; align-items:flex-start; font-size:15px; margin:0 0 14px; cursor:pointer}
.check input{width:22px; height:22px; margin:2px 0 0; accent-color:var(--green-2); flex:none}

/* ===== Список в магазин ===== */
.list{position:sticky; top:112px; background:var(--panel); border:1px solid var(--line-2); border-radius:var(--r-m); overflow:hidden; box-shadow:var(--shadow-m)}
.list-head{position:relative; background:var(--grad); color:#fff; padding:18px 22px 20px; overflow:hidden}
.list-head::after{content:""; position:absolute; right:-30px; top:-40px; width:150px; height:150px; border-radius:50%; background:rgba(255,255,255,.14)}
.list-head .k{position:relative; font:600 14px/1.3 var(--body); opacity:.95}
.list-head .big{position:relative; font:800 clamp(34px,6vw,44px)/1.05 var(--display); margin-top:8px; font-variant-numeric:tabular-nums}
.list-head .big small{font-size:.45em; font-weight:600}
.list-body{padding:8px 22px 4px}
.list-body ul{list-style:none; margin:0; padding:0}
.list-body li{display:flex; justify-content:space-between; gap:14px; padding:12px 0; border-bottom:1px dashed var(--line); font-size:16px}
.list-body li:last-child{border-bottom:0}
.list-body li b{font-weight:600; white-space:nowrap; font-variant-numeric:tabular-nums; text-align:right}
.list-body .sub{display:block; font-size:14px; color:var(--ink-soft)}
.list-note{font-size:14.5px; color:var(--ink-soft); padding:0 22px 14px; margin:0}
.list-actions{display:flex; gap:8px; padding:4px 22px 22px; flex-wrap:wrap}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font:600 16px/1 var(--body); border-radius:var(--r-s); padding:13px 18px; min-height:48px; cursor:pointer; text-decoration:none;
  border:0; background:var(--grad); color:#fff; box-shadow:0 4px 14px rgba(31,78,61,.25);
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn:hover{box-shadow:0 6px 18px rgba(31,78,61,.33); text-decoration:none}
.btn.ghost{background:var(--panel); color:var(--ink); border:1.5px solid var(--line); box-shadow:none}
.btn.ghost:hover{border-color:var(--accent-2)}
.btn.big{padding:16px 22px; font-size:16px; border-radius:14px}
.btn svg{width:18px; height:18px}
.btn:active{transform:translateY(1px)}
.error{color:var(--warn); font-size:15px; padding:16px 22px; margin:0}
@media (max-width:860px){ .list{position:static; scroll-margin-top:146px} }

/* ===== Статья ===== */
.article{max-width:46em; margin:18px 0 40px}
.article ul,.article ol{padding-left:1.2em}
.article li{margin:.3em 0}
.article li::marker{color:var(--accent)}
.article img{border-radius:var(--r-m)}
.formula{background:var(--sun-soft); border-left:4px solid var(--accent-2); padding:14px 16px; border-radius:0 var(--r-s) var(--r-s) 0; margin:0 0 1em; font-size:16px}
.table-wrap{overflow-x:auto; margin:0 0 1em; border-radius:var(--r-s); border:1px solid var(--line)}
table{border-collapse:collapse; width:100%; background:var(--panel); font-size:15px}
th,td{border-bottom:1px solid var(--line-2); padding:10px 12px; text-align:left}
th{font-weight:600; background:var(--bg-2)}
tr:last-child td{border-bottom:0}
.article > table{border:1px solid var(--line); border-radius:var(--r-s); overflow:hidden}
details{background:var(--panel); border:1px solid var(--line-2); border-radius:var(--r-s); padding:14px 18px; margin:0 0 10px; box-shadow:var(--shadow-s)}
details summary{font-weight:600; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:12px}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+"; flex:none; width:26px; height:26px; border-radius:50%; background:var(--accent-soft); color:var(--accent-ink); font:600 18px/26px var(--body); text-align:center; transition:transform .2s ease}
details[open] summary::after{transform:rotate(45deg)}
details[open] summary{margin-bottom:8px}
details p:last-child{margin-bottom:0}
.more{margin:40px 0 0}
.more ul{list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.more a{display:inline-flex; align-items:center; gap:7px; background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:8px 15px 8px 10px; color:var(--ink); text-decoration:none; font-size:15px; box-shadow:var(--shadow-s)}
.more a svg{width:18px; height:18px; color:var(--accent)}
.more a:hover{border-color:var(--accent-2)}
.ad-slot:empty{display:none}

.article-meta{display:flex; flex-wrap:wrap; gap:6px 16px; font-size:14px; color:var(--ink-soft); margin:-4px 0 18px}
.toc{background:var(--panel); border:1px solid var(--line-2); border-radius:var(--r-m); padding:16px 20px; margin:0 0 1.4em; box-shadow:var(--shadow-s)}
.toc b,.toc strong,.toc h2{display:block; font:600 15px/1.3 var(--body); letter-spacing:0; margin:0 0 8px}
.toc ol,.toc ul{margin:0; padding-left:1.2em}
.toc a{color:var(--ink); text-decoration:none}
.toc a:hover{color:var(--accent-ink); text-decoration:underline}
.note{background:var(--green-soft); border-radius:var(--r-s); padding:14px 16px; margin:0 0 1em; font-size:16px}
.note > :last-child{margin-bottom:0}
.related{margin:36px 0 0}
.related ul{list-style:none; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:10px}
.related li{margin:0}
.related a{display:block; height:100%; background:var(--panel); border:1px solid var(--line-2); border-radius:var(--r-s); padding:12px 14px; color:var(--ink); text-decoration:none; box-shadow:var(--shadow-s); font-weight:500}
.related a:hover{border-color:var(--accent-2)}

/* ===== Подвал: тёмно-зелёный, чтобы чётко отделялся от страницы ===== */
.site-foot{margin-top:72px; background:#173A2D; color:#C9DBD1; font-size:15px; position:relative; box-shadow:0 -10px 40px rgba(20,40,30,.12)}
.site-foot::before{content:""; display:block; height:6px; background:linear-gradient(90deg, var(--green-2), var(--accent) 60%, var(--accent-2))}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:32px; padding:40px 0 28px}
.foot-grid h3{font:700 14px/1.3 var(--body); color:#fff; margin:0 0 14px; text-transform:uppercase; letter-spacing:.06em}
.foot-grid ul{list-style:none; margin:0; padding:0}
.foot-grid li{margin:0 0 9px}
.foot-grid a{color:#C9DBD1; text-decoration:none}
.foot-grid a:hover{color:#fff; text-decoration:underline}
.foot-logo{display:inline-flex; background:#FFFDF8; border-radius:18px; padding:10px 16px 10px 12px; box-shadow:0 6px 18px rgba(0,0,0,.18)}
.foot-logo .logo-img{height:58px}
.foot-about p{margin:16px 0 0; max-width:30em; line-height:1.6}
.foot-bottom{display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; border-top:1px solid rgba(255,255,255,.14); padding:18px 0 28px; font-size:13.5px; color:#A9C2B5}
.foot-bottom a{color:#C9DBD1}
.foot-bottom a:hover{color:#fff}
.foot-links{display:flex; flex-wrap:wrap; gap:6px 18px}
@media (max-width:760px){ .foot-grid{grid-template-columns:1fr 1fr} .foot-about{grid-column:1 / -1} }

/* ===== Cookie ===== */
.cookie{position:fixed; left:12px; right:12px; bottom:12px; max-width:580px; margin:0 auto; z-index:50;
  background:var(--panel); color:var(--ink); border:1px solid var(--line); border-radius:var(--r-m); padding:14px 16px; font-size:14px; line-height:1.45;
  display:flex; gap:14px; align-items:center; box-shadow:0 12px 40px rgba(80,50,20,.2)}
.cookie a{color:var(--accent-ink)}
.cookie .btn{flex:none}
.cookie[hidden]{display:none}

.toast{position:fixed; left:50%; bottom:20px; transform:translateX(-50%); background:var(--ink); color:#fff; padding:11px 18px; border-radius:999px; font-size:14px; z-index:60; box-shadow:var(--shadow-m)}
.toast[hidden]{display:none}

@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{transition:none!important; animation:none!important} }
@media print{
  body{background:#fff} .site-head,.site-foot,.tape,.cookie,.list-actions,.more,.article,.calc > .panel,.calc-head .ico{display:none}
  .calc{display:block} .list{border:0; box-shadow:none} .list-head{background:none; color:#000; padding-left:0}
}
.group-head h2 a{color:inherit; text-decoration:none}
.group-head h2 a:hover{color:var(--accent-ink); text-decoration:underline}

/* ===== Фото: первый экран ===== */
.hero-photo{position:relative; padding:0 0 24px 14px}
.hero-photo > img:first-child{display:block; width:100%; height:auto; aspect-ratio:16/11; object-fit:cover; border-radius:var(--r-l); box-shadow:var(--shadow-m)}
.hero-card{position:absolute; left:0; bottom:0; display:flex; gap:12px; align-items:center; background:var(--panel); border-radius:16px; padding:12px 18px 12px 12px; box-shadow:var(--shadow-m)}
.hero-card .ico{width:42px; height:42px; border-radius:12px}
.hero-card small{display:block; font-size:13px; color:var(--ink-soft)}
.hero-card b{font:800 18px/1.2 var(--display)}
.hero-stamp{position:absolute; right:-14px; top:-18px; width:104px; height:104px; transform:rotate(-12deg); filter:drop-shadow(0 6px 14px rgba(30,50,40,.3))}
@media (max-width:860px){ .hero-photo{max-width:560px; margin:18px auto 0; padding-left:0} .hero-stamp{right:6px; width:78px; height:78px} .hero-card{left:12px} }

/* ===== Разделы-баннеры с фото ===== */
.group-head.banner{position:relative; min-height:170px; align-items:flex-end; padding:22px 24px; border-radius:var(--r-l); overflow:hidden; color:#fff;
  background:linear-gradient(90deg, rgba(22,40,32,.86) 0%, rgba(22,40,32,.55) 50%, rgba(22,40,32,.1) 100%), var(--banner) center/cover no-repeat; box-shadow:var(--shadow-m)}
.group-head.banner h2,.group-head.banner h2 a{color:#fff}
.group-head.banner p{color:rgba(255,255,255,.88)}
.group-head.banner .ico{background:rgba(255,255,255,.92)}
@media (max-width:560px){ .group-head.banner{min-height:140px; padding:18px} }

/* ===== Шапка калькулятора с фото ===== */
.calc-head.has-photo{display:grid; grid-template-columns:auto minmax(0,1fr) minmax(0,360px); gap:20px; align-items:center}
.head-photo{display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; border-radius:var(--r-m); box-shadow:var(--shadow-m)}
@media (max-width:960px){ .calc-head.has-photo{grid-template-columns:auto minmax(0,1fr)} .calc-head .head-photo{grid-column:1 / -1; aspect-ratio:16/7; order:-1} }
@media (max-width:560px){ .calc-head.has-photo{grid-template-columns:1fr} }

/* ===== Фото в статье и в «Как пользоваться» ===== */
.article-photo{display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:var(--r-m); margin:0 0 22px; box-shadow:var(--shadow-s)}
.how.has-photo{overflow:hidden; padding-top:0}
.how-photo{display:block; width:calc(100% + 2 * clamp(18px,4vw,40px)); max-width:none; height:180px; object-fit:cover; margin:0 calc(-1 * clamp(18px,4vw,40px)) 26px}
@media print{ .head-photo,.article-photo,.hero-photo{display:none} }
@media (max-width:600px){ .home-hero .quick{display:none} .home-hero .kicker{font-size:13px} }

/* ===== Поиск в шапке ===== */
.head-search{display:inline-flex; align-items:center; gap:7px; flex:none; min-height:44px; padding:0 16px 0 13px; margin-left:4px;
  font:600 15px/1 var(--body); color:#fff; background:var(--green-2); border:0; border-radius:999px; cursor:pointer; box-shadow:0 3px 10px rgba(31,78,61,.25); transition:background .15s ease}
.head-search:hover{background:var(--green)}
.head-search svg{width:19px; height:19px}
@media (max-width:860px){ .head-search{order:1; margin-left:auto} }
.search-dlg{width:min(640px, calc(100% - 24px)); max-height:min(80vh, 720px); margin:7vh auto auto; padding:0; border:0; border-radius:var(--r-m);
  background:var(--panel); color:var(--ink); box-shadow:0 24px 64px rgba(60,40,20,.28); overflow:hidden; display:flex; flex-direction:column}
.search-dlg:not([open]){display:none}
.search-dlg::backdrop{background:rgba(46,41,37,.45); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px)}
.search-top{display:flex; gap:8px; padding:14px; border-bottom:1px solid var(--line-2)}
.search-field{position:relative; flex:1}
.search-field svg{position:absolute; left:14px; top:50%; transform:translateY(-50%); width:20px; height:20px; color:var(--ink-soft); pointer-events:none}
.search-field input{width:100%; min-height:52px; padding:12px 14px 12px 44px; font:500 18px/1.2 var(--body); color:var(--ink); background:var(--bg); border:1.5px solid var(--line); border-radius:var(--r-s); -webkit-appearance:none; appearance:none}
.search-field input::-webkit-search-cancel-button{-webkit-appearance:none; appearance:none}
.search-field input:focus{outline:none; border-color:var(--green-line); background:#fff; box-shadow:0 0 0 4px rgba(47,106,80,.18)}
.search-close{flex:none; width:52px; min-height:52px; border:0; border-radius:var(--r-s); background:var(--bg-2); color:var(--ink); font-size:20px; cursor:pointer}
.search-res{overflow-y:auto; padding:6px 8px 12px; -webkit-overflow-scrolling:touch}
.search-res h3{margin:12px 10px 6px; font:600 13px/1.3 var(--body); text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft)}
.search-res ul{list-style:none; margin:0; padding:0}
.search-res a{display:flex; align-items:center; gap:12px; min-height:52px; padding:8px 10px; border-radius:12px; color:var(--ink); text-decoration:none; font-size:17px; line-height:1.3}
.search-res a:hover,.search-res a:focus-visible{background:var(--bg-2)}
.search-res a small{display:block; font-size:13.5px; color:var(--ink-soft)}
.search-res .ico{width:40px; height:40px; border-radius:11px}
.search-res .ico svg{width:22px; height:22px}
.search-empty{padding:18px 12px; color:var(--ink-soft)}
@media (max-width:600px){ .search-dlg{margin:0; width:100%; max-width:100%; height:100%; max-height:100%; border-radius:0} }

/* ===== Итог внизу экрана на телефоне ===== */
.mini-res{display:none}
@media (max-width:860px){
  .mini-res:not([hidden]){position:fixed; left:10px; right:10px; bottom:10px; z-index:45; display:flex; align-items:center; gap:10px;
    padding:12px 16px; border-radius:16px; background:var(--grad); color:#fff; text-decoration:none; box-shadow:0 10px 30px rgba(20,50,38,.35)}
  .mini-res .k{flex:1; min-width:0; font-size:14px; line-height:1.25; opacity:.95; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
  .mini-res b{font:800 22px/1 var(--display); white-space:nowrap; font-variant-numeric:tabular-nums}
  .mini-res .go{flex:none; font-size:13px; font-weight:600; background:rgba(255,255,255,.18); padding:7px 10px; border-radius:999px; white-space:nowrap}
  body:has(.mini-res) .site-foot{padding-bottom:80px}
}
@media print{ .mini-res,.head-search,.search-dlg{display:none!important} }

/* ===== Мой список покупок ===== */
.head-list{position:relative; display:inline-flex; align-items:center; gap:7px; flex:none; min-height:44px; padding:0 14px 0 12px; margin-left:4px;
  font:600 15px/1 var(--body); color:var(--ink); background:var(--panel); border:1.5px solid var(--line); border-radius:999px; text-decoration:none}
.head-list:hover{border-color:var(--accent-2); text-decoration:none}
.head-list svg{width:19px; height:19px; color:var(--green-ink)}
.head-list-n{min-width:22px; height:22px; padding:0 6px; border-radius:999px; background:var(--grad); color:#fff; font-size:13px; display:inline-flex; align-items:center; justify-content:center}
.head-list + .head-search{margin-left:8px}
@media (max-width:860px){ .head-list{order:1; margin-left:auto; padding:0 10px} .head-list-t{display:none} }
.spisok{display:grid; gap:18px; max-width:760px; margin:0 0 48px}
.spisok .list{position:static}
.spisok-card .list-head .k{font-size:15px}
.spisok-card .list-head .big{font-size:clamp(28px,5vw,36px)}
.spisok-sub{margin:10px 0 0; font-size:14.5px; color:var(--ink-soft)}
.spisok-toc{margin:6px 0 10px; padding-left:22px}
.spisok-toc li{padding:8px 0; border-bottom:1px dashed var(--line)}
.spisok-toc li:last-child{border-bottom:0}
.spisok-toc b{float:right; margin-left:12px; font-weight:600; white-space:nowrap}
.spisok-empty{background:var(--panel); border:1px solid var(--line-2); border-radius:var(--r-m); padding:22px 24px}
.spisok-empty p{margin:0 0 12px}
@media print{ .head-list,.spisok-hero .lead,.crumbs{display:none!important} .spisok-card{break-inside:avoid; margin-bottom:12px} }

/* ===== Полоса над шапкой ===== */
.head-strip{background:#173A2D; color:#D6E5DC; font-size:13.5px}
.head-strip .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:36px}
.head-strip span:first-child{display:inline-flex; align-items:center; gap:7px}
.head-strip svg{width:16px; height:16px; color:#9FD0B4}
.strip-links{display:flex; gap:20px}
.strip-links a{color:#D6E5DC; text-decoration:none}
.strip-links a:hover{color:#fff; text-decoration:underline}
@media (max-width:700px){ .strip-links{display:none} .head-strip{font-size:12.5px} .head-strip .wrap{min-height:32px; justify-content:center} }

/* ===== Заголовки разделов на главной: акцентная черта ===== */
.index-group > .group-head:not(.banner) h2{position:relative; padding-bottom:8px}
.index-group > .group-head:not(.banner) h2::after{content:""; position:absolute; left:0; bottom:0; width:48px; height:4px; border-radius:2px; background:var(--accent)}
.group-head.banner{box-shadow:var(--shadow-l)}
.trust li{border:1px solid var(--line); box-shadow:var(--shadow-m)}
.how{border:1px solid var(--line); box-shadow:var(--shadow-m)}
@media print{ .head-strip{display:none} }
@media (min-width:861px) and (max-width:1080px){
  .site-head .wrap{gap:10px}
  .logo-img{height:60px}
  .site-nav{gap:0}
  .site-nav a{padding:9px 9px; font-size:14px}
  .head-search span:not(.visually-hidden){display:none}
  .head-search{padding:0 13px}
}

/* ===== Разделы на главной: большая карточка, карточки с миниатюрой и плитки ===== */
.index-group{--gc:var(--accent-ink); --gc-soft:var(--accent-soft)}
.index-group.g-kvartira{--gc:#2D6E8A; --gc-soft:var(--sky-soft)}
.index-group.g-dacha{--gc:var(--green-ink); --gc-soft:var(--green-soft)}
.index-group.g-banya{--gc:#A2452E; --gc-soft:var(--rose-soft)}
.calc-bento{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:16px; margin:0 0 16px}
.calc-bento.flip{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr)}
.calc-bento.flip .calc-feature{order:2}
.calc-feature{position:relative; display:flex; flex-direction:column; justify-content:space-between; min-height:390px; padding:22px; border-radius:var(--r-l); overflow:hidden; color:#fff; text-decoration:none;
  background:linear-gradient(180deg, rgba(15,30,24,.05) 25%, rgba(15,30,24,.82) 100%), var(--ph) center/cover no-repeat, var(--green);
  box-shadow:var(--shadow-m); transition:transform .2s ease, box-shadow .2s ease}
.calc-feature:hover{transform:translateY(-4px); box-shadow:var(--shadow-l)}
.cf-tag{align-self:flex-start; display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.94); color:var(--gc); font:600 13.5px/1 var(--body); padding:8px 12px 8px 9px; border-radius:999px; box-shadow:var(--shadow-s)}
.cf-tag svg{width:16px; height:16px}
.cf-body{display:flex; flex-direction:column; gap:8px; max-width:30em}
.calc-feature .t{font:800 clamp(24px,3vw,32px)/1.12 var(--display); letter-spacing:-.01em; text-shadow:0 2px 12px rgba(0,0,0,.25)}
.calc-feature .d{font-size:16px; line-height:1.45; color:rgba(255,255,255,.9)}
.cf-go{align-self:flex-start; display:inline-flex; align-items:center; gap:8px; margin-top:6px; background:#fff; color:var(--ink); font:600 15px/1 var(--body); padding:12px 16px; border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,.2)}
.cf-go svg{width:16px; height:16px; color:var(--gc); transition:transform .18s ease}
.calc-feature:hover .cf-go svg{transform:translateX(3px)}
.calc-sides{list-style:none; margin:0; padding:0; display:grid; grid-template-rows:repeat(3,1fr); gap:12px}
.calc-side{display:grid; grid-template-columns:132px minmax(0,1fr); height:100%; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-m); overflow:hidden; color:var(--ink); text-decoration:none; box-shadow:var(--shadow-s); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.calc-side:hover{transform:translateX(4px); box-shadow:var(--shadow-m); border-color:var(--gc)}
.cs-img{display:block; width:100%; height:100%; min-height:104px; object-fit:cover; background:var(--bg-2)}
.cs-body{display:flex; flex-direction:column; justify-content:center; gap:6px; padding:12px 16px}
.calc-side .t{font-weight:600; font-size:17.5px; line-height:1.3}
.calc-side .q{font-weight:600; font-size:14px; color:var(--gc)}
.calc-side .q svg{width:15px; height:15px; vertical-align:-3px}
.calc-mini{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px}
.calc-mini a{display:flex; gap:14px; align-items:flex-start; height:100%; padding:16px 16px 16px 14px; background:var(--panel); border:1px solid var(--line); border-left:4px solid var(--gc); border-radius:14px; color:var(--ink); text-decoration:none; box-shadow:var(--shadow-s); transition:transform .18s ease, box-shadow .18s ease}
.calc-mini a:hover{transform:translateY(-3px); box-shadow:var(--shadow-m)}
.calc-mini .ico{width:44px; height:44px; border-radius:12px; background:var(--gc-soft); color:var(--gc)}
.calc-mini .ico svg{width:24px; height:24px}
.calc-mini .t{display:block; font-weight:600; font-size:16.5px; line-height:1.3; margin-bottom:3px}
.calc-mini .d{display:block; font-size:14px; line-height:1.4; color:var(--ink-soft)}
.index-group .group-head.banner .ico{color:var(--gc)}
@media (max-width:980px){ .calc-mini{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width:760px){
  .calc-bento,.calc-bento.flip{grid-template-columns:1fr}
  .calc-bento.flip .calc-feature{order:0}
  .calc-feature{min-height:320px; padding:18px}
  .calc-sides{grid-template-rows:none}
  .calc-side{grid-template-columns:112px minmax(0,1fr)}
  .calc-mini{grid-template-columns:1fr}
}
/* Первая статья на главной — широкая, с фото слева */
@media (min-width:761px){
  .posts li:first-child{grid-column:span 2}
  .posts li:first-child a{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
  .posts li:first-child .card-img{height:100%; aspect-ratio:auto; min-height:240px}
  .posts li:first-child .card-body{justify-content:center; padding:24px 26px}
  .posts li:first-child .t{font:800 23px/1.2 var(--display)}
  .posts li:first-child .d{font-size:15.5px}
}
/* ===== Мой регион ===== */
.region-bar{display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:6px 12px; background:var(--green-soft); border-radius:14px; padding:12px 14px; margin:0 0 18px}
.region-bar label{font-weight:600; color:var(--green-ink)}
.region-bar select{min-width:0}
.region-bar .hint{grid-column:1 / -1; font-size:14px; color:var(--ink-soft)}
@media (max-width:420px){ .region-bar{grid-template-columns:1fr} }
@media print{ .region-bar{display:none} }

/* ===== Схемы к расчёту ===== */
.scheme{margin:20px 0 0; padding:14px; background:var(--bg); border:1px solid var(--line-2); border-radius:14px}
.scheme[hidden]{display:none}
.scheme figcaption{font-weight:600; font-size:15px; margin:0 0 8px}
.scheme svg{display:block; width:100%; height:auto}
.sc-line{fill:none; stroke:var(--ink); stroke-width:2}
.sc-dim{fill:none; stroke:var(--ink-soft); stroke-width:1}
.sc-a{fill:var(--green-soft); stroke:var(--green-2); stroke-width:1.5}
.sc-b{fill:#F4E9D8; stroke:var(--accent-2); stroke-width:1.5}
.sc-c{fill:var(--accent-soft); stroke:var(--accent); stroke-width:1.5}
.sc-d{fill:#E5E1DC; stroke:#9A9087; stroke-width:1.5}
.sc-t{font:600 15px var(--body); fill:var(--ink)}
.sc-ts{font:13px var(--body); fill:var(--ink-soft)}

/* ===== Чек-листы приёмки ===== */
.pr-before{background:var(--sun-soft); border-radius:14px; padding:14px 16px; margin:0 0 8px}
.pr-before h2{margin-top:0}
.pr-before p{margin:0 0 8px}
.pr-tools-t{font-weight:600}
.pr-tools{margin:0; padding-left:20px}
.pr-list{list-style:none; margin:0 0 10px; padding:0; counter-reset:pr}
.pr-item{border:1.5px solid var(--line); border-radius:14px; padding:14px; margin:0 0 10px; background:var(--panel); transition:border-color .15s, background .15s}
.pr-item.is-ok{border-color:var(--green-line); background:#F5FAF6}
.pr-item.is-bad{border-color:var(--accent-2); background:#FFF8F4}
.pr-text b{display:block; font-weight:600; font-size:16.5px; line-height:1.4}
.pr-text .hint{display:block; font-size:15px; color:var(--ink-soft); margin-top:5px; line-height:1.45}
.pr-norm{display:inline-block; margin-top:7px; font-size:13px; color:var(--green-ink); background:var(--green-soft); border-radius:999px; padding:3px 10px}
.pr-btns{display:flex; gap:8px; margin-top:12px}
.pr-btns button{flex:1; min-height:46px; border-radius:12px; border:1.5px solid var(--line); background:var(--panel); font:600 15px var(--body); color:var(--ink); cursor:pointer}
.pr-ok[aria-pressed="true"]{background:var(--green-2); border-color:var(--green-2); color:#fff}
.pr-bad[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:#fff}
.pr-note{width:100%; margin-top:10px; font:16px var(--body); padding:10px 12px; border:1.5px solid var(--accent-2); border-radius:12px; resize:vertical; box-sizing:border-box}
.pr-bar{height:8px; background:var(--line-2)}
.pr-bar span{display:block; height:100%; width:0; background:var(--green-2); transition:width .2s}
.pr-empty{margin:12px 0 4px; color:var(--ink-soft); font-size:15px}
.pr-bads{list-style:decimal; padding-left:20px!important}
.pr-bads li{display:list-item!important}
@media print{ .pr-btns,.pr-before .pr-tools-t,.pr-bar{display:none} .pr-item{break-inside:avoid} .calc.pr > .panel{display:block!important} }

/* Разделов стало много: на компьютере меню отдельной строкой под логотипом,
   «Принять работу» и «Мастеру на заметку» — в верхней полосе */
@media (min-width:861px){
  .site-head .wrap{flex-wrap:wrap; row-gap:0}
  .site-nav{order:3; width:100%; justify-content:center; padding:0 0 10px}
  .site-nav a{padding:8px 13px}
  .site-nav .nav-extra{display:none}
  .head-search{margin-left:auto}
}
.strip-links a{white-space:nowrap}
@media (min-width:701px) and (max-width:1150px){ .head-strip .wrap > span:first-child{display:none} .head-strip .wrap{justify-content:center} }

/* ===== Премиальная отделка (VERSION 13) ===== */
:root{
  --shadow-s:0 1px 2px rgba(60,40,20,.06), 0 6px 16px -4px rgba(60,40,20,.13);
  --shadow-m:0 1px 2px rgba(60,40,20,.06), 0 10px 22px -6px rgba(60,40,20,.15), 0 26px 52px -14px rgba(60,40,20,.18);
  --shadow-l:0 2px 4px rgba(60,40,20,.07), 0 18px 34px -8px rgba(60,40,20,.20), 0 40px 80px -18px rgba(60,40,20,.24);
  --hl:inset 0 1px 0 rgba(255,255,255,.75);  /* светлый блик по верхней кромке */
  --sand-pill:linear-gradient(180deg, #FBF4E8, #F1E3CC);
  --sand-line:#D9C3A0;
}

/* Меню: песочные «плашки» с тонкой рамкой вместо белых */
.site-nav a{background:var(--sand-pill); border:1px solid var(--sand-line); color:#3A2F26;
  box-shadow:var(--hl), 0 1px 2px rgba(90,60,30,.10); transition:background .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease}
.site-nav a:hover{background:linear-gradient(180deg, #FFF9EF, #F4E7D2); border-color:#C9AD84; color:var(--ink);
  box-shadow:var(--hl), 0 4px 10px -2px rgba(90,60,30,.18)}
.site-nav a[aria-current="page"]{background:linear-gradient(180deg, #E9F2EC, #D5E6DB); border-color:var(--green-line); color:var(--green-ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 2px 6px -1px rgba(31,78,61,.22)}
@media (min-width:861px){ .site-nav{gap:8px} .site-nav a{padding:7px 15px} }
@media (min-width:861px) and (max-width:1080px){ .site-nav{gap:5px} .site-nav a{padding:7px 10px} }
@media (max-width:860px){ .site-nav{gap:8px} .site-nav a{background:var(--sand-pill); border:1px solid var(--sand-line)} }

/* Кнопки в шапке и основные кнопки: объём и блик */
.head-search{background:var(--grad); box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 6px 16px -4px rgba(31,78,61,.45)}
.head-search:hover{background:linear-gradient(135deg, #357658, #1F4E3D); box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 10px 22px -6px rgba(31,78,61,.5)}
.head-list{background:var(--sand-pill); border:1px solid var(--sand-line); box-shadow:var(--hl)}
.btn{box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 8px 20px -6px rgba(31,78,61,.45)}
.btn:hover{transform:translateY(-1px); box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 14px 28px -8px rgba(31,78,61,.5)}
.btn.ghost{background:var(--sand-pill); border:1px solid var(--sand-line); box-shadow:var(--hl), 0 1px 2px rgba(90,60,30,.08)}
.btn.ghost:hover{border-color:#C9AD84; box-shadow:var(--hl), 0 6px 14px -4px rgba(90,60,30,.18)}

/* Быстрые ссылки, «Другие калькуляторы», «Читайте также» — в той же манере, что меню */
.quick a,.more a{background:linear-gradient(180deg, #FFFCF6, #F7EEDF); border-color:var(--sand-line); box-shadow:var(--hl), 0 3px 8px -2px rgba(90,60,30,.14)}
.quick a:hover,.more a:hover{border-color:#C9AD84; box-shadow:var(--hl), 0 8px 16px -4px rgba(90,60,30,.2)}

/* Белые блоки: тёплая рамка и мягкий блик сверху */
.panel,.list,.trust li,.how,.toc,details,.related a,.spisok-empty,.calc-side,.calc-mini a,.calc-list a,.posts a,.pr-item{border-color:#E6D7C2}
.panel{box-shadow:var(--hl), var(--shadow-m)}
.list{box-shadow:var(--shadow-l); border-color:#E6D7C2}
.list-head{background:radial-gradient(120% 140% at 0% 0%, #3A7A5D 0%, #2A5F48 45%, #1B4536 100%); box-shadow:inset 0 -1px 0 rgba(0,0,0,.12)}
.list-head::before{content:""; position:absolute; inset:0; background:url(img/bg-tools.svg) 0 0 / 260px 260px repeat; opacity:.07; pointer-events:none}
.list-head .big{text-shadow:0 2px 10px rgba(0,0,0,.18)}
.tabs{box-shadow:inset 0 1px 2px rgba(90,60,30,.10)}
input[type="text"],input[type="number"],select{box-shadow:inset 0 1px 2px rgba(90,60,30,.06)}

/* Фото: тонкая светлая окантовка, как паспарту */
.hero-photo > img:first-child,.head-photo{box-shadow:0 0 0 6px #FFFDF8, 0 0 0 7px #E6D7C2, var(--shadow-l)}
.hero-card{border:1px solid #E6D7C2; box-shadow:var(--hl), var(--shadow-l)}
.article-photo{box-shadow:var(--shadow-m)}

/* Карточки: глубже при наведении */
.calc-list a:hover,.posts a:hover,.calc-feature:hover{box-shadow:var(--shadow-l)}
.calc-feature{box-shadow:var(--shadow-l)}
.calc-feature::after{content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); pointer-events:none}
.calc-side:hover,.calc-mini a:hover{box-shadow:var(--shadow-l)}

/* Заголовки разделов в «Мастеру на заметку» и на страницах — с той же акцентной чертой */
.index-group > h2,.article h2{position:relative; padding-bottom:8px}
.index-group > h2::after,.article h2::after{content:""; position:absolute; left:0; bottom:0; width:40px; height:3px; border-radius:2px; background:var(--accent)}
.toc h2::after{display:none}
.toc h2{padding-bottom:0}

/* Шапка: тонкая светлая кромка снизу */
.site-head{box-shadow:inset 0 -1px 0 rgba(255,255,255,.55), 0 10px 28px -6px rgba(60,40,20,.18)}
.toc{border-left:4px solid var(--accent-2); box-shadow:var(--hl), var(--shadow-m)}
.toc b,.toc strong,.toc h2{font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.06em; font-size:13.5px; color:var(--accent-ink)}

/* ===== VERSION 14: спокойные тени, крупнее логотип, навигация ===== */
/* Тени: один источник света сверху, мягкие и тёплые, без резких краёв */
:root{
  --shadow-s:0 1px 2px rgba(70,50,30,.05), 0 4px 14px -4px rgba(70,50,30,.10);
  --shadow-m:0 1px 2px rgba(70,50,30,.05), 0 8px 20px -6px rgba(70,50,30,.11), 0 22px 44px -16px rgba(70,50,30,.14);
  --shadow-l:0 2px 4px rgba(70,50,30,.05), 0 14px 30px -10px rgba(70,50,30,.15), 0 34px 64px -20px rgba(70,50,30,.18);
}
.calc-list a,.posts a,.calc-side,.calc-mini a{transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease}
.calc-list a:hover,.posts a:hover,.calc-mini a:hover{transform:translateY(-3px)}
.hero-photo > img:first-child,.head-photo{box-shadow:0 0 0 6px #FFFDF8, 0 0 0 7px #E6D7C2, var(--shadow-m)}
.group-head.banner{box-shadow:var(--shadow-m)}

/* Логотип крупнее и с мягкой тенью */
.logo-img{height:84px; filter:drop-shadow(0 3px 6px rgba(60,40,20,.16)) drop-shadow(0 1px 1px rgba(60,40,20,.10))}
.site-head .wrap{min-height:100px}
@media (min-width:861px) and (max-width:1080px){ .logo-img{height:68px} }
@media (max-width:860px){ .logo-img{height:62px} }
.foot-logo .logo-img{height:60px; filter:none}

/* Ссылка «Открыть раздел» под карточками на главной */
.index-group > .see-all{margin-top:16px}

/* Кнопка-ссылка (поиск из текста) */
.link-btn{font:inherit; color:var(--accent-ink); background:none; border:0; padding:0; text-decoration:underline; text-underline-offset:3px; cursor:pointer}

/* Подсказка про чек-лист приёмки на странице калькулятора */
.cross-note{display:flex; gap:12px; align-items:flex-start; border:1px solid #CFE0D5; margin:28px 0 0}
.cross-note > svg{flex:none; width:22px; height:22px; color:var(--green-2); margin-top:2px}
.more-groups{margin-top:22px}

/* ===== «Мастеру на заметку»: рубрики слева, статьи справа ===== */
.stati-layout{display:grid; grid-template-columns:260px minmax(0,1fr); gap:28px; align-items:start; margin:8px 0 0}
.stati-side{position:sticky; top:180px; display:flex; flex-direction:column; gap:12px}
.art-filter{position:relative; display:block}
.art-filter svg{position:absolute; left:13px; top:50%; transform:translateY(-50%); width:19px; height:19px; color:var(--ink-soft); pointer-events:none}
.art-filter input{width:100%; min-height:48px; padding:10px 12px 10px 40px; font:500 16px/1.2 var(--body); color:var(--ink); background:#fff; border:1px solid #E6D7C2; border-radius:14px; box-shadow:var(--shadow-s); -webkit-appearance:none; appearance:none}
.art-filter input:focus{outline:none; border-color:var(--green-line); box-shadow:0 0 0 4px rgba(47,106,80,.15)}
.rubrics{display:flex; flex-direction:column; gap:2px; background:#fff; border:1px solid #E6D7C2; border-radius:var(--r-m); padding:8px; box-shadow:var(--shadow-m)}
.rubrics a{display:flex; align-items:center; gap:10px; min-height:44px; padding:8px 10px; border-radius:12px; color:var(--ink); text-decoration:none; font-weight:500; font-size:15.5px; line-height:1.25}
.rubrics a svg{flex:none; width:20px; height:20px; color:var(--accent)}
.rubrics a span{flex:1}
.rubrics a em{font-style:normal; font-size:13px; font-weight:600; color:var(--ink-soft); background:var(--bg-2); border-radius:999px; padding:2px 8px; font-variant-numeric:tabular-nums}
.rubrics a:hover{background:var(--bg)}
.rubrics a[aria-current="page"]{background:var(--green-soft); color:var(--green-ink); font-weight:600}
.rubrics a[aria-current="page"] svg{color:var(--green-2)}
.rubrics a[aria-current="page"] em{background:#fff; color:var(--green-ink)}
.stati-main .stati-group:first-child{margin-top:0}
.stati-gh{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:0 0 14px}
.stati-gh h2{margin:0; position:relative; padding-bottom:8px}
.stati-gh h2::after{content:""; position:absolute; left:0; bottom:0; width:40px; height:3px; border-radius:2px; background:var(--accent)}
.stati-gh h2 a{color:inherit; text-decoration:none}
.stati-gh h2 a:hover{color:var(--accent-ink)}
.stati-gh .see-all{margin:0; white-space:nowrap}
.posts-3{grid-template-columns:repeat(3, minmax(0,1fr))}
@media (min-width:761px){
  .posts-3 li:first-child{grid-column:auto}
  .posts-3 li:first-child a{display:flex}
  .posts-3 li:first-child .card-img{height:auto; aspect-ratio:16/10; min-height:0}
  .posts-3 li:first-child .card-body{justify-content:flex-start; padding:16px 18px 18px}
  .posts-3 li:first-child .t{font:600 17px/1.35 var(--body)}
  .posts-3 li:first-child .d{font-size:14.5px}
}
.posts-3 .d{display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.art-list{list-style:none; margin:12px 0 0; padding:6px 18px; display:grid; grid-template-columns:1fr 1fr; column-gap:24px; background:#fff; border:1px solid #E6D7C2; border-radius:var(--r-m); box-shadow:var(--shadow-s)}
.art-list li{border-bottom:1px solid var(--line-2)}
.art-list a{display:block; padding:11px 0 11px 18px; position:relative; color:var(--ink); text-decoration:none; font-size:15.5px; line-height:1.35}
.art-list a::before{content:""; position:absolute; left:2px; top:18px; width:6px; height:6px; border-radius:50%; background:var(--accent-2)}
.art-list a:hover{color:var(--accent-ink)}
.art-list li:nth-last-child(-n+2){border-bottom:0}
.art-empty{background:#fff; border:1px solid #E6D7C2; border-radius:var(--r-m); padding:18px 20px}
@media (max-width:1080px){ .posts-3{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width:860px){
  .stati-layout{grid-template-columns:1fr; gap:14px}
  .stati-side{position:static}
  .stati-side .rubrics{flex-direction:row; overflow-x:auto; gap:8px; padding:0 16px 6px; margin:0 -16px; background:none; border:0; box-shadow:none; scrollbar-width:none}
  .stati-side .rubrics::-webkit-scrollbar{display:none}
  .stati-side .rubrics a{flex:none; white-space:nowrap; background:var(--sand-pill); border:1px solid var(--sand-line); border-radius:999px; padding:0 14px; box-shadow:var(--hl)}
  .stati-side .rubrics a span{flex:none}
  .stati-side .rubrics a svg{display:none}
  .stati-side .rubrics a[aria-current="page"]{background:linear-gradient(180deg, #E9F2EC, #D5E6DB); border-color:var(--green-line)}
  .art-list{grid-template-columns:1fr}
  .art-list li:nth-last-child(2){border-bottom:1px solid var(--line-2)}
}
@media (max-width:560px){ .posts-3{grid-template-columns:1fr} }

/* ===== Статья: колонка «По теме» справа на широком экране ===== */
.art-wrap{display:grid; grid-template-columns:minmax(0,46em) 300px; gap:40px; align-items:start}
.art-side{position:sticky; top:180px; display:flex; flex-direction:column; gap:14px; margin-top:18px}
.side-box{background:#fff; border:1px solid #E6D7C2; border-radius:var(--r-m); padding:14px 16px; box-shadow:var(--shadow-m)}
.side-t{margin:0 0 8px; font:700 13px/1.3 var(--display); text-transform:uppercase; letter-spacing:.06em; color:var(--accent-ink)}
.side-box ul{list-style:none; margin:0; padding:0}
.side-calc li + li{margin-top:6px}
.side-calc a{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; background:var(--grad); color:#fff; text-decoration:none; font-weight:600; font-size:15px; line-height:1.25; box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 6px 14px -6px rgba(31,78,61,.45)}
.side-calc a svg{flex:none; width:20px; height:20px}
.side-calc a:hover{filter:brightness(1.07)}
.side-list li{border-bottom:1px solid var(--line-2)}
.side-list li:last-child{border-bottom:0}
.side-list a{display:block; padding:8px 0; color:var(--ink); text-decoration:none; font-size:15px; line-height:1.35}
.side-list a:hover{color:var(--accent-ink)}
.side-all{display:inline-block; margin-top:8px; font-weight:600; font-size:14.5px}
.rubrics.side-box{padding:14px 10px 8px}
.rubrics.side-box .side-t{padding:0 6px}
.rubrics.side-box a{min-height:38px; font-size:14.5px; padding:6px}
@media (max-width:1180px){ .art-wrap{display:block} .art-side{display:none} }

/* ===== Карта сайта ===== */
.map-jump{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 8px}
.map-jump a{display:inline-flex; align-items:center; min-height:42px; padding:0 15px; border-radius:999px; background:var(--sand-pill); border:1px solid var(--sand-line); color:var(--ink); text-decoration:none; font-weight:600; font-size:15px; box-shadow:var(--hl)}
.map-jump a:hover{border-color:#C9AD84}
.map-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(250px,1fr)); gap:14px}
.map-col{background:#fff; border:1px solid #E6D7C2; border-radius:var(--r-m); padding:16px 18px; box-shadow:var(--shadow-s)}
.map-col h3{margin:0 0 8px; font-size:16.5px}
.map-col h3 a{color:var(--ink); text-decoration:none}
.map-col h3 a:hover{color:var(--accent-ink)}
.map-col ul{list-style:none; margin:0; padding:0}
.map-col li{padding:4px 0; font-size:15px; line-height:1.35}
.map-col li a{color:var(--ink-soft); text-decoration:none}
.map-col li a:hover{color:var(--accent-ink); text-decoration:underline}
main h2[id]{scroll-margin-top:180px}

/* ===== Кнопка «Наверх» ===== */
.to-top{position:fixed; right:18px; bottom:18px; z-index:44; width:48px; height:48px; border-radius:50%; border:1px solid var(--sand-line); background:var(--sand-pill); color:var(--green-ink); cursor:pointer; display:grid; place-items:center; box-shadow:var(--hl), var(--shadow-m)}
.to-top svg{width:22px; height:22px}
.to-top:hover{border-color:#C9AD84}
.to-top[hidden]{display:none}
@media (max-width:860px){ body:has(.mini-res:not([hidden])) .to-top{display:none} .to-top{right:12px; bottom:12px} }
@media print{ .to-top,.art-side,.stati-side{display:none!important} }

/* Подвал: четыре колонки */
.foot-grid{grid-template-columns:1.3fr 1fr 1fr 1fr}
@media (max-width:960px){ .foot-grid{grid-template-columns:1fr 1fr 1fr} .foot-about{grid-column:1 / -1} }
@media (max-width:560px){ .foot-grid{grid-template-columns:1fr 1fr} }
/* Содержание в правой колонке статьи */
.art-side{max-height:calc(100vh - 200px); overflow-y:auto; scrollbar-width:thin; padding:2px 4px 8px; margin-left:-4px}
.side-toc{margin:0; border-left:1px solid #E6D7C2; padding:14px 16px}
.side-toc ol{list-style:none; padding:0; margin:0; counter-reset:t}
.side-toc li{counter-increment:t; margin:0}
.side-toc a{display:flex; gap:8px; padding:7px 8px; margin:0 -8px; border-radius:10px; font-size:14.5px; line-height:1.35; color:var(--ink-soft)}
.side-toc a::before{content:counter(t); flex:none; width:20px; color:var(--accent); font-weight:600; font-variant-numeric:tabular-nums}
.side-toc a:hover{background:var(--bg); color:var(--ink); text-decoration:none}
.side-toc a.is-active{background:var(--green-soft); color:var(--green-ink); font-weight:600}
.side-cat{padding:0 6px}
@media (min-width:1181px){ .art-wrap .article > .toc{display:none} }
.stati-side,.stati-main{min-width:0}
.art-list li,.art-list li:nth-last-child(-n+2),.art-list li:nth-last-child(2){border-bottom:0}
.art-list{padding:10px 18px}
.art-list a{padding:7px 0 7px 18px}
.art-list a::before{top:15px}
/* На телефоне статьи — компактные строки с миниатюрой */
@media (max-width:560px){
  .posts-3{gap:10px}
  .posts-3 a{display:grid; grid-template-columns:104px minmax(0,1fr)}
  .posts-3 .card-img{height:100%; aspect-ratio:auto; min-height:96px}
  .posts-3 .card-body{padding:12px 14px; justify-content:center}
  .posts-3 .t{font-size:16px; margin-bottom:3px}
  .posts-3 .d{font-size:13.5px; -webkit-line-clamp:2}
}

/* ===== Доверие: «Откуда эти цифры», отзыв, меню «Отправить», распечатка ===== */
.strip-norm{display:inline-flex; align-items:center; gap:7px; color:inherit; text-decoration:none}
.strip-norm:hover{color:#fff; text-decoration:underline}
.trust-box{margin:28px 0 8px; background:var(--panel); border:1px solid var(--line-2); border-radius:var(--r-m); padding:22px 24px; box-shadow:var(--shadow-s)}
.trust-box h2{margin:0 0 12px; font-size:21px}
.tb-list{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.tb-list li{display:flex; gap:12px; align-items:flex-start; font-size:16px; line-height:1.45}
.tb-list svg{flex:none; width:22px; height:22px; margin-top:1px; color:var(--green-2)}
.fb{margin:18px 0 0; padding:14px 16px; background:var(--green-soft); border-radius:var(--r-s)}
.fb-ask{display:flex; align-items:center; flex-wrap:wrap; gap:10px}
.fb-ask span{font-weight:700; margin-right:4px}
.fb-ask .btn{min-height:44px}
.fb p{margin:0; font-size:16px}
.tb-note{margin:14px 0 0; font-size:14.5px; color:var(--ink-soft)}
.share-menu{flex-basis:100%; display:flex; flex-wrap:wrap; gap:8px; padding-top:4px}
.share-menu a{display:inline-flex; align-items:center; min-height:44px; padding:0 14px; border-radius:12px; background:var(--bg-2); color:var(--ink); font-weight:600; text-decoration:none}
.share-menu a:hover{background:var(--green-soft); color:var(--green-ink)}
.norm-list{padding-left:1.1em}
.norm-list li{margin:0 0 10px}
.print-head{display:none}
@media (max-width:560px){ .trust-box{padding:18px 16px} .tb-list li{font-size:15.5px} }
@media print{
  .trust-box,.ad-slot,.mini-res,.to-top,.head-strip,.crumbs,.calc-head,.toast{display:none !important}
  .print-head{display:block; margin:0 0 14px; color:#000}
  .print-head .ph-title{font:800 20px/1.25 var(--display); margin:0 0 4px}
  .print-head .ph-meta{margin:0 0 12px; font-size:13px; color:#444}
  .print-head .ph-sub{margin:0 0 6px; font-weight:700}
  .print-head ul{list-style:none; margin:0 0 6px; padding:0; font-size:14px}
  .print-head li{display:flex; justify-content:space-between; gap:16px; border-bottom:1px dotted #999; padding:3px 0}
  .list::after{content:"Расчёт ориентировочный, сделан на skolkobrat.ru. Формулы и нормы — на странице «Как мы считаем»."; display:block; padding:12px 0 0; font-size:12px; color:#444}
}

/* ===== Подвал: чертёж дома и своя эмблема вместо копии логотипа (VERSION 15) ===== */
.site-foot{background:radial-gradient(120% 90% at 85% 0%, #21503D 0%, #173A2D 55%, #12301F 100%)}
.foot-hero{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,520px); gap:32px; align-items:center; padding:44px 0 34px; border-bottom:1px solid rgba(255,255,255,.12)}
.foot-kicker{margin:0 0 8px; font:600 13px/1.3 var(--body); text-transform:uppercase; letter-spacing:.08em; color:#E2B49A}
.foot-title{margin:0 0 22px; font:800 clamp(22px,2.6vw,30px)/1.2 var(--display); color:#FFFDF8; max-width:18em; letter-spacing:-.01em}
.foot-stats{display:flex; flex-wrap:wrap; gap:12px; list-style:none; margin:0 0 24px; padding:0}
.foot-stats li{display:flex; flex-direction:column; gap:2px; min-width:130px; padding:12px 16px; border-radius:14px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); box-shadow:inset 0 1px 0 rgba(255,255,255,.06); font-size:13.5px; color:#B9D2C4}
.foot-stats b{font:800 22px/1.1 var(--display); color:#fff}
.foot-cta{background:linear-gradient(180deg, #FFFDF8, #F1E3CC); color:var(--green); box-shadow:inset 0 1px 0 #fff, 0 10px 24px -8px rgba(0,0,0,.45)}
.foot-cta:hover{box-shadow:inset 0 1px 0 #fff, 0 14px 30px -10px rgba(0,0,0,.5)}
.foot-art{display:block; width:100%; height:auto; opacity:.9}
.foot-brand{display:inline-flex; align-items:center; gap:12px; color:#FFFDF8; text-decoration:none}
.foot-brand img{flex:none; width:56px; height:56px}
.foot-brand span{display:flex; flex-direction:column; line-height:1.1}
.foot-brand b{font:800 21px/1.1 var(--display); letter-spacing:-.01em}
.foot-brand small{margin-top:5px; font-size:13px; color:#A9C2B5; letter-spacing:.02em}
.foot-brand:hover b{color:#fff; text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px}
.foot-about p{margin-top:14px}
@media (max-width:860px){
  .foot-hero{grid-template-columns:1fr; gap:18px; padding:32px 0 26px}
  .foot-art{max-width:420px; margin:0 auto; order:-1; opacity:.75}
  .foot-stats li{min-width:0; flex:1 1 30%}
}
@media (max-width:420px){ .foot-stats li{flex:1 1 100%; flex-direction:row; align-items:baseline; gap:8px} .foot-cta{width:100%} }
@media print{ .foot-hero{display:none} }

/* ===== Маскот: мастер (VERSION 16) ===== */
.master-say{display:grid; grid-template-columns:200px minmax(0,1fr); align-items:end; gap:8px; margin:56px 0 0}
.master-say img{display:block; width:200px; height:auto; filter:drop-shadow(0 10px 16px rgba(70,50,30,.16))}
.master-bubble{position:relative; align-self:center; background:#fff; border:1px solid #E6D7C2; border-radius:22px; padding:20px 24px; box-shadow:var(--shadow-m); max-width:640px}
.master-bubble::before{content:""; position:absolute; left:-11px; top:46%; width:20px; height:20px; background:#fff; border-left:1px solid #E6D7C2; border-bottom:1px solid #E6D7C2; transform:rotate(45deg)}
.master-bubble p{margin:0; font-size:16.5px}
.master-bubble .master-name{margin:0 0 6px; font:700 13px/1.3 var(--display); text-transform:uppercase; letter-spacing:.06em; color:var(--accent-ink)}
@media (max-width:600px){ .master-say{grid-template-columns:110px minmax(0,1fr)} .master-say img{width:110px} .master-bubble{padding:14px 16px} .master-bubble p{font-size:15.5px} }
.master-tip{display:flex; align-items:center; gap:14px; max-width:46em; margin:26px 0 0; padding:12px 18px 12px 10px; background:var(--sun-soft); border:1px solid #EBD9A8; border-radius:var(--r-m); box-shadow:var(--shadow-s)}
.master-tip img{flex:none; width:84px; height:auto}
.master-tip p{margin:0; font-size:15.5px; line-height:1.5}
.foot-art-wrap{position:relative}
.foot-master{position:absolute; left:-6%; bottom:-34px; width:30%; height:auto; filter:drop-shadow(0 12px 18px rgba(0,0,0,.35))}
@media (max-width:860px){ .foot-art-wrap{max-width:420px; margin:0 auto; order:-1; width:100%} .foot-art-wrap .foot-art{max-width:none} .foot-master{bottom:-20px; left:-2%} }
.hero.nf{display:flex; align-items:center; gap:28px}
.nf-master{flex:none; width:200px; height:auto}
@media (max-width:600px){ .hero.nf{flex-direction:column; align-items:flex-start} .nf-master{width:140px} }
.spisok-master{float:right; width:120px; height:auto; margin:-6px -4px 0 12px}
@media print{ .master-say,.master-tip,.foot-master{display:none} }
@media (max-width:860px){ .foot-art-wrap{margin-bottom:22px} .foot-master{bottom:-14px; width:26%} }
/* 3D-маскоты: мастер и хозяйка (VERSION 18) */
.master-say{grid-template-columns:300px minmax(0,1fr)}
.master-duo{display:flex; align-items:flex-end}
.master-duo img{display:block; width:155px; height:auto; filter:drop-shadow(0 12px 18px rgba(70,50,30,.18))}
.master-duo img + img{margin-left:-14px}
.master-say > img{display:none}
@media (max-width:600px){ .master-say{grid-template-columns:1fr} .master-duo{justify-content:center} .master-duo img{width:120px} .master-bubble::before{left:50%; top:-11px; transform:translateX(-50%) rotate(135deg)} }
.master-tip img{width:72px; border-radius:0}
.foot-master{width:24%; bottom:-30px}
.nf-master{width:170px}
.spisok-master{width:110px}
/* «Мастеру на заметку»: мастер с блокнотом подкручивает ус */
.stati-hero{display:grid; grid-template-columns:minmax(0,1fr) 250px; gap:24px; align-items:end}
.stati-master{position:relative; margin:0; text-align:center}
.stati-master img{display:block; width:200px; height:auto; margin:0 auto; filter:drop-shadow(0 12px 18px rgba(70,50,30,.18))}
.stati-master figcaption{position:relative; margin-top:-8px; background:#fff; border:1px solid #E6D7C2; border-radius:16px; padding:10px 14px; font-size:14px; line-height:1.4; color:var(--ink-soft); box-shadow:var(--shadow-s)}
@media (max-width:760px){ .stati-hero{grid-template-columns:1fr 120px; gap:12px; align-items:center} .stati-master img{width:120px} .stati-master figcaption{display:none} }
.foot-master{width:27%}
.nf-master{width:190px}
.master-tip img{width:92px}

/* Маскот с репликой (разделы, приёмка, о проекте, контакты, нормы) */
.mascot{display:flex; align-items:flex-end; gap:6px; max-width:44em; margin:8px 0 26px}
.mascot img{flex:none; width:118px; height:auto; filter:drop-shadow(0 10px 14px rgba(70,50,30,.16))}
.mascot-say{position:relative; margin:0 0 22px; padding:14px 18px; background:#fff; border:1px solid var(--line, #E8DCC8); border-radius:18px; box-shadow:var(--shadow-s); font-size:15.5px; line-height:1.5}
.mascot-say::before{content:""; position:absolute; left:-8px; bottom:18px; width:14px; height:14px; background:#fff; border-left:1px solid var(--line, #E8DCC8); border-bottom:1px solid var(--line, #E8DCC8); transform:rotate(45deg)}
.article .mascot{margin:6px 0 22px}
.mascot-top{margin-top:0}
.fb-yes{display:flex; align-items:center; gap:12px}
.fb-yes[hidden]{display:none}
.fb-master{flex:none; width:64px; height:auto}
.empty-master{float:left; width:64px; height:auto; margin:0 12px 4px 0}
.search-empty::after,.art-empty::after{content:""; display:block; clear:both}
@media (max-width:600px){ .mascot img{width:88px} .mascot-say{font-size:15px; padding:12px 14px} }
@media print{ .mascot,.fb-master,.empty-master{display:none} }
.fb-ask[hidden]{display:none}
/* ===== Ревью 18.10: первый экран — поиск и популярное сверху, на телефоне короче ===== */
.hero-search{display:flex; align-items:center; gap:12px; width:100%; max-width:540px; min-height:60px; margin:0 0 16px; padding:8px 8px 8px 18px; background:#FFFDF8; border:1.5px solid #D9C4A5; border-radius:16px; box-shadow:var(--hl, none), 0 10px 24px -10px rgba(90,60,30,.35); color:var(--ink-soft); font:inherit; font-size:16.5px; text-align:left; cursor:pointer; transition:border-color .18s ease, box-shadow .18s ease}
.hero-search:hover,.hero-search:focus-visible{border-color:var(--green, #2F6A50); box-shadow:0 12px 28px -10px rgba(31,78,61,.4)}
.hero-search > svg{flex:none; width:22px; height:22px; color:var(--green, #2F6A50)}
.hero-search span{flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.hero-search b{flex:none; display:inline-flex; align-items:center; min-height:44px; padding:0 20px; border-radius:12px; background:var(--grad, #2F6A50); color:#fff; font-weight:700}
.quick-t{margin:0 0 8px; font-size:14px; font-weight:600; color:var(--ink-soft)}
@media (max-width:600px){
  .home-hero .quick{display:flex; flex-wrap:nowrap; overflow-x:auto; margin:0 -16px; padding:2px 16px 8px; scrollbar-width:none}
  .home-hero .quick::-webkit-scrollbar{display:none}
  .home-hero .quick li{flex:none}
  .home-hero .hero-photo{display:none}
  .home-hero .lead{font-size:16.5px}
  .hero-search{font-size:15.5px; padding-left:14px}
  .hero-search b{padding:0 14px}
  .trust{grid-template-columns:1fr 1fr; gap:10px}
  .trust li{flex-direction:column; align-items:flex-start; gap:8px; padding:12px; font-size:13.5px}
  .trust b{font-size:14.5px}
  .trust .ico{width:36px; height:36px}
  /* разделы на главной: компактные плитки в две колонки, без описаний */
  .index-group .calc-mini{grid-template-columns:1fr 1fr; gap:10px}
  .index-group .calc-mini a{flex-direction:column; gap:8px; padding:12px 12px 12px 11px}
  .index-group .calc-mini .ico{width:36px; height:36px}
  .index-group .calc-mini .ico svg{width:20px; height:20px}
  .index-group .calc-mini .t{font-size:14.5px; margin:0}
  .index-group .calc-mini .d{display:none}
  .calc-feature{min-height:260px}
  /* калькулятор: форма сразу под заголовком, фото не нужно на маленьком экране */
  .calc-head.has-photo .head-photo{display:none}
}
.home-hero > div{min-width:0}
/* Справочник: короткий ответ и мини-калькулятор */
.sprav-answer{background:var(--green-soft); border-left:4px solid var(--green-2); border-radius:var(--r-m); padding:14px 18px; font-size:18px; line-height:1.55; margin:12px 0 22px}
.sprav-calc{margin:22px 0; padding:18px}
.sprav-calc-t{font-weight:700; font-size:18px; margin:0 0 10px}
.sprav-out{margin:12px 0 0; font-size:17px; line-height:1.5}
.sprav-out b{color:var(--green-2); font-size:20px}
.foot-brand .foot-word{width:141px; height:auto; display:block}
.foot-brand:hover .foot-word{opacity:.92}

/* Примерная стоимость (ceny.js) */
.list-body li b .price{display:block; font-size:13px; font-weight:500; color:var(--ink-soft); margin-top:2px}
.price-total{margin:4px 22px 14px; padding:12px 16px; background:var(--green-soft); border-radius:14px}
.price-total p{margin:0; display:flex; justify-content:space-between; align-items:baseline; gap:12px}
.price-total p b{font-size:22px; font-weight:700; color:var(--green-ink); white-space:nowrap}
.price-total .price-hint{display:block; font-size:13.5px; color:var(--ink-soft); margin-top:4px}
.price-edit-btn,.price-reset{background:none; border:0; padding:6px 0 0; color:var(--green-ink); font:inherit; font-size:14.5px; font-weight:600; text-decoration:underline; text-underline-offset:3px; cursor:pointer}
.price-editor{margin-top:10px; display:grid; gap:8px}
.price-editor[hidden]{display:none}
.price-row{display:grid; grid-template-columns:minmax(0,1fr) 150px; align-items:center; gap:10px; font-size:14.5px}
.price-row input{width:100%}
@media (max-width:420px){ .price-row{grid-template-columns:1fr} }
.spisok-total .price-total{margin:4px 0 12px}
@media print{ .price-edit-btn,.price-editor{display:none} }

/* Виджет для чужих сайтов (widget.py) */
body.widget{background:#fff; padding:12px; min-height:0}
body.widget .calc{margin:0}
.widget-head{display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin:0 0 10px; font-size:17px}
.widget-head a,.widget-foot a{color:var(--green-ink); font-size:14px}
.widget-foot{margin:10px 0 0; font-size:13.5px; color:var(--ink-soft); text-align:center}
.widget-code{width:100%; font:14px/1.5 ui-monospace,Menlo,Consolas,monospace; padding:12px; border:1px solid var(--line); border-radius:12px; background:#fff; resize:vertical}
.widget-pick{padding:16px; display:grid; gap:8px}
.widget-preview{border:1px dashed var(--line); border-radius:14px; overflow:hidden; background:#fff}

/* Установка на телефон (pwa.js) */
.pwa-hint{margin:16px 0; padding:14px 16px; background:var(--green-soft); border-radius:16px; font-size:15.5px}
.pwa-hint p{margin:0}
.pwa-hint-act{margin-top:10px !important; display:flex; gap:8px; flex-wrap:wrap}
.pwa-panel{padding:18px; margin:18px 0}
.pwa-panel p{margin:0 0 10px}
.pwa-state{font-weight:600}
@media print{ .pwa-hint{display:none} }
/* Надпись в подвале того же размера, что в шапке (0.625 высоты логотипа) */
.foot-brand .foot-word{width:147.6px; height:52.5px}
@media (min-width:861px) and (max-width:1080px){ .foot-brand .foot-word{width:119.5px; height:42.5px} }
@media (max-width:860px){ .foot-brand .foot-word{width:109px; height:38.75px} }

/* ===== Ревью 18.10.2026: ровные отступы, плавность, тени, логотип крупнее ===== */
:root{--ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1)}

/* Логотип чуть крупнее; надпись в подвале = 0.625 высоты логотипа шапки, как и раньше */
.logo-img{height:92px}
@media (min-width:861px) and (max-width:1080px){ .logo-img{height:76px} }
@media (max-width:860px){ .logo-img{height:68px} }
@media (min-width:861px){ .site-head .wrap{padding-top:8px; min-height:108px} .site-nav{padding-bottom:12px} }
.foot-brand .foot-word{width:161.7px; height:57.5px}
.foot-brand > img{width:62px; height:62px}
@media (min-width:861px) and (max-width:1080px){ .foot-brand .foot-word{width:133.6px; height:47.5px} }
@media (max-width:860px){ .foot-brand .foot-word{width:119.5px; height:42.5px} .foot-brand > img{width:56px; height:56px} }

/* Расчёт справа не уезжает под шапку */
@media (min-width:861px){ .list{top:172px} }
@media (min-width:861px) and (max-width:1080px){ .list{top:156px} }
html{scroll-padding-top:180px}
@media (max-width:860px){ html{scroll-padding-top:24px} }

/* Телефон: меню-лента до края экрана и мягко гаснет справа, чтобы было видно, что её можно листать */
@media (max-width:860px){
  .site-nav{width:calc(100% + 32px); max-width:none; scroll-padding:0 16px;
    -webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 36px), transparent);
            mask-image:linear-gradient(90deg, #000 calc(100% - 36px), transparent)}
  .home-hero .quick{-webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 36px), transparent);
            mask-image:linear-gradient(90deg, #000 calc(100% - 36px), transparent)}
  /* шапка уходит вверх при прокрутке вниз и возвращается при прокрутке вверх */
  .site-head{transition:transform .32s var(--ease), box-shadow .32s var(--ease); will-change:transform}
  .site-head.is-hidden{transform:translateY(calc(-100% - 12px)); box-shadow:none}
}

/* Поля в одной строке стоят ровно, даже если подпись у одного в две строки */
@supports (grid-template-rows:subgrid){
  .row2,.row3{grid-template-rows:auto auto auto; row-gap:0}
  .row2 > .field,.row3 > .field{display:grid; grid-row:span 3; grid-template-rows:subgrid; row-gap:0}
  .row2 > .field > label,.row3 > .field > label,.row2 > .field > .label,.row3 > .field > .label{align-self:end}
  .row3{row-gap:0}
}

/* Стрелка не переносится на отдельную строку */
.nw{white-space:nowrap}

/* Итог внизу экрана: длинный текст не вылезает за плашку */
@media (max-width:860px){
  .mini-res b{min-width:0; max-width:55%; overflow:hidden; text-overflow:ellipsis}
  .mini-res:not([hidden]){animation:sb-rise .35s var(--ease-out)}
}

/* Ссылки внизу подвала и в верхней полосе удобнее нажимать пальцем */
.foot-links a{display:inline-block; padding:6px 0}
.foot-grid li{margin:0 0 2px}
.foot-grid li a{display:inline-block; padding:4px 0; line-height:1.35}
.strip-norm{min-height:32px}

/* Плавные анимации: одинаковая кривая и длительность */
.calc-list a,.posts a,.calc-side,.calc-mini a,.calc-feature,.quick a,.more a,.related a,.btn,.site-nav a,.head-search,
details summary::after,.card-img,.cs-img{transition-timing-function:var(--ease); transition-duration:.28s}
.calc-list a:hover .card-img,.posts a:hover img{transform:scale(1.04)}
.posts a img{transition:transform .5s var(--ease)}
.btn:active,.head-search:active,.quick a:active,.more a:active{transform:translateY(1px) scale(.98); transition-duration:.08s}
.search-dlg[open]{animation:sb-pop .26s var(--ease-out)}
.search-dlg[open]::backdrop{animation:sb-fade .26s ease}
details[open] > :not(summary){animation:sb-fade .3s var(--ease)}
.toast:not([hidden]){animation:sb-rise .3s var(--ease-out)}
.cookie:not([hidden]){animation:sb-rise .4s var(--ease-out)}
@keyframes sb-fade{from{opacity:0}to{opacity:1}}
@keyframes sb-pop{from{opacity:0; transform:translateY(10px) scale(.98)}to{opacity:1; transform:none}}
@keyframes sb-rise{from{opacity:0; translate:0 14px}to{opacity:1; translate:0 0}}

/* Тени: карточки в покое чуть отчётливее, чтобы не сливались с фоном */
:root{--shadow-s:0 1px 2px rgba(60,40,20,.07), 0 8px 18px -6px rgba(60,40,20,.16)}
.calc-list a,.posts a,.calc-mini a,.calc-side,.related a{box-shadow:var(--shadow-s)}
.calc-list a:hover,.posts a:hover,.calc-side:hover,.calc-mini a:hover{box-shadow:var(--shadow-l)}

/* Фон разделов на главной до загрузки фото */
.group-head.banner{background-color:#2B5442}
.group-head.banner[data-bg]{background:linear-gradient(90deg, rgba(22,40,32,.92), rgba(22,40,32,.7)), #3C6B55}
.calc-feature[data-bg]{background:linear-gradient(180deg, rgba(15,30,24,.05) 25%, rgba(15,30,24,.82) 100%), var(--green)}
/* Длинная подпись к итогу («м³ — ищите печь на такой объём») переносится аккуратно, без огромных промежутков */
.list-head .big small{display:inline-block; line-height:1.25; vertical-align:baseline}

/* ===== Студийная полировка ===== */
/* Заголовки без переносов по слогам, строки сбалансированы; абзацы без «висячих» коротких строк */
h1,h2,h3{hyphens:manual; -webkit-hyphens:manual; text-wrap:balance}
p,li,.lead,.d{text-wrap:pretty}
/* Узор с инструментами тише, чтобы не спорил с текстом */
body{background-image:linear-gradient(rgba(250,245,236,.45), rgba(250,245,236,.45)), url(img/bg-tools.svg); background-size:auto, 320px 320px}
/* Строка автора статьи: обычный текст с ровными промежутками */
.article-meta{display:block}
/* Значок раздела стоит на уровне первой строки заголовка */
.calc-head.has-photo{align-items:start}
.calc-head.has-photo > div{align-self:center}
.calc-head .ico{align-self:start; margin-top:6px}
/* Выделение текста и полосы прокрутки в цветах сайта */
::selection{background:#CFE3D6; color:var(--ink)}
html{scrollbar-color:#C9B48F transparent}
/* Числа в таблицах и итогах одной ширины, столбцы ровные */
table,.list-body b,.foot-stats b{font-variant-numeric:tabular-nums}
/* Фото подгружаются на тёплой подложке, без белых «дыр» */
.card-img,.cs-img,.head-photo,.article-photo{background:#EFE4D2}
/* Пропуск к содержанию для клавиатуры */
.skip{position:absolute; left:12px; top:-60px; z-index:100; background:var(--green); color:#fff; padding:10px 16px; border-radius:10px; text-decoration:none; transition:top .2s var(--ease)}
.skip:focus{top:12px}
/* Круглый значок в подвале того же диаметра, что эмблема в шапке (круг эмблемы = 0.96 высоты логотипа, круг значка = 61.6/64) */
.foot-brand > img{width:91.8px; height:91.8px}
@media (min-width:861px) and (max-width:1080px){ .foot-brand > img{width:75.8px; height:75.8px} }
@media (max-width:860px){ .foot-brand > img{width:67.8px; height:67.8px} }

/* ===== Идеи ревью 18.10.2026: дизайн и удобство ===== */
/* Белая кнопка на большой карточке: текст одной строкой, последнее слово не отъезжает */
.cf-go{display:inline-block; line-height:1.25}
.cf-go svg{vertical-align:-3px; margin-left:2px}

/* Нижняя панель на телефоне занимает место у нижнего края: всё прилипающее снизу встаёт над ней */
:root{--tb:0px}
@media (max-width:860px){
  :root{--tb:calc(60px + env(safe-area-inset-bottom))}
  html.bars-hidden{--tb:0px}
}
.mini-res,.to-top,.toast,.cookie{transition:bottom .25s var(--ease, ease)}

/* Cookie: на телефоне тонкая полоса у края, а не карточка на треть экрана */
@media (max-width:860px){
  .cookie{left:8px; right:8px; bottom:calc(8px + var(--tb)); padding:10px 10px 10px 14px; gap:10px; font-size:13.5px; line-height:1.35; border-radius:14px}
  .cookie .btn{min-height:40px; padding:0 14px; font-size:14.5px}
}

/* Подсказка над формой: размеры подставлены из памяти или из ссылки */
.form-restored{margin:0 0 14px; padding:9px 12px; border-radius:12px; background:var(--green-soft); color:var(--green-ink); font-size:14.5px; line-height:1.4}
.form-restored .link-btn{color:var(--green-ink); font-weight:600}

/* «Что мерить?» — схема над полями */
.measure{margin:0 0 14px; border:1px dashed #D9C6A6; border-radius:12px; background:#FFFCF6; box-shadow:none}
.measure > summary{display:flex; align-items:center; gap:8px; padding:9px 12px; cursor:pointer; font-weight:600; font-size:14.5px; color:var(--accent-ink); list-style:none}
.measure > summary::-webkit-details-marker{display:none}
.measure > summary svg{width:18px; height:18px; flex:none}
.measure > summary::after{content:"Показать"; margin-left:auto; width:auto; height:auto; background:none; border-radius:0; transform:none; font:500 13px/1.2 var(--body); color:var(--ink-soft); text-align:right}
.measure[open] > summary::after{content:"Скрыть"; transform:none}
.measure[open] > summary{margin-bottom:0}
.measure-svg{padding:0 12px 12px}
.measure-svg svg{display:block; width:100%; height:auto; max-width:420px}
.ms-wall{fill:none; stroke:var(--green); stroke-width:7; stroke-linejoin:round}
.ms-inner{stroke:var(--accent)}
.ms-sec{fill:#EADBC4; stroke:#8F7556; stroke-width:1.5}
.ms-win{fill:#fff; stroke:#8F7556; stroke-width:1.5}
.ms-ring{fill:#EADBC4; stroke:#8F7556; stroke-width:1.5; stroke-dasharray:5 4}
.ms-ground{stroke:#8F7556; stroke-width:1.5; stroke-dasharray:4 4}
.ms-dim{stroke:var(--accent); stroke-width:1.6; marker-start:url(#ms-ar); marker-end:url(#ms-ar)}
.ms-arh{fill:var(--accent)}
.ms-t{font:500 12px/1 var(--body); fill:var(--ink-soft)}
.ms-acc{fill:var(--accent-ink)}

/* Меню «Поделиться» */
.share-menu button{display:inline-flex; align-items:center; min-height:44px; padding:0 14px; border-radius:12px; border:0; background:var(--bg-2); color:var(--ink); font:600 15px var(--body); cursor:pointer}
.share-menu button:hover{background:var(--green-soft); color:var(--green-ink)}
.list-actions [data-action="more"]::after{content:""; display:inline-block; width:7px; height:7px; margin-left:9px; border:solid currentColor; border-width:0 2px 2px 0; transform:translateY(-2px) rotate(45deg)}
.list-actions [data-action="more"][aria-expanded="true"]::after{transform:translateY(1px) rotate(-135deg)}

/* Калькулятор: статья и правая колонка «Ваш расчёт» + похожие */
.calc-wrap{margin-top:8px}
.calc-wrap .article{margin-top:18px}
.calc-side-col{top:120px}
.side-res .sr-k{margin:0; font-size:14px; color:var(--ink-soft); line-height:1.35}
.side-res .sr-big{margin:4px 0 12px; font:800 30px/1.1 var(--display); color:var(--green-ink); font-variant-numeric:tabular-nums}
.side-res .btn{width:100%}
.side-res[hidden]{display:none}

/* «Что ещё посчитать» — карточки с фото вместо стены из кнопок */
.rel-calcs{margin:40px 0 0; --gc:var(--accent-ink)}
.rel-calcs .calc-sides{grid-template-rows:none; grid-template-columns:repeat(2, minmax(0,1fr)); margin:0 0 14px}
.rel-calcs .calc-side .t{font-size:16px}
.rel-calcs .cs-img{min-height:92px}
.cs-ico{display:grid; place-items:center; background:var(--bg-2)}
@media (max-width:640px){ .rel-calcs .calc-sides{grid-template-columns:1fr} }

/* Главная: «Ещё N калькуляторов» раскрываются по кнопке */
.more-calcs{margin:0; border:0; background:none; box-shadow:none; padding:0}
.more-calcs > summary{display:inline-flex; align-items:center; gap:10px; min-height:48px; padding:0 18px; border-radius:14px; cursor:pointer; list-style:none;
  background:linear-gradient(180deg, #FFFCF6, #F7EEDF); border:1px solid var(--sand-line); box-shadow:var(--hl), 0 3px 8px -2px rgba(90,60,30,.14); font-weight:600; font-size:15.5px; color:var(--ink)}
.more-calcs > summary::-webkit-details-marker{display:none}
.more-calcs > summary::after{content:""; background:none; border-radius:0; width:8px; height:8px; border:solid var(--gc); border-width:0 2px 2px 0; transform:translateY(-2px) rotate(45deg); transition:transform .2s ease}
.more-calcs[open] > summary::after{transform:translateY(2px) rotate(-135deg)}
.more-calcs[open] > summary{margin-bottom:14px}

/* «Вы недавно считали» */
.recent{margin:6px 0 26px}
.recent[hidden]{display:none}
.recent h2{display:flex; align-items:center; gap:8px; margin:0 0 10px; font:700 16px/1.3 var(--display)}
.recent h2 svg{width:20px; height:20px; color:var(--green-ink)}
.recent ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px}
.recent a{display:flex; flex-direction:column; gap:2px; min-width:180px; padding:10px 16px; border-radius:14px; background:var(--panel); border:1px solid #E6D7C2; border-left:4px solid var(--green); color:var(--ink); text-decoration:none; box-shadow:var(--shadow-s)}
.recent a:hover{box-shadow:var(--shadow-m)}
.recent .t{font-size:14px; color:var(--ink-soft)}
.recent b{font:800 19px/1.2 var(--display); color:var(--green-ink)}
@media (max-width:560px){ .recent ul{flex-wrap:nowrap; overflow-x:auto; margin:0 -16px; padding:0 16px 4px; scrollbar-width:none} .recent a{flex:none} }

/* Заголовки поверх фото читаются: затемнение снизу плотнее */
.calc-feature{background:linear-gradient(180deg, rgba(15,30,24,.08) 15%, rgba(15,30,24,.55) 50%, rgba(15,30,24,.9) 100%), var(--ph) center/cover no-repeat, var(--green)}
.calc-feature[data-bg]{background:linear-gradient(180deg, rgba(15,30,24,.08) 15%, rgba(15,30,24,.55) 50%, rgba(15,30,24,.9) 100%), var(--green)}
.calc-feature .t{text-shadow:0 2px 14px rgba(0,0,0,.45)}
@media (max-width:760px){
  .group-head.banner{background:linear-gradient(180deg, rgba(22,40,32,.25) 0%, rgba(22,40,32,.88) 100%), var(--banner) center/cover no-repeat}
  .group-head.banner[data-bg]{background:linear-gradient(180deg, rgba(22,40,32,.25) 0%, rgba(22,40,32,.88) 100%), var(--green)}
  .group-head.banner h2{text-shadow:0 2px 12px rgba(0,0,0,.4)}
}
@media (max-width:560px){ .group-head.banner > .ico{display:none} }

/* Подвал на телефоне: цифры в одну строку */
@media (max-width:560px){
  .foot-stats{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px}
  .foot-stats li{min-width:0; padding:10px; font-size:12px; line-height:1.25}
  .foot-stats b{font-size:18px}
}

/* Нижняя панель на телефоне */
.tabbar{display:none}
@media (max-width:860px){
  .tabbar{position:fixed; left:0; right:0; bottom:0; z-index:46; display:grid; grid-template-columns:repeat(4, 1fr); height:calc(60px + env(safe-area-inset-bottom)); padding:0 4px env(safe-area-inset-bottom);
    background:rgba(255,253,248,.97); border-top:1px solid #E6D7C2; box-shadow:0 -6px 20px rgba(60,40,20,.08); transition:transform .25s ease; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px)}
  html.bars-hidden .tabbar{transform:translateY(105%)}
  .tabbar a,.tabbar button{position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; border:0; background:none; color:var(--ink-soft); font:600 11.5px/1.1 var(--body); text-decoration:none; cursor:pointer; -webkit-tap-highlight-color:transparent}
  .tabbar svg{width:23px; height:23px}
  .tabbar [aria-current="page"]{color:var(--green-ink)}
  .tabbar-n{position:absolute; top:6px; left:calc(50% + 6px); min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--accent); color:#fff; font:700 11px/18px var(--body); text-align:center}
  .tabbar-n[hidden]{display:none}
  .site-foot{padding-bottom:calc(70px + env(safe-area-inset-bottom))}
  .mini-res:not([hidden]){bottom:calc(10px + var(--tb))}
  .to-top{bottom:calc(12px + var(--tb))}
  .toast{bottom:calc(20px + var(--tb))}
  .head-list{display:none}
}
.nav-sheet{border:0; padding:0; width:min(520px, 100%); max-width:100%; margin:auto auto 0; border-radius:22px 22px 0 0; background:var(--panel); color:var(--ink); box-shadow:0 -10px 40px rgba(0,0,0,.2)}
.nav-sheet::backdrop{background:rgba(20,30,25,.45)}
.ns-head{display:flex; align-items:center; justify-content:space-between; padding:14px 16px 6px 20px}
.ns-head p{margin:0; font:800 19px/1.2 var(--display)}
.nav-sheet ul{list-style:none; margin:0; padding:4px 10px calc(16px + env(safe-area-inset-bottom))}
.nav-sheet a{display:flex; align-items:center; gap:12px; min-height:50px; padding:0 10px; border-radius:12px; color:var(--ink); text-decoration:none; font-weight:600; font-size:16px}
.nav-sheet a:hover{background:var(--bg-2)}
.nav-sheet svg{width:22px; height:22px; color:var(--accent)}

/* Калькулятор внутри статьи */
.art-calc{margin:24px 0 30px; padding:16px; border-radius:var(--r-l); background:linear-gradient(180deg, #F3EADB, #FAF5EC); border:1px solid #E6D7C2}
.art-calc-t{display:flex; align-items:center; gap:10px; margin:0 0 12px; font-size:15.5px}
.art-calc-t > svg{width:22px; height:22px; flex:none; color:var(--green-ink)}
.art-calc-t span{flex:1; min-width:0}
.art-calc-t a{font-size:14px; font-weight:600; white-space:nowrap}
.art-calc .calc{margin:0; gap:14px}
.art-calc .list{position:static}
.art-calc h2{font-size:17px; padding:0; margin:0 0 12px}
.art-calc h2::after{display:none}
@media (max-width:700px){ .art-calc{margin:20px -6px 26px; padding:12px} .art-calc .calc{grid-template-columns:1fr} }

@media print{ .tabbar,.nav-sheet,.measure,.recent,.calc-side-col,.rel-calcs,.form-restored,.art-calc{display:none!important} }
/* Под итогом две кнопки в одну строку: «В мой список» и «Поделиться» */
#result:not(.pr-sum) .list-actions > .btn{flex:1 1 0; min-width:0; padding-left:12px; padding-right:12px; white-space:nowrap}
.share-menu a,.share-menu button{font:600 15px/1.2 var(--body)}
.article .rel-calcs .calc-sides,.art-calc ul{padding-left:0}
.article .rel-calcs li{margin:0}
.art-calc .list-body ul{padding:0}
/* Под разделом на главной: «Ещё N» и «Открыть раздел» в одну строку */
.group-foot{display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; margin:16px 0 0}
.group-foot .more-calcs[open]{flex-basis:100%}
.group-foot .see-all{margin:0}
.more-calcs[open] > summary{margin-bottom:14px}
@media (max-width:760px){
  .calc-feature{min-height:260px}
  .group-head.banner{min-height:112px; padding:16px 18px}
  .calc-side{grid-template-columns:96px minmax(0,1fr)}
  .calc-side .cs-img{min-height:86px}
  .cs-body{padding:10px 14px; gap:4px}
  .calc-side .t{font-size:16.5px}
  .index-group{margin-top:40px}
}
@media (max-width:560px){ .group-foot{gap:10px 14px} .group-foot .see-all{font-size:15px} }
.list-actions [data-action="more"]{display:inline-flex; align-items:center; justify-content:center}
.list-actions [data-action="more"]::after{flex:none}

/* Cookie: две кнопки — «Принять» и «Отказаться» (согласие по 152-ФЗ) */
.cookie-btns{display:flex; gap:8px; flex:none}
.cookie{max-width:880px}
.cookie-text b{font-weight:600}
@media (max-width:560px){
  .cookie{flex-wrap:wrap}
  .cookie-btns{width:100%}
  .cookie-btns .btn{flex:1}
}

/* «Мастеру на заметку» в меню — свой тёплый оттенок, как страница блокнота */
.strip-links a.strip-zametka{display:inline-flex; align-items:center; gap:6px; padding:3px 12px 3px 9px; border-radius:999px;
  background:rgba(231,182,72,.16); border:1px solid rgba(240,205,130,.42); color:#F4D898}
.strip-links a.strip-zametka:hover{background:rgba(231,182,72,.28); color:#FFF1CF; text-decoration:none}
.strip-links a.strip-zametka svg{width:15px; height:15px; flex:none}
.site-nav a.nav-zametka{background:linear-gradient(180deg, #FFF6DC, #F8E6B4); border-color:#E2C477; color:#6B4A12}
.site-nav a.nav-zametka:hover{background:linear-gradient(180deg, #FFF9E8, #F5DFA2); border-color:#D4B05A; color:#5A3E0E}
.site-nav a.nav-zametka[aria-current="page"]{background:linear-gradient(180deg, #F9E7B0, #F0D488); border-color:#C9A24A; color:#5A3E0E}

/* Логотип из двух частей: круглая печать анимируется отдельно от надписи */
.logo-img{display:inline-flex; position:relative; width:auto}
.logo-img img{display:block; height:100%; width:auto}
.logo-seal{transform-origin:50% 50%; animation:seal-in .95s cubic-bezier(.2,.9,.25,1) both}
.logo-word{animation:word-in .7s .25s ease-out both}
.logo-img::before{content:""; position:absolute; left:2%; top:2%; height:96%; aspect-ratio:1; border-radius:50%;
  border:2px solid rgba(47,106,80,.55); opacity:0; pointer-events:none; animation:seal-ring .9s .42s ease-out}
@keyframes seal-in{
  0%{transform:scale(1.45) rotate(-28deg); opacity:0}
  45%{transform:scale(.9) rotate(4deg); opacity:1}
  65%{transform:scale(1.05) rotate(-2deg)}
  82%{transform:scale(.98) rotate(1deg)}
  100%{transform:none}
}
@keyframes word-in{from{opacity:0; transform:translateX(-8px)} to{opacity:1; transform:none}}
@keyframes seal-ring{0%{opacity:.8; transform:scale(.92)} 100%{opacity:0; transform:scale(1.45)}}
/* Нажатие: печать «ставится» ещё раз и делает оборот */
.logo.is-stamp .logo-seal{animation:seal-tap .6s cubic-bezier(.3,1.4,.5,1)}
.logo.is-stamp .logo-img::before{animation:seal-ring .7s .12s ease-out}
@keyframes seal-tap{0%{transform:scale(1)} 25%{transform:scale(.86) rotate(-12deg)} 100%{transform:scale(1) rotate(360deg)}}
@media (hover:hover){ .logo:hover .logo-seal{transform:rotate(-8deg); transition:transform .35s ease} }
@media (prefers-reduced-motion:reduce){ .logo-seal,.logo-word,.logo-img::before,.logo.is-stamp .logo-seal{animation:none} }
/* Надпись в подвале = размер надписи в шапке (0.625 высоты логотипа) */
.foot-brand .foot-word{width:161.6px; height:57.5px}
@media (min-width:861px) and (max-width:1080px){ .foot-brand .foot-word{width:133.5px; height:47.5px} }
@media (max-width:860px){ .foot-brand .foot-word{width:119.5px; height:42.5px} }

/* Без чёрной вспышки при нажатии: тень на каждой части отдельно, без подсветки тапа */
.logo{-webkit-tap-highlight-color:transparent}
.site-head .logo-img{filter:none}
.site-head .logo-img img{filter:drop-shadow(0 3px 6px rgba(60,40,20,.16)) drop-shadow(0 1px 1px rgba(60,40,20,.10))}
.logo-seal{will-change:transform; backface-visibility:hidden}

/* Печать в подвале: можно крутить пальцем или мышкой, она вертится по инерции */
.foot-spin{position:relative; flex:none; display:block; width:56px; height:56px; cursor:grab; touch-action:none; -webkit-tap-highlight-color:transparent; user-select:none}
.foot-spin img{display:block; width:100%; height:100%; pointer-events:none; will-change:transform}
.foot-spin.is-drag{cursor:grabbing}
.foot-spin::after{content:""; position:absolute; inset:-4px; border-radius:50%; border:2px solid rgba(231,182,72,.7); opacity:0; pointer-events:none}
.foot-spin.is-pop::after{animation:spin-pop .6s ease-out}
.foot-spin.is-pop img{animation:spin-land .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes spin-pop{0%{opacity:.9; transform:scale(.9)} 100%{opacity:0; transform:scale(1.7)}}
@keyframes spin-land{0%{scale:1} 35%{scale:.86} 100%{scale:1}}
@media (hover:hover){ .foot-spin:not(.is-drag):hover img{scale:1.06; transition:scale .2s} }