/* Вариант 2. Два входа: по установке и по разделу.
   Оформление строже и плотнее первого — ближе к техническому каталогу. */

:root {
  --fon:      #FFFFFF;
  --karta:    #FFFFFF;
  --karta-2:  #F2F4F5;
  --tekst:    #14191C;
  --tekst-2:  #45535A;
  --seryy:    #71828A;
  --liniya:   #D5DDE0;
  --akcent:   #1B4E6B;
  --akcent-f: #E3EDF3;
  --model:    #7A4A12;
  --model-f:  #FBF0E1;

  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --shrift: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --fon:#0F1418; --karta:#171E23; --karta-2:#1F282E;
          --tekst:#EBF0F2; --tekst-2:#AFBEC5; --seryy:#7F929B; --liniya:#2A353B;
          --akcent:#6FB5D8; --akcent-f:#122A38; --model:#D9A25E; --model-f:#33260F; }
}
:root[data-theme="dark"] {
  --fon:#0F1418; --karta:#171E23; --karta-2:#1F282E;
  --tekst:#EBF0F2; --tekst-2:#AFBEC5; --seryy:#7F929B; --liniya:#2A353B;
  --akcent:#6FB5D8; --akcent-f:#122A38; --model:#D9A25E; --model-f:#33260F;
}
:root[data-theme="light"] {
  --fon:#FFFFFF; --karta:#FFFFFF; --karta-2:#F2F4F5;
  --tekst:#14191C; --tekst-2:#45535A; --seryy:#71828A; --liniya:#D5DDE0;
  --akcent:#1B4E6B; --akcent-f:#E3EDF3; --model:#7A4A12; --model-f:#FBF0E1;
}

* { 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 { max-width: 940px; margin: 0 auto; padding: 0 16px; }

.shapka { background:var(--karta); border-bottom:2px solid var(--akcent); }
.shapka-in { display:flex; align-items:center; justify-content:space-between;
             gap:12px; max-width:940px; margin:0 auto; padding:11px 16px; }
.marka { display:flex; align-items:center; gap:9px; line-height:1.15;
         text-decoration:none; color:inherit; }
.marka-tekst { display:flex; flex-direction:column; }
.marka-tekst b { font-size:15px; font-weight:750; letter-spacing:-0.015em; }
.marka-tekst span { font-size:11px; color:var(--seryy); text-transform:uppercase; letter-spacing:0.08em; }
.zvonok { background:var(--akcent); color:#fff; text-decoration:none;
          font-weight:650; font-size:14.5px; padding:9px 16px; border-radius:4px; }
.zvonok:hover { filter:brightness(1.12); }

.poisk-polosa { position:sticky; top:0; z-index:10; background:var(--karta-2);
                border-bottom:1px solid var(--liniya); padding:11px 0; }
#q { width:100%; padding:13px 15px; font-family:var(--mono); font-size:17px;
     color:var(--tekst); background:var(--karta);
     border:1px solid var(--liniya); border-radius:4px; }
#q::placeholder { font-family:var(--shrift); font-size:14.5px; color:var(--seryy); }
#q:focus { outline:none; border-color:var(--akcent); box-shadow:0 0 0 3px var(--akcent-f); }

h1 { margin:26px 0 6px; font-size:clamp(21px,4.4vw,27px);
     letter-spacing:-0.02em; text-wrap:balance; }
h2 { margin:0 0 2px; font-size:16px; letter-spacing:0.02em;
     text-transform:uppercase; color:var(--akcent); }
.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(--seryy); }
.hlebnye { margin:16px 0 0; font-size:13px; color:var(--seryy); }
.hlebnye a { color:var(--akcent); }

/* два входа */
.vhod { border-top:1px solid var(--liniya); padding:22px 0 8px; }
.vhod:first-of-type { border-top:0; padding-top:0; }

/* align-items:start убран намеренно: с ним плитка не тянулась до высоты
   соседа, и в ряду, где одно название в две строки, а другое в одну,
   квадратики получались разной высоты. Теперь тянутся, а min-height
   задан по самой длинной надписи в две строки — поэтому все плитки
   одного размера, сколько бы слов в названии ни было. */
.plitki { display:grid; gap:7px; grid-template-columns:1fr 1fr; margin-bottom:8px; }
.plitka { background:var(--karta); border:1px solid var(--liniya); border-radius:4px;
          padding:10px 11px; text-decoration:none; color:inherit;
          display:flex; flex-direction:column; justify-content:center;
          gap:3px; line-height:1.3; min-height:76px; }
.plitka:hover { border-color:var(--akcent); background:var(--akcent-f); }
.plitka b { font-size:14px; font-weight:620; }
.plitka span { font-size:11.5px; color:var(--seryy); font-variant-numeric:tabular-nums; }

.model-plitka { border-left:3px solid var(--model); }
.model-plitka:hover { background:var(--model-f); border-color:var(--model); }

/* карточки */
.setka { display:grid; gap:8px; padding-bottom:36px; }
.karta { background:var(--karta); border:1px solid var(--liniya); border-radius:4px;
         padding:11px; text-decoration:none; color:inherit;
         display:flex; gap:12px; align-items:flex-start; }
.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:3px;
                         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); border-radius:2px; }
.imya { font-size:14px; color:var(--tekst-2); }
.niz { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.cena { font-size:15.5px; font-weight:680; font-variant-numeric:tabular-nums; }
.cena small { font-weight:400; color:var(--seryy); font-size:12px; }
.po-zaprosu { font-size:13.5px; font-weight:500; color:var(--seryy); }
.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:#E1F3E5; color:#1E7A34; }
.ostatok.net { background:#F5E7E7; color:#93312F; }
@media (prefers-color-scheme: dark) {
  .ostatok.est { background:#12321C; color:#5FCB7C; }
  .ostatok.net { background:#331717; color:#E08B89; }
}
.razdel-metka { font-size:11px; color:var(--seryy); background:var(--karta-2);
                padding:2px 7px; border-radius:3px; white-space:nowrap; }

.pusto { background:var(--karta-2); border:1px solid var(--liniya); border-radius:4px;
         padding:26px 20px; text-align:center; color:var(--tekst-2); }

/* деталь */
.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:4px; 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:4px;
             padding:15px; display:flex; flex-wrap:wrap; align-items:center;
             gap:11px; margin-bottom:22px; }
.cena-blok .cena { font-size:22px; margin-right:auto; }
.knopka { background:var(--akcent); color:#fff; text-decoration:none;
          font-weight:650; font-size:14.5px; padding:11px 17px; border-radius:4px; }
.knopka:hover { filter:brightness(1.12); }
.knopka.vtoraya { background:none; color:var(--akcent); border:1px solid var(--akcent); }
.knopka.vtoraya:hover { background:var(--akcent); color:#fff; }

.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(--seryy); width:38%; }
.svoystva a { color:var(--akcent); }
.mono { font-family:var(--mono); }

.podval { border-top:1px solid var(--liniya); padding-top:20px; padding-bottom:34px;
          color:var(--seryy); font-size:13.5px; }
.podval-znachok { display:block; height:34px; width:auto; margin-bottom:12px; }
.podval a { color:var(--akcent); }
.melko { font-size:12px; }

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

@media (min-width:640px) {
  .setka { grid-template-columns:1fr 1fr; }
  .plitki { grid-template-columns:repeat(3,1fr); }
  .plitki.modeli { grid-template-columns:repeat(4,1fr); }
}
@media (prefers-reduced-motion:reduce) { * { transition:none !important; } }

/* семейства, по которым запчастей ещё нет — видно, но приглушённо */
.plitka.pod-zakaz { opacity:.55; }
.plitka.pod-zakaz b { font-weight:520; }
.pusto b { display:block; font-size:17px; margin-bottom:6px; }
.pusto p { margin:0 auto 14px; max-width:44ch; }

/* Скрытие через hidden должно побеждать display из классов.
   Без этого блок результатов с display:grid не прятался при очистке поиска. */
[hidden] { display: none !important; }

/* кнопка «искать во всём каталоге» в сообщении «ничего не нашли» */
#vezde { font: inherit; font-weight:650; color:var(--akcent); background:none;
         border:1px solid var(--akcent); border-radius:4px;
         padding:5px 12px; margin-top:8px; cursor:pointer; }
#vezde:hover { background:var(--akcent); color:#fff; }

/* Переключатель языка в шапке. Стоит между названием и кнопкой звонка,
   на телефоне уезжает во вторую строку вместе с ней. */
.yazyki { display:flex; gap:2px; margin-left:auto; }
.yazyk {
  font-size:12px; font-weight:700; letter-spacing:.04em;
  padding:5px 8px; border-radius:5px; text-decoration:none;
  color:#6b7b86; border:1px solid transparent;
}
.yazyk:hover { color:#1f3a4d; border-color:#d6dee4; }
.yazyk.vybran { color:#1f3a4d; background:#e8eef2; }
.shapka-in .zvonok { margin-left:10px; }

/* На телефоне название с подписью не помещаются в одну строку рядом
   с языками и звонком — разводим их на два ряда. */
@media (max-width: 560px) {
  .shapka-in { flex-wrap:wrap; row-gap:9px; gap:7px; padding:10px 13px; }
  .marka { flex:0 0 100%; }
  .marka-tekst b { font-size:16px; }
  .marka-tekst span { font-size:10.5px; letter-spacing:0.06em; }
  .yazyki { margin-left:0; margin-right:auto; gap:1px; }
  .shapka-in .zvonok { margin-left:0; }
  /* четыре языка плюс две кнопки должны уместиться в одну строку на 375px,
     иначе шапка расползается на три ряда и съедает пол-экрана */
  .yazyk { padding:4px 6px; font-size:11px; }
  .zvonok, .zvonok.wa { font-size:12.5px; padding:7px 10px; }
}

/* Блок «не нашли»: заголовок с набранным номером и кнопки связи.
   Клиент не должен упираться в тупик — отсюда всегда есть выход. */
.pusto .net-knopki { display:flex; gap:8px; justify-content:center;
                     flex-wrap:wrap; margin-top:14px; }
.pusto b { display:block; font-size:17px; margin-bottom:6px; }
.pusto p { margin:0; max-width:34em; margin-left:auto; margin-right:auto; }

/* WhatsApp в шапке — рядом со звонком, но спокойнее по цвету:
   звонок остаётся главной кнопкой. */
.zvonok.wa { background:#1f7a4d; }
@media (max-width: 560px) {
  .zvonok, .zvonok.wa { font-size:13.5px; padding:8px 12px; }
}

/* Крутилка на время поиска. Нужна не для красоты: без неё окно «ничего нет»
   выскакивает посреди набора и человек бросает печатать на половине номера. */
.iskanie { display:flex; align-items:center; justify-content:center; gap:10px;
           padding:34px 20px; color:var(--seryy); 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); } }
@media (prefers-reduced-motion: reduce) { .krutilka { animation-duration:2s; } }

/* Второй ярус имени — на языке страницы, под английским.
   Английское имя международное, по нему узнают деталь; местное поясняет. */
.imya-mest, .imya-mest-bolshoe { display:block; color:var(--seryy); }
.imya-mest { font-size:12.5px; line-height:1.35; margin-top:2px; }
.imya-mest-bolshoe { font-size:15px; margin-top:4px; }

/* ── Цвет там, где он работает (вариант Б) ────────────────────────────
   Ни один из этих цветов не для красоты: каждый помогает найти быстрее.
   Цену ищут глазами сразу после номера, поэтому она крупнее и в акценте.
   Синяя полоска слева у детали, золотая — у установки: разные вещи,
   разный цвет. */
.karta { border-left:3px solid var(--akcent); }
.cena { font-size:17px; color:var(--akcent); }
.cena-blok .cena { font-size:23px; }
.razdel-metka { background:var(--akcent-f); color:var(--akcent); }

/* Мягкая подложка вверху главной. Страница получает «голову», и взгляд
   не упирается в пустоту. Держим слабо — это тон, а не заливка. */
.shapka-glavnoy { background:linear-gradient(180deg, var(--akcent-f), transparent);
                  border-radius:10px; padding:20px 20px 2px; margin:16px 0 20px; }
.shapka-glavnoy h1 { margin-top:0; }
.shapka-glavnoy .vvod { margin-bottom:18px; }
@media (max-width: 560px) {
  .shapka-glavnoy { padding:16px 15px 2px; margin:12px 0 16px; }
}

/* Модель, которую обслуживаем, но запчастей ещё нет: та же плитка,
   только не кнопка — страницы под неё не создаётся. */
.plitka.bez-ssylki { cursor:default; }
.plitka.bez-ssylki:hover { border-color:var(--liniya); background:var(--karta); }