/**
 * Product gallery: .mk-product-gallery (templates/components/product-gallery.php).
 *
 * Mobile first: one full-width slide, screen height, dots over the photo.
 * Desktop (64rem): thumbs column (112 : 484 of the width, square thumbs,
 * 5 visible, gap 12) + 16 + main photo 484 × 600 that scales with the parent.
 * The main photo (slider or the one photo) has radius 10.
 * `.is-ready` = Swiper is running; `.is-fade` = desktop fade + blur.
 * Tokens: theme.json `custom.productGallery`, colours `custom.color.productGallery`.
 */

/* Swiper base (the library's core rules, scoped). */
.mk-product-gallery .swiper {
	position: relative;
	z-index: 1;
	overflow: hidden;
}

.mk-product-gallery .swiper-wrapper {
	position: relative;
	z-index: 1;
	display: flex;
	box-sizing: content-box;
	inline-size: 100%;
	block-size: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	transition-property: transform;
	transition-timing-function: var(--wp--custom--motion--easing--standard);
}

.mk-product-gallery .swiper-vertical > .swiper-wrapper {
	flex-direction: column;
}

.mk-product-gallery .swiper-horizontal {
	touch-action: pan-y;
}

.mk-product-gallery .swiper-vertical {
	touch-action: pan-x;
}

.mk-product-gallery .swiper-slide {
	position: relative;
	flex-shrink: 0;
	inline-size: 100%;
	block-size: 100%;
	transition-property: transform;
}

.mk-product-gallery .swiper-fade .swiper-slide {
	pointer-events: none;
	transition-property: opacity;
}

.mk-product-gallery .swiper-fade .swiper-slide-active {
	pointer-events: auto;
}

/* Layout. */
.mk-product-gallery {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	column-gap: var(--wp--custom--product-gallery--gap);
	row-gap: var(--wp--custom--product-gallery--thumb-gap);
}

.mk-product-gallery__thumbs {
	display: none;
}

.mk-product-gallery__main {
	position: relative;
	grid-column: 1 / -1;
	min-inline-size: 0;
}

.mk-product-gallery__slider {
	block-size: var(--wp--custom--product-gallery--mobile-height);
	border-radius: var(--wp--custom--product-gallery--radius);
	background-color: var(--wp--custom--color--product-gallery--background);
}

/* Two classes: beats WooCommerce's `.woocommerce img { height: auto }`. */
.mk-product-gallery .mk-product-gallery__image {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/* Without JS: native horizontal scroll with snapping. */
.mk-product-gallery:not(.is-ready) .mk-product-gallery__slider .swiper-wrapper {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.mk-product-gallery:not(.is-ready) .mk-product-gallery__slide {
	scroll-snap-align: start;
}

/* Badges (left) and wishlist (right) over the main photo. */
.mk-product-gallery__overlay {
	position: absolute;
	inset-block-start: var(--wp--custom--product-gallery--overlay-inset);
	inset-inline: var(--wp--custom--product-gallery--overlay-inset);
	z-index: 2;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--wp--custom--product-gallery--dot-gap);
	pointer-events: none;
}

.mk-product-gallery__overlay > * {
	pointer-events: auto;
}

.mk-product-gallery__badges {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--custom--product-card--badge-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mk-product-gallery__wishlist {
	margin-inline-start: auto;
}

/* Dots over the photo (mobile). */
.mk-product-gallery__dots {
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 50%;
	z-index: 2;
	display: flex;
	gap: var(--wp--custom--product-gallery--dot-gap);
	padding: var(--wp--custom--product-gallery--dots-padding);
	transform: translateX(-50%);
}

.mk-product-gallery--single .mk-product-gallery__dots {
	display: none;
}

.mk-product-gallery__dot {
	position: relative;
	display: block;
	inline-size: var(--wp--custom--product-gallery--dot-size);
	block-size: var(--wp--custom--product-gallery--dot-size);
	border-radius: 50%;
	background-color: var(--wp--custom--color--product-gallery--dot);
	cursor: pointer;
	transition: background-color var(--wp--custom--motion--duration--base);
}

/* Bigger touch target than the 8px dot. */
.mk-product-gallery__dot::after {
	position: absolute;
	inset: calc(-1 * var(--wp--custom--product-gallery--dot-size));
	content: "";
}

.mk-product-gallery__dot.is-active {
	background-color: var(--wp--custom--color--product-gallery--dot-active);
}

.mk-product-gallery__dot:focus-visible {
	outline-width: var(--wp--custom--focus--ring-width);
	outline-style: solid;
	outline-color: var(--wp--custom--color--focus--ring);
	outline-offset: var(--wp--custom--focus--ring-offset);
}