/* =========================================================================
   Home
   ========================================================================= */

/* ---------- hero ---------- */

.zz-hero {
	position: relative;
	height: 100svh;
	min-height: 560px;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background: var(--ink-surface);
}

.zz-hero__media { position: absolute; inset: 0; }
.zz-hero__img {
	width: 100%; height: 100%;
	object-fit: cover;
	/* Fashion shots are portrait; centred cropping cuts the head off in a
	   landscape hero, so the frame favours the upper body. */
	object-position: center 22%;
	/* A slow settle on load: the image arrives rather than snaps in. */
	animation: zz-settle 1.6s var(--ease) both;
}
@keyframes zz-settle { from { transform: scale(1.06); opacity: .6; } to { transform: none; opacity: 1; } }

/* Readability without dimming the whole frame. */
.zz-hero::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 60%;
	background: linear-gradient(180deg, rgba(28, 24, 20, 0), rgba(28, 24, 20, .62));
	pointer-events: none;
}

.zz-hero__text {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding: 0 var(--gut) clamp(56px, 8vh, 96px);
	color: #fff;
}
.zz-hero__title {
	font-size: clamp(34px, 6vw, 76px);
	letter-spacing: -.035em;
	max-width: 16ch;
	margin-bottom: 30px;
	animation: zz-rise 1.1s var(--ease) .25s both;
}
@keyframes zz-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.zz-hero .zz-eyebrow { animation: zz-rise 1.1s var(--ease) .15s both; }
.zz-hero__links { animation: zz-rise 1.1s var(--ease) .4s both; }

.zz-hero__scroll {
	position: absolute;
	left: 50%; bottom: 26px;
	width: 1px; height: 44px;
	background: rgba(255, 255, 255, .5);
	z-index: 2;
	transform-origin: top;
	animation: zz-scroll 2.4s var(--ease) infinite;
}
@keyframes zz-scroll { 0% { transform: scaleY(0); } 40% { transform: scaleY(1); } 100% { transform: scaleY(0); transform-origin: bottom; } }
@media (max-width: 720px) {
	.zz-hero__scroll { display: none; }
	.zz-hero__img { object-position: center 12%; }
}

/* ---------- category split ---------- */

.zz-split { display: grid; grid-template-columns: 1fr; }
@media (min-width: 760px) { .zz-split { grid-template-columns: 1fr 1fr; } }

.zz-split__item { position: relative; display: block; overflow: hidden; }
.zz-split__media { display: block; }
.zz-split__media img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	transition: transform 1.4s var(--ease);
}
@media (min-width: 760px) { .zz-split__media img { aspect-ratio: 3 / 4; } }

/* A frame left standing alone would sit beside a hole in the grid. The
   template marks it; here it crosses both columns and takes a landscape crop,
   so it closes the run of categories rather than breaking it. */
@media (min-width: 760px) {
	.zz-split__item--band { grid-column: 1 / -1; }
	.zz-split__item--band .zz-split__media img { aspect-ratio: 21 / 9; }

	/* A category with its own landscape photograph crosses both columns. The
	   band is taken high in the frame: at full length the faces come out tiny,
	   and the dress still reads down to the slit at this height. */
	.zz-split__item--wide { grid-column: 1 / -1; }
	.zz-split__item--wide .zz-split__media img {
		aspect-ratio: 2.2 / 1;
		height: auto;
		object-position: center 8%;
	}
}
.zz-split__item:hover .zz-split__media img { transform: scale(1.04); }

.zz-split__cap {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: clamp(24px, 3vw, 44px);
	display: grid;
	gap: 12px;
	justify-items: start;
	color: #fff;
	background: linear-gradient(180deg, rgba(28, 24, 20, 0), rgba(28, 24, 20, .5));
}
.zz-split__name { font-size: clamp(22px, 3vw, 34px); letter-spacing: -.025em; }

/* ---------- editorial frame ---------- */

/* One picture, no products: the pause between two product sections. */
.zz-editorial { position: relative; overflow: hidden; background: var(--ink-surface); }
.zz-editorial__media { display: block; }
.zz-editorial__media img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	/* Fashion frames are portrait; a centred crop beheads them. */
	object-position: center 22%;
}
@media (max-width: 760px) { .zz-editorial__media img { aspect-ratio: 4 / 5; } }

/* Set low and to the left: a centred line lands square on whatever the
   photograph is actually about. */
.zz-editorial__text {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 2;
	display: grid;
	justify-items: start;
	gap: 16px;
	padding: clamp(24px, 4vw, 56px) clamp(24px, 5vw, 72px);
	color: #fff;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(28, 24, 20, 0), rgba(28, 24, 20, .5));
}
.zz-editorial__text a { pointer-events: auto; }
.zz-editorial__line {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 300;
	font-size: clamp(22px, 3.4vw, 42px);
	line-height: 1.2;
	letter-spacing: -.01em;
	max-width: 20ch;
}

/* The wordmark sits centred over the frame. It is live text, not part of the
   photograph: crisp at any pixel density, and editable from the admin. */
.zz-editorial__text--mark {
	inset: 0;
	align-content: center;
	justify-items: center;
	text-align: center;
	gap: clamp(26px, 3.4vw, 44px);
	padding: var(--gut);
	background: linear-gradient(180deg, rgba(28, 24, 20, .28), rgba(28, 24, 20, .44));
}

.zz-editorial__mark {
	display: grid;
	gap: clamp(10px, 1.2vw, 18px);
	line-height: 1;
}

/* Letter-spacing hangs off the last character, so the indent puts the line
   back in the middle. Same trick as the header wordmark. */
.zz-editorial__name {
	font-size: clamp(24px, 5vw, 62px);
	font-weight: 400;
	letter-spacing: .3em;
	text-indent: .3em;
}

.zz-editorial__sub {
	font-size: clamp(10px, 1.25vw, 15px);
	font-weight: 400;
	letter-spacing: .52em;
	text-indent: .52em;
	color: rgba(255, 255, 255, .86);
}

/* ---------- film ---------- */

/* Room on every side: the clip is a breath between two product sections, so
   the space around it is as much a part of it as the picture. */
.zz-film {
	padding-block: calc(var(--section) * 1.15);
	padding-inline: var(--gut);
}

/* A standing panel rather than a wide band: the clip is shot upright, and a
   column of film with the page open on both sides reads richer than the same
   footage stretched across the width. */
.zz-film__media {
	width: 100%;
	max-width: 480px;
	aspect-ratio: 9 / 16;
	margin-inline: auto;
	overflow: hidden;
	background: var(--ink-surface);
}

/* On a wide screen the height leads and the width follows it, so the panel
   never grows into a tower on a tall monitor. */
@media (min-width: 760px) {
	.zz-film__media {
		width: auto;
		max-width: none;
		height: min(780px, 82svh);
	}
}

.zz-film__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.zz-film__foot {
	max-width: var(--wrap);
	margin-inline: auto;
	display: grid;
	justify-items: center;
	gap: clamp(20px, 2.6vw, 30px);
	padding-top: clamp(34px, 4.5vw, 58px);
	text-align: center;
}

.zz-film__line {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 300;
	font-size: clamp(22px, 3.2vw, 38px);
	line-height: 1.25;
	letter-spacing: -.01em;
	max-width: 22ch;
}

.zz-film__cta { min-width: 220px; }

/* ---------- best sellers ---------- */

/* This block took the place of a full-bleed photograph, so it carries a tint
   of its own — otherwise three product sections run together unbroken. */
.zz-bestsellers { background: var(--bone-2); }

/* Eight across two rows reads well on a wide screen; on a phone the same
   eight become four rows, which is too long a scroll before the next
   section, so the tail is dropped and the "Всички" link carries it. */
@media (max-width: 899px) {
	.zz-bestsellers .zz-grid > *:nth-child(n + 7) { display: none; }
}

/* ---------- last arrivals ---------- */

/* The captions sit centred under their photographs in this rail. The cards
   elsewhere stay left-aligned, where they line up against a grid. */
.zz-arrivals .zz-card__body { justify-items: center; text-align: center; }
.zz-arrivals .zz-card__price { justify-content: center; }
.zz-arrivals .zz-dots { justify-content: center; }