/* ==========================================================================
   atv-ui.css — волна 1 дизайн-правок armadatv.ru (11.10.2026)
   Подключать ПОСЛЕДНИМ в <head> (после /css/styles.css): переопределения берут порядком
   подключения при той же специфичности. styles.css / styles.less / styles.joint.less не трогаем
   и не пересобираем (пересборка LESS теряет @font-face Roboto Condensed — visual-system.md Н3).
   Источник задач: design/audit-2026-10-08/PLAN.md (W1-03…W1-07, W1-09…W1-11, W1-13 CSS),
   BACKLOG U-01…U-07, SP-01, R-10. Отчёт и контраст до/после: rollout/wave1-css.md.
   ========================================================================== */

/* --- 0. Токены (палитра visual-system.md §4; значения совпадают с «Ведомостью», кроме --atv-mut) --- */
:root {
  --atv-paper: #fcfcfc;
  --atv-card: #ffffff;
  --atv-soft: #f1f4f1;
  --atv-line: #dbe1dc;
  --atv-ink: #16211d;        /* 16,1:1 на paper */
  --atv-mut: #5e6b64;        /* 5,44 на paper, 5,04 на soft (было #6b7a72 — 4,40) */
  --atv-deep: #033227;       /* белый на нём 14,1 */
  --atv-abyss: #03211d;      /* футер, hover/active deep-кнопок; на шалфее 8,46 */
  --atv-led: #01d04d;        /* только линия или заливка под тёмным текстом (abyss 8,18; deep 6,80) */
  --atv-amber: #ea8b1a;      /* только линия или заливка под --atv-ink (6,46) */
  --atv-amber-text: #9c5700; /* янтарный как текст: 5,42 на paper */
  --atv-sage: #9bc19a;       /* мобильная шапка: под ней только тёмное */
  --atv-grey-text: #6e6e6e;  /* мелкий серый вместо #888: 5,10 на #fff, 4,80 на #f8f8f8 */
  --atv-slider: #007a33;     /* бегунки ползунка цены: белый на нём 5,48 */
  --atv-focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px var(--atv-abyss);
  --atv-tap: 44px;           /* тач-зона на ≤767 */
  --atv-fs-input: 16px;      /* поля на ≤991 — без автозума iOS */
  --atv-t: 150ms;            /* длительность состояний кнопок */
}
/* «Ведомость» объявляет свои токены на .atv — перекрываем только вторичный серый (U-04, A11 S5) */
.atv { --atv-mut: #5e6b64; }
.atv-tag { color: var(--atv-amber-text); }               /* было #ea8b1a, 2,49 → 5,42; линия врезки остаётся янтарной */

/* --- 1. U-01 / W1-03. Мобильный подвал: тёмный, как на десктопе (#e2e2f0 на #03211D = 13,2:1) --- */
@media (max-width: 767px) {
  #footer-main { background-color: var(--atv-abyss); }
}

/* --- 2. U-02 / W1-04. Иконки шапки ≥ 3:1 (1.4.11) --- */
/* 1440: пассивные «сравнение/корзина» были #e2e2f0 на #fcfcfc (1,25). Серый --atv-mut (5,44) сохраняет
   различие «пусто / есть товар»: активная иконка остаётся --atv-deep (14,1). */
.header-main .icons .icons-link { color: var(--atv-mut); }
.header-main .icons .icons-link-active { color: var(--atv-deep); }
.header-main .icons .icons-link:hover,
.header-main .icons .icons-link-active:hover { color: var(--atv-abyss); }   /* было #01D04D, 2,0 */
/* счётчик: тёмный текст на ярком зелёном (8,18) вместо белого (2,07) */
.header-main .icons .icons-link-active .icons-link-count { color: var(--atv-abyss); font-weight: 700; }

@media (max-width: 767px) {
  /* шалфей остаётся (облик шапки — решение владельца, W3-10); иконки — abyss, 8,46:1 вместо 1,95 */
  .header-main .icons .icons-link,
  .header-main .icons .icons-link-active,
  .header-main .icons-mobile > span { color: var(--atv-abyss); }

  /* U-06 / W1-09: тач-зоны 44×44 (было 16×29 и 16×30) */
  .header-main .icons .icons-link,
  .header-main .icons-mobile > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--atv-tap);
    min-height: var(--atv-tap);
    margin-left: 2px;
    margin-right: 2px;
    touch-action: manipulation;
  }
  .header-main { padding-top: 3px; padding-bottom: 3px; }              /* зоны 44 px не увеличивают высоту шапки (было 10+30+10) */
  .header-main .icons-mobile > span:last-child { margin-right: -7px; } /* компенсирует поле зоны: бургер стоит там же, где был */
  .header-main .icons .icons-link-active .icons-link-count { top: 3px; right: 0; }
}
@media (max-width: 359px) {
  .header-main .icons .icons-link,
  .header-main .icons-mobile > span { min-width: 40px; margin-left: 0; margin-right: 0; }
}

/* --- 3. U-03 / W1-05. Кнопки: без белого на оранжевом, фокус ≠ hover, видимое кольцо --- */
.button, .button-buy, .button-buy-fast, .button-comparison {
  touch-action: manipulation;
  -webkit-transition: color var(--atv-t), background-color var(--atv-t), box-shadow var(--atv-t), -webkit-transform var(--atv-t);
  transition: color var(--atv-t), background-color var(--atv-t), box-shadow var(--atv-t), transform var(--atv-t);
}
/* 3.1 На всех устройствах :hover/:focus держат цвет покоя (тема красит их в #ff9900, на таче hover «залипает»).
   Специфичность (0,2,0) = у темы `.button:hover`, побеждаем порядком подключения. */
.button-details:hover, .button-details:focus,
.button-action:hover, .button-action:focus,
.button-buy:hover, .button-buy:focus { background-color: var(--atv-deep); color: #fff; }
.button-bright { color: var(--atv-abyss); }                                     /* «Отправить заказ»: белый на #01D04D 2,07 → 8,18 */
.button-bright:hover, .button-bright:focus { background-color: var(--atv-led); color: var(--atv-abyss); }
.button-cancel, .button-cancel:hover, .button-cancel:focus { background-color: var(--atv-grey-text); color: #fff; } /* было #888, 3,54 */
.button-comparison:hover { background-color: #f8f8f8; color: var(--atv-mut); }

/* 3.2 U-04 / W1-06. «Купить в один клик»: тёмный текст на ярком зелёном (6,80), обычный регистр начала */
.button-buy-fast,
.button-buy-fast:hover,
.button-buy-fast:focus { background-color: var(--atv-led); color: var(--atv-deep); text-transform: none; }
.button-buy-fast::first-letter { text-transform: uppercase; }

/* 3.3 Hover — только у мыши: тёмнее, а не оранжевый */
@media (hover: hover) and (pointer: fine) {
  .button-details:hover, .button-action:hover, .button-buy:hover,
  .button-comparison:hover { background-color: var(--atv-abyss); color: #fff; }
  .button-bright:hover, .button-buy-fast:hover { background-color: var(--atv-deep); color: #fff; } /* 14,1 */
  .button-cancel:hover { background-color: #515151; }
  .item-main .button-comparison:hover { background-color: var(--atv-soft); color: var(--atv-deep); }
}
/* 3.4 Нажатие — на всех устройствах */
.button-details:active, .button-action:active, .button-buy:active, .button-comparison:active {
  background-color: var(--atv-abyss); color: #fff;
}
.button-bright:active, .button-buy-fast:active { background-color: var(--atv-deep); color: #fff; }
.button:active, .button-buy:active, .button-buy-fast:active, .button-comparison:active { -webkit-transform: scale(.97); transform: scale(.97); }
@media (prefers-reduced-motion: reduce) {
  .button:active, .button-buy:active, .button-buy-fast:active, .button-comparison:active { -webkit-transform: none; transform: none; }
}

/* 3.5 Видимый :focus-visible. Кнопки — двойное кольцо (белое 2 px + abyss 4 px) читается и на светлом, и на тёмном;
   прозрачный outline оставлен для режима высокой контрастности Windows. */
button:focus-visible,
[role="button"]:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible,
.button:focus-visible, .button-buy:focus-visible, .button-buy-fast:focus-visible, .button-comparison:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: var(--atv-focus-ring);
}
/* ссылки: кольцо цветом текста — на тёмном подвале светлое, в тексте бирюзовое (5,21) */
a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
/* поля: тема снимает индикатор (`input:focus-visible{outline:0}`), возвращаем кольцо */
input:focus-visible, select:focus-visible, textarea:focus-visible { box-shadow: var(--atv-focus-ring); }
.header-main .search .input-group input:focus-visible { box-shadow: var(--atv-focus-ring); }

/* 3.6 Карусели: у стрелок главной было outline:none (A11 S4). Специфичность (0,5,0) = как у темы, берём порядком. */
.carousel-main .owl-theme .owl-nav .owl-prev:focus-visible,
.carousel-main .owl-theme .owl-nav .owl-next:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: -6px;
  box-shadow: inset 0 0 0 6px var(--atv-abyss);
}
.owl-carousel .owl-nav button.owl-prev:focus-visible,
.owl-carousel .owl-nav button.owl-next:focus-visible,
.owl-carousel button.owl-dot:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--atv-focus-ring);
}
/* слайд-ссылка во весь баннер: кольцо внутрь, видно на любом фоне */
.carousel-main .carousel-item a:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: -6px;
  box-shadow: inset 0 0 0 6px var(--atv-abyss);
}

/* --- 4. U-04 / W1-06. Яркий зелёный и янтарный — под тёмным текстом; мелкий серый темнее --- */
.item-mark-hit { color: var(--atv-ink); }                                       /* белый на #ea8b1a 2,56 → 6,46 */
a.h-special.h-hit, a.h-special.h-hit:hover, a.h-special.h-hit:focus { color: var(--atv-ink); }
.item-price-discount-value { color: var(--atv-deep); }                          /* белый на #01D04D 2,07 → 6,80 */
/* старая цена: #888 3,54 → #6e6e6e 5,10 (селекторы — все варианты плитки и карточки из styles.css) */
.item-price .item-price-old,
.item-card .item-details .item-price .item-price-old,
.item-card-table .item-card .item-details .item-price .item-price-old,
.item-card-small .item-details .item-price .item-price-old,
.item-card-list .item-card .item-details .item-price .item-price-old,
.item-main .item-price .item-price-old { color: var(--atv-grey-text); }
/* сортировка: #888 на #f8f8f8 3,34 → 4,80; «Сортировать по» на #fcfcfc 3,45 → 4,96; тач-шаг по горизонтали (A11 S9) */
.section-sort { color: var(--atv-grey-text); }
.section-sort a { color: var(--atv-grey-text); }
.section-sort .switch-sort a { padding: 4px 6px; }
.catalog-links__counter { background-color: var(--atv-grey-text); }            /* белый на #888 3,54 → 5,10 */
.section-filters .filter-param .filter-param-name span { color: var(--atv-grey-text); } /* счётчики #999 2,85 */
/* ползунок цены (ion.rangeSlider skinModern): подписи белым на #20b426 2,76 → #007A33 5,48; шкала #c0c0c0 1,82 → 5,10 */
.irs-from, .irs-to, .irs-single { background: var(--atv-slider); }
.irs-from:after, .irs-to:after, .irs-single:after { border-top-color: var(--atv-slider); }
.irs-grid-text { color: var(--atv-grey-text); }

/* --- 5. U-05 / W1-07. Поля ≥ 16 px на ≤991 (iOS зумит при фокусе на <16) --- */
@media (max-width: 991px) {
  .header-main #query,
  #sort_xs,
  input.form-control, select.form-control, textarea.form-control,
  .basket-list .basket-item .basket-count-value,
  .section-filters input.filter-int,
  #modal input, #modal select, #modal textarea { font-size: var(--atv-fs-input); }
}

/* --- 6. U-06 / W1-09. Тач-зоны на ≤767 --- */
@media (max-width: 767px) {
  /* «В корзину» в плитке: 35×35 → 44×44 */
  .item-buttons .button-buy { height: var(--atv-tap); min-width: var(--atv-tap); padding-top: 0; padding-bottom: 0; }
  .item-buttons .button-buy .glyphicon { width: var(--atv-tap); top: 0; line-height: var(--atv-tap); }
  /* корзина: ± и поле количества 44 px */
  .basket-list .basket-item .basket-count-change { width: var(--atv-tap); min-width: var(--atv-tap); height: var(--atv-tap); touch-action: manipulation; }
  .basket-list .basket-item .basket-count-value { height: var(--atv-tap); }
  .item-count-change { min-width: var(--atv-tap); min-height: var(--atv-tap); }
  /* «Показать ещё» */
  .items-load { min-height: var(--atv-tap); }
  /* подвал: шаг ссылок 23,6 → 34 px */
  #footer-main .menu ul li { margin: 0; }
  #footer-main .menu ul li a { padding: 10px 0; }
  /* точки главной карусели были 0×0 */
}
/* точки главной карусели: зона 44×44 поверх низа баннера (без своей высоты — без сдвига вёрстки),
   видимая точка 10 px: белая с тёмным кольцом / тёмная с белым — читается на любом баннере */
.carousel-main .owl-dots {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 41;
  display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center;
  pointer-events: none;
}
.carousel-main .owl-dots.disabled { display: none; }
.carousel-main .owl-carousel button.owl-dot {
  pointer-events: auto;
  display: -webkit-inline-box; display: inline-flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center;
  width: var(--atv-tap); height: var(--atv-tap);
  touch-action: manipulation;
}
.carousel-main .owl-dot span {
  display: block; width: 10px; height: 10px; border-radius: 50%;
  background: #ffffff; box-shadow: 0 0 0 2px var(--atv-abyss);
}
.carousel-main .owl-dot.active span { background: var(--atv-abyss); box-shadow: 0 0 0 2px #ffffff; }

/* --- 7. U-07 / W1-11. Чекбоксы фильтра: визуально скрыты, но в порядке Tab и в дереве доступности.
   Тема: `visibility:hidden` (styles.less:2627) выкидывает их из Tab. Специфичность (0,4,1) = как у темы. --- */
.section-filters .filter-param .checkbox input[type=checkbox] {
  visibility: visible;
  position: absolute;
  top: 0; left: 0;
  width: 18px; height: 18px;
  margin: 0; padding: 0;
  opacity: 0;            /* рисованный квадрат-span лежит поверх и принимает клик; label переключает input */
}
.section-filters .filter-param .checkbox input[type=checkbox]:focus-visible + span {
  outline: 2px solid var(--atv-deep);
  outline-offset: 3px;
}
.section-filters .filter-param label:has(input[type=checkbox]:focus-visible) {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* --- 8. SP-01 / W1-13 (CSS). CLS главной: до инициализации owl показывать первый слайд.
   owl.carousel.min.css прячет .owl-carousel{display:none} до .owl-loaded — блок раскрывался на 390–432 px
   после ready (на телефоне через 11 с). Высоту первого слайда задают правила темы .carousel-item
   (1/1 на <576, 140/200/250/300 px по брейкпойнтам) — ту же, что после инициализации. Autoplay — JS, не здесь. --- */
#carousel_main:not(.owl-loaded) { display: block; }
#carousel_main:not(.owl-loaded) > .carousel-item ~ .carousel-item { display: none; }

/* --- 9. R-10 / W1-10. Карточка на ≤767: иконки характеристик — строкой под фото, а не колонкой поверх цены;
   цена и доставка — одной строкой, «В корзину» выше. --- */
@media (max-width: 767px) {
  .item-main .item-images { margin-bottom: 12px; }
  .item-main .item-specials {
    position: static;
    right: auto; top: auto;
    display: -webkit-box; display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 10px 0 0;
    padding: 0;
  }
  .item-main .item-specials::-webkit-scrollbar { display: none; }
  .item-main .item-specials div { -webkit-box-flex: 0; flex: 0 0 40px; width: 40px; margin: 0; }
  .item-main .item-specials div img { border-radius: 8px; }

  .item-main .item-buy [itemprop="offers"] {
    display: -webkit-box; display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    -webkit-column-gap: 12px; column-gap: 12px;
  }
  .item-main .item-buy [itemprop="offers"] > * { flex: 1 1 100%; order: 3; }
  .item-main .item-buy [itemprop="offers"] > .item-price { flex: 0 1 auto; order: 1; text-align: left; }
  .item-main .item-buy [itemprop="offers"] > .item-delivery-block {
    flex: 0 1 auto; order: 2;
    flex-direction: column; align-items: flex-end; gap: 6px;
  }
  .item-main .item-buy [itemprop="offers"] > .button-buy,
  .item-main .item-buy [itemprop="offers"] > .button-buy-fast { order: 4; float: none; }
  .item-main .item-delivery { margin-top: 0; font-size: 12px; }
  .item-main .item-delivery:last-child { padding-left: 0; }
  .item-main .item-delivery .item-delivery-name { padding-right: 8px; }
  .item-main .item-delivery .item-delivery-price { padding: 2px 6px; }
  .item-main .item-price-prepay, .item-main .item-price-available { margin: 8px 0 0; }
  /* основная кнопка 48 px (было 35), «в один клик» 44 */
  .item-main .button-buy { height: 48px; margin: 12px 0 0; }
  .item-main .button-buy-fast { min-height: var(--atv-tap); margin: 8px 0 0; }
}
@media (min-width: 451px) and (max-width: 767px) {
  .item-main .item-buy [itemprop="offers"] > .button-buy,
  .item-main .item-buy [itemprop="offers"] > .button-buy-fast { flex: 1 1 calc(50% - 6px); width: auto; margin-top: 12px; height: 48px; }
}