/* ==========================================================================
   unitest.css — адаптивная таблица стилей для сайта Юнитест

   Принцип «сначала телефон»: базовые правила рассчитаны на узкий экран,
   а на широких экранах включаются блоки @media (min-width: ...).

   Точки перехода:
     40rem  (640 px)  — планшет: карточки в 2 колонки, шапка в 2 ряда
     64rem  (1024 px) — компьютер: боковая колонка справа, широкий текст
     90rem  (1440 px) — большие мониторы: шире боковая колонка

   ВСЕ ЦВЕТА, ШРИФТ И ОСНОВНЫЕ РАЗМЕРЫ ЗАДАЮТСЯ В РАЗДЕЛЕ 1. Чтобы привести
   вид страниц к фирменному, достаточно поменять значения переменных там.
   Картинки везде показываются в своих натуральных размерах и лишь
   уменьшаются, если не помещаются по ширине (см. img в разделе 2).
   ========================================================================== */


/* 1. ТЕМА: цвета, шрифт, размеры
   -------------------------------------------------------------------------- */
:root {
  /* Цвета */
  --ink: #1b2733;            /* основной текст */
  --ink-soft: #52606d;       /* второстепенный текст, подписи */
  --paper: #ffffff;          /* фон страницы */
  --panel: #eef3f8;          /* фон плашек и заголовков боковых блоков */
  --panel-alt: #f6f9fc;      /* «зебра» в таблицах, наведение */
  --rule: #c9d5e2;           /* линии и рамки */
  --brand: #0b4f8a;          /* полоса меню, заголовки, кнопки */
  --brand-dark: #083a68;     /* меню и кнопки при наведении */
  --on-brand: #ffffff;       /* текст на фоне --brand */
  --link: #0a5cb0;           /* ссылки */
  --link-visited: #0a5cb0;   /* посещённые ссылки #6b3fa0; */
  --accent: #b3141c;         /* акции, цены, важные замечания */

  /* Шрифт: системный, есть на любом устройстве, кириллица поддерживается */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, "Noto Sans", sans-serif;

  /* Размеры */
  --wrap: 90rem;             /* максимальная ширина страницы (1440 px) */
  --aside: 19rem;            /* ширина боковой колонки на компьютере */
  --gutter: 1rem;            /* поля по краям страницы */
  --thumb: 7rem;             /* ширина «слота» под миниатюру в карточке */
  --logo-max: 16rem;         /* наибольшая ширина логотипа в шапке */
}

@media (min-width: 40rem) {
  :root { --gutter: 1.5rem; }
}

@media (min-width: 64rem) {
  :root { --gutter: 2rem; }
}

@media (min-width: 90rem) {
  :root { --aside: 20rem; }
}


/* 2. БАЗА
   Здесь только селекторы по имени тега (низкая специфичность), чтобы
   классы компонентов ниже их спокойно переопределяли.
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;      /* 17 px: удобно читать и на телефоне */
  line-height: 1.55;
}

/* Картинки: натуральный размер, но не шире контейнера */
img { max-width: 100%; height: auto; border: 0; }

p { margin: 0 0 1rem; }

ul, ol { margin: 0 0 1rem; padding: 0 0 0 1.4rem; }
li + li { margin-top: .4rem; }

h1, h2, h3, h4 { margin: 1.5rem 0 .6rem; line-height: 1.25; }

a {
  color: var(--link);
  text-decoration: none;
}
a:visited { color: var(--link-visited); }
a:hover {
  color: var(--brand-dark);
  text-decoration: underline;   /* появляется только при наведении */
}

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


/* 3. СЛУЖЕБНЫЕ КЛАССЫ
   -------------------------------------------------------------------------- */

/* Скрыть визуально, но оставить для экранных дикторов */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Ссылка «К содержимому»: появляется при навигации с клавиатуры */
.skip-link,
.skip-link:visited {
  position: absolute;
  left: .5rem;
  top: -4rem;
  z-index: 100;
  padding: .6rem 1rem;
  background: var(--brand);
  color: var(--on-brand);
}
.skip-link:focus { top: .5rem; }

/* Общий контейнер: центрирование и поля */
.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}


/* 4. ШАПКА
   Логотип — картинка в натуральном размере (но не шире --logo-max),
   название раздела и меню — обычный текст.
   Телефон:  логотип | язык      Планшет:  логотип | язык
             название                       название | поиск
             поиск                Компьютер: логотип | название | язык
                                                                   поиск
   -------------------------------------------------------------------------- */
.notice {
  background: var(--panel);
  border-bottom: 1px solid var(--rule);
  font-size: .875rem;
  color: var(--ink-soft);
}
.notice p { margin: 0; padding: .45rem 0; }

.header-main {
  display: grid;
  /* minmax(0, 1fr), а не просто 1fr: иначе колонка отказывается сжиматься
     уже своих не сжимающихся детей (например, кнопки "Найти"), и на узких
     экранах появляется горизонтальная прокрутка. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "brand"
    "lang"
    "title"
    "search";
  align-items: center;
  gap: .6rem;
  padding-top: .75rem;
  padding-bottom: .75rem;
}

.brand {
  grid-area: brand;
  justify-self: start;
  max-width: var(--logo-max);
  min-width: 0;
  line-height: 0;             /* без лишнего зазора под картинкой */
}
.brand img { display: block; }

.brand:hover img,
.brand:focus-visible img {
  content: url("https://www.unitest.com/gifs/logo_3d.gif");
/*  transform: translateY(-1px); */
}

.site-title {
  grid-area: title;
  margin: 0;
  color: var(--brand);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.25;
}

/* Рекламный баннер Keysight и переключатель языка стоят в один ряд:
   баннер слева, кнопки языка справа. Оба переезжают вместе, потому что
   делят одну и ту же ячейку сетки шапки (grid-area: lang). На очень узких
   экранах, где вдвоём они не помещаются, flex-wrap переносит кнопки
   языка на вторую строку, не ломая при этом остальную вёрстку. */
.lang-block {
  grid-area: lang;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem .75rem;
  min-width: 0;
}

.lang-block .ad {
  margin: 0 0.8rem 0 0;      /* сдвигает баннер влево, не трогая переключатель языков */
  flex: none;
  max-width: 11.25rem;       /* натуральная ширина баннера: 180 px */
}

.lang {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  font-size: .9rem;
}
.lang a {
  padding: .3rem .55rem;
  border: 1px solid var(--rule);
  color: var(--link);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}
.lang a:hover { border-color: var(--brand); }
.lang a[aria-current="true"] {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
}

.search {
  grid-area: search;
  display: flex;
  gap: .4rem;
}
.search input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  padding: .5rem .65rem;
  border: 1px solid var(--rule);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  line-height: 1.3;
}
.search button {
  flex: none;
  padding: .5rem .9rem;
  border: 1px solid var(--brand);
  border-radius: 0;
  background: var(--brand);
  color: var(--on-brand);
  font: inherit;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
}
.search button:hover { background: var(--brand-dark); }

@media (min-width: 40rem) {
  .header-main {
    /* с этой ширины баннер и кнопки языка гарантированно помещаются
       рядом с логотипом Юнитест, поэтому возвращаем двухколоночную сетку */
    grid-template-columns: minmax(0, 1fr) minmax(21rem, 24rem);
    grid-template-areas:
      "brand lang"
      "title search";
    row-gap: .75rem;
  }
  .lang-block { justify-self: end; }
  .site-title { font-size: 1.25rem; }
}

@media (min-width: 64rem) {
  .header-main {
    grid-template-columns: auto minmax(0, 1fr) 22rem;
    grid-template-areas:
      "brand title lang"
      "brand title search";
    column-gap: 2rem;
    row-gap: .6rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .site-title { font-size: 1.75rem; }
}


/* 5. ГЛАВНОЕ МЕНЮ
   На телефоне пункты переносятся на несколько строк, ничего не скрыто.
   -------------------------------------------------------------------------- */
.site-nav { background: var(--brand); }

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav li { flex: 1 1 auto; margin: 0; }   /* на телефоне пункты делят строку поровну */

.site-nav a,
.site-nav a:visited {
  display: block;
  padding: .6rem .5rem;
  color: var(--on-brand);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
}
.site-nav a:hover { background: var(--brand-dark); color: var(--on-brand); }
.site-nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--on-brand); }
.site-nav a:focus-visible {
  outline-color: var(--on-brand);
  outline-offset: -3px;
}

@media (min-width: 64rem) {
  .site-nav li { flex: none; }
  .site-nav a,
  .site-nav a:visited {
    padding: .8rem 1.1rem;
    font-size: 1rem;
    text-align: left;
  }
}


/* 6. КАРКАС СТРАНИЦЫ
   Телефон и планшет: всё в одну колонку (сначала текст, потом боковые блоки).
   Компьютер: текст слева, боковая колонка справа.
   -------------------------------------------------------------------------- */
.page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  padding-top: 1rem;
  padding-bottom: 2.5rem;
}

.crumbs {
  font-size: .9rem;
  color: var(--ink-soft);
}
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: .1rem .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.crumbs li { margin: 0; }
.crumbs li:not(:last-child)::after {
  content: "\203A";           /* › */
  margin-left: .5rem;
}

.content { min-width: 0; overflow-wrap: break-word; }
.sidebar { min-width: 0; }

@media (min-width: 64rem) {
  .page {
    grid-template-columns: minmax(0, 1fr) var(--aside);
    column-gap: 2rem;
    row-gap: .75rem;
  }
  .crumbs  { grid-column: 1 / -1; }
  .content { grid-column: 1; }
  .sidebar { grid-column: 2; }
}


/* 7. СОДЕРЖИМОЕ СТРАНИЦЫ
   -------------------------------------------------------------------------- */
.content h1 {
  margin-top: 0;
  color: var(--brand);
  font-size: clamp(1.55rem, 1.2rem + 1.5vw, 2.0rem);
}
.content h2 {
  padding-bottom: .3rem;
  border-bottom: 1px solid var(--rule);
  color: var(--brand);
  font-size: 1.4rem;
}
.content h3 { font-size: 1.15rem; }
.content h2.offers-title { color: var(--accent); }

/* Вводный блок: картинка справа, текст обтекает её.
   .intro «охватывает» картинку, чтобы следующий заголовок не полез рядом. */
.intro { display: flow-root; margin-bottom: 1rem; }

.figure-right {
  margin: 0 0 1rem;
  max-width: 100%;
  text-align: center;
}
.figure-right img { display: block; margin: 0 auto; }
.figure-right figcaption {
  margin-top: .35rem;
  color: var(--ink-soft);
  font-size: .85rem;
}

@media (min-width: 40rem) {
  .figure-right {
    float: right;
    max-width: 40%;
    margin: .25rem 0 1rem 1.5rem;
  }
}

/* Список в несколько колонок на широких экранах (сам подберёт 1 или 2) */
.cols {
  columns: 24rem 2;
  column-gap: 2.5rem;
}
.cols > li { break-inside: avoid; }

/* Список документов (pdf и т. п.) */
.docs {
  margin: 1rem 0 1.5rem;
  padding: .85rem 1rem;
  border: 1px solid var(--rule);
  background: var(--panel);
  list-style: none;
}
.docs li { margin: 0; }
.docs li + li { margin-top: .4rem; }
.docs img { margin-left: .35rem; vertical-align: middle; }

/* Таблица характеристик. Оборачивайте в .table-scroll,
   чтобы на телефоне широкая таблица прокручивалась, а не ломала страницу. */
.table-scroll {
  margin: 0 0 1.5rem;
  overflow-x: auto;
}
.specs {
  width: 100%;
  border-collapse: collapse;
}
.specs caption {
  padding-bottom: .5rem;
  font-weight: 700;
  text-align: left;
}
.specs th,
.specs td {
  padding: .55rem .8rem;
  border: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}
.specs th { background: var(--panel); font-weight: 600; }
.specs tbody tr:nth-child(even) td { background: var(--panel-alt); }

/* Мелкий шрифт: условия, примечания */
.fineprint {
  margin: 1.5rem 0 1rem;
  padding-top: .75rem;
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
  font-size: .9rem;
}
.fineprint p { margin: 0 0 .25rem; }

/* Рекламный баннер */
.ad { margin: 1.5rem 0 0; text-align: center; }
.ad a { display: inline-block; line-height: 0; }


/* 8. КАРТОЧКИ КАТАЛОГА
   Миниатюра + название, вся карточка — одна ссылка.
   Сетка сама выбирает число колонок: 1 на телефоне, 2 на планшете,
   до 2–3 на широком мониторе. Карточка без картинки — просто текст.
   -------------------------------------------------------------------------- */
.cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .75rem;
  margin: 1rem 0 1.5rem;
  padding: 0;
  list-style: none;
}
@media (min-width: 40rem) {
  .cards { grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr)); }
}
.cards li { display: flex; margin: 0; }

.cards a,
.cards a:visited {
  display: grid;
  grid-template-columns: var(--thumb) minmax(0, 1fr);
  align-items: center;
  gap: .75rem;
  flex: 1;
  padding: .6rem .75rem;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
}
.cards a:hover {
  border-color: var(--brand);
  background: var(--panel-alt);
  color: var(--ink);
}
.cards a:not(:has(img)) { grid-template-columns: minmax(0, 1fr); }
.cards .text { min-width: 0; }

.cards img {
  justify-self: center;
  max-width: 100%;
  max-height: 5.5rem;
  width: auto;
  height: auto;
}

.cards .title { color: var(--link); font-weight: 600; }
.cards a:visited .title { color: var(--link-visited); }
.cards a:hover .title { text-decoration: underline; }
.cards strong { color: var(--accent); white-space: nowrap; }


/* 9. БОКОВАЯ КОЛОНКА
   Планшет: блоки раскладываются в 2 колонки, телефон: в одну.
   Компьютер: одна колонка справа от текста.
   -------------------------------------------------------------------------- */
.sidebar {
  columns: 18rem;
  column-gap: 1rem;
}

.box {
  break-inside: avoid;
  margin: 0 0 1rem;
  border: 1px solid var(--rule);
  background: var(--paper);
}
.box > h2 {
  margin: 0;
  padding: .6rem .85rem;
  border-bottom: 1px solid var(--rule);
  background: var(--panel);
  color: var(--brand);
  font-size: 1rem;
  line-height: 1.3;
}
.box > h2 a,
.box > h2 a:visited { color: var(--brand); }
.box > p { margin: 0; padding: .75rem .85rem; }
.box:target { outline: 3px solid var(--brand); outline-offset: 2px; }

/* Блок «не нашли нужный прибор» */
.box-alert { border-top: 3px solid var(--accent); background: var(--panel); }

/* Список ссылок в боковом блоке */
.links {
  margin: 0;
  padding: 0;
  list-style: none;
}
.links li { margin: 0; }
.links a {
  display: block;
  padding: .5rem .85rem;
  text-decoration: none;
}
.links li + li a { border-top: 1px solid var(--panel); }
.links a:hover { background: var(--panel-alt); text-decoration: underline; }

/* Производители: на телефоне и планшете — плитки, на компьютере — список */
.mfr {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0;
  padding: .75rem .85rem;
  list-style: none;
}
.mfr li { margin: 0; }
.mfr a {
  display: block;
  padding: .35rem .65rem;
  border: 1px solid var(--rule);
  background: var(--panel-alt);
  font-size: .9rem;
  line-height: 1.3;
  text-decoration: none;
}
.mfr a:hover { border-color: var(--brand); background: var(--paper); }

@media (min-width: 64rem) {
  .sidebar { columns: auto; }

  .mfr { display: block; padding: 0; }
  .mfr a {
    padding: .45rem .85rem;
    border: 0;
    background: transparent;
    font-size: .95rem;
  }
  .mfr li + li a { border-top: 1px solid var(--panel); }
  .mfr a:hover { background: var(--panel-alt); text-decoration: underline; }
}


/* 10. ПОДВАЛ
   -------------------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--rule);
  background: var(--panel);
  font-size: .9rem;
}
.site-footer .wrap { padding-top: 1rem; padding-bottom: 1.25rem; }
.site-footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1.5rem;
  margin: 0 0 .6rem;
  padding: 0;
  list-style: none;
}
.site-footer li { margin: 0; }
.site-footer p { margin: 0; color: var(--ink-soft); }


/* 11. ПЕЧАТЬ: только содержимое страницы
   -------------------------------------------------------------------------- */
@media print {
  .skip-link,
  .notice,
  .lang,
  .search,
  .site-nav,
  .crumbs,
  .sidebar,
  .ad,
  .site-footer ul { display: none !important; }

  body { font-size: 11pt; }
  .page { display: block; padding: 0; }
  .cols { columns: auto; }
}

/* 12. ДОПОЛНЕНИЯ
   -------------------------------------------------------------------------- */
.box1 { margin: 1.5rem 0 .6rem; line-height: 1.25; }
.box1 {
  padding-bottom: .3rem;
  border-bottom: 1px solid var(--rule);
  color: var(--brand);
  font-size: 1.4rem;
}

.tabl {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
}
.tabl caption {
  padding-bottom: .5rem;
  font-weight: 700;
  text-align: left;
}
.tabl th,
.tabl td {
  padding: .55rem .8rem;
  border: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}
.tabl th { background: var(--panel); font-weight: 600; }
.tabl tbody tr:nth-child(even) td { background: var(--panel-alt); }

.brd {padding: 8px 8px 2.25rem 8px; font-size: 1.0rem;}

.map {
  font-size: 1.0rem;
  color: var(--link);
}

@media (min-width: 64rem) {

  .map  { grid-column: 1 / -1; }