.shelf {
  z-index: 1;
  position: relative;
}

.shelf__header {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.shelf__header-media {
  --size: 7.2em;
  flex-basis: var(--size);
  min-width: var(--size);
  max-width: var(--size);
  width: var(--size);
  min-height: var(--size);
  max-height: var(--size);
  height: var(--size);
  border-radius: var(--size);
  margin-right: 1.2em;
}

.shelf__header-pic {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.shelf__header-img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.shelf__header-info {
  flex-grow: 1;
  margin-bottom: 3.2em;
  max-width: 80%;
}

.shelf__header > * {
  position: relative;
  z-index: 2;
}

.shelf__title {
  display: inline-block;
}

.shelf__carousel {
  --w-slider-loading: 24.7%;
  --mr-slider-loading: 0.6em;
  --navButtonsHeight: 3.2em;
  --navButtonsMarginBottom: 2.825625em;
  --mask-gap: 1.5em;
  background-color: transparent;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  mask: var(--mask-scoll-container);
  padding-left: var(--mask-gap);
  padding-right: var(--mask-gap);
  margin-left: calc(0px - var(--mask-gap));
  margin-right: calc(0px - var(--mask-gap));
  max-width: calc(100% + var(--mask-gap) * 2);
  width: auto;
  padding-top: calc(var(--navButtonsHeight) + var(--navButtonsMarginBottom));
  margin-top: calc(0px - var(--navButtonsHeight) - var(--navButtonsMarginBottom));
  overflow: hidden;
}

.shelf__carousel-navigation {
  position: absolute;
  top: 0;
  right: var(--mask-gap);
  display: flex;
  justify-content: flex-end;
}

.shelf__carousel-navigation .swiper-button-next,
.shelf__carousel-navigation .swiper-button-prev,
.shelf__carousel-navigation .swiper-button-next,
.shelf__carousel-navigation .swiper-button-prev {
  position: relative;
  margin: unset;
  top: unset;
  left: unset;
  right: unset;
  bottom: unset;
}

.shelf__carousel-navigation .swiper-button-prev {
  margin-right: 0.5em;
}

.shelf__carousel-swiper {
  width: 100%;
  overflow: visible;
}

.shelf__carousel-swiper:not(.swiper-initialized) .swiper-wrapper > .shelf__slide {
  max-width: var(--w-slider-loading);
  margin-right: var(--mr-slider-loading);
}

.shelf__slide {
  box-sizing: inherit;
  position: relative;
  align-self: stretch;
  height: auto;
}

.shelf__body:not(:last-child) {
  margin-bottom: 2.4em;
}

.shelf__footer-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
}

.shelf__filters {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 2.4em;
}

.shelf__filters-list > * {
  display: flex;
  margin-right: 0.7em;
  margin-bottom: 0.7em;
  z-index: 2;
  position: relative;
}

.shelf__filters-button.shelf__filters-button--active {
  --bg: var(--fg-regular-light);
  --fg: var(--fg-on);
}
@media (any-hover: hover) {
  .shelf__filters-button.shelf__filters-button--active:hover {
    --bg: var(--fg-regular);
    --fg: var(--fg-on);
  }
}
@media (any-hover: none) {
  .shelf__filters-button.shelf__filters-button--active:active {
    --bg: var(--fg-regular);
    --fg: var(--fg-on);
  }
}
@media (any-hover: hover) {
  .shelf__filters-button.shelf__filters-button--active:active {
    --bg: var(--fg-regular);
    --fg: var(--fg-on);
  }
}

.shelf__filters + .shelf__carousel {
  --navButtonsHeight: 9em;
}