/**
 * UN Image Produit — single-product gallery widget.
 *
 * Fixed-ratio hero (never resizes on variation/thumb change) + thumbnail strip.
 * The lightbox group anchors are visually hidden; the hero/thumbs are browse
 * controls. Depends on un-tokens for design tokens.
 */

.un-product-image {
	--un-pimg-ratio: 1 / 1;
	--un-pimg-fit: cover;
	--un-pimg-gap: 8px;
	--un-pimg-thumb-size: 72px;
	--un-pimg-thumb-border: 2px;
	--un-pimg-hover-zoom: 1.05;

	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--un-pimg-gap);
	width: 100%;
}

/* --- Hero stage --- */

.un-product-image__stage {
	position: relative;
	overflow: hidden;
	background: var(--un-bg-soft);
	width: 100%;
}

.un-product-image__hero-link {
	display: block;
	cursor: zoom-in;
	line-height: 0;
}

.un-product-image__hero {
	display: block;
	width: 100%;
	transition: transform 0.35s ease;
}

.un-product-image__hero-link:hover .un-product-image__hero {
	transform: scale(var(--un-pimg-hover-zoom));
}

/* Fixed-ratio lives on the <img> itself (a replaced element with width:100%),
   so it always has a real in-flow height. Putting the ratio on the stage with
   an absolutely-positioned hero collapses to 0 inside Elementor's flex columns
   (mobile), letting the image bleed behind the price/add-to-cart. */
.un-product-image[data-ratio-mode="fixed"] .un-product-image__hero {
	aspect-ratio: var(--un-pimg-ratio);
	object-fit: var(--un-pimg-fit);
}

/* Original ratio: the image dictates the box height. */
.un-product-image[data-ratio-mode="original"] .un-product-image__hero {
	height: auto;
}

/* --- Lightbox group (visually hidden, read by Elementor's lightbox) --- */

.un-product-image__lb {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --- Thumbnails --- */

.un-product-image__thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--un-pimg-gap);
}

.un-product-image__thumb {
	flex: 0 0 auto;
	width: var(--un-pimg-thumb-size);
	height: var(--un-pimg-thumb-size);
	padding: 0;
	border: var(--un-pimg-thumb-border) solid var(--un-border);
	border-radius: inherit;
	background: var(--un-bg-soft);
	cursor: pointer;
	overflow: hidden;
	transition: border-color 0.2s ease;
}

.un-product-image__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.un-product-image__thumb.is-active {
	border-color: var(--un-rose);
}

.un-product-image__thumb:focus-visible {
	outline: 2px solid var(--un-rose);
	outline-offset: 2px;
}

/* --- Thumbnails to the left (desktop) --- */

.un-product-image[data-thumb-pos="left"] {
	flex-direction: row;
	align-items: flex-start;
}

.un-product-image[data-thumb-pos="left"] .un-product-image__stage {
	flex: 1 1 auto;
	min-width: 0;
	order: 2;
}

.un-product-image[data-thumb-pos="left"] .un-product-image__thumbs {
	flex-direction: column;
	flex-wrap: nowrap;
	order: 1;
}

/* On mobile, left thumbnails always drop below the hero. */
@media (max-width: 767px) {
	.un-product-image[data-thumb-pos="left"] {
		flex-direction: column;
	}

	.un-product-image[data-thumb-pos="left"] .un-product-image__stage {
		order: 1;
	}

	.un-product-image[data-thumb-pos="left"] .un-product-image__thumbs {
		flex-direction: row;
		flex-wrap: wrap;
		order: 2;
	}
}