/* MzabiShop homepage – LAYOUT ONLY. All visuals come from design-system.css */

.mz-home { overflow-x: clip; }

/* Hero */
.mz-hero {
	position: relative;
	isolation: isolate;
	background: var(--mz-ink);
	color: var(--mz-white);
	min-height: clamp(460px, 46vw, 640px);
	display: flex;
	align-items: center;
	overflow: hidden;
	z-index: 0;
}
.mz-hero__slides {
	position: relative;
	width: 100%;
	min-height: inherit;
	z-index: 0;
}
.mz-hero__slide {
	position: absolute;
	inset: 0;
	/* Default (not shown yet): parked just off the right edge, ready to slide in. Mirrored
	   to the left edge under RTL in rtl.css, so slides always enter from the reading
	   direction's "start" side. */
	transform: translateX(100%);
	transition: transform .65s cubic-bezier(.65, 0, .35, 1);
	pointer-events: none;
	z-index: 1;
	will-change: transform;
}
.mz-hero__slide.is-active {
	transform: translateX(0);
	pointer-events: auto;
	z-index: 2;
}
.mz-hero__slide.is-prev {
	/* The slide that was just active, sliding out as the next one slides in. */
	transform: translateX(-100%);
	z-index: 2;
}
.mz-hero__img {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center bottom;
	display: block;
}
/* The gradient lives on each slide (not the outer .mz-hero), not on the triangle's level:
   .mz-hero__slide is its own stacking context, and anything stacked at .mz-hero level would
   sit above the whole slide (image AND text) no matter how high the text's own z-index is
   set — this is what keeps the gradient (needed per-photo, since it slides WITH the photo)
   from trapping the text below it. */
.mz-hero__slide::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(90deg, rgba(17, 18, 20, .95) 0%, rgba(17, 18, 20, .7) 40%, rgba(17, 18, 20, 0) 72%);
}
/* The yellow corner triangle is purely decorative chrome, identical on every slide — it
   belongs on the outer, non-sliding .mz-hero so it stays put in the corner while only the
   photo/text/gradient slide underneath it, instead of sliding away and back with each
   transition. It sits in the top corner, away from where the text ever reaches, so it can
   stay above .mz-hero__slides (z-index 0) without needing to out-rank the text's own
   z-index the way the gradient does. */
.mz-hero::after {
	content: "";
	position: absolute;
	inset: 0 0 auto auto;
	width: clamp(120px, 18vw, 260px);
	aspect-ratio: 1;
	background: var(--mz-yellow);
	clip-path: polygon(100% 0, 0 0, 100% 100%);
	z-index: 5;
}
.mz-hero .mz-container {
	position: relative;
	z-index: 20;
}
.mz-hero__body {
	position: relative;
	z-index: 30;
	padding-block: var(--mz-s6);
	max-width: 640px;
}
.mz-hero__body > * {
	position: relative;
	z-index: 40;
}
.mz-hero__kicker { display: inline-block; margin-bottom: var(--mz-s3); padding: 6px 12px; background: var(--mz-yellow); color: var(--mz-ink); font-size: var(--mz-fs-xs); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.mz-hero h1 { margin: 0 0 var(--mz-s3); font-size: var(--mz-fs-hero); color: var(--mz-white); }
.mz-hero h1 span { color: var(--mz-yellow); }
.mz-hero__lead { margin: 0 0 var(--mz-s4); font-size: var(--mz-fs-lg); max-width: 46ch; opacity: .9; }
.mz-hero__perks { display: flex; flex-wrap: wrap; gap: var(--mz-s3) var(--mz-s4); list-style: none; margin: 0 0 var(--mz-s5); padding: 0; font-size: var(--mz-fs-sm); }
.mz-hero__perks li { display: flex; align-items: center; gap: var(--mz-s2); }
.mz-hero__perks li::before { content: ""; width: 10px; height: 10px; background: var(--mz-yellow); }
.mz-hero__dots {
	position: absolute;
	left: 50%;
	bottom: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	transform: translateX(-50%);
	z-index: 60;
	pointer-events: auto;
}
.mz-hero__dot {
	width: 8px;
	height: 8px;
	min-width: 8px;
	min-height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	display: block;
	flex-shrink: 0;
	box-sizing: border-box;
	line-height: 0;
	background: rgba(255,255,255,.42);
	cursor: pointer;
	transition: transform .25s ease, background-color .25s ease, opacity .25s ease;
}
.mz-hero__dot.is-active {
	width: 8px;
	height: 8px;
	min-width: 8px;
	min-height: 8px;
	border-radius: 50%;
	background: var(--mz-yellow);
	box-shadow: 0 0 0 2px rgba(255,255,255,.18);
}

/* Trust bar */
.mz-trust { background: var(--mz-white); border-bottom: 1px solid var(--mz-grey-300); }
.mz-trust ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); list-style: none; margin: 0 auto; padding: 0; }
.mz-trust li { padding: var(--mz-s3) var(--mz-s4); border-inline-end: 1px solid var(--mz-grey-300); display: flex; flex-direction: column; gap: 2px; }
.mz-trust li:last-child { border-inline-end: 0; }
.mz-trust strong { font-size: var(--mz-fs-sm); text-transform: uppercase; letter-spacing: .03em; }
.mz-trust span { font-size: var(--mz-fs-xs); color: var(--mz-grey-700); }

/* Categories (legacy grid kept for reference, no longer rendered on the homepage) */
.mz-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--mz-s3); }

/* Categories — continuous infinite marquee, square tiles (replaces .mz-cats on the homepage) */
.mz-catm { --mz-cm-size: 200px; --mz-cm-gap: 1.75rem; position: relative; }
.mz-catm__viewport {
	overflow: hidden;
	width: 100%;
	padding: var(--mz-s2) 0 var(--mz-s1);
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
}
.mz-catm__track {
	display: flex;
	align-items: flex-start;
	gap: var(--mz-cm-gap);
	width: max-content;
	/* No padding-inline-start here: the track is duplicated 8+8 items and loops by
	   translateX(-50%) — a one-time leading padding would apply only once (not once per
	   half), throwing the two halves out of sync by that exact amount and showing a small
	   blank/misaligned beat right where the loop seam crosses the viewport. The mask-image
	   fade on .mz-catm__viewport already softens the edges, so no extra spacing is needed
	   here anyway. */
	animation: mzCatmLoop 38s linear infinite;
	will-change: transform;
}
/* Always looping, no hover-pause: this track is plain CSS now (no JS drag handler —
   that was removed because it blocked taps on the category links), so there is no
   interaction to pause FOR anymore; pausing on hover just looked like it was stuck. */
@keyframes mzCatmLoop { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.mz-catm__item { flex: 0 0 auto; width: var(--mz-cm-size); text-align: center; text-decoration: none !important; color: inherit; }
.mz-catm__circle {
	display: flex; align-items: center; justify-content: center;
	width: var(--mz-cm-size); height: var(--mz-cm-size); margin: 0 auto var(--mz-s2);
	border-radius: var(--mz-radius); overflow: hidden;
	background: linear-gradient(145deg, var(--mz-yellow-100), var(--mz-white));
	border: 2px solid rgba(252, 184, 25, .35);
	box-shadow: var(--mz-shadow-1);
	transition: transform .25s var(--mz-ease), border-color .25s var(--mz-ease), box-shadow .25s var(--mz-ease);
}
.mz-catm__circle img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mz-catm__circle .mz-catm__icon { width: 46%; height: 46%; object-fit: contain; }
.mz-catm__item:hover .mz-catm__circle { transform: scale(1.06); border-color: var(--mz-yellow); box-shadow: 0 8px 22px rgba(252, 184, 25, .3); }
.mz-catm__label {
	display: block; font-family: var(--mz-font); font-size: var(--mz-fs-sm); font-weight: 700;
	color: var(--mz-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.mz-catm__item:hover .mz-catm__label { color: var(--mz-yellow-600); }

@media (prefers-reduced-motion: reduce) {
	.mz-catm__track { animation: none; flex-wrap: wrap; width: 100%; justify-content: center; }
	.mz-catm__viewport { -webkit-mask-image: none; mask-image: none; overflow: visible; }
}

/* Horizontal product rail (Nouveautés & Promotions) */
.mz-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: var(--mz-s3); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--mz-yellow) var(--mz-grey-100); padding-bottom: var(--mz-s3); }
.mz-rail > * { scroll-snap-align: start; }
@media (min-width: 1100px) { .mz-rail { grid-auto-columns: calc((100% - 4 * var(--mz-s3)) / 5); } }

/* Product grid (Meilleures ventes) */
.mz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--mz-s3); }

/* Banner layouts */
.mz-banner--tall { min-height: 300px; }
.mz-banner--promo { min-height: clamp(260px, 26vw, 360px); }
.mz-banner--promo .mz-banner__title { font-size: clamp(2.5rem, 6vw, 5rem); }
.mz-mosaic { display: grid; gap: var(--mz-s3); }
.mz-mosaic--2 { grid-template-columns: repeat(2, 1fr); }
.mz-mosaic--3 { grid-template-columns: repeat(3, 1fr); }
.mz-mosaic + .mz-mosaic { margin-top: var(--mz-s3); }
.mz-mosaic--3 .mz-banner__body { max-width: 62%; padding: var(--mz-s4); }
.mz-promo-wrap { display: grid; gap: var(--mz-s4); }

.mz-empty { padding: var(--mz-s5); text-align: center; background: var(--mz-grey-100); color: var(--mz-grey-700); border-radius: var(--mz-radius); }

/* Responsive */
@media (max-width: 1024px) {
	.mz-cats { grid-template-columns: repeat(2, 1fr); }
	.mz-mosaic--3 { grid-template-columns: 1fr 1fr; }
	.mz-catm { --mz-cm-size: 130px; --mz-cm-gap: 1.25rem; }
}
@media (max-width: 700px) {
	.mz-section { padding-block: var(--mz-s5); }
	.mz-hero {
		min-height: 250px;
		height: 250px;
		border-radius: 0;
		align-items: flex-end;
	}
	.mz-hero__slide::before {
		background: linear-gradient(180deg, rgba(17, 18, 20, .18) 0%, rgba(17, 18, 20, .52) 100%);
		z-index: 1;
	}
	.mz-hero::after {
		width: 64px;
		top: 0;
		right: 0;
		opacity: .72;
		z-index: 5;
	}
	.mz-hero__slides,
	.mz-hero__slide {
		height: 250px;
		min-height: 250px;
	}
	.mz-hero__img { object-position: center bottom; }
	.mz-hero__body {
		position: relative;
		padding: 22px 16px 30px;
		max-width: 100%;
		width: 100%;
		z-index: 999;
	}
	.mz-hero__body > * {
		position: relative;
		z-index: 1000;
	}
	.mz-hero__kicker,
	.mz-hero__perks,
	.mz-hero .mz-btn--lg {
		display: none;
	}
	.mz-hero h1 {
		margin: 0;
		font-size: clamp(1.7rem, 7vw, 2.35rem);
		line-height: 1.05;
		max-width: 74%;
	}
	.mz-hero__lead {
		display: block;
		margin: 6px 0 0;
		font-size: .72rem;
		line-height: 1.35;
		max-width: 74%;
		opacity: .92;
	}
	.mz-hero__dots {
		bottom: 8px;
		gap: 7px;
		z-index: 60;
	}
	.mz-hero__dot {
		width: 8px;
		height: 8px;
		min-width: 8px;
		min-height: 8px;
		padding: 0;
		display: block;
		flex-shrink: 0;
		border-radius: 50%;
		background: rgba(255,255,255,.74);
	}
	.mz-hero__dot.is-active {
		width: 8px;
		height: 8px;
		min-width: 8px;
		min-height: 8px;
		border-radius: 50%;
		background: var(--mz-yellow);
	}
	.mz-mosaic--2, .mz-mosaic--3 { grid-template-columns: 1fr; }
	.mz-banner__body, .mz-mosaic--3 .mz-banner__body { max-width: 80%; padding: var(--mz-s3) var(--mz-s4); }
	.mz-grid { grid-template-columns: repeat(2, 1fr); gap: var(--mz-s2); }
	.mz-rail { grid-auto-columns: 62%; }
	.mz-cats { gap: var(--mz-s2); }
	.mz-cat__name { font-size: 1.125rem; }
	.mz-catm { --mz-cm-size: 92px; --mz-cm-gap: 1rem; }
	.mz-catm__label { font-size: var(--mz-fs-xs); }
}

/* Scroll reveal, progressive enhancement */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.mz-card, .mz-cat, .mz-banner { animation: mz-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 25%; }
		@keyframes mz-rise { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }
	}
}

/* Shop — subcategory list under header: EXACT same style/system as homepage Nos univers */
.mz-section--shop-subcats {
	padding-block: var(--mz-s5) var(--mz-s4) !important;
	background: #fff;
	border-bottom: 1px solid #E2E5EA;
	width: 100%;
	max-width: 100%;
	margin: 0;
	position: relative;
	z-index: 5;
}
.mz-section--shop-subcats .mz-head {
	margin-bottom: var(--mz-s4);
}
.mz-section--shop-subcats .mz-catm {
	/* inherit homepage --mz-cm-size / gap / square tiles / animation */
}
@media (max-width: 700px) {
	.mz-section--shop-subcats { padding-block: var(--mz-s4) var(--mz-s3) !important; }
}

/* Shop subcats use homepage tile size / radius / motion (explicit) */
.mz-section--shop-subcats .mz-catm {
	--mz-cm-size: 200px;
	--mz-cm-gap: 1.75rem;
}
.mz-section--shop-subcats .mz-catm__circle {
	border-radius: var(--mz-radius) !important;
}
@media (max-width: 1024px) {
	.mz-section--shop-subcats .mz-catm { --mz-cm-size: 130px; --mz-cm-gap: 1.25rem; }
}
@media (max-width: 700px) {
	.mz-section--shop-subcats .mz-catm { --mz-cm-size: 92px; --mz-cm-gap: 1rem; }
}