/*
 * Nizu handsock comparison (nizu-compare element; also embedded in home FAQ question 4). Mobile first: base = phone, >=768 tablet.
 * Loaded only where the block renders. Mock: docs/compare-handsock-mock.html
 */
.nz-cmp-wrap { width: 100%; }
.nz-cmp {
	box-sizing: border-box;
	width: 100%;
	max-width: 760px;
	margin: var(--nz-s-7, 32px) auto 0;
	color: var(--nz-ink, #1b1918);
}
.nz-cmp *, .nz-cmp *::before, .nz-cmp *::after { box-sizing: border-box; }
.nz-cmp p { margin: 0; }

.nz-cmp__eyebrow {
	margin: 0 0 8px;
	color: var(--nz-ink-2, #6b6466);
	font-size: var(--nz-fs-caption, 12px);
	font-weight: 600;
	letter-spacing: .14em;
	line-height: 1.3;
	text-align: center;
	text-transform: uppercase;
}
.nz-cmp__title {
	margin: 0 0 var(--nz-s-6, 24px);
	color: var(--nz-ink, #1b1918);
	font-family: var(--nz-font-display, "Bodoni Moda", serif);
	font-size: 28px;
	font-weight: 500;
	letter-spacing: -.01em;
	line-height: 1.15;
	text-align: center;
	text-wrap: balance;
}
.nz-cmp__guide {
	max-width: 30ch;
	margin: 0 auto var(--nz-s-6, 24px) !important;
	color: var(--nz-ink-2, #6b6466);
	font-size: 15px;
	line-height: 1.45;
	text-align: center;
	text-wrap: balance;
}
.nz-cmp__guide b { color: var(--nz-ink, #1b1918); font-weight: 600; }

/* Product heads */
.nz-cmp__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--nz-s-4, 16px); }
.nz-cmp__prod { min-width: 0; text-align: center; }
.nz-cmp__img { aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--nz-r-l, 22px); background: var(--nz-surface, #f5f3f2); }
.nz-cmp__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nz-cmp__name {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 2.4em;
	margin: var(--nz-s-3, 12px) 0 4px !important;
	font-family: var(--nz-font-display, "Bodoni Moda", serif);
	font-size: 18px;
	line-height: 1.2;
}
.nz-cmp__price { margin: 0 0 var(--nz-s-3, 12px) !important; color: var(--nz-ink-2, #6b6466); font-size: 15px; }
.nz-cmp__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 20px;
	border-radius: 999px;
	background: var(--nz-ink, #1b1918);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
}
.nz-cmp__btn:focus-visible { outline: 2px solid var(--nz-brand, #6f6467); outline-offset: 2px; }

/* Rows */
.nz-cmp__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--nz-s-4, 16px);
	margin-top: var(--nz-s-5, 20px);
	padding: var(--nz-s-5, 20px) 0 0;
	border-top: .5px solid var(--nz-line, #e7e2e0);
}
.nz-cmp__lbl {
	grid-column: 1 / -1;
	margin: 0 0 var(--nz-s-3, 12px) !important;
	color: var(--nz-ink-2, #6b6466);
	font-size: var(--nz-fs-caption, 12px);
	font-weight: 600;
	letter-spacing: .12em;
	line-height: 1.3;
	text-align: center;
	text-transform: uppercase;
}
.nz-cmp__cell { min-width: 0; text-align: center; }
.nz-cmp__cell--txt { font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.nz-cmp__big { font-family: var(--nz-font-display, "Bodoni Moda", serif); font-size: 32px; line-height: 1; }
.nz-cmp__unit { margin-top: 6px; color: var(--nz-ink-2, #6b6466); font-size: 13px; line-height: 1.35; }
.nz-cmp__bar { width: 90%; height: 6px; margin: 12px auto 0; overflow: hidden; border-radius: 6px; background: var(--nz-line, #e7e2e0); }
.nz-cmp__bar i { display: block; height: 100%; border-radius: 6px; background: var(--nz-brand, #6f6467); }

/* To-scale sketch */
.nz-cmp__row--sketch { display: block; }
.nz-cmp__row--sketch .nz-cmp__lbl { display: block; }
.nz-cmp__svg { display: block; width: 100%; max-width: 440px; height: auto; margin: 0 auto; }
.nz-cmp__sk-body { fill: #2a2627; }
.nz-cmp__sk-seam { stroke: #5a5354; stroke-width: 1; }
.nz-cmp__sk-rib { stroke: #4a4344; stroke-width: 1; }
.nz-cmp__sk-dim { stroke: var(--nz-brand, #6f6467); stroke-width: 1; }
.nz-cmp__sk-ground { stroke: var(--nz-line, #e7e2e0); stroke-dasharray: 3 4; }
.nz-cmp__sk-dt { fill: var(--nz-ink, #1b1918); font: 500 15px var(--nz-font-display, "Bodoni Moda", serif); }
.nz-cmp__sk-st { fill: var(--nz-ink-2, #6b6466); font: 12px var(--nz-font-ui, -apple-system, "Segoe UI", sans-serif); }
.nz-cmp__sk-nm { fill: var(--nz-ink, #1b1918); font: 14px var(--nz-font-display, "Bodoni Moda", serif); }

.nz-cmp__note { margin-top: 4px !important; color: var(--nz-ink-2, #6b6466); font-size: var(--nz-fs-caption, 12px); line-height: 1.4; text-align: center; }
.nz-cmp__note--foot { margin-top: var(--nz-s-4, 16px) !important; }

/* Inside a FAQ answer: no heading, tighter */
.nz-cmp--embed { margin-top: var(--nz-s-5, 20px); }
.nz-cmp--embed .nz-cmp__guide { margin-bottom: var(--nz-s-5, 20px) !important; }

@media (min-width: 768px) {
	.nz-cmp__title { font-size: 32px; }
	.nz-cmp__name { font-size: 20px; }
	.nz-cmp__big { font-size: 36px; }
}

/* Rows are a <dl> (term = the measure, one <dd> per style): reset the browser's dl/dd spacing. */
.nz-cmp__dl { margin: 0; }
.nz-cmp__dl dd { margin: 0; }