/* Carrousels "Collaborations" et "Où trouver Pezi" — fiches produit Pezi. */

.pezi-product-collab,
.pezi-product-stockists {
	width: 100%;
	box-sizing: border-box;
	margin-top: 72px;
}

.pezi-product-collab__heading,
.pezi-product-stockists__heading {
	max-width: var(--pezi-container-max, 1240px);
	margin: 0 auto 24px;
	padding: 0 24px;
}

/*
 * Les titres du thème (h2 en Poppins, uppercase) portent un letter-spacing
 * très large (8px) pensé pour de gros titres de section desktop. Sur un
 * titre à plusieurs mots ("Où trouver Pezi") ou déjà long
 * ("Collaborations"), cet espacement fait dépasser le texte de son
 * conteneur sur mobile et casse la ligne au milieu d'un mot (ex: une seule
 * lettre isolée). On reprend ici la même typographie (Manrope) et un
 * espacement raisonnable que le reste des sections produit, pour un rendu
 * cohérent à toutes les tailles d'écran.
 */
.pezi-product-collab__heading h2,
.pezi-product-stockists__heading h2 {
	font-family: 'Manrope', Arial, sans-serif;
	font-weight: 800;
	letter-spacing: 0;
	margin: 0 0 8px;
	font-size: clamp(22px, 4vw, 30px);
	line-height: 1.2;
	overflow-wrap: normal;
	word-break: normal;
}

.pezi-product-collab__heading p:not(.pezi-eyebrow) {
	max-width: 620px;
	margin: 0;
	color: #68625e;
	font-size: 15px;
	line-height: 1.6;
}

/* ---------- Collaborations ---------- */

.pezi-product-collab__stage {
	position: relative;
	width: 100%;
	max-width: var(--pezi-container-max, 1240px);
	margin: 0 auto;
	height: 480px;
	overflow: hidden;
	background: #1c1815;
	border-radius: 4px;
}

.pezi-product-collab__slide {
	position: absolute;
	inset: 0;
}

.pezi-product-collab__slide[hidden] {
	display: none;
}

.pezi-product-collab__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(0.82);
}

.pezi-product-collab__photo--placeholder {
	background: linear-gradient(135deg, #2a241f, #1c1815);
}

.pezi-product-collab__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(10, 9, 8, 0.82) 0%, rgba(10, 9, 8, 0.5) 32%, rgba(10, 9, 8, 0.08) 56%, rgba(10, 9, 8, 0.28) 100%);
}

.pezi-product-collab__content {
	position: absolute;
	left: 40px;
	top: 40px;
	width: min(340px, calc(100% - 80px));
	z-index: 1;
}

.pezi-product-collab__logo {
	width: 108px;
	height: 108px;
	border-radius: 14px;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
	box-sizing: border-box;
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32);
	margin-bottom: 22px;
}

.pezi-product-collab__logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.pezi-product-collab__name {
	font-weight: 800;
	font-size: 14px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #fff;
	opacity: 0.9;
	margin-bottom: 22px;
}

.pezi-product-collab__content p {
	font-size: 15px;
	line-height: 1.65;
	color: #efe9e2;
	margin: 0;
}

.pezi-product-collab__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background: rgba(16, 16, 16, 0.55);
	border: none;
	color: #fff;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	z-index: 2;
}

.pezi-product-collab__arrow--prev {
	left: 20px;
}

.pezi-product-collab__arrow--next {
	right: 20px;
}

.pezi-product-collab__dots {
	position: absolute;
	left: 40px;
	bottom: 22px;
	display: flex;
	gap: 7px;
	z-index: 2;
}

.pezi-product-collab__dot {
	width: 7px;
	height: 7px;
	padding: 0;
	border: none;
	border-radius: 999px;
	background: #ddd3c8;
	cursor: pointer;
}

.pezi-product-collab__dot.is-active {
	background: var(--pezi-primary, #c45824);
	width: 20px;
}

/* ---------- Où trouver Pezi ---------- */

.pezi-product-stockists__row {
	display: flex;
	gap: 18px;
	max-width: var(--pezi-container-max, 1240px);
	margin: 0 auto;
	padding: 0 24px 8px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
}

.pezi-product-stockists__row::-webkit-scrollbar {
	height: 6px;
}

.pezi-product-stockists__card {
	position: relative;
	flex: 0 0 300px;
	width: 300px;
	min-width: 300px;
	max-width: 300px;
	height: 360px;
	scroll-snap-align: start;
	overflow: hidden;
	border-radius: 4px;
}

.pezi-product-stockists__card img,
.pezi-product-stockists__card-placeholder {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pezi-product-stockists__card-placeholder {
	background: linear-gradient(135deg, #eae3dc, #e2dad0);
}

.pezi-product-stockists__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(16, 16, 16, 0.78), rgba(16, 16, 16, 0.02) 55%);
}

.pezi-product-stockists__info {
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 16px;
	color: #fff;
	display: flex;
	flex-direction: column;
	gap: 4px;
	overflow-wrap: normal;
	word-break: normal;
}

.pezi-product-stockists__info strong {
	font-size: 15px;
	font-weight: 800;
}

.pezi-product-stockists__info span {
	font-size: 12px;
	line-height: 1.5;
	color: #e7e1da;
}

/*
 * Media queries regroupées en fin de fichier : les règles ci-dessus (mêmes
 * sélecteurs, même spécificité) doivent toutes être déclarées AVANT ces
 * surcharges mobiles pour que la cascade CSS les applique correctement --
 * une règle mobile placée plus haut dans le fichier qu'une règle de base de
 * même spécificité se ferait sinon écraser par cette dernière.
 */

@media (max-width: 780px) {
	.pezi-product-collab,
	.pezi-product-stockists {
		margin-top: 56px;
	}
	.pezi-product-collab__stage {
		/*
		 * Les photos de collaborations envoyées par les partenaires sont
		 * généralement au format paysage (devanture de boutique). Une boîte
		 * fixe haute et étroite (proche du carré) forçait un recadrage
		 * agressif et coupait le sujet. Un ratio 4:3 laisse voir bien plus
		 * de largeur de la photo d'origine.
		 */
		aspect-ratio: 4 / 3;
		height: auto;
		border-radius: 0;
	}
	.pezi-product-collab__content {
		left: 24px;
		top: 24px;
		width: calc(100% - 48px);
	}
}

@media (max-width: 480px) {
	.pezi-product-collab__heading,
	.pezi-product-stockists__heading {
		padding: 0 16px;
	}
	.pezi-product-collab__heading h2,
	.pezi-product-stockists__heading h2 {
		font-size: clamp(20px, 6vw, 24px);
	}
	.pezi-product-stockists__row {
		padding: 0 16px 8px;
		gap: 12px;
	}
	.pezi-product-collab__stage {
		aspect-ratio: 4 / 3;
		height: auto;
	}
	.pezi-product-collab__content {
		left: 18px;
		top: 18px;
		width: calc(100% - 36px);
	}
	.pezi-product-collab__logo {
		width: 84px;
		height: 84px;
		margin-bottom: 16px;
	}
	.pezi-product-collab__content p {
		font-size: 14px;
		line-height: 1.55;
	}
	.pezi-product-collab__arrow {
		width: 40px;
		height: 40px;
	}
	.pezi-product-collab__arrow--prev {
		left: 12px;
	}
	.pezi-product-collab__arrow--next {
		right: 12px;
	}
	.pezi-product-collab__dots {
		left: 18px;
		bottom: 14px;
	}
	.pezi-product-stockists__card {
		flex: 0 0 240px;
		width: 240px;
		min-width: 240px;
		max-width: 240px;
		height: 300px;
	}
}