@font-face{font-family:'Passion One';src:url(passionone-700.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'PT Sans';src:url(ptsans-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'PT Sans';src:url(ptsans-700.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  --kkr-ink:#221c19;
  --kkr-ink-soft:#6b615b;
  --kkr-flame:#d21014;
  --kkr-flame-deep:#a00b10;
  --kkr-paper:#fdfbf7;
  --kkr-smoke:#f4eee6;
  --kkr-coal:#241f1c;
  --kkr-edge:#e6ddd3;
  --kkr-accent:#b5100f;
  --kkr-on-dark:#f6f1e9;
  --kkr-gut:clamp(20px,4.5vw,44px);
  --kkr-hold:1200px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--kkr-paper);
  color:var(--kkr-ink);
  font-family:'PT Sans',system-ui,sans-serif;
  font-size:17px;
  line-height:1.6;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:'Passion One','Arial Narrow',sans-serif;font-weight:700;line-height:1.08;margin:0;letter-spacing:.012em}
h1{font-size:clamp(34px,5vw,56px)}
h2{font-size:clamp(26px,3.4vw,38px)}
h3{font-size:20px;letter-spacing:.02em}
p{margin:0 0 1em}
:focus-visible{outline:2px solid var(--kkr-accent);outline-offset:2px}

/* ---------- каркас ---------- */
.boilyard{max-width:var(--kkr-hold);margin-inline:auto;padding-inline:var(--kkr-gut)}
.jumppots{
  position:absolute;left:-9999px;top:0;z-index:40;
  background:var(--kkr-coal);color:var(--kkr-on-dark);padding:12px 22px;border-radius:0 0 8px 0
}
.jumppots:focus{left:0}

.firetop{border-bottom:3px solid var(--kkr-flame);background:var(--kkr-paper)}
.firetop > .boilyard{display:flex;align-items:center;gap:14px 28px;min-height:76px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
.crownsign{display:inline-flex;align-items:center;gap:12px;text-decoration:none}
.crownsign img{width:44px;height:44px}
.crownsign span{font-family:'Passion One',sans-serif;font-size:26px;letter-spacing:.03em;color:var(--kkr-flame-deep)}
.firemenu{margin-left:auto;display:flex;flex-wrap:wrap;gap:4px 20px}
.firemenu a{
  text-decoration:none;font-size:15px;font-weight:700;letter-spacing:.01em;
  padding:6px 0;border-bottom:2px solid transparent
}
.firemenu a:hover{border-bottom-color:var(--kkr-flame)}

.stovepath{font-size:14px;color:var(--kkr-ink-soft);padding:14px 0 2px}
.stovepath ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 12px}
.stovepath li+li::before{content:'>';margin-right:12px;color:var(--kkr-ink-soft)}
.stovepath a{text-decoration:none}
.stovepath a:hover{text-decoration:underline}

/* ---------- полосы ---------- */
section{padding:clamp(42px,5.5vw,74px) 0}
.smokefloor{background:var(--kkr-smoke)}
.steamfloor{background:linear-gradient(180deg,var(--kkr-paper) 0%,var(--kkr-smoke) 100%)}
.nightboil{
  background:var(--kkr-coal);
  --kkr-ink:#f6f1e9;
  --kkr-ink-soft:#cfc4b8;
  --kkr-accent:#ff8d76;
  --kkr-edge:#453c36;
  color:var(--kkr-on-dark)
}
.lastladle{border-top:4px solid var(--kkr-flame)}
/* Шапка страницы: под ней сразу идёт следующая полоса со своим верхним отступом, и два
   отступа подряд дают до 156px пустоты (грабля wongs). Нижний снимаем — расстояние держит
   верхний отступ соседа. Первый h3 внутри длинного текста тоже не должен добавлять свой. */
.liftlid{padding-bottom:0}
.longsimmer h3:first-child{margin-top:0}

.emberline{
  text-transform:uppercase;letter-spacing:.16em;font-size:13px;font-weight:700;
  color:var(--kkr-accent);margin:0 0 10px
}
.boiltitle{margin:0 0 14px}
.ladlelead{font-size:18px;color:var(--kkr-ink-soft);max-width:62ch;margin:0 0 24px}

/* ---------- герой главной ---------- */
.openflame > .boilyard{display:grid;grid-template-columns:1.05fr 1fr;gap:var(--kkr-gut);align-items:center}
.openflame h1{margin:0 0 14px}
.openflame .ladlelead{margin-bottom:26px}

.potrail{
  display:grid;grid-auto-flow:column;grid-auto-columns:216px;gap:14px;
  overflow-x:auto;padding:4px 2px 16px
}

/* Карусель героя: стрелки поверх краёв рейла. Позиционирование селекторами
   first/last-of-type — в этом файле нет доступа к A.roll, и он тут не нужен.
   Кнопка — элемент со своей светлой заливкой внутри ТЁМНОГО героя, где var(ink)
   переопределена в светлую: цвет глифа и рамки константами, не переменными. */
/* min-width:0 обязателен: обёртка встала МЕЖДУ гридом героя и скролл-контейнером рейла,
   без него грид-ячейка расширяется до суммы карточек (5x216) и давит колонку h1. */
.kettlelane{position:relative;min-width:0}
/* top:40%, а не 50%: вертикальный центр рейла приходится на строку заголовка карточки,
   и круг стрелки съедает первые буквы; на 40% он висит над белым полем фото. */
.stirstick{
  position:absolute;top:40%;transform:translateY(-50%);z-index:2;
  width:40px;height:40px;border-radius:50%;border:1px solid #e6ddd3;
  background:var(--kkr-paper);color:#221c19;cursor:pointer;
  font:400 22px/1 'PT Sans',sans-serif;
  box-shadow:0 2px 8px rgba(0,0,0,.35)
}
.stirstick:hover{background:var(--kkr-flame);color:#fff;border-color:var(--kkr-flame)}
.stirstick:first-of-type{left:-14px}
.stirstick:last-of-type{right:-14px}

/* ---------- кнопки ---------- */
.flamebtn{
  display:inline-block;background:var(--kkr-flame);color:#fff;border:0;cursor:pointer;
  font:700 15px/1 'PT Sans',sans-serif;letter-spacing:.02em;
  padding:13px 22px;border-radius:7px;text-decoration:none
}
.flamebtn:hover{background:var(--kkr-flame-deep)}
.flameduo{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:20px}

/* Растровая кнопка покупки: обёртка button обязана остаться кликабельной как есть. */
.buyflame{display:inline-block;background:none;border:0;padding:0;cursor:pointer}
.buyflame img{max-width:min(320px,100%);height:auto}

/* ---------- сетки, карточки, плитки ---------- */
.potgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:18px}

/* Карточка — своя заливка на любом фоне: светлые значения переменных объявлены у неё
   самой, чтобы тёмная полоса (рейл героя) не перекрасила текст внутри белого поля. */
.potcard{
  background:#fff;
  --kkr-ink:#221c19;
  --kkr-ink-soft:#6b615b;
  --kkr-accent:#b5100f;
  --kkr-edge:#e6ddd3;
  color:var(--kkr-ink);
  border:1px solid var(--kkr-edge);border-radius:10px;padding:12px;
  display:flex;flex-direction:column;gap:8px;min-height:0;min-width:0
}
.potcard h3{font:700 16px/1.35 'PT Sans',sans-serif;letter-spacing:0}
.potcard h3 a{text-decoration:none}
.potcard h3 a:hover{text-decoration:underline}

.panframe{position:relative;aspect-ratio:1;background:#fff;border-radius:8px;overflow:hidden}
.kettleshot{position:absolute;inset:12px;width:calc(100% - 24px);height:calc(100% - 24px);object-fit:contain}

.pottile{
  background:#fff;
  --kkr-ink:#221c19;
  --kkr-ink-soft:#6b615b;
  color:var(--kkr-ink);
  border:1px solid var(--kkr-edge);border-radius:10px;padding:14px;
  display:flex;flex-direction:column;gap:10px;min-height:0;min-width:0;
  text-decoration:none
}
.pottile strong{display:block;font-family:'Passion One',sans-serif;font-weight:700;font-size:22px;letter-spacing:.02em}
.pottile span{color:var(--kkr-ink-soft);font-size:15px}
.pottile:hover strong{color:var(--kkr-accent)}

/* Промо-дуэт: плитки без фото — дать им рост и прижать текст вниз. Тёмная из пары несёт
   класс тёмной полосы на себе, но блок плитки объявлен ПОЗЖЕ блока тёмной полосы и при
   равной специфичности перебил бы его светлыми переменными: тёмный текст лёг бы на уголь.
   Компаунд-правило двумя классами выигрывает у обоих при любой перестановке файла и
   возвращает тёмной плитке и фон, и переменные целиком. */
.twinpots > .pottile{min-height:220px;justify-content:flex-end}
.pottile.nightboil{
  background:var(--kkr-coal);
  --kkr-ink:#f6f1e9;
  --kkr-ink-soft:#cfc4b8;
  --kkr-accent:#ff8d76;
  --kkr-edge:#453c36;
  border-color:var(--kkr-edge);
  color:var(--kkr-on-dark)
}

.twinpots{display:grid;grid-template-columns:1fr 1fr;gap:var(--kkr-gut);align-items:start}
.twinpots > *{min-width:0}

/* ---------- цена и звёзды ---------- */
.boilcost{font-size:22px;font-weight:700;margin:0 0 10px}
.boilcost small{
  display:block;font-weight:400;font-size:13px;line-height:1.45;
  color:var(--kkr-ink-soft);max-width:44ch;margin-top:4px
}
.heatstars{display:inline-flex;align-items:baseline;gap:7px;font-size:14px}
.heatstars i{font-style:normal;color:#dd9420;letter-spacing:.06em}
.heatstars b{font-size:15px}
.heatstars > span{color:var(--kkr-ink-soft)}

/* ---------- преимущества, ценности, цифры ---------- */
.ourword{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:22px}
.ourword h3{margin:0 0 8px}
.ourword p{margin:0;color:var(--kkr-ink-soft)}
.ourword svg{width:36px;height:36px;fill:var(--kkr-accent);margin-bottom:12px}

.countkettle dl{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:26px;margin:14px 0 0
}
.countkettle dt{font-family:'Passion One',sans-serif;font-size:clamp(34px,4vw,48px);line-height:1;color:var(--kkr-accent)}
.countkettle dd{margin:8px 0 0;color:var(--kkr-ink-soft);font-size:15px}

/* ---------- чипы и фасеты ---------- */
.coalchips,.siftrow{display:flex;flex-wrap:wrap;gap:10px}
.coalchips a,button.coalchips{
  display:inline-block;background:#fff;color:var(--kkr-ink);
  border:1px solid var(--kkr-edge);border-radius:999px;cursor:pointer;
  font:700 14px/1 'PT Sans',sans-serif;padding:10px 16px;text-decoration:none
}
.coalchips a:hover,button.coalchips:hover{border-color:var(--kkr-accent);color:var(--kkr-accent)}
button.coalchips[aria-pressed="true"]{background:var(--kkr-coal);border-color:var(--kkr-coal);color:var(--kkr-on-dark)}

/* ---------- таблицы ---------- */
.quartchart,.longsimmer table{width:100%;border-collapse:collapse;margin:0 0 26px}
.quartchart th,.quartchart td,.longsimmer th,.longsimmer td{
  padding:9px 16px 9px 0;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--kkr-edge);font-size:15px
}
.quartchart thead th,.longsimmer thead th{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--kkr-ink-soft)}
/* ⚠ У caption выключка по умолчанию ПО ЦЕНТРУ: суженная подпись собирается лесенкой
   посреди полосы (грабля wongs). Левая выключка + ячейки без левого отступа — подпись
   стоит на одной оси с первой колонкой. */
.quartchart caption,.longsimmer caption{
  caption-side:top;text-align:left;font-size:14px;color:var(--kkr-ink-soft);
  max-width:58ch;padding:0 0 10px
}

/* ---------- карточка товара ---------- */
.burnspecs{margin:22px 0 0;border-top:1px solid var(--kkr-edge)}
.burnspecs > div{display:grid;grid-template-columns:140px 1fr;gap:14px;padding:9px 0;border-bottom:1px solid var(--kkr-edge)}
.burnspecs dt{color:var(--kkr-ink-soft);font-size:14px}
.burnspecs dd{margin:0;font-size:15px}

.closekettle .boilyard{text-align:center}
.closekettle .plainpot{font-size:19px;margin:0 0 8px}
.closekettle .boilcost{font-size:26px}

/* ---------- цитаты ---------- */
.quotecoals{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.saidatthefire{
  margin:0;background:#fff;
  --kkr-ink:#221c19;
  --kkr-ink-soft:#6b615b;
  color:var(--kkr-ink);
  border-left:4px solid var(--kkr-flame);border-radius:0 10px 10px 0;padding:18px 20px
}
.saidatthefire blockquote{margin:0 0 12px;font-size:16px}
.saidatthefire figcaption{font-size:14px;color:var(--kkr-ink-soft)}

/* ---------- заметки и вопросы ---------- */
.ledgerwall{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.firenotes{
  display:flex;flex-direction:column;gap:8px;text-decoration:none;
  border:1px solid var(--kkr-edge);border-radius:10px;padding:20px
}
.firenotes strong{font-family:'Passion One',sans-serif;font-weight:700;font-size:22px;letter-spacing:.02em}
.firenotes span{color:var(--kkr-ink-soft);font-size:15px}
.firenotes:hover strong{color:var(--kkr-accent)}

.longsimmer{max-width:72ch}
.longsimmer h3{margin:1.5em 0 .5em}
.longsimmer ul{margin:0 0 1.2em;padding-left:22px}
.longsimmer li{margin:0 0 8px}
.longsimmer a{color:var(--kkr-accent)}

.stewroll{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:18px}
.stewbox{border:1px solid var(--kkr-edge);border-radius:10px;padding:20px}
.stewbox h3{margin:0 0 10px}
.stewbox p{margin:0;color:var(--kkr-ink-soft)}
.stewbox a{color:var(--kkr-accent)}

.plainpot{margin:0;color:var(--kkr-ink-soft);font-size:15px}
ul.plainpot{padding-left:22px;max-width:72ch}
ul.plainpot li{margin:0 0 8px}

/* Шаги выбора на главной: нумерация огоньком. */
.twinpots ol{list-style:none;margin:0;padding:0;counter-reset:kk}
.twinpots ol li{counter-increment:kk;position:relative;padding-left:52px;margin:0 0 20px}
.twinpots ol li::before{
  content:counter(kk);position:absolute;left:0;top:0;width:36px;height:36px;
  border-radius:50%;background:var(--kkr-flame);color:#fff;
  font:700 17px/36px 'Passion One',sans-serif;text-align:center
}
.twinpots ol strong{display:block;margin-bottom:2px}

/* ---------- подборщик ---------- */
.crowdform{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.crowdstep{margin:0;border:1px solid var(--kkr-edge);border-radius:10px;padding:16px 18px;background:#fff}
.crowdstep legend{font-weight:700;padding:0 6px}
.crowdstep label{display:block;padding:5px 0;font-size:15px;cursor:pointer}
.crowdstep input{accent-color:var(--kkr-flame);margin-right:8px}
.crowdout{font-size:18px;font-weight:700;min-height:1.6em;margin:22px 0 0}

/* ---------- подвал ---------- */
.pitfoot{
  background:var(--kkr-coal);
  --kkr-ink:#f6f1e9;
  --kkr-ink-soft:#cfc4b8;
  --kkr-accent:#ff8d76;
  --kkr-edge:#453c36;
  color:var(--kkr-on-dark);
  padding:clamp(42px,5.5vw,64px) 0;margin-top:0
}
.pitfoot nav{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.pitfoot h3{font-size:15px;text-transform:uppercase;letter-spacing:.1em;margin:0 0 12px;color:var(--kkr-ink-soft)}
.pitfoot ul{list-style:none;margin:0;padding:0}
.pitfoot li{margin:0 0 9px}
.pitfoot a{text-decoration:none;font-size:15px}
.pitfoot a:hover{text-decoration:underline}
/* ⚠ Браузер набирает address курсивом: тег берём за смысл, вид возвращаем руками. */
.pitfoot address{font-style:normal;margin:34px 0 0;padding-top:22px;border-top:1px solid var(--kkr-edge);color:var(--kkr-ink-soft);font-size:15px}
.notecoal{max-width:min(380px,100%);height:auto;margin-top:22px;opacity:.85}

/* ---------- состояния ---------- */
.lidshut{display:none}

/* ---------- узкие экраны ---------- */
@media (max-width:960px){
  .openflame > .boilyard{grid-template-columns:1fr}
  .pitfoot nav{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  .stirstick{display:none}
  .twinpots{grid-template-columns:1fr}
  .potgrid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
  .firemenu{margin-left:0}
}