:root {
  --bg: #f3f1ec;
  --tile: #ffffff;
  --tile-warm: #e9e3d8;
  --tile-dark: #17181a;
  --ink: #17181a;
  --muted: #5e6066;
  --line: #e2ddd3;
  --on-dark: #f3f1ec;
  --on-dark-muted: #b4b5b9;
  --accent: #ff5a1f;
  --accent-hover: #ff7440;
  --accent-ink: #17181a;
  --ok: #2f8f4e;
  --radius: 24px;
  --radius-control: 14px;
  --radius-pill: 999px;
  --gap: 16px;
  --shell: 1320px;
  --pad: clamp(16px, 3vw, 40px);
  --section: clamp(72px, 9vw, 120px);
  --font: "Geologica", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --mark-steel: #9aa1ab;
  --mark-wood: #d9a56b;
  --kb-ui-bg: #ffffff;
  --kb-ui-ink: #17181a;
  --kb-ui-muted: #5e6066;
  --kb-ui-line: rgba(23, 24, 26, 0.1);
  --kb-ui-accent: #ff5a1f;
  --kb-ui-accent-ink: #17181a;
  --kb-ui-radius: 14px;
  --kb-ui-font: var(--font);
  --kb-proto-bg: #17181a;
  --kb-proto-ink: #f3f1ec;
  --kb-mt: #7a818b;
  --kb-ml: #4d535c;
  --kb-mr: #32373e;
  --kb-wt: #e8c392;
  --kb-wl: #d29d63;
  --kb-wr: #b9834b;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 420 16px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 600;
  text-wrap: balance;
}

p,
blockquote,
figure,
dl,
dd {
  margin: 0;
}

p {
  text-wrap: pretty;
}

.shell {
  width: 100%;
  max-width: calc(var(--shell) + 2 * var(--pad));
  margin-inline: auto;
  padding-inline: var(--pad);
}

.section {
  padding-top: var(--section);
}

.skip {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 600;
  padding: 10px 14px;
  border-radius: var(--radius-control);
  background: var(--ink);
  color: var(--bg);
  transform: translateY(-160%);
}

.skip:focus {
  transform: none;
}

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

.tile--dark :focus-visible,
.tile--accent :focus-visible {
  outline-color: var(--on-dark);
}

.hero__grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-areas:
    "intro intro intro intro intro intro intro hit hit hit hit hit"
    "intro intro intro intro intro intro intro ship ship ship steel steel"
    "kit kit kit kit kit fit fit fit fit pay pay pay";
}

.tile--intro { grid-area: intro; }
.tile--hit { grid-area: hit; }
.tile--ship { grid-area: ship; }
.tile--steel { grid-area: steel; }
.tile--kit { grid-area: kit; }
.tile--fit { grid-area: fit; }
.tile--pay { grid-area: pay; }

.catalog__grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.product--hit {
  grid-column: span 2;
  grid-row: span 2;
}

.tabbar {
  display: none;
}

@media (max-width: 1099px) {
  .hero__grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-areas:
      "intro intro intro intro intro intro"
      "hit hit hit kit kit kit"
      "ship ship steel steel fit fit"
      "pay pay pay pay pay pay";
  }

  .catalog__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product--hit {
    grid-row: auto;
  }
}

@media (max-width: 767px) {
  .hero__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "intro intro"
      "hit hit"
      "kit kit"
      "ship steel"
      "fit fit"
      "pay pay";
  }

  .catalog__grid {
    grid-template-columns: 1fr;
  }

  .product--hit {
    grid-column: auto;
  }

  .tabbar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 150;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    height: calc(64px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--tile);
    border-top: 1px solid var(--line);
  }

  body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   v1 «Витрина» — компоненты (по правилам дизайн-системы v1)
   ========================================================================== */

/* ---------- База ---------- */

svg {
  display: block;
}

a {
  color: inherit;
}

button,
input {
  font: inherit;
  color: inherit;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1 {
  font-size: clamp(40px, 5.2vw, 72px);
  line-height: 1;
  letter-spacing: -0.03em;
}

h2 {
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

h3 {
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.eyebrow {
  color: var(--muted);
  font: 500 13px/1.3 var(--font);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lead {
  font-size: 19px;
  line-height: 1.5;
}

/* Fix round 1, RU-типографика: не даёт «80–100 мкм» переноситься после тире. */
.nowrap {
  white-space: nowrap;
}

.icon {
  flex: none;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Кнопки ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--radius-control);
  font: 600 16px/1 var(--font);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
}

.btn:active {
  transform: translateY(1px);
}

.btn--accent {
  background: var(--accent);
  color: var(--accent-ink);
}

.btn--accent:hover {
  background: var(--accent-hover);
}

.btn--dark {
  background: var(--ink);
  color: var(--bg);
}

.btn--dark:hover {
  background: #2c2d31;
}

.btn--sm {
  min-height: 44px;
  padding: 0 16px;
  font-size: 15px;
}

.btn--accent.is-added,
.btn--accent.is-added:hover {
  background: var(--ink);
  color: var(--bg);
}

.btn--dark.is-added,
.btn--dark.is-added:hover {
  background: var(--accent);
  color: var(--accent-ink);
}

/* ---------- Ссылка-стрелка ---------- */

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  border-radius: var(--radius-control);
  cursor: pointer;
}

.link-arrow::after {
  content: "→";
  display: inline-block;
  transition: transform 0.2s var(--ease);
}

.link-arrow:hover::after {
  transform: translateX(3px);
}

/* ---------- Чипы, бейдж, цена, счётчик ---------- */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--tile);
  color: var(--ink);
  font: 500 14px/1.2 var(--font);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s var(--ease);
}

.tile .chip {
  background: var(--bg);
}

.chip:hover,
.tile .chip:hover {
  background: var(--tile-warm);
}

.chip--kit {
  padding-right: 11px;
}

.chip__price {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.chip__plus {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--bg);
  font: 600 16px/1 var(--font);
}

.badge {
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--accent-ink);
  font: 600 12px/1.2 var(--font);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.price {
  font: 600 28px/1 var(--font);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tile--dark .price {
  color: var(--on-dark);
}

.count {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--accent-ink);
  font: 600 12px/22px var(--font);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

[data-cart-count]:not([data-empty]) {
  display: inline-grid;
  place-items: center;
}

/* ---------- Шапка ---------- */

/* Ссылка-пропуск вне фокуса прозрачна: на снимках выше вьюпорта не проступает; при фокусе видна (обязательный CSS). */
.skip:not(:focus) {
  opacity: 0;
}

.top {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(16px);
  backdrop-filter: saturate(1.4) blur(16px);
}

.top__bar {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 76px;
}

.brand {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  border-radius: var(--radius-control);
  color: var(--ink);
  text-decoration: none;
}

.brand__mark {
  width: 32px;
  height: 32px;
  color: var(--ink);
}

.brand__name {
  font: 600 17px/1.2 var(--font);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.top__catalog {
  flex: none;
  min-height: 48px;
}

.top__search {
  flex: 1;
  min-width: 0;
}

.top__search-icon {
  position: absolute;
  top: 14px;
  left: 14px;
  color: var(--muted);
  pointer-events: none;
}

.top__search input {
  width: 100%;
  height: 48px;
  padding: 0 16px 0 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--tile);
  color: var(--ink);
  font: 420 16px/1 var(--font);
  -webkit-appearance: none;
  appearance: none;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: border-color 0.2s var(--ease);
}

.top__search input::placeholder {
  color: var(--muted);
  opacity: 1;
}

.top__search input:hover {
  border-color: #cfc8bb;
}

.top__search input:focus {
  border-color: var(--ink);
}

.top__search input:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 0;
}

/* Системный синий «×» вне палитры; очистка поля — Escape (search.js). */
.top__search input::-webkit-search-cancel-button,
.top__search input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.top__phone {
  display: flex;
  flex: none;
  flex-direction: column;
  font: 600 15px/1.25 var(--font);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.top__phone span {
  color: var(--muted);
  font: 420 12px/1.3 var(--font);
}

.top__cart {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  min-width: 48px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--radius-control);
  background: var(--tile);
  color: var(--ink);
  font: 600 15px/1 var(--font);
  cursor: pointer;
  transition: background-color 0.2s var(--ease);
}

.top__cart:hover {
  background: var(--tile-warm);
}

@media (max-width: 1099px) {
  .top__phone {
    display: none;
  }
}

@media (max-width: 767px) {
  .top__bar {
    flex-wrap: wrap;
    height: auto;
    padding-block: 10px;
    gap: 10px 12px;
  }

  .brand {
    margin-right: auto;
  }

  .top__catalog,
  .top__cart-label {
    display: none;
  }

  .top__cart {
    order: 2;
    width: 48px;
    padding: 0;
  }

  .top__cart .count {
    position: absolute;
    top: -5px;
    right: -5px;
  }

  .top__search {
    order: 3;
    flex: 1 1 100%;
  }
}

/* ---------- Плитка ---------- */

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  padding: 28px;
  border-radius: var(--radius);
  background: var(--tile);
  color: var(--ink);
}

.tile--warm {
  background: var(--tile-warm);
}

.tile--dark {
  background: var(--tile-dark);
  color: var(--on-dark);
}

.tile--accent {
  background: var(--accent);
  color: var(--accent-ink);
}

.tile__title {
  font: 600 20px/1.2 var(--font);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.tile__meta {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

/* Артикул хита переносится ровно («КБ-3D-150 · брус / 150×150 · сталь 3 мм»); строке комплекта лучше обычный перенос. */
.tile--hit .tile__meta {
  text-wrap: balance;
}

.tile__text {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.45;
}

.tile__big {
  font: 600 clamp(36px, 3.4vw, 48px)/1 var(--font);
  letter-spacing: -0.03em;
}

.tile__small {
  margin-top: auto;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.tile--dark .tile__text,
.tile--dark .tile__small {
  color: var(--on-dark-muted);
}

.tile--accent .tile__text {
  color: var(--accent-ink);
}

/* Только прямые дети плитки — иначе задевает ссылку внутри .actions в hero-интро (итерация fix-1). */
.tile > .link-arrow {
  align-self: flex-start;
  margin-top: auto;
}

.tile__buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}

.tile__art {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 132px;
  height: 132px;
  pointer-events: none;
}

/* ---------- Hero-бенто ---------- */

.hero {
  padding-top: 16px;
}

.tile--intro > * {
  max-width: 60%;
}

/* h1 64px — значение спеки §4①: при 72px «Коннекторы для бруса» (799px) не входит в плитку 7/12 (707px),
   заголовок уходит в 3 строки, наезжает на графику, и три ряда бенто не помещаются в 1440×900. */
.tile--intro > h1 {
  max-width: none;
  margin: 6px -16px 0 0;
  font-size: clamp(40px, 4.45vw, 64px);
}

.tile--intro h1 span {
  display: block;
  color: var(--muted);
}

/* При 60% строки лида упирались в торец балки узла (итерация 1, 1440-fold). */
.tile--intro .lead {
  max-width: 54%;
  margin-top: 8px;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}

.tile--intro .actions {
  margin-top: 14px;
}

.tile--intro .chips {
  margin-top: 4px;
}

.tile--intro > .tile__art--intro {
  right: -12px;
  bottom: -18px;
  max-width: none;
  width: clamp(200px, 26vw, 340px);
  height: clamp(200px, 26vw, 340px);
}

.tile--ship .tile__text,
.tile--steel .tile__text {
  max-width: 30ch;
}

/* 1440: перенос до «по счёту», а не перед тире; на планшете и мобилке плитка во всю ширину — без ограничения. */
@media (min-width: 1100px) {
  .tile--pay .tile__text {
    max-width: 24ch;
  }
}

/* ---------- Полоса доказательств ---------- */

.proof__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.proof__list li {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.proof__list strong {
  display: block;
  font: 600 17px/1.3 var(--font);
  letter-spacing: -0.01em;
}

.proof__list span {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

/* ---------- Шапка секции и переключатель ---------- */

.section__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
}

.section__lead {
  max-width: 60ch;
  margin-top: 12px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.5;
}

.segmented {
  display: inline-flex;
  flex: none;
  gap: 4px;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: var(--tile-warm);
}

.segmented button {
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--muted);
  font: 600 14px/1 var(--font);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.segmented button:hover {
  color: var(--ink);
}

.segmented button[aria-checked="true"] {
  background: var(--ink);
  color: var(--bg);
}

/* ---------- Каталог: товар ---------- */

.product {
  min-height: 300px;
}

.product__art {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 132px;
  height: 132px;
  pointer-events: none;
  transition: transform 0.3s var(--ease);
}

.product:hover .product__art {
  transform: translateY(-4px) scale(1.03);
}

.product__name {
  font: 600 19px/1.2 var(--font);
  letter-spacing: -0.01em;
  -webkit-hyphens: auto;
  hyphens: auto;
  /* Переносить только длинные слова («Четырёх-лучевой»); balance иначе режет короткие («Опо-ра»). */
  hyphenate-limit-chars: 12 6 6;
}

.product__role {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
  text-wrap: balance;
}

.product__sku {
  margin-top: auto;
  padding-top: 8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}

.product__buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.product__ship {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.product__ship::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--ok);
}

.product--hit .product__art {
  top: 50%;
  right: 28px;
  width: 240px;
  height: 240px;
  transform: translateY(-50%);
}

.product--hit:hover .product__art {
  transform: translateY(calc(-50% - 4px)) scale(1.03);
}

.product--hit .product__name,
.product--hit .product__role {
  padding-right: 0;
}

.product--hit .product__name {
  font-size: 22px;
}

.product--hit .product__buy {
  justify-content: flex-start;
  gap: 12px 20px;
}

/* Fix round 1, критерий 7: имя занимает всю ширину плитки (без padding-right под графику),
   графика уходит в обычный поток под блок «имя + роль». Только ≥768 — на ≤767 своя раскладка (grid). */
@media (min-width: 768px) {
  .product:not(.product--hit) .product__name {
    order: -2;
  }

  .product:not(.product--hit) .product__role {
    order: -1;
  }

  .product:not(.product--hit) .product__art {
    position: static;
    align-self: flex-end;
    margin-top: auto;
  }

  .product:not(.product--hit) .product__sku {
    margin-top: 0;
  }
}

.catalog__hint .btn {
  align-self: flex-start;
  margin-top: auto;
}

/* ---------- Комплекты ---------- */

.kits__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
}

.kit {
  gap: 8px;
}

.kit__series {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.kit__name {
  font: 600 22px/1.2 var(--font);
  letter-spacing: -0.01em;
}

.kit__parts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.kit__part {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 6px;
  border-radius: var(--radius-control);
  background: var(--bg);
  font: 600 14px/1 var(--font);
  font-variant-numeric: tabular-nums;
}

.kit__part-icon {
  flex: none;
  width: 36px;
  height: 36px;
}

.kit__facts {
  margin-top: auto;
  padding-top: 16px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.kit__buy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding-top: 4px;
}

.kit__saving {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.kit__buy .btn {
  align-self: stretch;
  margin-top: 10px;
}

.kits__more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 24px;
}

.kits__more-title {
  font: 600 17px/1.3 var(--font);
  letter-spacing: -0.01em;
}

/* ---------- Что строят ---------- */

.scenarios__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--gap);
}

.scenarios__grid > li {
  display: flex;
  min-width: 0;
}

.scenario {
  flex: 1;
  gap: 8px;
  min-height: 232px;
  text-decoration: none;
  transition: background-color 0.2s var(--ease);
}

.scenario:hover {
  background: var(--tile-warm);
}

.scenario__icon {
  flex: none;
  width: 28px;
  height: 28px;
  margin-bottom: 20px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.scenario__name {
  font: 600 17px/1.25 var(--font);
  letter-spacing: -0.01em;
}

.scenario__lead {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.scenario__price {
  max-width: 12ch;
  margin-top: auto;
  padding-top: 12px;
  font: 600 14px/1.35 var(--font);
  font-variant-numeric: tabular-nums;
}

/* ---------- Вопросы перед покупкой ---------- */

.questions__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
}

.question {
  gap: 12px;
}

.question__icon {
  flex: none;
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.question h3 {
  font-size: 20px;
}

.question p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}

.note {
  margin-top: 16px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

/* ---------- Доставка и оплата ---------- */

.delivery__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: var(--gap);
}

.delivery__main {
  min-height: 248px;
}

.delivery__main .tile__text {
  max-width: 40ch;
  margin-top: auto;
}

/* ---------- Отзывы ---------- */

.reviews__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
}

.rating {
  min-height: 280px;
}

.rating__value {
  font: 600 72px/1 var(--font);
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.rating__stars {
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0.12em;
}

.rating .tile__text {
  margin-top: auto;
  font-size: 15px;
}

.review {
  gap: 24px;
}

.review blockquote {
  font-size: 17px;
  line-height: 1.5;
}

.review figcaption {
  margin-top: auto;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.review figcaption strong {
  color: var(--ink);
  font-weight: 600;
}

/* ---------- FAQ ---------- */

.faq {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  align-items: start;
  gap: 24px 40px;
}

.faq__list {
  display: grid;
  gap: var(--gap);
}

.faq__item.tile {
  display: block;
  gap: 0;
  padding: 0;
}

.faq__item summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 64px;
  padding: 20px 56px 20px 24px;
  border-radius: var(--radius);
  font: 600 17px/1.35 var(--font);
  letter-spacing: -0.01em;
  list-style: none;
  text-wrap: balance;
  cursor: pointer;
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__item summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 22px;
  font: 400 26px/1 var(--font);
  transform: translateY(-50%);
  transition: transform 0.25s var(--ease);
}

.faq__item[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
}

.faq__item summary:focus-visible {
  outline-offset: -3px;
}

.faq__item p {
  padding: 0 24px 20px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

/* ---------- Финальный блок ---------- */

.tile.cta {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  align-items: center;
  gap: 40px;
  padding: clamp(28px, 4vw, 56px);
}

.cta h2 {
  color: var(--on-dark);
}

.cta__text p {
  max-width: 46ch;
  margin-top: 16px;
  color: var(--on-dark-muted);
  font-size: 17px;
  line-height: 1.5;
}

.cta__text .cta__contacts {
  margin-top: 24px;
  color: var(--on-dark);
  font-weight: 600;
}

.cta__contacts span {
  display: block;
  color: var(--on-dark-muted);
  font-size: 14px;
  font-weight: 420;
}

.cta__form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.cta__form label {
  display: grid;
  gap: 8px;
  color: var(--on-dark-muted);
  font-size: 14px;
  line-height: 1.3;
}

.cta__form input {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-control);
  background: rgba(255, 255, 255, 0.06);
  color: var(--on-dark);
  font: 420 16px/1 var(--font);
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.2s var(--ease);
}

.cta__form input::placeholder {
  color: var(--on-dark-muted);
  opacity: 1;
}

.cta__form input:focus {
  border-color: var(--accent);
}

.cta__form .btn,
.cta__note {
  grid-column: 1 / -1;
}

.cta__note {
  color: var(--on-dark-muted);
  font-size: 13px;
  line-height: 1.45;
}

/* ---------- Подвал ---------- */

.foot {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 32px 40px;
  margin-top: var(--section);
  padding-block: 48px 32px;
}

.foot::before {
  content: "";
  position: absolute;
  top: 0;
  right: var(--pad);
  left: var(--pad);
  height: 1px;
  background: var(--line);
}

.foot__name {
  font: 600 17px/1.3 var(--font);
  letter-spacing: -0.01em;
}

.foot__tagline {
  margin-top: 6px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.45;
}

.foot__nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.foot__nav > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.foot__title {
  margin-bottom: 8px;
  color: var(--muted);
  font: 500 13px/1.3 var(--font);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.foot__nav a {
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  min-height: 36px;
  border-radius: var(--radius-control);
  font-size: 15px;
  text-decoration: none;
}

.foot__nav a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.foot__legal {
  display: flex;
  flex-wrap: wrap;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: space-between;
  gap: 4px 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.foot__legal a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border-radius: var(--radius-control);
  text-underline-offset: 3px;
}

/* ---------- Нижняя панель (видна ≤ 767 px) ---------- */

.tabbar__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: 500 12px/1.2 var(--font);
  text-decoration: none;
  cursor: pointer;
}

.tabbar__item .icon {
  width: 22px;
  height: 22px;
}

.tabbar__item:hover {
  color: var(--ink);
}

.tabbar__item .count {
  position: absolute;
  top: 6px;
  left: calc(50% + 4px);
}

.tabbar__item:focus-visible {
  border-radius: var(--radius-control);
  outline-offset: -4px;
}

/* ---------- Общий слой в стиле v1: радиусы 14 px, без теней вне шторки, видимый фокус на тёмном ---------- */

.kb-proto :focus-visible,
.skip:focus-visible,
.kb-toast :focus-visible {
  outline-color: var(--on-dark);
}

.kb-proto a {
  border-radius: var(--radius-control);
}

.kb-cart__qty button,
.kb-search__item,
.kb-toast__action {
  border-radius: var(--radius-control);
}

.kb-cart__close:hover,
.kb-cart__qty button:hover {
  background: var(--bg);
}

.kb-cart__checkout:hover,
.kb-toast__action:hover {
  background: var(--accent-hover);
}

.kb-search [data-search-results] {
  border-color: var(--line);
  box-shadow: none;
}

/* ==========================================================================
   Адаптив компонентов
   ========================================================================== */

/* Узкий десктоп 1100–1399: колонка карточки узкая, двухсловные названия в 19 px переносятся одиночным словом.
   17 px: «Прямой удлинитель» — в одну строку во всём диапазоне, «Стропильный кронштейн» — примерно от 1228 px,
   ниже — аккуратный перенос из двух слов без разрыва слова. */
@media (min-width: 1100px) and (max-width: 1399px) {
  .product:not(.product--hit) .product__name {
    font-size: 17px;
  }
}

@media (max-width: 1099px) {
  .tile--intro > h1 {
    font-size: clamp(40px, 7.3vw, 64px);
  }

  .tile--hit .tile__art,
  .tile--kit .tile__art {
    top: 16px;
    bottom: auto;
  }

  .tile--hit .tile__title,
  .tile--hit .tile__meta,
  .tile--kit .eyebrow,
  .tile--kit .tile__title,
  .tile--kit .tile__meta {
    padding-right: 128px;
  }

  .tile--hit,
  .tile--kit {
    min-height: 232px;
  }

  .kits__grid,
  .questions__grid,
  .delivery__grid,
  .reviews__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .scenarios__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .faq,
  .cta__form,
  .foot {
    grid-template-columns: 1fr;
  }
}

/* Планшет: хит каталога — первой широкой плиткой, иначе справа от «Опоры» остаётся дыра. */
@media (min-width: 768px) and (max-width: 1099px) {
  .product--hit {
    order: -1;
  }

  /* Графика hero здесь 200px: колонке текста хватает 66%, кнопка и ссылка встают в одну строку. */
  .tile--intro > *,
  .tile--intro .lead {
    max-width: 66%;
  }
}

@media (max-width: 767px) {
  html {
    scroll-padding-top: 140px;
  }

  /* Fix round 1: правила .kb-proto/.kb-toast на ≤767 перенесены в site/shared/ui.css — дубликаты отсюда убраны. */

  .tile {
    padding: 20px;
  }

  .hero {
    padding-top: 12px;
  }

  .lead {
    font-size: 17px;
  }

  .tile--intro > *,
  .tile--intro .lead {
    max-width: none;
  }

  /* 40px не помещает неразрывное «от производителя» (352px) в плитку 318px на 390. */
  .tile--intro > h1 {
    margin-right: 0;
    font-size: clamp(32px, 9vw, 40px);
  }

  .tile--intro > .tile__art--intro {
    position: static;
    align-self: flex-end;
    width: 150px;
    height: 150px;
    margin: -8px -32px -38px 0;
  }

  .tile--hit .tile__title,
  .tile--hit .tile__meta,
  .tile--kit .eyebrow,
  .tile--kit .tile__title,
  .tile--kit .tile__meta {
    padding-right: 136px;
  }

  .tile--hit,
  .tile--kit {
    min-height: 224px;
  }

  .proof__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 20px;
  }

  .section__head {
    flex-direction: column;
    align-items: flex-start;
  }

  .product {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    grid-template-areas:
      "name name"
      "art  role"
      "art  sku"
      "buy  buy"
      "ship ship";
    align-content: start;
    gap: 4px 16px;
    min-height: 0;
  }

  .product__art,
  .product--hit .product__art,
  .product:hover .product__art,
  .product--hit:hover .product__art {
    position: static;
    grid-area: art;
    align-self: start;
    width: 88px;
    height: 88px;
    transform: none;
  }

  .product__name,
  .product--hit .product__name {
    grid-area: name;
    padding-right: 0;
    font-size: 19px;
  }

  .product__role {
    grid-area: role;
    padding-right: 0;
  }

  .product__sku {
    grid-area: sku;
    margin-top: 0;
    padding-top: 0;
  }

  .product__buy,
  .product--hit .product__buy {
    grid-area: buy;
    justify-content: space-between;
    margin-top: 14px;
  }

  .product__ship {
    grid-area: ship;
    margin-top: 6px;
  }

  /* Fix round 1, критерий 6/3: имя теперь занимает всю первую строку («name name»), поэтому бейдж
     справа сверху наезжал на него на 360–390. grid-area переносит его на угол графики (grid-area
     как containing block для абсолютно спозиционированного элемента — CSS Grid §8.5). */
  .product .badge {
    position: absolute;
    grid-area: art;
    top: 0;
    left: 0;
  }

  .kits__grid,
  .questions__grid,
  .delivery__grid,
  .reviews__grid {
    grid-template-columns: 1fr;
  }

  .scenarios__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .scenario,
  .rating,
  .delivery__main {
    min-height: 0;
  }

  .tile.cta {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .foot__nav {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .foot__nav a {
    min-height: 44px;
  }
}