/* Редизайн 03.08.2026 — тёмная тема по ТЗ Эльчина. Подробности решения
   см. РЕШЕНИЯ.md, запись «Редизайн (тёмная тема)». Тема всегда тёмная,
   переключателя на светлую больше нет — так попросили. */

:root {
  --fon:      #0A0E13;
  --fon-2:    #0D131A;
  --karta:    #111820;
  --karta-h:  #141D27;
  --karta-2:  #161F2A;
  --tekst:    #F7F9FB;
  --tekst-2:  #8A97A6;
  --tekst-3:  #5B6773;
  --liniya:   #1E2A36;
  --liniya-h: #2A3B4D;
  --akcent:   #2F6FED;
  --akcent-2: #5C8CF4;
  --akcent-f: rgba(47,111,237,.12);
  --akcent-svech: rgba(47,111,237,.30);
  --model:    var(--akcent);
  --model-f:  var(--akcent-f);
  --radius:   12px;

  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --shrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
body { margin:0; background:var(--fon); color:var(--tekst);
       font-family:var(--shrift); font-size:16px; line-height:1.5;
       -webkit-font-smoothing:antialiased; }
.obertka { width:100%; max-width:1800px; margin:0 auto;
            padding-left:clamp(24px, 3vw, 48px); padding-right:clamp(24px, 3vw, 48px); }
img, svg { display:block; }
a { color:inherit; }

/* ── шапка ────────────────────────────────────────────────────────────── */
.shapka { position:sticky; top:0; z-index:20; background:rgba(10,14,19,.88);
          -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
          border-bottom:1px solid var(--liniya); }
.shapka-in { display:flex; align-items:center; gap:22px; width:100%;
             max-width:1800px; margin:0 auto;
             padding-left:clamp(24px, 3vw, 48px); padding-right:clamp(24px, 3vw, 48px);
             padding-top:13px; padding-bottom:13px; }
.marka { display:flex; align-items:center; gap:10px; line-height:1.15;
         text-decoration:none; color:inherit; flex:0 0 auto; }
.marka::before { content:""; width:30px; height:30px; flex:none; color:var(--akcent);
  -webkit-mask:url('ikony/marka.svg') center/contain no-repeat;
  mask:url('ikony/marka.svg') center/contain no-repeat;
  background:currentColor; }
.marka-tekst { display:flex; flex-direction:column; }
.marka-tekst b { font-size:17.25px; font-weight:750; letter-spacing:-.015em; }
.marka-tekst span { font-size:12.1px; color:var(--tekst-3); text-transform:uppercase; letter-spacing:.08em; }

.shapka-deystviya { display:flex; align-items:center; gap:8px; flex:0 0 auto; margin-left:auto; }
.yazyki { display:flex; gap:1px; background:var(--karta); border:1px solid var(--liniya);
          border-radius:8px; padding:2px; }
.yazyk { font-size:11.5px; font-weight:700; letter-spacing:.02em; padding:5px 8px;
         border-radius:6px; text-decoration:none; color:var(--tekst-3); }
.yazyk:hover { color:var(--tekst); }
.yazyk.vybran { color:#fff; background:var(--akcent); }

.zvonok { display:inline-flex; align-items:center; gap:7px; background:var(--akcent); color:#fff;
          text-decoration:none; font-weight:650; font-size:14px; padding:9px 15px;
          border-radius:8px; white-space:nowrap; }
.zvonok:hover { filter:brightness(1.1); }
.zvonok svg { width:15px; height:15px; flex:none; }
.zvonok.wa { background:#1f9e56; }

/* ── строка поиска (общий партиал, используется и в шапке, и в герое) ──── */
.poisk-polosa { position:sticky; top:var(--v3-search-top, 0px); z-index:10; background:var(--fon-2);
                border-bottom:1px solid var(--liniya); padding:12px 0; }
#q { width:100%; padding:14px 16px; font-family:var(--mono); font-size:16.5px;
     color:var(--tekst); background:var(--karta);
     border:1px solid var(--liniya); border-radius:10px; }
#q::-webkit-search-cancel-button { -webkit-appearance:none; appearance:none; display:none; }
#q::-ms-clear { display:none; }
#q::placeholder { font-family:var(--shrift); font-size:14.5px; color:var(--tekst-3); }
#q:focus { outline:none; border-color:var(--akcent); box-shadow:0 0 0 4px var(--akcent-f); }
.obertka-poisk { position:relative; }
.poisk-ochistit { position:absolute; right:calc(clamp(24px, 3vw, 48px) + 8px); top:50%;
                   transform:translateY(-50%); width:30px; height:30px; padding:0; border:0;
                   border-radius:7px; background:transparent; color:var(--tekst-3); font:24px/1 sans-serif;
                   cursor:pointer; }
.poisk-ochistit:hover { color:var(--tekst); background:var(--karta-h); }
/* кнопка «Search» видна только в укрупнённой строке поиска внутри героя
   главной — на остальных страницах поиск живой (поиск на каждую букву),
   отдельная кнопка там не нужна и только путала бы. */
.poisk-knopka { display:none; }

/* строка поиска, встроенная в герой главной — крупнее и с кнопкой рядом */
.geroy-poisk .poisk-polosa { position:static; background:none; border:0; padding:0; }
.geroy-poisk .obertka-poisk { display:flex; align-items:center; gap:8px; background:var(--karta);
                border:1px solid var(--liniya); border-radius:var(--radius); padding:7px; max-width:none;
                min-width:0; overflow:hidden; }
.geroy-poisk .obertka-poisk::before { content:""; width:19px; height:19px; margin-left:10px; flex:none;
  background:currentColor; color:var(--tekst-3);
  mask:url('ikony/poisk.svg') center/contain no-repeat;
  -webkit-mask:url('ikony/poisk.svg') center/contain no-repeat; }
.geroy-poisk #q { flex:1 1 auto; width:auto; min-width:0; border:0; padding:12px 6px;
                  border-radius:0; background:none; }
.geroy-poisk #q:focus { box-shadow:none; }
.geroy-poisk .poisk-ochistit { position:static; transform:none; flex:none; width:30px; height:30px;
                                font-size:22px; }
.geroy-poisk .poisk-knopka { display:inline-block; border:0; background:var(--akcent); color:#fff; font-weight:650;
                flex:0 0 auto; font-size:14.5px; padding:13px 22px; border-radius:8px; cursor:pointer;
                white-space:nowrap; transition:filter .15s; }
.geroy-poisk .poisk-knopka:hover { filter:brightness(1.1); }

/* ── типографика общая ──────────────────────────────────────────────── */
h1 { margin:26px 0 6px; font-size:clamp(21px,4.4vw,27px);
     letter-spacing:-.02em; text-wrap:balance; }
h2 { margin:0 0 2px; font-size:12.5px; font-weight:700; letter-spacing:.09em;
     text-transform:uppercase; color:var(--akcent-2); }
.vvod { margin:0 0 26px; color:var(--tekst-2); font-size:15px; max-width:58ch; }
.podskazka { margin:0 0 12px; font-size:13.5px; color:var(--tekst-3); }
.hlebnye { margin:16px 0 0; font-size:13px; color:var(--tekst-3); }
.hlebnye a { color:var(--akcent-2); }

/* ── герой главной ──────────────────────────────────────────────────── */
.geroy { padding:42px 0 30px; border-bottom:1px solid var(--liniya);
         background:linear-gradient(90deg, rgba(6,10,16,.98) 0%, rgba(6,10,16,.93) 36%, rgba(6,10,16,.22) 69%, rgba(6,10,16,.04) 100%),
                    url('foto-ustanovok/geroy.png') center right/cover no-repeat;
         min-height:372px; }
.geroy-setka { max-width:620px; }
.geroy-nadzag { display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:700;
                letter-spacing:.09em; text-transform:uppercase; color:var(--akcent-2); margin:0 0 16px; }
.geroy-nadzag::before { content:""; width:16px; height:2px; background:var(--akcent); border-radius:2px; }
.geroy h1 { margin:0 0 14px; font-size:clamp(38px,4vw,54px); font-weight:780;
            letter-spacing:-.025em; line-height:1.08; text-wrap:balance; }
.geroy h1 em { display:block; font-style:normal; color:#1e80ff; }
.geroy .vvod { margin:0 0 20px; font-size:16px; max-width:43ch; }
.geroy .vvod b { color:var(--tekst); font-weight:600; }

.plitki-vhoda { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin:14px 0 0; }
.plitka-vhod { display:flex; flex-direction:column; align-items:flex-start; gap:8px;
               background:var(--karta); border:1px solid var(--liniya); border-radius:10px;
               padding:12px; text-decoration:none; color:var(--tekst); transition:.15s; }
.plitka-vhod:hover { border-color:var(--akcent); background:var(--karta-h); transform:translateY(-1px); }
.plitka-vhod svg { width:18px; height:18px; color:var(--akcent-2); }
.plitka-vhod span { font-size:12.5px; font-weight:600; line-height:1.25; }

.geroy-nizhe { margin:16px 0 0; font-size:13.5px; color:var(--tekst-3); }
.geroy-nizhe a { color:var(--akcent-2); text-decoration:none; font-weight:600; }
.geroy-nizhe a:hover { text-decoration:underline; }

/* ── входы (разделы/установки на внутренних страницах) ─────────────────
   Осталось как было: маленькие плотные плитки без фото/иконок — их
   касается только BY UNIT / BY CATEGORY на самой главной (ниже). */
.vhod { border-top:1px solid var(--liniya); padding:26px 0; }
.vhod:first-of-type { border-top:0; }
.blok-shapka { display:flex; align-items:baseline; justify-content:space-between;
               gap:16px; margin:0 0 4px; flex-wrap:wrap; }
.blok-shapka .vidno-vse { font-size:13px; font-weight:650; color:var(--akcent-2); text-decoration:none; }
.blok-shapka .vidno-vse:hover { text-decoration:underline; }

.plitki { display:grid; gap:8px; grid-template-columns:1fr 1fr; margin-bottom:8px; }
.plitka { background:var(--karta); border:1px solid var(--liniya); border-radius:9px;
          padding:10px 12px; text-decoration:none; color:inherit;
          display:flex; flex-direction:column; justify-content:center;
          gap:3px; line-height:1.3; min-height:76px; transition:.15s; }
.plitka:hover { border-color:var(--akcent); background:var(--karta-h); }
.plitka b { font-size:14px; font-weight:620; }
.plitka span { font-size:11.5px; color:var(--tekst-3); font-variant-numeric:tabular-nums; }
.model-plitka { border-left:3px solid var(--model); }
.model-plitka:hover { background:var(--model-f); border-color:var(--model); }
.plitka.pod-zakaz { opacity:.55; }
.plitka.pod-zakaz b { font-weight:520; }
.plitka.bez-ssylki { cursor:default; }
.plitka.bez-ssylki:hover { border-color:var(--liniya); background:var(--karta); }

/* ── BY UNIT на главной: плитки с фото/заглушкой ────────────────────── */
.setka-agregatov { display:grid; grid-template-columns:repeat(8,1fr); gap:12px; }
.plitka-agregat { background:var(--karta); border:1px solid var(--liniya); border-radius:var(--radius);
                   overflow:hidden; text-decoration:none; color:var(--tekst); transition:.15s;
                   position:relative; display:block; }
.plitka-agregat:hover { border-color:var(--akcent); transform:translateY(-2px); }
.agregat-foto { aspect-ratio:16/8; display:flex; align-items:center; justify-content:center;
                background:linear-gradient(160deg, var(--karta-h), var(--fon-2)); overflow:hidden; }
.agregat-foto img { width:100%; height:100%; object-fit:contain; }
.agregat-foto svg { width:64%; height:64%; color:var(--tekst-3); opacity:.85; }
.plitka-agregat:hover .agregat-foto svg { color:var(--akcent-2); }
.agregat-telo { padding:10px 12px 12px; position:relative; }
.agregat-telo::after { content:"›"; position:absolute; right:12px; bottom:10px; color:var(--akcent-2); font-size:22px; line-height:1; }
.agregat-telo b { display:block; font-size:13px; font-weight:650; margin-bottom:3px; padding-right:16px; }
.agregat-telo span { font-size:12px; color:var(--tekst-3); font-variant-numeric:tabular-nums; }
.plitka-agregat.pod-zakaz { opacity:.55; }
.plitka-agregat.pod-zakaz:hover { opacity:.85; }
.plitka-agregat.bez-ssylki { cursor:default; }

/* ── BY CATEGORY на главной: плитки с иконкой ───────────────────────── */
.setka-razdelov { display:grid; grid-template-columns:repeat(7,1fr); gap:9px; }
.plitka-razdel { display:flex; align-items:center; gap:11px; background:var(--karta);
                 border:1px solid var(--liniya); border-radius:9px; padding:12px;
                 text-decoration:none; color:var(--tekst); transition:.15s; }
.plitka-razdel:hover { border-color:var(--akcent); background:var(--karta-h); }
.razdel-ikonka { width:31px; height:31px; flex:none; display:grid; place-items:center;
                 color:#1e80ff; font-style:normal; }
.razdel-ikonka svg { width:24px; height:24px; }
.razdel-tekst { display:flex; flex-direction:column; gap:1px; min-width:0; }
.razdel-tekst b { font-size:13px; font-weight:620; line-height:1.25; }
.razdel-tekst span { font-size:11.5px; color:var(--tekst-3); font-variant-numeric:tabular-nums; }

/* ── полоса доверия ──────────────────────────────────────────────────── */
.doveriye { padding:14px 0 12px; }
.doveriye-setka { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; padding:17px 20px;
                  border:1px solid var(--liniya-h); background:linear-gradient(100deg, var(--karta), #101c29); border-radius:10px; }
.doveriye-punkt { display:flex; align-items:flex-start; gap:11px; padding:4px; }
.doveriye-punkt svg { width:27px; height:27px; color:#1e80ff; flex:none; margin-top:1px; }
.doveriye-punkt b { display:block; font-size:13.5px; font-weight:650; }
.doveriye-punkt span { font-size:12px; color:var(--tekst-3); }

/* ── CTA-блок ────────────────────────────────────────────────────────── */
.cta-blok { padding:52px 0; }
.cta-karta { position:relative; overflow:hidden; border-radius:20px;
             background:linear-gradient(120deg, #0E1B33, #0A0E13 65%);
             border:1px solid var(--liniya); padding:42px 40px; }
.cta-karta::before { content:""; position:absolute; inset:0;
             background:radial-gradient(600px 300px at 85% 10%, var(--akcent-svech), transparent 70%); }
.cta-tekst { position:relative; z-index:1; max-width:52ch; }
.cta-tekst h3 { margin:0 0 8px; font-size:24px; font-weight:750; letter-spacing:-.02em; }
.cta-tekst p { margin:0 0 20px; color:var(--tekst-2); font-size:15px; }

/* ── подвал (на всех страницах) ─────────────────────────────────────── */
.podval { border-top:1px solid var(--liniya); padding:44px 0 30px; }
.podval-setka { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; margin-bottom:32px; }
.podval-brend .marka { margin-bottom:12px; }
.podval-brend .marka::before { display:none; }
.podval-brend .marka-tekst b { font-size:18px; }
.podval-brend .marka-tekst span { font-size:12.6px; }
.podval-brend p { font-size:13px; color:var(--tekst-3); max-width:32ch; margin:0; }
.podval-kolonka h4 { margin:0 0 13px; font-size:11.5px; font-weight:700; letter-spacing:.07em;
                      text-transform:uppercase; color:var(--tekst-3); }
.podval-kolonka ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.podval-kolonka a { font-size:13.5px; color:var(--tekst-2); text-decoration:none; }
.podval-kolonka a:hover { color:var(--akcent-2); }
.podval-niz { border-top:1px solid var(--liniya); padding-top:18px;
              display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
              font-size:12px; color:var(--tekst-3); }
.melko { font-size:12px; }

/* ── карточки деталей (сохранены функционально, только новая палитра) ── */
.setka { display:grid; gap:8px; padding-bottom:36px; }
.karta { background:var(--karta); border:1px solid var(--liniya); border-radius:9px;
         padding:11px; text-decoration:none; color:inherit;
         display:flex; gap:12px; align-items:flex-start; border-left:3px solid var(--akcent);
         min-width:0; overflow:hidden; }
.karta:hover { border-color:var(--akcent); }
.karta-tekst { display:flex; flex-direction:column; gap:5px; min-width:0; flex:1; }
.foto-malen, .foto-net { flex:0 0 66px; width:66px; height:66px; border-radius:6px;
                         background:var(--karta-2); object-fit:contain; padding:3px;
                         border:1px solid var(--liniya); }
.nomer { font-family:var(--mono); font-size:16px; font-weight:600; word-break:break-all; }
.nomer mark { background:var(--akcent-f); color:var(--akcent-2); border-radius:3px; }
.imya { font-size:14px; color:var(--tekst-2); min-width:0; overflow-wrap:anywhere; word-break:break-word; }
.niz { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.niz { min-width:0; }
.cena { font-size:17px; font-weight:680; color:var(--akcent-2); font-variant-numeric:tabular-nums; }
.cena small { font-weight:400; color:var(--tekst-3); font-size:12px; }
.po-zaprosu { font-size:13.5px; font-weight:500; color:var(--tekst-3); }
.ostatok { display:inline-block; margin-left:8px; padding:2px 8px; border-radius:20px;
          font-size:12px; font-weight:600; vertical-align:middle; }
.ostatok.est { background:#12321C; color:#5FCB7C; }
.ostatok.net { background:#331717; color:#E08B89; }
.razdel-metka { font-size:11px; color:var(--akcent-2); background:var(--akcent-f);
                padding:2px 7px; border-radius:5px; white-space:nowrap; }

.pusto { background:var(--karta-2); border:1px solid var(--liniya); border-radius:var(--radius);
         padding:26px 20px; text-align:center; color:var(--tekst-2); }
.pusto b { display:block; font-size:17px; margin-bottom:6px; }
.pusto p { margin:0 auto 14px; max-width:44ch; }
.pusto .net-knopki { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:14px; }

/* ── страница детали ─────────────────────────────────────────────────── */
.detal { padding-bottom:36px; }
.foto-bolshoe { display:block; width:100%; max-width:320px; height:auto;
                background:var(--karta-2); border:1px solid var(--liniya);
                border-radius:var(--radius); padding:12px; margin:18px 0 6px; }
.nomer-bolshoy { font-family:var(--mono); font-size:clamp(21px,5vw,29px);
                 margin:14px 0 4px; word-break:break-all; }
.imya-bolshoe { margin:0 0 20px; font-size:16.5px; color:var(--tekst-2); }
.cena-blok { background:var(--karta-2); border:1px solid var(--liniya); border-radius:var(--radius);
             padding:15px; display:flex; flex-wrap:wrap; align-items:center;
             gap:11px; margin-bottom:22px; }
.cena-blok .cena { font-size:23px; margin-right:auto; }
.knopka { background:var(--akcent); color:#fff; text-decoration:none;
          font-weight:650; font-size:14.5px; padding:11px 18px; border-radius:9px; display:inline-block; }
.knopka:hover { filter:brightness(1.1); }
.knopka.vtoraya { background:none; color:var(--akcent-2); border:1px solid var(--liniya); }
.knopka.vtoraya:hover { background:var(--karta); border-color:var(--akcent); }

.svoystva { width:100%; border-collapse:collapse; font-size:14.5px; }
.svoystva td { padding:11px 0; border-bottom:1px solid var(--liniya); }
.svoystva td:first-child { color:var(--tekst-3); width:38%; }
.svoystva a { color:var(--akcent-2); }
.mono { font-family:var(--mono); }

.imya-mest, .imya-mest-bolshoe { display:block; color:var(--tekst-3); }
.imya-mest { font-size:12.5px; line-height:1.35; margin-top:2px; }
.imya-mest-bolshoe { font-size:15px; margin-top:4px; }

a:focus-visible, input:focus-visible, button:focus-visible {
  outline:3px solid var(--akcent); outline-offset:2px; }

/* ── крутилка поиска ─────────────────────────────────────────────────── */
.iskanie { display:flex; align-items:center; justify-content:center; gap:10px;
           padding:34px 20px; color:var(--tekst-3); font-size:14.5px; }
.krutilka { width:18px; height:18px; border-radius:50%;
            border:2px solid var(--liniya); border-top-color:var(--akcent);
            animation:vrashchenie .7s linear infinite; }
@keyframes vrashchenie { to { transform:rotate(360deg); } }
#vezde { font:inherit; font-weight:650; color:var(--akcent-2); background:none;
         border:1px solid var(--liniya); border-radius:8px;
         padding:5px 12px; margin-top:8px; cursor:pointer; }
#vezde:hover { background:var(--karta); border-color:var(--akcent); }

[hidden] { display:none !important; }

/* ── адаптив ─────────────────────────────────────────────────────────── */
@media (min-width:640px) and (max-width:1099px) {
  .setka { grid-template-columns:1fr 1fr; }
}
@media (min-width:1100px) {
  .setka { grid-template-columns:1fr 1fr; }
  .plitki { grid-template-columns:repeat(3,1fr); }
  .plitki.modeli { grid-template-columns:repeat(4,1fr); }

  /* Только вертикальная композиция главной на desktop: типографика,
     палитра и устройство карточек остаются базовыми. */
  .shapka-in { height:68px; padding-top:0; padding-bottom:0; }
  .geroy { min-height:360px; padding:16px 0 8px; }
  .vhod { padding:12px 0; }
  .setka-agregatov { gap:12px; }
  .setka-razdelov { grid-template-columns:repeat(10,1fr); gap:9px; }
  .plitka-razdel { padding:10px; min-height:56px; }
  .doveriye { padding:8px 0; }
  .doveriye-setka { padding:12px 16px; }
  .doveriye-punkt { padding:2px; }
}
@media (prefers-reduced-motion:reduce) { * { transition:none !important; animation-duration:.01ms !important; } }

@media (max-width:1099px) {
  .setka-agregatov { grid-template-columns:repeat(4,1fr); }
  .setka-razdelov { grid-template-columns:repeat(4,1fr); }
  .doveriye-setka { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:860px) {
  .obertka { padding:0 18px; }
  .shapka-in { padding:12px 18px; }
  .zvonok span.podpis-knopki { display:none; }
  .geroy { background-position:62% center; }
  .plitki-vhoda { grid-template-columns:1fr 1fr; }
  .setka-agregatov { grid-template-columns:1fr 1fr; }
  .setka-razdelov { grid-template-columns:1fr 1fr; }
  .doveriye-setka { grid-template-columns:1fr 1fr; }
  .cta-karta { padding:30px 22px; }
  .podval-setka { grid-template-columns:1fr 1fr; gap:26px; }
}
@media (max-width:520px) {
  /* Mobile V2: все четыре действия шапки помещаются в iPhone 390px.
     Названия кнопок уже скрыты выше; оставляем крупные иконки для касания. */
  .shapka-in { padding:10px 12px; gap:8px; }
  .marka { min-width:0; }
  .marka-tekst b { font-size:14px; white-space:nowrap; }
  .shapka-deystviya { gap:6px; }
  .zvonok { width:40px; height:40px; }
  .zvonok { justify-content:center; padding:0; }
  .marka-tekst span { display:none; }
  .yazyki { display:none; }
  .plitki-vhoda { grid-template-columns:1fr; }
  .geroy { padding:34px 0 24px; min-height:0;
            background:linear-gradient(180deg, rgba(6,10,16,.96) 0%, rgba(6,10,16,.88) 58%, rgba(6,10,16,.22) 100%),
                       url('foto-ustanovok/geroy.png') 60% bottom/auto 100% no-repeat; }
  .geroy h1 { font-size:37px; }
  .setka-agregatov { grid-template-columns:1fr 1fr; }
  .setka-razdelov { grid-template-columns:1fr; }
  .doveriye-setka { grid-template-columns:1fr; }
  .podval-setka { grid-template-columns:1fr; gap:24px; }
}
@media (max-width:400px) {
  /* Последние 9px на iPhone 390: кнопки остаются 40px, сжимаются лишь промежутки. */
  .shapka-deystviya { gap:3px; }
}

/* мягкая подложка вверху внутренних страниц (не главной — там герой) */
.shapka-glavnoy { display:none; }

/* ── V2: широкая desktop-версия ────────────────────────────────────────
   На больших экранах контент идёт почти во всю ширину с ровными полями
   по 52px. Размеры текста, высота карточек, фото и синий акцент не меняются. */
@media (min-width:1100px) {
  .obertka { max-width:none; padding-left:52px; padding-right:52px; }
  .shapka { position:static; background:var(--karta); border-bottom:2px solid var(--akcent); }
  .shapka-in { height:auto; min-height:0; max-width:none; justify-content:space-between;
                gap:12px; padding:11px 52px; }
  .shapka-deystviya { gap:8px; margin-left:auto; }
  .marka::before { width:30px; height:30px; }
  .marka-tekst b { font-size:17.25px; }
  .marka-tekst span { font-size:12.1px; }
  .yazyk { font-size:12px; padding:5px 8px; }
  .zvonok { font-size:14px; padding:9px 15px; }

  .geroy { min-height:0; margin:16px 0 20px; padding:20px;
            border:1px solid var(--liniya); border-radius:10px;
            background:linear-gradient(90deg, rgba(10,14,19,.96) 0%, rgba(10,14,19,.82) 56%, rgba(10,14,19,.22) 100%),
                       url('foto-ustanovok/geroy.png') right center/auto 100% no-repeat; }
  .geroy-setka { max-width:58%; }
  .geroy-nadzag { margin-bottom:8px; font-size:11px; }
  .geroy h1 { font-size:27px; line-height:1.18; margin-bottom:7px; }
  .geroy h1 em { color:#2F7DF6; }
  .geroy .vvod { margin-bottom:12px; font-size:15px; }
  .geroy-poisk .obertka-poisk { padding:4px; border-radius:6px; }
  .geroy-poisk #q { padding:9px 5px; font-size:15px; }
  .geroy-poisk .poisk-knopka { padding:10px 16px; font-size:14px; }
  .geroy-nizhe { margin-top:10px; font-size:12.5px; }

  .vhod { padding:22px 0 8px; }
  .vhod:first-of-type { border-top:0; padding-top:0; }
  h2 { font-size:16px; letter-spacing:.02em; }
  .blok-shapka .podskazka { margin-bottom:12px; font-size:13.5px; }
  .setka-agregatov { grid-template-columns:repeat(5, 1fr); gap:7px; }
  .setka-razdelov { grid-template-columns:repeat(6, 1fr); gap:7px; }
  .plitka-agregat { min-height:76px; display:flex; align-items:center; border-radius:4px; }
  .agregat-foto { width:70px; height:54px; flex:none; aspect-ratio:auto; background:var(--karta-2); }
  .agregat-foto img { object-fit:contain; }
  .agregat-telo { flex:1; padding:10px 11px; }
  .agregat-telo b { font-size:14px; }
  .agregat-telo span { font-size:11.5px; }
  .agregat-telo::after { right:10px; bottom:10px; font-size:18px; }
  .plitka-razdel { min-height:76px; padding:10px 11px; border-radius:4px; }
  .razdel-ikonka { width:31px; height:31px; }
  .razdel-tekst b { font-size:14px; }
  .razdel-tekst span { font-size:11.5px; }

  .doveriye { padding:14px 0 12px; }
  .doveriye-setka { padding:14px 16px; }
}

/* ── V3: V2 без изменений на desktop, улучшенная мобильная компоновка ──
   V2 остаётся исходной точкой. Этот блок действует только до 599px:
   на iPhone возвращает читаемую шапку, подписанные действия и безопасные
   размеры героя/карточек без горизонтального переполнения. */
@media (max-width:599px) {
  html, body { min-width:0; overflow-x:hidden; }
  .obertka { padding-left:16px; padding-right:16px; }

  .shapka-in { flex-wrap:wrap; row-gap:9px; gap:7px; padding:10px 13px; }
  .marka { flex:0 0 100%; min-width:0; }
  .marka-tekst { min-width:0; }
  .marka-tekst b { font-size:18.4px; white-space:nowrap; }
  .marka-tekst span { display:block; font-size:12.1px; letter-spacing:.06em; white-space:normal; }
  .shapka-deystviya { flex:0 0 100%; width:100%; margin-left:0; gap:7px; }
  .yazyki { display:flex; margin-left:0; margin-right:auto; }
  .yazyk { padding:4px 6px; font-size:11px; }
  .zvonok { width:auto; height:auto; justify-content:normal; padding:8px 12px; font-size:13.5px; }
  .zvonok span.podpis-knopki { display:inline; }

  .geroy { padding:28px 0 22px; min-height:0;
           background:linear-gradient(180deg, rgba(6,10,16,.97) 0%, rgba(6,10,16,.90) 58%, rgba(6,10,16,.34) 100%),
                      url('foto-ustanovok/geroy.png') 68% bottom/auto 100% no-repeat; }
  .geroy-setka { max-width:none; }
  .geroy-nadzag { margin-bottom:10px; font-size:11px; }
  .geroy h1 { margin-bottom:12px; font-size:clamp(31px,8.2vw,36px); line-height:1.07; }
  .geroy .vvod { margin-bottom:16px; font-size:15px; }
  .geroy-poisk .obertka-poisk { width:100%; max-width:none; gap:6px; padding:5px; }
  .geroy-poisk .obertka-poisk::before { width:17px; height:17px; margin-left:8px; }
  /* iOS Safari увеличивает всю страницу при фокусе на input меньше 16px. */
  .geroy-poisk #q { min-width:0; padding:11px 4px; font-size:16px; }
  /* Кнопка остаётся доступной, но не может вытолкнуть строку за viewport. */
  .geroy-poisk .poisk-knopka { display:inline-flex; align-items:center; justify-content:center;
                                flex:0 0 auto; width:auto; max-width:84px; min-width:0;
                                overflow:hidden; text-overflow:ellipsis;
                                padding:10px 10px; font-size:13px; }
  .geroy-nizhe { margin-top:12px; font-size:12.5px; line-height:1.4; }

  .vhod { padding:20px 0 8px; }
  .blok-shapka { margin-bottom:7px; }
  .setka-agregatov { grid-template-columns:1fr 1fr; gap:9px; }
  .plitka-agregat { min-width:0; border-radius:11px; }
  /* На iPhone делаем карточку примерно на 20% ниже, сохраняя ширину. */
  .agregat-foto { min-height:0; aspect-ratio:2.4/1; }
  .agregat-telo { min-width:0; padding:7px 10px 8px; }
  .agregat-telo b { font-size:13px; line-height:1.25; overflow-wrap:anywhere; }
  .agregat-telo span { font-size:11.5px; }

  .setka-razdelov { grid-template-columns:1fr; gap:9px; }
  .plitka-razdel { min-width:0; padding:11px 10px; border-radius:11px; }
  .razdel-ikonka { width:28px; height:28px; }
  .razdel-tekst b { font-size:12.5px; overflow-wrap:anywhere; }
  .razdel-tekst span { font-size:11px; }

  /* Результаты не должны расширять страницу из-за длинного текста. */
  #rezultaty, .setka, .karta { min-width:0; max-width:100%; width:100%; }
  .niz { align-items:flex-start; flex-wrap:wrap; }
  .razdel-metka { flex:1 1 100%; max-width:100%; white-space:normal;
                  overflow-wrap:anywhere; overflow:hidden; text-overflow:ellipsis; }
}

/* ── V3: небольшие интервалы, мобильная шапка и закрепляемый поиск ── */
.geroy-poisk { margin-top:8px; }
.geroy .vvod { margin-top:12px; }
.geroy-poisk .poisk-polosa.v3-sticky {
  position:fixed; top:var(--v3-sticky-top, 0px); left:0; right:0; z-index:19;
  background:var(--fon-2); border-bottom:1px solid var(--liniya);
  padding:10px 0; box-shadow:0 5px 16px rgba(0,0,0,.22);
}
.geroy-poisk .poisk-polosa.v3-sticky .obertka-poisk {
  max-width:1800px; margin:0 auto;
}
@media (max-width:599px) {
  .marka { gap:7px; }
  .marka::before { display:block; width:24px; height:24px; }
  .geroy-poisk .obertka-poisk::before { display:none; }
  .geroy-poisk #q { padding-left:6px; font-size:16px; }
  .poisk-ochistit { right:24px; }
  .geroy-poisk .poisk-polosa.v3-sticky { padding:8px 0; }
  .geroy-poisk .poisk-polosa.v3-sticky { width:100%; max-width:100%; overflow:hidden; }
  .geroy-poisk .poisk-polosa.v3-sticky .obertka-poisk { width:100%; min-width:0; }

  /* В режиме поиска на экране остаются только поле и результаты. */
  body.poisk-aktivnyy .geroy { min-height:0; padding:8px 0; background:var(--fon-2);
                                border-bottom:1px solid var(--liniya); }
  body.poisk-aktivnyy .geroy h1,
  body.poisk-aktivnyy .geroy .vvod,
  body.poisk-aktivnyy .geroy-nadzag,
  body.poisk-aktivnyy .geroy-nizhe,
  body.poisk-aktivnyy #obzor-soderzhimoe { display:none !important; }
  body.poisk-aktivnyy .geroy-setka { max-width:none; }
  body.poisk-aktivnyy .geroy-poisk { margin-top:0; }
  body.poisk-aktivnyy .geroy-poisk .poisk-polosa { padding:0; border:0; background:none; }
  body.poisk-aktivnyy .geroy-poisk .poisk-polosa.v3-sticky { position:static; width:auto; box-shadow:none; }
}

/* ── Переходный планшетный режим ────────────────────────────────────────
   На средних ширинах бренд занимает первую строку, а языки и основные
   действия — вторую. Поиск остаётся главным полем внутри героя. */
@media (min-width:600px) and (max-width:1099px) {
  body { min-width:0; overflow-x:hidden; }
  .obertka { padding-left:24px; padding-right:24px; }

  .shapka-in { flex-wrap:wrap; gap:8px; padding:11px 24px; }
  .marka { flex:0 0 100%; min-width:0; }
  .shapka-deystviya { flex:0 0 100%; width:100%; margin-left:0; gap:8px; }
  .yazyki { margin-right:auto; }

  .zvonok { width:40px; height:40px; }
  .zvonok { justify-content:center; padding:0; }
  .zvonok span.podpis-knopki { display:none; }

  .geroy { background-position:62% center; }
  .setka-agregatov { grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .setka-razdelov { grid-template-columns:repeat(3, minmax(0, 1fr)); }
}

@media (min-width:600px) and (max-width:799px) {
  .setka-agregatov, .setka-razdelov { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

/* ── Где мы находимся: адрес и карта на странице контактов ─────────────
   Класс .gde, а не .karta: .karta в этом проекте — карточка детали.
   Все размеры только здесь: style-src 'self' запрещает инлайновые стили. */
.gde { margin:30px 0 0; }
.gde-zag { font-size:18px; margin:0 0 8px; }
.gde-adres { margin:0 0 14px; color:var(--tekst-2); font-size:15px; }
/* Пропорция задана заранее, поэтому при появлении карты ничего не прыгает. */
.gde-ramka { aspect-ratio:16/9; width:100%; overflow:hidden;
             background:var(--karta-2); border:1px solid var(--liniya);
             border-radius:var(--radius); display:flex; flex-direction:column;
             align-items:center; justify-content:center; gap:10px; }
.gde-melko { margin:0; padding:0 14px; text-align:center;
             font-size:12.5px; color:var(--tekst-2); }
.gde-gotovo { display:block; }
/* Карта показана — кнопка и подпись под ней больше не нужны. Прячем классом,
   а не удалением: при уходе в поиск iframe убирается, класс снимается, и
   кнопка возвращается сама. */
.gde-gotovo .gde-pokazat, .gde-gotovo .gde-melko { display:none; }
.gde-iframe { width:100%; height:100%; border:0; display:block; }
/* Кнопки не должны липнуть к нижнему краю карты. */
.gde .cena-blok { margin-top:12px; }
@media (max-width:599px) {
  /* На телефоне 16:9 даёт ~193px, и треть съедает плашка самого Google.
     4:3 оставляет ~257px — карту уже видно. */
  .gde-ramka { aspect-ratio:4/3; }
  .gde { margin-top:24px; }
}