/**
 * Galerie Produit & Pages Produit style Amazon / AliExpress pour nimo
 * Pleine largeur réelle sur mobile (Edge-to-Edge 100%), format 1:1,
 * flèches de navigation, badge compteur (1/N), et images de description pleine largeur.
 */

/* ── 1. Desktop & Global : Galerie Produit Carrée 1:1 ── */
.woocommerce-product-gallery {
	position: relative !important;
	opacity: 1 !important;
	background: #ffffff !important;
	border-radius: 16px !important;
	border: 1px solid #eef2f6 !important;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
	padding: 12px !important;
	margin-block-end: 1.5rem !important;
}

@media (min-width: 782px) {
	.woocommerce-product-gallery {
		position: sticky !important;
		top: 100px !important;
	}
}

.woocommerce-product-gallery .flex-viewport {
	border-radius: 12px !important;
	background: #ffffff !important;
	overflow: hidden !important;
	margin-bottom: 12px !important;
	position: relative !important;
}

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

.woocommerce-product-gallery .woocommerce-product-gallery__image {
	background: #ffffff !important;
}

.woocommerce-product-gallery .woocommerce-product-gallery__image a {
	display: block !important;
	width: 100% !important;
	background: #ffffff !important;
}

.woocommerce-product-gallery .woocommerce-product-gallery__image img {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 1 / 1 !important;
	object-fit: contain !important;
	display: block !important;
	margin: 0 auto !important;
	background: #ffffff !important;
	border-radius: 8px !important;
	transition: transform 0.25s ease !important;
}

/* ── Bouton Loupe / Plein écran (PhotoSwipe Trigger) ── */
.woocommerce-product-gallery .woocommerce-product-gallery__trigger {
	position: absolute !important;
	top: 18px !important;
	right: 18px !important;
	left: auto !important;
	z-index: 25 !important;
	width: 38px !important;
	height: 38px !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, 0.95) !important;
	border: 1px solid rgba(0, 0, 0, 0.08) !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
	backdrop-filter: blur(6px) !important;
	-webkit-backdrop-filter: blur(6px) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	text-decoration: none !important;
	transition: all 0.2s ease !important;
}

.woocommerce-product-gallery .woocommerce-product-gallery__trigger:hover {
	transform: scale(1.08) !important;
	background: #ffffff !important;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18) !important;
}

/* ── Badge Compteur photo (Style AliExpress / Amazon Mobile : 1 / N) ── */
.bn-gallery-counter {
	position: absolute !important;
	bottom: 96px !important;
	right: 18px !important;
	z-index: 25 !important;
	background: rgba(15, 23, 42, 0.72) !important;
	color: #ffffff !important;
	font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 0.5px !important;
	padding: 4px 11px !important;
	border-radius: 20px !important;
	backdrop-filter: blur(8px) !important;
	-webkit-backdrop-filter: blur(8px) !important;
	pointer-events: none !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
	display: flex !important;
	align-items: center !important;
	gap: 4px !important;
}

/* ── Flèches de navigation (Précédent / Suivant) ── */
.woocommerce-product-gallery .flex-direction-nav {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.woocommerce-product-gallery .flex-direction-nav li {
	margin: 0 !important;
	padding: 0 !important;
}

.woocommerce-product-gallery .flex-direction-nav a {
	position: absolute !important;
	top: 42% !important;
	transform: translateY(-50%) !important;
	z-index: 25 !important;
	width: 44px !important;
	height: 44px !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, 0.95) !important;
	border: 1px solid rgba(0, 0, 0, 0.08) !important;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14) !important;
	backdrop-filter: blur(6px) !important;
	-webkit-backdrop-filter: blur(6px) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: #0f172a !important;
	text-decoration: none !important;
	font-size: 0 !important;
	transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
	cursor: pointer !important;
}

.woocommerce-product-gallery .flex-direction-nav a:hover {
	background: #ffffff !important;
	transform: translateY(-50%) scale(1.08) !important;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2) !important;
	color: #000000 !important;
}

.woocommerce-product-gallery .flex-direction-nav a.flex-prev {
	left: 14px !important;
}

.woocommerce-product-gallery .flex-direction-nav a.flex-next {
	right: 14px !important;
}

.woocommerce-product-gallery .flex-direction-nav a::before {
	content:  !important;
	display: block !important;
	width: 11px !important;
	height: 11px !important;
	border-top: 2.5px solid currentColor !important;
	border-right: 2.5px solid currentColor !important;
	transition: transform 0.2s ease !important;
}

.woocommerce-product-gallery .flex-direction-nav a.flex-prev::before {
	transform: rotate(-135deg) translate(-1px, -1px) !important;
}

.woocommerce-product-gallery .flex-direction-nav a.flex-next::before {
	transform: rotate(45deg) translate(-1px, -1px) !important;
}

/* ── Bande de vignettes (Thumbnails) ── */
.woocommerce-product-gallery .flex-control-nav.flex-control-thumbs {
	display: flex !important;
	flex-wrap: nowrap !important;
	overflow-x: auto !important;
	overflow-y: hidden !important;
	gap: 10px !important;
	padding: 10px 4px 6px 4px !important;
	margin: 0 !important;
	list-style: none !important;
	scroll-snap-type: x mandatory !important;
	-webkit-overflow-scrolling: touch !important;
	scrollbar-width: thin !important;
	scrollbar-color: #cbd5e1 transparent !important;
}

.woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar {
	height: 4px !important;
}

.woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar-thumb {
	background: #cbd5e1 !important;
	border-radius: 4px !important;
}

.woocommerce-product-gallery .flex-control-thumbs li {
	flex: 0 0 70px !important;
	width: 70px !important;
	height: 70px !important;
	scroll-snap-align: start !important;
	border-radius: 10px !important;
	overflow: hidden !important;
	border: 2px solid #e2e8f0 !important;
	background: #ffffff !important;
	cursor: pointer !important;
	transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
	box-sizing: border-box !important;
}

.woocommerce-product-gallery .flex-control-thumbs li:hover {
	border-color: #94a3b8 !important;
	transform: translateY(-2px) !important;
}

.woocommerce-product-gallery .flex-control-thumbs li img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	border-radius: 0 !important;
	opacity: 0.75 !important;
	transition: opacity 0.2s ease !important;
}

.woocommerce-product-gallery .flex-control-thumbs li img.flex-active {
	opacity: 1 !important;
}

.woocommerce-product-gallery .flex-control-thumbs li:has(img.flex-active),
.woocommerce-product-gallery .flex-control-thumbs li.bn-thumb-active {
	border-color: #0f172a !important;
	box-shadow: 0 0 0 1px #0f172a, 0 4px 10px rgba(15, 23, 42, 0.15) !important;
	transform: scale(1.05) !important;
}

/* ── 2. Images dans la Description Produit (Sur tous les écrans) ── */
.woocommerce-Tabs-panel--description img,
#tab-description img,
.woocommerce-product-details__short-description img,
.entry-content.wc-tab img {
	max-width: 100% !important;
	height: auto !important;
	display: block !important;
	margin-inline: auto !important;
}

/* ───────────────────────────────────────────────────────────────────────── */
/* 3. REFONTE MOBILE : PLEINE LARGEUR RÉELLE (Style AliExpress & Amazon App) */
/* ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
	html, body, .site, #page {
		overflow-x: hidden !important;
	}

	/* Suppression des marges du conteneur parent sur la page produit mobile */
	.single-product .site-content {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	.single-product .inside-article {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	.single-product .entry-content {
		margin: 0 !important;
		padding: 0 !important;
	}
	.single-product div.product {
		margin: 0 !important;
		padding: 0 !important;
	}

	/* La galerie produit s'étale de bord à bord (AliExpress Mobile) */
	.single-product .woocommerce-product-gallery {
		margin: 0 0 0.8rem 0 !important;
		padding: 0 !important;
		border-radius: 0 !important;
		border: none !important;
		box-shadow: none !important;
		width: 100% !important;
	}
	.single-product .woocommerce-product-gallery .flex-viewport {
		border-radius: 0 !important;
		margin-bottom: 6px !important;
	}
	.single-product .woocommerce-product-gallery .flex-control-thumbs {
		padding-inline: 12px !important;
	}
	.single-product .woocommerce-product-gallery .flex-control-thumbs li {
		flex: 0 0 58px !important;
		width: 58px !important;
		height: 58px !important;
	}
	.single-product .woocommerce-product-gallery .flex-direction-nav a {
		width: 36px !important;
		height: 36px !important;
	}
	.single-product .woocommerce-product-gallery .flex-direction-nav a.flex-prev {
		left: 8px !important;
	}
	.single-product .woocommerce-product-gallery .flex-direction-nav a.flex-next {
		right: 8px !important;
	}
	.single-product .bn-gallery-counter {
		bottom: 74px !important;
		right: 12px !important;
	}

	/* Marge de confort pour tous les textes et le formulaire de commande */
	.single-product .woocommerce-breadcrumb,
	.single-product .single-product-category,
	.single-product .product_title,
	.single-product .summary > p.price,
	.single-product .summary > .woocommerce-product-details__short-description,
	.single-product .aod-cod,
	.single-product .woocommerce-tabs .wc-tabs,
	.single-product #tab-description > h2,
	.single-product #tab-description > h3,
	.single-product #tab-description > h4,
	.single-product #tab-description > ul,
	.single-product #tab-description > ol,
	.single-product #tab-description > blockquote,
	.single-product #tab-description > p:not(:has(img)),
	.single-product #tab-reviews {
		padding-inline: 16px !important;
	}

	/* Description : Les images s'étalent sur 100% de la largeur du téléphone de bord à bord */
	.single-product #tab-description {
		padding: 0 !important;
		margin: 0 !important;
	}
	.single-product #tab-description p {
		margin: 0 0 0.5rem 0 !important;
		padding: 0 !important;
		overflow: visible !important;
	}
	.single-product #tab-description p:has(img),
	.single-product #tab-description figure {
		margin: 0 !important;
		padding: 0 !important;
		width: 100% !important;
	}
	.single-product #tab-description img,
	.single-product #tab-description p img,
	.single-product #tab-description a img,
	.single-product #tab-description figure img,
	.single-product .woocommerce-Tabs-panel--description img {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		display: block !important;
		margin: 0 auto !important;
		border-radius: 0 !important;
		box-shadow: none !important;
	}
}