/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

/* ============================================
   GALERIE PRODUIT - [product_gallery]
   ============================================ */

/* Container principal */
.product-gallery {
	position: relative;
	width: 100%;
	overflow: hidden;
}

/* Container des images */
.gallery-images {
	position: relative;
	aspect-ratio: 1;
}

/* Image individuelle */
.gallery-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	z-index: 0;
}

.gallery-image img {
	aspect-ratio: 1;
	object-fit: contain;
	width: 100%;
	height: 100%;
}

/* Flèches de navigation */
.gallery-arrow {
	position: absolute;
	width: 50px;
	height: 50px;
	padding: 15px;
	background-color: var(--blanc) !important;
	color: #fff;
	border: none;
	cursor: pointer;
	font-size: 24px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.3s;
	z-index: 3;
}

.gallery-arrow.up-arrow {
	top: 10px;
	left: 50%;
	transform: translateX(-50%) rotate(180deg);
}

.gallery-arrow.down-arrow {
	bottom: 10px;
	left: 50%;
	transform: translateX(-50%);
}

.gallery-arrow svg {
	fill: var(--texte);
	width: 100%;
	height: 100%;
}

/* ============================================
   LIGHTBOX - Bouton loupe
   ============================================ */

/* Bouton loupe lightbox - commun aux deux modes */
.gallery-lightbox-button {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 50px;
	height: 50px;
	padding: 15px;
	background-color: var(--blanc) !important;
	color: #fff;
	border: none;
	cursor: pointer;
	font-size: 24px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.3s;
	z-index: 5;
}

.gallery-lightbox-button svg {
	fill: var(--texte);
	width: 100%;
	height: 100%;
	transform: rotate(270deg);
}

/* Position du bouton loupe pour la galerie par défaut */
.product-gallery--default .gallery-lightbox-button {
	z-index: 15;
}

/* Position du bouton loupe pour la galerie thumbnails */
.product-gallery--thumbnails .gallery-main-image {
	position: relative;
}

.product-gallery--thumbnails .gallery-lightbox-button {
	z-index: 15;
}

/* PhotoSwipe lightbox overlay */
.pswp {
	z-index: 10002 !important;
}

/* ============================================
   ZOOM - Modes de zoom au survol
   ============================================ */

/* Mode Inner et Lens : overflow hidden pour contenir l'image zoomée */
.product-gallery[data-zoom-mode="inner"] .gallery-images,
.product-gallery[data-zoom-mode="inner"] .gallery-main-image,
.product-gallery[data-zoom-mode="lens"] .gallery-images,
.product-gallery[data-zoom-mode="lens"] .gallery-main-image {
	overflow: hidden;
}

/* Mode Lens : styles de la loupe */
.zoom-lens {
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
	backdrop-filter: blur(1px);
}

/* Curseur de zoom quand le zoom est actif */
.product-gallery[data-zoom-enabled="true"] .gallery-main-image,
.product-gallery[data-zoom-enabled="true"] .gallery-images {
	cursor: crosshair;
}

/* ============================================
   GALERIE THUMBNAILS - [product_gallery] mode thumbnails
   ============================================ */

.product-gallery--thumbnails {
	--gallery-gap: 10px;
	display: flex;
	gap: var(--gallery-gap);
	overflow: visible;
}

/* Positions */
.product-gallery--thumbnails-bottom {
	flex-direction: column;
}

.product-gallery--thumbnails-top {
	flex-direction: column-reverse;
}

.product-gallery--thumbnails-right {
	flex-direction: row;
}

.product-gallery--thumbnails-left {
	flex-direction: row-reverse;
}

/* Image principale */
.product-gallery--thumbnails .gallery-main-image {
	flex: 1;
	aspect-ratio: 1;
	overflow: hidden;
	min-width: 0;
	min-height: 0;
}

.product-gallery--thumbnails .gallery-main-image a {
	display: block;
	width: 100%;
	height: 100%;
}

.product-gallery--thumbnails .gallery-main-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: opacity 0.2s ease;
}

/* Container thumbnails */
.product-gallery--thumbnails .gallery-thumbnails {
	display: flex;
	align-items: center;
	gap: var(--gallery-gap);
}

/* Horizontal (bottom/top) */
.product-gallery--thumbnails-bottom .gallery-thumbnails,
.product-gallery--thumbnails-top .gallery-thumbnails {
	flex-direction: row;
	justify-content: center;
	width: 100%;
}

/* Vertical (left/right) */
.product-gallery--thumbnails-left .gallery-thumbnails,
.product-gallery--thumbnails-right .gallery-thumbnails {
	flex-direction: column;
}

/* Track des thumbnails - wrapper pour limiter la zone visible */
.gallery-thumbnails-wrapper {
	overflow: hidden;
	flex: 1;
	min-width: 0;
	min-height: 0;
}

/* Track des thumbnails */
.gallery-thumbnails-track {
	display: flex;
	gap: var(--gallery-gap);
	transition: transform 0.3s ease;
}

/* Limiter la largeur/hauteur visible selon le nombre configuré */
.product-gallery--thumbnails-bottom .gallery-thumbnails-wrapper,
.product-gallery--thumbnails-top .gallery-thumbnails-wrapper {
	/* Largeur max = (thumb_size * visible_count) + (gap * (visible_count - 1)) */
	max-width: calc((var(--thumb-size, 80px) * var(--visible-count, 4)) + (var(--gallery-gap, 10px) * (var(--visible-count, 4) - 1)));
}

.product-gallery--thumbnails-left .gallery-thumbnails-wrapper,
.product-gallery--thumbnails-right .gallery-thumbnails-wrapper {
	/* Hauteur max pour disposition verticale */
	max-height: calc((var(--thumb-size, 80px) * var(--visible-count, 4)) + (var(--gallery-gap, 10px) * (var(--visible-count, 4) - 1)));
}

.product-gallery--thumbnails-left .gallery-thumbnails-track,
.product-gallery--thumbnails-right .gallery-thumbnails-track {
	flex-direction: column;
}

/* Thumbnail individuel */
.gallery-thumbnail {
	display: flex;
	aspect-ratio: 1;
	cursor: pointer;
	opacity: 0.6;
	transition: opacity 0.2s ease, border-color 0.2s ease;
	flex-shrink: 0;
	border: 2px solid transparent;
}

.gallery-thumbnail.active {
	opacity: 1;
	border-color: var(--texte, #091F2C);
}

.gallery-thumbnail:hover {
	opacity: 1;
}

.gallery-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	flex: 1;
	min-width: 0;
	min-height: 0;
}

/* Taille des thumbnails selon la position */
.product-gallery--thumbnails-bottom .gallery-thumbnail,
.product-gallery--thumbnails-top .gallery-thumbnail {
	width: 80px;
	height: 80px;
}

.product-gallery--thumbnails-left .gallery-thumbnail,
.product-gallery--thumbnails-right .gallery-thumbnail {
	width: 80px;
	height: 80px;
}

/* Flèches navigation thumbnails */
.gallery-thumb-arrow {
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 8px;
	transition: opacity 0.2s ease;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 36px;
	height: 36px;
}

.gallery-thumb-arrow:not(:disabled):hover {
	opacity: 1 !important;
	background: transparent;
}

.gallery-thumb-arrow:disabled {
	opacity: 0.3;
	cursor: not-allowed;
}

.gallery-thumb-arrow:disabled:hover {
	background: transparent;
}

.gallery-thumb-arrow svg {
	width: 15px;
	height: 15px;
	fill: var(--texte, #091F2C);
}

/* Rotation des flèches selon la position */
.product-gallery--thumbnails-bottom .gallery-thumb-prev svg,
.product-gallery--thumbnails-top .gallery-thumb-next svg {
	transform: rotate(90deg);
}

.product-gallery--thumbnails-bottom .gallery-thumb-next svg,
.product-gallery--thumbnails-top .gallery-thumb-prev svg {
	transform: rotate(-90deg);
}

.product-gallery--thumbnails-left .gallery-thumb-prev svg,
.product-gallery--thumbnails-right .gallery-thumb-prev svg {
	transform: rotate(180deg);
}

/* Responsive - Mobile */
@media (max-width: 768px) {
	.product-gallery--thumbnails-left,
	.product-gallery--thumbnails-right {
		flex-direction: column;
	}

	/* Tous les modes ont width 100% sur mobile (layout horizontal) */
	.product-gallery--thumbnails .gallery-thumbnails {
		width: 100%;
	}

	.product-gallery--thumbnails-left .gallery-thumbnails,
	.product-gallery--thumbnails-right .gallery-thumbnails {
		flex-direction: row;
	}

	.product-gallery--thumbnails-left .gallery-thumbnails-track,
	.product-gallery--thumbnails-right .gallery-thumbnails-track {
		flex-direction: row;
	}

	/* Thumbnails dynamiques (taille calculée selon le nombre visible) */
	.product-gallery--thumbnails .gallery-thumbnail {
		width: calc(100% / var(--visible-count) - var(--gallery-gap) * (var(--visible-count) - 1) / var(--visible-count));
		height: auto !important;
	}

	/* En mobile, les layouts left/right deviennent horizontaux */
	.product-gallery--thumbnails-left .gallery-thumbnails-wrapper,
	.product-gallery--thumbnails-right .gallery-thumbnails-wrapper {
		max-height: none;
		max-width: calc(100% - var(--gallery-gap) * 2 - 36px * 2);
	}

	/* Rotation des flèches en mode responsive */
	.product-gallery--thumbnails-left .gallery-thumb-prev svg,
	.product-gallery--thumbnails-right .gallery-thumb-prev svg {
		transform: rotate(90deg);
	}

	.product-gallery--thumbnails-left .gallery-thumb-next svg,
	.product-gallery--thumbnails-right .gallery-thumb-next svg {
		transform: rotate(-90deg);
	}
}

/* ============================================
   LOOP PRODUIT - [loop_product]
   ============================================ */

div.custom-loop-container {
	width: 100%;
}