@charset "UTF-8";

/*
  Заглушка: слой .img-skel-logo (вставляет JS) + фон контейнера.
  Каталог (.card-catalog__img) не трогаем.
  Новости: src не подменяем на 1×1.
*/

/*
  Не прячем lazy-фото через opacity:0 — Chrome тогда не начинает загрузку,
  и заглушка зависает до перезагрузки. Перекрытие даёт слой .img-skel-logo.
  Без src (кадры галереи до hover/swipe) скрываем, чтобы не было битой иконки.
  LCP (eager / fetchpriority=high) не прячем — иначе падает метрика.
*/
.slider__image:not([src]):not(.img-skel_loaded):not(.img-skel_error),
.card-video__img:not([src]):not(.img-skel_loaded):not(.img-skel_error),
.card-news__img:not([src]):not(.img-skel_loaded):not(.img-skel_error) {
  opacity: 0 !important;
}

.slider__image.img-skel_loaded,
.card-video__img.img-skel_loaded,
.card-advice__img.img-skel_loaded,
.card-product-cart__img.img-skel_loaded,
.card-news__img.img-skel_loaded {
  opacity: 1 !important;
  transition: opacity .25s ease;
}

.slider__slide,
.card-video__img-container,
.js-gallery-item,
.card-news-container {
  position: relative !important;
  z-index: 0;
  overflow: hidden;
  background-color: #f4f5f6 !important;
}

/* Явный слой лого (JS) — поверх картинки, пока она не loaded.
   z-index только внутри слайда: стрелки галереи остаются выше. */
.img-skel-logo {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
  background-color: #f4f5f6 !important;
  background-image: none !important;
  box-sizing: border-box !important;
  opacity: 1 !important;
  filter: none !important;
}

.img-skel-logo > img {
  display: block !important;
  width: 48px !important;
  max-width: 48px !important;
  height: auto !important;
  max-height: 48px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  object-fit: contain !important;
  filter: grayscale(1) contrast(0.85) brightness(0.9) !important;
  opacity: 0.45 !important;
  pointer-events: none !important;
}

.img-skel-logo_sm > img {
  width: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;
}

/* Скрыть слой, когда картинка готова */
.img-skel_loaded ~ .img-skel-logo,
.slider__slide:has(.img-skel_loaded) > .img-skel-logo,
.card-video__img-container:has(.img-skel_loaded) > .img-skel-logo,
.card-news-container:has(.img-skel_loaded) > .img-skel-logo,
.js-gallery-item:has(.img-skel_loaded) > .img-skel-logo,
.card-product__thumbs .img-skel-logo,
.card-product__thumb .img-skel-logo {
  display: none !important;
}

.card-news__img.img-skel_error {
  opacity: 0 !important;
}

/* advice / cart — свой размер, лого на img */
.card-advice__img:not(.img-skel_loaded),
.card-product-cart__img:not(.img-skel_loaded) {
  box-sizing: border-box;
  color: transparent;
  background-color: #f4f5f6 !important;
  background-image: url("/design/2025-metalmaster-mob/img/logo/logo.svg") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 40px auto !important;
  filter: grayscale(1) contrast(0.85) brightness(0.9) !important;
  opacity: 0.45 !important;
  object-position: -99999px !important;
}

.card-advice__img.img-skel_loaded,
.card-product-cart__img.img-skel_loaded {
  background-image: none !important;
  filter: none !important;
  opacity: 1 !important;
  object-position: center !important;
  color: inherit;
}

.home-banners .new__slid-img {
  opacity: 1 !important;
}