/*
 * ST340 — адаптивные карточки-заглушки.
 *
 * Показываются только пока Tilda не добавила реальные карточки.
 * Как только товары получены — действие правил прекращается.
 */

@supports selector(.t-catalog__cont-wrapper:has(.js-catalog-grid-cont:empty)) {

  /*
   * Ключевая правка:
   * пустая сетка Tilda является соседним flex-элементом и делит
   * ширину с прелоадером. Пока товаров нет, скрываем именно её.
   */
  .t-catalog__cont-wrapper:has(.js-catalog-grid-cont:empty)
  .js-catalog-grid-cont:empty {
    display: none !important;
  }

  /*
   * Полная ширина и те же интервалы, что у реальной сетки ST340.
   * padding: 0 убирает штатные 20px прелоадера, которых нет
   * у сетки реальных карточек.
   */
  .t-catalog__cont-wrapper:has(.js-catalog-grid-cont:empty)
  .js-catalog-grid-cont-preloader {
    display: flex !important;
    flex: 0 0 100% !important;
    flex-wrap: wrap !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;

    column-gap: var(--t-catalog-col-gap, 40px) !important;
    row-gap: 80px !important;

    opacity: 1 !important;
    visibility: visible !important;
  }

  .t-catalog__cont-wrapper:has(.js-catalog-grid-cont:empty)
  .js-catalog-grid-cont-preloader .t-clear {
    display: none !important;
  }

  /*
   * Базовые свойства карточек-заглушек.
   */
  .t-catalog__cont-wrapper:has(.js-catalog-grid-cont:empty)
  .t-catalog__card-preloader {
    display: block !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
  }

  /*
   * Количество карточек в строке на desktop.
   * Для текущих блоков сайта используется _33, но добавлены
   * также варианты для блоков с 2, 4 или 1 карточкой.
   */
  .t-catalog__cont-wrapper:has(.js-catalog-grid-cont:empty)
  .t-catalog__card-preloader.t-catalog__stretch-col_33 {
    flex: 0 0 calc(33.33333% - var(--t-catalog-col-gap, 40px) * 2 / 3) !important;
    max-width: calc(33.33333% - var(--t-catalog-col-gap, 40px) * 2 / 3) !important;
  }

  .t-catalog__cont-wrapper:has(.js-catalog-grid-cont:empty)
  .t-catalog__card-preloader.t-catalog__stretch-col_25 {
    flex: 0 0 calc(25% - var(--t-catalog-col-gap, 40px) * 3 / 4) !important;
    max-width: calc(25% - var(--t-catalog-col-gap, 40px) * 3 / 4) !important;
  }

  .t-catalog__cont-wrapper:has(.js-catalog-grid-cont:empty)
  .t-catalog__card-preloader.t-catalog__stretch-col_50 {
    flex: 0 0 calc(50% - var(--t-catalog-col-gap, 40px) / 2) !important;
    max-width: calc(50% - var(--t-catalog-col-gap, 40px) / 2) !important;
  }

  .t-catalog__cont-wrapper:has(.js-catalog-grid-cont:empty)
  .t-catalog__card-preloader.t-catalog__stretch-col_100 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /*
   * Соответствует реальному изображению карточки:
   * пропорция 4:3, то есть при ширине 368px высота будет 276px.
   */
  .t-catalog__cont-wrapper:has(.js-catalog-grid-cont:empty)
  .t-catalog__card__img-preloader {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    padding-bottom: 75% !important;
    border-radius: 10px !important;

    background: linear-gradient(
      100deg,
      rgba(122, 122, 122, 0.12) 25%,
      rgba(122, 122, 122, 0.22) 38%,
      rgba(122, 122, 122, 0.12) 55%
    ) !important;
    background-size: 200% 100% !important;

    animation: ods-catalog-preloader-shimmer 1.3s linear infinite !important;
  }

  /*
   * Резервируем место под название и цену.
   * На текущей desktop-сетке это 92px:
   * 276px изображение + 92px текст = 368px,
   * то есть ровно высота реальной карточки.
   */
  .t-catalog__cont-wrapper:has(.js-catalog-grid-cont:empty)
  .t-catalog__card-preloader::after {
    content: "" !important;
    display: block !important;
    height: 92px !important;

    background:
      linear-gradient(
        rgba(122, 122, 122, 0.16),
        rgba(122, 122, 122, 0.16)
      ) 0 14px / 68% 12px no-repeat,

      linear-gradient(
        rgba(122, 122, 122, 0.16),
        rgba(122, 122, 122, 0.16)
      ) 0 48px / 38% 20px no-repeat;
  }

  /*
   * В ST340 на мобильном у вас включено две карточки в строке.
   * Это совпадает с настройкой блока «Две карточки в ряд».
   */
  @media screen and (max-width: 960px) {
    .t-catalog__cont-wrapper:has(.js-catalog-grid-cont:empty)
    .js-catalog-grid-cont-preloader {
      column-gap: 20px !important;
      row-gap: 80px !important;
    }

    .t-catalog__cont-wrapper:has(.js-catalog-grid-cont:empty)
    .t-catalog__card-preloader:not(.t-catalog__stretch-col_100) {
      flex: 0 0 calc(50% - 10px) !important;
      max-width: calc(50% - 10px) !important;
    }

    .t-catalog__cont-wrapper:has(.js-catalog-grid-cont:empty)
    .t-catalog__card-preloader::after {
      height: 80px !important;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .t-catalog__cont-wrapper:has(.js-catalog-grid-cont:empty)
    .t-catalog__card__img-preloader {
      animation: none !important;
    }
  }
}

@keyframes ods-catalog-preloader-shimmer {
  to {
    background-position: -200% 0;
  }
}

/*
 * Телефон: одна заглушка в строке —
 * так же, как реальные карточки ST340.
 */
@media screen and (max-width: 480px) {
  .t-catalog__cont-wrapper:has(.js-catalog-grid-cont:empty)
  .t-catalog__card-preloader:not(.t-catalog__stretch-col_100) {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  .t-catalog__cont-wrapper:has(.js-catalog-grid-cont:empty)
  .t-catalog__card-preloader::after {
    height: 92px !important;
  }
}