/* Скелетоны карточек на время подгрузки «Показать ещё».
   Разметку создаёт script.js (showSkeletons/hideSkeletons),
   повторяя габариты настоящей карточки, чтобы сетка не прыгала. */

.product-card--skeleton {
  pointer-events: none;
}

.product-card--skeleton:hover {
  border-color: transparent;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.product-card--skeleton .product-card__image {
  display: block;
}

/* Плашка-заглушка: базовая анимация «шиммера» */
.cf-sk {
  position: relative;
  display: block;
  overflow: hidden;
  background-color: #edeef0;
  border-radius: 4px;
}

.cf-sk::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
  background-image: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, 0.65)), to(rgba(255, 255, 255, 0)));
  background-image: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.65) 50%, rgba(255, 255, 255, 0) 100%);
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.65) 50%, rgba(255, 255, 255, 0) 100%);
  -webkit-animation: cf-sk-shimmer 1.4s ease-in-out infinite;
          animation: cf-sk-shimmer 1.4s ease-in-out infinite;
}

@-webkit-keyframes cf-sk-shimmer {
  100% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}

@keyframes cf-sk-shimmer {
  100% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}

/* Картинка: та же высота, что у настоящей карточки */
.cf-sk--image {
  width: 100%;
  height: clamp(100px, 5.24rem + 4.487vw, 170px);
}

/* Информация растягивается на всю высоту карточки, цена прижата к низу —
   так заглушка повторяет силуэт настоящей карточки */
.product-card--skeleton .product-card__info {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
}

/* Текстовые строки: заголовок в две строки и цена */
.cf-sk--line {
  width: 100%;
  height: clamp(12px, 0.721rem + 0.128vw, 14px);
  margin-top: 4px;
}

.cf-sk--line--short {
  width: 65%;
}

.cf-sk--price {
  width: 45%;
  height: clamp(20px, 1.1rem + 0.32vw, 26px);
  margin-top: auto;
}

/* На ≤768px карточка получает меньшие паддинги — скелетон следует за ней */
@media screen and (max-width: 768px) {
  .cf-sk--line {
    height: 12px;
  }

  .cf-sk--price {
    height: 20px;
    margin-top: 8px;
  }
}

/* Для пользователей с отключённой анимацией — статичная заглушка */
@media (prefers-reduced-motion: reduce) {
  .cf-sk::after {
    content: none;
  }

  .cf-sk {
    background-color: #e3e5e8;
  }
}