/*
 * Galerie des fiches produits (inc/galerie.php), comme les boutiques de
 * mode : miniatures en colonne à gauche, défilantes ; grande photo à droite.
 * Mobile : photos à faire glisser. Sans JavaScript : photos empilées.
 */

.kadef-galerie {
	position: relative;
}

/* Repère des textes masqués (position absolue) : sans lui, ils sortaient
   du défilé et élargissaient la page mobile (une largeur d'écran par
   photo, le téléphone dézoomait). */
.kadef-galerie__stage,
.kadef-galerie__thumbs {
	position: relative;
}

.kadef-galerie__thumb {
	display: block;
	width: 100%;
	min-height: 44px;
	margin: 0;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 0;
	background: var(--kadef-white);
	cursor: pointer;
	opacity: 0.7;
	transition: opacity 0.2s, border-color 0.2s;
}

.kadef-galerie__thumb img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

.kadef-galerie__thumb:hover,
.kadef-galerie__thumb[aria-current="true"] {
	border-color: var(--kadef-ink);
	opacity: 1;
}

.kadef-galerie__thumb:focus-visible,
.kadef-galerie__zoom:focus-visible {
	outline: 2px solid var(--kadef-ink);
	outline-offset: 2px;
}

.kadef-galerie__slide {
	margin: 0;
	background: var(--kadef-white);
}

.kadef-galerie__zoom {
	display: block;
	cursor: zoom-in;
}

/* Ratio fixe, quelle que soit la photo : sinon chaque photo a sa hauteur et la
   page saute à chaque miniature (la règle de hauteur de WooCommerce / Astra,
   plus spécifique, l'emportait). Sélecteur au moins aussi précis qu'eux. */
.woocommerce div.product div.images.kadef-galerie .kadef-galerie__slide img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: contain;
}

/* Desktop et tablette : miniatures à gauche, une seule grande photo. */
@media (min-width: 768px) {
	.kadef-galerie.is-ready {
		display: grid;
		grid-template-columns: 76px minmax(0, 1fr);
		gap: 12px;
		align-items: start;
	}

	/* Hauteur = celle de la grande photo (contain: size : la colonne ne la fait
	   pas varier) ; barre de défilement toujours réservée, la largeur des
	   miniatures ne change plus quand elle apparaît. */
	.kadef-galerie__thumbs {
		display: flex;
		flex-direction: column;
		gap: 8px;
		align-self: stretch;
		min-height: 0;
		contain: size;
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-gutter: stable;
		scrollbar-width: thin;
	}

	/* Badge « -25 % » d'Astra : posé par Astra dans l'angle de la fiche, il
	   recouvrait la première miniature et interceptait ses clics. Il passe sur
	   le coin de la grande photo (colonne de miniatures + écart + marge) et
	   laisse passer les clics. */
	.single-product div.product .ast-onsale-card {
		left: calc(76px + 12px + 12px);
		pointer-events: none;
	}

	.kadef-galerie:not(.is-ready) .kadef-galerie__thumbs {
		display: none;
	}

	.kadef-galerie.is-ready .kadef-galerie__slide:not(.is-active) {
		display: none;
	}

	.kadef-galerie:not(.is-ready) .kadef-galerie__slide + .kadef-galerie__slide {
		margin-top: 12px;
	}
}

/* Mobile : photos à faire glisser, miniatures en bande sous la photo. */
@media (max-width: 767px) {
	.kadef-galerie__stage {
		display: flex;
		gap: 8px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.kadef-galerie__slide {
		flex: 0 0 100%;
		scroll-snap-align: start;
	}

	.kadef-galerie__slide[hidden] {
		display: none;
	}

	.kadef-galerie__thumbs {
		display: flex;
		gap: 6px;
		order: 2;
		margin-top: 8px;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.kadef-galerie.is-ready {
		display: flex;
		flex-direction: column;
	}

	.kadef-galerie__thumb {
		flex: 0 0 56px;
	}
}

.kadef-galerie__thumb[hidden] {
	display: none;
}

/* Agrandissement plein écran. Bouton en position absolue : en position
   fixe dans le dialog, Chrome Android ne dessinait plus que le fond noir. */
.kadef-galerie__dialog {
	inset: 0;
	width: 100vw;
	max-width: 100vw;
	height: 100vh;
	height: 100dvh;
	max-height: 100vh;
	max-height: 100dvh;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 0;
	background: var(--kadef-white);
}

.kadef-galerie__dialog::backdrop {
	background: var(--kadef-white);
}

/* Les photos de la couleur choisie défilent du doigt, une par une. */
.kadef-galerie__track {
	display: flex;
	width: 100%;
	height: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.kadef-galerie__track::-webkit-scrollbar {
	display: none;
}

.kadef-galerie__full {
	display: block;
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	object-fit: contain;
	scroll-snap-align: center;
	scroll-snap-stop: always;
	cursor: zoom-out;
}

.kadef-galerie__count {
	position: absolute;
	bottom: 16px;
	left: 50%;
	margin: 0;
	padding: 4px 12px;
	transform: translateX(-50%);
	background: var(--kadef-white);
	color: var(--kadef-ink);
	font-size: 0.875rem;
	letter-spacing: 0.08em;
}

.kadef-galerie__count:empty {
	display: none;
}

.kadef-galerie__dialog .kadef-galerie__close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 1;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid var(--kadef-ink);
	border-radius: 0;
	background: var(--kadef-white);
	color: var(--kadef-ink);
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
	.kadef-galerie__thumb {
		transition: none;
	}
}