/* Start:/bitrix/templates/aspro-lite/components/aspro/catalog.viewed.lite/main/style.min.css?17879093996519*/
.catalog-viewed {
  position: relative;
}
.catalog-viewed__inner {
  background: none;
}
.catalog-viewed.catalog-viewed--fon .catalog-viewed__inner {
  background: #f8f8f8;
  background: var(--darkerblack_bg_black);
}
.catalog-viewed-list {
  padding: 0 0 5.3125rem;
}
.front_page .catalog-viewed-list {
  padding-top: 4.5rem;
}
.catalog-viewed-list__slider-wrap {
  position: relative;
}
.catalog-viewed__item.swiper-slide {
  height: auto;
  width: calc((min(calc(100vw - var(--scrollbar-width, 0px) - (2 * var(--theme-page-width-padding))), var(--theme-page-width)) - (24px * (var(--items-count) - 1))) / var(--items-count));
}
.catalog-viewed__item-wrap {
  background: #fff;
  background: var(--card_bg_black);
  overflow: hidden;
  height: 100%;
  padding: 16px 16px 18px;
}
.catalog-viewed__item__inner {
  height: 100%;
}

/* --- Рамка картинки одна на все карточки. --- */
/* Раньше высоту задавала сама фотография, и в ряду выходил разнобой:        */
/* широкий велосипед оставлял карточку низкой, а вертикальный самокат или    */
/* детское кресло растягивали соседнюю вдвое.                                */
/*                                                                           */
/* Теперь рамка у всех одна — 68 % ширины карточки. Столько занимает          */
/* фотография велосипеда, то есть самый частый товар остаётся как был,        */
/* а всё, что выше, вписывается внутрь и центрируется.                        */
/*                                                                           */
/* 68 % — то же число, что у заглушки: рамка и заглушка обязаны совпадать,    */
/* иначе вёрстка прыгнет в момент подстановки данных. Меняете одно —          */
/* меняйте оба.                                                              */
.catalog-viewed__item__image__wrap {
  position: relative;
  margin: 0 0 14px 0;
}
.catalog-viewed__item__image {
  display: block;
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 68%;
}
.catalog-viewed__item__image a {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Вписываем по большей стороне: ширину и высоту задаёт не картинка,
   а рамка, поэтому width/height именно auto — иначе вертикальное фото
   растянется по ширине и вылезет за рамку. */
.catalog-viewed__item__image img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
  border-radius: var(--border-radius);
}
/* Заглушка до загрузки данных — тот же элемент, рамку берёт из правила выше. */
.catalog-viewed__item__info {
  margin-top: auto;
}

/* --- Избранное и сравнение поверх картинки, справа сверху --- */
/* Переключение обычной и активной иконки в теме описано только внутри .catalog-items, */
/* поэтому повторяем правила для своего блока — иначе уже добавленный товар не подсветится. */
.catalog-viewed__item__actions {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 4;
  width: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.catalog-viewed__item__actions .item-action {
  margin: 0;
}
.catalog-viewed__item__actions .item-action__inner {
  position: relative;
  --item-action-width: 20px;
  --item-action-height: 20px;
}
.catalog-viewed__item__actions .item-action__inner .svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
}
.catalog-viewed__item__actions .item-action.active .item-action__normal,
.catalog-viewed__item__actions .item-action:not(.active) .item-action__active {
  opacity: 0;
}

/* --- Цена и название под картинкой --- */
.catalog-viewed .price {
  margin: 0 0 5px 0;
}
.catalog-viewed__item__info .price__new-val {
  font-size: 17px;
  font-weight: 600;
  line-height: 22px;
}
.catalog-viewed__item__title {
  word-break: break-word;
  line-height: calc(1em + 5px);
}

/* --- Стикер скидки --- */
.catalog-viewed__item-sticker {
  position: absolute;
  z-index: 2;
  bottom: -2px;
  left: 0;
  margin: -2px;
}
.catalog-viewed__item-sticker-value.sticker__item {
  margin: 2px;
  font-size: 12px;
  line-height: 15px;
  display: inline-flex;
  align-items: center;
  padding: 0 4px;
  height: 21px;
}

.catalog-viewed-list .slider-solution:not(.swiper-initialized) ~ .slider-nav {
  display: none;
}

.catalog-viewed-list .slider-solution:not(.swiper-initialized) .swiper-wrapper {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(var(--items-count), 1fr);
  grid-auto-flow: column;
  overflow: hidden;
}
@media (max-width: 600px) {
  .catalog-viewed__inner .index-block__title {
    font-size: 20px;
    margin: 0px;
  }
  .catalog-viewed-list {
    padding-bottom: 40px;
  }
  .catalog-viewed-list .index-block__title-wrapper.index-block__title-wrapper--mb-35 {
    margin-bottom: 16px;
  }
  .front_page .catalog-viewed-list {
    padding-top: 40px;
  }
  .catalog-viewed__item {
    width: 170px !important;
  }
  .catalog-viewed__item-wrap {
    padding: 12px 12px 14px;
  }
  .catalog-viewed__item__image__wrap {
    margin-bottom: 10px;
  }
  .catalog-viewed__item__info .price__new-val {
    font-size: 15px;
    line-height: 20px;
  }
  .catalog-viewed-list .slider-solution:not(.swiper-initialized) .swiper-wrapper {
    gap: 8px;
  }
}
@media (min-width: 601px) {
  .catalog-viewed-list .swiper-wrapper {
    --items-count: 2;
  }
}
@media (min-width: 769px) {
  .catalog-viewed-list .swiper-wrapper {
    --items-count: 3;
  }
}
@media (min-width: 1025px) {
  .catalog-viewed-list .swiper-wrapper {
    --items-count: 4;
  }
}
@media (min-width: 1251px) {
  .catalog-viewed-list .swiper-wrapper {
    --items-count: 5;
  }
}

/* End */


/* Start:/bitrix/templates/aspro-lite/css/skeleton.min.css?1772705207413*/
.skeleton{--color-start:var(--light,#f4f4f4) var(--dark,#343434);--color-end:var(--light,#fff) var(--dark,#222228);background:linear-gradient(110deg,var(--color-start) 8%,var(--color-end) 18%,var(--color-start) 33%);background-size:200% 100%;animation:1.5s skeleton-shine linear infinite;border-radius:8px;border-radius:var(--theme-button-border-radius);}@keyframes skeleton-shine{to{background-position-x:-200%}}
/* End */
/* /bitrix/templates/aspro-lite/components/aspro/catalog.viewed.lite/main/style.min.css?17879093996519 */
/* /bitrix/templates/aspro-lite/css/skeleton.min.css?1772705207413 */