/* PEPS4PETS - Déco Polaroid autour du slider Elementor/WooCommerce existant */
.peps-gallery-col {
	overflow: visible !important;
	padding-bottom: clamp(16px, 3vw, 28px) !important;
}

.peps-gallery-col .elementor-widget-woocommerce-product-images > .elementor-widget-container,
.peps-gallery-col .woocommerce-product-gallery {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	transform: none !important;
	padding: 0 !important;
	margin: 0 auto !important;
	max-width: min(100%, 520px);
	width: 100% !important;
	float: none !important;
	overflow: visible !important;
}

/* Rotation sur le viewport uniquement — ne pas toucher à la largeur des slides */
.peps-gallery-col .woocommerce-product-gallery .flex-viewport {
	background: transparent !important;
	padding: 0 !important;
	border: 0 !important;
	box-shadow: none !important;
	transform: rotate(-1.5deg);
	transform-origin: center center;
	margin: 0 auto clamp(20px, 3.5vw, 30px) !important;
	overflow: hidden !important;
}

/*
 * Slides : laisser Flexslider gérer la largeur en px (ne pas mettre width:100% !important).
 * Le cadre Polaroid est sur le lien interne pour ne pas fausser translateX ni la hauteur.
 */
.peps-gallery-col .woocommerce-product-gallery .flex-viewport .slides > li,
.peps-gallery-col .woocommerce-product-gallery .flex-viewport .woocommerce-product-gallery__image {
	float: left !important;
	box-sizing: border-box !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

.peps-gallery-col .woocommerce-product-gallery .flex-viewport .woocommerce-product-gallery__image > a {
	display: block !important;
	width: 100% !important;
	box-sizing: border-box !important;
	background: #fff !important;
	padding: clamp(14px, 2.4vw, 18px) clamp(14px, 2.4vw, 18px) clamp(48px, 8.5vw, 72px) !important;
	border: 1px solid rgba(255, 255, 255, 0.95) !important;
	border-radius: 6px !important;
	box-shadow: 0 20px 50px rgba(139, 78, 106, 0.18) !important;
	line-height: 0 !important;
}

.peps-gallery-col .woocommerce-product-gallery .flex-viewport .woocommerce-product-gallery__image img {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	margin: 0 auto !important;
	border: 3px solid #f7e08b !important;
	border-radius: 3px !important;
	box-sizing: border-box !important;
	box-shadow: inset 0 0 0 1px rgba(255, 251, 209, 0.9) !important;
}

/* Bouton loupe */
.peps-gallery-col .woocommerce-product-gallery__trigger {
	top: clamp(22px, 3.5vw, 30px) !important;
	right: clamp(22px, 3.5vw, 30px) !important;
	width: 34px !important;
	height: 34px !important;
	background: #fff !important;
	border-radius: 50% !important;
	box-shadow: 0 4px 12px rgba(139, 78, 106, 0.15) !important;
	z-index: 5 !important;
}

/* Sécurité : masquer toute loupe de zoom résiduelle */
.peps-gallery-col .zoomImg {
	display: none !important;
}

/* Vignettes */
.woocommerce .peps-gallery-col ol.flex-control-thumbs,
.woocommerce .peps-gallery-col .flex-control-thumbs {
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	align-items: center !important;
	gap: 10px !important;
	margin: 0 auto !important;
	padding: 0 !important;
	transform: none !important;
	list-style: none !important;
	width: 100% !important;
}

.woocommerce .peps-gallery-col .flex-control-thumbs li {
	float: none !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.woocommerce .peps-gallery-col .flex-control-thumbs li img {
	width: clamp(58px, 14vw, 78px) !important;
	height: clamp(58px, 14vw, 78px) !important;
	object-fit: cover !important;
	border: 2px solid #fff !important;
	border-radius: 5px !important;
	box-shadow: 0 8px 18px rgba(139, 78, 106, 0.12) !important;
	opacity: 1 !important;
	transform: none !important;
}

.woocommerce .peps-gallery-col .flex-control-thumbs li img.flex-active,
.woocommerce .peps-gallery-col .flex-control-thumbs li img:hover {
	border-color: #ff5fa3 !important;
	box-shadow: 0 8px 18px rgba(255, 95, 163, 0.22) !important;
}

@media (max-width: 767px) {
	.peps-gallery-col .woocommerce-product-gallery .flex-viewport {
		transform: none;
	}
}