/* =========================================================
   ANOPRI ELEMENTOR PRODUCT CARDS — v1.2
   Optimisé pour Elementor Loop Grid / Loop Carousel
   Le style Standard reprend les proportions de l'archive ANOPRI.
   ========================================================= */

:root {
	--anopri-card-accent: var(--global-palette1, #febd69);
	--anopri-card-dark: var(--global-palette3, #111111);
	--anopri-card-text: var(--global-palette4, #666666);
	--anopri-card-muted: var(--global-palette5, #777777);
	--anopri-card-border: var(--global-palette7, #f2f2f2);
	--anopri-card-page: var(--global-palette8, #f5f5f5);
	--anopri-card-surface: var(--global-palette9, #ffffff);
	--anopri-loader-image: url("../images/anopri-loader-grey.webp");
}

/* =========================================================
   NORMALISATION ELEMENTOR
   Supprime les grands espaces générés par les widgets Shortcode
   et par les gaps de conteneur.
   ========================================================= */

.anopri-product-card {
	--widgets-spacing: 0px !important;
	--widgets-spacing-row: 0px !important;
	--widgets-spacing-column: 0px !important;

	position: relative;
	display: flex !important;
	flex-direction: column !important;
	gap: 0 !important;

	width: 100%;
	min-width: 0;
	height: 100%;

	margin: 0 !important;
	padding: 8px !important;

	background: var(--anopri-card-surface) !important;
	border: 1px solid transparent !important;
	border-radius: 6px !important;
	box-shadow: none !important;
	overflow: hidden !important;

	transform: none;
	transition:
		border-color .2s ease,
		box-shadow .2s ease,
		transform .2s ease;
}

.anopri-product-card > .elementor-element,
.anopri-product-card .elementor-widget-shortcode,
.anopri-product-card .elementor-widget-shortcode > .elementor-widget-container,
.anopri-product-card .elementor-widget-container {
	min-width: 0;
	margin: 0 !important;
	padding: 0 !important;
}

.anopri-product-card .elementor-widget-shortcode {
	--kit-widget-spacing: 0px !important;
	margin-block-end: 0 !important;
}

.anopri-product-card p {
	margin-top: 0;
}

@media (hover: hover) {
	.anopri-product-card:hover {
		border-color: var(--anopri-card-border) !important;
		box-shadow: 0 5px 16px rgba(0,0,0,.07) !important;
		transform: translateY(-1px);
	}
}

/* =========================================================
   CONTENU À NE JAMAIS AFFICHER DANS LES CARTES
   ========================================================= */

.anopri-product-card .product-excerpt,
.anopri-product-card .anopri-product-excerpt,
.anopri-product-card span.onsale,
.anopri-product-card .onsale {
	display: none !important;
}

/* =========================================================
   IMAGE — mêmes proportions que l'archive
   ========================================================= */

.anopri-product-image {
	position: relative;
	display: block;

	width: 100%;
	aspect-ratio: 1 / 1;

	margin: 0 0 10px !important;
	padding: 0 !important;

	background: var(--anopri-card-surface);
	overflow: hidden;
}

.anopri-product-image__link {
	display: flex !important;

	width: 100%;
	height: 100%;

	align-items: center;
	justify-content: center;

	text-decoration: none !important;
}

.anopri-product-image__img {
	display: block;

	width: 100% !important;
	height: 100% !important;

	margin: 0 !important;
	padding: 0 !important;

	object-fit: contain;
	object-position: center;

	background: var(--anopri-card-surface);

	transform: none !important;
}

/* =========================================================
   BADGE RUPTURE DE STOCK
   Orange + texte blanc, desktop et mobile
   ========================================================= */

.anopri-stock-badge.anopri-out-of-stock-badge {
	position: absolute !important;

	top: 10px !important;
	left: 10px !important;
	z-index: 100 !important;

	display: inline-flex !important;
	align-items: center;
	justify-content: center;

	width: auto !important;
	max-width: calc(100% - 20px);

	margin: 0 !important;
	padding: 6px 10px !important;

	color: var(--anopri-card-surface) !important;
	background: var(--anopri-card-accent) !important;

	border: 0 !important;
	border-radius: 5px !important;

	font-family: var(--global-body-font-family, sans-serif);
	font-size: 11px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;

	text-align: center;
	white-space: nowrap;

	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;

	pointer-events: none;
}

@media (hover: hover) {
	.anopri-product-card:hover .anopri-out-of-stock-badge {
		color: var(--anopri-card-surface) !important;
		background: var(--anopri-card-accent) !important;
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
	}
}

/* =========================================================
   TITRE — noir, orange au hover desktop
   ========================================================= */

.anopri-product-title {
	display: -webkit-box;

	min-height: 43px;

	margin: 0 0 5px !important;
	padding: 0 !important;

	overflow: hidden;

	color: var(--anopri-card-dark) !important;

	font-family: var(--global-body-font-family, sans-serif);
	font-size: 15px !important;
	font-weight: 400 !important;
	line-height: 1.45 !important;
	letter-spacing: 0 !important;

	text-transform: none !important;

	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.anopri-product-title a {
	color: var(--anopri-card-dark) !important;
	text-decoration: none !important;
	transition: color .2s ease;
}

@media (hover: hover) {
	.anopri-product-title a:hover {
		color: var(--anopri-card-accent) !important;
	}
}

/* =========================================================
   PRIX — mêmes tailles que l'archive
   ========================================================= */

.anopri-product-price {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;

	gap: 4px 7px;

	width: 100%;
	min-height: 48px;

	margin: 0 0 10px !important;
	padding: 0 !important;

	color: var(--anopri-card-dark) !important;

	font-family: var(--global-body-font-family, sans-serif);
	font-size: 17px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
}

.anopri-product-price > ins {
	order: 1;

	width: 100%;

	margin: 0 !important;
	padding: 0 !important;

	color: var(--anopri-card-dark) !important;

	font-size: 17px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;

	text-decoration: none !important;
}

.anopri-product-price > del {
	order: 2;

	margin: 0 !important;
	padding: 0 !important;

	color: var(--anopri-card-muted) !important;

	font-size: 12px !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;

	opacity: 1 !important;
}

/* Badge de réduction : affiché à côté de l'ancien prix. */
.anopri-product-price .anopri-discount-badge {
	order: 3;

	display: inline-flex !important;
	align-items: center;
	justify-content: center;

	width: auto !important;
	min-width: 0;

	margin: 0 !important;
	padding: 5px 7px !important;

	color: var(--anopri-card-surface) !important;
	background: var(--anopri-card-accent) !important;

	border: 0 !important;
	border-radius: 5px !important;

	font-family: var(--global-body-font-family, sans-serif);
	font-size: 11px !important;
	font-weight: 700 !important;
	line-height: 1 !important;

	white-space: nowrap;
	vertical-align: middle;
}

.anopri-product-price .woocommerce-Price-amount,
.anopri-product-price .woocommerce-Price-currencySymbol {
	color: inherit !important;
	font-size: inherit !important;
	font-weight: inherit !important;
}

.anopri-product-price--empty {
	min-height: 48px;
}

/* =========================================================
   BOUTON
   ========================================================= */

.anopri-product-card .anopri-button-slot {
	margin-top: auto !important;
	padding-top: 0 !important;
}

.anopri-product-button {
	display: flex !important;

	width: 100% !important;
	min-height: 48px;

	margin: 0 !important;
	padding: 9px 12px !important;

	align-items: center;
	justify-content: center;

	color: var(--global-palette-btn, var(--anopri-card-dark)) !important;
	background: var(--global-palette-btn-bg, var(--anopri-card-accent)) !important;

	border: 0 !important;
	border-radius: 8px !important;

	box-shadow: 0 3px 8px rgba(0,0,0,.08);

	font-family: var(--global-body-font-family, sans-serif);
	font-size: 16px !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;

	text-align: center;
	text-transform: none !important;
	text-decoration: none !important;

	transition:
		background-color .2s ease,
		color .2s ease,
		transform .15s ease;
}

.anopri-product-button .cart-text {
	display: inline !important;
	color: inherit !important;
}

@media (hover: hover) {
	.anopri-product-button:hover {
		color: var(--global-palette-btn-hover, var(--anopri-card-surface)) !important;
		background: var(--global-palette-btn-bg-hover, var(--global-palette2, #1d2733)) !important;
		transform: translateY(-1px);
	}
}

/* =========================================================
   STANDARD — copie visuelle de la carte archive
   ========================================================= */

.anopri-product-card--standard {
	min-height: 385px;
}

/* =========================================================
   COMPACT — même langage visuel, plus dense
   ========================================================= */

.anopri-product-card--compact {
	min-height: 340px;
	padding: 6px !important;
}

.anopri-product-card--compact .anopri-product-image {
	margin-bottom: 7px !important;
}

.anopri-product-card--compact .anopri-product-title {
	min-height: 39px;
	font-size: 13.5px !important;
	line-height: 1.42 !important;
}

.anopri-product-card--compact .anopri-product-price {
	min-height: 42px;
	margin-bottom: 8px !important;
	font-size: 15px !important;
}

.anopri-product-card--compact .anopri-product-price > ins {
	font-size: 15px !important;
}

.anopri-product-card--compact .anopri-product-price > del {
	font-size: 10.5px !important;
}

.anopri-product-card--compact .anopri-product-button {
	min-height: 44px;
	padding: 8px !important;
	font-size: 14px !important;
}

/* =========================================================
   HORIZONTAL
   ========================================================= */

.anopri-product-card--horizontal {
	display: grid !important;
	grid-template-columns: 96px minmax(0, 1fr);
	align-items: center;

	gap: 12px !important;

	min-height: 116px;
	padding: 8px !important;
}

.anopri-product-card--horizontal .anopri-horizontal-media,
.anopri-product-card--horizontal .anopri-horizontal-content {
	min-width: 0;
	margin: 0 !important;
	padding: 0 !important;
}

.anopri-product-card--horizontal .anopri-horizontal-content {
	display: flex !important;
	flex-direction: column !important;
	gap: 0 !important;
	height: 100%;
}

.anopri-product-card--horizontal .anopri-product-image {
	width: 96px;
	aspect-ratio: 1 / 1;
	margin: 0 !important;
}

.anopri-product-card--horizontal .anopri-product-title {
	min-height: 39px;
	margin-bottom: 3px !important;
	font-size: 13.5px !important;
	line-height: 1.4 !important;
}

.anopri-product-card--horizontal .anopri-product-price {
	min-height: auto;
	margin-bottom: 7px !important;
	font-size: 14px !important;
}

.anopri-product-card--horizontal .anopri-product-price > ins {
	font-size: 14px !important;
}

.anopri-product-card--horizontal .anopri-product-button {
	min-height: 38px;
	padding: 7px 10px !important;
	border-radius: 6px !important;
	font-size: 12.5px !important;
}

/* =========================================================
   PRÉCHARGEMENT DYNAMIQUE
   ========================================================= */

.anopri-preload-block {
	position: relative !important;
	isolation: isolate;
}

.anopri-preload-block.anopri-preload-active {
	overflow: hidden;
}

.anopri-preload-block::before {
	content: "";

	position: absolute;
	inset: 0;
	z-index: 90;

	pointer-events: none;
	border-radius: inherit;

	background-color: var(--anopri-card-surface);
	background-image:
		var(--anopri-loader-image),
		linear-gradient(
			105deg,
			transparent 24%,
			rgba(255,255,255,.56) 40%,
			rgba(255,255,255,.94) 50%,
			rgba(255,255,255,.56) 60%,
			transparent 76%
		);

	background-position: center, 150% 0;
	background-repeat: no-repeat, no-repeat;
	background-size: min(66%, 256px) auto, 220% 100%;

	opacity: 0;
	visibility: hidden;

	transition:
		opacity .28s ease,
		visibility .28s ease;
}

.anopri-preload-block.anopri-preload-active::before {
	opacity: 1;
	visibility: visible;
	animation: anopri-block-shimmer 1.45s linear infinite;
}

.anopri-preload-block.anopri-preload-ready::before {
	opacity: 0;
	visibility: hidden;
}

@keyframes anopri-block-shimmer {
	from {
		background-position: center, 150% 0;
	}
	to {
		background-position: center, -100% 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.anopri-preload-block.anopri-preload-active::before {
		animation: none;
	}
}

/* =========================================================
   TABLETTE
   ========================================================= */

@media (min-width: 768px) and (max-width: 1100px) {
	.anopri-product-card--standard {
		min-height: 360px;
	}

	.anopri-product-title {
		font-size: 14px !important;
	}

	.anopri-product-price,
	.anopri-product-price > ins {
		font-size: 16px !important;
	}

	.anopri-product-button {
		min-height: 46px;
		font-size: 15px !important;
	}
}

/* =========================================================
   MOBILE — reprend exactement les proportions de l'archive
   ========================================================= */

@media (max-width: 767px) {
	.anopri-product-card {
		min-height: 320px;
		padding: 5px !important;
		border-radius: 6px !important;
	}

	.anopri-product-image {
		margin-bottom: 8px !important;
	}

	.anopri-product-title {
		min-height: 39px;
		margin-bottom: 5px !important;
		font-size: 13px !important;
		line-height: 1.45 !important;
	}

	.anopri-product-price {
		min-height: 43px;
		margin-bottom: 8px !important;
		font-size: 15px !important;
	}

	.anopri-product-price > ins {
		font-size: 15px !important;
	}

	.anopri-product-price > del {
		font-size: 10.5px !important;
	}

	.anopri-product-price .anopri-discount-badge {
		padding: 4px 5px !important;
		font-size: 10.5px !important;
	}

	.anopri-product-button {
		min-height: 45px;
		padding: 8px !important;
		border-radius: 7px !important;
		font-size: 14px !important;
	}

	.anopri-stock-badge.anopri-out-of-stock-badge {
		top: 7px !important;
		left: 7px !important;
		max-width: calc(100% - 14px);
		padding: 5px 7px !important;
		font-size: 10px !important;
	}

	.anopri-product-card--compact {
		min-height: 290px;
		padding: 4px !important;
	}

	.anopri-product-card--compact .anopri-product-title {
		min-height: 37px;
		font-size: 12.5px !important;
	}

	.anopri-product-card--compact .anopri-product-price {
		min-height: 40px;
		font-size: 14px !important;
	}

	.anopri-product-card--compact .anopri-product-price > ins {
		font-size: 14px !important;
	}

	.anopri-product-card--compact .anopri-product-button {
		min-height: 41px;
		font-size: 13px !important;
	}

	.anopri-product-card--horizontal {
		grid-template-columns: 78px minmax(0, 1fr);
		gap: 9px !important;
		min-height: 102px;
		padding: 5px !important;
	}

	.anopri-product-card--horizontal .anopri-product-image {
		width: 78px;
	}

	.anopri-product-card--horizontal .anopri-product-title {
		min-height: 35px;
		font-size: 12px !important;
		line-height: 1.4 !important;
	}

	.anopri-product-card--horizontal .anopri-product-price {
		margin-bottom: 5px !important;
		font-size: 12.5px !important;
	}

	.anopri-product-card--horizontal .anopri-product-price > ins {
		font-size: 12.5px !important;
	}

	.anopri-product-card--horizontal .anopri-product-button {
		min-height: 34px;
		padding: 6px 8px !important;
		font-size: 11.5px !important;
	}

	.anopri-preload-block::before {
		background-size: min(62%, 180px) auto, 220% 100%;
	}
}

/* =========================================================
   TRÈS PETITS ÉCRANS
   ========================================================= */

@media (max-width: 380px) {
	.anopri-product-card {
		padding: 4px !important;
	}

	.anopri-product-title {
		font-size: 12.5px !important;
	}

	.anopri-product-price,
	.anopri-product-price > ins {
		font-size: 14px !important;
	}

	.anopri-product-button {
		min-height: 43px;
		font-size: 13px !important;
	}
}


/* =========================================================
   WPC BADGE MANAGEMENT — INTÉGRATION AUX CARTES ANOPRI
   =========================================================
   Les couleurs, formes, icônes et styles restent gérés par WPCBM.
   ANOPRI ne fait ici que fournir le bon contexte de positionnement.
   ========================================================= */

.anopri-product-card .anopri-wpcbm-position:empty {
	display: none !important;
}

.anopri-product-card .anopri-wpcbm-position {
	position: relative;
	z-index: 12;

	width: 100%;
	min-width: 0;

	margin: 0 0 5px !important;
	padding: 0 !important;
}

.anopri-product-card
.anopri-product-image
> .anopri-wpcbm-archive-image {
	position: absolute !important;
	inset: 0 !important;
	z-index: 85 !important;

	width: 100% !important;
	height: 100% !important;

	margin: 0 !important;
	padding: 0 !important;

	pointer-events: none;
}

/* Les badges eux-mêmes peuvent rester cliquables si WPCBM leur donne un lien. */
.anopri-product-card
.anopri-product-image
.anopri-wpcbm-archive-image
.wpcbm-badge {
	pointer-events: auto;
}

/* Les groupes WPCBM doivent rester au-dessus de l'image et sous le shimmer. */
.anopri-product-card
.anopri-product-image
.wpcbm-badges {
	z-index: 86 !important;
}

/* Le wrapper WPCBM est aussi notre zone image : pas de marge parasite. */
.anopri-product-card
.anopri-product-image.wpcbm-wrapper {
	position: relative !important;
	margin: 0 0 10px !important;
	padding: 0 !important;
}

/* Badges placés avant/après titre, prix ou bouton : rendu compact. */
.anopri-product-card
.anopri-wpcbm-position
.wpcbm-badges-flat {
	margin: 0 !important;
	padding: 0 !important;
}

/* Aucun style visuel WPCBM n'est écrasé ici volontairement. */

@media (max-width: 767px) {
	.anopri-product-card .anopri-wpcbm-position {
		margin-bottom: 4px !important;
	}

	.anopri-product-card
	.anopri-product-image.wpcbm-wrapper {
		margin-bottom: 8px !important;
	}
}
