/* ZANDO — salt.css
   Все имена классов и переменных живут в _tokens.js и измерены _fpcheck.js по 177 соседям с css.
   Руками сюда новое имя не дописывать: generate.js собирает разметку из T.CLASSES и на чужом
   классе просто не отдаст его в html, а checkVars() валит сборку, если :root разъехался с VARS.

   Правило цвета (из _design.md, важнее самих hex):
     хром — ink на paper, sand единственная вторая поверхность;
     коралл не больше 5% экрана: кнопка, бейдж, вход в подборщик;
     океанская синь только фулл-блид полосами;
     тил только внутри подборщика и свотчей, в хром не выпускать.

   ⚠ Комментарий в шапке css не закрывать звёздочкой со слэшем внутри текста: закрытый досрочно
   комментарий молча съедает :root целиком, и кнопки становятся невидимыми.
*/

:root {
  --zn-ink: #100a08;
  --zn-paper: #fbf9f6;
  --zn-sand: #f5ede2;
  --zn-tint: #eaf1f1;
  --zn-coral: #f0764f;
  --zn-coral-deep: #d85c37;
  --zn-ocean: #0e2a3a;
  --zn-ocean-soft: #1b3e52;
  --zn-shallow: #2e8c86;
  --zn-meta: #8a847c;
  --zn-deep: #46413b;
  --zn-rule: rgba(16,10,8,.13);
  --zn-rule-dark: rgba(251,249,246,.18);
  --zn-headface: 'Vidaloka', Georgia, serif;
  --zn-bodyface: 'Mona Sans', system-ui, sans-serif;
}

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

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

body {
  margin: 0;
  background: var(--zn-paper);
  color: var(--zn-ink);
  font-family: var(--zn-bodyface);
  font-size: 15px;
  line-height: 1.6;
  font-weight: 400;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

/* Дидона набирается только крупно: волосяные штрихи Vidaloka пропадают на мобильном DPR
   мельче 28px, поэтому h3 и ниже уходят на гротеск. Иерархия — размером, не весом:
   ничего жирнее 500 во всей системе. */
h1, h2 {
  font-family: var(--zn-headface);
  font-weight: 400;
  letter-spacing: .01em;
  margin: 0;
}
h3, h4 {
  font-family: var(--zn-bodyface);
  font-weight: 500;
  letter-spacing: 0;
  margin: 0;
}
p { margin: 0; }

:focus-visible {
  outline: 2px solid var(--zn-coral);
  outline-offset: 3px;
}

/* ---------- каркас ---------- */

.saltwrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.saltmain { flex: 1 0 auto; }

.saltlane {
  width: min(1240px, 100% - 48px);
  margin-inline: auto;
}

/* ---------- шапка ---------- */

.brineskip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 40;
  background: var(--zn-ink);
  color: var(--zn-paper);
  padding: 12px 20px;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
}
.brineskip:focus { left: 0; }

.salthead {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--zn-paper);
  border-bottom: 1px solid var(--zn-rule);
}

/* Верхняя служебная полоса — тот самый слой микро-подписей 11px caps, на котором
   вся ниша держит ощущение «дизайн есть». */
.brinetop {
  background: var(--zn-ocean);
  color: var(--zn-paper);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-align: center;
  padding: 9px 16px;
}

.brinebar {
  width: min(1240px, 100% - 48px);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 74px;
}

.brinemark {
  font-family: var(--zn-headface);
  font-size: 27px;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  margin-right: auto;
  white-space: nowrap;
}

.brinemenu {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}
.brinemenu a {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--zn-deep);
  padding-block: 6px;
  border-bottom: 1px solid transparent;
}
.brinemenu a:hover { color: var(--zn-ink); border-bottom-color: var(--zn-ink); }
.brinemenu a[aria-current] { color: var(--zn-ink); border-bottom-color: var(--zn-coral); }

.brinecta {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--zn-ink);
  border: 1px solid var(--zn-ink);
  padding: 10px 18px;
  white-space: nowrap;
}
.brinecta:hover { background: var(--zn-ink); color: var(--zn-paper); }

/* ---------- крошки ---------- */

.wakecrumb {
  width: min(1240px, 100% - 48px);
  margin: 18px auto 0;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--zn-meta);
}
.wakecrumb a { text-decoration: none; }
.wakecrumb a:hover { text-decoration: underline; }
.wakecrumb span { margin-inline: 8px; }

/* ---------- полосы-секции ---------- */

.shoreband { padding-block: 84px; }
.shoreplain { background: var(--zn-paper); }
.shoretint { background: var(--zn-sand); }
.shoredark { background: var(--zn-ocean); color: var(--zn-paper); }
.shoredark a { color: var(--zn-paper); }

.shorekick {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--zn-meta);
  margin-bottom: 14px;
}
.shoredark .shorekick { color: rgba(251,249,246,.62); }

.shoretitle {
  font-size: clamp(32px, 4.2vw, 52px);
  line-height: 1.05;
  max-width: 20ch;
}

.shoresub {
  margin-top: 16px;
  max-width: 62ch;
  color: var(--zn-deep);
  font-size: 16px;
}
.shoredark .shoresub { color: rgba(251,249,246,.78); }

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

.saltbtn, .saltghost, .saltbuy {
  display: inline-block;
  font-family: var(--zn-bodyface);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  padding: 15px 30px;
  border: 1px solid transparent;
  cursor: pointer;
  line-height: 1.2;
}

.saltbtn { background: var(--zn-coral); color: #fff; }
.saltbtn:hover { background: var(--zn-coral-deep); }

.saltghost {
  background: transparent;
  color: inherit;
  border-color: currentColor;
}
.saltghost:hover { background: var(--zn-ink); color: var(--zn-paper); border-color: var(--zn-ink); }
.shoredark .saltghost:hover { background: var(--zn-paper); color: var(--zn-ocean); border-color: var(--zn-paper); }

.saltbuy {
  background: var(--zn-ink);
  color: var(--zn-paper);
  width: 100%;
  padding: 14px 18px;
}
.saltbuy:hover { background: var(--zn-coral); }

/* ---------- первый экран ---------- */

/* Приём Hunza: фулл-блид фото, знак поверх. Дидоне над закатным небом нужен скрим,
   иначе волосяные штрихи тонут в коралловом. */
.tidesplit {
  position: relative;
  background: var(--zn-ocean) center/cover no-repeat;
  color: var(--zn-paper);
  isolation: isolate;
}
.tideveil {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(105deg, rgba(14,42,58,.9) 0%, rgba(14,42,58,.74) 46%, rgba(14,42,58,.3) 100%);
}
.tidecopy {
  position: relative;
  z-index: 1;
  width: min(1240px, 100% - 48px);
  margin-inline: auto;
  padding-block: 96px 72px;
  max-width: 1240px;
}
.tidecopy h1 {
  font-size: clamp(44px, 7vw, 88px);
  line-height: 1.02;
  max-width: 15ch;
}
.tidecopy p {
  margin-top: 22px;
  max-width: 52ch;
  font-size: 17px;
  color: rgba(251,249,246,.84);
}
.tidecopy .saltbtn, .tidecopy .saltghost { margin-top: 32px; margin-right: 12px; }

.tidestat {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--zn-rule-dark);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(251,249,246,.7);
}
.tidestat b {
  display: block;
  font-family: var(--zn-headface);
  font-weight: 400;
  font-size: 30px;
  letter-spacing: .02em;
  text-transform: none;
  color: var(--zn-paper);
  margin-bottom: 4px;
}

/* Рейл топ-5 под героем: на узком экране горизонтальная прокрутка, а не свёрнутая сетка. */
.cresttray {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  width: min(1240px, 100% - 48px);
  margin-inline: auto;
  padding-bottom: 84px;
}
.crestitem {
  background: rgba(251,249,246,.07);
  border: 1px solid var(--zn-rule-dark);
  padding: 12px;
  text-decoration: none;
  display: block;
}
.crestitem:hover { background: rgba(251,249,246,.13); }
.crestitem img {
  aspect-ratio: 3 / 4;
  object-fit: cover;
  width: 100%;
  background: var(--zn-ocean-soft);
}
.crestitem strong {
  display: block;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
}
.crestitem em {
  display: block;
  margin-top: 6px;
  font-style: normal;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(251,249,246,.66);
}

/* ---------- usp-полоса ---------- */

.foamrow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--zn-rule);
  border: 1px solid var(--zn-rule);
}
.foamitem {
  background: var(--zn-paper);
  padding: 34px 26px;
}
.foamitem h3 { font-size: 15px; margin-bottom: 8px; }
.foamitem p { font-size: 14px; color: var(--zn-deep); }

/* ---------- пиллы-запросы ---------- */

.driftline {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}
.driftpill {
  font-size: 12px;
  letter-spacing: .06em;
  text-decoration: none;
  border: 1px solid var(--zn-rule);
  border-radius: 999px;
  padding: 9px 18px;
  background: var(--zn-paper);
  white-space: nowrap;
}
.driftpill:hover { border-color: var(--zn-ink); background: var(--zn-ink); color: var(--zn-paper); }

/* ---------- карточка товара ---------- */

.cutspread {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 34px 26px;
  margin-top: 44px;
}

.cutplate { display: flex; flex-direction: column; }

/* Анатомия Peony: портретное медиа 3:4, имя гротеском, цвет словами под именем.
   ⚠ min-height:0 обязателен — иначе флекс-элемент с aspect-ratio раздувает плитку. */
.cutsnap {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  min-height: 0;
  overflow: hidden;
  background: var(--zn-sand);
}
.cutsnap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8%;
  transition: transform .5s ease;
}
.cutsnap:hover img { transform: scale(1.04); }

.cutbadge {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 2;
  background: var(--zn-coral);
  color: #fff;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 5px 10px;
}

.cutname {
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.35;
}
.cutname a { text-decoration: none; }
.cutname a:hover { text-decoration: underline; }

.cutspec {
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--zn-meta);
}

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

.pricetick {
  font-family: var(--zn-headface);
  font-size: 20px;
  letter-spacing: .02em;
}
.pricetick small {
  display: block;
  font-family: var(--zn-bodyface);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--zn-meta);
}

/* Рейтинг полосой, а не звёздами: юникодные звёзды стоят у 48 соседей из 217, и округление
   до половинки в них врёт. Полоса показывает долю честно. */
.ratenub {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--zn-meta);
}
.ratenub i {
  display: block;
  width: 62px;
  height: 3px;
  background: var(--zn-rule);
  font-style: normal;
  position: relative;
}
.ratenub i::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--fill, 0%);
  background: var(--zn-coral);
}

/* ---------- плитки категорий ---------- */

.coastbay {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 44px;
}
.coastslat {
  position: relative;
  display: block;
  text-decoration: none;
  background: var(--zn-paper);
  border: 1px solid var(--zn-rule);
  padding: 18px 18px 22px;
}
.coastslat:hover { border-color: var(--zn-ink); }
.coastslat img {
  aspect-ratio: 4 / 3;
  width: 100%;
  object-fit: contain;
  background: var(--zn-sand);
  padding: 6%;
}
.coastslat h3 { margin-top: 16px; font-size: 17px; }
.coastslat span {
  display: block;
  margin-top: 5px;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--zn-meta);
}

/* ---------- промо-дуэт ---------- */

.pairshelf {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.pairpanel {
  padding: 56px 44px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 340px;
  text-decoration: none;
  background: var(--zn-sand);
}
.pairpanel:first-child { background: var(--zn-ocean); color: var(--zn-paper); }
.pairpanel h3 {
  font-family: var(--zn-headface);
  font-weight: 400;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.08;
  margin-bottom: 12px;
}
.pairpanel p { font-size: 15px; max-width: 40ch; opacity: .82; }
.pairpanel em {
  font-style: normal;
  display: inline-block;
  margin-top: 22px;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
}

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

.fathomband {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  text-align: center;
}
.fathomnum {
  font-family: var(--zn-headface);
  font-size: clamp(38px, 5vw, 62px);
  line-height: 1;
  letter-spacing: .02em;
}
.fathomlabel {
  margin-top: 12px;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(251,249,246,.66);
}

/* ---------- фасетная навигация: по занятию и по носителю ----------
   Плитки-ссылки, а не карточки товара: у них нет фото, вся работа на типографике и счётчике.
   Пять колонок для doing, три для crew — auto-fit держит оба случая одной таблицей. */

.reefgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 2px;
  margin-top: 44px;
  background: var(--zn-rule);
  border: 1px solid var(--zn-rule);
}
.reefcard {
  display: block;
  padding: 30px 24px 26px;
  background: var(--zn-paper);
  text-decoration: none;
  color: inherit;
  transition: background .18s ease;
}
.reefcard:hover { background: var(--zn-sand); }
.reefcard h3 { font-size: 19px; margin-bottom: 10px; }
.reefcard p { color: var(--zn-deep); font-size: 14px; }
/* ⚠ Счётчик обязан селектироваться ВНУТРИ .reefcard: голый `.reefnum` (0,1,0) слабее, чем
   `.reefcard p` (0,1,1), и проигрывает ему независимо от порядка строк. Тогда счётчик молча
   красится в цвет абзаца — css валиден, кадр выглядит нормально, и видно это только замером
   computed style. Тот же капкан ниже у .ribnum. */
.reefcard .reefnum {
  margin-top: 16px;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--zn-coral);
}

/* ---------- анатомия вещи ----------
   Четыре части по порядку, с крупной цифрой. Блок нишевый: так объясняют вещь носочные
   бренды. Цифра — не украшение, она держит порядок чтения слева направо. */

.ribstack {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 34px;
  margin-top: 46px;
}
.ribpart { border-top: 1px solid var(--zn-ink); padding-top: 18px; }
.ribpart .ribnum {
  font-family: var(--zn-headface);
  font-size: 34px;
  line-height: 1;
  color: var(--zn-coral);
  margin-bottom: 14px;
}
.ribpart h3 { font-size: 18px; margin-bottom: 10px; }
.ribpart p { color: var(--zn-deep); font-size: 14px; }

/* ---------- ценности ---------- */

.currentrow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 48px;
}
.currentitem svg {
  width: 34px;
  height: 34px;
  stroke: var(--zn-coral);
  fill: none;
  stroke-width: 1.2;
  margin-bottom: 18px;
}
.currentitem h3 { font-size: 18px; margin-bottom: 10px; }
.currentitem p { color: var(--zn-deep); }

/* ---------- шаги + справочная таблица ---------- */

.depthcols {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 56px;
  align-items: start;
  margin-top: 44px;
}

/* ⚠ класс висит на самом ol, не на обёртке: без list-style:none у пунктов будет по два
   номера — системный и наш из ::before. */
.depthflow {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: rung;
}
.depthrung {
  counter-increment: rung;
  position: relative;
  padding-left: 58px;
  padding-bottom: 30px;
}
.depthrung::before {
  content: counter(rung, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: -2px;
  font-family: var(--zn-headface);
  font-size: 30px;
  color: var(--zn-coral);
}
.depthrung h3 { font-size: 17px; margin-bottom: 8px; }
.depthrung p { color: var(--zn-deep); font-size: 14px; }

.fitrows {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.fitrows caption {
  text-align: left;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--zn-meta);
  padding-bottom: 14px;
}
.fitrows th, .fitrows td {
  text-align: left;
  padding: 13px 14px;
  border-bottom: 1px solid var(--zn-rule);
  vertical-align: top;
}
.fitrows th {
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--zn-meta);
}
.fitrows tbody th { color: var(--zn-ink); letter-spacing: .06em; font-size: 14px; text-transform: none; }

/* ---------- spotlight ---------- */

.beaconwrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  margin-top: 40px;
}
.beaconframe {
  background: var(--zn-paper);
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  padding: 5%;
}
.beaconframe img { max-height: 100%; width: auto; object-fit: contain; }
.beaconbody h3 {
  font-family: var(--zn-headface);
  font-weight: 400;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.1;
  margin-bottom: 16px;
}
.beaconbody p { color: var(--zn-deep); }
.beaconbody .cutact { margin-top: 26px; }
.beaconbody .saltbuy { width: auto; }

/* ---------- уход ---------- */

.rinsepair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 44px;
}
.rinsestack {
  background: var(--zn-paper);
  border: 1px solid var(--zn-rule);
  padding: 34px 32px;
}
.rinsestack h3 {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--zn-meta);
  margin-bottom: 18px;
}
.rinsestack ul { list-style: none; margin: 0; padding: 0; }
.rinsestack li {
  position: relative;
  padding-left: 24px;
  padding-block: 9px;
  border-top: 1px solid var(--zn-rule);
  font-size: 14px;
}
.rinsestack li:first-child { border-top: 0; }
.rinsestack li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 17px;
  width: 9px;
  height: 9px;
  border: 1px solid var(--zn-shallow);
  border-radius: 50%;
}
.rinsestack + .rinsestack li::before { border-color: var(--zn-coral); border-radius: 0; }

/* ---------- миссия ---------- */

.vowstrip {
  max-width: 74ch;
  margin-inline: auto;
  text-align: center;
}
.vowstrip p { margin-top: 20px; color: rgba(251,249,246,.8); font-size: 17px; }

/* ---------- SEO-заметка ---------- */

.kelpnote { max-width: 96ch; }
.kelphead {
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.08;
  margin-bottom: 22px;
}
.kelpbody p + p { margin-top: 16px; }
.kelpbody h3 { margin-top: 36px; margin-bottom: 14px; font-size: 17px; }
.kelpbody .fitrows { margin-top: 18px; }

/* ⚠ класс на самом ul: без сброса system-маркер и наша точка дают по два маркера в пункте. */
.kelplist {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}
.kelplist li {
  position: relative;
  padding-left: 22px;
  padding-block: 7px;
  font-size: 14px;
}
.kelplist li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 15px;
  width: 6px;
  height: 6px;
  background: var(--zn-coral);
}

/* ---------- цитаты ---------- */

.echoreel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 44px;
}
.echoquote {
  margin: 0;
  background: var(--zn-paper);
  border: 1px solid var(--zn-rule);
  padding: 34px 30px;
}
.echoquote p {
  font-family: var(--zn-headface);
  font-size: 19px;
  line-height: 1.45;
}
.echoname {
  display: block;
  margin-top: 20px;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--zn-meta);
  font-style: normal;
}

/* ---------- финальный cta ---------- */

.mooreband {
  text-align: center;
  max-width: 60ch;
  margin-inline: auto;
}
.mooreband .saltbtn, .mooreband .saltghost { margin: 30px 8px 0; }

/* ---------- рейл «читать дальше» ---------- */

.sunreel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}
.sunreel a {
  display: block;
  text-decoration: none;
  border-top: 2px solid var(--zn-ink);
  padding-top: 18px;
}
.sunreel a:hover { border-top-color: var(--zn-coral); }
.sunreel h3 { font-size: 18px; line-height: 1.3; }
.sunreel p { margin-top: 10px; font-size: 14px; color: var(--zn-deep); }
.sunreel em {
  font-style: normal;
  display: block;
  margin-bottom: 10px;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--zn-meta);
}

/* ---------- карточка товара, страница ---------- */

.laymain {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: start;
  padding-block: 48px 84px;
}
.layshot {
  background: var(--zn-sand);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  padding: 6%;
  position: sticky;
  top: 108px;
}
.layshot img { max-height: 100%; width: auto; object-fit: contain; }

.layside h1 {
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.08;
}
.layside .cutspec { margin-top: 14px; }
.layside .ratenub { margin-top: 16px; }
.layside > p { margin-top: 22px; color: var(--zn-deep); font-size: 16px; }
.layside .cutact { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--zn-rule); }
.layside .pricetick { font-size: 30px; }
.layside .saltbuy { width: auto; min-width: 260px; }

.layspec { margin-top: 40px; border-top: 1px solid var(--zn-rule); }
.layword { padding-block: 22px; border-bottom: 1px solid var(--zn-rule); }
.layword h2 {
  font-family: var(--zn-bodyface);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: .04em;
  margin-bottom: 8px;
}
.layword p { font-size: 14px; color: var(--zn-deep); }

.laytrail { padding-bottom: 90px; }

/* ---------- гайды ---------- */

.chartroll {
  width: min(820px, 100% - 48px);
  margin-inline: auto;
  padding-block: 48px 90px;
}
.charthead { padding-bottom: 32px; border-bottom: 1px solid var(--zn-rule); }
.charthead h1 {
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1.05;
}
.charthead p { margin-top: 20px; font-size: 17px; color: var(--zn-deep); }
.charthead em {
  font-style: normal;
  display: block;
  margin-bottom: 14px;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--zn-meta);
}

.chartsec { padding-top: 38px; }
.chartsec h2 {
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.12;
  margin-bottom: 16px;
}
.chartsec p + p { margin-top: 15px; }

/* ⚠ класс на самом ul */
.chartfacts {
  list-style: none;
  margin: 22px 0 0;
  padding: 24px 26px;
  background: var(--zn-tint);
}
.chartfacts li {
  position: relative;
  padding-left: 20px;
  padding-block: 6px;
  font-size: 14px;
}
.chartfacts li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  width: 7px;
  height: 1px;
  background: var(--zn-shallow);
}

.chartclose {
  margin-top: 44px;
  padding: 34px 32px;
  background: var(--zn-sand);
}
.chartclose h2 { font-size: 24px; margin-bottom: 12px; }
.chartclose .saltbtn { margin-top: 22px; }

/* ---------- подборщик ---------- */

/* ⚠ .tiderung — это fieldset, а заголовок в нём legend: селектор .tiderung h2 не нашёл бы
   ничего и молча оставил дефолтный вид. Тот же случай у .tidechoice: класс висит на
   контейнере, а кнопки внутри него голые. */
.tiderung {
  border: 0;
  border-top: 1px solid var(--zn-rule);
  margin: 0;
  padding: 30px 0 6px;
}
.tiderung legend {
  padding: 0;
  font-family: var(--zn-headface);
  font-weight: 400;
  font-size: 24px;
  letter-spacing: .01em;
}
.tiderung > p {
  margin-top: 8px;
  font-size: 13px;
  color: var(--zn-meta);
}

.tidechoice {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.tidechoice button {
  font-family: var(--zn-bodyface);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .06em;
  background: var(--zn-paper);
  color: var(--zn-ink);
  border: 1px solid var(--zn-rule);
  border-radius: 999px;
  padding: 10px 20px;
  cursor: pointer;
}
.tidechoice button:hover { border-color: var(--zn-shallow); }
.tidechoice button[aria-pressed='true'] {
  background: var(--zn-shallow);
  border-color: var(--zn-shallow);
  color: #fff;
}

.tideyield { margin-top: 12px; }
.tideyield[aria-busy='true'] { opacity: .4; }

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

.saltfoot {
  background: var(--zn-ocean);
  color: var(--zn-paper);
  padding-block: 72px 34px;
  margin-top: auto;
}
.saltfootcols {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 40px;
}
.saltfootcols h3 {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(251,249,246,.6);
  margin-bottom: 18px;
}
.saltfootcols ul { list-style: none; margin: 0; padding: 0; }
.saltfootcols li { padding-block: 5px; }
.saltfootcols a { font-size: 14px; text-decoration: none; color: rgba(251,249,246,.86); }
.saltfootcols a:hover { color: var(--zn-paper); text-decoration: underline; }
.saltfootcols p { font-size: 14px; color: rgba(251,249,246,.72); max-width: 40ch; margin-top: 14px; }
.saltfootcols .brinemark { color: var(--zn-paper); margin-right: 0; display: inline-block; }

.saltfootfine {
  margin-top: 56px;
  padding-top: 26px;
  border-top: 1px solid var(--zn-rule-dark);
  font-size: 12px;
  color: rgba(251,249,246,.6);
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  justify-content: space-between;
}

/* ---------- узкие экраны ---------- */

@media (max-width: 1000px) {
  .cutspread, .coastbay, .foamrow { grid-template-columns: repeat(2, 1fr); }
  .ribstack { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .fathomband { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }
  .currentrow, .echoreel, .sunreel { grid-template-columns: 1fr; }
  .depthcols, .beaconwrap, .laymain, .rinsepair, .pairshelf { grid-template-columns: 1fr; gap: 40px; }
  .layshot { position: static; }
  .saltfootcols { grid-template-columns: 1fr 1fr; }
  .cresttray {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 62%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 60px;
  }
  .crestitem { scroll-snap-align: start; }
}

@media (max-width: 720px) {
  .saltlane, .brinebar, .tidecopy, .cresttray, .wakecrumb { width: min(1240px, 100% - 32px); }
  .shoreband { padding-block: 56px; }
  .tidecopy { padding-block: 64px 48px; }
  .brinebar { flex-wrap: wrap; gap: 14px 18px; padding-block: 14px; min-height: 0; }
  .brinemark { font-size: 22px; }
  .brinemenu { order: 3; width: 100%; gap: 16px; }
  .cutspread { gap: 28px 16px; }
  .foamrow, .saltfootcols { grid-template-columns: 1fr; }
  .pairpanel { padding: 40px 26px; min-height: 260px; }
  .rinsestack, .echoquote, .chartclose { padding: 26px 22px; }
  .layside .saltbuy { width: 100%; min-width: 0; }
  .cresttray { grid-auto-columns: 74%; }
  .saltfootfine { flex-direction: column; }
  /* ⚠ У .reefgrid фон — цвет линейки, и его видно СКВОЗЬ пустую ячейку. На широком экране
     auto-fit схлопывает лишние колонки и пустых ячеек не бывает, но остаток последней строки
     он не лечит: пять «занятий» в две колонки дают одинокую карточку и рядом целую плашку
     серого. Поэтому фиксируем две колонки и растягиваем нечётную последнюю на обе. */
  .reefgrid { grid-template-columns: repeat(2, 1fr); }
  .reefgrid > :last-child:nth-child(odd) { grid-column: span 2; }
}

@media (prefers-reduced-motion: reduce) {
  .cutsnap img { transition: none; }
}