/* bench.css - gemoro
   Палитра снята с баннера бренда: холодное серебро, почти чёрная надпись, белая искра.
   Тёплое золото - единственный акцент: GemOro тестирует золото, и это даёт витрине
   цвет, которого в самом логотипе нет.
   Шрифты подключены ГОЛЫМИ именами файлов: css и woff2 лежат в одной папке /toolroom/,
   любой ../ отсюда даёт молчаливый 404 и системный шрифт.
   Имена классов и переменных свои, см. _identity.md.
*/

@font-face {
  font-family: 'Faustina';
  src: url('faustina.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: 'Red Hat Text';
  src: url('redhat.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --sable: #16181c;
  --benchink: #23262c;
  --platina: #6d737e;
  --gempaper: #ffffff;
  --gemtint: #f3f5f8;
  --tintbg: #e8ebf0;
  --gemline: #d8dde4;
  --gemgold: #a8792c;
  --gemgoldlite: #e2c98f;
  /* ⚠ Лента разделов набрана белым. На акцентном --gemgold контраст выходит 3.9 и до
     нормы 4.5 не дотягивает, поэтому у ленты свой, более глубокий тон - он даёт 5.6. */
  --gemdeep: #8a6118;
  --ok: #2f6d4f;
  --no: #9d3a34;
  --care: #8a6410;
  --wrap: 1180px;
  --gap: 22px;
  --r: 4px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--gempaper);
  color: var(--benchink);
  font: 400 16.5px/1.65 'Red Hat Text', system-ui, sans-serif;
  letter-spacing: 0.005em;
}

h1, h2, h3, h4 {
  font-family: 'Faustina', Georgia, serif;
  font-weight: 600;
  line-height: 1.16;
  color: var(--sable);
  margin: 0 0 0.5em;
  letter-spacing: -0.012em;
}
h1 { font-size: clamp(30px, 4.4vw, 46px); }
h2 { font-size: clamp(25px, 3.2vw, 34px); }
h3 { font-size: 19px; }
p { margin: 0 0 1em; }
img { max-width: 100%; display: block; }
a { color: var(--sable); text-decoration-color: var(--gemline); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--gemgold); }
address { font-style: normal; }

.benchtop {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 20px;
}

/* ------------------------------------------------------------------ шапка
   Три яруса, как на образце: тёмная служебная полоса -> белый мастхед с
   центральным знаком -> лента разделов во всю ширину.

   ⚠ Шапка НЕ sticky, и это осознанно. Три яруса дают около 150px; прилипнув, они
   съедали бы четверть телефонного экрана на каждой прокрутке. На образце она тоже
   не прилипает - вместо неё внизу подвала есть «наверх».

   ⚠ `.benchtop` (обёртка по ширине) теперь лежит ВНУТРИ каждого яруса, а не является
   прямым потомком `.rigrow`: ярусы должны заливаться во всю ширину окна, а по
   содержимому выравниваться по общей колонке. Правила `.rigrow > .benchtop` больше
   нет - оно ни на что не находилось бы. */
.rigrow {
  border-bottom: 1px solid var(--gemline);
  background: var(--gempaper);
}

/* ярус 1 - служебная полоса */
.rigstrip {
  background: var(--sable);
  color: #aeb4bf;
  font-size: 12.5px;
}
.rigstrip > .benchtop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 26px;
  padding-top: 7px;
  padding-bottom: 7px;
}
.rigmotto { letter-spacing: 0.015em; }
.rigserve {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
}
.rigserve a { color: #aeb4bf; text-decoration: none; }
.rigserve a:hover { color: var(--gemgoldlite); text-decoration: underline; }

/* ярус 2 - мастхед.
   Сетка 1fr auto 1fr, а не флекс: боковые колонки равны между собой, поэтому знак
   стоит ровно по центру окна независимо от того, что в них лежит. При флексе центр
   уезжал бы вслед за длиной пилюли справа. */
.rigmast > .benchtop {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  min-height: 96px;
}
.rigbrand {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-decoration: none;
}
/* логотип бренда - чёрные буквы на белом без альфы.
   multiply убирает белый фон на любой светлой подложке, второго файла не нужно. */
.rigbrand img {
  width: 186px;
  height: auto;
  mix-blend-mode: multiply;
}
.rigbrand span {
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--platina);
}
.rigtool {
  grid-column: 3;
  justify-self: end;
}
.rigtool a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px 9px 13px;
  border: 1px solid var(--gemline);
  border-radius: 999px;
  font-size: 13.5px;
  color: var(--benchink);
  text-decoration: none;
  white-space: nowrap;
}
.rigtool a:hover { border-color: var(--gemgold); color: var(--gemgold); }
.rigtool svg { flex: 0 0 auto; color: var(--gemgold); }

/* ярус 3 - лента разделов. Пункты стыкуются без зазора, чтобы подсветка активного
   читалась как вырезанная в ленте, а не как отдельная пилюля. */
.rigband { background: var(--gemdeep); }
.rignav {
  display: flex;
  flex-wrap: wrap;
}
.rignav a {
  font-size: 13px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 13px 15px;
  text-decoration: none;
  color: #fff;
  white-space: nowrap;
}
.rignav a:hover { background: rgba(0, 0, 0, 0.16); }
.rignav a[aria-current] {
  background: rgba(0, 0, 0, 0.28);
  font-weight: 600;
}
.rigburger {
  grid-column: 1;
  justify-self: start;
  display: none;
  width: 42px;
  height: 38px;
  border: 1px solid var(--gemline);
  border-radius: var(--r);
  background: var(--gempaper);
  padding: 10px 11px;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
}
.rigburger span {
  display: block;
  height: 2px;
  background: var(--sable);
  border-radius: 2px;
}
.rigdrawer {
  border-top: 1px solid var(--gemline);
  padding: 8px 20px 16px;
  display: grid;
  gap: 2px;
}
.rigdrawer[hidden] { display: none; }
.rigdrawer a {
  padding: 11px 6px;
  text-decoration: none;
  border-bottom: 1px solid var(--gemtint);
  font-size: 15px;
}

/* ----------------------------------------------------------- хлебные крошки */
.breadtrail {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 14px 20px 0;
  font-size: 13px;
  color: var(--platina);
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}
.breadtrail a { color: var(--platina); text-decoration: none; }
.breadtrail a:hover { color: var(--sable); text-decoration: underline; }
.breadtrail i { color: var(--gemline); font-style: normal; }
.breadtrail span { color: var(--benchink); }

/* -------------------------------------------------------------- секции-плиты */
.benchslab { padding: 54px 0; }
.benchslab[data-tone='tint'] { background: var(--gemtint); }
.benchslab[data-tone='dark'] {
  background: var(--sable);
  color: #ced3db;
}
.benchslab[data-tone='dark'] h1,
.benchslab[data-tone='dark'] h2,
.benchslab[data-tone='dark'] h3 { color: var(--gempaper); }
.benchslab[data-tone='dark'] a { color: var(--gempaper); }
.benchslab[data-tone='dark'] .slabkick { color: var(--gemgoldlite); }
.benchslab[data-tone='dark'] .slablead { color: #b3b9c3; }

.slabhead { max-width: 760px; margin: 0 0 28px; }
.slabkick {
  display: block;
  font-size: 11px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--gemgold);
  margin-bottom: 9px;
}
.slablead { color: var(--platina); font-size: 17px; margin: 0; max-width: 68ch; }
.slabmore {
  display: inline-block;
  margin-top: 12px;
  font-size: 14px;
  text-decoration: none;
  border-bottom: 1px solid var(--gemgold);
  padding-bottom: 2px;
}

/* ---------------------------------------------------------------- кнопки */
.strikebtn, .strikeghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: 600 14px/1 'Red Hat Text', sans-serif;
  letter-spacing: 0.02em;
  padding: 12px 18px;
  border-radius: var(--r);
  border: 1px solid var(--sable);
  background: var(--sable);
  color: var(--gempaper);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.strikebtn:hover { background: var(--gemgold); border-color: var(--gemgold); }
.strikeghost {
  background: transparent;
  color: var(--sable);
  border-color: var(--gemline);
}
.strikeghost:hover { border-color: var(--sable); background: var(--gemtint); }
.benchslab[data-tone='dark'] .strikebtn {
  background: var(--gempaper);
  color: var(--sable);
  border-color: var(--gempaper);
}
.benchslab[data-tone='dark'] .strikebtn:hover { background: var(--gemgoldlite); border-color: var(--gemgoldlite); }
.benchslab[data-tone='dark'] .strikeghost {
  color: var(--gempaper);
  border-color: rgba(255, 255, 255, 0.34);
}
.benchslab[data-tone='dark'] .strikeghost:hover { background: rgba(255, 255, 255, 0.09); }

/* ---------------------------------------------------------------- КАРТОЧКА
   Бирка инструмента, а не витринный ярлык. Под фото не «звёзды и цена», а
   моно-код модели, настоящие строки характеристик и рейтинг полоской-мерой.
   Карточка — колонка на flex: подвал с ценой прижат вниз, поэтому у карточек
   с разным числом строк характеристик цена всё равно стоит на одной линии. */
.loupecard {
  display: flex;
  flex-direction: column;
  background: var(--gempaper);
  border: 1px solid var(--gemline);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.loupecard:hover {
  border-color: var(--platina);
  box-shadow: 0 6px 20px rgba(22, 24, 28, 0.09);
}

.loupeshot {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  min-height: 0;
  background: var(--gemtint);
  border-bottom: 1px solid var(--gemline);
}
.loupeshot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 12px;
}
/* пип раздела и место на верстаке — две подписи поверх фото */
.facetchip, .benchpip {
  position: absolute;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 2px;
  line-height: 1;
}
.facetchip {
  top: 9px;
  left: 9px;
  background: rgba(22, 24, 28, 0.88);
  color: var(--gempaper);
}
.benchpip {
  bottom: 9px;
  right: 9px;
  background: var(--gempaper);
  border: 1px solid var(--gemline);
  color: var(--platina);
}

.loupebody { padding: 14px 15px 6px; }

/* моно-код модели: PCT101, XP500, WBT21 — вытащен из названия, не сочинён */
.loupetag {
  font: 600 11px/1 ui-monospace, 'SFMono-Regular', Consolas, monospace;
  letter-spacing: 0.11em;
  color: var(--gemgold);
  margin: 0 0 6px;
}
.loupename {
  font-size: 16.5px;
  line-height: 1.28;
  margin: 0 0 11px;
}
.loupename a { text-decoration: none; }
.loupename a:hover { text-decoration: underline; text-decoration-color: var(--gemgold); }

/* строки характеристик — то, что заменило звёзды */
.loupespec {
  margin: 0 0 11px;
  border-top: 1px solid var(--gemtint);
}
.loupespec > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px solid var(--gemtint);
}
.loupespec dt {
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--platina);
  white-space: nowrap;
}
.loupespec dd {
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--sable);
  text-align: right;
}
/* на странице товара тот же список идёт в две колонки и крупнее */
.loupespec[data-wide] { border-top: 1px solid var(--gemline); margin-bottom: 20px; }
.loupespec[data-wide] > div { padding: 10px 0; border-bottom: 1px solid var(--gemline); }
.loupespec[data-wide] dt { font-size: 12px; }
.loupespec[data-wide] dd { font-size: 16px; }

/* рейтинг полоской-мерой, без глифов звёзд */
.loupetick {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--platina);
  position: relative;
  padding-left: 62px;
  min-height: 16px;
}
.loupetick::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 54px;
  height: 5px;
  border-radius: 3px;
  background: var(--tintbg);
}
.loupetick i {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 5px;
  border-radius: 3px;
  background: var(--gemgold);
  max-width: 54px;
}
.loupetick b { font-size: 13px; color: var(--sable); font-weight: 600; }
.loupetick u { text-decoration: none; }
.loupetick u::before { content: '('; }
.loupetick u::after { content: ' ratings)'; }
.loupetick[data-empty] { padding-left: 0; }
.loupetick[data-empty]::before, .loupetick[data-empty] i { display: none; }
.loupetick[data-empty] b {
  font-size: 11px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--gemgold);
}

/* строка состояния для отложенных и малых партий */
.loupestate {
  margin: 0 15px 8px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--care);
  padding-left: 15px;
  position: relative;
}
.loupestate::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--care);
}
.loupestate[data-when='thin'] { color: var(--no); }
.loupestate[data-when='thin']::before { background: var(--no); }

.loupefoot {
  margin-top: auto;
  padding: 12px 15px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid var(--gemtint);
}
/* цена расщеплена: крупные доллары, мелкие центы */
.loupecost {
  margin: 0;
  font-family: 'Faustina', Georgia, serif;
  color: var(--sable);
  line-height: 1;
  display: flex;
  align-items: flex-start;
  gap: 1px;
}
.loupecost span { font-size: 14px; margin-top: 3px; color: var(--platina); }
.loupecost b { font-size: 25px; font-weight: 600; }
.loupecost i { font-size: 13px; font-style: normal; margin-top: 3px; color: var(--platina); }
.loupefoot .strikebtn { padding: 10px 13px; font-size: 12.5px; }

/* компактная строка товара для наборов, гайдов и подборщика */
.benchrow {
  display: grid;
  grid-template-columns: 62px 1fr auto;
  grid-template-areas: 'pic name cost' 'pic spec cost';
  align-items: center;
  gap: 2px 13px;
  padding: 11px;
  border: 1px solid var(--gemline);
  border-radius: var(--r);
  background: var(--gempaper);
  text-decoration: none;
}
.benchrow:hover { border-color: var(--platina); }
.benchrow img {
  grid-area: pic;
  width: 62px;
  height: 62px;
  object-fit: contain;
  background: var(--gemtint);
  border-radius: 2px;
}
.benchrowname { grid-area: name; font-size: 14.5px; font-weight: 600; color: var(--sable); line-height: 1.3; }
.benchrowspec { grid-area: spec; font-size: 11.5px; color: var(--platina); }
.benchrowcost {
  grid-area: cost;
  font-family: 'Faustina', Georgia, serif;
  font-size: 19px;
  font-weight: 600;
  color: var(--sable);
  white-space: nowrap;
}
.benchrowcost i { font-size: 12px; font-style: normal; color: var(--platina); }

/* ---------------------------------------------------------------- сетки */
.facetgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
}
.facetgrid[data-big] { grid-template-columns: repeat(3, 1fr); }

.crowngrid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
.crowntile {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  min-height: 0;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--gempaper);
  border: 1px solid var(--gemline);
  text-decoration: none;
}
.crowntile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 16px 16px 74px;
  background: var(--gempaper);
}
.crowntilebody {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px 14px;
  background: var(--sable);
  color: var(--gempaper);
  display: grid;
  gap: 2px;
}
.crowntilebody b { font-size: 15px; font-family: 'Faustina', Georgia, serif; }
.crowntilebody i { font-style: normal; font-size: 11.5px; color: #9aa1ad; }
/* тот же .crowntile на 404 — без фото, только цифра */
.crowntile .crownstat {
  position: absolute;
  top: 18px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: 'Faustina', Georgia, serif;
  font-size: 40px;
  color: var(--gemgold);
}
.crowntile strong {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 34px;
  font-family: 'Faustina', Georgia, serif;
  font-size: 16px;
  color: var(--sable);
}
.crowntile em {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  font-style: normal;
  font-size: 11px;
  color: var(--platina);
}

.hubgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}
.gemhub {
  display: flex;
  flex-direction: column;
  padding: 22px;
  border: 1px solid var(--gemline);
  border-radius: var(--r);
  background: var(--gempaper);
  text-decoration: none;
}
.gemhub:hover { border-color: var(--platina); }
.gemhub h3 { margin-bottom: 8px; }
.gemhub p { font-size: 14.5px; color: var(--platina); margin-bottom: 14px; }
.gemhubfoot {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--gemtint);
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--platina);
  gap: 10px;
}
.gemhubfoot b { color: var(--sable); font-weight: 600; }

.pillrail { display: flex; flex-wrap: wrap; gap: 8px; }
.pillchip {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid var(--gemline);
  border-radius: 999px;
  font-size: 13.5px;
  text-decoration: none;
  background: var(--gempaper);
  white-space: nowrap;
}
.pillchip:hover { border-color: var(--sable); background: var(--gemtint); }

/* ---------------------------------------------------------------- 1. герой */
.crownrow {
  background: var(--sable);
  color: #c9ced7;
  padding: 58px 0 54px;
}
.crownrow > .benchtop {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 52px;
  align-items: center;
}
/* ⚠ у элемента грида min-width по умолчанию auto, то есть он не ужимается уже
   своего min-content и распирает колонку изнутри. Рейл героя - лента из пяти
   карточек, и на телефоне он раздувал колонку до 520px при экране в 485:
   документ ехал вправо на 67px. Скриншот такого не показывает (Chrome снимает по
   ширине окна, вылезшее просто обрезается) - ловится только замером, _overflow.js. */
.crowncopy, .crownside { min-width: 0; }
.crowncopy h1 { color: var(--gempaper); margin-bottom: 16px; }
.crowncopy > p { font-size: 17.5px; color: #b2b9c4; max-width: 56ch; }
.crownbtns { display: flex; gap: 10px; flex-wrap: wrap; margin: 22px 0 0; }
.crownrow .strikeghost { color: var(--gempaper); border-color: rgba(255, 255, 255, 0.32); }
.crownrow .strikeghost:hover { background: rgba(255, 255, 255, 0.1); }
.crownrow .strikeghost[data-alt] {
  background: var(--gemgoldlite);
  border-color: var(--gemgoldlite);
  color: var(--sable);
}
.crownrow .strikeghost[data-alt]:hover { background: var(--gempaper); border-color: var(--gempaper); }
.crownstat {
  margin: 20px 0 0;
  font-size: 12px;
  letter-spacing: 0.05em;
  color: #7f8794;
}
.crownside .slabkick { color: var(--gemgoldlite); margin-bottom: 12px; }
.crownrails { display: grid; gap: 8px; }
.crownrail {
  display: grid;
  grid-template-columns: 52px 1fr;
  grid-template-areas: 'pic name' 'pic spec';
  gap: 0 12px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: var(--r);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.035);
}
.crownrail:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.3); }
.crownrail img {
  grid-area: pic;
  width: 52px;
  height: 52px;
  object-fit: contain;
  background: var(--gempaper);
  border-radius: 2px;
  padding: 3px;
}
.crownrail b {
  grid-area: name;
  color: var(--gempaper);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
}
.crownrail span { grid-area: spec; font-size: 11.5px; color: var(--gemgoldlite); }

/* ------------------------------------------------------- 2. полоса преимуществ */
.sparkband { border-bottom: 1px solid var(--gemline); background: var(--gemtint); }
.sparkband > .benchtop {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  padding-top: 30px;
  padding-bottom: 30px;
}
.sparkcell h3 { font-size: 16px; margin: 10px 0 5px; }
.sparkcell p { font-size: 13.5px; color: var(--platina); margin: 0; }
.sparkdot {
  display: block;
  width: 13px;
  height: 13px;
  background: var(--gemgold);
  transform: rotate(45deg);
  border-radius: 2px;
}

/* -------------------------------------------------------------- 3. пиллы */
.pillband { padding: 30px 0; }
.pillband .slabkick { margin-bottom: 12px; }

/* ---------------------------------------------------------- 6. промо-дуэт */
.duoplate { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.duocard {
  display: block;
  padding: 40px 34px;
  border-radius: var(--r);
  text-decoration: none;
  background: var(--sable);
  color: #b9c0ca;
  border: 1px solid var(--sable);
}
.duocard h2 { color: var(--gempaper); font-size: 27px; }
.duocard p { font-size: 15px; margin-bottom: 16px; }
.duocard em {
  font-style: normal;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--gemgoldlite);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.duocard[data-side='1'] {
  background: var(--gemtint);
  border-color: var(--gemline);
  color: var(--platina);
}
.duocard[data-side='1'] h2 { color: var(--sable); }
.duocard[data-side='1'] em { color: var(--gemgold); }
.duocard[data-side='1'] .slabkick { color: var(--gemgold); }
.duocard:hover { border-color: var(--gemgold); }

/* -------------------------------------------------------------- 8. цифры */
.gemstat { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.gemfig {
  padding: 20px 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r);
}
.gemfig b {
  display: block;
  font-family: 'Faustina', Georgia, serif;
  font-size: 36px;
  font-weight: 600;
  color: var(--gemgoldlite);
  line-height: 1.1;
}
.gemfig span { font-size: 13px; color: #99a1ae; }

/* ------------------------------------------------------------ 9. ценности */
.karatline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
.karatcell svg {
  width: 36px;
  height: 36px;
  stroke: var(--gemgold);
  fill: none;
  stroke-width: 1.4;
  stroke-linejoin: round;
  margin-bottom: 12px;
}
.karatcell h3 { margin-bottom: 7px; }
.karatcell p { color: var(--platina); font-size: 14.5px; margin: 0; }

/* ------------------------------------------------- 10. шаги + таблица мер */
.tanktalk { display: grid; grid-template-columns: 1fr 1.35fr; gap: 44px; align-items: start; }
.steprail { list-style: none; counter-reset: s; margin: 0; padding: 0; }
.steprail li {
  counter-increment: s;
  position: relative;
  padding: 0 0 22px 52px;
  border-left: 1px solid var(--gemline);
  margin-left: 16px;
}
.steprail li:last-child { border-left-color: transparent; padding-bottom: 0; }
.steprail li::before {
  content: counter(s);
  position: absolute;
  left: -16px;
  top: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--sable);
  color: var(--gempaper);
  font: 600 14px/32px 'Red Hat Text', sans-serif;
  text-align: center;
}
.steprail h3 { margin: 4px 0 5px; }
.steprail p { color: var(--platina); font-size: 14.5px; margin: 0; }
.tablewrap h3 { margin-bottom: 12px; }

table.spectable, .soakgrid table, .runcell {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  background: var(--gempaper);
}
table.spectable caption, .runcell caption {
  text-align: left;
  font-size: 12px;
  color: var(--platina);
  padding-bottom: 9px;
}
table.spectable th, table.spectable td,
.soakgrid th, .soakgrid td,
.runcell th, .runcell td {
  border: 1px solid var(--gemline);
  padding: 9px 11px;
  text-align: left;
  vertical-align: top;
}
table.spectable thead th, .soakgrid thead th {
  background: var(--sable);
  color: var(--gempaper);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}
table.spectable tbody th, .soakgrid tbody th, .runcell th {
  background: var(--gemtint);
  font-weight: 600;
  color: var(--sable);
  white-space: nowrap;
}
.tablewrap { overflow-x: auto; }

/* ----------------------------------------------------------- 11. герой-товар */
.lonestone {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 46px;
  align-items: center;
}
.lonestoneshot {
  display: block;
  background: var(--gemtint);
  border: 1px solid var(--gemline);
  border-radius: var(--r);
  aspect-ratio: 1 / 1;
  min-height: 0;
  position: relative;
}
.lonestoneshot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 26px;
}
.lonestonebody h2 a { text-decoration: none; }
.lonestonebody > p { color: var(--platina); }
.lonestonecost {
  display: flex;
  align-items: center;
  gap: 22px;
  font-family: 'Faustina', Georgia, serif;
  color: var(--sable);
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.lonestonecost span { font-size: 16px; color: var(--platina); }
.lonestonecost b { font-size: 34px; font-weight: 600; }
.lonestonecost i { font-size: 15px; font-style: normal; color: var(--platina); margin-right: 6px; }
.lonestonebtns { display: flex; gap: 10px; flex-wrap: wrap; margin: 0; }

/* -------------------------------------------------------------- 12. уход */
.wetbench { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.drybench {
  background: var(--gempaper);
  border: 1px solid var(--gemline);
  border-top: 3px solid var(--ok);
  border-radius: var(--r);
  padding: 26px 28px;
}
.drybench[data-side='dont'] { border-top-color: var(--no); }
.drybench h2 { font-size: 22px; }
.tinelist { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.tinelist li { position: relative; padding-left: 27px; font-size: 14.5px; }
.tinelist li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--ok);
  border-bottom: 2px solid var(--ok);
  transform: rotate(-45deg);
}
.tinelist[data-neg] li::before {
  border: 0;
  top: 9px;
  left: 2px;
  width: 12px;
  height: 2px;
  background: var(--no);
  transform: none;
  box-shadow: 0 0 0 0 transparent;
}

/* --------------------------------- 13. свой блок: что можно в бак (таблица) */
.soakgrid { overflow-x: auto; }
.soakgrid td.soaknote { color: var(--platina); font-size: 12.5px; min-width: 220px; }
/* ⚠ На телефоне таблица шире экрана и колонка Steam обрезается ровно так же, как
   выглядела бы поломанная вёрстка: подсказки, что её можно листать, нет никакой.
   Подпись липнет к левому краю скроллера, поэтому видна в любом положении ленты.
   ⚠ Атрибут ставит bench.js по настоящему замеру, а не медиазапрос: таблица на
   карточке товара на колонку уже и в телефон влезает - там подпись была бы враньём. */
.soakgrid[data-wide]::after {
  content: 'Swipe the table sideways for the rest of the columns';
  display: block;
  position: sticky;
  left: 0;
  width: max-content;
  max-width: 100%;
  margin-top: 10px;
  font-size: 12px;
  color: var(--platina);
}
.soakmark {
  display: inline-block;
  min-width: 46px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 2px;
  border: 1px solid;
}
.soakmark[data-v='ok'] { color: var(--ok); border-color: rgba(47, 109, 79, 0.4); background: rgba(47, 109, 79, 0.09); }
.soakmark[data-v='no'] { color: var(--no); border-color: rgba(157, 58, 52, 0.4); background: rgba(157, 58, 52, 0.09); }
.soakmark[data-v='care'] { color: var(--care); border-color: rgba(138, 100, 16, 0.42); background: rgba(138, 100, 16, 0.1); }

/* ------------------------------- 14. свой блок: лестница весов (тёмный фон) */
.ladderchart { display: grid; gap: 9px; }
.ladderrow {
  display: grid;
  grid-template-columns: 250px 1fr 150px;
  align-items: center;
  gap: 18px;
  padding: 11px 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r);
  text-decoration: none;
}
.ladderrow:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.3); }
.laddername { color: var(--gempaper); font-size: 14px; font-weight: 600; line-height: 1.3; }
.ladderbar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 20px;
}
.ladderbar i {
  display: block;
  height: 12px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gemgold), var(--gemgoldlite));
  min-width: 4px;
}
.ladderbar b {
  font-size: 12.5px;
  color: var(--gemgoldlite);
  white-space: nowrap;
  font-weight: 600;
}
.ladderread { font-size: 12px; color: #8d95a2; text-align: right; }
.laddernote {
  margin: 14px 0 0;
  font-size: 13px;
  color: #949cab;
  max-width: 80ch;
}

/* ------------------------------------- 15. свой блок: полоса увеличения */
.magbar { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.magcell {
  display: block;
  padding: 22px;
  border: 1px solid var(--gemline);
  border-radius: var(--r);
  text-decoration: none;
  background: var(--gempaper);
}
.magcell:hover { border-color: var(--gemgold); }
.magpow {
  font-family: 'Faustina', Georgia, serif;
  font-size: 30px;
  font-weight: 600;
  color: var(--sable);
  line-height: 1;
}
.magbarline {
  display: block;
  height: 4px;
  border-radius: 2px;
  background: var(--tintbg);
  margin: 12px 0 14px;
  overflow: hidden;
}
.magbarline i { display: block; height: 4px; background: var(--gemgold); }
.magcell b { display: block; font-size: 14px; color: var(--sable); line-height: 1.3; margin-bottom: 5px; }
.magcell em { font-style: normal; font-size: 12.5px; color: var(--platina); }

/* --------------------------------------------- 16. свой блок: три набора */
.kitdeck { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.kitcard {
  background: var(--gempaper);
  border: 1px solid var(--gemline);
  border-radius: var(--r);
  padding: 24px;
}
.kitcard h3 { margin-bottom: 8px; }
.kitcard > p { font-size: 14.5px; color: var(--platina); }
.kitrows { display: grid; gap: 8px; margin-top: 16px; }

/* -------------------------------- 17. свой блок: вопрос -> нужный прибор */
.treegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.treecell {
  display: block;
  padding: 24px;
  border: 1px solid var(--gemline);
  border-left: 3px solid var(--gemgold);
  border-radius: var(--r);
  text-decoration: none;
  background: var(--gempaper);
}
.treecell:hover { background: var(--gemtint); }
.treecell b {
  display: block;
  font-family: 'Faustina', Georgia, serif;
  font-size: 19px;
  color: var(--sable);
  margin-bottom: 8px;
  line-height: 1.25;
}
.treecell p { font-size: 14px; color: var(--platina); margin-bottom: 12px; }
.treecell em {
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gemgold);
}

/* -------------------------------------------- 18. свой блок: словарь мер */
.glosstrip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin: 0; }
.glosscell { border-top: 2px solid var(--gemgoldlite); padding-top: 14px; }
.glosscell dt {
  font-family: 'Faustina', Georgia, serif;
  font-size: 18px;
  color: var(--gempaper);
  margin-bottom: 6px;
}
.glosscell dd { margin: 0; font-size: 13.5px; color: #9aa2b0; }

/* ---------------------------------------------------- 19. миссия, 20. заметка */
/* ⚠ по центру набирается только короткая строка. Тот же блок стоит на карточке
   товара под «How we built it», там абзац в три-четыре строки, и центровка
   давала рваный правый край на всю ширину. Набор слева, мера по тексту. */
.gemnote {
  max-width: 68ch;
  padding: 12px 0;
}
.gemnote p { font-size: 17px; color: var(--platina); }
.gemnote p.gemnotefoot {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--gemline);
  font-size: 13.5px;
}

.noteslab { max-width: 900px; }
.noteslab p { color: var(--benchink); }
.runrow { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin: 26px 0; }
.runcell caption { color: var(--platina); }
.stonelist { margin: 0 0 22px; padding-left: 20px; }
.stonelist li { margin-bottom: 8px; font-size: 14.5px; }
.noteslab .anvil {
  background: var(--gempaper);
  border-left: 3px solid var(--gemgold);
  padding: 16px 20px;
  margin: 0;
  font-size: 15px;
}

/* ------------------------------------------------------------- 21. голоса */
.voicewall { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.voiceslip {
  margin: 0;
  background: var(--gemtint);
  border: 1px solid var(--gemline);
  border-radius: var(--r);
  padding: 24px;
}
.voiceslip blockquote { margin: 0 0 14px; }
.voiceslip blockquote p { font-size: 15px; margin: 0; }
.voiceslip blockquote p::before { content: '\201c'; }
.voiceslip blockquote p::after { content: '\201d'; }
.voiceslip figcaption {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--sable);
  border-top: 1px solid var(--gemline);
  padding-top: 12px;
}
.voiceslip figcaption span { display: block; font-weight: 400; color: var(--platina); }

/* -------------------------------------------------------- 22. закрытие */
.tagband { text-align: center; max-width: 720px; margin: 0 auto; }
.tagband p { color: #a9b0bb; }
.tagpip { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
.tagpip .strikeghost[data-alt] {
  background: var(--gemgoldlite);
  border-color: var(--gemgoldlite);
  color: var(--sable);
}

/* ------------------------------------------------------- хаб разделов */
.gemhub img {
  aspect-ratio: 1 / 1;
  min-height: 0;
  width: 100%;
  object-fit: contain;
  background: var(--gemtint);
  border-radius: 2px;
  padding: 14px;
  margin: -8px 0 16px;
}
.gemhub > div { display: flex; flex-direction: column; flex: 1; }
.gemhub > div > p:first-of-type { flex: 1; }

/* ---------------------------------------------- сводка раздела цифрами */
.girdlebar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--gemline);
  border: 1px solid var(--gemline);
  border-radius: var(--r);
  overflow: hidden;
  margin: 0 0 28px;
}
.girdlebar > div { background: var(--gempaper); padding: 15px 18px; }
.girdlebar dt {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--platina);
  margin-bottom: 5px;
}
.girdlebar dd {
  margin: 0;
  font-family: 'Faustina', Georgia, serif;
  font-size: 23px;
  font-weight: 600;
  color: var(--sable);
}

/* ------------------------------------------------------ страница товара */
.lonestone[data-pdp] { align-items: start; }
.lonestoneshot[data-still] { overflow: hidden; }
.lonestone[data-pdp] h1 { margin-bottom: 12px; }
.lonestone[data-pdp] .slablead { margin-bottom: 22px; }

.anvil {
  border: 1px solid var(--gemline);
  border-top: 3px solid var(--sable);
  border-radius: var(--r);
  padding: 20px 22px;
  background: var(--gemtint);
}
.anvilprice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.loupecost[data-big] b { font-size: 40px; }
.loupecost[data-big] span { font-size: 19px; margin-top: 5px; }
.loupecost[data-big] i { font-size: 17px; margin-top: 5px; }
.anvil .strikebtn[data-big] { width: 100%; padding: 15px 20px; font-size: 15px; }
.anvil .loupestate { margin: 0 0 12px; }
/* четыре свойства товара */
.tinegrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.tinecard {
  background: var(--gempaper);
  border: 1px solid var(--gemline);
  border-radius: var(--r);
  padding: 22px;
}
.tinenum {
  display: block;
  font: 600 12px/1 ui-monospace, Consolas, monospace;
  letter-spacing: 0.12em;
  color: var(--gemgold);
  margin-bottom: 12px;
}
.tinecard h3 { font-size: 16.5px; margin-bottom: 7px; }
.tinecard p { font-size: 14px; color: var(--platina); margin: 0; }

.sablink { color: var(--gemgold); text-decoration: none; border-bottom: 1px solid currentColor; }
.sablink:hover { color: var(--sable); }

/* ---------------------------------------------------------------- гайды */
.casedeck { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.casecard {
  display: block;
  padding: 26px;
  border: 1px solid var(--gemline);
  border-radius: var(--r);
  background: var(--gempaper);
  text-decoration: none;
}
.casecard:hover { border-color: var(--gemgold); }
.casecard h2 { font-size: 22px; margin-bottom: 9px; }
.casecard h3 { font-size: 18px; margin-bottom: 8px; }
.casecard p:last-of-type { font-size: 14px; color: var(--platina); margin: 0; }
.casecard em {
  display: inline-block;
  margin-top: 14px;
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gemgold);
}
.casecard[data-big] { padding: 30px; }

.casehead { max-width: 760px; }
.casemeta { font-size: 13px; color: var(--platina); margin: 0; }
/* ⚠ по левому краю, как .casehead и как все остальные слэбы сайта. Пока тут
   стояло `margin: 0 auto`, шапка статьи начиналась у края обёртки, а текст под
   ней - на 190px правее: страница читалась как съехавшая. */
.caseslab { max-width: 760px; }
.caseblock { margin-bottom: 30px; }
.caseblock h2 { font-size: 25px; }
.caseblock p { font-size: 16.5px; margin: 0; }
/* ⚠ у гайда в блоке один абзац, у сервисных страниц - два-три подряд, и без
   этого правила они слипались в одно полотно. */
.caseblock p + p { margin-top: 14px; }
.gemnote[data-facts] {
  text-align: left;
  max-width: none;
  background: var(--gemtint);
  border-left: 3px solid var(--gemgold);
  border-radius: var(--r);
  padding: 24px 28px;
  margin: 0 0 30px;
}
.gemnote[data-facts] h2 { font-size: 19px; margin-bottom: 12px; }
.gemnote[data-facts] .stonelist { margin: 0; }

/* -------------------------------------------------------- подборщик соака */
.soakform {
  background: var(--gemtint);
  border: 1px solid var(--gemline);
  border-radius: var(--r);
  padding: 26px 28px;
  max-width: 860px;
}
.soakform label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--platina);
  margin-bottom: 9px;
}
.soakform select {
  width: 100%;
  font: 400 16px/1.4 'Red Hat Text', sans-serif;
  color: var(--sable);
  padding: 13px 14px;
  border: 1px solid var(--platina);
  border-radius: var(--r);
  background: var(--gempaper);
}
.soakout { margin-top: 22px; }
.soakout[hidden] { display: none; }
.soakverdicts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.soakverdict {
  background: var(--gempaper);
  border: 1px solid var(--gemline);
  border-radius: var(--r);
  padding: 15px 16px;
}
/* ⚠ только подпись, а не любой span внутри. Рядом лежит .soakmark - тоже span, и
   голый `.soakverdict span` перебивал ему inline-block и по весу, и по порядку:
   чип YES растягивался во всю карточку. */
.soakverdict > span:first-child {
  display: block;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--platina);
  margin-bottom: 9px;
}
.soakwhy {
  background: var(--gempaper);
  border-left: 3px solid var(--gemgold);
  border-radius: var(--r);
  padding: 15px 18px;
  margin: 0 0 20px;
  font-size: 15px;
}
.soakpicks { display: grid; gap: 9px; }
.soakpickhead {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--platina);
  margin: 0 0 4px;
}
.soakwhy b, .soakpicks b { font-weight: 600; }
.soakout .benchrowspec { color: var(--gemgold); }

/* ------------------------------------------------------------------- 404 */
.lostpage { max-width: 640px; }
.lostrow { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }

/* ------------------------------------------------------------------- ПОДВАЛ
   Четыре яруса по образцу: полоса фактов -> манифест со шпаргалкой веса ->
   пять столбцов ссылок -> нижняя строка с «наверх».

   ⚠ Отступ сверху у самой плиты снят и роздан ярусам: полоса фактов заливается
   своим тоном во всю ширину, и общий padding отрезал бы её от края.

   Подпись про комиссию приезжает шифром в data-tine, поэтому до отработки js
   абзац пуст - высоту ему не задаём и пустой прячем, иначе остаётся дырка. */
.footplate {
  margin-top: 64px;
  background: var(--sable);
  color: #b9bec8;
  font-size: 14px;
}

/* ярус 1 - полоса фактов об инструменте (не про чекаут: покупка идёт не здесь) */
.foottrust {
  background: #1e2127;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.foottrust > .benchtop {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px 26px;
  padding-top: 22px;
  padding-bottom: 22px;
}
.trustpip {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 13.5px;
  line-height: 1.4;
  color: #ccd2dc;
}
.trustpip svg { flex: 0 0 auto; color: var(--gemgoldlite); }

/* ярус 2 - манифест и шпаргалка веса */
/* ⚠ align-items: center, а не start. Шпаргалка справа выше манифеста слева почти
   вдвое, и при выравнивании по верху под абзацем зияет пустая колонка в 200px -
   выглядит как недогруженный блок, а не как замысел. */
.footcreed {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  align-items: center;
  gap: 44px;
  padding: 46px 0 38px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.footvow p {
  margin: 0;
  line-height: 1.7;
  max-width: 58ch;
}
.footsheet ul {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: grid;
  gap: 7px;
}
.footsheet li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 13.5px;
  padding-bottom: 6px;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.14);
}
.footsheet li b {
  color: var(--gempaper);
  font-weight: 600;
  white-space: nowrap;
}
.footsheet > a {
  color: var(--gemgoldlite);
  text-decoration: none;
  font-size: 13.5px;
}
.footsheet > a:hover { text-decoration: underline; }

/* ярус 3 - столбцы ссылок */
.footcol {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 26px;
  padding: 40px 0 34px;
}
.footcol p { margin: 0 0 12px; line-height: 1.65; }
.footreach p {
  font-size: 13px;
  line-height: 1.6;
  color: #8f96a2;
}
.footcol h3,
.footsheet h3 {
  margin: 0 0 14px;
  font: 600 12px/1 'Red Hat Text', system-ui, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gemgoldlite);
}
.footcol a {
  display: block;
  margin-bottom: 9px;
  color: #b9bec8;
  text-decoration: none;
  font-size: 14px;
}
.footcol a:hover { color: var(--gempaper); text-decoration: underline; }

/* знак бренда - чёрные буквы на белом без альфы. invert делает плашку чёрной,
   а буквы белыми; screen топит чёрную плашку в тёмном подвале. Отдельный файл
   логотипа для тёмного фона держать не нужно. */
.footmark { display: block; margin-bottom: 16px; }
.footmark img {
  width: 128px;
  height: auto;
  filter: invert(1);
  mix-blend-mode: screen;
}

.footmail { margin: 0; }
.footmail a {
  display: inline-block;
  margin: 0;
  color: var(--gemgoldlite);
  border-bottom: 1px solid rgba(226, 201, 143, 0.4);
  text-decoration: none;
  font-size: 14px;
}
.footmail a:hover { color: var(--gempaper); }

/* ярус 4 - нижняя строка: подписи слева, «наверх» справа */
.footline {
  padding: 20px 0 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-wrap: wrap;
  gap: 16px 30px;
  justify-content: space-between;
  align-items: flex-start;
  font-size: 12.5px;
  line-height: 1.6;
  color: #7d838e;
}
.footsay {
  display: grid;
  gap: 6px;
  max-width: 760px;
}
.footsay p { margin: 0; }
.footsay [data-tine]:empty { display: none; }
.foottop {
  flex: 0 0 auto;
  padding: 10px 18px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: none;
  color: #ccd2dc;
  font: 600 12px/1 'Red Hat Text', system-ui, sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.foottop:hover { border-color: var(--gemgoldlite); color: var(--gemgoldlite); }

/* --------------------------------------------------------------- УЗКИЕ ОКНА
   Три ступени. На 900px меню уезжает в ящик, на 620px все многоколонники
   становятся одним столбцом, а рейл героя - горизонтальной лентой.
   Плиткам с aspect-ratio нужен min-height: 0, иначе флекс-родитель их растит;
   он проставлен там же, где сама плитка. */

@media (max-width: 1100px) {
  :root { --gap: 18px; }
  .crownrow > .benchtop { grid-template-columns: 1fr; gap: 38px; }
  .crownside { max-width: 520px; }
  .facetgrid { grid-template-columns: repeat(3, 1fr); }
  .facetgrid[data-big] { grid-template-columns: repeat(2, 1fr); }
  .crowngrid { grid-template-columns: repeat(3, 1fr); }
  .lonestone { grid-template-columns: 330px 1fr; gap: 32px; }
  .tanktalk { grid-template-columns: 1fr; gap: 36px; }
  .ladderrow { grid-template-columns: 190px 1fr 120px; gap: 14px; }
  .glosstrip { grid-template-columns: repeat(2, 1fr); }
  .footcol { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
}

@media (max-width: 900px) {
  /* меню уезжает в ящик: прячется вся золотая лента, а не только сам список -
     иначе от третьего яруса осталась бы пустая цветная полоса */
  .rigband { display: none; }
  .rigburger { display: flex; }
  .rigmast > .benchtop { min-height: 78px; }
  .rigbrand img { width: 152px; }
  .benchslab { padding: 42px 0; }
  .footplate { margin-top: 48px; }
  .foottrust > .benchtop { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footcreed { grid-template-columns: 1fr; gap: 30px; padding: 34px 0 30px; }
  .footcol { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 32px 0 28px; }

  .sparkband > .benchtop { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .facetgrid,
  .facetgrid[data-big] { grid-template-columns: repeat(2, 1fr); }
  .hubgrid,
  .kitdeck,
  .treegrid,
  .voicewall,
  .casedeck,
  .karatline,
  .soakverdicts { grid-template-columns: repeat(2, 1fr); }
  .duoplate,
  .wetbench,
  .runrow { grid-template-columns: 1fr; }
  .gemstat,
  .magbar,
  .tinegrid,
  .girdlebar { grid-template-columns: repeat(2, 1fr); }
  .duocard { padding: 30px 26px; }

  .lonestone,
  .lonestone[data-pdp] { grid-template-columns: 1fr; gap: 26px; }
  .lonestoneshot { max-width: 420px; }

  /* лестница весов: подпись и число в строку, полоса под ними во всю ширину */
  .ladderrow {
    grid-template-columns: 1fr 92px;
    grid-template-areas: 'name read' 'bar bar';
    gap: 9px 12px;
  }
  .laddername { grid-area: name; }
  .ladderbar { grid-area: bar; }
  .ladderread { grid-area: read; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .benchtop { padding: 0 16px; }
  .benchslab { padding: 34px 0; }
  .rigmast > .benchtop { min-height: 66px; gap: 10px; }
  .rigbrand img { width: 124px; }
  /* слоган в служебной полосе уходит: на телефоне он занимает две строки,
     а служебные ссылки под ним нужнее */
  .rigmotto { display: none; }
  .rigserve { width: 100%; justify-content: space-between; }
  .rigtool a { padding: 8px 13px; gap: 6px; font-size: 12.5px; }
  .foottrust > .benchtop { grid-template-columns: 1fr; }
  .footcol { grid-template-columns: 1fr; }

  /* рейл героя - лента со снапом, иначе пять карточек столбиком выдавливают
     весь остальной экран вниз */
  .crownrails {
    grid-auto-flow: column;
    grid-auto-columns: 76%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
    margin: 0 -16px;
    padding-left: 16px;
    padding-right: 16px;
    /* ⚠ снап отмеряется от края скроллпорта, а не от края контента, поэтому первая
       карточка приклеивалась к нулю и браузер сам прокручивал ленту на те же 16px:
       padLeft стоял, а карточка всё равно начиналась левее заголовка над ней.
       Меряется только замером (_edge.js), на скриншоте разница неразличима. */
    scroll-padding-left: 16px;
  }
  .crownrail { scroll-snap-align: start; }
  .crownrow > .benchtop { gap: 30px; }

  .sparkband > .benchtop,
  .facetgrid,
  .facetgrid[data-big],
  .hubgrid,
  .kitdeck,
  .treegrid,
  .voicewall,
  .casedeck,
  .karatline,
  .soakverdicts,
  .glosstrip,
  .magbar,
  .tinegrid { grid-template-columns: 1fr; }
  .crowngrid { grid-template-columns: repeat(2, 1fr); }
  .gemstat,
  .girdlebar { grid-template-columns: repeat(2, 1fr); }

  .soakform { padding: 20px 18px; }
  .duocard { padding: 26px 22px; }
  .casecard[data-big] { padding: 22px; }
  .anvil { padding: 20px; }
  .loupecost[data-big] b { font-size: 34px; }

  .footcol { grid-template-columns: 1fr; gap: 26px; }
  .footline { flex-direction: column; gap: 10px; }
  .strikebtn,
  .strikeghost { width: 100%; justify-content: center; text-align: center; }
  .crownbtns,
  .lostrow,
  .lonestonebtns { width: 100%; }
}