/* Доступность и тач-эргономика. Только аддитивные правила: визуальная композиция не меняется.
   Файл подключается последним, поэтому переопределяет бандл и остальные оверлеи. */

:root {
  color-scheme: light;
}

/* --- Пропорции картинок -------------------------------------------------
   В разметке проставлены width/height, чтобы браузер резервировал место и не
   дёргал вёрстку. Но там, где высоту не задаёт CSS, атрибут начинает задавать
   её сам и ломает пропорцию. height:auto возвращает расчёт по соотношению.
   Специфичность `img` минимальна: правила с id и классами не затрагиваются. */

img {
  height: auto;
}

/* --- Штрихкоды ----------------------------------------------------------
   Размер им задают контейнеры (#barcode1, .barcode_prod и т.д.). Атрибут
   width="307" на самой картинке перебивал контейнер, и полосы вылезали:
   на десктопе на 137 px за карточку. Ширину снова определяет контейнер,
   атрибуты продолжают давать только пропорцию. */

#barcode1 img,
#barcodelat img,
#barcodeswiper img,
.barcode_prod img {
  width: 100%;
}

/* --- Номер продукта на карточке -----------------------------------------
   Высота бокса и интерлиньяж (.7) связаны с прокруткой цифры, менять их нельзя.
   При таком интерлиньяже верхушки цифр выходят за строку и срезаются
   `overflow:hidden`; отступ сверху опускает содержимое внутри бокса.

   Только десктоп: там бокс 2vw и прокрутка на 3vw. На мобильном бокс 6vw,
   прокрутка 4.5vw, и тот же отступ вдвигал в окно край следующего номера. */

@media screen and (min-width: 1025px) {
  /* Высота 2vw рассчитана под метрики системного шрифта; у подключённой
     Helvetica Neue Cyr строка выше — 46 px против бокса в 29, и низ цифр
     срезался. Прокрутка номера на десктопе горизонтальная (.numeroin идёт
     в ряд), поэтому обрезка по высоте не нужна: высоту отдаём содержимому,
     а overflow:hidden и ширина 5vw продолжают прятать второй номер. */
  .numero {
    height: auto;
    line-height: 1.2;
    padding-top: 0;
  }

  /* У этикеток z-index -1, из-за чего четвёртая уходила под заголовок
     «ВОПРОСЫ РАЗБИРАЕМ ПО ХОДУ РАБОТЫ». */
  .etiqueta.cuatro {
    z-index: 1;
  }
}

/* --- Круг «Посмотреть систему» -------------------------------------------
   В бандле круг 4vw, и подпись в две строки упиралась в контур. */

#aceptar div {
  width: 9vw;
  height: 9vw;
}

/* --- Пропуск навигации ------------------------------------------------- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100000;
  background: #000;
  color: #fff;
  padding: 12px 18px;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-decoration: none;
}

.skip-link:focus {
  left: 8px;
  top: 8px;
}

/* --- Видимый фокус ------------------------------------------------------ */

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid #000;
  outline-offset: 3px;
  border-radius: 2px;
}

#final2 button:focus-visible {
  outline-color: #fff;
  outline-offset: -6px;
}

/* --- Тач-поведение ------------------------------------------------------ */

a,
button,
[role="button"] {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

[role="button"] {
  cursor: pointer;
}

/* --- Расширение зон нажатия --------------------------------------------
   Псевдоэлемент добавляет 44 px площади, не сдвигая ни одного пикселя макета. */

/* Только те, кто в бандле статичен. #backtop там position:absolute —
   трогать его позиционирование нельзя, для ::after absolute годится не хуже relative. */
#worksmov,
#copymail,
#links ul li a {
  position: relative;
}

#worksmov::after,
#copymail::after,
#backtop::after,
#links ul li a::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  min-width: 44px;
  min-height: 44px;
  width: 100%;
  height: 100%;
}

/* --- Финальный CTA ------------------------------------------------------
   <a> внутри <button> заменён на <span>; повторяем цвета, которые бандл вешал на <a>. */

#final2 button span {
  color: var(--color);
}

#final2 button:hover span {
  color: #dbdad9;
}

@media screen and (max-width: 1024px) and (orientation: portrait) {
  #final2 button:hover span,
  #final2 button:active span {
    color: #000;
  }
}

/* --- Цифры в таблицах состава ------------------------------------------- */

.table table {
  font-variant-numeric: tabular-nums;
}

/* --- Безопасные зоны под вырез и домашний индикатор --------------------- */

@media screen and (max-width: 1024px) and (orientation: portrait) {
  #movbar {
    margin-top: calc(1.5vw + env(safe-area-inset-top));
  }

  #final2 button {
    bottom: calc(12vw + env(safe-area-inset-bottom));
  }

  #backtop {
    top: calc(22vw + env(safe-area-inset-top));
  }
}

/* --- Уважение к prefers-reduced-motion ---------------------------------
   3D-сцена остаётся: гасим только бегущие строки, посимвольный вывод и переходы. */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}