/*
 * Nizu "Recently viewed" rail (element nizu-recent). Mobile first: a snap-scrolling rail, 42vw tiles like the Home / Pairs well with rails.
 */

.nz-recent {
	display: block;
	width: 100%;
	box-sizing: border-box;
}

.nz-recent[hidden],
.nz-recent-wrap[hidden] {
	display: none !important;
}

.nz-recent__title {
	margin: 0 0 var(--nz-s-3, 12px);
	font: 600 20px/1.2 var(--nz-font-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
	letter-spacing: -.01em;
	color: var(--nz-ink, #1b1918);
}

.nz-recent__rail {
	display: flex;
	gap: var(--nz-s-3, 12px);
	margin: 0 calc(var(--nz-s-4, 16px) * -1);
	padding: 0 var(--nz-s-4, 16px);
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scroll-padding-inline: var(--nz-s-4, 16px);
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.nz-recent__rail::-webkit-scrollbar {
	display: none;
}

.nz-rtile {
	flex: 0 0 42vw;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	scroll-snap-align: start;
}

.nz-rtile__link {
	display: flex;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
}

.nz-rtile__media {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--nz-r-m, 14px);
	background: var(--nz-surface, #f5f3f2);
}

.nz-rtile__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nz-rtile__name,
.nz-rtile__colour,
.nz-rtile__price {
	display: block;
	margin: 0;
}

.nz-rtile__name {
	margin-top: var(--nz-s-2, 8px);
	font: 600 15px/1.3 var(--nz-font-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
	color: var(--nz-ink, #1b1918);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.nz-rtile__colour {
	margin-top: 2px;
	font: 400 13px/1.3 var(--nz-font-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
	color: var(--nz-ink-2, #6b6466);
}

.nz-rtile__price {
	margin-top: 4px;
	font: 600 15px/1.3 var(--nz-font-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
	font-variant-numeric: tabular-nums;
	color: var(--nz-ink, #1b1918);
}

.nz-rtile__link:focus-visible {
	outline: 2px solid var(--nz-brand, #6f6467);
	outline-offset: 2px;
	border-radius: var(--nz-r-m, 14px);
}

@media (min-width: 768px) {
	.nz-recent__rail {
		margin: 0 calc(var(--nz-s-6, 24px) * -1);
		padding: 0 var(--nz-s-6, 24px);
		scroll-padding-inline: var(--nz-s-6, 24px);
	}
	.nz-rtile {
		flex-basis: 220px;
	}
}

@media (min-width: 1024px) {
	.nz-recent__rail {
		margin: 0;
		padding: 0;
		scroll-padding-inline: 0;
	}
}

/* A wrapper section (class nz-recent-wrap, e.g. on the product template) disappears with its empty rail - no JS needed for the first paint. */
.nz-recent-wrap:has(.nz-recent[hidden]) {
	display: none !important;
}