/* chewline.css — своя вёрстка каталога CANAY.
   Палитра снята с логотипа бренда (синий росчерк, кирпичный подзаголовок) и с
   баннера с пятью монстрами (оранжевый, розовый, лайм, слива, небо).
   Имена классов намеренно свои: .crib .rim .collar .lug .basin .cluster .pod
   .face .gum .nub .sprig .grip .spout .kerb .prong .knurl .tine .molar
   .stipple .dimple .groove .husk .bumps .stack .flange .notch .bud
   Производные от них (приставка к уже проверенному корню, отдельный grep не
   нужен): .rim-top .rim-say .rim-quick .rim-main .rim-grid .rim-pill .rim-bar
   .collar-toggle .collar-bars .lug-big .basin-in .basin-art
   .basin-flag .basin-frame .basin-lead .basin-usp .basin-usp-one .basin-acts
   .grip-hot .grip-ghost .grip-card .grip-fat .grip-hollow .grip-shot .kerb-chips
   .kerb-chip .kerb-chip-row .kerb-creed .kerb-mail .kerb-cheat .kerb-nav
   .kerb-foot .kerb-base .kerb-up
   Перед добавлением нового имени — прогнать grep по css соседних проектов:
   имя, занятое хотя бы одним из них, не берём.
   ВНИМАНИЕ: внутри этого комментария не должно быть последовательности
   «звёздочка + слэш» — она закрывает комментарий досрочно и съедает :root,
   после чего все переменные цвета молча пропадают. */

:root {
  --indigo: #2a3b8f;
  --indigo-deep: #1b2352;
  --brick: #b8382c;
  --tang: #f58220;
  --rose: #e8639f;
  --lime: #8dc63f;
  --plum: #a2519d;
  --sky: #38bdef;
  --paper: #fffcf6;
  --sheet: #ffffff;
  --hush: #f4f1ea;
  --line: #e3ded2;
  --text: #23262f;
  --mute: #6b6f7d;
  --round: 18px;
  --round-s: 10px;
  --shade: 0 1px 2px rgba(27, 35, 82, .05), 0 8px 22px rgba(27, 35, 82, .06);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: 'Lexend', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-size: 17px;
  line-height: 1.62;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: 'Gabarito', 'Lexend', sans-serif;
  font-weight: 700;
  line-height: 1.16;
  color: var(--indigo-deep);
  margin: 0 0 .6em;
  letter-spacing: -.015em;
}

h1 { font-size: clamp(1.95rem, 4.4vw, 3.05rem); }
h2 { font-size: clamp(1.45rem, 2.9vw, 2.05rem); }
h3 { font-size: 1.2rem; }
h4 { font-size: 1.02rem; }

p { margin: 0 0 1.05em; }
a { color: var(--indigo); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }

.crib { width: min(1180px, 100% - 2.6rem); margin-inline: auto; }
.stack { padding-block: clamp(2.4rem, 5vw, 4.2rem); }
.stack-tight { padding-block: clamp(1.6rem, 3vw, 2.4rem); }
.hush { background: var(--hush); }
.sheeted { background: var(--sheet); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--indigo); color: #fff; padding: .7rem 1.1rem; border-radius: 0 0 var(--round-s) 0;
}
.skip:focus { left: 0; }

/* ── шапка: три яруса ──────────────────────────────────────────────────────
   rim-top   — тонкая тёмная полоса со слоганом и быстрыми ссылками
   rim-main  — светлый ярус: бургер, знак по центру, плашка полос справа
   rim-bar   — цветная лента разделов; на узком экране прячется, класс
               notch-open вешается на сам header (.rim), не на .collar. */
.rim { background: var(--sheet); position: sticky; top: 0; z-index: 40; }

.rim-top { background: var(--indigo-deep); color: #b9c1e2; font-size: .78rem; letter-spacing: .02em; }
.rim-top .crib { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; justify-content: space-between; align-items: center; padding-block: .5rem; }
.rim-say { display: inline-flex; align-items: center; gap: .5rem; }
.rim-say::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--tang); flex: none; }
.rim-quick { display: flex; gap: 1.1rem; }
.rim-top a { color: #fff; }

.rim-main { border-bottom: 1px solid var(--line); }
.rim-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; gap: 1rem; padding-block: 1.05rem;
}
/* Колонки назначены явно. Бургер на десктопе display:none, и при
   автораскладке grid просто не занимал первую колонку: логотип уезжал в левую
   треть, а таблетка вставала сразу за ним вместо правого края. */
.rim-grid .collar-toggle { grid-column: 1; justify-self: start; }
.rim-grid .lug { grid-column: 2; justify-self: center; }
.rim-grid .rim-pill { grid-column: 3; }
.rim-pill {
  justify-self: end; display: inline-flex; align-items: center; gap: .6rem;
  border: 1px solid var(--line); border-radius: 999px; padding: .42rem .95rem .42rem .75rem;
  color: var(--indigo-deep); background: var(--paper);
}
.rim-pill:hover { text-decoration: none; border-color: var(--indigo); }
.rim-pill svg { color: var(--brick); flex: none; }
.rim-pill b { display: block; font-family: 'Gabarito', sans-serif; font-size: .88rem; font-weight: 600; line-height: 1.25; }
.rim-pill em { display: block; font-style: normal; font-size: .74rem; color: var(--mute); line-height: 1.25; }

/* Лента разделов: тонкая цветная нить сверху повторяет пять монстров баннера. */
.rim-bar { border-bottom: 1px solid var(--line); background: var(--paper); }
.rim-bar::before {
  content: ''; display: block; height: 3px;
  background: linear-gradient(to right,
    var(--sky) 0 20%, var(--lime) 20% 40%, var(--tang) 40% 60%,
    var(--rose) 60% 80%, var(--plum) 80% 100%);
}

/* Логотип — картинка бренда. Прежние .lug-word/.lug-tail (набор шрифтом)
   удалены вместе с разметкой: подпись там была прописная вразрядку, а в
   настоящем знаке она строчная курсивом, и локап не совпадал.
   Размер задаётся ШИРИНОЙ при height:auto — то же правило, что у кнопки
   покупки: фиксированная высота плюс max-width сплющивает картинку. */
.lug { display: inline-flex; text-decoration: none; flex: none; line-height: 0; }
.lug:hover { text-decoration: none; }
.lug img { display: block; width: 156px; max-width: 100%; height: auto; }
.lug-big img { width: 210px; }

.collar { display: flex; align-items: center; gap: .1rem; flex-wrap: wrap; justify-content: center; }
.collar a {
  display: inline-block; padding: .62rem .85rem; position: relative;
  font-size: .93rem; font-weight: 400; color: var(--text);
}
.collar a:hover { color: var(--indigo); text-decoration: none; }
.collar a.notch { color: var(--indigo); font-weight: 500; }
.collar a.notch::after {
  content: ''; position: absolute; left: .85rem; right: .85rem; bottom: .3rem;
  height: 2px; background: var(--brick); border-radius: 2px;
}

.collar-toggle {
  display: none; align-items: center; gap: .5rem; background: none;
  border: 1px solid var(--line); border-radius: var(--round-s);
  padding: .45rem .7rem; font: inherit; font-size: .85rem; cursor: pointer;
  color: var(--indigo-deep);
}
.collar-bars { width: 16px; height: 10px; position: relative; display: inline-block; }
.collar-bars::before, .collar-bars::after, .collar-bars {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 16px 2px; background-repeat: no-repeat;
}
.collar-bars { background-position: 0 0; }
.collar-bars::before { content: ''; position: absolute; inset: 0; background-position: 0 4px; }
.collar-bars::after { content: ''; position: absolute; inset: 0; background-position: 0 8px; }

/* ── хлебные крошки ────────────────────────────────────────────────────── */
.prong { font-size: .84rem; color: var(--mute); padding-block: .9rem; }
.prong a { color: var(--mute); }
.prong span { padding-inline: .35rem; opacity: .55; }

/* ── герой: тёмный редакторский экран ─────────────────────────────────────── */
.basin {
  background:
    radial-gradient(circle at 14% 18%, rgba(56, 189, 239, .22), transparent 45%),
    radial-gradient(circle at 86% 82%, rgba(232, 99, 159, .2), transparent 48%),
    linear-gradient(140deg, var(--indigo-deep) 0%, #232f74 46%, var(--indigo) 100%);
  color: #dfe4f7;
}
.basin .crib { padding-block: clamp(2.6rem, 6vw, 4.4rem); }
.basin-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(1.6rem, 4vw, 3.4rem); align-items: center; }
.basin h1 { color: #fff; }
.basin .eyebrow { color: var(--tang); }
.basin p.big { font-size: 1.09rem; color: #c6cdea; max-width: 56ch; }
.basin-acts { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.5rem; }

.tally { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; }
.tally div {
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--round-s); padding: .58rem .95rem; min-width: 104px;
}
.tally b { display: block; font-family: 'Gabarito', sans-serif; font-size: 1.35rem; color: #fff; line-height: 1.1; }
.tally span { font-size: .76rem; color: #9fa9d4; }

.basin-art { position: relative; }
.basin-flag {
  display: inline-block; background: var(--brick); color: #fff;
  font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 500;
  padding: .32rem .8rem; border-radius: 999px; margin-bottom: .8rem;
}
.basin-frame {
  background: var(--sheet); border-radius: var(--round); padding: .8rem;
  box-shadow: 0 18px 48px rgba(10, 14, 40, .38);
}
.basin-frame img { border-radius: var(--round-s); }

/* Плашка «самый обсуждаемый» свисает с угла баннера — снимок, цена, полоса. */
.basin-lead {
  display: flex; align-items: center; gap: .9rem; margin-top: -1.4rem; margin-left: 1.4rem;
  width: fit-content; max-width: 100%; position: relative;
  background: var(--paper); border-radius: var(--round-s); padding: .6rem .95rem .6rem .6rem;
  box-shadow: 0 10px 26px rgba(10, 14, 40, .3);
}
.basin-lead:hover { text-decoration: none; }
.basin-lead img { width: 60px; height: 60px; object-fit: contain; flex: none; }
.basin-lead em { display: block; font-style: normal; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--brick); }
.basin-lead b { display: block; font-family: 'Gabarito', sans-serif; font-size: .92rem; color: var(--indigo-deep); line-height: 1.25; }
.basin-lead i { font-style: normal; font-size: .78rem; color: var(--mute); }

/* Полоса из четырёх обещаний под героем, наполовину заезжает на него. */
.basin-usp {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--sheet); border: 1px solid var(--line); border-radius: var(--round);
  box-shadow: var(--shade); margin-top: -1.9rem; position: relative; z-index: 2; overflow: hidden;
}
.basin-usp-one { padding: 1rem 1.1rem; border-right: 1px solid var(--line); }
.basin-usp-one:last-child { border-right: 0; }
.basin-usp-one svg { color: var(--brick); margin-bottom: .35rem; }
.basin-usp-one b { display: block; font-family: 'Gabarito', sans-serif; font-size: .93rem; color: var(--indigo-deep); line-height: 1.3; }
.basin-usp-one span { font-size: .8rem; color: var(--mute); line-height: 1.45; display: block; margin-top: .2rem; }

/* ── кнопки ────────────────────────────────────────────────────────────── */
.grip {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: var(--indigo); color: #fff; border: 1px solid var(--indigo);
  padding: .72rem 1.35rem; border-radius: 999px; font: inherit; font-weight: 500; font-size: .96rem;
  cursor: pointer; text-align: center;
}
.grip:hover { background: #22307a; border-color: #22307a; color: #fff; text-decoration: none; }
.grip-hollow { background: transparent; color: var(--indigo-deep); border-color: var(--line); }
.grip-hollow:hover { background: var(--sheet); color: var(--indigo-deep); border-color: var(--indigo); }
/* На тёмном герое: кирпичная главная кнопка и прозрачная вторая. */
.grip-hot { background: var(--brick); border-color: var(--brick); padding-inline: 1.6rem; }
.grip-hot:hover { background: #9d2f24; border-color: #9d2f24; }
.grip-ghost { background: transparent; border-color: rgba(255, 255, 255, .4); color: #fff; }
.grip-ghost:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; }
/* Кнопка покупки — картинка. Собственная обводка и заливка .grip тут гасятся:
   рамка у кнопки уже нарисована внутри SVG, иначе получилась бы вторая.
   Картинка НЕ растягивается по ширине контейнера (width:auto при заданной
   высоте) — при растяжении надпись внутри поехала бы вместе с ней. */
.grip-shot {
  background: none; border: 0; padding: 0; border-radius: 0;
  gap: 0; line-height: 0;
}
.grip-shot:hover { background: none; }
/* Размер задаётся ШИРИНОЙ при height:auto, а не высотой: при фиксированной
   высоте плюс max-width картинку в узкой карточке сплющивало бы по горизонтали.
   Пропорция макета 164:42, отсюда ширины ниже. */
.grip-shot img {
  display: block; width: 164px; max-width: 100%; height: auto;
  transition: filter .15s, transform .15s;
}
.grip-shot:hover img { filter: brightness(1.06); transform: translateY(-1px); }
.grip-shot:active img { transform: translateY(0); }
/* Обводка фокуса рисуется по картинке, а не по обнулённой кнопке. */
.grip-shot:focus-visible { outline: none; }
.grip-shot:focus-visible img { outline: 2px solid var(--indigo); outline-offset: 3px; border-radius: 8px; }

/* Главная кнопка на карточке товара. Раньше .grip-fat растягивался во всю
   ширину блока покупки; картинку растягивать нельзя (надпись поедет), поэтому
   она просто крупнее остальных и прижата влево — к цене над ней, иначе висела
   бы по центру рядом с прижатым влево ценником. */
.grip-fat { width: auto; justify-content: flex-start; }
.grip-fat img { width: 195px; }

/* Кнопка покупки прямо в карточке подборки: под ценой. */
.grip-card { width: 100%; margin-top: .75rem; }
.grip-card img { width: 156px; }

/* ── шкала жёсткости ───────────────────────────────────────────────────── */
.knurl { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .5rem; margin-block: 1.5rem; }
.tine {
  display: block; border-radius: var(--round-s); padding: .8rem .7rem .9rem;
  border: 1px solid var(--line); background: var(--sheet); color: var(--text);
  border-top: 4px solid var(--sky);
}
.tine:hover { text-decoration: none; box-shadow: var(--shade); }
.tine b { display: block; font-family: 'Gabarito', sans-serif; font-size: .98rem; color: var(--indigo-deep); }
.tine span { font-size: .76rem; color: var(--mute); }
.tine-0 { border-top-color: var(--sky); }
.tine-1 { border-top-color: var(--lime); }
.tine-2 { border-top-color: var(--tang); }
.tine-3 { border-top-color: var(--rose); }
.tine-4 { border-top-color: var(--plum); }
.tine-5 { border-top-color: var(--indigo); }
.tine.notch { background: var(--hush); border-color: var(--indigo); }

/* полоска-индикатор внутри карточки */
.gauge { display: flex; gap: 3px; margin: .5rem 0 .35rem; }
.gauge i { flex: 1; height: 5px; border-radius: 3px; background: var(--line); }
.gauge i.lit-0 { background: var(--sky); }
.gauge i.lit-1 { background: var(--lime); }
.gauge i.lit-2 { background: var(--tang); }
.gauge i.lit-3 { background: var(--rose); }
.gauge i.lit-4 { background: var(--plum); }
.gauge i.lit-5 { background: var(--indigo); }

/* ── подборщик ─────────────────────────────────────────────────────────── */
.molar { background: var(--sheet); border: 1px solid var(--line); border-radius: var(--round); padding: clamp(1.2rem, 3vw, 2rem); box-shadow: var(--shade); }
.molar-q { margin-bottom: 1.2rem; }
.molar-q > b { display: block; font-family: 'Gabarito', sans-serif; font-size: 1rem; color: var(--indigo-deep); margin-bottom: .55rem; }
.molar-opts { display: flex; flex-wrap: wrap; gap: .5rem; }
.molar-opts button {
  font: inherit; font-size: .9rem; cursor: pointer; padding: .5rem .95rem;
  border: 1px solid var(--line); background: var(--paper); color: var(--text); border-radius: 999px;
}
.molar-opts button:hover { border-color: var(--indigo); }
.molar-opts button.notch { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.molar-out { border-top: 1px dashed var(--line); padding-top: 1.1rem; margin-top: .4rem; }
.molar-out p { margin-bottom: .6rem; }
.molar-out .verdict { font-family: 'Gabarito', sans-serif; font-size: 1.25rem; color: var(--indigo-deep); }

/* ── сетка и карточки ──────────────────────────────────────────────────── */
.cluster { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 1.1rem; }
/* 4 карточки формата обязаны вставать в один ряд на 1180px: 4×250 + 3×17.6
   влезает, 4×290 уже нет и четвёртая уезжала вниз одна. */
.cluster-wide { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }

.pod {
  background: var(--sheet); border: 1px solid var(--line); border-radius: var(--round);
  overflow: hidden; display: flex; flex-direction: column;
}
.pod:hover { box-shadow: var(--shade); border-color: #d3ccbc; }
.face { background: #fff; padding: .9rem; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; }
.face img { max-height: 100%; width: auto; object-fit: contain; }
.gum { padding: .9rem 1rem 1.1rem; display: flex; flex-direction: column; flex: 1; }
.gum h3 { font-size: 1rem; line-height: 1.3; margin-bottom: .35rem; }
.gum h3 a { color: var(--indigo-deep); }
.gum p { font-size: .87rem; color: var(--mute); margin-bottom: .7rem; line-height: 1.5; }
.gum .pricebar { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding-top: .55rem; }
/* «5 listings» переносилось по слову и рвало строку пополам */
.gum .pricebar .rating { white-space: nowrap; }
.gum .pricebar .sprig { text-align: right; }

.nub { font-family: 'Gabarito', sans-serif; font-weight: 700; font-size: 1.15rem; color: var(--indigo-deep); }
.sprig {
  display: inline-block; font-size: .71rem; letter-spacing: .05em; text-transform: uppercase;
  padding: .16rem .5rem; border-radius: 999px; background: var(--hush); color: var(--mute); font-weight: 500;
}
.sprig-0 { background: rgba(56, 189, 239, .16); color: #1b6f92; }
.sprig-1 { background: rgba(141, 198, 63, .2); color: #4e7314; }
.sprig-2 { background: rgba(245, 130, 32, .17); color: #a4550c; }
.sprig-3 { background: rgba(232, 99, 159, .16); color: #a63367; }
.sprig-4 { background: rgba(162, 81, 157, .16); color: #71336d; }
.sprig-5 { background: rgba(42, 59, 143, .13); color: var(--indigo); }

.rating { font-size: .8rem; color: var(--mute); display: inline-flex; align-items: center; gap: .3rem; }
.rating b { color: var(--text); font-weight: 500; }
.bud { width: 5px; height: 5px; border-radius: 50%; background: var(--tang); display: inline-block; }

/* ── карточка товара ───────────────────────────────────────────────────── */
.pdp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.4rem, 4vw, 3rem); align-items: start; }
.pdp-shot { background: var(--sheet); border: 1px solid var(--line); border-radius: var(--round); padding: 1.4rem; position: sticky; top: 96px; }
.pdp h1 { font-size: clamp(1.5rem, 3.2vw, 2.2rem); }
.pdp-lede { font-size: 1.06rem; color: #3c4050; }
.pdp-buy { background: var(--sheet); border: 1px solid var(--line); border-radius: var(--round); padding: 1.1rem 1.2rem; margin-block: 1.3rem; }
.pdp-buy .nub { font-size: 1.75rem; }
.pdp-buy .fine { font-size: .77rem; color: var(--mute); margin: .7rem 0 0; line-height: 1.45; }
.pdp-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .9rem; }

.stipple { border: 1px solid var(--line); border-radius: var(--round-s); overflow: hidden; background: var(--sheet); }
.dimple { display: grid; grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); gap: 1rem; padding: .6rem .9rem; font-size: .89rem; border-bottom: 1px solid var(--line); }
.dimple:last-child { border-bottom: 0; }
.dimple > span:first-child { color: var(--mute); }

.bumps { list-style: none; padding: 0; margin: 0 0 1.1rem; }
.bumps li { position: relative; padding-left: 1.4rem; margin-bottom: .5rem; font-size: .95rem; }
.bumps li::before {
  content: ''; position: absolute; left: 0; top: .58em; width: 8px; height: 8px;
  border-radius: 3px; background: var(--tang);
}

.husk {
  background: rgba(184, 56, 44, .06); border: 1px solid rgba(184, 56, 44, .22);
  border-radius: var(--round-s); padding: .95rem 1.1rem; font-size: .92rem; margin-block: 1.2rem;
}
.husk b { font-family: 'Gabarito', sans-serif; color: var(--brick); display: block; margin-bottom: .25rem; }
.husk p:last-child { margin-bottom: 0; }

.groove { border-top: 1px solid var(--line); margin-block: 2rem; }

/* ── таблица ───────────────────────────────────────────────────────────── */
.flange { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--round-s); background: var(--sheet); }
.flange table { border-collapse: collapse; width: 100%; font-size: .89rem; min-width: 560px; }
.flange th, .flange td { padding: .62rem .85rem; text-align: left; border-bottom: 1px solid var(--line); }
.flange th { background: var(--hush); font-family: 'Gabarito', sans-serif; font-weight: 600; color: var(--indigo-deep); font-size: .85rem; }
.flange tr:last-child td { border-bottom: 0; }

/* ── текстовые страницы ────────────────────────────────────────────────── */
.prose { max-width: 74ch; }
.prose h2 { margin-top: 2rem; }
.prose h3 { margin-top: 1.5rem; }
.prose ul { padding-left: 1.15rem; }
.prose li { margin-bottom: .4rem; }

.qa { border: 1px solid var(--line); border-radius: var(--round-s); background: var(--sheet); margin-bottom: .6rem; overflow: hidden; }
.qa summary { cursor: pointer; padding: .85rem 1.05rem; font-weight: 400; font-family: 'Gabarito', sans-serif; color: var(--indigo-deep); list-style: none; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: '+'; float: right; color: var(--tang); font-size: 1.2rem; line-height: 1; }
.qa[open] summary::after { content: '\2013'; }
.qa div { padding: 0 1.05rem 1rem; font-size: .94rem; color: #40444f; }

.spout {
  background: var(--indigo-deep); color: #dfe4f7; border-radius: var(--round);
  padding: clamp(1.3rem, 3.5vw, 2.2rem); display: grid; gap: 1rem;
  grid-template-columns: minmax(0, 1fr) auto; align-items: center;
}
.spout h2 { color: #fff; margin-bottom: .3rem; }
.spout p { margin: 0; font-size: .96rem; }
.spout .grip { background: var(--tang); border-color: var(--tang); }
.spout .grip:hover { background: #dc7016; border-color: #dc7016; }

.lede-line { font-size: 1.08rem; color: #3c4050; max-width: 68ch; }
.eyebrow { font-size: .77rem; letter-spacing: .14em; text-transform: uppercase; color: var(--brick); font-weight: 500; margin-bottom: .5rem; }
.headrow { display: flex; flex-wrap: wrap; gap: .8rem 1.5rem; align-items: flex-end; justify-content: space-between; margin-bottom: 1.3rem; }
.headrow h2 { margin-bottom: 0; }
.headrow a { font-size: .92rem; }

/* ── подвал: чипы → манифест и шпаргалка → четыре группы → низ ───────────── */
.kerb { background: var(--indigo-deep); color: #b9c1e2; margin-top: 3rem; font-size: .9rem; }
.kerb a { color: #dfe4f7; }
.kerb h4 { color: #fff; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .8rem; }
/* Перекрашивать логотип в подвале больше нечем и не нужно: там подставляется
   отдельный файл lug-on-dark.png со светлыми чернилами. */

.kerb-chips { background: rgba(0, 0, 0, .22); border-bottom: 1px solid rgba(255, 255, 255, .1); }
.kerb-chip-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; padding-block: 1.5rem; }
.kerb-chip { display: flex; gap: .7rem; align-items: flex-start; }
.kerb-chip svg { color: var(--tang); flex: none; margin-top: .1rem; }
.kerb-chip b { display: block; color: #fff; font-family: 'Gabarito', sans-serif; font-size: .9rem; font-weight: 600; line-height: 1.3; }
.kerb-chip em { display: block; font-style: normal; font-size: .8rem; color: #97a1c9; line-height: 1.45; margin-top: .15rem; }

.kerb-creed {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(1.4rem, 4vw, 3rem); padding-block: 2.2rem;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.kerb-creed p { font-size: .88rem; color: #a7b0d8; max-width: 62ch; }
.kerb-creed .lug { margin-bottom: 1rem; }
.kerb-mail a { border-bottom: 1px solid rgba(255, 255, 255, .3); }

.kerb-cheat ul { list-style: none; margin: 0; padding: 0; }
.kerb-cheat li { border-bottom: 1px solid rgba(255, 255, 255, .09); }
.kerb-cheat li:last-child { border-bottom: 0; }
.kerb-cheat a { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding-block: .42rem; }
.kerb-cheat a:hover { text-decoration: none; }
.kerb-cheat a:hover .sprig { filter: brightness(1.18); }
/* Полосы в подвале перекрашиваются светлым: базовые .sprig-* — тёмный текст на
   бледной плашке, а на тёмно-синем фоне слива и индиго уходили в фон почти
   целиком (Toughest и XXT читались хуже остальных четырёх). */
.kerb-cheat .sprig { background: rgba(255, 255, 255, .1); }
.kerb-cheat .sprig-0 { color: #8fd8f4; }
.kerb-cheat .sprig-1 { color: #bade7f; }
.kerb-cheat .sprig-2 { color: #f9b26e; }
.kerb-cheat .sprig-3 { color: #f2a1c5; }
.kerb-cheat .sprig-4 { color: #d6a3d3; }
.kerb-cheat .sprig-5 { color: #b7c1ee; }
.kerb-cheat em { font-style: normal; font-size: .78rem; color: #8d97c2; }

.kerb-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6rem; padding-block: 2.2rem; }
.kerb-nav nav { display: flex; flex-direction: column; gap: .42rem; }
.kerb-nav nav span { color: #8d97c2; font-size: .84rem; }

.kerb-foot { background: rgba(0, 0, 0, .26); }
.kerb-base {
  display: flex; flex-wrap: wrap; gap: .9rem 1.5rem; align-items: center; justify-content: space-between;
  padding-block: 1.2rem; font-size: .79rem; color: #8d97c2;
}
.kerb-base p { margin: 0 0 .35rem; max-width: 88ch; }
.kerb-base p:last-child { margin-bottom: 0; }
.kerb-up {
  flex: none; border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px;
  padding: .4rem 1rem; font-size: .78rem; white-space: nowrap;
}
.kerb-up:hover { text-decoration: none; background: rgba(255, 255, 255, .1); }

/* ── адаптив ───────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .rim-pill em { display: none; }
  .basin-usp { grid-template-columns: 1fr 1fr; }
  .basin-usp-one:nth-child(2) { border-right: 0; }
  .basin-usp-one:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .kerb-chip-row { grid-template-columns: 1fr 1fr; }
  .kerb-nav { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .basin-in, .pdp, .spout, .kerb-creed { grid-template-columns: 1fr; }
  .pdp-shot { position: static; }
  .knurl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .crib { width: min(1180px, 100% - 1.6rem); }
  /* Лента разделов уезжает под кнопку; класс вешается на header, а не на .collar. */
  .collar-toggle { display: inline-flex; }
  .rim-bar { display: none; }
  .rim.notch-open .rim-bar { display: block; }
  .collar { flex-direction: column; align-items: stretch; padding-block: .5rem; }
  .collar a { padding: .6rem .5rem; border-radius: var(--round-s); }
  .collar a.notch::after { display: none; }
  .collar a.notch { background: var(--hush); }
  .rim-grid { grid-template-columns: auto minmax(0, 1fr); gap: .8rem; padding-block: .8rem; }
  .rim-grid .lug { grid-column: 2; justify-self: end; }
  .rim-pill { display: none; }
  .lug img { width: 132px; }
  .rim-quick { display: none; }
  .rim-top .crib { justify-content: center; text-align: center; }
  .basin-usp { grid-template-columns: 1fr; margin-top: -1.2rem; }
  .basin-usp-one { border-right: 0; border-bottom: 1px solid var(--line); }
  .basin-lead { margin-left: 0; }
  .cluster { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; }
  .gum { padding: .75rem .8rem .9rem; }
  .gum h3 { font-size: .93rem; }
  .gum p { display: none; }
  .grip-card span { font-size: .82rem; }
  .knurl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kerb-chip-row, .kerb-nav { grid-template-columns: 1fr; gap: 1.1rem; }
  .kerb-base { justify-content: flex-start; }
  .dimple { grid-template-columns: 1fr; gap: .1rem; }
  .tally div { min-width: 88px; padding: .5rem .7rem; }
}

[hidden] { display: none !important; }