/* ============================================
   Product Gallery — фото, мініатюри, крапки, відео
   ============================================ */

/* Product Gallery - Start */
section.product-box .product-gallery {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
}

/* !important тут свідомо: трампи над inline-стилями Swiper (transform/height/overflow пишуться JS-ом) */
section.product-box .swiper-wrapper {
	height: fit-content !important;
}

section.product-box .gallery-top {
	position: relative;
	width: 100%;
	height: fit-content;
	border-radius: var(--radius-medium);
	overflow: hidden;
}

section.product-box .gallery-top .swiper-slide img {
	width: 100%;
	aspect-ratio: 864 / 746;
	height: auto;
	object-fit: cover;
	border-radius: var(--radius-medium);
	cursor: zoom-in;
	transition: all 0.3s ease;
}

section.product-box .gallery-thumbs {
	order: 2;
	width: 100%;
	height: fit-content;
	overflow: hidden !important;
}

section.product-box .gallery-thumbs .swiper-slide {
	width: 95px !important;
	height: fit-content !important;
	margin-bottom: 0 !important;
}

section.product-box .gallery-thumbs .swiper-slide img {
	width: 95px;
	height: 95px;
	object-fit: cover;
	border-radius: 11px;
	cursor: pointer;
	transition: all 0.3s ease;
}

@media not all and (pointer: coarse) {
	section.product-box .gallery-thumbs .swiper-slide:not(.swiper-slide-thumb-active):hover img {
		outline: 2px solid var(--input-border);
		outline-offset: -2px;
	}
}

section.product-box .gallery-thumbs .swiper-slide-thumb-active img {
	outline: 2px solid var(--black);
	outline-offset: -2px;
}
/* Product Gallery - End */

/* Gallery Overlays - Start */
section.product-box .product-hero-status {
	position: absolute;
	top: 40px;
	left: 40px;
	z-index: 3;
}

section.product-box .product-hero-status .stock-status {
	display: flex;
	align-items: center;
	padding: 16px 24px;
	background: var(--primary);
	color: var(--primary-match);
	border-radius: var(--radius-pill);
	font-family: var(--font-family-1);
	font-size: 16px;
	line-height: 19px;
	font-weight: 500;
}

section.product-box .product-hero-wishlist {
	position: absolute;
	top: 40px;
	right: 40px;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 51px;
	height: 51px;
	padding: 0;
	background: var(--white);
	border: 0;
	border-radius: var(--radius-max);
	cursor: pointer;
	transition: all 0.3s ease;
}

section.product-box .product-hero-wishlist .icon-mask {
	width: 30px;
	height: 30px;
}

section.product-box .product-hero-wishlist .icon-mask + .icon-mask,
section.product-box .product-hero-wishlist.in-wishlist-already .icon-mask:first-child {
	display: none;
}

section.product-box .product-hero-wishlist.in-wishlist-already .icon-mask + .icon-mask {
	display: block;
}

@media not all and (pointer: coarse) {
	section.product-box .product-hero-wishlist:hover {
		background: var(--primary);
	}
}

section.product-box .gallery-top .product-tags-or-badges {
	top: 40px;
	left: 40px;
	z-index: 2;
}
/* Gallery Overlays - End */

/* Gallery Pagination - Start */
section.product-box .gallery-top .gallery-pagination {
	position: absolute;
	bottom: 28px;
	left: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
}

section.product-box .gallery-top .gallery-pagination .swiper-pagination-bullet {
	width: 13px;
	height: 13px;
	margin: 0 !important;
	background: var(--white);
	border-radius: var(--radius-max);
	opacity: 1;
	cursor: pointer;
	transition: all 0.3s ease;
}

section.product-box .gallery-top .gallery-pagination .swiper-pagination-bullet-active {
	background: var(--primary);
}
/* Gallery Pagination - End */

@media (max-width: 1680px) {
	section.product-box .gallery-top .swiper-slide img {
		aspect-ratio: 646 / 623;
		border-radius: 20px;
	}

	section.product-box .gallery-top {
		border-radius: 20px;
	}

	section.product-box .product-hero-status {
		top: 24px;
		left: 24px;
	}

	section.product-box .product-hero-status .stock-status {
		padding: 16px 20px;
		font-size: 14px;
		line-height: 17px;
	}

	section.product-box .product-hero-wishlist {
		top: 24px;
		right: 24px;
	}

	section.product-box .gallery-top .product-tags-or-badges {
		top: 24px;
		left: 24px;
	}

	section.product-box .gallery-top .gallery-pagination {
		bottom: 21px;
	}

	section.product-box .gallery-top .gallery-pagination .swiper-pagination-bullet {
		width: 11px;
		height: 11px;
	}
}

@media (max-width: 1279px) {
	section.product-box .product-gallery {
		gap: 12px;
	}

	section.product-box .gallery-top,
	section.product-box .gallery-top .swiper-slide img {
		border-radius: 18px;
	}

	section.product-box .gallery-top .swiper-slide img {
		aspect-ratio: 311 / 319;
	}

	section.product-box .product-hero-status {
		top: 14px;
		left: 14px;
	}

	section.product-box .product-hero-status .stock-status {
		padding: 12px 16px;
		font-size: 14px;
		line-height: 17px;
	}

	section.product-box .product-hero-wishlist {
		top: 14px;
		right: 14px;
		width: 41px;
		height: 41px;
	}

	section.product-box .product-hero-wishlist .icon-mask {
		width: 24px;
		height: 24px;
	}

	section.product-box .gallery-top .product-tags-or-badges {
		top: 14px;
		left: 14px;
	}

	section.product-box .gallery-thumbs .swiper-slide {
		width: 95px !important;
	}

	section.product-box .gallery-thumbs .swiper-slide img {
		width: 95px;
		height: 95px;
	}

	section.product-box .gallery-top .gallery-pagination {
		bottom: 15px;
	}

	section.product-box .gallery-top .gallery-pagination .swiper-pagination-bullet {
		width: 9px;
		height: 9px;
	}
}

/* Product Gallery Video - Start */
.product-box .gallery-thumbs .video-slide-thumb {
	position: relative;
}
.product-box .gallery-thumbs .video-thumb-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 32px;
	height: 24px;
	background: rgba(255, 0, 0, 0.9);
	border-radius: var(--radius-tiny);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	pointer-events: none;
}
.product-box .gallery-thumbs .video-thumb-icon::after {
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 5px 0 5px 8px;
	border-color: transparent transparent transparent var(--white);
	margin-left: 2px;
}
.product-box .gallery-top .video-slide-main {
	position: relative;
	overflow: hidden;
}
.product-box .gallery-top .video-facade {
	position: relative;
	width: 100%;
	aspect-ratio: 864 / 746;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.product-box .gallery-top .video-preview-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
	border-radius: var(--radius-medium);
	transition: all 0.3s ease;
}
@media not all and (pointer: coarse) {
	.product-box .gallery-top .video-facade:hover .video-preview-image {
		transform: scale(1.02);
	}
}
.product-box .gallery-top .video-play-button {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	transition: all 0.3s ease;
	opacity: 0.9;
}
@media not all and (pointer: coarse) {
	.product-box .gallery-top .video-facade:hover .video-play-button {
		transform: translate(-50%, -50%) scale(1.1);
		opacity: 1;
	}
}
.product-box .gallery-top .video-play-button svg {
	width: 68px;
	height: 48px;
	filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
}
.product-box .gallery-top .video-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;
	border-radius: var(--radius-medium);
	overflow: hidden;
	background: var(--black);
	z-index: 5;
}
.product-box .gallery-top .gallery-video-iframe,
.product-box .gallery-top .gallery-video-mp4 {
	width: 100%;
	height: 100%;
	border: none;
	object-fit: contain;
}
.product-box .gallery-top .video-slide-main.video-playing .video-facade {
	visibility: hidden;
}
.product-box .gallery-top .video-slide-main.video-playing .video-container {
	display: flex;
	align-items: center;
	justify-content: center;
}
.product-box .gallery-top .video-slide-main img {
	cursor: pointer;
}
@media (max-width: 1279px) {
	.product-box .gallery-top .video-play-button svg {
		width: 50px;
		height: 36px;
	}
	.product-box .gallery-thumbs .video-thumb-icon {
		width: 28px;
		height: 20px;
	}
	.product-box .gallery-thumbs .video-thumb-icon::after {
		border-width: 4px 0 4px 6px;
	}
}
/* Product Gallery Video - End */