/**
 * Слайдер изображений на странице товара.
 * Раньше шло из main_page_style.css, который грузился на всех страницах.
 */

.photo_item_wmf {
	margin: 0 auto;
	position: relative;
	overflow: hidden;
	list-style: none;
	padding: 0;
	height: 100%;
	z-index: 1;
}

.more-popup .swiper-container,
.slider-group .swiper-container,
.photo_item_wmf.swiper-container,
.photo_item_wmf_vertical.swiper-container {
	margin: 0 auto;
	position: relative;
	list-style: none;
	padding: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
}

.more-popup .big-image-slider.swiper-container,
.slider-group .big-image-slider.swiper-container,
.photo_item_wmf_vertical.swiper-container {
	overflow: hidden;
}

/* Миниатюры: стрелки снаружи — не обрезаем */
.more-popup .photo_item_wmf.swiper-container,
.container_photo_item .photo_item_wmf.swiper-container {
	overflow: visible;
}

.more-popup .swiper-wrapper,
.slider-group .swiper-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	z-index: 1;
	display: flex;
	transition-property: transform;
	box-sizing: border-box;
}

.more-popup .swiper-slide,
.slider-group .swiper-slide,
.photo_item_wmf .swiper-slide,
.photo_item_wmf_vertical .swiper-slide {
	flex-shrink: 0;
	width: 100%;
	position: relative;
	transition-property: transform;
}

/* styles.css: .swiper-container { width: 15% } ломает галерею на карточке товара */
.more-popup .big-image-slider.swiper-container,
.slider-group .big-image-slider.swiper-container {
	width: 100%;
}

.more-popup .big-image-slider .swiper-slide,
.photo_item_wmf .swiper-slide,
.photo_item_wmf_vertical .swiper-slide {
	background: none;
}

/* styles.css: .swiper-button-prev/next с rotate(90deg) — для вертикального блока, не для карточки товара */
.more-popup .big-image-slider .swiper-button-prev,
.more-popup .big-image-slider .swiper-button-next,
.slider-group .big-image-slider .swiper-button-prev,
.slider-group .big-image-slider .swiper-button-next {
	position: absolute;
	top: 50%;
	bottom: auto;
	width: 44px;
	height: 44px;
	margin-top: -22px;
	transform: none;
	z-index: 10;
}

.more-popup .big-image-slider .swiper-button-prev,
.slider-group .big-image-slider .swiper-button-prev {
	left: 15px;
	right: auto;
}

.more-popup .big-image-slider .swiper-button-next,
.slider-group .big-image-slider .swiper-button-next {
	right: 15px;
	left: auto;
}

.slider-group .big-image-slider .swiper-button-next:after,
.slider-group .big-image-slider .swiper-button-prev:after {
	display: none;
}

/* Миниатюры под большим фото */
.more-popup .photo_item_wmf .swiper-prev-btn,
.more-popup .photo_item_wmf .swiper-next-btn,
.container_photo_item .photo_item_wmf .swiper-prev-btn,
.container_photo_item .photo_item_wmf .swiper-next-btn {
	position: absolute;
	top: 50%;
	width: 44px;
	height: 44px;
	margin-top: -22px;
	transform: none;
	z-index: 10;
}

.more-popup .photo_item_wmf .swiper-prev-btn,
.container_photo_item .photo_item_wmf .swiper-prev-btn {
	left: -40px;
	right: auto;
}

.more-popup .photo_item_wmf .swiper-next-btn,
.container_photo_item .photo_item_wmf .swiper-next-btn {
	right: -40px;
	left: auto;
}

@media (max-width: 640px) {
	.more-popup .big-image-slider .swiper-button-prev,
	.more-popup .big-image-slider .swiper-button-next,
	.slider-group .big-image-slider .swiper-button-prev,
	.slider-group .big-image-slider .swiper-button-next {
		display: none;
	}

	.container_photo_item .photo_item_wmf .swiper-prev-btn,
	.container_photo_item .photo_item_wmf .swiper-next-btn {
		top: -170%;
		margin-top: 0;
	}

	.container_photo_item .photo_item_wmf .swiper-prev-btn {
		left: -25px;
	}

	.container_photo_item .photo_item_wmf .swiper-next-btn {
		right: -25px;
	}
}

/* styles.css @media (max-width: 976px) скрывает все .swiper-button-* */
@media (max-width: 976px) and (min-width: 641px) {
	.more-popup .big-image-slider .swiper-button-prev,
	.more-popup .big-image-slider .swiper-button-next,
	.slider-group .big-image-slider .swiper-button-prev,
	.slider-group .big-image-slider .swiper-button-next {
		display: flex;
	}
}
