/**
 * 整顔整頭 WooCommerce ECパック
 * 商品ギャラリー
 *
 * Version 1.6.3
 *
 * メイン画像はWooCommerce標準比率を維持。
 * サムネイルのみ正方形へ統一。
 */


/* =========================================================
   ギャラリー全体
========================================================= */

.single-product div.product
.woocommerce-product-gallery {
	position: relative;
	margin-bottom: 58px;
}

.single-product div.product
.woocommerce-product-gallery__wrapper {
	margin: 0 !important;
}


/* =========================================================
   メイン画像
   WooCommerce標準のスライダー動作を維持
========================================================= */

.single-product div.product
.woocommerce-product-gallery__image {
	background:
		linear-gradient(
			145deg,
			#fdfcfd 0%,
			#fafafa 100%
		);
}

.single-product div.product
.woocommerce-product-gallery__image > a {
	display: block !important;
	width: 100%;
}

.single-product div.product
.woocommerce-product-gallery__image img {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	margin: 0 auto !important;
}


/* =========================================================
   拡大ボタン
========================================================= */

.single-product div.product
.woocommerce-product-gallery__trigger {
	top: 16px !important;
	right: 16px !important;
	z-index: 5;

	width: 40px !important;
	height: 40px !important;

	border: 1px solid rgba(171, 113, 176, 0.24);
	border-radius: 50%;

	background: rgba(255, 255, 255, 0.92) !important;

	box-shadow:
		0 6px 20px
		rgba(80, 60, 82, 0.08);

	transition:
		border-color 0.25s ease,
		transform 0.25s ease,
		box-shadow 0.25s ease;
}

.single-product div.product
.woocommerce-product-gallery__trigger:hover {
	transform: translateY(-1px);

	border-color: rgba(171, 113, 176, 0.55);

	box-shadow:
		0 9px 25px
		rgba(80, 60, 82, 0.13);
}


/* =========================================================
   サムネイル
========================================================= */

.single-product div.product
.woocommerce-product-gallery .flex-control-thumbs {
	display: grid !important;
	grid-template-columns:
		repeat(5, minmax(0, 1fr));
	gap: 9px;

	width: 100%;
	margin: 10px 0 0 !important;
	padding: 0 !important;

	list-style: none !important;
}

.single-product div.product
.woocommerce-product-gallery .flex-control-thumbs li {
	float: none !important;

	width: 100% !important;
	margin: 0 !important;

	aspect-ratio: 1 / 1;
	overflow: hidden;

	border: 1px solid transparent;
	border-radius: 3px;

	background: #fafafa;

	transition:
		border-color 0.25s ease,
		opacity 0.25s ease;
}

.single-product div.product
.woocommerce-product-gallery .flex-control-thumbs li:hover {
	border-color: rgba(171, 113, 176, 0.45);
}

.single-product div.product
.woocommerce-product-gallery .flex-control-thumbs img {
	display: block !important;

	width: 100% !important;
	height: 100% !important;

	margin: 0 !important;

	object-fit: cover !important;
	object-position: center center;

	opacity: 0.58;

	transition:
		opacity 0.25s ease,
		transform 0.35s ease;
}

.single-product div.product
.woocommerce-product-gallery .flex-control-thumbs img:hover {
	opacity: 0.88;
	transform: scale(1.025);
}

.single-product div.product
.woocommerce-product-gallery .flex-control-thumbs img.flex-active {
	opacity: 1;
}

.single-product div.product
.woocommerce-product-gallery .flex-control-thumbs li:has(img.flex-active) {
	border-color: var(--seigan-primary);
}


/* =========================================================
   タブレット
========================================================= */

@media screen and (max-width: 959px) {

	.single-product div.product
	.woocommerce-product-gallery {
		margin-bottom: 38px;
	}

	.single-product div.product
	.woocommerce-product-gallery .flex-control-thumbs {
		gap: 7px;
	}

}


/* =========================================================
   スマートフォン
========================================================= */

@media screen and (max-width: 767px) {

	.single-product div.product
	.woocommerce-product-gallery__trigger {
		top: 11px !important;
		right: 11px !important;

		width: 38px !important;
		height: 38px !important;
	}

	.single-product div.product
	.woocommerce-product-gallery .flex-control-thumbs {
		display: flex !important;
		gap: 7px;

		margin-right: -12px !important;
		padding-right: 12px !important;

		overflow-x: auto;

		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.single-product div.product
	.woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar {
		display: none;
	}

	.single-product div.product
	.woocommerce-product-gallery .flex-control-thumbs li {
		flex: 0 0 19%;
		scroll-snap-align: start;
	}

}


/* =========================================================
   狭いスマートフォン
========================================================= */

@media screen and (max-width: 390px) {

	.single-product div.product
	.woocommerce-product-gallery .flex-control-thumbs li {
		flex-basis: 22%;
	}

}

/* =========================================================
   Ver1.6.2：SPサムネイルを最後まで横スワイプ可能にする
========================================================= */

@media screen and (max-width: 767px) {
	.single-product div.product
	.woocommerce-product-gallery .flex-control-thumbs {
		box-sizing: border-box;
		width: calc(100% + 12px) !important;
		max-width: none !important;
		margin-right: -12px !important;
		padding: 0 12px 3px 0 !important;
		overflow-x: scroll !important;
		overflow-y: hidden !important;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-inline: contain;
		touch-action: pan-x;
		scroll-behavior: smooth;
		justify-content: flex-start;
	}

	.single-product div.product
	.woocommerce-product-gallery .flex-control-thumbs li {
		flex: 0 0 clamp(68px, 19vw, 86px) !important;
		min-width: 68px;
	}
}


/* =========================================================
   Ver1.6.3：SPサムネイルを確実に横ドラッグ可能にする
========================================================= */
@media screen and (max-width: 767px) {
	.single-product div.product .woocommerce-product-gallery,
	.single-product div.product .woocommerce-product-gallery .flex-viewport {
		overflow: visible !important;
	}

	.single-product div.product .woocommerce-product-gallery .flex-control-thumbs {
		position: relative !important;
		display: flex !important;
		flex-wrap: nowrap !important;
		width: calc(100% + 16px) !important;
		max-width: none !important;
		margin: 10px -16px 0 0 !important;
		padding: 0 16px 5px 0 !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		-webkit-overflow-scrolling: touch;
		touch-action: pan-x !important;
		scroll-snap-type: none !important;
		cursor: grab;
	}

	.single-product div.product .woocommerce-product-gallery .flex-control-thumbs:active {
		cursor: grabbing;
	}

	.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li {
		flex: 0 0 76px !important;
		width: 76px !important;
		min-width: 76px !important;
		max-width: 76px !important;
	}
}