/* =========================================================
   MDV - Suggestions de produits (fiche produit)
   Rendu par le shortcode [mmv_suggestions]
   ========================================================= */

.mmv-suggestions {
	background: #fffbf0;
	padding: 80px 0 90px;
}

.mmv-suggestions__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

/* --- Un bloc = un titre + une grille --- */
.mmv-sugg + .mmv-sugg {
	margin-top: 64px;
}

/* Titres de rangee : meme traitement que les titres de section de la
   fiche produit (texte or, encadre de deux filets). */
.mmv-suggestions .mmv-sugg__titre {
	display: flex;
	align-items: center;
	gap: 32px;
	font-family: "Alegreya SC", Georgia, serif;
	font-size: 24px;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: uppercase;
	color: #B29760;
	margin: 0 0 76px;
}

.mmv-sugg__titre::before,
.mmv-sugg__titre::after {
	content: "";
	flex: 1;
	height: 1px;
	background: #B29760;
}

/* --- Grille : 4 / 2 / 1 --- */
.mmv-sugg__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: 28px;
}

/* Une carte par colonne, toutes de la meme hauteur : les prix et les
   boutons Ajouter restent alignes meme si une fiche n a ni cuvee ni
   millesime. */
.mmv-sugg__item {
	flex: 0 1 calc((100% - 84px) / 4);
	max-width: calc((100% - 84px) / 4);
	align-self: stretch;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.mmv-sugg__item > .elementor {
	width: 100%;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.mmv-sugg__item .wine-card {
	flex: 1;
}

/* La ligne prix + bouton est poussee en bas de la carte. */
.mmv-suggestions .wine-card .e-con:has(> .wine-price) {
	margin-top: auto;
}

@media (max-width: 1024px) {
	.mmv-suggestions { padding: 60px 0 66px; }
	.mmv-sugg + .mmv-sugg { margin-top: 48px; }
	.mmv-sugg__grid { gap: 20px; }
	.mmv-sugg__item { flex-basis: calc((100% - 20px) / 2); max-width: calc((100% - 20px) / 2); }
}

@media (max-width: 600px) {
	.mmv-suggestions { padding: 48px 0 52px; }
	.mmv-sugg__titre { font-size: 19px; }
	.mmv-sugg__item { flex-basis: 100%; max-width: 100%; }
}

/* --- Apparition au defilement -------------------------------------
   Meme grammaire que les blocs de la fiche : les filets du titre se
   tracent depuis le centre, les cartes montent en cascade.
   La classe .mmv-anim est posee par le script : sans JS, rien n est cache.
   ------------------------------------------------------------------ */

.mmv-suggestions.mmv-anim .mmv-sugg__titre::before,
.mmv-suggestions.mmv-anim .mmv-sugg__titre::after {
	transform: scaleX(0);
	transition: transform .85s cubic-bezier(.16, .84, .44, 1) .1s;
}

.mmv-suggestions.mmv-anim .mmv-sugg__titre::before { transform-origin: right center; }
.mmv-suggestions.mmv-anim .mmv-sugg__titre::after  { transform-origin: left center; }

.mmv-suggestions.mmv-anim .mmv-sugg.est-vue .mmv-sugg__titre::before,
.mmv-suggestions.mmv-anim .mmv-sugg.est-vue .mmv-sugg__titre::after {
	transform: scaleX(1);
}

.mmv-suggestions.mmv-anim .mmv-sugg__item {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .7s cubic-bezier(.16, .84, .44, 1),
	            transform .7s cubic-bezier(.16, .84, .44, 1);
}

.mmv-suggestions.mmv-anim .mmv-sugg.est-vue .mmv-sugg__item {
	opacity: 1;
	transform: none;
}

.mmv-suggestions.mmv-anim .mmv-sugg.est-vue .mmv-sugg__item:nth-child(2) { transition-delay: .08s; }
.mmv-suggestions.mmv-anim .mmv-sugg.est-vue .mmv-sugg__item:nth-child(3) { transition-delay: .16s; }
.mmv-suggestions.mmv-anim .mmv-sugg.est-vue .mmv-sugg__item:nth-child(4) { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
	.mmv-suggestions.mmv-anim .mmv-sugg__titre::before,
	.mmv-suggestions.mmv-anim .mmv-sugg__titre::after {
		transform: scaleX(1) !important;
		transition: none !important;
	}
	.mmv-suggestions.mmv-anim .mmv-sugg__item {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}