/*
 * Nizu "Find your shade" page (/shade/?tone=...). Mobile first: base = phone, >=768 tablet (3 cols), >=1024 desktop (4 cols).
 * Loaded on the Shade page and wherever a "Nizu: Colour items" loop / the Shade Switch element renders.
 */

/* ---------------------------------------------------------------- Page head */
.nz-shade-head {
	width: 100%;
	margin: var(--nz-s-4, 16px) 0 var(--nz-s-4, 16px);
}

.nz-shade-title {
	margin: 0;
	color: var(--nz-ink, #1b1918);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -.01em;
}

.nz-shade-desc {
	margin: var(--nz-s-2, 8px) 0 0;
	color: var(--nz-ink-2, #6b6466);
	font-size: var(--nz-fs-body, 16px);
	line-height: 1.45;
}

.nz-shade-bar {
	width: 100%;
	margin: var(--nz-s-4, 16px) 0 var(--nz-s-3, 12px);
}

.nz-shade-count {
	margin: 0;
	color: var(--nz-ink-2, #6b6466);
	font-size: var(--nz-fs-secondary, 14px);
	line-height: 1.3;
}

.nz-shade-results,
.nz-shade-empty-wrap {
	width: 100%;
}

@media (min-width: 768px) {
	.nz-shade-title {
		font-size: 34px;
	}

	.nz-shade-seg {
		max-width: 420px;
	}
}

/* ---------------------------------------------------------------- Segmented control: Cool | Neutral | Warm */
.nz-shade-seg {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2px;
	box-sizing: border-box;
	width: 100%;
	padding: 3px;
	border-radius: 12px;
	background: var(--nz-surface, #f5f3f2);
}

.nz-shade-seg .nz-seg__item {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 40px;
	padding: 0 4px;
	border-radius: 9px;
	color: var(--nz-ink-2, #6b6466);
	font: 500 var(--nz-fs-secondary, 14px)/1 var(--nz-font-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif);
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
	transition: background-color 160ms var(--nz-ease, ease), color 160ms var(--nz-ease, ease), box-shadow 160ms var(--nz-ease, ease);
}

html body .nz-shade-seg .nz-seg__item.is-on {
	background: var(--nz-bg, #fff);
	color: var(--nz-ink, #1b1918);
	font-weight: 600;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .14), 0 0 0 .5px rgba(0, 0, 0, .04);
}

.nz-shade-seg .nz-seg__item:focus-visible {
	outline: 2px solid var(--nz-brand, #6f6467);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------- Colour card (component "Colour Card") */
.nz-colour-card {
	position: relative;
}

/* One-tap add: a 44px hit area around a 34px pill on the photo's bottom-right corner. The photo box is the positioned parent. */
.nz-qadd {
	position: absolute;
	right: 2px;
	bottom: 2px;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--nz-ink, #1b1918);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
}

.nz-qadd::before {
	content: "";
	position: absolute;
	inset: 5px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	box-shadow: 0 1px 6px rgba(0, 0, 0, .16);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	transition: background-color 160ms var(--nz-ease, ease), transform 160ms var(--nz-ease, ease);
}

.nz-qadd svg {
	position: relative;
}

.nz-qadd .nz-qadd__ok {
	position: absolute;
	opacity: 0;
	transform: scale(.6);
	transition: opacity 160ms var(--nz-ease, ease), transform 160ms var(--nz-ease, ease);
}

.nz-qadd.is-added {
	color: var(--nz-bg, #fff);
}

.nz-qadd.is-added::before {
	background: var(--nz-ok, #2e7d4f);
}

.nz-qadd.is-added .nz-qadd__ok {
	opacity: 1;
	transform: none;
}

.nz-qadd.is-added .nz-qadd__plus {
	opacity: 0;
}

.nz-qadd.is-busy {
	opacity: .6;
	pointer-events: none;
}

.nz-qadd:active::before {
	transform: scale(.92);
}

.nz-qadd:focus-visible {
	outline: 2px solid var(--nz-brand, #6f6467);
	outline-offset: -2px;
	border-radius: 50%;
}

/* Pressing "+" or the heart must not press the whole card. */
.nz-colour-card:has(.nz-qadd:active),
.nz-colour-card:has(.nz-heart:active) {
	transform: none;
}

.nz-shade-empty {
	margin: 0;
	padding: var(--nz-s-6, 24px) 0;
	color: var(--nz-ink-2, #6b6466);
	font-size: var(--nz-fs-secondary, 14px);
	text-align: center;
}

@media (prefers-reduced-motion: reduce) {
	.nz-shade-seg .nz-seg__item,
	.nz-qadd::before,
	.nz-qadd .nz-qadd__ok {
		transition: none;
	}
}

/* ---------------------------------------------------------------- Undertone guide (owner 2026-10-08)
   One-glance "Not sure of your undertone?" card: 3 tests as a Cool | Neutral | Warm table. Tone colours match the PDP chips. */
.nz-ug {
	--nz-ug-cool: #CFE3F5; --nz-ug-cool-ink: #1B4F7A; --nz-ug-cool-bg: #EEF5FC;
	--nz-ug-neutral: #EAD7C3; --nz-ug-neutral-ink: #5A4130; --nz-ug-neutral-bg: #F7F0E9;
	--nz-ug-warm: #F9C89B; --nz-ug-warm-ink: #7A3410; --nz-ug-warm-bg: #FDEEDF;
	width: 100%;
	margin: 0 0 var(--nz-s-4, 16px);
	border: 1px solid var(--nz-line, #E7E2DF);
	border-radius: var(--nz-r-l, 20px);
	background: var(--nz-bg, #fff);
	overflow: hidden;
}
.nz-ug [data-nz-tone="cool"] { --t: var(--nz-ug-cool); --t-ink: var(--nz-ug-cool-ink); --t-bg: var(--nz-ug-cool-bg); }
.nz-ug [data-nz-tone="neutral"] { --t: var(--nz-ug-neutral); --t-ink: var(--nz-ug-neutral-ink); --t-bg: var(--nz-ug-neutral-bg); }
.nz-ug [data-nz-tone="warm"] { --t: var(--nz-ug-warm); --t-ink: var(--nz-ug-warm-ink); --t-bg: var(--nz-ug-warm-bg); }

.nz-ug__sum {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 64px;
	padding: 12px 16px;
	cursor: pointer;
	list-style: none;
}
.nz-ug__sum::-webkit-details-marker { display: none; }
.nz-ug__q {
	flex: none;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--nz-ug-cool), var(--nz-ug-neutral) 50%, var(--nz-ug-warm));
	color: var(--nz-ink, #1b1918);
	font: 700 17px/1 var(--nz-font-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
}
.nz-ug__sumtext { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nz-ug__sumtext strong { color: var(--nz-ink, #1b1918); font-size: 16px; font-weight: 600; line-height: 1.3; }
.nz-ug__sumtext span { color: var(--nz-ink-2, #6b6466); font-size: 14px; line-height: 1.3; }
.nz-ug__chev { flex: none; color: var(--nz-ink-2, #6b6466); transition: transform .2s ease; }
.nz-ug[open] .nz-ug__chev { transform: rotate(180deg); }
.nz-ug__sum:focus-visible { outline: 2px solid var(--nz-brand, #6f6467); outline-offset: -2px; }

.nz-ug__body { padding: 0 16px 16px; }

.nz-ug__cols,
.nz-ug__answers,
.nz-ug__shop {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}
.nz-ug__cols { padding: 4px 0 8px; }
.nz-ug__tone {
	padding: 6px 4px;
	border-radius: 999px;
	background: var(--t);
	color: var(--t-ink);
	font: 700 12px/1.2 var(--nz-font-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
	letter-spacing: .06em;
	text-align: center;
	text-transform: uppercase;
}

.nz-ug__tests { margin: 0; padding: 0; list-style: none; }
.nz-ug__test { padding: 12px 0; border-top: 1px solid var(--nz-line, #E7E2DF); }
.nz-ug__test:first-child { border-top: 0; }
.nz-ug__title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--nz-ink, #1b1918);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
}
.nz-ug__num {
	flex: none;
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--nz-ink, #1b1918);
	color: var(--nz-bg, #fff);
	font-size: 12px;
	font-weight: 700;
}
.nz-ug__how { margin: 4px 0 10px 30px; color: var(--nz-ink-2, #6b6466); font-size: 14px; line-height: 1.4; }
.nz-ug__answers { margin: 0; padding: 0; list-style: none; }
.nz-ug__cell {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 8px 4px 10px;
	border-radius: var(--nz-r-m, 14px);
	background: var(--t-bg);
	text-align: center;
}
.nz-ug__art { display: block; width: 56px; height: 42px; }
.nz-ug__ans { color: var(--t-ink); font-size: 13px; font-weight: 600; line-height: 1.25; }

.nz-ug__verdict {
	margin: 4px 0 10px;
	padding-top: 12px;
	border-top: 1px solid var(--nz-line, #E7E2DF);
	color: var(--nz-ink, #1b1918);
	font-size: 15px;
	line-height: 1.4;
	text-align: center;
}
.nz-ug__btn {
	display: grid;
	place-items: center;
	min-height: 44px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--t);
	color: var(--t-ink);
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
}
.nz-ug__btn:focus-visible { outline: 2px solid var(--t-ink); outline-offset: 2px; }
.nz-ug__tip { margin: 10px 0 0; color: var(--nz-ink-2, #6b6466); font-size: 13px; line-height: 1.4; text-align: center; }

@media (min-width: 768px) {
	.nz-ug__body { padding: 0 24px 24px; }
	.nz-ug__art { width: 64px; height: 48px; }
	.nz-ug__ans { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
	.nz-ug__chev { transition: none; }
}
.nz-ug-wrap { width: 100%; }
.nz-ug { scroll-margin-top: 72px; } /* clears the sticky app header when opened at /shade/#guide */