/* Честный куб — дрова и сыпучие по Коломне и округе.
   Системный шрифт, ни одного внешнего ресурса (152-ФЗ).
   Радиус кнопок и полей — 12px (правило системы). */

:root{
  --wood:#8B5A2B; --wood-dark:#6b441f; --accent:#C8801E; --accent-dark:#b06f15;
  --ink:#23201c; --muted:#6f6760; --bg:#fbf7f1; --card:#ffffff;
  --line:#e7ddd0; --ok:#2e7d32; --bad:#c0392b;
  --max:980px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden}
body{font-family:-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg);
  line-height:1.55;font-size:17px;-webkit-text-size-adjust:100%;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 18px}
.sec{padding:52px 0}
.sec--tight{padding-top:0}
h1{font-size:clamp(27px,5vw,44px);line-height:1.14;font-weight:800;letter-spacing:-.01em}
h2{font-size:clamp(23px,3.6vw,36px);line-height:1.16;font-weight:800;margin-bottom:8px}
h2 .small{display:block;font-size:14px;font-weight:700;color:var(--accent);text-transform:uppercase;
  letter-spacing:.05em;margin-bottom:9px}
h3{font-size:20px;line-height:1.25;font-weight:800}
.lead{color:var(--muted);font-size:17px;max-width:760px;margin-bottom:24px}
.hl{color:var(--accent)}
.center{text-align:center}
.ico{width:22px;height:22px;flex:none;fill:none;stroke:var(--ok);stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}

/* КНОПКИ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--accent);
  color:#fff;font-weight:700;font-size:17px;min-height:60px;padding:0 26px;border:none;border-radius:12px;
  cursor:pointer;transition:.15s;text-align:center;line-height:1.2}
.btn:hover{background:var(--accent-dark)}
.btn--ghost{background:#fff;color:var(--wood-dark);border:2px solid var(--wood)}
.btn--ghost:hover{background:#fff5e8}
.btn--block{width:100%}
.btn-2r{display:flex;flex-direction:column;align-items:center;line-height:1.15}
.btn-2r b{font-size:17px}
.btn-2r i{font-style:normal;font-size:13px;opacity:.9;font-weight:600}

/* Кнопка с «пальцем» — эталон «Дрова Киров»: показывает, куда нажимать.
   Слева отступ чуть больше указателя, справа обычный — иначе текст ломается в три ряда. */
.btn--point{display:inline-flex;align-items:center;justify-content:center;gap:12px;padding-left:22px;padding-right:24px}
.btn--point .point{position:relative;width:24px;height:24px;flex:none;display:block}
.btn--point .point svg{width:24px;height:24px;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;position:relative;z-index:2;
  animation:tapFinger 2.4s infinite}
.btn--point .point::before,.btn--point .point::after{content:"";position:absolute;
  left:50%;top:58%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;
  border:2px solid currentColor;opacity:0;animation:tapWave 2.4s infinite}
.btn--point .point::after{animation-delay:.35s}
@keyframes tapFinger{0%,58%,100%{transform:translateY(0)}64%{transform:translateY(3px)}72%{transform:translateY(0)}}
@keyframes tapWave{0%,60%{transform:scale(.5);opacity:0}66%{opacity:.55}100%{transform:scale(2.6);opacity:0}}
@media(prefers-reduced-motion:reduce){
  .btn--point .point svg,.btn--point .point::before,.btn--point .point::after{animation:none}
}

/* ШАПКА */
header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.96);backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line)}
header .wrap{max-width:1200px}
.hdr{display:flex;align-items:center;gap:16px;min-height:66px}
/* padding — чтобы зона нажатия логотипа дотягивала до 44 px по высоте */
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;line-height:1.05;white-space:nowrap;padding:8px 0}
.logo svg{width:34px;height:34px;flex:none}
.logo i{display:block;font-style:normal;font-size:11px;font-weight:600;color:var(--muted);letter-spacing:.02em}
.nav{display:none;gap:18px;margin-left:14px;font-size:15px;font-weight:600}
.nav a:hover{color:var(--accent)}
.hdr__right{margin-left:auto;display:flex;align-items:center;gap:12px}
.msgr{display:flex;gap:8px}
.msgr a{width:38px;height:38px;border-radius:50%;overflow:hidden;display:block;flex:none}
.msgr img{width:38px;height:38px;object-fit:cover}
.hdr__cta{min-height:44px;font-size:15px;padding:0 16px}
@media(min-width:900px){.nav{display:flex}}
@media(max-width:640px){.hdr__cta{display:none}}
/* На узком экране подпись логотипа прячем, иконки ужимаем — иначе шапка распирает страницу */
@media(max-width:420px){
  .logo{font-size:16px}
  .logo i{display:none}
  .logo svg{width:28px;height:28px}
  .hdr{gap:10px}
  .msgr a,.msgr img{width:32px;height:32px}
}

/* ПОЛОСА-ОБЕЩАНИЕ */
.promo{background:var(--wood);color:#fff}
.promo__in{display:flex;align-items:center;gap:10px;padding-top:11px;padding-bottom:11px;font-size:15px}
.promo .ico{stroke:#ffd79a;width:20px;height:20px}
/* На телефоне полоса дублировала бы заголовок и съедала первый экран — прячем */
@media(max-width:600px){.promo{display:none}}

/* ПЕРВЫЙ ЭКРАН — фото во весь блок, текст поверх светлой заливки */
.hero{position:relative;overflow:hidden;background:var(--bg);border-bottom:1px solid var(--line)}
.hero__bg{position:absolute;inset:0;background:url('../img/hero-bg.webp') center right/cover no-repeat}
.hero__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(251,247,241,.985) 0%,rgba(251,247,241,.96) 40%,rgba(251,247,241,.62) 62%,rgba(251,247,241,.12) 100%)}
@media(max-width:860px){
  .hero__bg{background-position:center top}
  /* сверху фото видно, к тексту заливка густеет — иначе заголовок не прочитать */
  .hero__bg::after{background:linear-gradient(180deg,rgba(251,247,241,.55) 0%,rgba(251,247,241,.93) 30%,rgba(251,247,241,.99) 62%,rgba(251,247,241,1) 100%)}
  .hero__in{padding-top:120px}
}
.pill{display:inline-block;background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 14px;
  font-size:13px;font-weight:700;color:var(--wood-dark);margin-bottom:14px}
.hero__sub{color:var(--muted);font-size:17px;margin-top:14px;max-width:660px}
.hero__sub b{color:var(--ink)}
.prices{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px;max-width:600px}
.prices a{background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:12px;padding:11px 12px;text-align:center;
  transition:.15s;display:flex;flex-direction:column;justify-content:space-between;min-height:88px}
.prices a:hover{border-color:var(--accent);transform:translateY(-2px)}
.prices b{display:block;font-size:14px;line-height:1.25;margin-bottom:6px}
.prices span{display:block;font-size:19px;font-weight:800;color:var(--accent);white-space:nowrap}
.prices i{display:block;font-style:normal;font-size:12px;color:var(--muted);font-weight:600;margin-top:2px}
/* Гарантии — компактной строкой чипов, чтобы первый экран не растягивался */
.guarantees{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.guarantees span{background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:12px;
  padding:9px 13px;display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:600;line-height:1.25}
.guarantees br{display:none}
.guarantees svg{width:20px;height:20px;stroke:var(--accent);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
.hero__cta{margin-top:18px;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.hero__cta small{font-size:13px;color:var(--muted);max-width:520px}

/* ПЕРВЫЙ ЭКРАН НА ТЕЛЕФОНЕ (правка 07.08.2026).
   Замер показал: кнопки уходили за сгиб на 65–411 px, то есть человек видел заголовок
   и уходил, не зная, что делать дальше. Телефона на сайте нет по решению Андрея,
   поэтому единственное действие — кнопка, и она обязана быть видна сразу.
   Решение: на телефоне поднимаем кнопки ВЫШЕ плашек с ценами и гарантий
   (цены и так названы словами в подзаголовке) и ужимаем вертикальные отступы. */
@media(max-width:860px){
  .hero__in{padding:16px 0 20px}
  .hero__rest{display:flex;flex-direction:column}
  .hero__cta{order:-1;margin-top:14px;gap:6px}
  .hero__cta small{font-size:12.5px}
  .pill{margin-bottom:10px;font-size:12.5px;padding:5px 12px}
  .hero__sub{font-size:15.5px;margin-top:10px}
  .prices{margin-top:14px}
  .prices a{min-height:76px;padding:9px 10px}
  .guarantees{margin-top:10px;gap:6px}
  .guarantees span{padding:7px 11px;font-size:13px}
  .hero .btn{min-height:54px}
}
/* Две колонки: слева обещание, справа наглядная схема — суть видна без чтения */
/* Текст первого экрана держим в левой половине — справа должно оставаться видно фото */
.hero__in{position:relative;padding:32px 0 34px}
/* ⚠ НОУТБУК С НЕВЫСОКИМ ЭКРАНОМ (1366×691 и подобные) — главная кнопка не влезала
   в первый экран: замер 14.08.2026 дал кнопку 659–719 при окне 691, то есть человеку
   надо было листать 28 px, чтобы её увидеть. На 1440×900 и на всех мобильных всё влезало,
   поэтому дефект жил незаметно — его поймал только полный аудит на пяти размерах.
   Лечим отступами первого экрана, а не содержимым: экономия около 34 px.
   Границы медиа-запроса подобраны так, чтобы не задеть ни телефоны (min-width),
   ни высокие мониторы (max-height). */
@media (min-width:900px) and (max-height:780px){
  .hero__in{padding:20px 0 22px}
  .hero__sub{margin-top:10px}
  .hero__cta{margin-top:12px}
  /* первого захода не хватило: осталось 6 px, добираем отступами плиток и гарантий */
  .prices{margin-top:10px}
  .prices a{min-height:80px}
  .guarantees{margin-top:9px}
}
.hero__lead,.hero__rest{max-width:660px}
@media(max-width:860px){.hero__lead,.hero__rest{max-width:none}}
.hero__pic{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;margin-top:6px}
.hero__pic b{display:block;font-size:15px;margin-bottom:10px}
.hero__pic svg{width:100%;height:auto;display:block}
.hero__pic figcaption{font-size:13px;color:var(--muted);line-height:1.4;margin-top:10px}
@media(max-width:860px){.hero__in{grid-template-columns:1fr;gap:18px}}
@media(max-width:560px){
  .prices{grid-template-columns:1fr 1fr}
  .prices a:last-child{grid-column:1/-1;min-height:0;flex-direction:row;align-items:center;
    justify-content:space-between;text-align:left}
  .prices a:last-child b{margin-bottom:0}
  .guarantees{grid-template-columns:1fr}
  .guarantees span{flex-direction:row;text-align:left;gap:12px;padding:11px 13px}
  .hero__cta .btn{width:100%}
}

/* СЕТКИ И КАРТОЧКИ */
.grid{display:grid;gap:14px}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:820px){.g3,.g4{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.g2,.g3,.g4{grid-template-columns:1fr}}
/* min-width:0 — иначе элемент сетки не может стать уже своего содержимого и вылезает за экран */
.box{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px;min-width:0}
.box--accent{border-color:var(--accent);box-shadow:0 6px 22px rgba(200,128,30,.10)}
.box--bad{border-color:#f0cfc9}
.checks{list-style:none;display:flex;flex-direction:column;gap:9px}
/* flex-wrap обязателен: без него минимальная ширина строки = галочка + термин + самое длинное
   слово описания В СУММУ, и на 300px блок распирало до 304px — текст обрезался (07.08.2026) */
/* ⚠ flex-wrap:wrap здесь ломал строку: текст длиннее одной строки становился отдельным
   флекс-элементом и уезжал ПОД иконку, а галочка оставалась висеть одна (поймано 07.08.2026
   на гео-страницах). nowrap оставляет иконку и текст в одной строке, а текст переносится
   внутри себя, как обычный абзац. Если внутри пункта есть <b>, оборачивать всё после
   иконки в <span> — иначе <b> станет отдельной колонкой. */
.checks li{display:flex;flex-wrap:nowrap;gap:9px;align-items:flex-start;font-size:15.5px;line-height:1.4}
.checks li>span{flex:1 1 auto;min-width:0}

/* БЛОК «ЧЕСТНЫЙ КУБ» */
.kub{background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px;margin-top:18px}
.kub__vs{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.kub__vs figure{border:1px solid var(--line);border-radius:12px;padding:14px;background:var(--bg)}
.kub__vs figcaption{font-size:14px;color:var(--muted);margin-top:10px;line-height:1.4}
.kub__vs b{display:block;font-size:16px;margin-bottom:8px}
.kub svg.scheme{width:100%;height:auto;display:block}
.formula{background:var(--bg);border:1px dashed var(--wood);border-radius:12px;padding:14px 16px;
  margin-top:16px;font-size:15.5px;line-height:1.5}
.formula b{color:var(--wood-dark)}
@media(max-width:620px){.kub__vs{grid-template-columns:1fr}}

/* ШАГИ */
.steps{counter-reset:s;display:grid;gap:12px;margin-top:16px}
.steps li{list-style:none;background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:15px 16px 15px 58px;position:relative;font-size:15.5px;line-height:1.45}
.steps li:before{counter-increment:s;content:counter(s);position:absolute;left:16px;top:14px;width:28px;height:28px;
  border-radius:50%;background:var(--accent);color:#fff;font-weight:800;font-size:15px;
  display:flex;align-items:center;justify-content:center}
.steps b{display:block;margin-bottom:3px}

/* ПРАЙС */
/* было 13.5px — на телефоне это уже мелко для основного текста, подняли до 15px */
.price-note{font-size:15px;color:var(--muted);margin-top:12px;line-height:1.5}
table.price{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);
  border-radius:12px;overflow:hidden;margin-top:16px}
table.price th,table.price td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line);font-size:15.5px}
table.price th{background:var(--bg);font-size:13.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted)}
table.price tr:last-child td{border-bottom:none}
table.price .p{font-weight:800;color:var(--accent);white-space:nowrap}
/* третья колонка несёт СОДЕРЖАНИЕ (размеры кузова, состав цены, единицы), а не подпись,
   поэтому 15px — как и остальной основной текст. 13.5px тут остались от старой версии
   и вылезли в визуальном аудите 10.08.2026 как «мелкий шрифт в основном тексте». */
table.price .u{color:var(--muted);font-size:15px}
/* Таблица расстояний до населённых пунктов на гео-страницах.
   Своя, а не общий прайс: тут во второй ячейке два факта («48 км · 56 мин в пути»),
   и общий nowrap не дал бы им перенестись на узком экране. */
table.price--np .p{white-space:normal;font-weight:700}
table.price--np .tih{color:var(--muted);font-size:13.5px;font-weight:500}
/* На телефоне таблица превращается в карточки — скролла вбок нет */
@media(max-width:620px){
  table.price,table.price tbody,table.price tr,table.price td{display:block;width:100%}
  table.price thead{display:none}
  table.price tr{border-bottom:1px solid var(--line);padding:12px 14px}
  table.price tr:last-child{border-bottom:none}
  table.price td{border:none;padding:2px 0}
  table.price td.n{font-weight:700;font-size:16px}
  table.price .p{font-size:18px}
  /* Шапка колонок на телефоне скрыта, поэтому значение подписывается само:
     без этого «1 400 ₽ | 1 990 ₽» и «0,25 м | 0,80 | 0,75» читаются как набор
     чисел без смысла. Первой колонке (.n) подпись не нужна — там название. */
  /* white-space:normal ОБЯЗАТЕЛЕН: колонка цены объявлена как
     `table.price .p{white-space:nowrap}` (чтобы «от 2 200 ₽» не рвалось),
     и подпись наследует nowrap — на 300 px её обрезало по правому краю
     («Если это навал — выйдет за уложенный ку…», поймано кадром 13.08.2026). */
  table.price td[data-label]:not(.n):before{
    content:attr(data-label) ": ";
    color:var(--muted);font-size:12.5px;font-weight:600;line-height:1.3;
    display:block;margin-top:5px;white-space:normal}
  table.price td[data-label]:not(.n){margin-top:2px}
}

/* ГЕО */
.geo{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.geo span{background:#fff;border:1px solid var(--line);border-radius:12px;padding:11px 13px;font-size:15px;
  display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.geo i{font-style:normal;color:var(--muted);font-size:13.5px;white-space:nowrap}
.geo a{color:var(--wood-dark);text-decoration:none;border-bottom:1px solid rgba(139,90,43,.35)}
.geo a:hover{border-bottom-color:var(--wood-dark)}
@media(max-width:820px){.geo{grid-template-columns:1fr 1fr}}
@media(max-width:420px){.geo{grid-template-columns:1fr}}

/* FAQ — потолок раскрытия заведомо большой, текст не режется */
.faq{margin-top:16px;display:grid;gap:10px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.faq summary{cursor:pointer;padding:15px 46px 15px 16px;font-weight:700;font-size:16px;position:relative;
  list-style:none;line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"";position:absolute;right:18px;top:50%;width:10px;height:10px;
  border-right:2.5px solid var(--accent);border-bottom:2.5px solid var(--accent);
  transform:translateY(-70%) rotate(45deg);transition:.2s}
.faq details[open] summary:after{transform:translateY(-30%) rotate(-135deg)}
.faq .ans{padding:0 16px 16px;font-size:15.5px;line-height:1.55;color:#3a352f;max-height:1600px}
.faq .ans p+p{margin-top:9px}

/* ФОРМА ЗАЯВКИ: поле → кнопка → согласие, строго одной колонкой */
.cta-sec{background:linear-gradient(135deg,var(--accent) 0%,#a86413 100%);color:#fff;border-radius:12px;
  padding:28px 24px;text-align:center}
.cta-sec h2{color:#fff}
.cta-sec p{opacity:.95;margin-top:6px}
.form{max-width:420px;margin:18px auto 0;display:grid;gap:10px;text-align:left}
.form input[type=tel],.form input[type=text]{width:100%;min-height:56px;border-radius:12px;border:1px solid var(--line);
  padding:0 16px;font-size:17px;font-family:inherit;background:#fff;color:var(--ink)}
.form input:focus{outline:2px solid var(--wood-dark);outline-offset:1px}
.form .btn{width:100%}
/* строки пореже и ссылки с отступом — зона нажатия у ссылок согласия была 16 px высотой */
.ag{display:block;position:relative;padding-left:26px;font-size:13px;line-height:1.65;color:#fff;opacity:.95}
.ag a{display:inline-block;padding:3px 0}
.ag input{position:absolute;left:0;top:2px;width:17px;height:17px;min-height:0;margin:0}
.ag a{text-decoration:underline}
.form .err{background:#fff;color:var(--bad);border-radius:12px;padding:10px 14px;font-size:14px;font-weight:600;display:none}
.form .err.on{display:block}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0;overflow:hidden}
.form-note{font-size:12.5px;opacity:.9;margin-top:2px}
/* На 300px отступы кнопки 26+26 съедали половину места, и «Отправить заявку»
   ломалось в четыре ряда (правило: максимум два). Ужимаем отступы, текст не трогаем. */
@media(max-width:340px){.form .btn{padding:0 12px}}

/* ОТЗЫВЫ СКРИНШОТАМИ — набранные руками карточки читаются как выдумка */
.otz-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:start;margin-top:18px}
.otz__shot{width:100%;height:auto;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 6px 22px rgba(80,50,20,.10);display:block;
  /* скриншот обрезан по нижнему краю — гасим плавно, чтобы обрез читался
     как намеренный, а не как «картинка не догрузилась» */
  -webkit-mask-image:linear-gradient(180deg,#000 86%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 86%,transparent 100%)}
@media(max-width:900px){.otz-grid{grid-template-columns:repeat(2,1fr);gap:10px}}
@media(max-width:560px){.otz-grid{grid-template-columns:1fr}}

/* ХЛЕБНЫЕ КРОШКИ — читатель из поиска должен понимать, куда он попал */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:7px;font-size:13.5px;color:var(--muted);
  padding:8px 0 0}
.crumbs a{color:var(--wood-dark);text-decoration:none;padding:3px 0}
.crumbs a:hover{text-decoration:underline}
.crumbs span[aria-hidden]{opacity:.5}
/* на телефоне первый экран и так плотный — крошки делаем тоньше, чтобы не съедать высоту */
@media(max-width:640px){.crumbs{font-size:12.5px;padding:5px 0 0;gap:5px}.crumbs a{padding:1px 0}}

/* ПОДВАЛ */
footer{background:var(--wood-dark);color:#f3e9dc;padding:34px 0 24px;margin-top:44px;font-size:15px}
footer a{text-decoration:none}
footer a:hover{color:#fff;text-decoration:underline}
.f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:22px}
.f-grid b{display:block;margin-bottom:8px;color:#fff}
.f-links{display:grid;gap:6px;font-size:14.5px}
.f-bottom{border-top:1px solid rgba(255,255,255,.16);margin-top:22px;padding-top:16px;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13.5px;opacity:.9}
@media(max-width:700px){.f-grid{grid-template-columns:1fr}}

/* КУКИ-БАННЕР — компактный */
/* Куки — в правом нижнем углу, узкой плашкой (правило Андрея 31.07.2026,
   эталон «Дрова Киров»): не по центру и не во всю ширину. */
.cookie{position:fixed;right:14px;left:auto;bottom:14px;z-index:9000;
  width:max-content;max-width:min(360px,calc(100% - 24px));
  background:rgba(255,255,255,.20);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:0;border-radius:12px;box-shadow:none;padding:6px 12px;color:var(--ink);
  display:none;flex-wrap:nowrap;align-items:center;gap:10px;font-size:12.5px;line-height:1.35}
.cookie.on{display:flex}
.cookie span{min-width:0}
.cookie a{color:inherit;text-decoration:underline}
.cookie .btn{flex:none;min-height:28px;padding:5px 13px;border-radius:12px;font-size:12.5px;font-weight:600}
@media(max-width:760px){
  /* На телефоне — тонкая строка внизу экрана.
     ⚠ 14.08.2026: раньше здесь стояло bottom:78px ВСЕГДА — «чтобы не перекрывать липкую
     панель». Но в первом экране липкой панели ещё нет (она выезжает только при прокрутке),
     и поднятая плашка попадала ровно на кнопку-призыв: замер 300×600 показал кнопку
     427–481 и плашку 476–522, то есть нижние 5 px кнопки были накрыты. Ловилось только
     проверкой document.elementFromPoint в трёх точках кнопки — на /gorbyl.html,
     /drova-nekolotye.html, /drova-luhovicy.html, /kak-hranit-drova.html.
     Лечим геометрией, а не задержкой показа (правило Андрея 12.08.2026): плашка стоит
     у самого низа, а поднимается ТОЛЬКО когда липкая панель реально показана. */
  .cookie{left:10px;right:10px;bottom:4px;width:auto;max-width:none;padding:4px 10px;gap:8px;
    font-size:12px;background:rgba(255,255,255,.92)}
  .cookie .btn{min-height:26px;padding:4px 12px;font-size:12px}
  /* ⚠ Плашка не должна ПЕРЕХВАТЫВАТЬ клики у кнопок первого экрана (правило 11.08.2026).
     На 300×600 первый экран заполнен до самого низа, и куда плашку ни двигай, она
     накрывает то главную кнопку, то вторую: замер 14.08 давал 3 накрытых главных при
     bottom:78px и 11 накрытых вторых при bottom:4px. Поэтому сам контейнер клики
     пропускает насквозь, а кликабельными остаются только кнопка «Хорошо» и ссылка. */
  .cookie{pointer-events:none}
  .cookie .btn, .cookie a{pointer-events:auto}
  /* .sticky в разметке идёт ПЕРЕД .cookie, поэтому соседний селектор работает без правки JS */
  .sticky.on ~ .cookie{bottom:78px}
}

/* ФОТО В ПЕРВОМ ЭКРАНЕ */
.hero__photo{border-radius:12px;overflow:hidden;border:1px solid var(--line);position:relative;
  box-shadow:0 18px 40px rgba(60,40,20,.14);align-self:stretch;min-height:100%}
.hero__photo img{width:100%;height:100%;object-fit:cover;display:block;min-height:420px}
@media(max-width:860px){.hero__photo img{min-height:0;aspect-ratio:3/2}}
.hero__photo figcaption{position:absolute;left:12px;right:12px;bottom:12px;background:rgba(255,255,255,.94);
  border-radius:12px;padding:10px 13px;font-size:13px;line-height:1.4;display:flex;gap:9px;align-items:flex-start;
  box-shadow:0 6px 18px rgba(0,0,0,.12)}
.hero__photo figcaption svg{width:18px;height:18px;flex:none;margin-top:1px;fill:none;stroke:var(--ok);
  stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.hero__photo b{display:block}

/* КАРТОЧКИ ТОВАРА — фото строго квадратное, подписи одинаковой высоты */
.goods{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:18px}
.goods figure{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;
  display:flex;flex-direction:column;transition:.15s}
.goods figure:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 10px 26px rgba(60,40,20,.10)}
.goods .ph{position:relative;width:100%;padding-top:100%;background:#fff;overflow:hidden}
.goods .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:8px}
.goods figcaption{padding:12px 14px 14px;display:flex;flex-direction:column;gap:2px;flex:1;
  border-top:1px solid var(--line)}
.goods b{font-size:15.5px;line-height:1.25;min-height:2.5em}
.goods .p{font-size:19px;font-weight:800;color:var(--accent);margin-top:2px}
.goods i{font-style:normal;font-size:12.5px;color:var(--muted);line-height:1.35;margin-top:2px}
@media(max-width:860px){.goods{grid-template-columns:1fr 1fr}.goods b{min-height:0}}
@media(max-width:420px){.goods{grid-template-columns:1fr 1fr;gap:10px}}

/* ФОТО-БЛОК В СЕКЦИИ */
.pic-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}
/* колонка + растянутая подпись: иначе соседние карточки в ряду разной высоты */
.pic-row figure{border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#fff;
  display:flex;flex-direction:column}
.pic-row img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.pic-row figcaption{padding:12px 14px;font-size:15px;line-height:1.45;flex:1}
.pic-row figcaption b{display:block;margin-bottom:3px}
@media(max-width:620px){.pic-row{grid-template-columns:1fr}}

.pic-wide{border-radius:12px;overflow:hidden;border:1px solid var(--line);margin-top:18px;position:relative}
.pic-wide img{width:100%;aspect-ratio:21/9;object-fit:cover;display:block}
.pic-wide figcaption{position:absolute;left:14px;bottom:14px;right:14px;background:rgba(255,255,255,.94);
  border-radius:12px;padding:11px 14px;font-size:14px;line-height:1.4;max-width:520px}
@media(max-width:620px){.pic-wide img{aspect-ratio:16/10}.pic-wide figcaption{position:static;background:none;
  padding:12px 14px;box-shadow:none;max-width:none}}

/* Длинные строки читать тяжело — ограничиваем ширину текста */
.lead,.sec p:not(.price-note):not(.form-note):not(.cta-sec p){max-width:78ch}
table.price{max-width:860px}

/* Пара кнопок в первом экране: расчёт + написать в мессенджер */
.cta-pair{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch}
.btn--msg{background:#fff;color:var(--wood-dark);border:2px solid var(--wood);gap:8px}
.btn--msg:hover{background:#fff5e8}
.btn--msg img{width:26px;height:26px;border-radius:50%}
@media(max-width:560px){.cta-pair{flex-direction:column}.cta-pair .btn{width:100%}}

/* КАЛЬКУЛЯТОР */
.calc{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px;margin-top:18px;
  display:grid;grid-template-columns:1fr 1fr;gap:20px}
.calc__f{display:grid;gap:14px;align-content:start}
.calc label{display:block;font-size:14px;font-weight:700;margin-bottom:6px}
.calc select,.calc input[type=number]{width:100%;min-height:52px;border-radius:12px;border:1px solid var(--line);
  padding:0 14px;font-size:16px;font-family:inherit;background:#fff;color:var(--ink)}
.calc__out{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:18px;
  display:flex;flex-direction:column;justify-content:center}
.calc__num{font-size:clamp(26px,4vw,36px);font-weight:800;color:var(--accent);line-height:1.1}
.calc__row{margin-bottom:14px}
.calc__row:last-child{margin-bottom:0}
.calc__cap{font-size:13.5px;color:var(--muted);margin-bottom:2px}
.calc__note{font-size:13px;color:var(--muted);line-height:1.45;margin-top:14px}
@media(max-width:720px){.calc{grid-template-columns:1fr;padding:16px}}

/* ЧЕСТНЫЕ ОГРАНИЧЕНИЯ */
.limits{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
.limits .box b{display:block;margin-bottom:9px}
@media(max-width:620px){.limits{grid-template-columns:1fr}}

/* СЕЗОН */
.season{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:16px}
.season div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;font-size:14.5px;line-height:1.4}
.season b{display:block;font-size:15px;margin-bottom:5px}
.season .now{border-color:var(--accent);box-shadow:0 6px 22px rgba(200,128,30,.10)}
.season .now b{color:var(--accent)}
@media(max-width:820px){.season{grid-template-columns:1fr 1fr}}
@media(max-width:440px){.season{grid-template-columns:1fr}}

/* Крупные кнопки мессенджеров в блоке связи */
.msg-big{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
.msg-big a{display:inline-flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:12px 18px;font-weight:700;font-size:16px;transition:.15s}
.msg-big a:hover{border-color:var(--accent);transform:translateY(-2px)}
.msg-big img{width:30px;height:30px;border-radius:50%}
.msg-big i{display:block;font-style:normal;font-size:12.5px;color:var(--muted);font-weight:600}

/* Липкая кнопка на телефоне */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:50;background:rgba(255,255,255,.97);
  border-top:1px solid var(--line);padding:8px 12px;display:none;gap:8px}
.sticky .btn{flex:1;min-height:50px;font-size:16px}
.sticky .msgr a{width:50px;height:50px}
.sticky .msgr img{width:50px;height:50px}
/* Появляется только после первого экрана: наверху те же кнопки уже есть,
   и две одинаковые пары подряд читаются как навязчивость (правка 07.08.2026) */
@media(max-width:760px){
  .sticky{display:flex;transform:translateY(115%);transition:transform .22s ease-out;
    will-change:transform}
  .sticky.on{transform:none}
  body{padding-bottom:70px}
}
@media(prefers-reduced-motion:reduce){.sticky{transition:none}}