/*
 * Fichier : produit-mobile-corrige.css
 * Composant reutilisable : carte produit CS3
 * Utilise sur les archives produits et la page d'accueil.
 *
 * Breakpoints alignes sur la grille :
 * - plus de 1200px : 4 produits par ligne
 * - de 769px a 1200px : 3 produits par ligne
 * - de 481px a 768px : 3 produits par ligne
 * - jusqu'a 480px : 2 produits par ligne
 */

/* ----------------------------------------------------------
Carte produit CS3
---------------------------------------------------------- */

.cs3-product-card {
	position: relative;
	min-width: 0;
	border-radius: 4px;
	overflow: hidden;
}

.cs3-product-card__media {
	position: relative;
	width: 100%;
	aspect-ratio: 400 / 489;
	overflow: hidden;
}

/* ----------------------------------------------------------
Voile de lisibilite
---------------------------------------------------------- */

.cs3-product-card__media::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	height: 45%;
	pointer-events: none;
	background: transparent;
}

/* ----------------------------------------------------------
Image produit
---------------------------------------------------------- */

.cs3-product-card__image-link {
	display: block;
	width: 100%;
	height: 100%;
}

.cs3-product-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ----------------------------------------------------------
Reset des liens
---------------------------------------------------------- */

.cs3-product-card a,
.cs3-product-card a:hover,
.cs3-product-card a:focus,
.cs3-product-card a:active,
.cs3-product-card a:visited {
	color: inherit;
	text-decoration: none;
}

.cs3-product-card__image-link,
.cs3-product-card__content-link {
	display: block;
	color: inherit;
	text-decoration: none;
}

/* ----------------------------------------------------------
Slider produit Splide
---------------------------------------------------------- */

.cs3-product-slider,
.cs3-product-slider .splide__track,
.cs3-product-slider .splide__list,
.cs3-product-slider .splide__slide {
	width: 100%;
	height: 100%;
}

.cs3-product-slider {
	position: relative;
}

.cs3-product-slider .splide__track {
	z-index: 1;
}

.cs3-product-slider .splide__arrows {
	position: absolute;
	inset: 0;
	z-index: 5;
	pointer-events: none;
}

.cs3-product-slider .splide__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 24px;
	height: 24px;
	padding: 0;
	background: transparent;
	border: 0;
	opacity: 0;
	pointer-events: auto;
	transition: opacity 180ms ease;
}

.cs3-product-slider .splide__arrow--prev {
	left: 24px;
}

.cs3-product-slider .splide__arrow--next {
	right: 24px;
}

.cs3-product-card:hover .splide__arrow,
.cs3-product-card:focus-within .splide__arrow {
	opacity: 1;
}

.cs3-product-slider .splide__arrow i {
	width: 22px;
	height: 22px;
	color: var(--couleur-secondaire);
}

/* ----------------------------------------------------------
Contenu de la carte
Par defaut, le contenu est superpose sur l'image.
---------------------------------------------------------- */

.cs3-product-card__content-link {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 4;
}

.cs3-product-card__content {
	position: relative;
	z-index: 4;
	display: block;
	padding: 0 16px 16px;
	pointer-events: auto;
}

.cs3-product-card__bottom {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
}

.cs3-product-card__main {
	flex: 1 1 auto;
	min-width: 0;
}

.cs3-product-card__category {
	margin-bottom: 4px;
	font-family: var(--typo-secondaire) !important;
	font-weight: var(--light);
	font-size: 10px;
	line-height: 14px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.cs3-product-card__title {
	min-width: 0;
	margin-bottom: 0 !important;
	font-family: var(--typo-principale) !important;
	font-weight: var(--regular);
	font-size: var(--size-titre-4);
	line-height: calc(var(--size-titre-4) + 4px);
}

.cs3-product-card__price {
	flex: 0 0 auto;
	font-family: var(--typo-secondaire) !important;
	font-weight: var(--light);
	font-size: var(--size-titre-5);
	line-height: calc(var(--size-titre-5) + 4px);
	white-space: nowrap;
}

.cs3-product-card__price-value {
	display: block;
}

.cs3-product-card__price-sup {
	font-size: 14px;
}

.cs3-product-card__price .woocommerce-Price-currencySymbol {
	margin-left: 2px;
	font-size: 20px;
	vertical-align: super;
}

.cs3-product-card__price .amount {
	font-size: inherit;
	font-weight: inherit;
}

/* ----------------------------------------------------------
De 769px a 1200px : grille de 3 produits
Le contenu reste superpose sur l'image.
---------------------------------------------------------- */

@media all and (max-width: 1200px) {
	.cs3-product-card__content-link {
		position: absolute;
		inset: auto 0 0 0;
		z-index: 4;
	}

	.cs3-product-card__content {
		padding:
			0
			clamp(16px, 2vw, 24px)
			clamp(18px, 2.2vw, 28px);
	}

	.cs3-product-card__category {
		font-size: 10px;
		line-height: 14px;
	}

	.cs3-product-card__title {
		font-size: clamp(24px, 2.5vw, 30px);
		line-height: 1.12;
	}

	.cs3-product-card__price {
		font-size: clamp(17px, 1.9vw, 22px);
		line-height: 1.2;
	}

	.cs3-product-card__price-sup {
		font-size: 11px;
	}

	.cs3-product-card__price .woocommerce-Price-currencySymbol {
		font-size: 14px;
	}
}

/* ----------------------------------------------------------
De 481px a 768px : grille de 3 produits
Le contenu reste superpose sur l'image.
---------------------------------------------------------- */

@media all and (max-width: 768px) {
	.cs3-product-card__content-link {
		position: absolute;
		inset: auto 0 0 0;
		z-index: 4;
	}

	.cs3-product-card__content {
		padding: 0 12px 16px;
	}

	.cs3-product-card__bottom {
		gap: 6px;
	}

	.cs3-product-card__category {
		margin-bottom: 4px;
		font-size: 10px;
		line-height: 14px;
	}

	.cs3-product-card__title {
		font-size: 22px;
		line-height: 26px;
	}

	.cs3-product-card__price {
		font-size: 16px;
		line-height: 20px;
	}

	.cs3-product-card__price-sup,
	.cs3-product-card__price .woocommerce-Price-currencySymbol {
		font-size: 11px;
	}

	.cs3-product-card__wishlist {
		top: 12px;
		right: 12px;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	.cs3-product-slider .splide__arrow {
		width: 30px;
		height: 30px;
		opacity: 1;
	}

	.cs3-product-slider .splide__arrow--prev {
		left: 8px;
	}

	.cs3-product-slider .splide__arrow--next {
		right: 8px;
	}
}

/* ----------------------------------------------------------
Accessibilite : reduction des animations
---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.cs3-product-slider .splide__arrow,
	.cs3-product-card__wishlist,
	.cs3-product-card__wishlist .woosw-btn {
		transition: none;
	}
}

/* ----------------------------------------------------------
Jusqu'a 480px : grille de 2 produits
OVERRIDE FINAL : le contenu passe sous l'image.
Ce bloc est volontairement place en dernier pour gagner la cascade.
---------------------------------------------------------- */

@media screen and (max-width: 580px) {
	.cs3-product-card {
		display: flex !important;
		flex-direction: column !important;
		min-width: 0;
		border-radius: 0;
		overflow: visible !important;
	}

	/*
	 * Le media n'impose plus sa hauteur a l'ensemble image + contenu.
	 * Le ratio est transfere sur le lien image uniquement.
	 */
	.cs3-product-card .cs3-product-card__media {
		position: relative;
		display: flex !important;
		flex-direction: column !important;
		width: 100%;
		height: auto !important;
		min-height: 0 !important;
		aspect-ratio: auto !important;
		overflow: visible !important;
	}

	.cs3-product-card .cs3-product-card__image-link {
		position: relative;
		display: block !important;
		flex: 0 0 auto;
		width: 100%;
		height: auto !important;
		aspect-ratio: 400 / 489 !important;
		overflow: hidden;
		border-radius: 4px;
	}

	.cs3-product-card .cs3-product-card__image-link .cs3-product-slider,
	.cs3-product-card .cs3-product-card__image-link .splide__track,
	.cs3-product-card .cs3-product-card__image-link .splide__list,
	.cs3-product-card .cs3-product-card__image-link .splide__slide {
		height: 100% !important;
	}

	.cs3-product-card .cs3-product-card__image {
		display: block;
		width: 100%;
		height: 100% !important;
		object-fit: cover;
	}

	.cs3-product-card .cs3-product-card__media::after {
		display: none !important;
		content: none;
	}

	/* Position relative = element dans le flux, sous l'image. */
	.cs3-product-card .cs3-product-card__content-link {
		position: relative !important;
		top: auto !important;
		right: auto !important;
		bottom: auto !important;
		left: auto !important;
		inset: auto !important;
		z-index: 1;
		display: block !important;
		width: 100%;
		height: auto;
		transform: none !important;
		color: var(--couleur-secondaire);
		background: transparent;
	}

	.cs3-product-card .cs3-product-card__content {
		position: relative !important;
		display: block;
		width: 100%;
		padding: 10px 2px 16px !important;
		transform: none !important;
	}

	.cs3-product-card .cs3-product-card__bottom {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 6px;
		width: 100%;
	}

	.cs3-product-card .cs3-product-card__main {
		flex: 1 1 auto;
		min-width: 0;
	}

	.cs3-product-card .cs3-product-card__category {
		margin: 0 0 3px !important;
		font-size: 10px !important;
		line-height: 14px !important;
		min-height:28px !important;
	}

	.cs3-product-card .cs3-product-card__title {
		margin: 0 !important;
		font-size: 20px !important;
		line-height: 24px !important;
	}

	.cs3-product-card .cs3-product-card__price {
		flex: 0 0 auto;
		margin: 2px 0 0;
		font-size: 12px !important;
		line-height: 16px !important;
	}

	.cs3-product-card .cs3-product-card__price-sup,
	.cs3-product-card .cs3-product-card__price .woocommerce-Price-currencySymbol {
		font-size: 9px !important;
	}

	.cs3-product-card .cs3-product-card__wishlist {
		top: 10px;
		right: 10px;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	.cs3-product-card .cs3-product-card__wishlist .woosw-btn {
		width: 22px;
		height: 22px;
	}

	.cs3-product-card .cs3-product-card__wishlist .woosw-btn-icon {
		width: 16px;
		height: 16px;
		font-size: 16px;
	}

	.cs3-product-card .cs3-product-slider .splide__arrow {
		width: 26px;
		height: 26px;
		opacity: 1;
	}

	.cs3-product-card .cs3-product-slider .splide__arrow--prev {
		left: 0px;
	}

	.cs3-product-card .cs3-product-slider .splide__arrow--next {
		right: 0px;
	}
}