:root {
  --f-brand-color: #eee;
  --f-carousel-dot-color: #eee;
}

#Games, #g1, #g2, #myCarousel, #productCarousel,
.f-thumbs.is-classic,
.fancybox__toolbar,
.fancybox__nav {
  --f-button-width: 40px;
  --f-button-height: 40px;
  --f-button-border-radius: 100%;

  --f-button-color: #eee;
  --f-button-hover-color: var(--f-brand-color);

  --f-button-bg: #333;
  --f-button-hover-bg: #444;
  --f-button-active-bg: #444;

  --f-button-svg-width: 20px;
  --f-button-svg-height: 20px;
  --f-button-svg-stroke-width: 2.25;
  --f-button-svg-filter: none;

  --f-button-svg-disabled-opacity: 0.2;
  --f-thumb-opacity: 0.8;
}


.f-carousel__slide .head {
    font-size: 0.875rem;
    font-weight: 600;
    background: #333;
    padding: 10px;
    text-align: center;
    color: #eee;
}

.f-carousel__slide:hover .head {
  color: #fff;
}

.f-carousel__slide .overlay {
  position: relative;
}

.f-carousel__slide .overlay::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(0deg, #111, transparent 20%), rgba(17, 17, 17, 0.2);
  pointer-events: none;
}

.f-carousel__slide:hover .overlay::after {
  background: linear-gradient(0deg, #111, transparent 20%), rgba(17, 17, 17, 0);
}

.f-carousel__slide .overlay .heed {
  position: absolute;
  top: 50%;
  left: 50%;
  font-weight: 600;
  transform: translateY(-50%) translateX(-50%);
  z-index: 1;
}

.f-carousel__slide .overlay .date,
.f-carousel__slide .overlay .details {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  font-size: 0.75rem;
  pointer-events: none;
  z-index: 1;
}

.f-carousel__slide .overlay .date {
  top: 10px;
  right: 0;
}

.f-carousel__slide .overlay .details {
  left: 0;
  right: 0;
  bottom: 0;
  visibility: hidden;
}

.f-carousel__slide:hover .overlay .details {
  visibility: visible;
}

.f-carousel__slide .overlay .date svg,
.f-carousel__slide .overlay .details svg {
  width: 20px;
  height: 20px;
  fill: #eee;
}

.f-carousel__slide .overlay .date .text,
.f-carousel__slide .overlay .details .text {
  padding: 0px 10px;
}

.f-carousel__slide .overlay .date .value,
.f-carousel__slide .overlay .details .value {
  color: #dc143c;
}


.f-carousel__slide .overlay .value.green {
  color: #a0c213; 
}

.f-carousel__slide .overlay .value.blue {
  color: #3B83BD; 
}

.f-carousel__track {
  max-height: 40vh;
}

.f-button {
  margin: 0px 2px;
}


/* Общие стили для всех слайдеров с параметрами */
.f-carousel {
  --f-carousel-spacing: 10px;
}

/* Стили для #Games слайдера */
#Games {
  --f-carousel-slide-width: calc((100% - 40px) / 5);
  padding: 10px;
}

#Games .f-carousel__slide {
  border: solid 2px #333;
  border-radius: 8px;
  overflow: hidden;
}

#Games .f-carousel__slide img {
  display: block;
  width: 100%;
  max-height: 40vh;
  object-fit: contain;
}

/* Стили для #myCarousel слайдера */
#myCarousel {
  --f-carousel-slide-width: calc((100% - 20px) / 3); /* Mobile default */
}

#myCarousel .f-carousel__slide {
  color: #eee;
  border: solid 2px #333;
  border-radius: 8px;
  overflow: hidden;
}

#myCarousel .f-carousel__slide:hover {
  color: #fff;
}

#myCarousel .f-carousel__slide img {
  display: block;
  width: 100%;
  height: 10rem;
  object-fit: cover;
}

/* Мобильные стили */
@media (max-width: 768px) {
  #myCarousel .f-carousel,
  #g1 .f-carousel,
  #g2 .f-carousel,
  #productCarousel .f-carousel {
    --f-carousel-slide-width: 100%; 
  }
}

/* Стили для #g1 и #g2 слайдеров */
#g1,
#g2 {
  --f-carousel-slide-width: calc((100% - 30px) / 4); /* Mobile default */
}

#g1 .f-carousel__slide,
#g2 .f-carousel__slide {
  color: #eee;
  border: solid 2px #333;
  border-radius: 8px;
  overflow: hidden;
}

#g1 .f-carousel__slide:hover,
#g2 .f-carousel__slide:hover {
  color: #fff;
}

#g1 .f-carousel__slide img,
#g2 .f-carousel__slide img {
  display: block;
  width: 100%;
  height: 10rem;
  object-fit: cover;
}

/* Стили для #productCarousel слайдера */
#productCarousel {
  --f-carousel-slide-width: 100%;
}

#productCarousel .f-carousel__slide img {
  display: block;
  width: 100%;
  max-height: 40vh;
  object-fit: cover;
}

#productCarousel .f-button {
  margin: 0px 2px;
}

.f-thumbs.is-classic {
  --f-thumb-width: 120px;
  --f-thumb-height: 80px;
  --f-thumb-gap: 8px;

  --f-thumb-opacity: 0.8;
  --f-thumb-selected-opacity: 1;

  --f-thumb-outline: 2px;
  --f-thumb-outline-color: var(--f-brand-color);

  --f-button-next-pos: 8px;
  --f-button-prev-pos: 8px;
}

.f-thumbs.is-classic.is-horizontal {
  padding: 0 56px;
}

.f-thumbs.is-classic.is-vertical {
  padding: 56px 0;
}

.fancybox__container {
  --fancybox-bg: #222;
  --fancybox-color: #eee;

  --f-spinner-color-1: rgba(0, 0, 0, 0.1);
  --f-spinner-color-2: rgba(17, 24, 28, 0.8);
}

@media screen and (min-width: 640px) {
  .fancybox__container {
    flex-direction: row-reverse;
  }
}

.fancybox__thumbs.is-classic.is-horizontal {
  --f-thumb-width: 75px;
  --f-thumb-height: 55px;
  --f-thumb-gap: 8px;
}

.fancybox__thumbs.is-classic.is-vertical {
  --f-thumb-width: 100%;
  --f-thumb-height: 100px;

  width: 182px;
  outline: 2px solid #333;
}

.fancybox__thumbs.is-classic.is-vertical .f-thumbs__track {
  padding: 0 16px;
}

.fancybox__toolbar {
  padding: 8px;
}

.fancybox__nav {
  --f-button-next-pos: 8px;
  --f-button-prev-pos: 8px;
}

.fancybox__carousel {
  min-width: 0;
  min-height: 0;
}

.fancybox__slide {
  padding: 8px;
}