/* Sweet Apple — сборка вида, редакция 2 «обсидиан и мята».
   Цвета и размеры ТОЛЬКО именами из tokens.css. */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--c-bg); color: var(--c-ink);
  font-family: var(--font); font-size: var(--fs-15); line-height: var(--lh-text);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
::selection { background: var(--c-mint); color: var(--c-na-ostrove); }
.ramka { max-width: var(--w-page); margin: 0 auto; padding: 0 var(--s-5); }
.mono { font-family: var(--mono); font-size: var(--fs-11); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--c-ink-3); }
.mint { color: var(--c-mint); }

/* ============ ШАПКА — тёмная, липкая, поиск виден всегда ============ */
.shapka { position: sticky; top: 0; z-index: 50; background: var(--c-bg); border-bottom: 1px solid var(--c-line); }
.shapka-in { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-4) var(--s-5); max-width: var(--w-page); margin: 0 auto; transition: padding var(--t-soft); }
.shapka.szhata .shapka-in { padding-top: var(--s-2); padding-bottom: var(--s-2); }
.logo { display: flex; align-items: center; gap: var(--s-3); text-decoration: none; flex: 0 0 auto; }
.logo img { width: 36px; height: 36px; mix-blend-mode: screen; filter: drop-shadow(0 0 8px var(--c-mint-glow)); transition: width var(--t-soft), height var(--t-soft); }
/* Светлым страницам знак нужен ТЁМНЫЙ: `mix-blend-mode: screen` гасит тёмное на светлом,
   и знак пропадал вовсе (поймано владельцем 19.08). Выбор варианта за ним. */
.svetlo .logo img { content: url("/kadry/logo-nav-temnyy.png"); mix-blend-mode: normal; filter: none; }
.shapka.szhata .logo img { width: 28px; height: 28px; }
.logo b { font-size: var(--fs-17); font-weight: var(--w-black); letter-spacing: -.02em; white-space: nowrap; }
.logo b::after { content: "."; color: var(--c-mint); }
.poisk { flex: 1; display: flex; min-width: 0; }
.poisk input {
  width: 100%; height: 46px; border: 1px solid var(--c-line); border-radius: var(--r-pill);
  background: var(--c-card-2); color: var(--c-ink);
  padding: 0 var(--s-5); font: inherit; font-size: var(--fs-14);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.poisk input::placeholder { color: var(--c-ink-3); }
.poisk input:focus { outline: 0; border-color: var(--c-mint-2); box-shadow: var(--glow-mint); }
.shapka-nav { display: flex; gap: var(--s-2); flex: 0 0 auto; }
.shapka-nav a {
  display: inline-flex; align-items: center; height: 46px; padding: 0 var(--s-4);
  border-radius: var(--r-pill); text-decoration: none; font-size: var(--fs-13); font-weight: var(--w-mid);
  color: var(--c-ink); border: 1px solid var(--c-line-2); transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.shapka-nav a:hover { border-color: var(--c-mint-2); box-shadow: var(--glow-mint); }
.shapka-nav a.mint { color: var(--c-na-ostrove); background: var(--c-mint); border-color: var(--c-mint); font-weight: var(--w-strong); }

/* ============ КРОШКИ ============ */
.kroshki { padding: var(--s-4) 0; font-family: var(--mono); font-size: var(--fs-11); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--c-ink-3); }
.kroshki a { color: var(--c-ink-3); text-decoration: none; }
.kroshki a:hover { color: var(--c-mint); }
.kroshki span[aria-hidden] { margin: 0 var(--s-2); }

/* ============ ЗАГОЛОВКИ ============ */
.zag { font-size: var(--fs-44); font-weight: var(--w-black); letter-spacing: var(--track-tight); line-height: 1.02; text-transform: uppercase; }
.zag small { display: block; font-family: var(--mono); font-size: var(--fs-11); font-weight: var(--w-reg); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--c-ink-3); margin-top: var(--s-3); }
.podzag { font-size: var(--fs-26); font-weight: var(--w-black); letter-spacing: -.02em; text-transform: uppercase; margin: var(--s-7) 0 var(--s-4); }
.gigant { font-family: var(--font-gigant); font-size: var(--fs-gigant); font-weight: 700; letter-spacing: -.02em; line-height: 1.04; text-transform: uppercase; }
.gigant.hrom { background: var(--grad-chrome); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ============ ТИКЕР ЖИВЫХ ЦЕН ============ */
.tiker { border-block: 1px solid var(--c-line); background: var(--c-bg-2); overflow: hidden; padding: var(--s-3) 0; }
.tiker-in { display: flex; white-space: nowrap; width: max-content; animation: begushka 80s linear infinite; }
.tiker:hover .tiker-in { animation-play-state: paused; }
@keyframes begushka { to { transform: translateX(-50%); } }
.tk { display: inline-flex; align-items: baseline; gap: var(--s-3); padding: 0 var(--s-5); font-size: var(--fs-15); font-weight: var(--w-strong); letter-spacing: -.01em; }
.tk .p { color: var(--c-mint); font-variant-numeric: tabular-nums; }
.tk::after { content: "◆"; color: var(--c-line-2); font-size: 9px; align-self: center; margin-left: var(--s-5); }

/* ============ ПЛИТКИ БРЕНДОВ ============ */
.brendy { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap-grid); }
.pb { grid-column: span 3; background: var(--grad-card); border: 1px solid var(--c-line); border-radius: var(--r-m); padding: var(--s-5); text-decoration: none; display: flex; flex-direction: column; min-height: 160px; position: relative; overflow: hidden; transition: border-color var(--t-fast), transform var(--t-fast); }
.pb:hover { border-color: var(--c-line-2); transform: translateY(-3px); }
.pb .blik { position: absolute; inset: -40%; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), var(--c-mint-wash) 0%, transparent 46%); opacity: 0; transition: opacity var(--t-fast); pointer-events: none; }
.pb:hover .blik { opacity: 1; }
.pb.b6 { grid-column: span 6; min-height: 300px; }
.pb.b4 { grid-column: span 4; min-height: 210px; }
.pb.b12 { grid-column: span 12; min-height: 150px; }
.pb .imya { font-size: var(--fs-34); font-weight: var(--w-black); letter-spacing: -.03em; text-transform: uppercase; position: relative; z-index: 2; }
.pb.b4 .imya { font-size: var(--fs-26); max-width: 58%; }
.pb.b3 .imya { font-size: var(--fs-20); }
.pb .schet { font-family: var(--mono); font-size: var(--fs-11); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--c-mint); margin-top: var(--s-2); }
.pb .sostav { color: var(--c-ink-2); font-size: var(--fs-13); margin-top: auto; padding-top: var(--s-3); max-width: 45%; position: relative; z-index: 2; }
.pb .strelka { position: absolute; right: var(--s-4); top: var(--s-4); width: 36px; height: 36px; border: 1px solid var(--c-line-2); border-radius: 50%; display: grid; place-items: center; color: var(--c-ink-3); transition: var(--t-fast); z-index: 2; }
.pb:hover .strelka { background: var(--c-mint); color: var(--c-na-ostrove); border-color: var(--c-mint); transform: rotate(-45deg); }
.pb .ostrov { position: absolute; right: var(--s-4); top: var(--s-4); bottom: var(--s-4); width: 46%; background: var(--c-ostrov); border-radius: var(--r-s); overflow: hidden; z-index: 1; }
.pb.b6 .ostrov { width: 50%; }
.pb.b4 .ostrov { width: 38%; }
.pb .ostrov img { position: absolute; object-fit: contain; }
.pb .ostrov img.k1 { right: 2%; top: 6%; width: 64%; height: 88%; z-index: 1; }
.pb .ostrov img.k2 { left: 2%; bottom: 4%; width: 44%; height: 56%; z-index: 0; }
.pb .ostrov img:only-of-type { inset: 6%; width: 88%; height: 88%; }
.pb.skoro { border: 1.5px dashed var(--c-mint-2); background: linear-gradient(165deg, var(--c-mint-wash), transparent 70%); justify-content: center; align-items: center; text-align: center; }
.pb.skoro .imya { color: var(--c-mint); }
.pb.skoro .obeshchanie { font-size: var(--fs-20); font-weight: var(--w-strong); line-height: 1.25; margin-top: var(--s-2); max-width: 82%; position: relative; z-index: 2; }

/* ============ ПЛИТКИ КАТЕГОРИЙ И МОДЕЛЕЙ ============ */
.setka { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-grid); }
.setka.k3 { grid-template-columns: repeat(3, 1fr); }
.pm { background: var(--grad-card); border: 1px solid var(--c-line); border-radius: var(--r-m); padding: var(--s-3); text-decoration: none; display: flex; flex-direction: column; gap: var(--s-2); transition: border-color var(--t-fast), transform var(--t-fast); position: relative; overflow: hidden; }
.pm:hover { border-color: var(--c-line-2); transform: translateY(-3px); }
.pm .kadr { aspect-ratio: 5 / 4; margin: calc(var(--s-3) * -1) calc(var(--s-3) * -1) 0; border-radius: var(--r-m) var(--r-m) 0 0; display: flex; align-items: center; justify-content: center; background: var(--c-ostrov); overflow: hidden; }
.pm .kadr img { width: 100%; height: 100%; object-fit: contain; padding: 4%; }
.pm .imya { font-weight: var(--w-strong); font-size: var(--fs-15); line-height: 1.3; padding: 0 var(--s-2); }
.pm .imya.krupno { font-size: var(--fs-26); font-weight: var(--w-black); letter-spacing: -.02em; }
.pm .cena { font-weight: var(--w-black); font-size: var(--fs-20); letter-spacing: -.01em; color: var(--c-mint); font-variant-numeric: tabular-nums; padding: 0 var(--s-2); }
.pm .schet { font-family: var(--mono); font-size: var(--fs-11); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--c-ink-3); padding: 0 var(--s-2) var(--s-2); }
.pm.tiho .kadr { background: var(--c-ostrov-2); }
.pm.tiho .kadr img { filter: grayscale(1); opacity: .45; }
.metka-zhdem { display: inline-block; background: var(--c-card); border: 1px solid var(--c-line-2); color: var(--c-ink-2); border-radius: var(--r-pill); padding: 3px var(--s-3); font-family: var(--mono); font-size: var(--fs-11); letter-spacing: var(--track-mono); text-transform: uppercase; }
.bez-kadra { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background: var(--c-card-2); border-radius: var(--r-s); color: var(--c-mint-2); font-size: var(--fs-44); font-weight: var(--w-black); border: 1px solid var(--c-line); }

/* ============ СУЖЕНИЕ СПИСКА ============ */
.suzhenie { display: flex; gap: var(--s-2); flex-wrap: wrap; margin: var(--s-5) 0; }
.suzhenie button { border: 1px solid var(--c-line-2); background: none; border-radius: var(--r-pill); padding: var(--s-2) var(--s-4); font-family: var(--mono); font-size: var(--fs-11); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--c-ink-2); transition: var(--t-fast); }
.suzhenie button:hover { border-color: var(--c-mint-2); color: var(--c-ink); }
.suzhenie button[aria-pressed="true"] { background: var(--c-mint); color: var(--c-na-ostrove); border-color: var(--c-mint); }
.pokazat-eshche { display: block; margin: var(--s-6) auto 0; border: 1px solid var(--c-line-2); background: none; color: var(--c-ink); border-radius: var(--r-pill); padding: var(--s-3) var(--s-6); font-size: var(--fs-14); font-weight: var(--w-mid); transition: var(--t-fast); }
.pokazat-eshche:hover { border-color: var(--c-mint); box-shadow: var(--glow-mint); }

/* ============ РЯДЫ СБОРОК ============ */
.sborki { display: flex; flex-direction: column; gap: var(--s-2); }
.rs { display: grid; grid-template-columns: 92px 1fr auto; gap: var(--s-4); align-items: center; background: var(--grad-card); border: 1px solid var(--c-line); border-radius: var(--r-m); padding: var(--s-3) var(--s-4); text-decoration: none; transition: border-color var(--t-fast); }
.rs:hover { border-color: var(--c-mint-2); }
.rs .kadr { width: 92px; height: 92px; background: var(--c-ostrov); border-radius: var(--r-s); display: flex; align-items: center; justify-content: center; overflow: hidden; font-size: var(--fs-12); color: var(--c-ink-3); text-align: center; }
.rs .kadr img { width: 100%; height: 100%; object-fit: contain; padding: 6%; }
.rs .imya { font-weight: var(--w-strong); line-height: 1.35; }
.rs .imya small { display: block; font-family: var(--mono); font-size: var(--fs-11); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--c-ink-3); font-weight: var(--w-reg); margin-top: 3px; }
.rs .hvost { text-align: right; }
.rs .cena { font-weight: var(--w-black); font-size: var(--fs-20); letter-spacing: -.01em; color: var(--c-mint); font-variant-numeric: tabular-nums; }
.rs .status { font-family: var(--mono); font-size: var(--fs-11); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--c-mint-2); }
.rs.tiho .kadr { background: var(--c-ostrov-2); }
.rs.tiho .kadr img { filter: grayscale(1); opacity: .45; }
.rs.tiho .status { color: var(--c-ink-3); }

/* ============ СТРАНИЦА СБОРКИ ============ */
.tovar { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-7); align-items: start; margin-top: var(--s-4); }
.galereya .glavnyy { background: var(--c-ostrov); border-radius: var(--r-l); aspect-ratio: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: var(--shadow-soft); }
.galereya .glavnyy img { width: 100%; height: 100%; object-fit: contain; }
/* Полоса маленьких кадров ПЕРЕНОСИТСЯ. Шесть штук по 84 точки в один ряд — это 504
   точки при телефоне 375: страница уезжала за край, и увидеть это можно было только
   настоящим узким экраном (замер 19.08). Перенос включается сам и только когда иначе
   не влезает — на столе вид прежний. */
.galereya .mini { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-3); }
.galereya .mini button { width: 84px; height: 84px; border: 1px solid var(--c-line); border-radius: var(--r-s); background: var(--c-ostrov); display: flex; align-items: center; justify-content: center; overflow: hidden; padding: var(--s-1); transition: var(--t-fast); }
.galereya .mini button[aria-current="true"] { box-shadow: var(--shadow-press), var(--glow-mint); }
.galereya .mini img { max-width: 100%; max-height: 100%; object-fit: contain; }
.panel h1 { font-size: var(--fs-26); font-weight: var(--w-black); letter-spacing: -.02em; line-height: 1.15; text-transform: uppercase; }
.artikul { font-family: var(--mono); font-size: var(--fs-11); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--c-ink-3); margin-top: var(--s-3); }
.cena-blok { display: flex; align-items: baseline; gap: var(--s-3); margin-top: var(--s-5); flex-wrap: wrap; }
.cena-blok .cifra { font-size: var(--fs-44); font-weight: var(--w-black); letter-spacing: -.02em; color: var(--c-mint); font-variant-numeric: tabular-nums; text-shadow: 0 0 26px var(--c-mint-glow); }
.cena-blok .data { font-family: var(--mono); font-size: var(--fs-11); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--c-ink-3); }
.nalichie { display: inline-flex; align-items: center; gap: var(--s-2); margin-top: var(--s-3); background: var(--c-mint-wash); color: var(--c-mint); border: 1px solid var(--c-mint-2); border-radius: var(--r-pill); padding: var(--s-2) var(--s-4); font-size: var(--fs-13); font-weight: var(--w-mid); }
.nalichie::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c-mint); box-shadow: 0 0 10px var(--c-mint); }
.nalichie.zhdem { background: none; color: var(--c-ink-2); border-color: var(--c-line-2); }
.nalichie.zhdem::before { background: var(--c-ink-3); box-shadow: none; }
.knopka-glav { display: block; width: 100%; margin-top: var(--s-5); height: 62px; border: 0; border-radius: var(--r-m); background: var(--c-mint); color: var(--c-na-ostrove); font-size: var(--fs-17); font-weight: var(--w-strong); transition: box-shadow var(--t-fast), transform var(--t-fast); }
.knopka-glav:hover { box-shadow: 0 0 34px var(--c-mint-glow); transform: translateY(-1px); }
.pod-knopkoy { margin-top: var(--s-3); color: var(--c-ink-2); font-size: var(--fs-13); text-align: center; }
.obeshchaniya { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--c-line); font-size: var(--fs-13); color: var(--c-ink-2); }
.obeshchaniya li { list-style: none; display: flex; align-items: center; gap: var(--s-2); }
.obeshchaniya li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--c-mint); flex: 0 0 auto; }

/* надзаголовок панели: «модель · лучшая цена из N» — мелкой строкой над именем сборки */
.panel .nadzag { font-family: var(--mono); font-size: var(--fs-11); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--c-ink-3); margin: 0 0 var(--s-2); }

/* оси выбора — двери между адресами */
.osi { margin-top: var(--s-5); display: flex; flex-direction: column; gap: var(--s-4); }
.os .os-imya { font-family: var(--mono); font-size: var(--fs-11); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--c-ink-3); margin-bottom: var(--s-2); }
.os .znacheniya { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.os a, .os button { text-decoration: none; border: 1px solid var(--c-line-2); background: none; color: var(--c-ink); border-radius: var(--r-s); padding: var(--s-2) var(--s-4); font-size: var(--fs-14); transition: var(--t-fast); }
.os a:hover { border-color: var(--c-mint-2); }
.os .tek { box-shadow: var(--shadow-press); color: var(--c-mint); font-weight: var(--w-mid); }
.os .tiho { color: var(--c-ink-3); border-style: dashed; }
/* «у нас не бывает»: то же место, тот же размер — только гаснет. Значение не исчезает,
   поэтому блок осей одинаков на всех страницах модели и не прыгает при переходе. */
.os .net { display: inline-block; border: 1px solid var(--c-line); border-radius: var(--r-s); padding: var(--s-2) var(--s-4); font-size: var(--fs-14); color: var(--c-ink-3); opacity: .45; text-decoration: line-through; cursor: not-allowed; }

/* характеристики, видео, соседние */
.harakteristiki { margin-top: var(--s-7); }
/* Группы в две колонки: у телефона характеристик 22, у мака 18 — сплошной столбик такой длины
   не читает никто. Группа не разрывается между колонками (break-inside). */
.hgruppy { columns: 2; column-gap: var(--s-7); }
.hgruppa { break-inside: avoid; margin-bottom: var(--s-6); }
.hgruppa h3 { font-size: var(--fs-15); font-weight: var(--w-strong); margin: 0 0 var(--s-3);
              padding-bottom: var(--s-2); border-bottom: 1px solid var(--c-line); }
.harakteristiki dl { display: grid; grid-template-columns: 1fr auto; gap: var(--s-2) var(--s-4); font-size: var(--fs-14); margin: 0; }
.harakteristiki dt { color: var(--c-ink-3); font-size: var(--fs-13); }
.harakteristiki dd { margin: 0; text-align: right; }
.video-blok { margin-top: var(--s-7); background: var(--grad-card); border: 1px solid var(--c-line); color: var(--c-ink); border-radius: var(--r-l); padding: var(--s-6); display: flex; align-items: center; gap: var(--s-5); }
.video-blok .play { width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--c-mint); color: var(--c-mint); background: none; font-size: var(--fs-20); flex: 0 0 auto; box-shadow: var(--glow-mint); }
.video-blok small { display: block; color: var(--c-ink-2); margin-top: var(--s-1); }

/* ============ ЭКРАН ЗАЯВКИ ============ */
dialog.zayavka { border: 1px solid var(--c-line-2); border-radius: var(--r-l); box-shadow: var(--shadow-soft); padding: 0; margin: auto; max-width: 460px; width: calc(100% - var(--s-6)); background: var(--c-card); color: var(--c-ink); position: relative; }
dialog.zayavka::backdrop { background: rgba(0, 0, 0, .66); }
.zayavka-in { padding: var(--s-6); }
.zayavka-in h2 { font-size: var(--fs-20); font-weight: var(--w-black); letter-spacing: -.01em; text-transform: uppercase; }
.zayavka-in .chto { color: var(--c-ink-2); font-size: var(--fs-14); margin-top: var(--s-2); padding-bottom: var(--s-4); border-bottom: 1px solid var(--c-line); }
.pole { margin-top: var(--s-4); }
.pole label { display: block; font-family: var(--mono); font-size: var(--fs-11); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--c-ink-3); margin-bottom: var(--s-1); }
.pole input { width: 100%; height: 50px; border: 1px solid var(--c-line-2); border-radius: var(--r-s); padding: 0 var(--s-4); font: inherit; background: var(--c-bg-2); color: var(--c-ink); }
.pole input:focus { outline: 0; border-color: var(--c-mint-2); box-shadow: var(--glow-mint); }
.vybor-dve { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); margin-top: var(--s-4); }
.vybor-dve label { border: 1px solid var(--c-line-2); border-radius: var(--r-s); padding: var(--s-3); text-align: center; font-size: var(--fs-14); cursor: pointer; transition: var(--t-fast); }
.vybor-dve input { position: absolute; opacity: 0; }
.vybor-dve label:has(input:checked) { box-shadow: var(--shadow-press); color: var(--c-mint); }
/* Согласие на обработку данных. Галочка НАСТОЯЩАЯ, а не спрятанная под свой рисунок: её
   состояние человек должен видеть, и снять её он должен мочь. */
.soglasie { display: flex; align-items: flex-start; gap: var(--s-2); margin-top: var(--s-4); font-size: var(--fs-13); color: var(--c-ink-2); cursor: pointer; line-height: 1.4; }
.soglasie input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--c-mint); }
.otvet { border-radius: var(--r-m); background: var(--c-bg-2); border: 1px solid var(--c-line); padding: var(--s-5); margin-top: var(--s-4); }
.otvet b { display: block; font-size: var(--fs-17); margin-bottom: var(--s-2); }
.otvet p { font-size: var(--fs-14); color: var(--c-ink-2); }
.otvet .nomer { color: var(--c-mint); font-weight: var(--w-black); }
.zakryt { position: absolute; top: var(--s-3); right: var(--s-3); border: 0; background: none; font-size: var(--fs-20); color: var(--c-ink-3); }

/* ============ ШАГИ ЗАКАЗА 01–04 ============ */
.shagi { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-grid); }
.shag { position: relative; border: 1px solid var(--c-line); border-radius: var(--r-m); background: var(--grad-card); padding: var(--s-5); overflow: hidden; min-height: 210px; display: flex; flex-direction: column; }
.shag .nomer { position: absolute; right: -4%; bottom: -14%; font-size: 120px; font-weight: var(--w-black); line-height: .8; color: transparent; -webkit-text-stroke: 1px var(--c-line-2); letter-spacing: -.05em; user-select: none; }
.shag b { font-size: var(--fs-17); font-weight: var(--w-black); text-transform: uppercase; letter-spacing: -.01em; }
.shag p { color: var(--c-ink-2); font-size: var(--fs-13); margin-top: var(--s-2); max-width: 24ch; position: relative; z-index: 1; }
.shag .tag { font-family: var(--mono); font-size: var(--fs-11); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--c-mint); margin-bottom: var(--s-3); }

/* ============ ПОДВАЛ ============ */
.podval { border-top: 1px solid var(--c-line); background: var(--c-bg-2); margin-top: var(--s-8); overflow: hidden; }
.podval .gigant { padding: var(--s-8) var(--s-5) var(--s-6); max-width: var(--w-page); margin: 0 auto; }
/* Столбцу «Честно N лет» дано больше места, и он начинается ЛЕВЕЕ: его строки не должны переноситься (владелец 19.08). Соседи на месте — ужался только короткий столбец «Мы на связи», в нём одна ссылка. */
.podval-in { max-width: var(--w-page); margin: 0 auto; padding: 0 var(--s-5) var(--s-7); display: grid; grid-template-columns: 1.16fr 0.94fr 0.62fr 1.38fr; gap: var(--s-6); }
.podval-in .chestno p { line-height: 1.5; }
.podval h3 { font-family: var(--mono); font-size: var(--fs-11); letter-spacing: var(--track-mono); text-transform: uppercase; font-weight: var(--w-reg); color: var(--c-ink-3); margin-bottom: var(--s-3); }
.podval p, .podval a { font-size: var(--fs-14); color: var(--c-ink); line-height: 1.7; }
.podval .mintline { color: var(--c-mint); }
.shema-prohoda { grid-column: 1 / -1; border: 1.5px dashed var(--c-line-2); border-radius: var(--r-m); padding: var(--s-5); display: flex; gap: var(--s-6); align-items: center; }
.shema-prohoda svg { flex: 0 0 auto; }
.shema-prohoda .marshrut { stroke-dasharray: 4 6; animation: probeg 2.4s linear infinite; }
@keyframes probeg { to { stroke-dashoffset: -40; } }
.shema-prohoda .pod { color: var(--c-ink-2); font-size: var(--fs-13); }
.podval .niz { grid-column: 1 / -1; border-top: 1px solid var(--c-line); padding-top: var(--s-4); color: var(--c-ink-3); font-family: var(--mono); font-size: var(--fs-11); letter-spacing: var(--track-mono); text-transform: uppercase; display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s-3); }
.podval .podval-ssylki a { color: var(--c-ink-3); text-decoration: none; }
.podval .podval-ssylki a:hover { color: var(--c-mint); }

/* ============ ГЕРОЙ ГЛАВНОЙ ============ */
.geroy { position: relative; background: var(--c-bg); overflow: hidden; }
.geroy-in { max-width: var(--w-page); margin: 0 auto; padding: var(--s-7) var(--s-5); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); align-items: center; min-height: clamp(520px, 62vh, 720px); }
.geroy-znak { justify-self: center; width: 100%; max-width: 700px; }
.geroy .okno { position: relative; aspect-ratio: 1063 / 1100; max-height: 58vh; margin: 0 auto; width: 100%; }
.geroy-imya { margin-top: var(--s-2); text-align: center; font-family: var(--font-gigant); font-weight: 700; font-size: var(--fs-34); letter-spacing: -.01em; white-space: nowrap; }
.geroy-imya .bk { display: inline-block; opacity: 0; transform: translateY(55%) rotate(4deg); filter: blur(6px); animation: bukva .75s cubic-bezier(.2, .7, .2, 1) forwards; animation-delay: var(--d, 0s); }
.geroy-imya .tochka { color: var(--c-mint); animation: bukva .75s cubic-bezier(.2, .7, .2, 1) forwards, tochka-dyshit 2.6s ease-in-out var(--d, 0s) infinite; }
@keyframes bukva { to { opacity: 1; transform: none; filter: none; } }
@keyframes tochka-dyshit { 50% { text-shadow: 0 0 22px var(--c-mint-glow), 0 0 44px var(--c-mint-glow); } }
@media (prefers-reduced-motion: reduce) { .geroy-imya .bk { opacity: 1; transform: none; filter: none; animation: none; } }
.geroy .okno video, .geroy .okno img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.geroy .okno img { mix-blend-mode: screen; }
/* ⛔ ПОСТЕР РОЛИКА — ТОЛЬКО ТАМ, ГДЕ РОЛИК ИГРАЕТ. Он стоял атрибутом `poster` у тега, и
   браузер качал его на ЛЮБОМ экране: замер 26.08 на 375×812 — 1 625 968 байт постера, который
   на телефоне не показывается никогда (ниже 721 px тег спрятан). Фон в media-запросе браузер
   не качает вовсе, если запрос не совпал; сам ролик держит `media` у своего `<source>`. */
@media (min-width: 721px) { .geroy .okno { background: url("kadry/logo-1600.png") center / contain no-repeat; } }
.geroy h1 { font-family: var(--font-gigant); font-size: var(--fs-hero); font-weight: 700; letter-spacing: -.02em; line-height: 1.06; text-transform: uppercase; }
.geroy h1 .hrom { background: var(--grad-chrome); -webkit-background-clip: text; background-clip: text; color: transparent; }
.geroy .pod { margin-top: var(--s-4); color: var(--c-ink-2); font-size: var(--fs-15); max-width: 44ch; }
.znak-doveriya { display: inline-flex; align-items: center; gap: var(--s-2); margin-top: var(--s-5); border: 1px solid var(--c-mint-2); border-radius: var(--r-pill); padding: var(--s-2) var(--s-4); font-family: var(--mono); font-size: var(--fs-11); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--c-mint); box-shadow: var(--glow-mint); }
.geroy .cta { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-5); }
.knopka-vtoraya { display: inline-flex; align-items: center; height: 54px; padding: 0 var(--s-6); border: 1px solid var(--c-line-2); border-radius: var(--r-pill); color: var(--c-ink); text-decoration: none; font-weight: var(--w-mid); transition: var(--t-fast); }
.knopka-vtoraya:hover { border-color: var(--c-mint); box-shadow: var(--glow-mint); }
.knopka-mint { display: inline-flex; align-items: center; height: 54px; padding: 0 var(--s-6); background: var(--c-mint); border-radius: var(--r-pill); color: var(--c-na-ostrove); text-decoration: none; font-weight: var(--w-strong); transition: var(--t-fast); }
.knopka-mint:hover { box-shadow: 0 0 34px var(--c-mint-glow); }

/* ============ КАРТОЧКИ «КТО МЫ» И ЦЕЛИ ============ */
.kartochki-tri { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-grid); }
.kt { background: var(--grad-card); border: 1px solid var(--c-line); border-radius: var(--r-m); padding: var(--s-5); }
.kt b { display: block; font-weight: var(--w-black); text-transform: uppercase; letter-spacing: -.01em; margin-bottom: var(--s-2); }
.kt p { font-size: var(--fs-14); color: var(--c-ink-2); }
.celi { background: var(--c-mint-wash); border: 1px solid var(--c-mint-2); border-radius: var(--r-l); padding: var(--s-6); }
.celi b { text-transform: uppercase; font-weight: var(--w-black); }
.celi ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); margin-top: var(--s-3); }
.celi li { display: flex; gap: var(--s-2); align-items: center; font-size: var(--fs-14); color: var(--c-ink-2); }
.celi li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--c-mint); }

/* ============ ТЕЛЕФОН ============ */
.buybar { display: none; }
@media (max-width: 720px) {
  .ramka { padding: 0 var(--s-4); }
  .shapka-in { flex-wrap: wrap; gap: var(--s-3); padding: var(--s-3) var(--s-4); }
  .logo b { display: none; }
  .poisk { order: 3; flex-basis: 100%; }
  .poisk input { height: 42px; }
  .shapka-nav { margin-left: auto; }
  .shapka-nav a { height: 40px; padding: 0 var(--s-3); font-size: var(--fs-12); }
  .brendy { grid-template-columns: repeat(2, 1fr); }
  .pb, .pb.b6, .pb.b4 { grid-column: span 1; min-height: 170px; }
  .pb.b6 { grid-column: span 2; min-height: 230px; }
  .pb .sostav { max-width: 52%; }
  /* minmax(0, 1fr), а не 1fr: столбец сетки по умолчанию НЕ СЖИМАЕТСЯ ниже своего
     содержимого, и страница уезжает за край. Так уехал экран заявки — 421 точка при
     телефоне 375 (замер 19.08 настоящим узким экраном). Беда общая для всех сеток,
     поэтому лечим правило, а не одну страницу. */
  .setka, .setka.k3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kartochki-tri { grid-template-columns: 1fr; }
  .shagi { grid-template-columns: 1fr 1fr; }
  .tovar { grid-template-columns: 1fr; gap: var(--s-5); }
  .galereya .glavnyy { height: auto; aspect-ratio: 1; border-radius: var(--r-m); }
  .panel h1 { font-size: var(--fs-20); }
  .cena-blok { margin-top: var(--s-3); }
  .cena-blok .cifra { font-size: var(--fs-34); }
  .hgruppy { columns: 1; }
  .harakteristiki dl { grid-template-columns: 1fr auto; gap: var(--s-2) var(--s-3); }
  .podval-in { grid-template-columns: 1fr; gap: var(--s-5); }
  .geroy-in { grid-template-columns: 1fr; min-height: 0; gap: var(--s-5); padding: var(--s-6) var(--s-4); }
  .geroy .okno { max-width: 100%; order: -1; }
  .geroy .okno video { display: none; }
  .geroy .okno::after { content: ""; position: absolute; inset: 0; background: url("kadry/logo-alpha-hero.png") center / contain no-repeat; mix-blend-mode: screen; }
  .rs { grid-template-columns: 72px 1fr; }
  .rs .kadr { width: 72px; height: 72px; }
  .rs .hvost { grid-column: 2; text-align: left; }
  body.est-buybar { padding-bottom: var(--buybar-h); }
  .buybar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    height: var(--buybar-h); background: var(--c-card); border-top: 1px solid var(--c-line-2);
    align-items: center; gap: var(--s-4); padding: 0 var(--s-4) env(safe-area-inset-bottom);
  }
  .buybar .cifra { font-size: var(--fs-17); font-weight: var(--w-black); color: var(--c-mint); }
  .buybar .status { font-family: var(--mono); font-size: var(--fs-11); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--c-mint-2); }
  .buybar .status.zhdem { color: var(--c-ink-3); }
  .buybar button { margin-left: auto; height: 46px; border: 0; border-radius: var(--r-s); background: var(--c-mint); color: var(--c-na-ostrove); padding: 0 var(--s-5); font-size: var(--fs-14); font-weight: var(--w-strong); }
}

/* ============ СВЕТЛОЕ ПОЛОТНО: бесшовные кадры ============ */
.svetlo .pm .kadr, .svetlo .rs .kadr, .svetlo .galereya .glavnyy, .svetlo .galereya .mini button { background: transparent; }
.svetlo .pm .kadr img, .svetlo .rs .kadr img { padding: 0; }
.svetlo .pm { box-shadow: var(--shadow-soft); border-color: transparent; }
.svetlo .rs { box-shadow: var(--shadow-soft); border-color: transparent; }
.svetlo .galereya .glavnyy { box-shadow: none; }
.svetlo .shapka, .svetlo .podval { background: var(--c-bg); }
section.svetlo { border-radius: var(--r-l) var(--r-l) 0 0; padding: var(--s-7) 0 var(--s-8); }
section.svetlo + section.svetlo { border-radius: 0; }

/* герой: видео растворяется в фон, никакой «вставки» */
.geroy .okno video { -webkit-mask-image: radial-gradient(72% 72% at 50% 50%, #000 52%, transparent 97%); mask-image: radial-gradient(72% 72% at 50% 50%, #000 52%, transparent 97%); }
.geroy .okno { border-radius: 0; }

/* уважение к «поменьше движения» */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .tiker-in { animation: none !important; }
}

/* ─── ШРИФТЫ СВОИ, а не с сервера Google ────────────────────────────────────────────
   Прежде страница весом 3-4 КБ ждала fonts.googleapis.com: два лишних рукопожатия за
   границу (замер 19.08 — 1,33 с только на таблицу стилей) и адрес КАЖДОГО посетителя
   уходил Google. Для магазина, обязанного держать данные покупателей в России, это
   закрыто ДО открытия сайта поиску.
   Наборы взяты те же, что отдавал Google, и урезаны до кириллицы с латиницей:
   вьетнамский и расширенные выброшены. Все четыре насыщенности Golos Text и обе
   Unbounded используются в этом же файле — урезать больше нечего.
   `unicode-range` оставлен родной: браузер качает только нужный набор, как и у Google. */
/* ⛔ ОДИН ФАЙЛ — ОДНО ОБЪЯВЛЕНИЕ. Golos Text ПЕРЕМЕННЫЙ: файлы 400/500/600/800
   побайтно одинаковы (md5 024646dc… у всей кириллицы, 3ba0fde6… у всей латиницы),
   а объявлений было восемь — браузер тянул одни и те же байты по четыре раза на
   каждый набор. Диапазон `font-weight: 400 800` и есть то, ради чего шрифт
   переменный. Замерено 21.08. */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/shrift/golos-text-400-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/shrift/golos-text-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/shrift/unbounded-500-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/shrift/unbounded-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/shrift/unbounded-700-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/shrift/unbounded-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}