/* =========================================================================
   Header, navigation, overlays, footer
   ========================================================================= */

/* ---------- header ---------- */

.zz-header {
	position: sticky;
	top: 0;
	z-index: 90;
	background: var(--bone);
	border-bottom: 1px solid var(--line);
	transition: background var(--t), border-color var(--t), color var(--t);
}

/* Over the hero the header is transparent and white until the page scrolls. */
.zz-header--overlay {
	position: fixed;
	left: 0; right: 0;
	width: 100%;
	max-width: 100vw;
	background: transparent;
	border-bottom-color: transparent;
	color: #fff;
}

/* Fashion photography is often bright at the top, so the white header needs a
   scrim of its own rather than relying on the image. */
.zz-header--overlay::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: calc(var(--header-h) + 48px);
	background: linear-gradient(180deg, rgba(28, 24, 20, .46), rgba(28, 24, 20, 0));
	pointer-events: none;
	transition: opacity var(--t);
}
.zz-header--overlay .zz-header__row { position: relative; z-index: 1; }

.zz-header--overlay.is-mega {
	background: var(--bone);
	border-bottom-color: transparent;
	color: var(--ink);
}
.zz-header--overlay.is-mega::before { opacity: 0; }

.zz-header--overlay.is-stuck {
	position: fixed;
	background: var(--bone);
	border-bottom-color: var(--line);
	color: var(--ink);
}
.zz-header--overlay.is-stuck::before { opacity: 0; }

.zz-header__row {
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gut);
	height: var(--header-h);
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 16px;
}

.zz-brand { justify-self: center; }
.zz-logo {
	font-size: 17px;
	font-weight: 500;
	letter-spacing: .34em;
	text-indent: .34em;
	line-height: 1;
}
.zz-logo--sm { font-size: 14px; }
.zz-logo--footer { font-size: 20px; }

.zz-header__end { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }

/* ---------- language ---------- */

.zz-langs { display: flex; align-items: center; gap: 9px; font-size: 11px; letter-spacing: .12em; }
.zz-langs a { color: var(--muted); transition: color var(--t-fast); }
.zz-langs a:hover { color: inherit; }
.zz-langs__on { position: relative; }
.zz-langs__on::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -4px;
	height: 1px;
	background: currentColor;
}

.zz-langs--header { margin-right: 10px; }
/* Four codes plus two icons do not fit beside a centred wordmark on a phone;
   there the switcher lives at the foot of the menu drawer instead. */
@media (max-width: 859px) { .zz-langs--header { display: none; } }

.zz-header--overlay .zz-langs a { color: rgba(255, 255, 255, .62); }
.zz-header--overlay .zz-langs a:hover,
.zz-header--overlay .zz-langs__on { color: #fff; }

.zz-langs--drawer {
	margin-top: 34px;
	padding-top: 22px;
	border-top: 1px solid var(--line);
	gap: 16px;
	font-size: 12px;
}

.zz-iconbtn {
	width: 40px; height: 40px;
	display: grid; place-items: center;
	color: inherit;
	position: relative;
	transition: opacity var(--t-fast);
}
.zz-iconbtn:hover { opacity: .6; }

.zz-burger { display: grid; }
@media (min-width: 1024px) { .zz-burger { display: none; } }

.zz-bag__n {
	position: absolute;
	top: 7px; right: 5px;
	font-size: 9.5px;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1;
}
.zz-bag__n.is-empty { display: none; }

/* ---------- desktop nav ---------- */

.zz-nav { display: none; }
@media (min-width: 1024px) { .zz-nav { display: block; } }

.zz-nav__list { display: flex; align-items: center; gap: 28px; }
.zz-nav__item { position: static; }

.zz-nav__link {
	position: relative;
	display: inline-block;
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	padding-block: 6px;
}
.zz-nav__link::after {
	content: "";
	position: absolute;
	left: 0; right: .14em; bottom: 0;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--t);
}
.zz-nav__link:hover::after,
.zz-nav__item.is-open .zz-nav__link::after { transform: scaleX(1); }

/* ---------- mega menu ---------- */

.zz-mega {
	position: absolute;
	left: 0; right: 0;
	top: 100%;
	background: var(--bone);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	color: var(--ink);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity var(--t), transform var(--t), visibility var(--t);
	pointer-events: none;
}
.zz-nav__item.is-open .zz-mega { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }

.zz-mega__inner {
	max-width: var(--wrap);
	margin-inline: auto;
	padding: 48px var(--gut) 56px;
	display: grid;
	grid-template-columns: minmax(180px, 1fr) 3fr;
	gap: 56px;
}

.zz-mega__list ul { display: grid; gap: 10px; }
.zz-mega__list a {
	font-size: 14px;
	color: var(--ink-2);
	transition: color var(--t-fast);
}
.zz-mega__list a:hover { color: var(--ink); }

.zz-mega__figures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.zz-mega__figure { display: block; }
.zz-mega__img { display: block; overflow: hidden; background: var(--paper); }
.zz-mega__img img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform 1.1s var(--ease); }
.zz-mega__figure:hover .zz-mega__img img { transform: scale(1.03); }
.zz-mega__cap {
	display: block;
	margin-top: 12px;
	font-size: 11.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
}

/* ---------- scrim, panels, drawers ---------- */

.zz-scrim {
	position: fixed;
	inset: 0;
	background: rgba(28, 24, 20, .32);
	z-index: 95;
	opacity: 0;
	transition: opacity var(--t);
}
.zz-scrim.is-on { opacity: 1; }

.zz-panel {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 100;
	background: var(--bone);
	transform: translateY(-101%);
	transition: transform var(--t);
	max-height: 100vh;
	overflow-y: auto;
	overscroll-behavior: contain;
}
.zz-panel[hidden] { display: none; }
.zz-panel.is-open { transform: none; }

.zz-panel__bar {
	max-width: var(--wrap);
	margin-inline: auto;
	padding: 0 var(--gut);
	height: var(--header-h);
	display: flex;
	align-items: center;
	gap: 16px;
	border-bottom: 1px solid var(--line);
}
.zz-searchform { flex: 1; }
.zz-searchform input[type="search"] {
	width: 100%;
	border: 0;
	background: none;
	outline: none;
	font-size: clamp(18px, 3vw, 28px);
	letter-spacing: -.01em;
	padding: 0;
}
.zz-searchform input::-webkit-search-cancel-button { display: none; }

.zz-panel__body { max-width: var(--wrap); margin-inline: auto; padding: 40px var(--gut) 64px; }
.zz-panel__links { display: grid; gap: 14px; }
.zz-panel__links a { font-size: clamp(22px, 4vw, 38px); letter-spacing: -.02em; }
.zz-panel__links a:hover { color: var(--muted); }

.zz-drawer {
	position: fixed;
	top: 0; bottom: 0;
	z-index: 100;
	width: min(440px, 92vw);
	background: var(--bone);
	display: flex;
	flex-direction: column;
	transition: transform var(--t);
}
.zz-drawer[hidden] { display: none; }
.zz-drawer--right { right: 0; transform: translateX(101%); }
.zz-drawer--left { left: 0; transform: translateX(-101%); }
.zz-drawer.is-open { transform: none; }

.zz-drawer__head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 0 20px;
	height: var(--header-h);
	border-bottom: 1px solid var(--line);
	flex: none;
}
.zz-drawer__title { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; }
.zz-drawer__inner { display: contents; }
.zz-drawer__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 24px 20px; }
.zz-drawer__foot { flex: none; padding: 20px 20px calc(20px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }

.zz-drawer__total { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; }
.zz-drawer__total strong { font-size: 17px; font-weight: 400; }
.zz-drawer__note { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 6px 0 18px; }
.zz-drawer__link { display: block; text-align: center; margin-top: 14px; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.zz-drawer__link:hover { color: var(--ink); }
.zz-drawer__empty { margin: auto; padding: 60px 24px; text-align: center; }
.zz-drawer__empty p { color: var(--muted); margin-bottom: 24px; }

/* mobile nav */

.zz-mnav { display: grid; gap: 4px; }
.zz-mnav li a {
	display: block;
	padding: 12px 0;
	font-size: 22px;
	letter-spacing: -.02em;
	border-bottom: 1px solid var(--line);
}
.zz-mnav--small li a { font-size: 14px; letter-spacing: 0; color: var(--ink-2); }
.zz-mnav__label { margin: 36px 0 12px; }

/* ---------- promises ---------- */

.zz-promises { border-top: 1px solid var(--line); }
.zz-promises ul {
	max-width: 1200px;
	margin-inline: auto;
	padding: clamp(40px, 5vw, 58px) var(--gut);
	display: grid;
	gap: clamp(30px, 3.4vw, 44px);
	grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 900px) { .zz-promises ul { grid-template-columns: repeat(4, 1fr); } }


/* Four promises of different lengths only read as one row when each sits
   centred on its own axis, under its own icon. Side by side they left-align
   against ragged text and the row looks knocked out of true. */
.zz-promises li {
	display: grid;
	justify-items: center;
	align-content: start;
	gap: 11px;
	text-align: center;
}
.zz-promises .zz-icon { color: var(--muted-2); }
.zz-promises span { display: grid; gap: 5px; }
.zz-promises strong { font-size: 12.5px; font-weight: 500; letter-spacing: .06em; }
.zz-promises em {
	font-style: normal;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--muted);
	max-width: 22ch;
	margin-inline: auto;
	/* Keeps a two-line caption from breaking as one long line and one word. */
	text-wrap: balance;
}

/* ---------- footer ---------- */

.zz-footer { background: var(--ink-surface); color: var(--bone); }

.zz-footer__top {
	max-width: var(--wrap);
	margin-inline: auto;
	padding: clamp(56px, 7vw, 88px) var(--gut);
	display: grid;
	gap: 44px;
	grid-template-columns: 1fr;
}
@media (min-width: 720px) { .zz-footer__top { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .zz-footer__top { grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: 56px; } }

.zz-footer .zz-eyebrow { color: rgba(244, 241, 236, .5); }
.zz-footer__brand p { margin-top: 18px; max-width: 32ch; color: rgba(244, 241, 236, .62); font-size: 13.5px; line-height: 1.7; }
.zz-footer__col ul { display: grid; gap: 10px; }
.zz-footer__col a { font-size: 13.5px; color: rgba(244, 241, 236, .62); transition: color var(--t-fast); }
.zz-footer__col a:hover { color: var(--bone); }
.zz-footer__note { font-size: 13px; color: rgba(244, 241, 236, .62); margin-bottom: 16px; max-width: 28ch; line-height: 1.6; }

.zz-signup { display: flex; align-items: center; border-bottom: 1px solid rgba(244, 241, 236, .3); }
.zz-signup input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: none;
	outline: none;
	color: var(--bone);
	font-size: 14px;
	padding: 10px 0;
}
.zz-signup input::placeholder { color: rgba(244, 241, 236, .45); }
.zz-signup button { color: var(--bone); padding: 8px; transition: transform var(--t-fast); }
.zz-signup button:hover { transform: translateX(3px); }

.zz-footer__bottom {
	max-width: var(--wrap);
	margin-inline: auto;
	padding: 22px var(--gut);
	border-top: 1px solid rgba(244, 241, 236, .14);
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
	justify-content: center;
	text-align: center;
	font-size: 11.5px;
	letter-spacing: .08em;
	color: rgba(244, 241, 236, .5);
}
.zz-footer__legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.zz-footer__legal a:hover { color: var(--bone); }

/* ---------- trader details ---------- */

/* This block sat outside the footer's wrap, so on a wide screen its text ran
   right up against the left edge of the window. It gets the same column and
   gutter as the row beneath it, and reads centred with it. */
.zz-trader {
	max-width: var(--wrap);
	margin-inline: auto;
	border-top: 1px solid rgba(244, 241, 236, .12);
	padding: 26px var(--gut) 6px;
	display: grid;
	gap: 5px;
	justify-items: center;
	text-align: center;
	font-size: 12px;
	line-height: 1.7;
	color: rgba(244, 241, 236, .62);
}
.zz-trader__name { color: rgba(244, 241, 236, .9); letter-spacing: .04em; }
.zz-trader a { color: inherit; border-bottom: 1px solid rgba(244, 241, 236, .25); }
.zz-trader a:hover { color: var(--bone); border-color: var(--bone); }