/* Вставляется в Tilda: Настройки сайта → Ещё → «Пользовательские CSS-стили» → «Редактировать CSS» */
/* Место под полосу прокрутки резервируется всегда: иначе на коротких страницах без прокрутки шапка и контент сдвигаются на половину её ширины */
html {
  scrollbar-gutter: stable;
}
/* Tilda включает тонкое сглаживание шрифтов; возвращаем обычное, как в макете и в браузере по умолчанию */
body, .t-records, .t-menu-base, .t-menu-base *, .t-btn, .t-btnflex {
  -webkit-font-smoothing: auto !important;
  -moz-osx-font-smoothing: auto !important;
}
/* Шапка (ME100): подчёркивание активного пункта отодвинуто от текста, как в макете */
.t-menu__link-item.t-active::after {
  bottom: -12px !important;
}
/* Подвал (Zero Block на /footer): ссылки белые без подчёркивания, при наведении подчёркиваются. В Zero Block подчёркивания при наведении нет, поэтому группе-карточке подвала задан CSS-класс ocs-footer */
.ocs-footer a:hover {
  text-decoration: underline !important;
}
/* Плашка о куки (блок T972 на /footer, выводится на всех страницах): карточка шириной 400 в правом нижнем углу, отступ от краёв экрана 24. Tilda набирает текст 12px — делаем 16/1.5, как описания на сайте, поля карточки 32, кнопка у правого края. На 640 и уже Tilda прижимает плашку к краям экрана — оставляем поля 20, как у подвала, поля карточки 24 */
#allrecords .t972 {
  right: 24px !important;
  bottom: 24px !important;
}
#allrecords .t972 .t972__banner {
  max-width: 400px;
  padding: 32px;
}
#allrecords .t972 .t972__text {
  font-size: 16px;
  line-height: 1.5;
}
#allrecords .t972 .t972__buttons {
  justify-content: flex-end;
  margin-top: 24px;
}
@media screen and (max-width: 640px) {
  #allrecords .t-rec .t972:not(.t972_widgetview) {
    left: 20px !important;
    right: 20px !important;
    bottom: 20px !important;
  }
  #allrecords .t972 .t972__banner {
    max-width: none;
    padding: 24px;
  }
}
/* Сетка карточек в Zero Block: карточки в одной строке одной высоты. В автолейауте Tilda нет выравнивания «растянуть», поэтому группе с переносом задаём CSS-класс ocs-cards (ПКМ по группе → «Добавить имя CSS-класса») и растягиваем здесь */
.ocs-cards > .tn-molecule {
  align-items: stretch !important;
}
/* Кнопка внизу плашки: в карточках ряда ocs-cards плашки растянуты по высоте самой высокой, и кнопка с классом ocs-push прижимается к низу, чтобы кнопки соседних плашек стояли на одной линии */
.ocs-push {
  margin-top: auto !important;
}
/* Фото рядом с сеткой плашек (группа-строка с классом ocs-cards) тянется по её высоте: фигуре задан класс ocs-cover. Только от 1200: на узких ширинах фото стоит над плашками, и высота берётся из Zero Block */
@media screen and (min-width: 1200px) {
  .ocs-cover {
    height: auto !important;
  }
}
/* Каталог (ST340A): блок выводится старым шаблоном карточек, и настройки «С фоном и отступами» / «Отступ внутри изображения» на него не действуют, поэтому отступы карточки (20px, на телефоне 16px) и логотипа (8px) задаём здесь; логотип вписан целиком, а не обрезан по квадрату */
.t1291 .t-catalog__card {
  box-sizing: border-box;
  padding: 20px;
}
@media screen and (max-width: 639px) {
  .t1291 .t-catalog__card {
    padding: 16px;
  }
}
.t-catalog__card__bgimg {
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-origin: content-box !important;
  background-clip: content-box !important;
  box-sizing: border-box;
  padding: 8px;
}
/* Каталог: в «плиточном» варианте карточки Tilda добавляет свой внутренний отступ 30px (.t-catalog__card__contentwrapper) поверх нашего: обнуляем, чтобы поля были 20px в любом варианте */
.t1291 .t-catalog__card .t-catalog__card__contentwrapper {
  padding: 0 !important;
}
/* Каталог: активный раздел на боковой панели — оранжевая полоса у левого края панели (поля панели 24px) */
.t-catalog__parts-sidebar-button.t-catalog__parts-current {
  position: relative;
  font-weight: 600;
}
.t-catalog__parts-sidebar-button.t-catalog__parts-current::before {
  content: "";
  position: absolute;
  left: -24px;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: #ff4b41;
}
/* Страница стенда: картинки галереи вписаны целиком на «Подложке»; первый слайд (логотип) и его копия в конце ленты — на белом, вписаны целиком в центральную половину слайда по ширине и высоте, чтобы не растягивались во весь размер и квадратные логотипы не обрезались. Поля 14.0625% сверху и снизу и 25% по бокам плюс область 16:9 внутри дают ту же высоту слайда 16:9 (56.25%), что у остальных */
.t-catalog__prod-popup__slider .t-slds__bgimg {
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-color: #eaf1f9;
}
.t-catalog__prod-popup__slider .t-slds__item[data-slide-index="1"] .t-slds__bgimg,
.t-catalog__prod-popup__slider .t-slds__item:last-child .t-slds__bgimg {
  background-color: #ffffff;
  background-size: contain !important;
  background-origin: content-box !important;
  padding: 14.0625% 25% !important;
  aspect-ratio: 16 / 9;
}
/* скругление 16px и рамка поверх галереи: рамка внутри слайда обрезалась скруглением, а внешняя тень — родителем с overflow: hidden, поэтому рамка рисуется накладкой */
.t-catalog__prod-popup__slider .t-slds__main {
  position: relative;
  border-radius: 16px !important;
}
.t-catalog__prod-popup__slider .t-slds__main::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 1px solid #c5cdd5;
  border-radius: 16px;
  pointer-events: none;
  z-index: 10;
}
/* Каталог (ST340A): режим «12 колонок» даёт контейнер 1200px с полями 20px, то есть 1160px контента; у шапки и первых экранов Zero Block сетка 1080px. Сужаем контейнер до 1120px (1080 + поля 20px), чтобы левый и правый края совпали */
@media screen and (min-width: 1200px) {
  .t1291 .t-container {
    width: 1120px !important;
    max-width: 1120px !important;
  }
}
/* Отдельная страница стенда (/demo/…, открывается по прямой ссылке): Tilda выводит её в сетке 1200 с колонками фиксированной ширины (галерея и описание по 560, вкладки 1160), и страница шире шапки и подвала (1080). Сужаем контейнер до 1120 (1080 + поля колонок 20), колонки до 520 и вкладки до 1080; уже 1200 контейнер Tilda 960 / 640 за шапку и подвал не выходит. Попап в каталоге устроен иначе и не затрагивается */
@media screen and (min-width: 1200px) {
  .t-catalog__prod-snippet__container .t-container {
    width: 1120px !important;
    max-width: 1120px !important;
  }
  .t-catalog__prod-snippet__container .t-catalog__prod-popup__col-left,
  .t-catalog__prod-snippet__container .t-catalog__prod-popup__col-right {
    width: 520px !important;
    max-width: 520px !important;
  }
  .t-catalog__prod-snippet__container .t-catalog__tabs {
    width: 1080px !important;
    max-width: 1080px !important;
  }
}
/* Каталог: подразделы на боковой панели (Виртуализация и т. п.) — обычным весом, чтобы выделялись только направления и активный раздел */
.t-catalog__parts-sidebar-item.t-catalog__part .t-catalog__parts-sidebar-button:not(.t-catalog__parts-current) .t-catalog__parts-sidebar-title {
  font-weight: 400 !important;
}
/* то же на телефоне и планшете: там подразделы выводятся списком над товарами */
.t-catalog__parts-above-item .t-catalog__parts-text-title {
  font-weight: 400 !important;
}
/* Каталог: выбранное значение фильтра (вендор и т. п.) Tilda делает полупрозрачным, и его плохо видно — выделяем как активный раздел: полужирным, на боковой панели ещё и оранжевой полосой у левого края. В окне фильтров на телефоне и планшете список прокручивается и обрезает полосу за краем, там остаётся полужирный */
.t-catalog__filter__custom-sel.active .t-catalog__filter__title {
  opacity: 1 !important;
  font-weight: 600;
}
.js-sidebar-filters .t-catalog__filter__custom-sel.active {
  position: relative;
}
.js-sidebar-filters .t-catalog__filter__custom-sel.active::before {
  content: "";
  position: absolute;
  left: -24px;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: #ff4b41;
}
/* Каталог: на ширинах до 1199 Tilda делает контейнер каталога жёстко 960px (640px на планшетах), и левый край не совпадает с полями Zero Block (40px от 960, 20px уже) — тянем контейнер на ширину окна; от 960 до 1199 карточки по три в ряд, иначе по две */
@media screen and (max-width: 1199px) {
  .t1291 .t-container {
    width: auto !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}
@media screen and (min-width: 960px) and (max-width: 1199px) {
  .t1291 .t-container {
    margin-left: 20px !important;
    margin-right: 20px !important;
  }
  .t1291 .t-catalog__card-list {
    column-gap: 20px;
  }
  .t1291 .t-catalog__card_in-column {
    width: calc((100% - 40px) / 3) !important;
    max-width: none !important;
    flex: 0 0 auto;
  }
}
/* Каталог на телефоне и планшете: подразделы списком над товарами — каждый пункт на своей строке (иначе «Все» и первый пункт слипаются в одну), выбранный — полужирный с оранжевой линией под текстом */
@media screen and (max-width: 1199px) {
  .t-catalog__parts-above-wrapper-base .t-catalog__parts-above-item {
    flex: 0 0 100%;
  }
  .t-catalog__parts-above-wrapper-base .t-catalog__parts-text-button {
    display: inline-flex;
    padding-bottom: 2px;
    border-bottom: 2px solid transparent;
  }
  .t-catalog__parts-above-wrapper-base .t-catalog__parts-text-button.t-catalog__parts-current {
    opacity: 1 !important;
    border-bottom-color: #ff4b41;
  }
  .t-catalog__parts-above-wrapper-base .t-catalog__parts-current .t-catalog__parts-text-title {
    font-weight: 600 !important;
  }
}
/* Страница стенда: галерея 16:9 вместо квадрата (скриншоты горизонтальные; высота в Tilda задаётся inline и скриптом, поэтому !important) */
.t-catalog__prod-popup__slider .t-slds__bgimg {
  padding-bottom: 56.25% !important;
}
.t-catalog__prod-popup__slider .t-slds__main,
.t-catalog__prod-popup__slider .t-slds__container,
.t-catalog__prod-popup__slider .t-slds__items-wrapper {
  height: auto !important;
}
/* Страница стенда: вкладки — серая линия, у активной оранжевая 2px и полужирный текст */
.t-catalog__tabs__button {
  border-bottom: 1px solid #c5cdd5 !important;
}
.t-catalog__tabs__button_active {
  border-bottom: 2px solid #ff4b41 !important;
}
.t-catalog__tabs__button_active .t-catalog__tabs__button-title {
  font-weight: 600;
}
/* Страница стенда: «Сертификат ФСТЭК: Да» — меткой на «Подложке»; пустые характеристики (габариты, вес) скрыты */
.t-catalog__prod-popup__text .t-typography__characteristics {
  display: inline-block;
  margin: 0;
  padding: 4px 12px;
  border-radius: 999px;
  background: #eaf1f9;
  font-size: 14px;
  line-height: 20px;
}
.t-catalog__prod-popup__text .t-typography__characteristics:empty {
  display: none;
}
/* Страница стенда: у активной вкладки Tilda рисует чёрную линию (::after заголовка) — прячем, активная вкладка подчёркнута границей кнопки */
.t-catalog__tabs__button-title::after {
  display: none !important;
}
/* Страница стенда: кнопка ближе к названию (между ними пустые блоки цены и ссылок) */
.t-catalog__prod-popup__btn-wrapper {
  margin-top: 0 !important;
}
/* Страница стенда на телефоне: основное изображение галереи с полями 20px, как у вкладок и текста */
@media screen and (max-width: 639px) {
  .t-catalog__prod-popup__slider .t-slds__main {
    margin-left: 20px;
    margin-right: 20px;
  }
}
/* Страница стенда (попап) на телефоне — во весь экран: верхняя полоса с кнопкой «назад» белая с тёмной стрелкой (Tilda красит её в чёрный), окно без скругления */
@media screen and (max-width: 639px) {
  .t-popup:has(.t-catalog__prod-popup__container) .t-popup__close {
    background-color: #ffffff !important;
  }
  .t-popup:has(.t-catalog__prod-popup__container) .t-popup__close-icon_arrow path {
    fill: #000000 !important;
  }
  .t-popup:has(.t-catalog__prod-popup__container) .t-popup__container {
    border-radius: 0 !important;
  }
}
/* Просмотр картинок на весь экран (зум Tilda): фон всегда белый — у логотипов с прозрачным фоном Tilda подставляла чёрный, и они выглядели странно */
.t-zoomer__container {
  background: #ffffff !important;
  color: #000000 !important;
}
/* Поиск из шапки (виджет T985): поле и кнопка «Показать ещё» в стиле каталога (скругление 12px, оранжевая рамка), активная страница выдачи оранжевая, миниатюры вписаны целиком и не сжимаются */
.t-search-widget__blockinput {
  border: 1px solid #c5cdd5 !important;
  border-radius: 12px !important;
  overflow: hidden;
}
.t-search-widget__thubmnail {
  position: relative;
  flex: 0 0 72px !important;
  width: 72px !important;
  height: 72px !important;
  border-radius: 12px;
  overflow: hidden;
}
/* рамка миниатюры — накладкой: у широких логотипов картинка закрывала рамку по бокам */
.t-search-widget__thubmnail::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 1px solid #c5cdd5;
  border-radius: 12px;
  pointer-events: none;
}
.t-search-widget__result_product-img {
  border: 0 !important;
  box-sizing: border-box;
  padding: 8px;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-origin: content-box !important;
  background-clip: content-box !important;
  background-color: transparent !important;
}
.t-search-widget__result_product-link {
  align-items: center;
}
.t-search-widget__loadmore-btn {
  background: transparent !important;
  color: #000000 !important;
  border: 1px solid #ff4b41 !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
}
.t-search-widget__pagination-active {
  background: #ff4b41 !important;
  color: #ffffff !important;
}
/* Корзина-заявка (ST100, окно «Ваша заявка»): затемнение 60% и скругление 16px, как у попапа стенда; поля со скруглением 12px и обводкой «Разделитель», при фокусе оранжевая; кнопка «Отправить» — основная контурная оранжевая; количество скрыто (заявка на доступ, а не заказ); миниатюра стенда вписана целиком в рамку */
.t706__cartwin {
  background-color: rgba(0, 0, 0, 0.6) !important;
}
.t706__cartwin-content {
  border-radius: 16px;
}
.t706__cartwin .t-input,
.t706__cartwin .t-input-phonemask__wrap {
  border: 1px solid #c5cdd5 !important;
  border-radius: 12px !important;
  box-sizing: border-box;
}
.t706__cartwin .t-input:focus,
.t706__cartwin .t-input-phonemask__wrap:focus-within {
  border-color: #ff4b41 !important;
  outline: 0;
}
.t706__cartwin .t-input-phonemask__wrap .t-input {
  border: 0 !important;
}
/* у кнопки Tilda задаёт стили через id блока с !important: :not(#a):not(#b) поднимает вес селектора */
.t706__cartwin .t-btnflex.t-submit:not(#a):not(#b) {
  background: transparent !important;
  color: #000000 !important;
  border: 1px solid #ff4b41 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  font-size: 20px !important;
  font-weight: 600 !important;
}
.t706__cartwin .t-btnflex.t-submit:not(#a):not(#b):hover {
  background: #ff4b41 !important;
  color: #ffffff !important;
}
.t706__product-imgdiv {
  box-sizing: border-box;
  padding: 6px;
  border: 1px solid #c5cdd5;
  border-radius: 12px !important;
  background-color: #ffffff !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-origin: content-box !important;
  background-clip: content-box !important;
}
.t706__product-plusminus {
  display: none !important;
}
.t706__cartwin .t-form__successbox {
  background: #eaf1f9 !important;
  color: #000000 !important;
  border-radius: 12px;
}
/* Корзина-заявка на телефоне: Tilda красит верхнюю полосу с крестиком в чёрный — делаем белой с тёмным крестиком, окно без скругления, как у попапа стенда */
@media screen and (max-width: 640px) {
  .t706__cartwin .t706__close:not(#a):not(#b),
  .t706__cartwin .t706__cartwin-close:not(#a):not(#b) {
    background: #ffffff !important;
  }
  .t706__cartwin .t706__cartwin-close-icon g {
    fill: #000000 !important;
  }
  .t706__cartwin-content {
    border-radius: 0;
  }
}
/* Каталог: метка NEW/HOT — плоская «пилюля» в углу карточки (12px от краёв) вместо круга 50px, который наезжал на логотипы. Смещение −19px = поле карточки 20px + рамка и отступ картинки 3px − 12px */
.t-catalog__card__mark-wrapper {
  top: -19px !important;
  right: -19px !important;
  width: auto !important;
  height: auto !important;
}
.t-catalog__card__mark {
  width: auto !important;
  height: 24px !important;
  padding: 0 10px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-size: 12px !important;
  line-height: 16px !important;
}
@media screen and (max-width: 639px) {
  .t-catalog__card__mark-wrapper {
    top: -15px !important;
    right: -15px !important;
  }
}