/**
 * NewVail — component styles.
 *
 * Every rule here is a direct translation of the utility classes used by the
 * original React build, so the rendered result is identical. Values are driven
 * by the custom properties declared in style.css.
 */

/* ==========================================================================
   Preloader
   ========================================================================== */

.nv-preloader {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: grid;
	place-items: center;
	background-color: var(--nv-background);
	transition: opacity 400ms ease, visibility 400ms ease;
}

.nv-preloader.is-done {
	opacity: 0;
	visibility: hidden;
}

.nv-preloader__mark {
	width: 4rem;
	height: 4rem;
	object-fit: contain;
	animation: nv-fade-in 900ms ease-in-out infinite alternate;
}

.nv-preloader__bar {
	position: absolute;
	bottom: 30%;
	width: 9rem;
	height: 3px;
	border-radius: 9999px;
	overflow: hidden;
	background-color: var(--nv-muted);
}

.nv-preloader__bar::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--nv-gradient);
	transform: translateX(-100%);
	animation: nv-preload 1.2s var(--nv-ease) infinite;
}

@keyframes nv-preload {
	to {
		transform: translateX(100%);
	}
}

/* ==========================================================================
   Announcement bar
   ========================================================================== */

.nv-announcement {
	position: relative;
	overflow: hidden;
	background-image: var(--nv-gradient);
	color: var(--nv-primary-foreground);
}

.nv-announcement[hidden] {
	display: none;
}

.nv-announcement__inner {
	display: flex;
	align-items: center;
}

.nv-announcement__viewport {
	flex: 1 1 0%;
	overflow: hidden;
	padding-block: 0.5rem;
}

.nv-announcement__track {
	display: flex;
	width: max-content;
	gap: 3rem;
	padding-right: 3rem;
	white-space: nowrap;
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 500;
	animation: nv-marquee 26s linear infinite;
}

.nv-announcement__viewport:hover .nv-announcement__track {
	animation-play-state: paused;
}

.nv-announcement__item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.nv-announcement__dismiss {
	margin-right: 0.5rem;
	display: grid;
	width: 2rem;
	height: 2rem;
	flex-shrink: 0;
	place-items: center;
	border-radius: var(--nv-radius-lg);
	transition: background-color 200ms ease;
}

.nv-announcement__dismiss:hover {
	background-color: rgba(0, 0, 0, 0.2);
}

.nv-announcement__dismiss svg {
	width: 1rem;
	height: 1rem;
}

/* ==========================================================================
   Brand logo
   ========================================================================== */

.nv-logo {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	min-width: 0;
}

.nv-logo__mark {
	width: auto;
	height: 2.25rem;
	max-width: 3.5rem;
	object-fit: contain;
}

.nv-logo__word {
	font-family: var(--nv-font-display);
	font-size: 1.125rem;
	line-height: 1.75rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	color: var(--nv-foreground);
	white-space: nowrap;
}

/* ==========================================================================
   Site header
   ========================================================================== */

.nv-header {
	position: relative;
	top: 0;
	z-index: 50;
	width: 100%;
	border-bottom: 1px solid transparent;
	background-color: transparent;
	transition: background-color 200ms ease, border-color 200ms ease;
}

.nv-header.is-sticky {
	position: sticky;
}

.nv-header.is-scrolled {
	border-bottom-color: var(--nv-border);
	background-color: color-mix(in srgb, var(--nv-background) 80%, transparent);
	-webkit-backdrop-filter: blur(24px);
	backdrop-filter: blur(24px);
}

.nv-header__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 1rem;
	padding-block: 0.875rem;
}

.nv-header__nav {
	display: none;
	justify-content: center;
}

.nv-header__nav ul {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.nv-header__nav a {
	display: block;
	border-radius: var(--nv-radius-lg);
	padding: 0.5rem 0.875rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 500;
	color: var(--nv-muted-foreground);
	transition: color 200ms ease, background-color 200ms ease;
}

.nv-header__nav a:hover {
	color: var(--nv-foreground);
}

.nv-header__nav .current-menu-item > a,
.nv-header__nav .current_page_item > a,
.nv-header__nav .current-menu-ancestor > a,
.nv-header__nav .current-menu-parent > a {
	color: var(--nv-foreground);
	background-color: var(--nv-muted);
}

.nv-header__actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.5rem;
}

.nv-header__cta {
	display: none;
	min-height: 44px;
	padding-inline: 1.25rem;
}

.nv-header__burger {
	color: var(--nv-foreground);
}

.nv-header__burger svg {
	width: 1.25rem;
	height: 1.25rem;
}

/* Dropdown sub-menus for admin-built menus with children. */
.nv-header__nav li {
	position: relative;
}

.nv-header__nav .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 12rem;
	display: block;
	padding: 0.375rem;
	border: 1px solid var(--nv-border);
	border-radius: var(--nv-radius-xl);
	background-color: var(--nv-popover);
	box-shadow: 0 18px 45px -12px rgba(0, 0, 0, 0.8);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
}

.nv-header__nav li:hover > .sub-menu,
.nv-header__nav li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* ==========================================================================
   Mobile menu
   ========================================================================== */

.nv-mobile-menu {
	position: fixed;
	inset: 0;
	z-index: 60;
	display: flex;
	flex-direction: column;

	/*
	 * The panel stays in the layout while closed so it can animate, so it must
	 * be pinned to the viewport width and isolated from the document's scroll
	 * area - otherwise its 1.5rem menu links widen the page on small screens.
	 */
	width: 100%;
	max-width: 100vw;
	overflow: hidden;
	contain: layout paint;

	background-color: var(--nv-background);
	background-image: radial-gradient(
		ellipse at 50% 0%,
		rgba(var(--nv-primary-rgb), 0.22),
		transparent 62%
	);
	background-repeat: no-repeat;
	background-size: 100% 55vh;

	/* Animated with opacity/transform rather than display, so it can transition. */
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-1.25rem);
	transition:
		opacity 260ms var(--nv-ease),
		transform 320ms var(--nv-ease),
		visibility 320ms var(--nv-ease);
}

.nv-mobile-menu.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
}

.nv-mobile-menu__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid var(--nv-border);
	padding: 0.875rem var(--nv-gutter);
	background-color: color-mix(in srgb, var(--nv-background) 85%, transparent);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
}

.nv-mobile-menu__close {
	color: var(--nv-foreground);
	background-color: transparent;
}

.nv-mobile-menu__close svg {
	width: 1.25rem;
	height: 1.25rem;
}

.nv-mobile-menu__body {
	flex: 1 1 0%;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 1.5rem var(--nv-gutter);
	min-width: 0;
}

.nv-mobile-menu__body ul {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	width: 100%;
	min-width: 0;
}

.nv-mobile-menu__body li {
	min-width: 0;
}

.nv-mobile-menu__body .sub-menu {
	padding-left: 1rem;
}

.nv-mobile-menu__body a {
	display: flex;
	min-height: 56px;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	border-bottom: 1px solid color-mix(in srgb, var(--nv-border) 60%, transparent);
	font-family: var(--nv-font-display);
	font-size: 1.5rem;
	line-height: 2rem;
	font-weight: 600;
	color: var(--nv-foreground);
	transition: color 200ms ease, padding-left 200ms ease;
}

.nv-mobile-menu__body a:hover,
.nv-mobile-menu__body a:focus-visible {
	color: var(--nv-primary-glow);
	padding-left: 0.375rem;
}

/* Staggered entrance for the links and the buttons below them. */
.nv-mobile-menu__body > ul > li,
.nv-mobile-menu__cta,
.nv-mobile-menu__social {
	opacity: 0;
	transform: translateY(0.75rem);
	transition:
		opacity 340ms var(--nv-ease),
		transform 340ms var(--nv-ease);
}

.nv-mobile-menu.is-open .nv-mobile-menu__body > ul > li,
.nv-mobile-menu.is-open .nv-mobile-menu__cta,
.nv-mobile-menu.is-open .nv-mobile-menu__social {
	opacity: 1;
	transform: none;
}

.nv-mobile-menu.is-open .nv-mobile-menu__body > ul > li:nth-child(1) { transition-delay: 60ms; }
.nv-mobile-menu.is-open .nv-mobile-menu__body > ul > li:nth-child(2) { transition-delay: 100ms; }
.nv-mobile-menu.is-open .nv-mobile-menu__body > ul > li:nth-child(3) { transition-delay: 140ms; }
.nv-mobile-menu.is-open .nv-mobile-menu__body > ul > li:nth-child(4) { transition-delay: 180ms; }
.nv-mobile-menu.is-open .nv-mobile-menu__body > ul > li:nth-child(5) { transition-delay: 220ms; }
.nv-mobile-menu.is-open .nv-mobile-menu__body > ul > li:nth-child(6) { transition-delay: 260ms; }
.nv-mobile-menu.is-open .nv-mobile-menu__body > ul > li:nth-child(n + 7) { transition-delay: 300ms; }
.nv-mobile-menu.is-open .nv-mobile-menu__cta { transition-delay: 340ms; }
.nv-mobile-menu.is-open .nv-mobile-menu__social { transition-delay: 390ms; }

@media (prefers-reduced-motion: reduce) {
	.nv-mobile-menu,
	.nv-mobile-menu__body > ul > li,
	.nv-mobile-menu__cta,
	.nv-mobile-menu__social {
		transition: none;
		transform: none;
	}
}

.nv-mobile-menu__body .sub-menu a {
	min-height: 44px;
	font-size: 1.125rem;
	color: var(--nv-muted-foreground);
}

.nv-mobile-menu__body .current-menu-item > a {
	color: var(--nv-primary-glow);
}

.nv-mobile-menu__cta {
	margin-top: 2rem;
	width: 100%;
	min-height: 52px;
}

.nv-mobile-menu__social {
	margin-top: 2rem;
	display: flex;
	gap: 0.5rem;
}

/* ==========================================================================
   Search dialog
   ========================================================================== */

.nv-search-dialog {
	position: fixed;
	inset: 0;
	z-index: 70;
	display: none;
}

.nv-search-dialog.is-open {
	display: block;
}

.nv-search-dialog__overlay {
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.8);
	animation: nv-fade-in 180ms ease;
}

.nv-search-dialog__panel {
	position: absolute;
	top: 6rem;
	left: 50%;
	transform: translateX(-50%);
	width: calc(100% - 2rem);
	max-width: 36rem;
	border: 1px solid var(--nv-border);
	border-radius: var(--nv-radius-2xl);
	background-color: var(--nv-card);
	overflow: hidden;
	animation: nv-slide-up 200ms var(--nv-ease);
}

.nv-search-dialog__head {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	border-bottom: 1px solid var(--nv-border);
	padding-inline: 1.25rem;
}

.nv-search-dialog__head svg {
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
	color: var(--nv-muted-foreground);
}

.nv-search-dialog__input {
	height: 3.5rem;
	width: 100%;
	background: transparent;
	border: 0;
	font-size: 0.875rem;
	color: var(--nv-foreground);
	outline: none;
}

.nv-search-dialog__input::placeholder {
	color: var(--nv-muted-foreground);
}

.nv-search-dialog__results {
	max-height: 20rem;
	overflow-y: auto;
	padding: 0.5rem;
}

.nv-search-result {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	border-radius: var(--nv-radius-xl);
	padding: 0.625rem 0.75rem;
	transition: background-color 200ms ease;
}

.nv-search-result:hover {
	background-color: var(--nv-muted);
}

.nv-search-result img {
	width: 2.5rem;
	height: 2.5rem;
	flex-shrink: 0;
	border-radius: var(--nv-radius-lg);
	object-fit: cover;
}

.nv-search-result__text {
	min-width: 0;
	flex: 1 1 0%;
}

.nv-search-result__title {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 500;
	color: var(--nv-foreground);
}

.nv-search-result__blurb {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 0.75rem;
	line-height: 1rem;
	color: var(--nv-muted-foreground);
}

.nv-search-result__price {
	flex-shrink: 0;
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 600;
	color: var(--nv-primary-glow);
}

.nv-search-dialog__empty {
	padding: 2rem 1rem;
	text-align: center;
	font-size: 0.875rem;
	color: var(--nv-muted-foreground);
}

/* ==========================================================================
   Hero
   ========================================================================== */

.nv-hero {
	border-bottom: 1px solid var(--nv-border);
}

.nv-hero__inner {
	display: grid;
	/*
	 * An explicit minmax(0, 1fr) track is essential: an implicit `auto` track
	 * is sized by its widest child, which locked the whole hero to the
	 * showcase's 28rem max-width and pushed the copy off narrow screens.
	 */
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
	gap: 3.5rem;
	padding-block: 4rem;
}

.nv-hero__title {
	margin-top: 1.5rem;
	font-size: clamp(1.875rem, 8vw, 2.25rem);
	line-height: 1.08;
	font-weight: 700;
	color: var(--nv-foreground);
	overflow-wrap: break-word;
}

.nv-hero__title-accent {
	display: block;
	background-image: var(--nv-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.nv-hero__text {
	margin-top: 1.25rem;
	max-width: 32rem;
	font-size: 1rem;
	line-height: 1.625;
	color: var(--nv-muted-foreground);
}

.nv-hero__actions {
	margin-top: 2.25rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.nv-hero__actions .nv-btn {
	min-height: 52px;
	padding-inline: 1.75rem;
}

.nv-hero__showcase {
	position: relative;
	margin-inline: auto;
	width: 100%;
	max-width: min(28rem, 100%);
	min-width: 0;
	perspective: 1400px;
}

.nv-hero__stack {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	transition: transform 500ms ease;
}

.nv-hero__chip {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-width: 0;
	border: 1px solid var(--nv-border);
	border-radius: var(--nv-radius-2xl);
	background-color: color-mix(in srgb, var(--nv-card) 85%, transparent);
	padding: 1rem;
	box-shadow: 0 20px 50px -24px var(--nv-primary);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

.nv-hero__chip img {
	width: 4rem;
	height: 4rem;
	flex-shrink: 0;
	border-radius: var(--nv-radius-xl);
	object-fit: cover;
}

.nv-hero__chip-body {
	min-width: 0;
	flex: 1 1 0%;
}

.nv-hero__chip-title {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-family: var(--nv-font-display);
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 600;
	color: var(--nv-foreground);
}

.nv-hero__chip-price {
	margin-top: 0.25rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 700;
	color: var(--nv-primary-glow);
}

/* ==========================================================================
   Stock badge
   ========================================================================== */

.nv-stock {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	border-radius: 9999px;
	padding: 0.25rem 0.625rem;
	font-size: 11px;
	line-height: 1rem;
	font-weight: 600;
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

.nv-stock__dot {
	width: 0.375rem;
	height: 0.375rem;
	border-radius: 9999px;
}

.nv-stock--in {
	background-color: rgba(var(--nv-success-rgb), 0.15);
	color: var(--nv-success);
	box-shadow: inset 0 0 0 1px rgba(var(--nv-success-rgb), 0.3);
}

.nv-stock--in .nv-stock__dot {
	background-color: var(--nv-success);
}

.nv-stock--out,
.nv-stock--pre {
	background-color: color-mix(in srgb, var(--nv-muted) 70%, transparent);
	color: var(--nv-muted-foreground);
	box-shadow: inset 0 0 0 1px var(--nv-border);
}

.nv-stock--out .nv-stock__dot,
.nv-stock--pre .nv-stock__dot {
	background-color: var(--nv-muted-foreground);
}

.nv-stock--pre {
	color: var(--nv-primary-glow);
	box-shadow: inset 0 0 0 1px rgba(var(--nv-primary-rgb), 0.3);
}

.nv-stock--pre .nv-stock__dot {
	background-color: var(--nv-primary-glow);
}

/* ==========================================================================
   Stats
   ========================================================================== */

.nv-stats {
	border-bottom: 1px solid var(--nv-border);
}

.nv-stats__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	padding-block: 3.5rem;
}

.nv-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	border: 1px solid var(--nv-border);
	border-radius: var(--nv-radius-2xl);
	background-color: var(--nv-card);
	padding: 2rem 1rem;
	text-align: center;
	height: 100%;
}

.nv-stat__icon {
	display: grid;
	width: 2.75rem;
	height: 2.75rem;
	place-items: center;
	border-radius: var(--nv-radius-xl);
	background-color: rgba(var(--nv-primary-rgb), 0.12);
	color: var(--nv-primary-glow);
	box-shadow: inset 0 0 0 1px rgba(var(--nv-primary-rgb), 0.25);
}

.nv-stat__icon svg {
	width: 1.25rem;
	height: 1.25rem;
}

.nv-stat__value {
	font-family: var(--nv-font-display);
	font-size: 1.875rem;
	line-height: 2.25rem;
	font-weight: 700;
	color: var(--nv-foreground);
}

.nv-stat__label {
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: var(--nv-muted-foreground);
}

/* ==========================================================================
   Section heading
   ========================================================================== */

.nv-heading {
	margin-bottom: 2.5rem;
	gap: 1rem;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: flex-end;
}

.nv-heading--center {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.nv-heading__body {
	min-width: 0;
}

.nv-heading--center .nv-heading__body {
	max-width: 42rem;
}

.nv-heading__title {
	font-size: clamp(1.5rem, 6.5vw, 1.875rem);
	line-height: 2.25rem;
	font-weight: 700;
	color: var(--nv-foreground);
}

.nv-heading__text {
	margin-top: 0.75rem;
	font-size: 0.875rem;
	line-height: 1.625;
	color: var(--nv-muted-foreground);
}

/* ==========================================================================
   Banner carousel
   ========================================================================== */

.nv-carousel {
	position: relative;
}

.nv-carousel__viewport {
	overflow: hidden;
	border: 1px solid var(--nv-border);
	border-radius: var(--nv-radius-2xl);
}

.nv-carousel__track {
	display: flex;
	transition: transform 600ms var(--nv-ease);
}

.nv-carousel__slide {
	position: relative;
	min-width: 0;
	flex: 0 0 100%;
}

.nv-carousel__media {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
}

.nv-carousel__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nv-carousel__media img.nv-carousel__img--mobile {
	display: block;
}

.nv-carousel__media img.nv-carousel__img--desktop {
	display: none;
}

.nv-carousel__scrim {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(
		to right,
		var(--nv-background),
		color-mix(in srgb, var(--nv-background) 70%, transparent) 50%,
		transparent
	);
}

.nv-carousel__content {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.75rem;
	padding: 1.5rem;
}

.nv-carousel__eyebrow {
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	color: var(--nv-primary-glow);
}

.nv-carousel__title {
	max-width: 28rem;
	font-size: clamp(1.125rem, 5vw, 1.5rem);
	line-height: 2rem;
	font-weight: 700;
	color: var(--nv-foreground);
}

.nv-carousel__text {
	max-width: 24rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: var(--nv-muted-foreground);
}

.nv-carousel__cta {
	margin-top: 0.5rem;
	width: -moz-fit-content;
	width: fit-content;
	padding-inline: 1.5rem;
}

.nv-carousel__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: none;
	width: 2.75rem;
	height: 2.75rem;
	place-items: center;
	border-radius: var(--nv-radius-xl);
	border: 1px solid var(--nv-border);
	background-color: color-mix(in srgb, var(--nv-background) 70%, transparent);
	color: var(--nv-foreground);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	transition: border-color 200ms ease;
}

.nv-carousel__arrow:hover {
	border-color: rgba(var(--nv-primary-rgb), 0.6);
}

.nv-carousel__arrow svg {
	width: 1.25rem;
	height: 1.25rem;
}

.nv-carousel__arrow--prev {
	left: 0.75rem;
}

.nv-carousel__arrow--next {
	right: 0.75rem;
}

.nv-carousel__dots {
	margin-top: 1.25rem;
	display: flex;
	justify-content: center;
	gap: 0.5rem;
}

.nv-carousel__dot {
	height: 0.5rem;
	width: 0.5rem;
	border-radius: 9999px;
	background-color: var(--nv-border);
	transition: width 200ms ease, background-color 200ms ease;
}

.nv-carousel__dot:hover {
	background-color: var(--nv-muted-foreground);
}

.nv-carousel__dot.is-active {
	width: 1.75rem;
	background-color: var(--nv-primary);
}

/* ==========================================================================
   Category tile
   ========================================================================== */

.nv-category {
	position: relative;
	display: flex;
	height: 100%;
	flex-direction: column;
	gap: 1rem;
	overflow: hidden;
	border: 1px solid var(--nv-border);
	border-radius: var(--nv-radius-2xl);
	background-color: var(--nv-card);
	padding: 1.5rem;
	transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

.nv-category:hover {
	transform: translateY(-0.25rem);
	border-color: rgba(var(--nv-primary-rgb), 0.6);
	box-shadow: var(--nv-shadow-card-hover);
}

.nv-category__icon {
	display: grid;
	width: 3rem;
	height: 3rem;
	flex-shrink: 0;
	place-items: center;
	border-radius: var(--nv-radius-xl);
	background-color: rgba(var(--nv-primary-rgb), 0.12);
	color: var(--nv-primary-glow);
	box-shadow: inset 0 0 0 1px rgba(var(--nv-primary-rgb), 0.25);
	transition: background-color 200ms ease;
}

.nv-category:hover .nv-category__icon {
	background-color: rgba(var(--nv-primary-rgb), 0.2);
}

.nv-category__icon svg {
	width: 1.5rem;
	height: 1.5rem;
}

.nv-category__title {
	font-family: var(--nv-font-display);
	font-size: 1.125rem;
	line-height: 1.75rem;
	font-weight: 600;
	color: var(--nv-foreground);
}

.nv-category__text {
	margin-top: 0.375rem;
	font-size: 0.875rem;
	line-height: 1.625;
	color: var(--nv-muted-foreground);
}

.nv-category__meta {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 0.5rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: var(--nv-muted-foreground);
}

.nv-category__meta svg {
	width: 1rem;
	height: 1rem;
	color: var(--nv-primary-glow);
	transition: transform 200ms ease;
}

.nv-category:hover .nv-category__meta svg {
	transform: translate(0.125rem, -0.125rem);
}

/* ==========================================================================
   Product card
   ========================================================================== */

.nv-product-card {
	display: flex;
	height: 100%;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--nv-border);
	border-radius: var(--nv-radius-2xl);
	background-color: var(--nv-card);
	transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

.nv-product-card:hover {
	transform: translateY(-0.25rem);
	border-color: rgba(var(--nv-primary-rgb), 0.6);
	box-shadow: var(--nv-shadow-card-hover);
}

.nv-product-card__media {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background-color: var(--nv-background);
}

.nv-product-card__media > a {
	display: block;
	width: 100%;
	height: 100%;
}

.nv-product-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 500ms ease;
}

.nv-product-card:hover .nv-product-card__media img {
	transform: scale(1.05);
}

.nv-product-card__tags {
	position: absolute;
	left: 0.75rem;
	top: 0.75rem;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.375rem;
	pointer-events: none;
}

.nv-product-card__cat {
	border-radius: 9999px;
	background-color: color-mix(in srgb, var(--nv-background) 70%, transparent);
	padding: 0.25rem 0.625rem;
	font-size: 11px;
	line-height: 1rem;
	font-weight: 600;
	color: var(--nv-foreground);
	box-shadow: inset 0 0 0 1px var(--nv-border);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

.nv-badge {
	display: inline-block;
	border-radius: 9999px;
	padding: 0.25rem 0.625rem;
	font-size: 11px;
	line-height: 1rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: #ffffff;
	background-color: var(--nv-primary);
}

.nv-product-card__stock {
	position: absolute;
	right: 0.75rem;
	top: 0.75rem;
}

.nv-product-card__body {
	display: flex;
	flex: 1 1 0%;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1.25rem;
}

.nv-product-card__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.9rem;
	font-family: var(--nv-font-display);
	font-size: 1rem;
	line-height: 1.375;
	font-weight: 600;
	color: var(--nv-foreground);
}

.nv-product-card__title a {
	transition: color 200ms ease;
}

.nv-product-card__title a:hover {
	color: var(--nv-primary-glow);
}

.nv-product-card__blurb {
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: var(--nv-muted-foreground);
}

.nv-price {
	margin-top: auto;
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	padding-top: 0.25rem;
}

.nv-price__now {
	font-family: var(--nv-font-display);
	font-size: 1.25rem;
	line-height: 1.75rem;
	font-weight: 700;
	color: var(--nv-primary-glow);
}

.nv-price__was {
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: var(--nv-muted-foreground);
	text-decoration: line-through;
}

/* ==========================================================================
   How it works
   ========================================================================== */

.nv-steps {
	position: relative;
	display: grid;
	gap: 2rem;
}

.nv-steps__line {
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	top: 1.75rem;
	border-top: 2px dashed rgba(var(--nv-primary-rgb), 0.35);
}

.nv-step {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.nv-step__num {
	position: relative;
	z-index: 10;
	display: grid;
	width: 3.5rem;
	height: 3.5rem;
	place-items: center;
	border-radius: var(--nv-radius-2xl);
	border: 1px solid rgba(var(--nv-primary-rgb), 0.35);
	background-color: var(--nv-background);
	font-family: var(--nv-font-display);
	font-size: 1.125rem;
	line-height: 1.75rem;
	font-weight: 700;
	color: var(--nv-primary-glow);
}

.nv-step__icon {
	margin-top: 1.25rem;
	color: var(--nv-primary-glow);
}

.nv-step__icon svg {
	width: 1.5rem;
	height: 1.5rem;
}

.nv-step__title {
	margin-top: 1rem;
	font-family: var(--nv-font-display);
	font-size: 1.125rem;
	line-height: 1.75rem;
	font-weight: 600;
	color: var(--nv-foreground);
}

.nv-step__text {
	margin-top: 0.5rem;
	max-width: 20rem;
	font-size: 0.875rem;
	line-height: 1.625;
	color: var(--nv-muted-foreground);
}

/* ==========================================================================
   Reviews
   ========================================================================== */

.nv-stars {
	display: inline-flex;
	align-items: center;
	gap: 0.125rem;
}

.nv-stars svg {
	width: 1rem;
	height: 1rem;
	color: color-mix(in srgb, var(--nv-muted-foreground) 40%, transparent);
}

.nv-stars svg.is-filled {
	color: var(--nv-primary-glow);
	fill: var(--nv-primary-glow);
}

.nv-stars--md svg {
	width: 1.25rem;
	height: 1.25rem;
}

.nv-review {
	display: flex;
	height: 100%;
	flex-direction: column;
	gap: 1rem;
	border: 1px solid var(--nv-border);
	border-radius: var(--nv-radius-2xl);
	background-color: var(--nv-card);
	padding: 1.5rem;
	transition: border-color 200ms ease;
}

.nv-review:hover {
	border-color: rgba(var(--nv-primary-rgb), 0.5);
}

.nv-review__head {
	display: flex;
	min-width: 0;
	align-items: center;
	gap: 0.75rem;
}

.nv-review__avatar {
	display: grid;
	width: 2.75rem;
	height: 2.75rem;
	flex-shrink: 0;
	place-items: center;
	overflow: hidden;
	border-radius: 9999px;
	background-image: var(--nv-gradient);
	font-family: var(--nv-font-display);
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 700;
	color: var(--nv-primary-foreground);
}

.nv-review__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nv-review__name {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 600;
	color: var(--nv-foreground);
}

.nv-review__verified {
	display: inline-grid;
	place-items: center;
	color: var(--nv-success);
}

.nv-review__verified svg {
	width: 0.875rem;
	height: 0.875rem;
}

.nv-review__date {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 0.75rem;
	line-height: 1rem;
	color: var(--nv-muted-foreground);
}

.nv-review__quote {
	font-size: 0.875rem;
	line-height: 1.625;
	color: var(--nv-muted-foreground);
	margin: 0;
}

.nv-review__product {
	margin-top: auto;
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--nv-primary-glow);
}

.nv-review-rail {
	display: flex;
	scroll-snap-type: x mandatory;
	gap: 1.25rem;
	overflow-x: auto;
	padding-inline: var(--nv-gutter);
	padding-bottom: 1rem;
	scrollbar-width: thin;
}

.nv-review-rail > * {
	width: 300px;
	flex-shrink: 0;
	scroll-snap-align: start;
}

/* Reviews archive */
.nv-rating-summary {
	display: grid;
	gap: 2rem;
	border: 1px solid var(--nv-border);
	border-radius: var(--nv-radius-2xl);
	background-color: var(--nv-card);
	padding: 2rem;
}

.nv-rating-summary__avg {
	font-family: var(--nv-font-display);
	font-size: clamp(2.75rem, 12vw, 3.75rem);
	line-height: 1;
	font-weight: 700;
	color: var(--nv-foreground);
}

.nv-rating-summary__head {
	text-align: center;
}

.nv-rating-summary__head .nv-stars {
	margin-top: 0.75rem;
}

.nv-rating-summary__count {
	margin-top: 0.5rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: var(--nv-muted-foreground);
}

.nv-rating-bars {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	align-self: center;
}

.nv-rating-bars li {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.nv-rating-bars__label {
	width: 3rem;
	flex-shrink: 0;
	font-size: 0.75rem;
	line-height: 1rem;
	color: var(--nv-muted-foreground);
}

.nv-rating-bars__track {
	height: 0.5rem;
	min-width: 0;
	flex: 1 1 0%;
	overflow: hidden;
	border-radius: 9999px;
	background-color: var(--nv-muted);
}

.nv-rating-bars__fill {
	display: block;
	height: 100%;
	border-radius: 9999px;
	background-image: var(--nv-gradient);
}

.nv-rating-bars__count {
	width: 2rem;
	flex-shrink: 0;
	text-align: right;
	font-size: 0.75rem;
	line-height: 1rem;
	color: var(--nv-muted-foreground);
}

.nv-chip-filters {
	margin-top: 2.5rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.nv-chip {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	border-radius: var(--nv-radius-xl);
	border: 1px solid var(--nv-border);
	padding-inline: 1rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 500;
	color: var(--nv-muted-foreground);
	transition: border-color 200ms ease, color 200ms ease, background-color 200ms ease;
}

.nv-chip:hover {
	border-color: rgba(var(--nv-primary-rgb), 0.5);
	color: var(--nv-foreground);
}

.nv-chip.is-active {
	border-color: var(--nv-primary);
	background-color: rgba(var(--nv-primary-rgb), 0.15);
	color: var(--nv-primary-glow);
}

.nv-masonry {
	margin-top: 2.5rem;
	column-gap: 1.5rem;
	column-fill: balance;
}

.nv-masonry > * {
	margin-bottom: 1.5rem;
	break-inside: avoid;
}

/* ==========================================================================
   FAQ accordion
   ========================================================================== */

.nv-accordion {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.nv-accordion__item {
	overflow: hidden;
	border: 1px solid var(--nv-border);
	border-radius: var(--nv-radius-2xl);
	background-color: var(--nv-card);
	padding-inline: 1.25rem;
}

.nv-accordion__trigger {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 1.25rem;
	text-align: left;
	font-family: var(--nv-font-display);
	font-size: 1rem;
	line-height: 1.5rem;
	font-weight: 600;
	color: var(--nv-foreground);
	transition: color 200ms ease;
}

.nv-accordion__trigger:hover {
	color: var(--nv-primary-glow);
}

.nv-accordion__trigger svg {
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
	color: var(--nv-muted-foreground);
	transition: transform 200ms ease;
}

.nv-accordion__trigger[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

.nv-accordion__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 250ms var(--nv-ease);
}

.nv-accordion__panel.is-open {
	grid-template-rows: 1fr;
}

.nv-accordion__panel > div {
	overflow: hidden;
}

.nv-accordion__content {
	padding-bottom: 1.25rem;
	font-size: 0.875rem;
	line-height: 1.625;
	color: var(--nv-muted-foreground);
}

.nv-accordion__content > * + * {
	margin-top: 0.75rem;
}

/* ==========================================================================
   CTA banner
   ========================================================================== */

.nv-cta {
	position: relative;
	overflow: hidden;
	border-radius: var(--nv-radius-2xl);
	padding: 4rem 1.5rem;
	text-align: center;
}

.nv-cta__glow {
	pointer-events: none;
	position: absolute;
	inset: 0;
	background-image: radial-gradient(
		ellipse at 50% 120%,
		rgba(var(--nv-primary-rgb), 0.45),
		transparent 70%
	);
}

.nv-cta__inner {
	position: relative;
}

.nv-cta__title {
	margin-inline: auto;
	max-width: 42rem;
	font-size: clamp(1.5rem, 6.5vw, 1.875rem);
	line-height: 2.25rem;
	font-weight: 700;
	color: var(--nv-foreground);
}

.nv-cta__text {
	margin: 1rem auto 0;
	max-width: 36rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: var(--nv-muted-foreground);
}

.nv-cta__btn {
	margin-top: 2rem;
	min-height: 56px;
	padding-inline: 2.25rem;
	font-size: 1rem;
}

.nv-cta__note {
	margin-top: 1rem;
	font-size: 0.75rem;
	line-height: 1rem;
	color: var(--nv-muted-foreground);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.nv-footer {
	position: relative;
	border-top: 1px solid var(--nv-border);
	background-color: var(--nv-background);
}

.nv-footer__glow {
	pointer-events: none;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 10rem;
	background-image: radial-gradient(
		ellipse at 50% 0%,
		rgba(var(--nv-primary-rgb), 0.28),
		transparent 70%
	);
}

.nv-footer__inner {
	position: relative;
	padding-block: 3.5rem;
}

.nv-footer__grid {
	display: grid;
	gap: 2rem 2.5rem;
	align-items: start;
}

.nv-footer__brand {
	min-width: 0;
}

.nv-footer__col {
	min-width: 0;
}

.nv-footer__widgets {
	margin-top: 2.5rem;
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.nv-footer__about {
	margin-top: 1rem;
	max-width: 20rem;
	font-size: 0.875rem;
	line-height: 1.625;
	color: var(--nv-muted-foreground);
}

.nv-socials {
	margin-top: 1.5rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.nv-socials a {
	display: grid;
	width: 2.75rem;
	height: 2.75rem;
	place-items: center;
	border-radius: var(--nv-radius-xl);
	border: 1px solid var(--nv-border);
	background-color: var(--nv-card);
	color: var(--nv-muted-foreground);
	transition: border-color 200ms ease, color 200ms ease;
}

.nv-socials a:hover {
	border-color: rgba(var(--nv-primary-rgb), 0.6);
	color: var(--nv-primary-glow);
}

.nv-socials svg {
	width: 1.125rem;
	height: 1.125rem;
}

.nv-footer__col-title {
	font-family: var(--nv-font-display);
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--nv-foreground);
}

.nv-footer__links {
	margin-top: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.nv-footer__links a {
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: var(--nv-muted-foreground);
	transition: color 200ms ease;
}

.nv-footer__links a:hover {
	color: var(--nv-foreground);
}

.nv-newsletter {
	margin-top: 3.5rem;
	border: 1px solid var(--nv-border);
	border-radius: var(--nv-radius-2xl);
	background-color: var(--nv-card);
	padding: 2rem;
	display: grid;
	gap: 1.5rem;
	align-items: center;
}

.nv-newsletter__title {
	font-family: var(--nv-font-display);
	font-size: 1.25rem;
	line-height: 1.75rem;
	font-weight: 600;
	color: var(--nv-foreground);
}

.nv-newsletter__text {
	margin-top: 0.5rem;
	font-size: 0.875rem;
	line-height: 1.5rem;
	color: var(--nv-muted-foreground);
}

.nv-newsletter__form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.nv-newsletter__form .nv-field {
	flex: 1 1 12rem;
}

.nv-footer__bottom {
	margin-top: 2.5rem;
	display: grid;
	gap: 1.25rem;
	border-top: 1px solid var(--nv-border);
	padding-top: 1.75rem;
}

.nv-footer__copy {
	font-size: 0.75rem;
	line-height: 1rem;
	color: var(--nv-muted-foreground);
}

.nv-footer__copy a {
	color: var(--nv-muted-foreground);
	text-underline-offset: 3px;
}

.nv-footer__copy a:hover {
	color: var(--nv-primary-glow);
	text-decoration: underline;
}

.nv-trust {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.nv-trust li {
	border-radius: var(--nv-radius-lg);
	border: 1px solid var(--nv-border);
	background-color: var(--nv-card);
	padding: 0.375rem 0.75rem;
	font-size: 11px;
	line-height: 1rem;
	font-weight: 500;
	color: var(--nv-muted-foreground);
}

/* ==========================================================================
   Page hero + breadcrumbs
   ========================================================================== */

.nv-page-hero {
	border-bottom: 1px solid var(--nv-border);
}

.nv-page-hero__inner {
	padding-block: 3.5rem;
}

.nv-breadcrumbs {
	margin-bottom: 1.5rem;
}

.nv-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.75rem;
	line-height: 1rem;
	color: var(--nv-muted-foreground);
}

.nv-breadcrumbs li {
	display: flex;
	align-items: center;
	gap: 0.375rem;
}

.nv-breadcrumbs a {
	transition: color 200ms ease;
}

.nv-breadcrumbs a:hover {
	color: var(--nv-foreground);
}

.nv-breadcrumbs [aria-current] {
	color: var(--nv-foreground);
}

.nv-breadcrumbs svg {
	width: 0.875rem;
	height: 0.875rem;
}

.nv-page-hero__title {
	max-width: 48rem;
	font-size: clamp(1.625rem, 7.5vw, 2.25rem);
	line-height: 2.5rem;
	font-weight: 700;
	color: var(--nv-foreground);
}

.nv-page-hero__text {
	margin-top: 1rem;
	max-width: 42rem;
	font-size: 1rem;
	line-height: 1.625;
	color: var(--nv-muted-foreground);
}

.nv-page-hero__badge {
	margin-top: 1.5rem;
	padding: 0.375rem 1rem;
}

/* ==========================================================================
   Shop browser
   ========================================================================== */

.nv-shop {
	display: grid;
	gap: 2.5rem;
	padding-block: 3.5rem;
}

.nv-shop__aside {
	display: none;
}

.nv-shop__filters {
	position: sticky;
	top: 6rem;
	border: 1px solid var(--nv-border);
	border-radius: var(--nv-radius-2xl);
	background-color: var(--nv-card);
	padding: 1.5rem;
}

.nv-filters {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.nv-filters__legend,
.nv-filters__title {
	margin-bottom: 1rem;
	font-family: var(--nv-font-display);
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--nv-foreground);
	padding: 0;
}

.nv-filters fieldset {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.nv-filters__list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	max-height: 16rem;
	overflow-y: auto;
}

.nv-filters__row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.nv-filters__row label {
	display: flex;
	flex: 1 1 0%;
	cursor: pointer;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: var(--nv-muted-foreground);
}

.nv-filters__row label span {
	font-size: 0.75rem;
}

.nv-filters__readout {
	margin-top: 0.75rem;
	display: flex;
	justify-content: space-between;
	font-size: 0.75rem;
	line-height: 1rem;
	color: var(--nv-muted-foreground);
}

.nv-filters__readout strong {
	font-weight: 600;
	color: var(--nv-primary-glow);
}

.nv-filters__toggle-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.nv-filters__toggle-row label {
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: var(--nv-muted-foreground);
	cursor: pointer;
}

.nv-shop__reset {
	margin-top: 2rem;
	width: 100%;
	border-radius: var(--nv-radius-xl);
	border: 1px solid var(--nv-border);
	padding-block: 0.625rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: var(--nv-muted-foreground);
	transition: border-color 200ms ease, color 200ms ease;
}

.nv-shop__reset:hover {
	border-color: rgba(var(--nv-primary-rgb), 0.6);
	color: var(--nv-foreground);
}

.nv-shop__toolbar {
	margin-bottom: 2rem;
	display: grid;
	gap: 0.75rem;
}

.nv-shop__toolbar-actions {
	display: flex;
	gap: 0.75rem;
}

.nv-shop__drawer-open {
	display: inline-flex;
	height: 3rem;
	flex-shrink: 0;
	align-items: center;
	gap: 0.5rem;
	border-radius: var(--nv-radius-xl);
	border: 1px solid var(--nv-border);
	background-color: var(--nv-card);
	padding-inline: 1rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 500;
	color: var(--nv-foreground);
}

.nv-shop__drawer-open svg {
	width: 1rem;
	height: 1rem;
}

.nv-shop__sort {
	width: 100%;
}

.nv-shop__count {
	margin-bottom: 1.5rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: var(--nv-muted-foreground);
}

.nv-product-grid {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: 1.5rem;
}

.nv-product-grid--4 {
	grid-template-columns: repeat(1, minmax(0, 1fr));
}

.nv-shop__more {
	margin-top: 3rem;
	display: flex;
	justify-content: center;
}

.nv-shop__more .nv-btn {
	min-height: 52px;
	padding-inline: 2rem;
}

.nv-shop__more .nv-btn:hover {
	box-shadow: var(--nv-glow);
}

.nv-shop__results.is-loading {
	opacity: 0.4;
	pointer-events: none;
}

/* Skeleton */
.nv-skeleton-card {
	overflow: hidden;
	border: 1px solid var(--nv-border);
	border-radius: var(--nv-radius-2xl);
	background-color: var(--nv-card);
}

.nv-skeleton-card__media {
	aspect-ratio: 1 / 1;
	width: 100%;
}

.nv-skeleton-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1.25rem;
}

.nv-skeleton-line {
	height: 1rem;
	border-radius: var(--nv-radius-md);
}

.nv-skeleton-line--sm {
	height: 0.75rem;
	width: 60%;
}

.nv-skeleton-line--title {
	width: 80%;
}

.nv-skeleton-line--price {
	height: 1.5rem;
	width: 6rem;
}

.nv-skeleton-line--btn {
	height: 3rem;
	width: 100%;
	border-radius: var(--nv-radius-xl);
}

/* Mobile filter drawer */
.nv-drawer {
	position: fixed;
	inset: 0;
	z-index: 70;
	display: none;
}

.nv-drawer.is-open {
	display: block;
}

.nv-drawer__overlay {
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.8);
	animation: nv-fade-in 180ms ease;
}

.nv-drawer__panel {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	max-height: 85vh;
	overflow-y: auto;
	border-top: 1px solid var(--nv-border);
	border-radius: var(--nv-radius-2xl) var(--nv-radius-2xl) 0 0;
	background-color: var(--nv-card);
	padding: 1.5rem 1rem 2rem;
	animation: nv-drawer-up 250ms var(--nv-ease);
}

@keyframes nv-drawer-up {
	from {
		transform: translateY(100%);
	}

	to {
		transform: none;
	}
}

.nv-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1.5rem;
}

.nv-drawer__title {
	font-family: var(--nv-font-display);
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--nv-foreground);
}

.nv-drawer__apply {
	margin-top: 2rem;
	width: 100%;
	border-radius: var(--nv-radius-xl);
	background-image: var(--nv-gradient);
	padding-block: 0.75rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--nv-primary-foreground);
}

/* ==========================================================================
   Empty state
   ========================================================================== */

.nv-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border: 1px dashed var(--nv-border);
	border-radius: var(--nv-radius-2xl);
	background-color: color-mix(in srgb, var(--nv-card) 60%, transparent);
	padding: 5rem 1.5rem;
	text-align: center;
}

.nv-empty__icon {
	margin-bottom: 1.25rem;
	display: grid;
	width: 4rem;
	height: 4rem;
	place-items: center;
	border-radius: var(--nv-radius-2xl);
	background-color: rgba(var(--nv-primary-rgb), 0.1);
	color: var(--nv-primary-glow);
	box-shadow: inset 0 0 0 1px rgba(var(--nv-primary-rgb), 0.25);
}

.nv-empty__icon svg {
	width: 1.75rem;
	height: 1.75rem;
}

.nv-empty__title {
	font-family: var(--nv-font-display);
	font-size: 1.25rem;
	line-height: 1.75rem;
	font-weight: 600;
	color: var(--nv-foreground);
}

.nv-empty__text {
	margin-top: 0.5rem;
	max-width: 24rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: var(--nv-muted-foreground);
}

.nv-empty__action {
	margin-top: 1.5rem;
}

/* ==========================================================================
   Single product
   ========================================================================== */

.nv-single-product {
	display: grid;
	gap: 3rem;
	padding-block: 3.5rem;
}

.nv-gallery__main {
	overflow: hidden;
	border: 1px solid var(--nv-border);
	border-radius: var(--nv-radius-2xl);
	background-color: var(--nv-card);
}

.nv-gallery__main img {
	aspect-ratio: 1 / 1;
	width: 100%;
	object-fit: cover;
}

.nv-gallery__thumbs {
	margin-top: 1rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.nv-gallery__thumb {
	overflow: hidden;
	border-radius: var(--nv-radius-xl);
	border: 1px solid var(--nv-border);
	transition: border-color 200ms ease;
	line-height: 0;
}

.nv-gallery__thumb:hover {
	border-color: rgba(var(--nv-primary-rgb), 0.5);
}

.nv-gallery__thumb.is-active {
	border-color: var(--nv-primary);
}

.nv-gallery__thumb img {
	width: 5rem;
	height: 5rem;
	object-fit: cover;
}

.nv-product__cat {
	display: inline-flex;
	border-radius: 9999px;
	border: 1px solid rgba(var(--nv-primary-rgb), 0.3);
	background-color: rgba(var(--nv-primary-rgb), 0.1);
	padding: 0.25rem 0.75rem;
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 600;
	color: var(--nv-primary-glow);
}

.nv-purchase__title {
	margin-top: 1rem;
	font-size: clamp(1.5rem, 6.5vw, 1.875rem);
	line-height: 2.25rem;
	font-weight: 700;
	color: var(--nv-foreground);
}

.nv-product__meta {
	margin-top: 1rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.875rem;
	color: var(--nv-muted-foreground);
}

.nv-product__price {
	margin-top: 1.5rem;
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
}

.nv-product__price-now {
	font-family: var(--nv-font-display);
	font-size: clamp(1.75rem, 8vw, 2.25rem);
	line-height: 2.5rem;
	font-weight: 700;
	color: var(--nv-primary-glow);
}

.nv-product__price-was {
	font-size: 1.125rem;
	line-height: 1.75rem;
	color: var(--nv-muted-foreground);
	text-decoration: line-through;
}

.nv-product__excerpt {
	margin-top: 1.25rem;
	font-size: 0.875rem;
	line-height: 1.625;
	color: var(--nv-muted-foreground);
}

.nv-feature-list {
	margin-top: 1.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.nv-feature-list li {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: var(--nv-foreground);
}

.nv-feature-list svg {
	margin-top: 0.125rem;
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
	color: var(--nv-success);
}

.nv-product__note {
	margin-top: 1.75rem;
	border: 1px solid var(--nv-border);
	border-radius: var(--nv-radius-xl);
	background-color: var(--nv-card);
	padding: 1rem;
	font-size: 0.75rem;
	line-height: 1.5;
	color: var(--nv-muted-foreground);
}

.nv-product__buy-desktop {
	display: none;
	margin-top: 1.5rem;
}

.nv-product__buy-note {
	display: none;
	margin-top: 0.75rem;
	text-align: center;
	font-size: 0.75rem;
	line-height: 1rem;
	color: var(--nv-muted-foreground);
}

.nv-product__assurances {
	margin-top: 2rem;
	display: grid;
	gap: 0.75rem;
}

.nv-product__assurances p {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	border: 1px solid var(--nv-border);
	border-radius: var(--nv-radius-xl);
	background-color: var(--nv-card);
	padding: 1rem;
	font-size: 0.75rem;
	line-height: 1.4;
	color: var(--nv-muted-foreground);
}

.nv-product__assurances svg {
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
	color: var(--nv-primary-glow);
}

/* Tabs */
.nv-tabs__list {
	display: flex;
	height: auto;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 0.5rem;
	border-radius: var(--nv-radius-xl);
	background-color: var(--nv-card);
	padding: 0.375rem;
}

.nv-tabs__trigger {
	border-radius: var(--nv-radius-lg);
	padding: 0.5rem 0.875rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 500;
	color: var(--nv-muted-foreground);
	transition: background-color 200ms ease, color 200ms ease;
}

.nv-tabs__trigger:hover {
	color: var(--nv-foreground);
}

.nv-tabs__trigger[aria-selected="true"] {
	background-color: var(--nv-background);
	color: var(--nv-foreground);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.nv-tabs__panel {
	margin-top: 1.5rem;
	border: 1px solid var(--nv-border);
	border-radius: var(--nv-radius-2xl);
	background-color: var(--nv-card);
	padding: 1.5rem;
	font-size: 0.875rem;
	line-height: 1.625;
	color: var(--nv-muted-foreground);
}

.nv-tabs__panel[hidden] {
	display: none;
}

.nv-tabs__panel > * + * {
	margin-top: 1rem;
}

.nv-tabs__panel--bare {
	border: 0;
	background: none;
	padding: 0;
}

.nv-tabs__panel strong {
	color: var(--nv-foreground);
	font-weight: 600;
}

/* Mobile sticky buy bar */
.nv-related__title {
	margin-bottom: 2rem;
	font-size: clamp(1.25rem, 5.5vw, 1.5rem);
	line-height: 2rem;
	font-weight: 700;
	color: var(--nv-foreground);
}

/* ==========================================================================
   Contact
   ========================================================================== */

.nv-contact {
	display: grid;
	gap: 2.5rem;
	padding-block: 3.5rem;
}

.nv-contact__methods {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.nv-contact__method {
	display: flex;
	align-items: center;
	gap: 1rem;
	border: 1px solid var(--nv-border);
	border-radius: var(--nv-radius-2xl);
	background-color: var(--nv-card);
	padding: 1.5rem;
	transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

.nv-contact__method:hover {
	transform: translateY(-0.125rem);
	border-color: rgba(var(--nv-primary-rgb), 0.6);
	box-shadow: var(--nv-shadow-card-hover);
}

.nv-contact__icon {
	display: grid;
	width: 3rem;
	height: 3rem;
	flex-shrink: 0;
	place-items: center;
	border-radius: var(--nv-radius-xl);
	background-color: rgba(var(--nv-primary-rgb), 0.12);
	color: var(--nv-primary-glow);
	box-shadow: inset 0 0 0 1px rgba(var(--nv-primary-rgb), 0.25);
}

.nv-contact__icon svg {
	width: 1.25rem;
	height: 1.25rem;
}

.nv-contact__label {
	display: block;
	font-family: var(--nv-font-display);
	font-size: 1rem;
	line-height: 1.5rem;
	font-weight: 600;
	color: var(--nv-foreground);
}

.nv-contact__detail {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: var(--nv-muted-foreground);
}

.nv-form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	border: 1px solid var(--nv-border);
	border-radius: var(--nv-radius-2xl);
	background-color: var(--nv-card);
	padding: 1.5rem;
}

.nv-form__note {
	text-align: center;
	font-size: 0.75rem;
	line-height: 1rem;
	color: var(--nv-muted-foreground);
}

.nv-form__hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.nv-notice {
	border-radius: var(--nv-radius-xl);
	border: 1px solid var(--nv-border);
	padding: 0.875rem 1rem;
	font-size: 0.875rem;
	line-height: 1.5;
}

.nv-notice--success {
	border-color: rgba(var(--nv-success-rgb), 0.4);
	background-color: rgba(var(--nv-success-rgb), 0.12);
	color: var(--nv-success);
}

.nv-notice--error {
	border-color: rgba(242, 42, 54, 0.4);
	background-color: rgba(242, 42, 54, 0.12);
	color: var(--nv-destructive);
}

.nv-field-error {
	display: block;
	margin-top: 0.375rem;
	font-size: 0.75rem;
	color: var(--nv-destructive);
}

.nv-field.has-error {
	border-color: var(--nv-destructive);
}

/* ==========================================================================
   Legal / prose pages
   ========================================================================== */

.nv-legal {
	padding-block: 3.5rem;
}

.nv-legal__intro {
	font-size: 1rem;
	line-height: 1.625;
	color: var(--nv-muted-foreground);
}

.nv-legal__footnote {
	margin-top: 3rem;
	border: 1px solid var(--nv-border);
	border-radius: var(--nv-radius-2xl);
	background-color: var(--nv-card);
	padding: 1.25rem;
	font-size: 0.75rem;
	line-height: 1.625;
	color: var(--nv-muted-foreground);
}

/* ==========================================================================
   Blog / archive cards
   ========================================================================== */

.nv-post-grid {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: 1.5rem;
}

.nv-post-card {
	display: flex;
	height: 100%;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--nv-border);
	border-radius: var(--nv-radius-2xl);
	background-color: var(--nv-card);
	transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

.nv-post-card:hover {
	transform: translateY(-0.25rem);
	border-color: rgba(var(--nv-primary-rgb), 0.6);
	box-shadow: var(--nv-shadow-card-hover);
}

.nv-post-card__media {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background-color: var(--nv-background);
}

.nv-post-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 500ms ease;
}

.nv-post-card:hover .nv-post-card__media img {
	transform: scale(1.05);
}

.nv-post-card__body {
	display: flex;
	flex: 1 1 0%;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1.5rem;
}

.nv-post-card__meta {
	font-size: 0.75rem;
	line-height: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--nv-primary-glow);
}

.nv-post-card__title {
	font-family: var(--nv-font-display);
	font-size: 1.125rem;
	line-height: 1.5rem;
	font-weight: 600;
	color: var(--nv-foreground);
}

.nv-post-card__title a:hover {
	color: var(--nv-primary-glow);
}

.nv-post-card__excerpt {
	font-size: 0.875rem;
	line-height: 1.625;
	color: var(--nv-muted-foreground);
}

.nv-post-card__more {
	margin-top: auto;
	padding-top: 0.5rem;
}

.nv-single-post__meta {
	margin-top: 1rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.75rem;
	color: var(--nv-muted-foreground);
}

.nv-single-post__thumb {
	margin-bottom: 2.5rem;
	overflow: hidden;
	border-radius: var(--nv-radius-2xl);
	border: 1px solid var(--nv-border);
}

.nv-tag-list {
	margin-top: 2.5rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.nv-tag-list a {
	border-radius: var(--nv-radius-lg);
	border: 1px solid var(--nv-border);
	background-color: var(--nv-card);
	padding: 0.375rem 0.75rem;
	font-size: 0.75rem;
	color: var(--nv-muted-foreground);
	transition: border-color 200ms ease, color 200ms ease;
}

.nv-tag-list a:hover {
	border-color: rgba(var(--nv-primary-rgb), 0.6);
	color: var(--nv-primary-glow);
}

/* ==========================================================================
   Sidebar & widgets
   ========================================================================== */

.nv-layout-sidebar {
	display: grid;
	gap: 2.5rem;
	padding-block: 3.5rem;
}

.nv-sidebar {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.nv-widget {
	border: 1px solid var(--nv-border);
	border-radius: var(--nv-radius-2xl);
	background-color: var(--nv-card);
	padding: 1.5rem;
}

.nv-widget__title {
	margin-bottom: 1rem;
	font-family: var(--nv-font-display);
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--nv-foreground);
}

.nv-widget ul {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	font-size: 0.875rem;
	color: var(--nv-muted-foreground);
}

.nv-widget a:hover {
	color: var(--nv-primary-glow);
}

.nv-widget select,
.nv-widget input[type="text"],
.nv-widget input[type="search"],
.nv-widget input[type="email"] {
	height: 3rem;
	width: 100%;
	border-radius: var(--nv-radius-xl);
	border: 1px solid var(--nv-border);
	background-color: var(--nv-background);
	padding-inline: 1rem;
	font-size: 0.875rem;
	color: var(--nv-foreground);
}

/* ==========================================================================
   Pagination
   ========================================================================== */

.nv-pagination {
	margin-top: 3rem;
	display: flex;
	justify-content: center;
}

.nv-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

.nv-pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 2.75rem;
	height: 2.75rem;
	padding-inline: 0.75rem;
	border-radius: var(--nv-radius-xl);
	border: 1px solid var(--nv-border);
	background-color: var(--nv-card);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--nv-muted-foreground);
	transition: border-color 200ms ease, color 200ms ease, background-color 200ms ease;
}

.nv-pagination .page-numbers:hover {
	border-color: rgba(var(--nv-primary-rgb), 0.6);
	color: var(--nv-foreground);
}

.nv-pagination .page-numbers.current {
	background-image: var(--nv-gradient);
	border-color: transparent;
	color: var(--nv-primary-foreground);
}

.nv-pagination .page-numbers.dots {
	border-color: transparent;
	background: none;
}

/* ==========================================================================
   Comments
   ========================================================================== */

.nv-comments {
	margin-top: 4rem;
	border-top: 1px solid var(--nv-border);
	padding-top: 3rem;
}

.nv-comments__title {
	margin-bottom: 2rem;
	font-family: var(--nv-font-display);
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--nv-foreground);
}

.nv-comments .comment-list,
.nv-comments .children {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.nv-comments .children {
	margin-top: 1.25rem;
	padding-left: 1.5rem;
	border-left: 1px solid var(--nv-border);
}

.nv-comment__body {
	border: 1px solid var(--nv-border);
	border-radius: var(--nv-radius-2xl);
	background-color: var(--nv-card);
	padding: 1.5rem;
}

.nv-comment__head {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
}

.nv-comment__head img {
	border-radius: 9999px;
}

.nv-comment__author {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--nv-foreground);
}

.nv-comment__date {
	font-size: 0.75rem;
	color: var(--nv-muted-foreground);
}

.nv-comment__text {
	font-size: 0.875rem;
	line-height: 1.625;
	color: var(--nv-muted-foreground);
}

.nv-comment__text > * + * {
	margin-top: 0.75rem;
}

.nv-comment__actions {
	margin-top: 0.75rem;
	display: flex;
	gap: 1rem;
	font-size: 0.75rem;
}

.nv-comment__actions a {
	color: var(--nv-primary-glow);
}

.nv-comments .comment-respond {
	margin-top: 3rem;
}

.nv-comments .comment-reply-title {
	margin-bottom: 1.5rem;
	font-family: var(--nv-font-display);
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--nv-foreground);
}

.nv-comments .comment-form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.nv-comments .comment-form label {
	display: block;
	margin-bottom: 0.5rem;
	font-size: 0.875rem;
	color: var(--nv-muted-foreground);
}

.nv-comments .comment-form input[type="text"],
.nv-comments .comment-form input[type="email"],
.nv-comments .comment-form input[type="url"],
.nv-comments .comment-form textarea {
	height: 3rem;
	width: 100%;
	border-radius: var(--nv-radius-xl);
	border: 1px solid var(--nv-border);
	background-color: var(--nv-card);
	padding-inline: 1rem;
	font-size: 0.875rem;
	color: var(--nv-foreground);
	outline: none;
}

.nv-comments .comment-form textarea {
	height: auto;
	padding: 1rem;
	line-height: 1.6;
}

.nv-comments .comment-form input:focus,
.nv-comments .comment-form textarea:focus {
	border-color: rgba(var(--nv-primary-rgb), 0.6);
}

.nv-comments .comment-form .form-submit {
	margin: 0;
}

.nv-comments .comment-form input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding-inline: 2rem;
	border: 0;
	border-radius: var(--nv-radius-xl);
	background-image: var(--nv-gradient);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--nv-primary-foreground);
	cursor: pointer;
	transition: transform 200ms ease, box-shadow 200ms ease;
}

.nv-comments .comment-form input[type="submit"]:hover {
	transform: scale(1.02);
	box-shadow: var(--nv-glow);
}

.nv-comments .comment-form-cookies-consent {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	font-size: 0.75rem;
	color: var(--nv-muted-foreground);
}

.nv-comments .comment-form-cookies-consent label {
	margin: 0;
}

/* ==========================================================================
   404
   ========================================================================== */

.nv-404 {
	display: flex;
	min-height: 70vh;
	align-items: center;
	justify-content: center;
	padding: 6rem var(--nv-gutter);
}

.nv-404__inner {
	max-width: 28rem;
	text-align: center;
}

.nv-404__code {
	font-family: var(--nv-font-display);
	font-size: clamp(4rem, 20vw, 6rem);
	line-height: 1;
	font-weight: 700;
	color: transparent;
	-webkit-text-stroke: 2px var(--nv-primary);
	animation: nv-glitch 2.4s infinite steps(2, end);
}

.nv-404__title {
	margin-top: 1.5rem;
	font-family: var(--nv-font-display);
	font-size: 1.5rem;
	line-height: 2rem;
	font-weight: 700;
	color: var(--nv-foreground);
}

.nv-404__text {
	margin-top: 0.75rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: var(--nv-muted-foreground);
}

.nv-404__actions {
	margin-top: 2rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
}

.nv-404__search {
	margin-top: 2rem;
}

/* ==========================================================================
   Scroll to top
   ========================================================================== */

.nv-to-top {
	position: fixed;
	bottom: 1.5rem;
	right: var(--nv-gutter);
	z-index: 40;
	display: grid;
	width: 3rem;
	height: 3rem;
	place-items: center;
	border-radius: var(--nv-radius-xl);
	border: 1px solid var(--nv-border);
	background-color: color-mix(in srgb, var(--nv-card) 90%, transparent);
	color: var(--nv-foreground);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	opacity: 0;
	visibility: hidden;
	transform: translateY(0.5rem);
	transition: opacity 200ms ease, visibility 200ms ease, transform 200ms ease,
		border-color 200ms ease, box-shadow 200ms ease;
}

.nv-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.nv-to-top:hover {
	transform: scale(1.05);
	border-color: rgba(var(--nv-primary-rgb), 0.6);
	box-shadow: var(--nv-glow);
}

.nv-to-top svg {
	width: 1.25rem;
	height: 1.25rem;
}

/* ==========================================================================
   Toast
   ========================================================================== */

.nv-toasts {
	position: fixed;
	bottom: 1.5rem;
	left: 50%;
	transform: translateX(-50%);
	z-index: 80;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	width: calc(100% - 2rem);
	max-width: 22rem;
	pointer-events: none;
}

.nv-toast {
	pointer-events: auto;
	border: 1px solid var(--nv-border);
	border-radius: var(--nv-radius-xl);
	background-color: var(--nv-popover);
	padding: 0.875rem 1rem;
	box-shadow: 0 18px 45px -12px rgba(0, 0, 0, 0.8);
	animation: nv-slide-up 200ms var(--nv-ease);
}

.nv-toast__title {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--nv-foreground);
}

.nv-toast__text {
	margin-top: 0.25rem;
	font-size: 0.75rem;
	color: var(--nv-muted-foreground);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (min-width: 480px) {
	.nv-product-grid,
	.nv-product-grid--4,
	.nv-post-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 640px) {
	.nv-header__cta {
		display: inline-flex;
	}

	.nv-section--wide {
		padding-block: 5rem;
	}

	.nv-carousel__media {
		aspect-ratio: 16 / 6;
	}

	.nv-carousel__content {
		padding: 3rem;
	}

	.nv-carousel__title {
		font-size: 2.25rem;
		line-height: 2.5rem;
	}

	.nv-carousel__text {
		font-size: 1rem;
		line-height: 1.5rem;
	}

	.nv-carousel__arrow {
		display: grid;
	}

	.nv-hero__title {
		font-size: 3rem;
	}

	.nv-heading__title,
	.nv-cta__title {
		font-size: 2.25rem;
		line-height: 2.5rem;
	}

	.nv-heading__text,
	.nv-cta__text {
		font-size: 1rem;
		line-height: 1.5rem;
	}

	.nv-page-hero__inner {
		padding-block: 5rem;
	}

	.nv-page-hero__title {
		font-size: 3rem;
		line-height: 1;
	}

	.nv-404__code {
		font-size: 8rem;
	}

	.nv-review-rail > * {
		width: 350px;
	}

	.nv-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.nv-footer__bottom {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
	}

	.nv-form {
		padding: 2rem;
	}

	.nv-product__assurances,
	.nv-shop__toolbar {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.nv-product__assurances {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.nv-shop__sort {
		width: 13rem;
	}

	.nv-rating-summary {
		grid-template-columns: auto minmax(0, 1fr);
	}

	.nv-rating-summary__head {
		text-align: left;
	}

	.nv-masonry {
		column-count: 2;
	}

	.nv-newsletter {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.nv-purchase__title {
		font-size: 2.25rem;
		line-height: 2.5rem;
	}

	.nv-related__title {
		font-size: 1.875rem;
		line-height: 2.25rem;
	}

	.nv-category-grid,
	.nv-post-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 768px) {
	.nv-steps {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.nv-steps__line {
		display: block;
	}
}

@media (min-width: 1024px) {
	.nv-header__inner {
		grid-template-columns: auto 1fr auto;
	}

	.nv-header__nav {
		display: flex;
	}

	.nv-header__burger {
		display: none;
	}

	.nv-hero__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		padding-block: 7rem;
	}

	.nv-hero__title {
		font-size: 3.75rem;
	}

	.nv-stats__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.nv-category-grid,
	.nv-product-grid--4 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.nv-product-grid--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.nv-post-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.nv-shop {
		grid-template-columns: 260px minmax(0, 1fr);
	}

	.nv-shop__aside {
		display: block;
	}

	.nv-shop__drawer-open {
		display: none;
	}

	.nv-single-product,
	.nv-contact,
	.nv-layout-sidebar {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.nv-layout-sidebar {
		grid-template-columns: minmax(0, 1fr) 20rem;
	}

	.nv-product__buy-desktop,
	.nv-product__buy-note {
		display: block;
	}

	.nv-masonry {
		column-count: 3;
	}

	.nv-review-rail {
		padding-inline: max(1.25rem, calc((100vw - 80rem) / 2));
	}

	.nv-mobile-menu {
		display: none !important;
	}

	/*
	 * Footer: the brand block plus every visible link column sit on one row,
	 * so the footer stays short instead of stacking into a 2x2 block.
	 */
	.nv-footer__grid--2 {
		grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	}

	.nv-footer__grid--3 {
		grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr));
	}

	.nv-footer__grid--4 {
		grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
	}

	.nv-footer__grid--5 {
		grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr));
	}
}

@media (min-width: 1280px) {
	.nv-product-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.nv-product-grid--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ==========================================================================
   Structural helpers used by the PHP templates
   ========================================================================== */

.skip-link:focus {
	z-index: 100001;
}

.nv-hero__copy {
	min-width: 0;
}

.nv-category__body {
	display: block;
	min-width: 0;
}

.nv-category__title,
.nv-category__text {
	display: block;
}

.nv-review__meta {
	min-width: 0;
}

.nv-shop__main {
	min-width: 0;
}

.nv-shop--no-filters {
	grid-template-columns: minmax(0, 1fr);
}

.nv-filters__widgets {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.nv-filters__widgets .nv-widget {
	padding: 0;
	border: 0;
	background: none;
}

.nv-product__summary {
	min-width: 0;
}

.nv-searchform {
	position: relative;
}

.nv-post-nav {
	margin-top: 3rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem;
	border-top: 1px solid var(--nv-border);
	padding-top: 2rem;
}

.nv-post-nav .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
}

/* The empty state is sometimes rendered as a <p> with spans inside. */
p.nv-empty > span {
	display: block;
}

p.nv-empty > .nv-empty__icon {
	display: grid;
}

p.nv-empty > .nv-empty__title {
	font-family: var(--nv-font-display);
	font-size: 1.25rem;
	line-height: 1.75rem;
	font-weight: 600;
	color: var(--nv-foreground);
}

p.nv-empty > .nv-empty__text {
	margin-top: 0.5rem;
	max-width: 24rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: var(--nv-muted-foreground);
}

.nv-contact__method > span:last-child {
	min-width: 0;
}

.nv-product__note svg {
	width: 0.875rem;
	height: 0.875rem;
	display: inline-block;
	vertical-align: -2px;
	margin-right: 0.35rem;
	color: var(--nv-primary-glow);
}

.nv-accordion__item[hidden] {
	display: none;
}

/* Show only the correct banner image per breakpoint. */
@media (min-width: 640px) {
	.nv-carousel__media img.nv-carousel__img--mobile {
		display: none;
	}

	.nv-carousel__media img.nv-carousel__img--desktop {
		display: block;
	}
}

/* ==========================================================================
   Background watermark
   An oversized, very faint brand mark behind the page header that lifts
   slightly on hover. Every value is driven by the theme options.
   ========================================================================== */

.nv-watermark {
	position: absolute;
	left: var(--nv-watermark-x, -320px);
	bottom: var(--nv-watermark-y, -220px);
	width: var(--nv-watermark-size, 860px);
	height: var(--nv-watermark-size, 860px);
	opacity: var(--nv-watermark-opacity, 0.055);
	filter: blur(var(--nv-watermark-blur, 0px));
	background-position: 0 100%;
	background-size: contain;
	background-repeat: no-repeat;
	pointer-events: none;
	z-index: 0;
	transition: opacity 240ms ease, filter 280ms ease;
}

.nv-hero:hover .nv-watermark,
.nv-page-hero:hover .nv-watermark {
	opacity: var(--nv-watermark-hover-opacity, 0.095);
	filter: blur(var(--nv-watermark-blur, 0px))
		drop-shadow(0 0 18px var(--nv-watermark-glow, rgba(126, 63, 219, 0.24)));
}

/* Keep the hero content above the watermark. */
.nv-hero__inner,
.nv-page-hero__inner {
	position: relative;
	z-index: 1;
}

.nv-hero,
.nv-page-hero {
	overflow: hidden;
}

@media (max-width: 639px) {
	.nv-watermark {
		width: min(var(--nv-watermark-size, 860px), 120vw);
		height: min(var(--nv-watermark-size, 860px), 120vw);
	}
}

@media (prefers-reduced-motion: reduce) {
	.nv-watermark {
		transition: none;
	}
}

/* ==========================================================================
   Frosted-glass card surfaces
   ========================================================================== */

.nv-glass-surfaces .nv-card,
.nv-glass-surfaces .nv-product-card,
.nv-glass-surfaces .nv-category,
.nv-glass-surfaces .nv-review,
.nv-glass-surfaces .nv-stat,
.nv-glass-surfaces .nv-accordion__item,
.nv-glass-surfaces .nv-shop__filters,
.nv-glass-surfaces .nv-form,
.nv-glass-surfaces .nv-contact__method,
.nv-glass-surfaces .nv-widget,
.nv-glass-surfaces .nv-newsletter,
.nv-glass-surfaces .nv-rating-summary,
.nv-glass-surfaces .nv-post-card,
.nv-glass-surfaces .nv-comment__body,
.nv-glass-surfaces .nv-tabs__list,
.nv-glass-surfaces .nv-tabs__panel,
.nv-glass-surfaces .nv-gallery__main,
.nv-glass-surfaces .nv-product__note,
.nv-glass-surfaces .nv-product__assurances p,
.nv-glass-surfaces .nv-legal__footnote,
.nv-glass-surfaces .nv-trust li,
.nv-glass-surfaces .nv-skeleton-card {
	background-color: color-mix(
		in srgb,
		var(--nv-card) var(--nv-surface-opacity, 78%),
		transparent
	);
	-webkit-backdrop-filter: blur(var(--nv-surface-blur, 24px));
	backdrop-filter: blur(var(--nv-surface-blur, 24px));
}

/* The product image sits on the page background, not on the glass. */
.nv-glass-surfaces .nv-product-card__media,
.nv-glass-surfaces .nv-post-card__media {
	background-color: color-mix(in srgb, var(--nv-background) 70%, transparent);
}

/* Browsers without backdrop-filter fall back to a solid card. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.nv-glass-surfaces .nv-card,
	.nv-glass-surfaces .nv-product-card,
	.nv-glass-surfaces .nv-category,
	.nv-glass-surfaces .nv-review,
	.nv-glass-surfaces .nv-stat,
	.nv-glass-surfaces .nv-accordion__item,
	.nv-glass-surfaces .nv-shop__filters,
	.nv-glass-surfaces .nv-form,
	.nv-glass-surfaces .nv-contact__method,
	.nv-glass-surfaces .nv-widget,
	.nv-glass-surfaces .nv-newsletter,
	.nv-glass-surfaces .nv-rating-summary,
	.nv-glass-surfaces .nv-post-card {
		background-color: var(--nv-card);
	}
}

/* ==========================================================================
   Responsive hardening
   Measured with headless Chrome at 320 / 375 / 414 / 768 / 1024 / 1440.
   ========================================================================== */

/* Nothing may force a track wider than the screen. */
.nv-hero__copy,
.nv-heading__body,
.nv-product__summary,
.nv-contact__methods,
.nv-shop__main,
.nv-footer__brand,
.nv-footer__col,
.nv-review__meta,
.nv-hero__chip-body,
.nv-search-result__text,
.nv-stat,
.nv-step {
	min-width: 0;
}

/* Long product names and URLs must never punch out of their card. */
.nv-product-card__title,
.nv-post-card__title,
.nv-product__title,
.nv-hero__title,
.nv-page-hero__title,
.nv-heading__title,
.nv-cta__title,
.nv-carousel__title,
.nv-accordion__trigger,
.nv-prose,
.nv-footer__links a,
.nv-contact__detail {
	overflow-wrap: break-word;
}

/* Section heading: stack the "view all" link under the title on small screens. */
@media (max-width: 559px) {
	.nv-heading {
		grid-template-columns: minmax(0, 1fr);
		justify-items: start;
	}

	.nv-newsletter__form .nv-field {
		flex-basis: 100%;
	}

	.nv-newsletter__form .nv-btn {
		width: 100%;
	}

	/* Keep the header from wrapping on very narrow phones. */
	.nv-logo__word {
		font-size: 1rem;
		letter-spacing: 0.12em;
	}

	.nv-logo__mark {
		height: 1.875rem;
	}

	.nv-404__actions .nv-btn {
		width: 100%;
	}

	.nv-container {
		--nv-gutter: 1rem;
	}
}

/* The tilted card stack and its stagger only make sense once there is room. */
@media (min-width: 1024px) {
	.nv-hero__stack {
		transform: rotateY(-14deg) rotateX(6deg);
	}

	.nv-hero__stack:hover {
		transform: rotateY(-6deg) rotateX(2deg);
	}

	.nv-hero__chip {
		margin-left: var(--nv-chip-offset, 0);
	}
}

/* Chip contents shrink rather than overflow. */
.nv-hero__chip img {
	width: clamp(3rem, 14vw, 4rem);
	height: clamp(3rem, 14vw, 4rem);
}

.nv-hero__chip .nv-stock {
	flex-shrink: 0;
}

@media (max-width: 359px) {
	.nv-hero__chip .nv-stock {
		display: none;
	}
}

/* Media never overflows its box. */
img,
video,
iframe,
embed,
object {
	max-width: 100%;
}

.nv-prose iframe,
.nv-prose embed,
.nv-prose object,
.nv-prose video {
	width: 100%;
}

/* Long unbroken strings in editor content. */
.nv-prose a,
.nv-comment__text {
	overflow-wrap: break-word;
	word-break: break-word;
}

/* ==========================================================================
   Reference layout — header brand block, pill nav and action buttons
   ========================================================================== */

.nv-header__brand {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	gap: 0.125rem;
}

.nv-header__sub {
	font-size: 0.6875rem;
	line-height: 1;
	letter-spacing: 0.02em;
	color: var(--nv-muted-foreground);
	padding-left: 2.875rem;
}

.nv-header__nav--pills ul {
	gap: 0.25rem;
	padding: 0.3125rem;
	border-radius: 9999px;
	border: 1px solid var(--nv-border);
	background-color: color-mix(in srgb, var(--nv-card) 70%, transparent);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
}

.nv-header__nav--pills a {
	border-radius: 9999px;
	padding: 0.5rem 1rem;
}

.nv-header__nav--pills .current-menu-item > a,
.nv-header__nav--pills .current_page_item > a,
.nv-header__nav--pills .current-menu-ancestor > a {
	background-color: color-mix(in srgb, var(--nv-foreground) 12%, transparent);
	color: var(--nv-foreground);
}

.nv-header__secondary {
	display: none;
	min-height: 44px;
	padding-inline: 1rem;
	border-radius: 9999px;
	color: var(--nv-foreground);
}

.nv-btn--light {
	background-color: var(--nv-foreground);
	color: var(--nv-background);
	border-radius: 9999px;
}

.nv-btn--light:hover {
	transform: scale(1.02);
	box-shadow: 0 12px 30px -12px rgba(255, 255, 255, 0.35);
}

.nv-header__cta {
	display: none;
	min-height: 44px;
	padding-inline: 1.25rem;
}

.nv-header__actions .nv-icon-btn {
	border-radius: 9999px;
}

/* ==========================================================================
   Hero: stat cards and the framed showcase panel
   ========================================================================== */

.nv-hero__stats {
	margin-top: 2rem;
	display: grid;
	gap: 0.75rem;
	grid-template-columns: minmax(0, 1fr);
	max-width: 20rem;
}

.nv-hero__stat {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	border: 1px solid var(--nv-border);
	border-radius: var(--nv-radius-2xl);
	background-color: color-mix(in srgb, var(--nv-card) var(--nv-surface-opacity, 78%), transparent);
	padding: 0.875rem 1.125rem;
}

.nv-hero__stat-value {
	font-family: var(--nv-font-display);
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--nv-foreground);
}

.nv-hero__stat-label {
	font-size: 0.75rem;
	line-height: 1.4;
	color: var(--nv-muted-foreground);
}

.nv-hero__panel-wrap {
	min-width: 0;
}

.nv-hero__panel-label {
	margin-bottom: 0.75rem;
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--nv-muted-foreground);
}

.nv-panel,
.nv-hero__panel {
	overflow: hidden;
	border: 1px solid var(--nv-border);
	border-radius: var(--nv-radius-2xl);
	background-color: color-mix(in srgb, var(--nv-card) var(--nv-surface-opacity, 78%), transparent);
	box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.9);
	-webkit-backdrop-filter: blur(var(--nv-surface-blur, 24px));
	backdrop-filter: blur(var(--nv-surface-blur, 24px));
}

.nv-panel img,
.nv-hero__panel img {
	display: block;
	width: 100%;
	height: auto;
}

.nv-hero__panel-note,
.nv-panel-note {
	margin-top: 1rem;
	border: 1px solid var(--nv-border);
	border-radius: var(--nv-radius-2xl);
	background-color: color-mix(in srgb, var(--nv-card) 60%, transparent);
	padding: 1rem 1.25rem;
}

.nv-hero__panel-note-title,
.nv-panel-note__title {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--nv-foreground);
}

.nv-hero__panel-note-text,
.nv-panel-note__text {
	margin-top: 0.25rem;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--nv-muted-foreground);
}

/* ==========================================================================
   Key features strip
   ========================================================================== */

.nv-keyfeat {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: minmax(0, 1fr);
	margin-top: 2.5rem;
}

.nv-keyfeat__item {
	border: 1px solid var(--nv-border);
	border-radius: var(--nv-radius-2xl);
	background-color: color-mix(in srgb, var(--nv-card) 55%, transparent);
	padding: 1.625rem 1.5rem;
	min-width: 0;
	-webkit-backdrop-filter: blur(var(--nv-surface-blur, 24px));
	backdrop-filter: blur(var(--nv-surface-blur, 24px));
	transition: border-color 200ms ease, transform 200ms ease, background-color 200ms ease;
}

.nv-keyfeat__item:hover {
	transform: translateY(-0.125rem);
	border-color: rgba(var(--nv-primary-rgb), 0.5);
	background-color: color-mix(in srgb, var(--nv-card) 78%, transparent);
}

/* The icon and the title share a row; the copy sits underneath both. */
.nv-keyfeat__head {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	min-width: 0;
}

.nv-keyfeat__icon {
	display: grid;
	flex: none;
	width: 2.75rem;
	height: 2.75rem;
	place-items: center;
	border: 1px solid var(--nv-border);
	border-radius: 9999px;
	background-color: color-mix(in srgb, var(--nv-background) 55%, transparent);
	color: var(--nv-foreground);
}

.nv-keyfeat__icon svg {
	width: 1.25rem;
	height: 1.25rem;
}

.nv-keyfeat__title {
	font-family: var(--nv-font-display);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--nv-foreground);
	min-width: 0;
	overflow-wrap: anywhere;
}

.nv-keyfeat__text {
	margin-top: 1.125rem;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--nv-muted-foreground);
	overflow-wrap: anywhere;
}

/* ==========================================================================
   About us
   ========================================================================== */

.nv-about {
	display: grid;
	gap: 2.5rem;
	align-items: start;
}

.nv-about__copy {
	min-width: 0;
}

.nv-about__text {
	margin-top: 1.25rem;
	font-size: 0.875rem;
	line-height: 1.8;
	color: var(--nv-muted-foreground);
}

.nv-about__text p + p {
	margin-top: 1rem;
}

.nv-about__cards {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	min-width: 0;
}

.nv-about__card {
	border: 1px solid var(--nv-border);
	border-radius: var(--nv-radius-2xl);
	background-color: color-mix(in srgb, var(--nv-card) var(--nv-surface-opacity, 78%), transparent);
	padding: 1.25rem 1.5rem;
	transition: border-color 200ms ease;
}

.nv-about__card:hover {
	border-color: rgba(var(--nv-primary-rgb), 0.5);
}

.nv-about__card-head {
	display: flex;
	align-items: center;
	gap: 0.625rem;
}

.nv-about__card-icon {
	display: grid;
	width: 1.75rem;
	height: 1.75rem;
	place-items: center;
	border-radius: var(--nv-radius-md);
	background-color: rgba(var(--nv-primary-rgb), 0.14);
	color: var(--nv-primary-glow);
	flex-shrink: 0;
}

.nv-about__card-icon svg {
	width: 0.9375rem;
	height: 0.9375rem;
}

.nv-about__card-title {
	font-family: var(--nv-font-display);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--nv-foreground);
}

.nv-about__card-text {
	margin-top: 0.5rem;
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var(--nv-muted-foreground);
}

/* ==========================================================================
   Category tile with artwork
   ========================================================================== */

.nv-category__art {
	display: block;
	overflow: hidden;
	border-radius: var(--nv-radius-xl);
	border: 1px solid var(--nv-border);
	background-color: color-mix(in srgb, var(--nv-background) 60%, transparent);
	aspect-ratio: 16 / 10;
}

.nv-category__art img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 500ms ease;
}

.nv-category:hover .nv-category__art img {
	transform: scale(1.04);
}

.nv-category__art-fallback {
	display: grid;
	width: 100%;
	height: 100%;
	place-items: center;
	color: var(--nv-primary-glow);
	background-image: radial-gradient(
		ellipse at 50% 50%,
		rgba(var(--nv-primary-rgb), 0.22),
		transparent 70%
	);
}

.nv-category__art-fallback svg {
	width: 3rem;
	height: 3rem;
}

.nv-category__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font-weight: 600;
	color: var(--nv-primary-glow);
}

.nv-category__cta svg {
	width: 0.9375rem;
	height: 0.9375rem;
	transition: transform 200ms ease;
}

.nv-category:hover .nv-category__cta svg {
	transform: translateX(0.15rem);
}

.nv-category__count {
	font-size: 0.75rem;
	color: var(--nv-muted-foreground);
}

/* ==========================================================================
   Product card — wide artwork variant
   ========================================================================== */

.nv-product-card__media {
	aspect-ratio: 16 / 10;
	padding: 0.75rem 0.75rem 0;
	background: none;
}

.nv-product-card__media > a {
	display: block;
	overflow: hidden;
	border-radius: var(--nv-radius-xl);
	border: 1px solid var(--nv-border);
	background-color: color-mix(in srgb, var(--nv-background) 60%, transparent);
	height: 100%;
}

.nv-product-card__placeholder {
	display: grid;
	width: 100%;
	height: 100%;
	place-items: center;
	background-image: radial-gradient(
		ellipse at 50% 50%,
		rgba(var(--nv-primary-rgb), 0.2),
		transparent 70%
	);
}

.nv-product-card__placeholder img {
	width: 4rem;
	height: 4rem;
	object-fit: contain;
	opacity: 0.85;
}

.nv-product-card__cat {
	font-size: 0.75rem;
	line-height: 1rem;
	color: var(--nv-muted-foreground);
}

.nv-product-card__foot {
	margin-top: auto;
	padding-top: 0.5rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}

.nv-product-card__foot .nv-price {
	margin-top: 0;
	padding-top: 0;
}

.nv-product-card__view {
	min-height: 40px;
	padding-inline: 1rem;
	border-radius: 9999px;
	font-size: 0.8125rem;
}

.nv-product-card__view svg {
	width: 0.875rem;
	height: 0.875rem;
}

/* ==========================================================================
   Status badges
   ========================================================================== */

.nv-status {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	border-radius: 9999px;
	padding: 0.25rem 0.625rem;
	font-size: 11px;
	line-height: 1rem;
	font-weight: 600;
	border: 1px solid var(--nv-border);
	background-color: color-mix(in srgb, var(--nv-card) 80%, transparent);
	color: var(--nv-muted-foreground);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.nv-status svg {
	width: 0.8125rem;
	height: 0.8125rem;
}

.nv-status--available {
	border-color: rgba(var(--nv-success-rgb), 0.45);
	background-color: rgba(var(--nv-success-rgb), 0.12);
	color: var(--nv-success);
}

.nv-status--updating {
	border-color: rgba(240, 160, 60, 0.45);
	background-color: rgba(240, 160, 60, 0.12);
	color: #f0a03c;
}

.nv-status--unavailable {
	border-color: rgba(242, 42, 54, 0.4);
	background-color: rgba(242, 42, 54, 0.1);
	color: var(--nv-destructive);
}

.nv-status--lg {
	padding: 0.5rem 1rem;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.nv-status--lg svg {
	width: 1rem;
	height: 1rem;
}

/* ==========================================================================
   Small chips
   ========================================================================== */

.nv-chip-sm {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	border-radius: 9999px;
	border: 1px solid var(--nv-border);
	background-color: color-mix(in srgb, var(--nv-card) 80%, transparent);
	padding: 0.25rem 0.75rem;
	font-size: 0.75rem;
	line-height: 1.25rem;
	font-weight: 500;
	color: var(--nv-muted-foreground);
	transition: border-color 200ms ease, color 200ms ease;
}

a.nv-chip-sm:hover {
	border-color: rgba(var(--nv-primary-rgb), 0.6);
	color: var(--nv-foreground);
}

.nv-chip-sm svg {
	width: 0.8125rem;
	height: 0.8125rem;
}

.nv-chip-sm--accent {
	border-color: rgba(var(--nv-primary-rgb), 0.4);
	background-color: rgba(var(--nv-primary-rgb), 0.14);
	color: var(--nv-primary-glow);
}

/* ==========================================================================
   Filter bar
   ========================================================================== */

.nv-filterbar {
	display: grid;
	gap: 1rem;
	align-items: center;
	margin-bottom: 2rem;
	border: 1px solid var(--nv-border);
	border-radius: var(--nv-radius-2xl);
	background-color: color-mix(in srgb, var(--nv-card) var(--nv-surface-opacity, 78%), transparent);
	padding: 1rem;
	-webkit-backdrop-filter: blur(var(--nv-surface-blur, 24px));
	backdrop-filter: blur(var(--nv-surface-blur, 24px));
}

.nv-filterbar__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	min-width: 0;
}

.nv-pill-btn {
	min-height: 40px;
	display: inline-flex;
	align-items: center;
	border-radius: 9999px;
	border: 1px solid var(--nv-border);
	background-color: color-mix(in srgb, var(--nv-background) 40%, transparent);
	padding-inline: 1.125rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--nv-muted-foreground);
	transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}

.nv-pill-btn:hover {
	border-color: rgba(var(--nv-primary-rgb), 0.5);
	color: var(--nv-foreground);
}

.nv-pill-btn.is-active {
	background-color: color-mix(in srgb, var(--nv-foreground) 92%, transparent);
	border-color: transparent;
	color: var(--nv-background);
}

.nv-filterbar__search {
	min-width: 0;
}

.nv-filterbar__search .nv-field {
	border-radius: 9999px;
	background-color: color-mix(in srgb, var(--nv-background) 40%, transparent);
}

/* ==========================================================================
   Help band
   ========================================================================== */

.nv-helpband {
	display: grid;
	gap: 1.25rem;
	align-items: center;
	border: 1px solid var(--nv-border);
	border-radius: var(--nv-radius-2xl);
	background-color: color-mix(in srgb, var(--nv-card) var(--nv-surface-opacity, 78%), transparent);
	padding: 1.75rem;
	-webkit-backdrop-filter: blur(var(--nv-surface-blur, 24px));
	backdrop-filter: blur(var(--nv-surface-blur, 24px));
}

.nv-helpband__title {
	font-family: var(--nv-font-display);
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--nv-foreground);
}

.nv-helpband__text {
	margin-top: 0.5rem;
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--nv-muted-foreground);
}

.nv-helpband .nv-btn {
	border-radius: 9999px;
	justify-self: start;
}

/* ==========================================================================
   Product page: sub-nav, purchase panel, requirements, feature grid
   ========================================================================== */

.nv-subnav {
	border-bottom: 1px solid var(--nv-border);
	background-color: color-mix(in srgb, var(--nv-background) 80%, transparent);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
}

.nv-subnav__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	padding-block: 0.75rem;
}

.nv-subnav__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	min-width: 0;
}

.nv-subnav__links a {
	border-radius: 9999px;
	padding: 0.4375rem 0.875rem;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--nv-muted-foreground);
	transition: background-color 200ms ease, color 200ms ease;
}

.nv-subnav__links a:hover {
	background-color: color-mix(in srgb, var(--nv-foreground) 10%, transparent);
	color: var(--nv-foreground);
}

.nv-product {
	display: grid;
	gap: 2rem;
	padding-block: 2.5rem;
	/*
	 * The columns must stretch to the row height. A sticky panel can only
	 * travel inside its own grid area, so an `align-items: start` grid would
	 * give it a content-height area and nothing to stick within.
	 */
	align-items: stretch;
}

.nv-product__main {
	min-width: 0;
	align-self: start;
}

.nv-product__aside {
	min-width: 0;
}

.nv-purchase {
	min-width: 0;
	border: 1px solid var(--nv-border);
	border-radius: var(--nv-radius-2xl);
	background-color: color-mix(in srgb, var(--nv-card) var(--nv-surface-opacity, 78%), transparent);
	padding: 1.5rem;
	-webkit-backdrop-filter: blur(var(--nv-surface-blur, 24px));
	backdrop-filter: blur(var(--nv-surface-blur, 24px));
}

.nv-purchase__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1rem;
}

.nv-purchase__title {
	font-size: clamp(1.5rem, 6vw, 2rem);
	line-height: 1.15;
	font-weight: 700;
	color: var(--nv-foreground);
	overflow-wrap: break-word;
}

.nv-purchase__text {
	margin-top: 0.75rem;
	font-size: 0.875rem;
	line-height: 1.65;
	color: var(--nv-muted-foreground);
}

.nv-purchase__block {
	margin-top: 1.5rem;
	border-top: 1px solid var(--nv-border);
	padding-top: 1.25rem;
}

.nv-purchase__block-title {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--nv-foreground);
	margin-bottom: 0.75rem;
}

.nv-variants {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.nv-variant {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	border: 1px solid var(--nv-border);
	border-radius: var(--nv-radius-xl);
	background-color: color-mix(in srgb, var(--nv-background) 45%, transparent);
	padding: 0.75rem 1rem;
	text-align: left;
	transition: border-color 200ms ease, background-color 200ms ease;
}

.nv-variant:hover {
	border-color: rgba(var(--nv-primary-rgb), 0.5);
}

.nv-variant.is-selected {
	border-color: rgba(var(--nv-primary-rgb), 0.85);
	background-color: rgba(var(--nv-primary-rgb), 0.16);
}

.nv-variant__main {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	min-width: 0;
}

.nv-variant__label {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--nv-foreground);
}

.nv-variant__stock {
	font-size: 0.75rem;
	color: var(--nv-muted-foreground);
}

.nv-variant__price {
	flex-shrink: 0;
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--nv-foreground);
}

.nv-purchase__selected {
	margin-top: 0.75rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	border: 1px solid var(--nv-border);
	border-radius: var(--nv-radius-xl);
	background-color: color-mix(in srgb, var(--nv-background) 45%, transparent);
	padding: 0.75rem 1rem;
	font-size: 0.8125rem;
	color: var(--nv-muted-foreground);
}

.nv-purchase__selected strong {
	color: var(--nv-foreground);
}

.nv-purchase__selected-price {
	font-weight: 700;
	color: var(--nv-foreground);
}

.nv-purchase__actions {
	margin-top: 1.25rem;
}

.nv-purchase__note {
	margin-top: 0.75rem;
	text-align: center;
	font-size: 0.75rem;
	color: var(--nv-muted-foreground);
}

.nv-reqs {
	display: grid;
	gap: 1rem;
	grid-template-columns: minmax(0, 1fr);
}

.nv-reqs__card {
	border: 1px solid var(--nv-border);
	border-radius: var(--nv-radius-2xl);
	background-color: color-mix(in srgb, var(--nv-card) var(--nv-surface-opacity, 78%), transparent);
	padding: 1.25rem 1.5rem;
	min-width: 0;
}

.nv-reqs__head {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	margin-bottom: 0.625rem;
}

.nv-reqs__icon {
	display: grid;
	width: 1.75rem;
	height: 1.75rem;
	place-items: center;
	border-radius: var(--nv-radius-md);
	background-color: rgba(var(--nv-primary-rgb), 0.14);
	color: var(--nv-primary-glow);
	flex-shrink: 0;
}

.nv-reqs__icon svg {
	width: 0.9375rem;
	height: 0.9375rem;
}

.nv-reqs__label {
	font-size: 0.8125rem;
	color: var(--nv-muted-foreground);
}

.nv-reqs__values {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--nv-foreground);
}

.nv-featgrid {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: minmax(0, 1fr);
}

.nv-featgrid__card {
	border: 1px solid var(--nv-border);
	border-radius: var(--nv-radius-2xl);
	background-color: color-mix(in srgb, var(--nv-card) var(--nv-surface-opacity, 78%), transparent);
	padding: 1.5rem;
	min-width: 0;
}

.nv-featgrid__title {
	font-family: var(--nv-font-display);
	font-size: 1rem;
	font-weight: 600;
	color: var(--nv-foreground);
	margin-bottom: 0.75rem;
}

.nv-featgrid .nv-feature-list {
	margin-top: 0;
	gap: 0.5rem;
}

.nv-featgrid .nv-feature-list li {
	font-size: 0.8125rem;
	color: var(--nv-muted-foreground);
}

.nv-featgrid .nv-feature-list svg {
	color: var(--nv-primary-glow);
}

/* ==========================================================================
   Status page
   ========================================================================== */

.nv-status-grid {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: minmax(0, 1fr);
}

.nv-status-card {
	border: 1px solid var(--nv-border);
	border-radius: var(--nv-radius-2xl);
	background-color: color-mix(in srgb, var(--nv-card) var(--nv-surface-opacity, 78%), transparent);
	padding: 1.5rem;
	min-width: 0;
	transition: border-color 200ms ease, transform 200ms ease;
}

.nv-status-card:hover {
	transform: translateY(-0.125rem);
	border-color: rgba(var(--nv-primary-rgb), 0.5);
}

.nv-status-card[hidden] {
	display: none;
}

.nv-status-card__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}

.nv-status-card__cat {
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--nv-muted-foreground);
}

.nv-status-card__title {
	margin-top: 0.375rem;
	font-family: var(--nv-font-display);
	font-size: 1.375rem;
	font-weight: 700;
	color: var(--nv-foreground);
	overflow-wrap: break-word;
}

.nv-status-card__title a:hover {
	color: var(--nv-primary-glow);
}

.nv-status-card__since {
	margin-top: 1.75rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	font-size: 0.8125rem;
	color: var(--nv-muted-foreground);
}

.nv-status-card__ago {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	color: var(--nv-foreground);
}

.nv-status-card__ago svg {
	width: 0.875rem;
	height: 0.875rem;
	color: var(--nv-muted-foreground);
}

.nv-footer__sub {
	margin-top: 0.25rem;
	font-size: 0.6875rem;
	letter-spacing: 0.02em;
	color: var(--nv-muted-foreground);
	padding-left: 2.875rem;
}

.nv-footer__tagline {
	text-align: left;
}

/* ==========================================================================
   Reference layout — responsive
   ========================================================================== */

@media (min-width: 560px) {
	.nv-hero__stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		max-width: 28rem;
	}

	.nv-filterbar {
		grid-template-columns: minmax(0, 1fr) 16rem;
	}

	.nv-helpband {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.nv-footer__tagline {
		text-align: right;
	}
}

@media (min-width: 640px) {
	.nv-keyfeat {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.nv-reqs,
	.nv-featgrid,
	.nv-status-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.nv-header__secondary {
		display: inline-flex;
	}
}

@media (min-width: 1024px) {
	.nv-header__cta {
		display: inline-flex;
	}

	.nv-keyfeat {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.nv-about {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 3rem;
	}

	.nv-reqs,
	.nv-status-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.nv-product {
		grid-template-columns: minmax(0, 1fr) 24rem;
		gap: 2.5rem;
		padding-block: 3rem;
	}

	.nv-purchase {
		position: sticky;
		top: 6rem;
	}
}

/* ==========================================================================
   Reviews marquee — the row slides on its own in a seamless loop
   ========================================================================== */

.nv-review-marquee {
	position: relative;
	overflow: hidden;
	padding-block: 0.25rem 1rem;

	/* Fade the cards out at both edges instead of cutting them off. */
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 5rem,
		#000 calc(100% - 5rem),
		transparent 100%
	);
	mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 5rem,
		#000 calc(100% - 5rem),
		transparent 100%
	);
}

.nv-review-marquee__track {
	display: flex;
	width: max-content;
	animation: nv-marquee var(--nv-marquee-duration, 60s) linear infinite;
	will-change: transform;
}

/*
 * The keyframes run 0 -> -50%, which reads as right-to-left. Playing them in
 * reverse gives the left-to-right drift without a second set of keyframes,
 * and it still starts exactly on the seam so the loop stays invisible.
 */
.nv-review-marquee--ltr .nv-review-marquee__track {
	animation-direction: reverse;
}

.nv-review-marquee__set {
	display: flex;
	gap: 1.25rem;
	padding-right: 1.25rem;
}

.nv-review-marquee__set > * {
	width: 300px;
	flex-shrink: 0;
}

.nv-review-marquee--pause:hover .nv-review-marquee__track,
.nv-review-marquee--pause:focus-within .nv-review-marquee__track {
	animation-play-state: paused;
}

@media (min-width: 640px) {
	.nv-review-marquee__set > * {
		width: 350px;
	}
}

/*
 * Without motion the loop would never advance, so fall back to a normal
 * horizontal scroller the visitor can swipe.
 */
@media (prefers-reduced-motion: reduce) {
	.nv-review-marquee {
		overflow-x: auto;
		-webkit-mask-image: none;
		mask-image: none;
		scrollbar-width: thin;
	}

	.nv-review-marquee__track {
		animation: none;
	}

	.nv-review-marquee__set[aria-hidden="true"] {
		display: none;
	}
}

/* ==========================================================================
   Sticky header offsets
   ========================================================================== */

/*
 * When an admin is logged in WordPress pins its own bar to the top of the
 * viewport, so the sticky header has to start below it. The bar is 32px on
 * desktop and 46px below 783px, where it also stops being fixed.
 */
.admin-bar .nv-header.is-sticky {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .nv-header.is-sticky {
		top: 46px;
	}
}

@media screen and (max-width: 600px) {
	/* Below 600px the admin bar scrolls away with the page. */
	.admin-bar .nv-header.is-sticky {
		top: 0;
	}
}

/* Anchor jumps must not land underneath the sticky header. */
.nv-has-sticky-header :target,
.nv-has-sticky-header [id] {
	scroll-margin-top: 6rem;
}

/* The mobile menu and search sit above the header. */
.nv-mobile-menu,
.nv-search-dialog,
.nv-drawer {
	z-index: 70;
}

.admin-bar .nv-mobile-menu {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .nv-mobile-menu {
		top: 46px;
	}
}

@media screen and (max-width: 600px) {
	.admin-bar .nv-mobile-menu {
		top: 0;
	}
}

/* ==========================================================================
   Header — matched to the reference layout
   ========================================================================== */

/* Brand: mark on the left, name and sub-label stacked beside it. */
.nv-header__brand {
	display: block;
	min-width: 0;
}

.nv-logo {
	align-items: center;
	gap: 0.75rem;
}

.nv-logo__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.0625rem;
	min-width: 0;
}

.nv-logo__word {
	font-size: 1.0625rem;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
	color: var(--nv-foreground);
}

.nv-logo__sub {
	font-size: 0.75rem;
	line-height: 1.2;
	font-weight: 400;
	letter-spacing: 0;
	white-space: nowrap;
	color: var(--nv-muted-foreground);
}

/* The old sub-label sat under the whole logo; the stacked one replaces it. */
.nv-header__sub {
	display: none;
}

/*
 * The reference has no container around the menu — only the current page
 * carries a pill, so the outer border and background are removed.
 */
.nv-header__nav--pills ul {
	gap: 0.25rem;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

.nv-header__nav--pills a {
	border-radius: 0.75rem;
	padding: 0.5625rem 1.0625rem;
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--nv-muted-foreground);
}

.nv-header__nav--pills a:hover {
	background-color: color-mix(in srgb, var(--nv-foreground) 7%, transparent);
	color: var(--nv-foreground);
}

.nv-header__nav--pills .current-menu-item > a,
.nv-header__nav--pills .current_page_item > a,
.nv-header__nav--pills .current-menu-ancestor > a,
.nv-header__nav--pills .current-menu-parent > a {
	background-color: color-mix(in srgb, var(--nv-foreground) 10%, transparent);
	color: var(--nv-foreground);
	font-weight: 600;
}

/* Square icon button, softly rounded rather than a circle. */
.nv-header__actions .nv-icon-btn {
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 0.75rem;
	border-color: var(--nv-border);
	background-color: color-mix(in srgb, var(--nv-card) 70%, transparent);
	color: var(--nv-foreground);
}

.nv-header__actions .nv-icon-btn:hover {
	border-color: rgba(var(--nv-primary-rgb), 0.6);
	background-color: color-mix(in srgb, var(--nv-card) 90%, transparent);
}

.nv-header__actions .nv-icon-btn svg {
	width: 1.125rem;
	height: 1.125rem;
}

/* Secondary (Discord) button: dark pill with a hairline border. */
.nv-header__secondary {
	gap: 0.5rem;
	min-height: 2.75rem;
	padding-inline: 1.125rem;
	border-radius: 9999px;
	border: 1px solid var(--nv-border);
	background-color: color-mix(in srgb, var(--nv-card) 70%, transparent);
	color: var(--nv-foreground);
	font-size: 0.9375rem;
	font-weight: 600;
}

.nv-header__secondary:hover {
	border-color: rgba(var(--nv-primary-rgb), 0.6);
	background-color: color-mix(in srgb, var(--nv-card) 90%, transparent);
	color: var(--nv-foreground);
}

.nv-header__secondary svg {
	width: 1.125rem;
	height: 1.125rem;
}

/* Primary (Log In) button: solid white pill with a trailing arrow. */
.nv-header__cta {
	gap: 0.5rem;
	min-height: 2.75rem;
	padding-inline: 1.25rem;
	border-radius: 9999px;
	font-size: 0.9375rem;
	font-weight: 600;
}

.nv-header__cta svg {
	width: 1rem;
	height: 1rem;
}

.nv-header__inner {
	gap: 1.25rem;
	padding-block: 1rem;
}

.nv-header__actions {
	gap: 0.625rem;
}

@media (min-width: 1024px) {
	.nv-header__nav {
		justify-self: center;
	}
}

/* ==========================================================================
   Mobile menu — dropdown panel under the header, matched to the reference
   ========================================================================== */

/*
 * The header stays fully visible and interactive while the menu is open, so
 * the overlay sits *below* it in the stacking order and only dims the page.
 */
.nv-mobile-menu {
	position: fixed;
	inset: 0;
	z-index: 45;
	display: block;
	width: 100%;
	max-width: 100vw;
	overflow: visible;
	contain: layout;
	background: none;
	background-image: none;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: none;
	transition:
		opacity 200ms var(--nv-ease),
		visibility 240ms var(--nv-ease);
}

.nv-mobile-menu.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.nv-mobile-menu__backdrop {
	position: absolute;
	inset: 0;
	background-color: color-mix(in srgb, var(--nv-background) 78%, transparent);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}

.nv-mobile-menu__panel {
	position: absolute;
	top: calc(var(--nv-menu-top, 4.8125rem) + 0.5rem);
	left: var(--nv-gutter);
	right: var(--nv-gutter);
	max-height: calc(100vh - var(--nv-menu-top, 4.8125rem) - 1.5rem);
	overflow-y: auto;
	border: 1px solid var(--nv-border);
	border-radius: 1.25rem;
	background-color: color-mix(in srgb, var(--nv-card) 96%, transparent);
	box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.9);
	padding: 0.75rem;
	-webkit-backdrop-filter: blur(var(--nv-surface-blur, 24px));
	backdrop-filter: blur(var(--nv-surface-blur, 24px));

	transform: translateY(-0.625rem);
	opacity: 0;
	transition:
		transform 260ms var(--nv-ease),
		opacity 220ms var(--nv-ease);
}

.nv-mobile-menu.is-open .nv-mobile-menu__panel {
	transform: none;
	opacity: 1;
}

/* Menu links: the current page gets a pill, exactly like the desktop nav. */
.nv-mobile-menu__body {
	flex: none;
	overflow: visible;
	padding: 0;
	min-width: 0;
}

.nv-mobile-menu__body ul {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	width: 100%;
	min-width: 0;
}

.nv-mobile-menu__body .sub-menu {
	padding-left: 0.75rem;
	margin-top: 0.125rem;
}

.nv-mobile-menu__body a {
	display: flex;
	min-height: 3rem;
	align-items: center;
	justify-content: flex-start;
	gap: 0.5rem;
	border: 0;
	border-radius: 0.875rem;
	padding: 0 1rem;
	font-family: var(--nv-font-sans);
	font-size: 1rem;
	font-weight: 500;
	color: var(--nv-muted-foreground);
	transition: background-color 200ms ease, color 200ms ease;
}

.nv-mobile-menu__body a:hover,
.nv-mobile-menu__body a:focus-visible {
	background-color: color-mix(in srgb, var(--nv-foreground) 7%, transparent);
	color: var(--nv-foreground);
	padding-left: 1rem;
}

.nv-mobile-menu__body .current-menu-item > a,
.nv-mobile-menu__body .current_page_item > a,
.nv-mobile-menu__body .current-menu-ancestor > a,
.nv-mobile-menu__body .current-menu-parent > a {
	background-color: color-mix(in srgb, var(--nv-foreground) 10%, transparent);
	color: var(--nv-foreground);
	font-weight: 600;
}

.nv-mobile-menu__body .sub-menu a {
	min-height: 2.5rem;
	font-size: 0.9375rem;
}

/* Divider, then the two full-width buttons. */
.nv-mobile-menu__actions {
	margin-top: 0.75rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--nv-border);
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.nv-mobile-menu__btn {
	width: 100%;
	min-height: 3rem;
	border-radius: 0.875rem;
	font-size: 0.9375rem;
	font-weight: 600;
}

.nv-mobile-menu__btn.nv-btn--ghost {
	border: 1px solid var(--nv-border);
	background-color: color-mix(in srgb, var(--nv-background) 45%, transparent);
	color: var(--nv-foreground);
}

.nv-mobile-menu__btn svg {
	width: 1.125rem;
	height: 1.125rem;
}

/* Stagger the entrance of the rows. */
.nv-mobile-menu__body > ul > li,
.nv-mobile-menu__actions {
	opacity: 0;
	transform: translateY(0.375rem);
	transition:
		opacity 260ms var(--nv-ease),
		transform 260ms var(--nv-ease);
}

.nv-mobile-menu.is-open .nv-mobile-menu__body > ul > li,
.nv-mobile-menu.is-open .nv-mobile-menu__actions {
	opacity: 1;
	transform: none;
}

.nv-mobile-menu.is-open .nv-mobile-menu__body > ul > li:nth-child(1) { transition-delay: 70ms; }
.nv-mobile-menu.is-open .nv-mobile-menu__body > ul > li:nth-child(2) { transition-delay: 105ms; }
.nv-mobile-menu.is-open .nv-mobile-menu__body > ul > li:nth-child(3) { transition-delay: 140ms; }
.nv-mobile-menu.is-open .nv-mobile-menu__body > ul > li:nth-child(4) { transition-delay: 175ms; }
.nv-mobile-menu.is-open .nv-mobile-menu__body > ul > li:nth-child(n + 5) { transition-delay: 210ms; }
.nv-mobile-menu.is-open .nv-mobile-menu__actions { transition-delay: 245ms; }

/* Burger swaps to a close icon while the menu is open. */
.nv-header__burger {
	position: relative;
}

.nv-header__burger-icon {
	display: inline-grid;
	place-items: center;
}

.nv-header__burger[aria-expanded="false"] .nv-header__burger-icon--close,
.nv-header__burger[aria-expanded="true"] .nv-header__burger-icon--open {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.nv-mobile-menu,
	.nv-mobile-menu__panel,
	.nv-mobile-menu__body > ul > li,
	.nv-mobile-menu__actions {
		transition: none;
		transform: none;
	}
}

/* ==========================================================================
   Mobile header actions — Discord collapses to an icon, then the cart, then
   the menu toggle, matching the reference order.
   ========================================================================== */

@media (max-width: 639px) {
	.nv-header__brand .nv-logo__sub {
		display: none;
	}

	.nv-header__secondary {
		display: inline-flex;
		order: -1;
		width: 2.75rem;
		min-width: 2.75rem;
		padding: 0;
		border-radius: 0.75rem;
		justify-content: center;
	}

	.nv-header__secondary-text {
		display: none;
	}

	.nv-header__actions {
		gap: 0.5rem;
	}
}

/* ==========================================================================
   Mobile menu overrides for the dropdown panel
   ========================================================================== */

/*
 * The overlay now covers the whole viewport and the panel positions itself
 * from the header's measured bottom edge, so the old admin-bar offsets on the
 * overlay would push it down and leave a gap.
 */
.admin-bar .nv-mobile-menu {
	top: 0;
}

/*
 * Scroll locking has to happen on the root element: the viewport is the
 * scroll container now, so `overflow: hidden` on <body> alone does nothing.
 */
html.nv-no-scroll {
	overflow: hidden;
}

/* ==========================================================================
   Brand block on narrow phones
   The mark is wider than it is tall, so it needs a width cap or it crowds
   the action buttons; the wordmark then truncates instead of colliding.
   ========================================================================== */

.nv-header__brand,
.nv-logo,
.nv-logo__text {
	min-width: 0;
}

@media (max-width: 639px) {
	.nv-logo {
		gap: 0.5rem;
	}

	.nv-logo__mark {
		height: 2rem;
		max-width: 2.25rem;
	}

	.nv-logo__word {
		font-size: 1rem;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

@media (max-width: 359px) {
	.nv-header__secondary {
		display: none;
	}
}

/* ==========================================================================
   Hero — matched to the reference layout
   ========================================================================== */

.nv-hero--ref {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border-bottom: 0;
}

/* Fine dot field instead of ruled grid lines. */
.nv-dots {
	background-image: radial-gradient(
		circle at center,
		rgba(255, 255, 255, 0.055) 1px,
		transparent 1px
	);
	background-size: 22px 22px;
}

/*
 * Two soft purple pools of light — one behind the headline, one behind the
 * demo panel — plus a wide wash along the bottom edge.
 */
.nv-hero__glow {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image:
		radial-gradient(
			42rem 30rem at 12% 18%,
			rgba(var(--nv-primary-rgb), 0.3),
			transparent 68%
		),
		radial-gradient(
			38rem 26rem at 88% 74%,
			rgba(var(--nv-primary-rgb), 0.22),
			transparent 70%
		),
		radial-gradient(
			60rem 20rem at 50% 108%,
			rgba(var(--nv-primary-rgb), 0.16),
			transparent 72%
		);
}

.nv-hero--ref .nv-hero__inner {
	position: relative;
	z-index: 1;
	gap: 2.5rem;
	padding-block: 3.5rem 5rem;
}

.nv-hero--align-start .nv-hero__inner {
	align-items: start;
}

.nv-hero--align-center .nv-hero__inner {
	align-items: center;
}

/* Badge */
.nv-hero--ref .nv-pill {
	padding: 0.4375rem 0.9375rem;
	font-size: 0.8125rem;
	border-color: rgba(var(--nv-primary-rgb), 0.4);
	background-color: rgba(var(--nv-primary-rgb), 0.16);
	color: #ffffff;
}

.nv-hero--ref .nv-pill svg {
	width: 0.9375rem;
	height: 0.9375rem;
	color: var(--nv-primary-glow);
}

/*
 * Headline: plain text colour unless the gradient is switched on. Capped at
 * 3.25rem so the second line stays on one line inside the narrower column,
 * the way it sits in the reference.
 */
.nv-hero--ref .nv-hero__title {
	margin-top: 1.25rem;
	font-size: clamp(1.875rem, 4.2vw, 3.25rem);
	line-height: 1.06;
	letter-spacing: -0.025em;
}

/*
 * Inline, not block. The reference headline is one unbroken run of text that
 * simply wraps, so forcing the accent onto its own line put an extra line in
 * it on any screen where the first half no longer fitted — a four-line
 * headline at 1024px against the reference's three. At 1280px and up the two
 * halves each happened to fill a line, which is why it looked right there.
 */
.nv-hero__title-accent {
	display: inline;
	background-image: none;
	-webkit-background-clip: border-box;
	background-clip: border-box;
	color: inherit;
}

.nv-hero__title-accent.is-gradient {
	background-image: var(--nv-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.nv-hero--ref .nv-hero__text {
	margin-top: 1.125rem;
	max-width: 30rem;
	font-size: 1rem;
	line-height: 1.6;
}

.nv-hero--ref .nv-hero__actions {
	margin-top: 1.75rem;
	gap: 0.625rem;
}

.nv-hero--ref .nv-hero__actions .nv-btn {
	min-height: 2.875rem;
	padding-inline: 1.25rem;
	border-radius: 9999px;
	font-size: 0.9375rem;
	font-weight: 600;
}

/*
 * Purple, not card navy — see the hero block at the end of this file, where
 * the rest of the reference measurements live. Corrected here rather than
 * there because this selector carries a specificity that block cannot reach.
 */
.nv-hero--ref .nv-hero__actions .nv-btn--ghost {
	border: 1px solid rgba(var(--nv-primary-rgb), 0.35);
	background-color: rgba(var(--nv-primary-rgb), 0.08);
	color: rgba(255, 255, 255, 0.9);
}

.nv-hero--ref .nv-hero__actions .nv-btn--ghost:hover {
	border-color: rgba(var(--nv-primary-rgb), 0.55);
	background-color: rgba(var(--nv-primary-rgb), 0.14);
}

.nv-hero--ref .nv-hero__actions .nv-btn svg {
	width: 1.0625rem;
	height: 1.0625rem;
}

/* Stat cards: stacked, roomy, the width of the text block. */
.nv-hero--ref .nv-hero__stats {
	margin-top: 1.75rem;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.875rem;
	max-width: 30rem;
}

.nv-hero--ref .nv-hero__stat {
	gap: 0.3125rem;
	border-radius: 1rem;
	padding: 1.125rem 1.375rem;
	background-color: color-mix(in srgb, var(--nv-card) 62%, transparent);
	-webkit-backdrop-filter: blur(var(--nv-surface-blur, 24px));
	backdrop-filter: blur(var(--nv-surface-blur, 24px));
}

.nv-hero--ref .nv-hero__stat-value {
	font-size: 1.25rem;
	line-height: 1.2;
}

.nv-hero--ref .nv-hero__stat-label {
	font-size: 0.8125rem;
	line-height: 1.35;
}

/* Demo panel */
.nv-hero--ref .nv-hero__panel-label {
	margin-bottom: 0.875rem;
	font-size: 0.75rem;
	letter-spacing: 0.16em;
}

.nv-hero--ref .nv-hero__panel {
	border-radius: 1.25rem;
	background-color: color-mix(in srgb, var(--nv-card) 88%, transparent);
	box-shadow: 0 40px 90px -50px rgba(0, 0, 0, 1);
}

.nv-hero--ref .nv-hero__panel-note {
	margin-top: 1rem;
	border-radius: 1.25rem;
	padding: 1.125rem 1.375rem;
	background-color: color-mix(in srgb, var(--nv-card) 62%, transparent);
	-webkit-backdrop-filter: blur(var(--nv-surface-blur, 24px));
	backdrop-filter: blur(var(--nv-surface-blur, 24px));
}

.nv-hero--ref .nv-hero__panel-note-title {
	font-size: 0.875rem;
	font-weight: 700;
}

.nv-hero--ref .nv-hero__panel-note-text {
	margin-top: 0.4375rem;
	font-size: 0.875rem;
	line-height: 1.55;
}

/*
 * The hero grid used to be described twice — a guess here (1:1.55, 3rem gap)
 * and the measured values further down, but only from 1280px. Between 1024
 * and 1279 the guess won, so every laptop in that range got a copy column
 * ~50px too wide, a demo panel ~65px too narrow and a settings list that
 * overflowed into a scrollbar. There is now one description of it, near the
 * other reference measurements at the end of this file; look for
 * "Hero grid from the desktop breakpoint".
 */

/* The generic breakpoint sizes must not override the reference clamp. */
@media (min-width: 640px) {
	.nv-hero--ref .nv-hero__title {
		font-size: clamp(1.875rem, 4.2vw, 3.25rem);
	}
}

@media (min-width: 1024px) {
	.nv-hero--ref .nv-hero__title {
		font-size: clamp(1.875rem, 4.2vw, 3.25rem);
	}
}

/* ==========================================================================
   Hero demo panel — a working preview: tabs, tick boxes and sliders
   ========================================================================== */

.nv-hero__panel--demo {
	padding: 0.75rem;
}

.nv-demo {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.75rem;
	min-width: 0;
}

/* ---- Tabs ---------------------------------------------------------- */

.nv-demo__tabs {
	display: flex;
	flex-direction: row;
	gap: 0.375rem;
	overflow-x: auto;
	padding-bottom: 0.25rem;
	scrollbar-width: thin;
	border-radius: 1rem;
	min-width: 0;
}

.nv-demo__tab {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	flex: 0 0 auto;
	border: 1px solid transparent;
	border-radius: 0.875rem;
	padding: 0.625rem 0.875rem;
	text-align: left;
	color: var(--nv-muted-foreground);
	transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}

.nv-demo__tab:hover {
	background-color: color-mix(in srgb, var(--nv-foreground) 6%, transparent);
	color: var(--nv-foreground);
}

.nv-demo__tab.is-active {
	background-color: color-mix(in srgb, var(--nv-foreground) 9%, transparent);
	border-color: var(--nv-border);
	color: var(--nv-foreground);
}

.nv-demo__tab-icon {
	display: grid;
	place-items: center;
	width: 1.5rem;
	height: 1.5rem;
	flex-shrink: 0;
	color: var(--nv-muted-foreground);
}

.nv-demo__tab.is-active .nv-demo__tab-icon {
	color: var(--nv-primary-glow);
}

.nv-demo__tab-icon svg {
	width: 1.125rem;
	height: 1.125rem;
}

.nv-demo__tab-text {
	display: flex;
	flex-direction: column;
	gap: 0.0625rem;
	min-width: 0;
}

.nv-demo__tab-title {
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.25;
	white-space: nowrap;
}

.nv-demo__tab-sub {
	font-size: 0.75rem;
	line-height: 1.25;
	color: var(--nv-muted-foreground);
	white-space: nowrap;
}

/* ---- Panels -------------------------------------------------------- */

.nv-demo__panels {
	min-width: 0;
}

.nv-demo__panel[hidden] {
	display: none;
}

.nv-demo__panel-title {
	font-family: var(--nv-font-display);
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--nv-foreground);
	margin-bottom: 0.875rem;
}

.nv-demo__empty {
	font-size: 0.875rem;
	color: var(--nv-muted-foreground);
}

.nv-demo__rows {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.nv-demo__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.875rem;
	border-radius: 0.75rem;
	padding: 0.6875rem 0.875rem;
	background-color: color-mix(in srgb, var(--nv-muted) 55%, transparent);
	min-width: 0;
}

.nv-demo__row-text {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	min-width: 0;
	cursor: pointer;
}

.nv-demo__row-label {
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--nv-foreground);
	overflow-wrap: break-word;
}

.nv-demo__row-sub {
	font-size: 0.75rem;
	line-height: 1.3;
	color: var(--nv-muted-foreground);
	overflow-wrap: break-word;
}

/* ---- Tick box ------------------------------------------------------ */

.nv-demo__check {
	appearance: none;
	-webkit-appearance: none;
	flex-shrink: 0;
	width: 1.875rem;
	height: 1.875rem;
	border-radius: 0.5rem;
	border: 1px solid var(--nv-border);
	background-color: color-mix(in srgb, var(--nv-background) 70%, transparent);
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: background-color 160ms ease, border-color 160ms ease;
}

.nv-demo__check:hover {
	border-color: rgba(var(--nv-primary-rgb), 0.7);
}

.nv-demo__check:checked {
	background-color: var(--nv-primary);
	border-color: var(--nv-primary);
}

.nv-demo__check::after {
	content: "";
	width: 1rem;
	height: 1rem;
	background-color: #ffffff;
	opacity: 0;
	transform: scale(0.6);
	transition: opacity 140ms ease, transform 140ms ease;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.nv-demo__check:checked::after {
	opacity: 1;
	transform: none;
}

/* ---- Slider -------------------------------------------------------- */

.nv-demo__slider {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex: 1 1 9rem;
	min-width: 0;
	max-width: 60%;
}

/*
 * Drawn by the browser rather than by us. The reference leaves the control
 * native and only sets accent-color, which is why its track is pale on the
 * right and its handle is a plain purple disc — a hand-built gradient with a
 * white-ringed thumb, which is what we had, never quite matches it.
 */
.nv-demo__range {
	accent-color: var(--nv-primary);
	flex: 1 1 0%;
	min-width: 0;
	height: 0.5rem;
	cursor: pointer;
}

.nv-demo__value {
	flex-shrink: 0;
	min-width: 2.75rem;
	text-align: right;
	font-size: 0.8125rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--nv-foreground);
}

/* ---- Two-column layout once there is room -------------------------- */

@media (min-width: 640px) {
	.nv-demo {
		grid-template-columns: 13rem minmax(0, 1fr);
		gap: 0.875rem;
	}

	.nv-demo__tabs {
		flex-direction: column;
		overflow-x: visible;
		padding-bottom: 0;
		background-color: color-mix(in srgb, var(--nv-background) 40%, transparent);
		padding: 0.5rem;
	}

	.nv-demo__tab {
		width: 100%;
	}

	.nv-demo__panels {
		padding: 0.5rem 0.25rem 0.25rem 0.5rem;
	}
}

/* ==========================================================================
   Demo panel — locked tabs and the phone start/stop toggle
   ========================================================================== */

/* Tabs that are shown but cannot be opened. */
.nv-demo__tab.is-locked {
	cursor: default;
	opacity: 0.45;
}

.nv-demo__tab.is-locked:hover {
	background-color: transparent;
	color: var(--nv-muted-foreground);
}

.nv-demo__tab.is-locked .nv-demo__tab-icon {
	color: var(--nv-muted-foreground);
}

/* ---- Collapsed card, phones only ----------------------------------- */

.nv-demo-start {
	display: none;
	border: 1px solid var(--nv-border);
	border-radius: 1.25rem;
	background-color: color-mix(in srgb, var(--nv-card) var(--nv-surface-opacity, 78%), transparent);
	padding: 1.375rem;
	-webkit-backdrop-filter: blur(var(--nv-surface-blur, 24px));
	backdrop-filter: blur(var(--nv-surface-blur, 24px));
}

.nv-demo-start__title {
	font-family: var(--nv-font-display);
	font-size: 1rem;
	font-weight: 700;
	color: var(--nv-foreground);
}

.nv-demo-start__text {
	margin-top: 0.4375rem;
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--nv-muted-foreground);
}

.nv-demo-start__btn {
	margin-top: 1.125rem;
	min-height: 2.875rem;
	padding-inline: 1.25rem;
	border-radius: 9999px;
	font-size: 0.9375rem;
	font-weight: 600;
}

.nv-demo-start__btn svg {
	width: 1.0625rem;
	height: 1.0625rem;
}

.nv-demo-stop {
	display: none;
	margin-top: 1.125rem;
	min-height: 2.75rem;
	padding-inline: 1.125rem;
	border: 1px solid var(--nv-border);
	border-radius: 0.875rem;
	background-color: color-mix(in srgb, var(--nv-background) 45%, transparent);
	color: var(--nv-foreground);
	font-size: 0.9375rem;
	font-weight: 600;
}

/*
 * Below the two-column breakpoint the panel is tall enough to bury the rest
 * of the page, so it hides behind the start button until asked for.
 */
@media (max-width: 1023px) {
	.nv-hero__panel-wrap--collapsible .nv-demo-start {
		display: block;
	}

	.nv-hero__panel-wrap--collapsible:not(.is-open) .nv-hero__panel--demo,
	.nv-hero__panel-wrap--collapsible:not(.is-open) .nv-hero__panel-note {
		display: none;
	}

	.nv-hero__panel-wrap--collapsible.is-open .nv-demo-start {
		display: none;
	}

	.nv-hero__panel-wrap--collapsible.is-open .nv-demo-stop {
		display: inline-flex;
	}

	.nv-hero__panel-wrap--collapsible.is-open .nv-hero__panel--demo {
		animation: nv-slide-up 280ms var(--nv-ease);
	}
}

/* On a wide screen the demo is simply always there. */
@media (min-width: 1024px) {
	.nv-demo-start,
	.nv-demo-stop {
		display: none !important;
	}
}

/* ==========================================================================
   Page-wide background texture
   ========================================================================== */

/*
 * The pattern is painted on <body>, not on the hero, so it carries through
 * every section without a seam where two backgrounds would otherwise meet.
 * `hero_bg_pattern` still chooses it; newvail_body_classes() sets the class.
 */
.nv-pattern-dots {
	background-image: radial-gradient(
		circle at center,
		rgba(255, 255, 255, 0.055) 1px,
		transparent 1px
	);
	background-size: 22px 22px;
	background-attachment: fixed;
}

.nv-pattern-grid {
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
	background-size: 64px 64px;
	background-attachment: fixed;
}

/*
 * A soft pool of purple light behind a section, echoing the hero's wash. The
 * negative inset lets the glow bleed past the container; <body> clips it.
 */
.nv-glow-band {
	position: relative;
	isolation: isolate;
}

.nv-glow-band::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: -7rem -14vw;
	pointer-events: none;
	background-image:
		radial-gradient(
			40rem 28rem at 4% 55%,
			rgba(var(--nv-primary-rgb), 0.3),
			transparent 68%
		),
		radial-gradient(
			34rem 22rem at 62% 8%,
			rgba(var(--nv-primary-rgb), 0.16),
			transparent 70%
		);
}

@media (prefers-reduced-transparency: reduce) {
	.nv-glow-band::before {
		display: none;
	}
}

/*
 * Five across only once there is room for it. This block sits at the end of
 * the sheet on purpose: an earlier `min-width: 1024px` rule sets three
 * columns at the same specificity, so source order decides the winner.
 */
@media (min-width: 1280px) {
	.nv-keyfeat {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

}

/* ==========================================================================
   Category card — reference layout
   ========================================================================== */

.nv-category {
	gap: 1.5rem;
	background-color: color-mix(in srgb, var(--nv-card) 55%, transparent);
	-webkit-backdrop-filter: blur(var(--nv-surface-blur, 24px));
	backdrop-filter: blur(var(--nv-surface-blur, 24px));
}

.nv-category:hover {
	background-color: color-mix(in srgb, var(--nv-card) 82%, transparent);
}

/*
 * A 4:3 well. The supplied artwork is much wider than that, so `cover` trims
 * the empty margins either side and leaves the wordmark filling the frame.
 */
.nv-category__art {
	aspect-ratio: 4 / 3;
	border-radius: 0.875rem;
	background-color: color-mix(in srgb, var(--nv-background) 70%, transparent);
}

.nv-category__body {
	margin-top: -0.25rem;
}

.nv-category__title {
	font-size: 1.0625rem;
	line-height: 1.35;
	font-weight: 700;
}

.nv-category__text {
	margin-top: 0.5rem;
	font-size: 0.9375rem;
	line-height: 1.55;
}

/* The card link reads as plain white text, not a coloured accent. */
.nv-category__meta {
	padding-top: 0;
	gap: 1rem;
}

.nv-category__cta {
	gap: 0.5rem;
	font-size: 0.9375rem;
	color: var(--nv-foreground);
}

.nv-category__meta svg,
.nv-category__cta svg {
	width: 1.0625rem;
	height: 1.0625rem;
	color: inherit;
}

.nv-category__count {
	font-size: 0.8125rem;
}

/* ==========================================================================
   About us — reference layout
   ========================================================================== */

.nv-about__text {
	margin-top: 1.375rem;
	font-size: 1.0625rem;
	line-height: 1.78;
}

.nv-about__cards {
	gap: 1.5rem;
}

/* The supporting cards share the key-features card's proportions. */
.nv-about__card {
	border-radius: var(--nv-radius-2xl);
	background-color: color-mix(in srgb, var(--nv-card) 55%, transparent);
	padding: 1.625rem 1.5rem;
	-webkit-backdrop-filter: blur(var(--nv-surface-blur, 24px));
	backdrop-filter: blur(var(--nv-surface-blur, 24px));
	transition: border-color 200ms ease, background-color 200ms ease;
}

.nv-about__card:hover {
	background-color: color-mix(in srgb, var(--nv-card) 82%, transparent);
}

.nv-about__card-head {
	gap: 1rem;
	min-width: 0;
}

.nv-about__card-icon {
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid var(--nv-border);
	border-radius: 9999px;
	background-color: color-mix(in srgb, var(--nv-background) 55%, transparent);
	color: var(--nv-foreground);
}

.nv-about__card-icon svg {
	width: 1.25rem;
	height: 1.25rem;
}

.nv-about__card-title {
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
	min-width: 0;
	overflow-wrap: anywhere;
}

.nv-about__card-text {
	margin-top: 1.375rem;
	font-size: 1rem;
	line-height: 1.55;
	overflow-wrap: anywhere;
}

/* ==========================================================================
   Review card — reference layout
   ========================================================================== */

/* Amber, not the brand purple. Overridden from Colours & Fonts. */
.nv-stars svg.is-filled {
	color: var(--nv-star, #eab308);
	fill: var(--nv-star, #eab308);
}

/*
 * Cards size to their own quote and hang from the top of the row, so a short
 * review does not get stretched to match a long one.
 */
.nv-review {
	height: auto;
	gap: 0;
	align-self: flex-start;
	border-radius: var(--nv-radius-2xl);
	background-color: color-mix(in srgb, var(--nv-card) 55%, transparent);
	padding: 1.75rem;
	-webkit-backdrop-filter: blur(var(--nv-surface-blur, 24px));
	backdrop-filter: blur(var(--nv-surface-blur, 24px));
	transition: border-color 200ms ease, background-color 200ms ease;
}

.nv-review:hover {
	background-color: color-mix(in srgb, var(--nv-card) 82%, transparent);
}

/* Rating on the left, how long ago on the right. */
.nv-review__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-width: 0;
}

.nv-review__top .nv-stars {
	gap: 0.25rem;
}

.nv-review__date {
	flex: none;
	font-size: 0.8125rem;
	line-height: 1.2;
	color: var(--nv-muted-foreground);
}

.nv-review__quote {
	margin: 1.25rem 0 0;
	border: 0;
	padding: 0;
	font-size: 0.9375rem;
	font-style: normal;
	line-height: 1.75;
	color: var(--nv-muted-foreground);
	overflow-wrap: anywhere;
}

.nv-review__product {
	margin-top: 0.875rem;
}

.nv-review__author {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	margin-top: 2rem;
	min-width: 0;
}

.nv-review__avatar {
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid var(--nv-border);
	background-image: none;
	background-color: color-mix(in srgb, var(--nv-background) 55%, transparent);
	color: var(--nv-muted-foreground);
}

.nv-review__avatar svg {
	width: 1.125rem;
	height: 1.125rem;
}

.nv-review__name {
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--nv-foreground);
	min-width: 0;
}

/* The track holds top-aligned cards of differing height. */
.nv-review-marquee__set {
	align-items: flex-start;
}

@media (min-width: 640px) {
	.nv-review-marquee__set > * {
		width: 360px;
	}
}

/* ==========================================================================
   Footer — reference layout
   ========================================================================== */

/* The column label is the quiet one; the links it introduces are brighter. */
.nv-footer__col-title {
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	color: var(--nv-muted-foreground);
}

.nv-footer__links {
	margin-top: 1.125rem;
	gap: 0.5rem;
}

.nv-footer__links a {
	font-size: 0.9375rem;
	line-height: 1.35;
	color: color-mix(in srgb, var(--nv-foreground) 82%, transparent);
}

.nv-footer__about {
	margin-top: 1.125rem;
	font-size: 0.9375rem;
	line-height: 1.7;
	max-width: 24rem;
}

/* ==========================================================================
   Product catalogue — reference layout
   ========================================================================== */

.nv-catalog__grid {
	margin-top: 1.5rem;
	align-items: start;
}

.nv-catalog__empty {
	margin-top: 2rem;
}

.nv-product-card {
	border-radius: var(--nv-radius-2xl);
	background-color: color-mix(in srgb, var(--nv-card) 55%, transparent);
	padding: 1.25rem;
	-webkit-backdrop-filter: blur(var(--nv-surface-blur, 24px));
	backdrop-filter: blur(var(--nv-surface-blur, 24px));
}

.nv-product-card:hover {
	background-color: color-mix(in srgb, var(--nv-card) 82%, transparent);
}

/* The artwork sits inside the card padding rather than bleeding to its edge. */
.nv-product-card__media {
	aspect-ratio: 4 / 3;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--nv-border);
	border-radius: 0.75rem;
	background-color: color-mix(in srgb, var(--nv-background) 70%, transparent);
}

.nv-product-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nv-product-card__body {
	padding: 1.25rem 0 0;
}

/* Badge, availability and category share one line under the artwork. */
.nv-product-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.625rem;
	min-width: 0;
}

/* Plain muted text beside the badge, not a chip of its own. */
.nv-product-card__cat {
	margin: 0;
	border-radius: 0;
	background-color: transparent;
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	padding: 0;
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	color: var(--nv-muted-foreground);
}

.nv-badge--soft {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	border: 1px solid rgba(var(--nv-primary-rgb), 0.35);
	border-radius: 9999px;
	background-color: rgba(var(--nv-primary-rgb), 0.16);
	padding: 0.3125rem 0.6875rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--nv-foreground);
	text-transform: none;
	letter-spacing: 0;
}

.nv-badge--soft svg {
	width: 0.875rem;
	height: 0.875rem;
	color: var(--nv-primary-glow);
}

.nv-product-card__title {
	margin-top: 0.875rem;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
}

/* Without a price the button is on its own, hard against the left edge. */
.nv-product-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 1.125rem;
	padding-top: 0;
	border-top: 0;
}

.nv-product-card__foot:not(:has(.nv-price)) {
	justify-content: flex-start;
}

.nv-product-card__view {
	min-height: 2.5rem;
	padding-inline: 1.0625rem;
	border-radius: 9999px;
	border: 1px solid var(--nv-border);
	background-color: color-mix(in srgb, var(--nv-background) 55%, transparent);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--nv-foreground);
}

.nv-product-card__view:hover {
	border-color: rgba(var(--nv-primary-rgb), 0.55);
	background-color: color-mix(in srgb, var(--nv-background) 80%, transparent);
}

/* ---- Filter bar ----------------------------------------------------- */

.nv-filterbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	border: 1px solid var(--nv-border);
	border-radius: var(--nv-radius-2xl);
	background-color: color-mix(in srgb, var(--nv-card) 55%, transparent);
	padding: 0.75rem 0.875rem;
	-webkit-backdrop-filter: blur(var(--nv-surface-blur, 24px));
	backdrop-filter: blur(var(--nv-surface-blur, 24px));
}

.nv-filterbar__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	min-width: 0;
}

.nv-pill-btn {
	min-height: 2.125rem;
	padding-inline: 0.875rem;
	border: 1px solid var(--nv-border);
	border-radius: 9999px;
	background-color: transparent;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--nv-foreground);
	cursor: pointer;
	transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}

.nv-pill-btn:hover {
	border-color: rgba(var(--nv-primary-rgb), 0.55);
	background-color: color-mix(in srgb, var(--nv-background) 55%, transparent);
}

.nv-pill-btn.is-active {
	border-color: transparent;
	background-color: var(--nv-foreground);
	color: var(--nv-background);
}

.nv-filterbar__search {
	flex: 0 1 12.5rem;
	max-width: 12.5rem;
	min-width: 0;
}

.nv-filterbar__search .nv-field {
	width: 100%;
	min-height: 2.625rem;
	border-radius: 9999px;
	padding-inline: 1.125rem;
	background-color: color-mix(in srgb, var(--nv-background) 55%, transparent);
	font-size: 0.9375rem;
}

@media (max-width: 639px) {
	.nv-filterbar {
		flex-direction: column;
		align-items: stretch;
	}

	/*
	 * Once the bar stacks, flex-basis measures height instead of width — the
	 * 16rem basis was adding 256px of dead space under the search box.
	 */
	.nv-filterbar__search {
		flex: 0 0 auto;
		max-width: none;
	}
}

/* ==========================================================================
   Catalogue spacing and the hidden-attribute fix
   ========================================================================== */

/*
 * The browser hides [hidden] with `display: none`, but that comes from the UA
 * sheet — any author `display` wins over it. Cards and rows carry their own
 * display value, so filtering silently did nothing until this rule.
 */
[hidden] {
	display: none !important;
}

/* No rule between the page header and the content below it. */
.nv-page-hero {
	border-bottom: 0;
}

/* The filter bar sits close under the header, not a full section away. */
.nv-catalog {
	padding-top: 2rem;
}

/* Breathing room before the footer starts. */
.nv-helpband {
	margin-bottom: 4rem;
}

@media (min-width: 768px) {
	.nv-catalog {
		padding-top: 2.5rem;
	}
}

/*
 * The page header used to be a self-contained band with a rule under it, so
 * it carried equal padding top and bottom. Without the rule it reads as one
 * block with the content below, and the bottom padding can be much tighter.
 */
.nv-page-hero__inner {
	padding-block: 2.75rem 2.25rem;
}

.nv-catalog {
	padding-top: 0;
}

@media (min-width: 768px) {
	.nv-page-hero__inner {
		padding-block: 3.5rem 2.25rem;
	}

	.nv-catalog {
		padding-top: 0;
	}
}

/* ==========================================================================
   Status page — reference layout
   ========================================================================== */

/*
 * Each badge carries its own colour as --nv-state, set from the admin, so a
 * renamed state keeps its border, tint and glow without touching the sheet.
 */
.nv-status[style*="--nv-state"] {
	border-color: color-mix(in srgb, var(--nv-state) 45%, transparent);
	background-color: color-mix(in srgb, var(--nv-state) 14%, transparent);
	color: var(--nv-state);
}

.nv-status--lg {
	padding: 0.5rem 0.9375rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
}

.nv-status--lg[style*="--nv-state"] {
	box-shadow: 0 0 22px -6px color-mix(in srgb, var(--nv-state) 60%, transparent);
}

.nv-status--lg svg {
	width: 0.9375rem;
	height: 0.9375rem;
}

.nv-status-grid {
	margin-top: 1.5rem;
	gap: 1.5rem;
	align-items: start;
}

.nv-status-card {
	border-radius: var(--nv-radius-2xl);
	background-color: color-mix(in srgb, var(--nv-card) 55%, transparent);
	padding: 1.5rem;
	-webkit-backdrop-filter: blur(var(--nv-surface-blur, 24px));
	backdrop-filter: blur(var(--nv-surface-blur, 24px));
	transition: border-color 200ms ease, background-color 200ms ease;
}

.nv-status-card:hover {
	transform: none;
	background-color: color-mix(in srgb, var(--nv-card) 82%, transparent);
}

/* The badge lines up with the category label, above the product name. */
.nv-status-card__head {
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 0.75rem;
}

.nv-status-card__cat {
	font-size: 0.75rem;
	letter-spacing: 0.12em;
}

.nv-status-card__title {
	margin-top: 0.5rem;
	font-size: 1.375rem;
}

.nv-status-card__since {
	margin-top: 1.5rem;
	font-size: 0.9375rem;
	color: var(--nv-muted-foreground);
}

.nv-status-card__ago {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--nv-foreground);
}

.nv-status-card__ago svg {
	width: 1rem;
	height: 1rem;
	color: var(--nv-muted-foreground);
}

/* Narrow cards would otherwise squash the badge against the product name. */
@media (max-width: 479px) {
	.nv-status-card__head {
		flex-wrap: wrap;
	}
}

/* ==========================================================================
   Product page — live demo panel
   ========================================================================== */

.nv-pdemo {
	overflow: hidden;
	border: 1px solid var(--nv-border);
	border-radius: var(--nv-radius-2xl);
	background-color: color-mix(in srgb, var(--nv-card) 62%, transparent);
	-webkit-backdrop-filter: blur(var(--nv-surface-blur, 24px));
	backdrop-filter: blur(var(--nv-surface-blur, 24px));
}

.nv-pdemo__bar {
	border-bottom: 1px solid var(--nv-border);
	padding: 1rem 1.25rem 0;
}

.nv-pdemo__name {
	font-family: var(--nv-font-display);
	font-size: 1rem;
	font-weight: 700;
	color: var(--nv-primary-glow);
}

.nv-pdemo__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin-top: 0.75rem;
}

.nv-pdemo__tab {
	position: relative;
	border: 0;
	background: none;
	padding: 0 0 0.625rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--nv-muted-foreground);
	cursor: pointer;
	transition: color 200ms ease;
}

.nv-pdemo__tab:hover {
	color: var(--nv-foreground);
}

.nv-pdemo__tab.is-active {
	color: var(--nv-foreground);
}

/* The underline sits on the panel's own border, so it reads as a real tab. */
.nv-pdemo__tab.is-active::after {
	content: "";
	position: absolute;
	inset: auto 0 -1px;
	height: 2px;
	border-radius: 2px;
	background-color: var(--nv-primary-glow);
}

.nv-pdemo__body {
	display: grid;
	gap: 1rem;
	grid-template-columns: minmax(0, 1fr);
	padding: 1.25rem;
}

.nv-pdemo__box {
	border: 1px solid rgba(var(--nv-primary-rgb), 0.35);
	border-radius: 0.75rem;
	background-color: color-mix(in srgb, var(--nv-background) 45%, transparent);
	padding: 0.875rem 1rem 1rem;
	min-width: 0;
}

.nv-pdemo__box-title {
	margin-bottom: 0.625rem;
	font-family: var(--nv-font-display);
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--nv-primary-glow);
}

.nv-pdemo__empty {
	font-size: 0.875rem;
	color: var(--nv-muted-foreground);
}

.nv-pdemo__row {
	display: block;
	margin-top: 0.5rem;
	min-width: 0;
}

.nv-pdemo__row:first-of-type {
	margin-top: 0;
}

.nv-pdemo__row-label {
	display: block;
	font-size: 0.8125rem;
	color: var(--nv-foreground);
}

/* ---- Checkboxes ------------------------------------------------------ */

.nv-pdemo__check {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
	font-size: 0.8125rem;
	color: var(--nv-foreground);
}

.nv-pdemo__check input {
	appearance: none;
	-webkit-appearance: none;
	flex: none;
	width: 0.875rem;
	height: 0.875rem;
	margin: 0;
	border: 1px solid color-mix(in srgb, var(--nv-foreground) 45%, transparent);
	border-radius: 0.1875rem;
	background-color: transparent;
	cursor: pointer;
	transition: background-color 150ms ease, border-color 150ms ease;
}

.nv-pdemo__check input:checked {
	border-color: var(--nv-primary);
	background-color: var(--nv-primary);
}

.nv-pdemo__check input:focus-visible {
	outline: 2px solid var(--nv-primary-glow);
	outline-offset: 2px;
}

.nv-pdemo__row--inline {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

/* ---- Dropdown look --------------------------------------------------- */

.nv-pdemo__select {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-top: 0.25rem;
	border: 0;
	border-radius: 0.375rem;
	background-color: color-mix(in srgb, var(--nv-foreground) 12%, transparent);
	padding: 0.375rem 0.625rem;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--nv-foreground);
	cursor: pointer;
}

.nv-pdemo__select svg {
	width: 0.875rem;
	height: 0.875rem;
	flex: none;
	color: var(--nv-primary-glow);
}

/* ---- Slider ---------------------------------------------------------- */

.nv-pdemo__row--slider {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.25rem 0.75rem;
}

.nv-pdemo__row-value {
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
	color: var(--nv-foreground);
}

.nv-pdemo__slider {
	grid-column: 1 / -1;
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	height: 0.375rem;
	margin: 0.25rem 0 0;
	border-radius: 9999px;
	background:
		linear-gradient(
			to right,
			var(--nv-primary) 0 var(--nv-fill, 50%),
			color-mix(in srgb, var(--nv-foreground) 22%, transparent) var(--nv-fill, 50%) 100%
		);
	cursor: pointer;
}

.nv-pdemo__slider::-webkit-slider-thumb {
	appearance: none;
	-webkit-appearance: none;
	width: 0.875rem;
	height: 0.875rem;
	border: 2px solid var(--nv-foreground);
	border-radius: 9999px;
	background-color: var(--nv-primary);
}

.nv-pdemo__slider::-moz-range-thumb {
	width: 0.875rem;
	height: 0.875rem;
	border: 2px solid var(--nv-foreground);
	border-radius: 9999px;
	background-color: var(--nv-primary);
}

.nv-pdemo__slider:focus-visible {
	outline: 2px solid var(--nv-primary-glow);
	outline-offset: 3px;
}

/* ---- Key chips ------------------------------------------------------- */

.nv-pdemo__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	margin-top: 0.25rem;
}

.nv-pdemo__chip {
	border: 0;
	border-radius: 0.25rem;
	background-color: color-mix(in srgb, var(--nv-foreground) 12%, transparent);
	padding: 0.1875rem 0.4375rem;
	font-size: 0.75rem;
	color: var(--nv-foreground);
	cursor: pointer;
	transition: background-color 150ms ease;
}

.nv-pdemo__chip.is-on {
	background-color: var(--nv-primary);
}

@media (min-width: 640px) {
	.nv-pdemo__body {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ==========================================================================
   Purchase panel — plans, quantity and the two outbound buttons
   ========================================================================== */

.nv-purchase__block-text {
	margin-top: 0.125rem;
	font-size: 0.875rem;
	color: var(--nv-muted-foreground);
}

.nv-purchase__summary {
	margin-top: 1rem;
	border: 1px solid var(--nv-border);
	border-radius: var(--nv-radius-lg);
	background-color: color-mix(in srgb, var(--nv-background) 45%, transparent);
	padding: 1rem;
}

.nv-purchase__unit {
	margin-top: 0.25rem;
	font-size: 0.8125rem;
	color: var(--nv-muted-foreground);
}

.nv-qty {
	margin-top: 1rem;
}

.nv-qty__label {
	display: block;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--nv-muted-foreground);
}

.nv-qty__control {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-top: 0.5rem;
}

.nv-qty__btn {
	display: grid;
	width: 2.25rem;
	height: 2.25rem;
	flex: none;
	place-items: center;
	border: 1px solid var(--nv-border);
	border-radius: 0.5rem;
	background-color: color-mix(in srgb, var(--nv-card) 70%, transparent);
	font-size: 1rem;
	color: var(--nv-foreground);
	cursor: pointer;
	transition: border-color 150ms ease;
}

.nv-qty__btn:hover {
	border-color: rgba(var(--nv-primary-rgb), 0.55);
}

.nv-qty__input {
	width: 100%;
	min-width: 0;
	border: 0;
	background: none;
	padding: 0;
	text-align: center;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--nv-foreground);
	-moz-appearance: textfield;
}

.nv-qty__input::-webkit-outer-spin-button,
.nv-qty__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.nv-purchase__actions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
	margin-top: 1rem;
}

.nv-purchase__actions > * {
	width: 100%;
}

.nv-purchase__actions:has(> :only-child) {
	grid-template-columns: minmax(0, 1fr);
}

/* The checkout button reads as the light primary action, not a purple fill. */
.nv-purchase__buy.nv-btn--primary {
	border: 0;
	background-image: none;
	background-color: var(--nv-foreground);
	color: var(--nv-background);
	box-shadow: none;
}

.nv-purchase__buy.nv-btn--primary:hover {
	background-color: color-mix(in srgb, var(--nv-foreground) 88%, var(--nv-primary));
	color: var(--nv-background);
}

.nv-purchase__buy.nv-btn--primary svg {
	color: currentColor;
}

.nv-purchase__secondary {
	background-color: color-mix(in srgb, var(--nv-background) 45%, transparent);
}

.nv-purchase__actions .nv-btn {
	min-height: 2.875rem;
	border-radius: 9999px;
	font-size: 0.9375rem;
	font-weight: 600;
}

/* ==========================================================================
   Live demo — side rail, sub-tabs and the extra control types
   ========================================================================== */

.nv-pdemo {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: stretch;
	padding: 0;
}

/* ---- Side rail ------------------------------------------------------- */

.nv-pdemo__rail {
	display: flex;
	flex-direction: column;
	border-right: 1px solid var(--nv-border);
	background-color: color-mix(in srgb, var(--nv-background) 55%, transparent);
}

.nv-pdemo__rail-tab {
	position: relative;
	border: 0;
	border-bottom: 1px solid var(--nv-border);
	background: none;
	padding: 0.875rem 1.125rem;
	text-align: left;
	font-size: 0.875rem;
	font-weight: 600;
	white-space: nowrap;
	color: var(--nv-muted-foreground);
	cursor: pointer;
	transition: color 200ms ease, background-color 200ms ease;
}

.nv-pdemo__rail-tab:last-child {
	border-bottom: 0;
}

.nv-pdemo__rail-tab:hover {
	color: var(--nv-foreground);
}

.nv-pdemo__rail-tab.is-active {
	background-color: color-mix(in srgb, var(--nv-card) 85%, transparent);
	color: var(--nv-foreground);
}

/* A bar on the inner edge marks the open section. */
.nv-pdemo__rail-tab.is-active::after {
	content: "";
	position: absolute;
	inset: 0 -1px 0 auto;
	width: 2px;
	background-color: var(--nv-primary-glow);
}

.nv-pdemo__stage {
	min-width: 0;
	padding: 1rem;
}

/* ---- Sub-tabs -------------------------------------------------------- */

.nv-pdemo__head {
	border: 1px solid var(--nv-border);
	border-radius: 0.625rem;
	background-color: color-mix(in srgb, var(--nv-background) 35%, transparent);
	padding: 0.875rem 1rem 0;
	margin-bottom: 1rem;
}

.nv-pdemo__subs {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin-top: 0.5rem;
}

.nv-pdemo__sub {
	border: 0;
	background: none;
	padding: 0 0 0.75rem;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--nv-muted-foreground);
	cursor: pointer;
	transition: color 200ms ease;
}

.nv-pdemo__sub:hover,
.nv-pdemo__sub.is-active {
	color: var(--nv-foreground);
}

.nv-pdemo__body {
	padding: 0;
}

/* ---- Extra control types --------------------------------------------- */

.nv-pdemo__check.is-danger > span {
	color: var(--nv-destructive);
}

.nv-pdemo__key {
	margin-left: auto;
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
	color: var(--nv-muted-foreground);
}

.nv-pdemo__wide {
	width: 100%;
	margin-top: 0.25rem;
	border: 0;
	border-radius: 0.375rem;
	background-color: color-mix(in srgb, var(--nv-foreground) 14%, transparent);
	padding: 0.4375rem 0.625rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--nv-foreground);
	cursor: pointer;
	transition: background-color 150ms ease;
}

.nv-pdemo__wide:hover {
	background-color: color-mix(in srgb, var(--nv-foreground) 22%, transparent);
}

/* The rail folds into a scrolling strip above the stage on small screens. */
@media (max-width: 639px) {
	.nv-pdemo {
		grid-template-columns: minmax(0, 1fr);
	}

	.nv-pdemo__rail {
		flex-direction: row;
		overflow-x: auto;
		border-right: 0;
		border-bottom: 1px solid var(--nv-border);
	}

	.nv-pdemo__rail-tab {
		border-bottom: 0;
		padding: 0.75rem 1rem;
	}

	.nv-pdemo__rail-tab.is-active::after {
		inset: auto 0 -1px 0;
		width: auto;
		height: 2px;
	}

	.nv-pdemo__stage {
		padding: 0.875rem;
	}
}

/* A plain input in the preview panel — accepts typing, saves nothing. */
.nv-pdemo__text {
	width: 100%;
	min-width: 0;
	margin-top: 0.25rem;
	border: 0;
	border-radius: 0.375rem;
	background-color: color-mix(in srgb, var(--nv-foreground) 12%, transparent);
	padding: 0.4375rem 0.625rem;
	font-size: 0.8125rem;
	color: var(--nv-foreground);
}

.nv-pdemo__text:focus-visible {
	outline: 2px solid var(--nv-primary-glow);
	outline-offset: 2px;
}

/*
 * The product page reuses the hero's collapsible wrapper, but its panel is a
 * .nv-pdemo rather than the hero's demo, so the mobile rules need to match it
 * too. The hero's own rules stop at .nv-hero__panel--demo.
 */
@media (max-width: 1023px) {
	.nv-hero__panel-wrap--collapsible:not(.is-open) .nv-pdemo {
		display: none;
	}

	.nv-hero__panel-wrap--collapsible.is-open .nv-pdemo {
		animation: nv-slide-up 280ms var(--nv-ease);
	}
}

/* Above it the panel is simply always there. */
@media (min-width: 1024px) {
	.nv-product .nv-hero__panel-wrap--collapsible .nv-pdemo {
		display: block;
	}
}

/* Inside the product column the wrapper adds no extra frame of its own. */
.nv-product__main .nv-hero__panel {
	border: 0;
	background: none;
	padding: 0;
}

/* A demo with one side tab drops the rail and runs full width. */
.nv-pdemo--flat {
	grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 639px) {
	.nv-pdemo--flat .nv-pdemo__rail {
		display: none;
	}
}

/* ==========================================================================
   Purchase panel — plan tabs, per-plan note and single-action button
   ========================================================================== */

.nv-plan-tabs {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: 0.25rem;
	margin-top: 1rem;
	border: 1px solid var(--nv-border);
	border-radius: 9999px;
	background-color: color-mix(in srgb, var(--nv-background) 55%, transparent);
	padding: 0.25rem;
}

.nv-plan-tab {
	min-height: 2.25rem;
	border: 0;
	border-radius: 9999px;
	background: none;
	padding-inline: 0.75rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--nv-muted-foreground);
	cursor: pointer;
	transition: background-color 200ms ease, color 200ms ease;
}

.nv-plan-tab:hover {
	color: var(--nv-foreground);
}

.nv-plan-tab.is-active {
	background-color: var(--nv-foreground);
	color: var(--nv-background);
}

.nv-purchase__helper {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 0.625rem;
	border: 1px solid var(--nv-border);
	border-radius: 9999px;
	background-color: color-mix(in srgb, var(--nv-background) 45%, transparent);
	padding: 0.5rem 0.875rem;
	font-size: 0.875rem;
	color: var(--nv-muted-foreground);
}

.nv-purchase__helper svg {
	width: 0.9375rem;
	height: 0.9375rem;
	flex: none;
}

/* A note the selected plan brings with it, e.g. how a free trial is claimed. */
.nv-purchase__plan-note {
	margin-top: 1rem;
	border: 1px solid var(--nv-border);
	border-radius: var(--nv-radius-lg);
	background-color: color-mix(in srgb, var(--nv-background) 55%, transparent);
	padding: 0.875rem 1rem;
}

.nv-purchase__plan-note-title {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--nv-muted-foreground);
}

.nv-purchase__plan-note-title:empty {
	display: none;
}

.nv-purchase__plan-note-text {
	margin-top: 0.5rem;
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--nv-foreground);
}

.nv-purchase__plan-note-text:empty {
	display: none;
}

/* With one action the row stops being a two-up grid. */
.nv-purchase__actions.is-solo {
	grid-template-columns: minmax(0, 1fr);
}

.nv-btn--brand {
	border: 0;
	background-color: #5865f2;
	color: #ffffff;
}

.nv-btn--brand:hover {
	background-color: #4a56d6;
	color: #ffffff;
}

.nv-btn--brand svg {
	width: 1.0625rem;
	height: 1.0625rem;
	color: currentColor;
}

/* A muted aside inside a ticked feature list: start the line with "- ". */
.nv-feature-list li.is-note {
	color: var(--nv-muted-foreground);
	font-size: 0.8125rem;
	font-style: italic;
	padding-left: 1.5rem;
}

.nv-feature-list li.is-note svg {
	display: none;
}

/* ==========================================================================
   Header — matched to the reference bar
   ========================================================================== */

/* The whole bar speaks in the display face, not the body one. */
.nv-header__nav a,
.nv-header__secondary,
.nv-header__secondary-text,
.nv-header__cta,
.nv-logo__sub {
	font-family: var(--nv-font-display);
}

/* A shorter bar: 70px rather than 77px. */
.nv-header__inner {
	padding-block: 0.875rem;
}

/* Squarer corners on the two action buttons and the cart. */
.nv-header__secondary,
.nv-header__cta,
.nv-header__actions .nv-icon-btn {
	min-height: 2.25rem;
	border-radius: 0.625rem;
}

.nv-header__secondary {
	padding-inline: 0.875rem;
}

.nv-header__cta {
	padding-inline: 1rem;
}

.nv-header__actions .nv-icon-btn {
	width: 2.25rem;
	height: 2.25rem;
}

.nv-header__actions .nv-icon-btn svg,
.nv-header__secondary svg,
.nv-header__cta svg {
	width: 1rem;
	height: 1rem;
}

/* The pill nav shrinks to sit inside the shorter bar. */
.nv-header__nav--pills a {
	padding: 0.5rem 1.25rem;
	font-size: 0.9375rem;
}

@media (min-width: 1024px) {
	.nv-header__nav--pills ul {
		padding: 0.25rem;
	}
}

/* ==========================================================================
   Catalogue page — sized against the reference
   ========================================================================== */

/* Corners across the page are tighter than the theme default. */
.nv-filterbar,
.nv-product-card,
.nv-helpband {
	border-radius: 1rem;
}

.nv-product-card__media {
	border-radius: 0.625rem;
}

/* ---- Filter bar: 67px tall rather than 74 --------------------------- */

.nv-filterbar {
	padding: 1rem;
	gap: 0.875rem;
}

.nv-pill-btn {
	min-height: 1.875rem;
	padding-inline: 1rem;
	font-size: 0.8125rem;
}

/*
 * Width only once the bar is a row. Below that it stacks, and a flex-basis
 * would be read as a height — which left 189px of dead space under the box.
 */
@media (min-width: 640px) {
	.nv-filterbar__search {
		flex: 0 1 11.8125rem;
		max-width: 11.8125rem;
	}
}

/* .nv-field carries a fixed 3rem height, so it has to be set, not min-set. */
.nv-filterbar__search .nv-field {
	height: 2rem;
	min-height: 0;
	padding-inline: 0.875rem;
	font-size: 0.8125rem;
}

/* ---- Cards ---------------------------------------------------------- */

.nv-catalog__grid {
	gap: 1.25rem;
}

.nv-product-card__body {
	padding-top: 1.25rem;
}

.nv-badge--soft {
	padding: 0.25rem 0.6875rem;
	font-size: 0.75rem;
	line-height: 1;
	gap: 0.375rem;
}

.nv-badge--soft svg {
	width: 0.8125rem;
	height: 0.8125rem;
}

.nv-product-card__cat {
	font-size: 0.8125rem;
}

/* The reference does not reserve a second title line, so cards stay short. */
.nv-product-card__title {
	margin-top: 0.75rem;
	min-height: 0;
	font-size: 1.125rem;
}

.nv-product-card__foot {
	margin-top: 1rem;
}

.nv-product-card__view {
	min-height: 2rem;
	padding-inline: 0.875rem;
	font-size: 0.875rem;
}

.nv-product-card__view svg {
	width: 0.875rem;
	height: 0.875rem;
}

/* ---- Help band ------------------------------------------------------ */

.nv-helpband {
	padding: 1.25rem 1.5rem;
}

.nv-helpband .nv-btn {
	min-height: 2.1875rem;
	padding-inline: 1.125rem;
	border-radius: 0.625rem;
	font-size: 0.875rem;
}

.nv-helpband .nv-btn svg {
	width: 1rem;
	height: 1rem;
}

/* ==========================================================================
   Page header type — sized against the reference
   ========================================================================== */

/*
 * A wide-screen rule pushed this to 3rem, which reads much larger than the
 * reference. Measured against a shared anchor (the nav pill), the reference
 * heading is a shade under 2rem, so the clamp tops out there instead.
 */
.nv-page-hero__title {
	font-size: clamp(1.5rem, 4vw, 1.875rem);
	line-height: 1.2;
	letter-spacing: -0.02em;
}

/* Page headers use a quiet grey label; homepage sections keep the accent. */
.nv-page-hero .nv-eyebrow {
	font-size: 0.625rem;
	letter-spacing: 0.1em;
	color: var(--nv-muted-foreground);
}

.nv-page-hero__text {
	margin-top: 0.625rem;
	font-size: 0.875rem;
}

/* The filter bar's own type follows the same scale. */
.nv-pill-btn,
.nv-filterbar__search .nv-field {
	font-size: 0.875rem;
}

/*
 * The selected category reads as a soft lift, not a solid white chip — the
 * label stays light and only the surface behind it brightens a little.
 */
.nv-pill-btn.is-active {
	border-color: var(--nv-border);
	background-color: color-mix(in srgb, var(--nv-foreground) 10%, transparent);
	color: var(--nv-foreground);
}

.nv-pill-btn.is-active:hover {
	border-color: rgba(var(--nv-primary-rgb), 0.55);
	background-color: color-mix(in srgb, var(--nv-foreground) 16%, transparent);
}

/*
 * Filter bar sized off the reference: a slightly deeper bar, taller pills and
 * a taller search box, so nothing sits tight against its own edge.
 */
.nv-filterbar {
	padding: 1.125rem 1.25rem;
}

.nv-pill-btn {
	min-height: 2.125rem;
	padding-inline: 1.0625rem;
}

.nv-filterbar__search .nv-field {
	height: 2.25rem;
	padding-inline: 1rem;
}

/*
 * The nav items sit closer together than the pill padding alone allowed:
 * measured text-to-text, the reference leaves ~32px, not 44.
 */
.nv-header__nav--pills a {
	padding-inline: 0.9375rem;
}

@media (min-width: 1024px) {
	.nv-header__nav--pills ul {
		gap: 0.125rem;
	}
}

/* ---- A shorter bar: smaller mark, tighter wordmark, less chrome ------ */

.nv-logo__mark {
	height: 1.875rem;
	width: auto;
}

.nv-logo__word {
	font-size: 0.9375rem;
}

.nv-logo__sub {
	font-size: 0.6875rem;
}

.nv-logo {
	gap: 0.625rem;
}

/*
 * The pill list, not the logo, was setting the bar's height — its own padding
 * sat around an already 36px pill.
 */
@media (min-width: 1024px) {
	.nv-header__nav--pills ul {
		padding: 0.125rem;
	}
}

.nv-header__inner {
	padding-block: 0.75rem;
}

/* ---- Page header type: match the reference weight and label size ---- */

.nv-page-hero__title {
	font-weight: 600;
}

.nv-page-hero .nv-eyebrow {
	font-size: 0.6875rem;
	letter-spacing: 0.13em;
}

/*
 * Cards fade in a row at a time. The delay is keyed off nth-child so it keeps
 * working after the filter hides and shows cards.
 */
.nv-catalog__grid > .nv-reveal:nth-child(3n + 2) {
	transition-delay: 70ms;
}

.nv-catalog__grid > .nv-reveal:nth-child(3n + 3) {
	transition-delay: 140ms;
}

/* ==========================================================================
   Homepage hero type — sized against the reference
   ========================================================================== */

/*
 * Measured character-for-character against the reference, the body line was
 * already right; everything around it ran 15-25% large.
 */
.nv-hero__title {
	font-size: clamp(2rem, 5vw, 2.5625rem);
}

.nv-hero .nv-pill {
	font-size: 0.6875rem;
}

.nv-hero__stat-value {
	font-size: 1.0625rem;
}

.nv-hero__stat-label {
	font-size: 0.6875rem;
}

.nv-hero__panel-label {
	font-size: 0.625rem;
}

/*
 * The earlier reference rules are written as .nv-hero--ref .nv-hero__*, so a
 * bare class selector loses to them on specificity whatever the source order.
 */
.nv-hero--ref .nv-hero__title {
	font-size: clamp(2rem, 5vw, 2.5625rem);
}

.nv-hero--ref .nv-hero__stat-value {
	font-size: 1.0625rem;
}

.nv-hero--ref .nv-hero__panel-label {
	font-size: 0.625rem;
}

.nv-hero--ref .nv-hero__stat-label {
	font-size: 0.6875rem;
}

@media (min-width: 640px) {
	.nv-hero--ref .nv-hero__title {
		font-size: clamp(2rem, 5vw, 2.5625rem);
	}
}

@media (min-width: 1024px) {
	.nv-hero--ref .nv-hero__title {
		font-size: clamp(2rem, 5vw, 2.5625rem);
	}
}

/* ==========================================================================
   Whole product card is the link
   ========================================================================== */

/*
 * The title's own anchor is stretched over the card, so a click anywhere on
 * the card opens the product. Keyboard focus and the accessible name stay on
 * that one link — no extra markup and no duplicate tab stops.
 */
.nv-product-card {
	position: relative;
}

.nv-product-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}

/* Keep the button above the overlay so it still shows its own hover state. */
.nv-product-card__view {
	position: relative;
	z-index: 2;
}

.nv-product-card__title a:focus-visible::after {
	outline: 2px solid var(--nv-primary-glow);
	outline-offset: 2px;
}

/* The artwork lifts with the card rather than only on its own hover. */
.nv-product-card:hover .nv-product-card__media img {
	transform: scale(1.03);
}

.nv-product-card__media img {
	transition: transform 500ms ease;
}

/* ==========================================================================
   Typography, measured against the reference
   --------------------------------------------------------------------------
   Every size, weight, line height and tracking below was read off
   blackswipe.xyz with getComputedStyle rather than estimated from a
   screenshot. Two rules explain most of the old drift: the reference sets
   every heading at weight 600 (never 700), and its small text sits one step
   down from ours — 14px where we had 15px, 12px where we had 13px.

   Because the earlier hero rules are written as .nv-hero--ref .nv-hero__x,
   the matching rules here carry the same prefix so they win on specificity
   as well as order.
   ========================================================================== */

/* ---- Hero ------------------------------------------------------------- */

.nv-hero--ref .nv-hero__title {
	font-size: 3rem;
	line-height: 3rem;
	font-weight: 600;
	letter-spacing: -0.025em;
}

@media (min-width: 640px) {
	.nv-hero--ref .nv-hero__title {
		font-size: 3rem;
		line-height: 3rem;
	}
}

@media (min-width: 1024px) {
	.nv-hero--ref .nv-hero__title {
		font-size: 3rem;
		line-height: 3rem;
	}
}

.nv-hero__text {
	font-size: 1rem;
	line-height: 1.75rem;
	font-weight: 400;
}

.nv-hero--ref .nv-pill {
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 600;
}

.nv-hero--ref .nv-hero__stat-value {
	font-size: 1.125rem;
	line-height: 1.75rem;
	font-weight: 600;
}

.nv-hero--ref .nv-hero__stat-label {
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 400;
}

/* ---- Live demo panel --------------------------------------------------- */

.nv-hero--ref .nv-hero__panel-label {
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 600;
	letter-spacing: 0.05em;
}

.nv-hero__panel-note-title {
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 600;
}

.nv-hero__panel-note-text {
	font-size: 0.875rem;
	line-height: 1.75rem;
	font-weight: 400;
}

.nv-demo__panel-title {
	font-size: 1.125rem;
	line-height: 1.75rem;
	font-weight: 600;
	letter-spacing: normal;
}

.nv-demo__tab-title,
.nv-demo__row-label,
.nv-demo__value {
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 600;
}

.nv-demo__tab-sub,
.nv-demo__row-sub {
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 400;
}

/* ---- Section headings -------------------------------------------------- */

.nv-eyebrow {
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 600;
	letter-spacing: 0.05em;
}

.nv-heading__title {
	font-size: 1.875rem;
	line-height: 2.25rem;
	font-weight: 600;
	letter-spacing: -0.025em;
}

.nv-heading__text {
	font-size: 1rem;
	line-height: 1.5rem;
	font-weight: 400;
}

/* ---- Key features, categories, about ----------------------------------- */

.nv-keyfeat__title,
.nv-about__card-title {
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 600;
}

.nv-keyfeat__text,
.nv-about__card-text,
.nv-category__text {
	font-size: 0.875rem;
	line-height: 1.5rem;
	font-weight: 400;
}

.nv-category__title {
	font-size: 1rem;
	line-height: 1.5rem;
	font-weight: 600;
}

.nv-category__cta {
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 600;
}

.nv-about__text,
.nv-about__text p {
	font-size: 1rem;
	line-height: 1.5rem;
	font-weight: 400;
}

/* ---- Testimonials ------------------------------------------------------ */

.nv-review__quote {
	font-size: 1rem;
	line-height: 1.75rem;
	font-weight: 400;
}

.nv-review__name {
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 600;
}

.nv-review__date {
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 400;
}

/* ---- Header ------------------------------------------------------------ */

.nv-header__nav--pills a,
.nv-header__nav--pills .current-menu-item > a,
.nv-header__nav--pills .current_page_item > a,
.nv-header__nav--pills .current-menu-ancestor > a,
.nv-header__nav--pills .current-menu-parent > a {
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 500;
}

.nv-logo__word {
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 600;
}

.nv-logo__sub {
	font-size: 0.6875rem;
	line-height: 1.03125rem;
	font-weight: 400;
}

/* ---- Buttons ----------------------------------------------------------- */

.nv-btn,
.nv-header__secondary,
.nv-header__secondary-text,
.nv-header__cta {
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 600;
}

/* ---- Footer ------------------------------------------------------------ */

.nv-footer__col-title {
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 600;
	letter-spacing: 0.05em;
}

.nv-footer__links a {
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 400;
}

.nv-footer__about {
	font-size: 0.875rem;
	line-height: 1.5rem;
	font-weight: 400;
}

.nv-footer__copy {
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 400;
}

/*
 * The four below already had .nv-hero--ref rules of their own, so they need
 * the same prefix here to take effect.
 */
.nv-hero--ref .nv-hero__text {
	line-height: 1.75rem;
}

.nv-hero--ref .nv-hero__actions .nv-btn {
	font-size: 0.875rem;
	line-height: 1.25rem;
}

.nv-hero--ref .nv-hero__panel-note-title {
	font-weight: 600;
}

.nv-hero--ref .nv-hero__panel-note-text {
	line-height: 1.75rem;
}

/* ---- Catalogue and product cards --------------------------------------- */

/*
 * Read off the reference's /products page. Note the page title carries no
 * negative tracking there, unlike the section headings on the home page.
 */
.nv-page-hero .nv-eyebrow {
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 600;
	letter-spacing: 0.05em;
}

.nv-page-hero__title {
	font-size: 1.875rem;
	line-height: 2.25rem;
	font-weight: 600;
	letter-spacing: normal;
}

.nv-page-hero__text {
	font-size: 0.875rem;
	line-height: 1.5rem;
	font-weight: 400;
}

.nv-pill-btn {
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 600;
}

.nv-badge {
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 600;
}

.nv-product-card__cat {
	font-size: 0.6875rem;
	line-height: 1.03125rem;
	font-weight: 400;
}

.nv-product-card__title,
.nv-product-card__title a {
	font-size: 1.125rem;
	line-height: 1.75rem;
	font-weight: 600;
	letter-spacing: normal;
}

.nv-helpband__title {
	font-size: 1rem;
	line-height: 1.5rem;
	font-weight: 600;
	letter-spacing: normal;
}

.nv-helpband__text {
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 400;
}

/* ==========================================================================
   Layout, measured against the reference
   --------------------------------------------------------------------------
   Every number below came from getComputedStyle on blackswipe.xyz at 1440px.
   ========================================================================== */

/* ---- Container gutter steps 16 / 24 / 32 like the reference ------------ */

:root {
	--nv-gutter: 1rem;
}

@media (min-width: 640px) {
	:root {
		--nv-gutter: 1.5rem;
	}
}

@media (min-width: 1024px) {
	:root {
		--nv-gutter: 2rem;
	}
}

/* ---- Section rhythm: 48px bands, a 64px hero --------------------------- */

.nv-section {
	padding-block: 3rem;
}

.nv-hero--ref .nv-hero__inner {
	padding-block: 3.5rem;
}

/* ---- Hero grid from the desktop breakpoint ----------------------------- */

/*
 * A 1:2 split — 392px of copy against a 784px demo panel at 1216 wide — with
 * a 40px gutter and 64px of air above and below. The reference switches to
 * this at 1024px, not 1280px, so this is the only place the hero grid is
 * described. It has to sit after the plain .nv-hero--ref rule above, because
 * a media query carries no specificity of its own and would otherwise lose
 * its padding to it.
 */
@media (min-width: 1024px) {
	.nv-hero--ref .nv-hero__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
		gap: 2.5rem;
		padding-block: 4rem;
	}
}

/* ---- Key features: five across from the large breakpoint --------------- */

.nv-keyfeat {
	gap: 1rem;
}

@media (min-width: 1024px) {
	.nv-keyfeat {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	.nv-keyfeat__item {
		padding: 1.625rem 1.375rem;
	}
}

/* ---- Categories: capped, centred tracks rather than stretched columns -- */

.nv-category-grid {
	grid-template-columns: repeat(auto-fit, minmax(17.5rem, 22.5rem));
	justify-content: center;
	gap: 1rem;
}

/* ---- Buttons: a 16px radius throughout, never a full pill -------------- */

.nv-btn {
	border-radius: 1rem;
}

.nv-hero--ref .nv-hero__actions .nv-btn {
	min-height: 2.625rem;
	border-radius: 1rem;
}

.nv-header__secondary,
.nv-header__cta,
.nv-header__actions .nv-icon-btn {
	min-height: 2.5rem;
	border-radius: 1rem;
}

/* ==========================================================================
   Ambient background
   --------------------------------------------------------------------------
   One fixed layer replaces the per-section glow bands, the hero-only glow and
   the footer glow. Those restarted at every boundary, which is what produced
   the purple patches between sections and the over-bright footer.

   The gradients are listed top layer first, so this reads as the reverse of
   the order they stack in.
   ========================================================================== */

.nv-ambient {
	position: fixed;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
}

.nv-ambient::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		/* Fine dot field. */
		radial-gradient(rgba(var(--nv-primary-glow-rgb), 0.132) 1px, transparent 1px),
		/* Broad wash over the middle of the viewport. */
		radial-gradient(circle, rgba(var(--nv-primary-rgb), 0.12), transparent 55%),
		/* Darkens the lower half so text keeps its contrast. */
		linear-gradient(
			to bottom,
			transparent,
			color-mix(in srgb, var(--nv-background) 35%, transparent) 65%,
			color-mix(in srgb, var(--nv-background) 70%, transparent)
		),
		/* Light spilling in from the top edge. */
		radial-gradient(circle at 50% 0%, rgba(var(--nv-primary-glow-rgb), 0.12), transparent 55%),
		/* Pool off the bottom-right corner. */
		radial-gradient(circle, rgba(var(--nv-primary-glow-rgb), 0.22), transparent 60%),
		/* Pool off the top-left corner. */
		radial-gradient(circle at 30% 30%, rgba(var(--nv-primary-rgb), 0.24), transparent 60%),
		/* Pool sitting above the headline. */
		radial-gradient(circle, rgba(var(--nv-primary-glow-rgb), 0.18), transparent 70%);
	background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
	background-size:
		28px 28px,
		100% 100%,
		100% 100%,
		100% 100%,
		520px 520px,
		420px 420px,
		520px 520px;
	background-position:
		0 0,
		0 0,
		0 0,
		0 0,
		right -160px bottom -176px,
		-120px -160px,
		50% -192px;
}

@media (prefers-reduced-transparency: reduce) {
	.nv-ambient {
		display: none;
	}
}

/* The three glows the ambient layer replaces. */
.nv-hero__glow,
.nv-footer__glow {
	display: none;
}

.nv-glow-band::before {
	content: none;
}

/* The dot field moved into the ambient layer, so the page itself stays flat. */
.nv-pattern-dots,
.nv-pattern-grid {
	background-image: none;
}

/* ---- Last of the measured gaps ----------------------------------------- */

.nv-footer__inner {
	padding-block: 2.5rem;
}

.nv-hero--ref .nv-hero__actions .nv-btn {
	padding-inline: 1rem;
}

/* The bordered Discord button runs 2px taller than the solid one. */
.nv-header__secondary {
	min-height: 2.625rem;
	padding-inline: 1rem;
}

/* ==========================================================================
   Catalogue page, measured against the reference
   --------------------------------------------------------------------------
   The reference dresses this page in "frost": surfaces are white at a very
   low alpha rather than a darker navy, corners are 24px on the big panels and
   16px on the controls, and the card edges carry a purple tint instead of the
   neutral border used elsewhere.
   ========================================================================== */

/* ---- Grid: three across from the large breakpoint, 16px gutters -------- */

@media (min-width: 1024px) {
	.nv-product-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.nv-catalog__grid {
	gap: 1rem;
}

/* ---- Card chrome ------------------------------------------------------- */

.nv-product-card {
	border-radius: 1.5rem;
	border-color: rgba(var(--nv-primary-rgb), 0.18);
}

.nv-product-card__media {
	border-radius: 1rem;
	border-color: rgba(var(--nv-primary-rgb), 0.22);
	background-color: rgba(var(--nv-primary-rgb), 0.08);
}

.nv-product-card__cat {
	color: color-mix(in srgb, var(--nv-foreground) 60%, transparent);
}

.nv-badge {
	padding: 0.25rem 0.75rem;
	color: color-mix(in srgb, var(--nv-primary-glow) 22%, var(--nv-foreground));
}

.nv-product-card__view {
	min-height: 2.375rem;
	border-radius: 1rem;
	padding: 0.5rem 0.75rem;
	background-color: color-mix(in srgb, var(--nv-foreground) 5%, transparent);
	border-color: color-mix(in srgb, var(--nv-foreground) 12%, transparent);
}

/* ---- Filter bar -------------------------------------------------------- */

.nv-filterbar {
	border-radius: 1.5rem;
	padding: 1rem;
	background-color: color-mix(in srgb, var(--nv-foreground) 3.5%, transparent);
	border-color: color-mix(in srgb, var(--nv-foreground) 10%, transparent);
}

.nv-pill-btn {
	min-height: 2.375rem;
	border-radius: 1rem;
	padding: 0.5rem 1rem;
	background-color: color-mix(in srgb, var(--nv-foreground) 3.5%, transparent);
	border-color: color-mix(in srgb, var(--nv-foreground) 10%, transparent);
}

.nv-pill-btn.is-active {
	background-color: color-mix(in srgb, var(--nv-foreground) 10%, transparent);
	border-color: color-mix(in srgb, var(--nv-foreground) 20%, transparent);
}

.nv-filterbar__search .nv-field {
	height: 2.625rem;
	border-radius: 1rem;
	padding: 0.625rem 1rem;
	background-color: color-mix(in srgb, var(--nv-background) 70%, transparent);
	border-color: color-mix(in srgb, var(--nv-foreground) 12%, transparent);
}

/* ---- Help band --------------------------------------------------------- */

.nv-helpband {
	border-radius: 1.5rem;
	padding: 1.5rem;
	background-color: color-mix(in srgb, var(--nv-foreground) 3.5%, transparent);
	border-color: color-mix(in srgb, var(--nv-foreground) 10%, transparent);
	margin-bottom: 3rem;
}

.nv-helpband .nv-btn {
	min-height: 2.625rem;
	border-radius: 1rem;
	padding: 0.625rem 1rem;
	background-color: rgba(var(--nv-primary-rgb), 0.08);
	border-color: rgba(var(--nv-primary-rgb), 0.35);
}

/*
 * The reference runs title block → filter → grid → help band as one stack
 * with a 24px rhythm, so the page header stops adding a band of its own.
 */
.nv-page-hero__inner {
	padding-block: 3rem 0;
}

.nv-catalog {
	padding-block: 1.5rem;
}

/*
 * The artwork frame is the <a> inside the media box, not the box itself, so
 * the tint and the radius belong there. The box keeps no chrome and no inset
 * of its own — the card's own 20px padding is the only gutter, as in the
 * reference.
 */
.nv-product-card__media,
.nv-glass-surfaces .nv-product-card__media {
	padding: 0;
	border: 0;
	background: none;
}

.nv-product-card__media > a {
	border-radius: 1rem;
	border-color: rgba(var(--nv-primary-rgb), 0.22);
	background-color: rgba(var(--nv-primary-rgb), 0.08);
}

/*
 * The body is a flex column whose children also carry top margins, so the two
 * were stacking and the card ran 20px tall. The margins alone set the rhythm:
 * 12px under the badge row, 20px above the footer, as measured.
 */
.nv-product-card__body {
	gap: 0;
}

.nv-product-card__title {
	margin-top: 0.75rem;
}

.nv-product-card__foot {
	margin-top: 1.25rem;
}

/* ==========================================================================
   Header and footer, measured against the reference
   --------------------------------------------------------------------------
   Two things drive most of this. The bar is a flex row with the nav pushed
   apart from the actions, not a three-column grid; and the Discord button is
   the one control that carries a purple tint rather than the neutral surface
   every other button uses.
   ========================================================================== */

/* ---- Header bar -------------------------------------------------------- */

.nv-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

/*
 * A 40px square with a 12px radius. The supplied mark is wider than it is
 * tall, so `contain` fits it inside that box rather than distorting it.
 */
.nv-logo__mark {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 0.75rem;
	object-fit: contain;
}

@media (min-width: 1024px) {
	.nv-header__nav--pills ul {
		gap: 0.25rem;
	}
}

.nv-header__nav--pills a {
	padding: 0.5rem 0.75rem;
}

.nv-header__actions {
	gap: 0.5rem;
}

/* The Discord button is the only purple-tinted control in the bar. */
.nv-header__secondary {
	padding-block: 0.625rem;
	background-color: rgba(var(--nv-primary-rgb), 0.08);
	border-color: rgba(var(--nv-primary-rgb), 0.35);
	color: color-mix(in srgb, var(--nv-foreground) 90%, transparent);
}

.nv-header__secondary:hover {
	background-color: rgba(var(--nv-primary-rgb), 0.16);
	border-color: rgba(var(--nv-primary-rgb), 0.5);
}

.nv-header__cta {
	padding-block: 0.625rem;
}

/* A 38px square with a 20px glyph, at every width, as on the reference. */
.nv-header__actions .nv-icon-btn svg,
.nv-header__secondary svg {
	width: 1.25rem;
	height: 1.25rem;
}

.nv-header__actions .nv-icon-btn {
	width: 2.375rem;
	height: 2.375rem;
	min-height: 2.375rem;
	border-radius: 0.75rem;
	background-color: color-mix(in srgb, var(--nv-foreground) 5%, transparent);
	border-color: color-mix(in srgb, var(--nv-foreground) 10%, transparent);
	color: color-mix(in srgb, var(--nv-foreground) 80%, transparent);
}

/* ---- Footer ------------------------------------------------------------ */

/*
 * Four equal columns only once there is room. The sheet already stacks the
 * footer to one column on phones and two from 640px, matching the reference,
 * so this must stay inside the large breakpoint rather than override it.
 */
.nv-footer__grid {
	column-gap: 2rem;
}

@media (min-width: 1024px) {
	.nv-footer__grid--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.nv-footer .nv-logo {
	gap: 0.75rem;
}

/* In the footer the mark sits in a faint rounded well. */
.nv-footer .nv-logo__mark {
	padding: 0.25rem;
	border: 1px solid color-mix(in srgb, var(--nv-foreground) 10%, transparent);
	background-color: color-mix(in srgb, var(--nv-foreground) 5%, transparent);
}

/*
 * The reference tunes each of these to its own alpha rather than sharing one
 * muted colour, so they are set here instead of taking the token.
 */
.nv-footer__col-title {
	color: color-mix(in srgb, var(--nv-foreground) 50%, transparent);
}

.nv-footer__links a {
	color: color-mix(in srgb, var(--nv-foreground) 70%, transparent);
}

.nv-footer__about {
	margin-top: 0.75rem;
	color: color-mix(in srgb, var(--nv-foreground) 65%, transparent);
}

.nv-footer__copy {
	color: color-mix(in srgb, var(--nv-foreground) 55%, transparent);
}

.nv-footer__bottom {
	padding-top: 1.5rem;
}

/* The copyright and the tagline sit side by side only once they both fit. */
@media (min-width: 640px) {
	.nv-footer__bottom {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
	}
}

/* The reference uses no gradient fills on buttons; the tint alone carries it. */
.nv-helpband .nv-btn {
	background-image: none;
}

/*
 * The reference ships no gradient fills at all — its emphasis buttons are
 * either solid white or purple-tinted ghosts. Flat primary keeps the same
 * hierarchy without the gradient.
 */
.nv-btn--primary {
	background-image: none;
	background-color: var(--nv-primary);
}

/*
 * On phones the bar carries icons rather than labels. Sized to the reference:
 * 38px taps with a 20px glyph, and a tighter bar around them — 57px tall
 * rather than 69.
 */
@media (max-width: 639px) {
	.nv-header__inner {
		padding-block: 0.5rem;
	}

	.nv-header__actions .nv-icon-btn,
	.nv-header__secondary {
		width: 2.375rem;
		height: 2.375rem;
		min-height: 2.375rem;
		padding-inline: 0;
		border-radius: 0.75rem;
	}

}

/* ==========================================================================
   Status page, measured against the reference
   --------------------------------------------------------------------------
   The badge was the loudest difference: ours was a hollow outline with
   saturated text and a glow, which reads as neon. The reference fills the
   pill and drops the text to a near-white tint of the same hue, so the colour
   carries the meaning and the label stays quiet.
   ========================================================================== */

.nv-status[style*="--nv-state"] {
	background-color: color-mix(in srgb, var(--nv-state) 28%, transparent);
	border-color: color-mix(in srgb, var(--nv-state) 80%, transparent);
	color: color-mix(in srgb, var(--nv-state) 10%, var(--nv-foreground));
}

.nv-status--lg {
	padding: 0.375rem 1rem;
	font-weight: 600;
	letter-spacing: 0.025em;
}

/*
 * On a product page the badge sits flat — the reference gives that one no
 * shadow at all, and it is checked against it.
 */
.nv-status--lg[style*="--nv-state"] {
	box-shadow: none;
}

/*
 * On the status page it glows. The reference draws a 1px ring at 28% of the
 * state colour with a soft 14px halo at 35%, so a green product reads green
 * and an updating one amber without either being spelt out here. An earlier
 * pass took the halo off on the strength of a reading from the wrong element;
 * measured off the badge itself, it is there.
 */
.nv-status-card .nv-status[style*="--nv-state"] {
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--nv-state) 28%, transparent),
		0 0 14px color-mix(in srgb, var(--nv-state) 35%, transparent);
}

/* ---- Card -------------------------------------------------------------- */

.nv-status-grid {
	gap: 1rem;
}

.nv-status-card {
	padding: 1.25rem;
	background-color: color-mix(in srgb, var(--nv-card) 78%, transparent);
	border-color: rgba(var(--nv-primary-rgb), 0.18);
}

.nv-status-card__cat {
	font-size: 0.6875rem;
	letter-spacing: 0.05em;
	color: color-mix(in srgb, var(--nv-foreground) 45%, transparent);
}

.nv-status-card__title,
.nv-status-card__title a {
	margin-top: 0.25rem;
	font-size: 1.125rem;
	line-height: 1.75rem;
	font-weight: 600;
	letter-spacing: normal;
}

.nv-status-card__title a {
	margin-top: 0;
}

.nv-status-card__since {
	margin-top: 0.75rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: color-mix(in srgb, var(--nv-foreground) 70%, transparent);
}

.nv-status-card__ago {
	font-size: 0.875rem;
	color: color-mix(in srgb, var(--nv-foreground) 90%, transparent);
}

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

/*
 * Section eyebrows on the home page are purple, but the ones above a page
 * title are plain white at half strength — measured on both /products and
 * /status.
 */
.nv-page-hero .nv-eyebrow {
	color: color-mix(in srgb, var(--nv-foreground) 50%, transparent);
}

.nv-page-hero__title {
	margin-top: 0.5rem;
}

.nv-page-hero__text {
	margin-top: 0.5rem;
	color: color-mix(in srgb, var(--nv-foreground) 70%, transparent);
}

/* ==========================================================================
   Product sub-nav — measured against the reference
   --------------------------------------------------------------------------
   One row that scrolls sideways instead of wrapping onto a second line.
   Below the desktop breakpoint it also follows the page down under the
   header, which is why it needs a surface there — at 95% it is opaque
   enough that the ambient glow no longer tints it, which was the problem
   with the earlier see-through version. From 1024px up it goes back to a
   plain transparent row with no band at all.
   ========================================================================== */

.nv-subnav {
	position: sticky;
	top: var(--nv-header-h, 0px);
	z-index: 40;
	border-bottom: 1px solid color-mix(in srgb, var(--nv-foreground) 10%, transparent);
	background-color: color-mix(in srgb, var(--nv-background) 95%, transparent);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
}

/* Never a second line — the overflow scrolls, as it does on the reference. */
.nv-subnav__inner,
.nv-subnav__links {
	flex-wrap: nowrap;
	gap: 0.5rem;
}

.nv-subnav__inner {
	overflow-x: auto;
	padding-block: 0.5rem;
	scrollbar-width: none;
}

.nv-subnav__inner::-webkit-scrollbar {
	display: none;
}

.nv-subnav__back {
	flex: 0 0 auto;
	border-radius: 0.75rem;
	padding: 0.5rem 1rem;
	border-color: color-mix(in srgb, var(--nv-foreground) 10%, transparent);
	background-color: color-mix(in srgb, var(--nv-foreground) 5%, transparent);
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 600;
	color: color-mix(in srgb, var(--nv-foreground) 80%, transparent);
	white-space: nowrap;
}

/* The reference labels it with the word alone. */
.nv-subnav__back svg {
	display: none;
}

.nv-subnav__links a {
	flex: 0 0 auto;
	border-radius: 0.75rem;
	padding: 0.5rem 0.75rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 500;
	color: color-mix(in srgb, var(--nv-foreground) 70%, transparent);
	white-space: nowrap;
}

/*
 * The bar was transparent at the top of the page and 80% opaque with a blur
 * once scrolled, so whatever passed underneath tinted it. A solid bar keeps
 * its colour fixed no matter what is behind it.
 */
.nv-header,
.nv-header.is-scrolled {
	background-color: var(--nv-background);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

/* ==========================================================================
   Checkout box
   --------------------------------------------------------------------------
   A dialog rather than a page: the buyer keeps the product behind them while
   they enter an e-mail and pick how to pay. Laid out to match the reference —
   collapsible summary, step header, then contact, discount and payment.
   ========================================================================== */

.nv-co {
	position: fixed;
	inset: 0;
	z-index: 120;
	display: grid;
	place-items: start center;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 1.5rem 1rem 3rem;
}

.nv-co__backdrop {
	position: fixed;
	inset: 0;
	background-color: color-mix(in srgb, var(--nv-background) 82%, transparent);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.nv-co__panel {
	position: relative;
	width: min(100%, 39rem);
	border: 1px solid var(--nv-border);
	border-radius: 1.5rem;
	background-color: var(--nv-card);
	box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.75);
	animation: nv-co-in 220ms var(--nv-ease) both;
}

@keyframes nv-co-in {
	from {
		opacity: 0;
		transform: translateY(12px) scale(0.985);
	}
}

@media (prefers-reduced-motion: reduce) {
	.nv-co__panel {
		animation: none;
	}
}

/* ---- Header ------------------------------------------------------------ */

.nv-co__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.25rem 1.25rem 0;
}

.nv-co__close {
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border: 0;
	border-radius: 0.75rem;
	background-color: transparent;
	color: color-mix(in srgb, var(--nv-foreground) 60%, transparent);
	cursor: pointer;
	transition: background-color 160ms ease, color 160ms ease;
}

.nv-co__close:hover {
	background-color: color-mix(in srgb, var(--nv-foreground) 8%, transparent);
	color: var(--nv-foreground);
}

.nv-co__scroll {
	padding: 1.25rem;
}

/* ---- Order summary ----------------------------------------------------- */

.nv-co__summary {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	border: 1px solid var(--nv-border);
	border-radius: 1rem;
	background-color: color-mix(in srgb, var(--nv-foreground) 3.5%, transparent);
	padding: 0.875rem 1rem;
	color: var(--nv-foreground);
	cursor: pointer;
	text-align: left;
}

.nv-co__summary-label {
	flex: 1 1 auto;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--nv-foreground) 55%, transparent);
}

.nv-co__summary-total {
	font-size: 1rem;
	font-weight: 600;
}

.nv-co__summary svg {
	width: 1rem;
	height: 1rem;
	transition: transform 200ms ease;
}

.nv-co__summary[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

.nv-co__lines {
	display: grid;
	gap: 0.5rem;
	margin: 0.625rem 0 0;
	border: 1px solid var(--nv-border);
	border-radius: 1rem;
	padding: 0.875rem 1rem;
	font-size: 0.875rem;
}

.nv-co__line {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
}

.nv-co__line dt {
	color: color-mix(in srgb, var(--nv-foreground) 70%, transparent);
}

.nv-co__line dd {
	margin: 0;
	font-weight: 600;
}

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

.nv-co__step {
	margin-top: 1.5rem;
}

.nv-co__step-num {
	margin: 0;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--nv-foreground) 45%, transparent);
}

.nv-co__title {
	margin: 0.25rem 0 0;
	font-size: 1.375rem;
	line-height: 1.75rem;
	font-weight: 600;
}

.nv-co__bar {
	display: block;
	height: 2px;
	margin-top: 0.875rem;
	border-radius: 2px;
	background-color: color-mix(in srgb, var(--nv-foreground) 10%, transparent);
}

.nv-co__bar > span {
	display: block;
	width: 50%;
	height: 100%;
	border-radius: inherit;
	background-color: var(--nv-primary);
	transition: width 300ms var(--nv-ease);
}

/* ---- Sections ---------------------------------------------------------- */

.nv-co__section {
	margin-top: 1.5rem;
}

.nv-co__legend {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin: 0 0 0.625rem;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--nv-foreground) 55%, transparent);
}

.nv-co__secure {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.6875rem;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	color: color-mix(in srgb, var(--nv-foreground) 45%, transparent);
}

.nv-co__secure svg {
	width: 0.75rem;
	height: 0.75rem;
}

.nv-co__input {
	width: 100%;
	height: 3rem;
	border-radius: 1rem;
	padding-inline: 1rem;
	font-size: 0.9375rem;
}

.nv-co__hint {
	margin: 0.5rem 0 0;
	font-size: 0.75rem;
	color: color-mix(in srgb, var(--nv-foreground) 50%, transparent);
}

.nv-co__coupon {
	display: flex;
	gap: 0.5rem;
}

.nv-co__apply {
	flex: 0 0 auto;
	min-height: 3rem;
	border-radius: 1rem;
}

/* ---- Payment methods --------------------------------------------------- */

.nv-co__methods {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nv-co__method {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	width: 100%;
	border: 1px solid var(--nv-border);
	border-radius: 1rem;
	background-color: color-mix(in srgb, var(--nv-foreground) 3%, transparent);
	padding: 0.875rem 1rem;
	color: var(--nv-foreground);
	cursor: pointer;
	text-align: left;
	transition: border-color 160ms ease, background-color 160ms ease;
}

.nv-co__method:hover {
	border-color: rgba(var(--nv-primary-rgb), 0.45);
}

.nv-co__method[aria-checked="true"] {
	border-color: rgba(var(--nv-primary-rgb), 0.85);
	background-color: rgba(var(--nv-primary-rgb), 0.14);
}

.nv-co__method-icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 0.625rem;
	background-color: color-mix(in srgb, var(--nv-foreground) 7%, transparent);
}

.nv-co__method-icon svg {
	width: 1.125rem;
	height: 1.125rem;
}

.nv-co__method-body {
	display: grid;
	gap: 0.125rem;
	flex: 1 1 auto;
	min-width: 0;
}

.nv-co__method-label {
	font-size: 0.9375rem;
	font-weight: 600;
}

.nv-co__method-sub {
	font-size: 0.75rem;
	color: color-mix(in srgb, var(--nv-foreground) 55%, transparent);
}

.nv-co__method-badge {
	flex: 0 0 auto;
	border-radius: 9999px;
	background-color: rgba(var(--nv-success-rgb), 0.18);
	padding: 0.1875rem 0.5rem;
	font-size: 0.6875rem;
	font-weight: 600;
	color: var(--nv-success);
}

/* ---- Checkboxes, notice, submit ---------------------------------------- */

.nv-co__check {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	margin-top: 1rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: color-mix(in srgb, var(--nv-foreground) 78%, transparent);
	cursor: pointer;
}

.nv-co__check input {
	flex: 0 0 auto;
	width: 1.125rem;
	height: 1.125rem;
	margin-top: 0.0625rem;
	accent-color: var(--nv-primary);
}

.nv-co__delivery {
	margin-top: 1.25rem;
	border: 1px solid var(--nv-border);
	border-radius: 1rem;
	padding: 1rem;
}

.nv-co__delivery-title {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 600;
}

.nv-co__delivery-text {
	margin: 0.375rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.25rem;
	color: color-mix(in srgb, var(--nv-foreground) 60%, transparent);
}

.nv-co__delivery .nv-co__check {
	margin-top: 0.75rem;
}

.nv-co__error {
	margin: 1rem 0 0;
	border: 1px solid color-mix(in srgb, var(--nv-destructive) 40%, transparent);
	border-radius: 0.875rem;
	background-color: color-mix(in srgb, var(--nv-destructive) 12%, transparent);
	padding: 0.75rem 1rem;
	font-size: 0.875rem;
	color: var(--nv-foreground);
}

.nv-co__submit {
	width: 100%;
	min-height: 3.25rem;
	margin-top: 1.25rem;
	border-radius: 1rem;
	font-size: 0.9375rem;
}

.nv-co__submit[disabled] {
	opacity: 0.55;
	cursor: not-allowed;
}

.nv-co__help {
	margin-top: 1.5rem;
	border-top: 1px solid var(--nv-border);
	padding-top: 1rem;
}

.nv-co__help-title {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 600;
}

.nv-co__help-text {
	margin: 0.25rem 0 0;
	font-size: 0.8125rem;
	color: color-mix(in srgb, var(--nv-foreground) 55%, transparent);
}

/* The page behind the dialog must not scroll with it. */
body.nv-co-open {
	overflow: hidden;
}

@media (max-width: 559px) {
	.nv-co {
		padding: 0;
	}

	.nv-co__panel {
		min-height: 100%;
		border: 0;
		border-radius: 0;
	}
}

/* ---- Thank-you panel, shown on the way back from paying ---------------- */

.nv-thanks {
	border-bottom: 1px solid color-mix(in srgb, var(--nv-success) 30%, transparent);
	background-color: color-mix(in srgb, var(--nv-success) 12%, transparent);
}

.nv-thanks__inner {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding-block: 1rem;
}

.nv-thanks__mark {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 9999px;
	background-color: color-mix(in srgb, var(--nv-success) 22%, transparent);
	color: var(--nv-success);
}

.nv-thanks__mark svg {
	width: 1.125rem;
	height: 1.125rem;
}

.nv-thanks__body {
	flex: 1 1 auto;
	min-width: 0;
}

.nv-thanks__title {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.375rem;
	font-weight: 600;
}

.nv-thanks__text {
	margin: 0.125rem 0 0;
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: color-mix(in srgb, var(--nv-foreground) 70%, transparent);
}

.nv-thanks__btn {
	flex: 0 0 auto;
	min-height: 2.375rem;
	border-radius: 1rem;
	font-size: 0.875rem;
}

.nv-thanks__close {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 2rem;
	height: 2rem;
	border: 0;
	border-radius: 0.625rem;
	background-color: transparent;
	color: color-mix(in srgb, var(--nv-foreground) 55%, transparent);
	cursor: pointer;
}

.nv-thanks__close:hover {
	background-color: color-mix(in srgb, var(--nv-foreground) 8%, transparent);
	color: var(--nv-foreground);
}

.nv-thanks__close svg {
	width: 1rem;
	height: 1rem;
}

@media (max-width: 639px) {
	.nv-thanks__inner {
		flex-wrap: wrap;
	}

	.nv-thanks__btn {
		order: 3;
		width: 100%;
	}
}


/* ==========================================================================
   Discord landing page
   --------------------------------------------------------------------------
   A narrow centred column: heading, one wide brand-coloured button, then a
   2×2 grid of cards whose icon sits beside the text rather than above it.
   Every measurement taken from the reference at 1440px.
   ========================================================================== */

/* 672px of content, plus the container's own gutter on either side. */
.nv-discord {
	max-width: calc(42rem + var(--nv-gutter) * 2);
	padding-block: 5rem 4rem;
}

.nv-discord__head {
	text-align: center;
}

.nv-discord__title {
	margin: 0;
	font-size: 2.25rem;
	line-height: 2.5rem;
	font-weight: 700;
	letter-spacing: -0.025em;
	color: var(--nv-foreground);
}

.nv-discord__lead {
	margin: 1rem 0 0;
	font-size: 1rem;
	line-height: 1.75rem;
	font-weight: 400;
	color: color-mix(in srgb, var(--nv-foreground) 60%, transparent);
}

/* Discord's own blurple, so the button reads as theirs and not as ours. */
.nv-discord__btn {
	display: flex;
	width: 100%;
	min-height: 2.875rem;
	margin-top: 2rem;
	border: 0;
	border-radius: 1rem;
	padding: 0.75rem 1rem;
	background-color: var(--nv-discord-brand, #5865f2);
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 600;
	color: #fff;
}

.nv-discord__btn:hover {
	background-color: color-mix(in srgb, var(--nv-discord-brand, #5865f2) 86%, #000);
	color: #fff;
}

.nv-discord__btn svg {
	width: 1.125rem;
	height: 1.125rem;
}

.nv-discord__note {
	margin: 0.75rem 0 0;
	font-size: 0.75rem;
	line-height: 1rem;
	color: color-mix(in srgb, var(--nv-foreground) 40%, transparent);
}

.nv-discord__prose {
	margin-top: 1.5rem;
	text-align: left;
}

/* ---- Cards ------------------------------------------------------------- */

.nv-discord__cards {
	display: grid;
	gap: 1rem;
	margin: 3rem 0 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {
	.nv-discord__cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.nv-discord__card {
	display: flex;
	gap: 1rem;
	border: 1px solid color-mix(in srgb, var(--nv-foreground) 10%, transparent);
	border-radius: 1.5rem;
	background-color: color-mix(in srgb, var(--nv-card) 78%, transparent);
	padding: 1.25rem;
	text-align: left;
}

.nv-discord__card-icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 0.75rem;
	background-color: rgba(var(--nv-primary-rgb), 0.1);
	color: var(--nv-primary-glow);
}

.nv-discord__card-icon svg {
	width: 1.25rem;
	height: 1.25rem;
}

.nv-discord__card-body {
	min-width: 0;
}

.nv-discord__card-title {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 600;
	color: var(--nv-foreground);
}

.nv-discord__card-text {
	margin: 0.25rem 0 0;
	font-size: 0.875rem;
	line-height: 1.5rem;
	font-weight: 400;
	color: color-mix(in srgb, var(--nv-foreground) 60%, transparent);
}

@media (max-width: 639px) {
	.nv-discord {
		padding-block: 3rem;
	}

	.nv-discord__title {
		font-size: 1.75rem;
		line-height: 2.125rem;
	}
}

/*
 * The breakpoints sit at the end of the block on purpose: a media query adds
 * no specificity, so placed above the base rules they would simply lose.
 */
@media (min-width: 640px) {
	.nv-subnav__inner {
		padding-block: 0.75rem;
	}
}

/*
 * From the desktop breakpoint it is a plain row again — no band, no sticking,
 * and set down 16px from the header so the two do not read as one bar. Below
 * 1024 it stays flush, because there it sticks under the header and a gap
 * would show the page sliding through.
 */
@media (min-width: 1024px) {
	.nv-subnav {
		position: static;
		margin-top: 1rem;
		border-bottom: 0;
		background-color: transparent;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	.nv-subnav__inner {
		padding-block: 0;
	}
}

/*
 * On a phone the purchase panel comes first. Below the two-column breakpoint
 * the grid stacks, and the price, plan picker and Checkout button matter more
 * than the demo panel above them — a buyer should not have to scroll past it.
 */
@media (max-width: 1023px) {
	.nv-product__aside {
		order: -1;
	}
}

/* ==========================================================================
   Cart panel
   --------------------------------------------------------------------------
   Drops from the cart button. On a phone it becomes a sheet pinned under the
   header instead of a narrow dropdown squeezed against the edge.
   ========================================================================== */

.nv-header__cart {
	position: relative;
}

.nv-cart {
	position: absolute;
	top: calc(100% + 0.625rem);
	right: 0;
	z-index: 60;
	width: 19.5rem;
}

.nv-cart__panel {
	border: 1px solid var(--nv-border);
	border-radius: 1.25rem;
	background-color: var(--nv-popover);
	box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.8);
	padding: 1rem;
	animation: nv-cart-in 180ms var(--nv-ease) both;
}

@keyframes nv-cart-in {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.nv-cart__panel {
		animation: none;
	}
}

.nv-cart__title {
	margin: 0 0 0.75rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 600;
	color: var(--nv-foreground);
}

.nv-cart__empty {
	margin: 0;
	border: 1px solid var(--nv-border);
	border-radius: 0.875rem;
	background-color: color-mix(in srgb, var(--nv-foreground) 3%, transparent);
	padding: 0.875rem 1rem;
	font-size: 0.875rem;
	color: color-mix(in srgb, var(--nv-foreground) 55%, transparent);
}

.nv-cart__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin: 0.875rem 0 0;
	font-size: 0.875rem;
	color: color-mix(in srgb, var(--nv-foreground) 70%, transparent);
}

.nv-cart__total strong {
	font-size: 1rem;
	font-weight: 600;
	color: var(--nv-foreground);
}

.nv-cart__btn {
	display: flex;
	width: 100%;
	min-height: 2.625rem;
	margin-top: 0.75rem;
	border-radius: 1rem;
	font-size: 0.875rem;
	opacity: 0.45;
	cursor: not-allowed;
}

/* ---- Dashboard ---------------------------------------------------------- */

.nv-cart__login {
	margin-top: 1rem;
	border-top: 1px solid var(--nv-border);
	padding-top: 1rem;
}

.nv-cart__login-title {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 600;
	color: var(--nv-foreground);
}

.nv-cart__login-text {
	margin: 0.25rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.25rem;
	color: color-mix(in srgb, var(--nv-foreground) 55%, transparent);
}

.nv-cart__login-btn {
	display: flex;
	width: 100%;
	min-height: 2.625rem;
	margin-top: 0.75rem;
	border-radius: 1rem;
	font-size: 0.875rem;
}

.nv-cart__login-btn svg {
	width: 1rem;
	height: 1rem;
}

.nv-cart__login-note {
	margin: 0.625rem 0 0;
	font-size: 0.75rem;
	line-height: 1rem;
	text-align: center;
	color: color-mix(in srgb, var(--nv-foreground) 40%, transparent);
}

/* A dropdown this wide would hang off the screen on a phone. */
@media (max-width: 479px) {
	.nv-header__cart {
		position: static;
	}

	.nv-cart {
		position: fixed;
		top: calc(var(--nv-header-h, 4rem) + 0.5rem);
		right: 0.75rem;
		left: 0.75rem;
		width: auto;
	}
}

/* ==========================================================================
   Legal pages — measured against the reference
   ========================================================================== */

.nv-legal__card {
	border: 1px solid rgba(var(--nv-primary-rgb), 0.18);
	border-radius: 1.5rem;
	background-color: color-mix(in srgb, var(--nv-card) 78%, transparent);
	box-shadow:
		0 0 0 1px rgba(var(--nv-primary-rgb), 0.08),
		0 24px 60px -40px rgba(var(--nv-primary-rgb), 0.55);
	padding: 1.25rem;
}

/*
 * Every heading on the reference is wrapped in <b> inside the editor, which
 * resolves to font-weight 900 — black, not bold. That is the single biggest
 * difference between the two pages: the title alone renders 14px wider there.
 * Set here rather than relying on markup, so the editor stays clean.
 */
.nv-legal__title {
	margin: 0 0 1rem;
	font-size: 2rem;
	line-height: 2.25rem;
	font-weight: 900;
	letter-spacing: normal;
	color: var(--nv-foreground);
}

/*
 * 60px between the end of one section and the next heading. The reference
 * reaches that with an empty paragraph before each heading — 36px of block
 * plus its own 24px margin — which is content clutter we can do without.
 * The first heading follows the opening line directly, there as here, so it
 * keeps the plain 24px.
 */
.nv-legal__body h2 {
	margin: 3.75rem 0 0;
	font-size: 1.25rem;
	line-height: 1.75rem;
	font-weight: 900;
	color: var(--nv-foreground);
}

.nv-legal__body h2:first-of-type {
	margin-top: 1.5rem;
}

.nv-legal__body h3 {
	font-weight: 900;
}

/*
 * Margin on both sides, as the reference has it. Between two paragraphs the
 * two 12s collapse to one, so nothing moves — but the last paragraph in the
 * card finally gets its 12px before the padding, which is the whole of the
 * remaining height difference between the two pages.
 */
.nv-legal__body p {
	margin: 0.75rem 0;
	font-size: 1rem;
	line-height: 1.5rem;
	color: color-mix(in srgb, var(--nv-foreground) 70%, transparent);
}

/* The reference indents by margin, not padding, and closes the gap below. */
.nv-legal__body ul,
.nv-legal__body ol {
	margin: 0.75rem 0 0.75rem 1.25rem;
	padding-left: 0;
}

.nv-legal__body li {
	margin: 0.3rem 0;
	font-size: 1rem;
	line-height: 1.5rem;
	color: color-mix(in srgb, var(--nv-foreground) 75%, transparent);
}

.nv-legal__body li + li {
	margin-top: 0.3rem;
}

/* Bold inside a paragraph is the browser's 700, not the theme's 600. */
.nv-legal__body strong,
.nv-legal__body b {
	color: var(--nv-foreground);
	font-weight: 700;
}

.nv-legal__footnote {
	margin: 1.5rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.25rem;
	color: color-mix(in srgb, var(--nv-foreground) 45%, transparent);
}


/* ---- Cart lines --------------------------------------------------------- */

.nv-cart__items {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nv-cart__items:empty {
	display: none;
}

.nv-cart__item {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	border: 1px solid var(--nv-border);
	border-radius: 0.875rem;
	background-color: color-mix(in srgb, var(--nv-foreground) 3%, transparent);
	padding: 0.75rem;
}

.nv-cart__thumb {
	flex: 0 0 auto;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 0.625rem;
	background-color: color-mix(in srgb, var(--nv-foreground) 7%, transparent);
	background-position: center;
	background-size: cover;
}

.nv-cart__item-body {
	display: grid;
	gap: 0.125rem;
	flex: 1 1 auto;
	min-width: 0;
}

.nv-cart__item-name {
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 600;
	color: var(--nv-foreground);
	overflow-wrap: anywhere;
}

.nv-cart__item-meta {
	font-size: 0.75rem;
	line-height: 1rem;
	color: color-mix(in srgb, var(--nv-foreground) 55%, transparent);
}

.nv-cart__item-side {
	display: grid;
	justify-items: end;
	gap: 0.25rem;
	flex: 0 0 auto;
	text-align: right;
}

.nv-cart__item-price {
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 600;
	color: var(--nv-foreground);
	white-space: nowrap;
}

.nv-cart__remove {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	border: 0;
	background: none;
	padding: 0;
	font-size: 0.75rem;
	line-height: 1rem;
	color: color-mix(in srgb, var(--nv-foreground) 50%, transparent);
	cursor: pointer;
	transition: color 160ms ease;
}

.nv-cart__remove:hover {
	color: var(--nv-destructive);
}

.nv-cart__remove svg {
	width: 0.8125rem;
	height: 0.8125rem;
}

.nv-cart__total {
	margin-top: 0.875rem;
}

.nv-cart__btn:not([disabled]) {
	opacity: 1;
	cursor: pointer;
}

/* ---- Count on the header button ---------------------------------------- */

.nv-header__icon {
	position: relative;
}

.nv-header__cart-count {
	position: absolute;
	top: -0.3125rem;
	right: -0.3125rem;
	display: grid;
	place-items: center;
	min-width: 1.125rem;
	height: 1.125rem;
	border-radius: 9999px;
	background-color: var(--nv-primary);
	padding-inline: 0.25rem;
	font-size: 0.6875rem;
	line-height: 1;
	font-weight: 600;
	color: var(--nv-primary-foreground);
}

/* ---- Add to cart, beside Checkout -------------------------------------- */

.nv-purchase__add {
	width: 100%;
	min-height: 2.875rem;
	border-radius: 1rem;
	font-size: 0.875rem;
}

/* Summary lines: name and plan on the left, the line total on the right. */
.nv-co__line dt {
	display: grid;
	gap: 0.125rem;
	min-width: 0;
}

.nv-co__line-name {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--nv-foreground);
}

.nv-co__line-meta {
	font-size: 0.75rem;
	color: color-mix(in srgb, var(--nv-foreground) 55%, transparent);
}

.nv-co__lines:empty {
	display: none;
}

/* ==========================================================================
   Phone typography
   --------------------------------------------------------------------------
   The reference steps its headings down below 640px; ours were carrying the
   desktop sizes all the way to a 375px screen, which is what made the whole
   page run some 680px taller than it should. Tracking is already set in em,
   so it follows the size on its own.
   ========================================================================== */

@media (max-width: 639px) {
	.nv-hero--ref .nv-hero__title {
		font-size: 2.25rem;
		line-height: 2.5rem;
	}

	.nv-heading__title {
		font-size: 1.5rem;
		line-height: 2rem;
	}

	/* The collapsed live-demo card reads as body text, not as a heading. */
	.nv-demo-start__title {
		font-size: 0.875rem;
		line-height: 1.25rem;
		font-weight: 600;
	}

	.nv-demo-start__text {
		line-height: 1.75rem;
	}

	.nv-logo__sub {
		font-size: 0.75rem;
		line-height: 1rem;
	}
}

/*
 * Every card on the home page carries the same 20px inset on the reference —
 * ours ran to 24 and 26, which added roughly 110px to the phone layout across
 * the five feature cards alone.
 */
.nv-keyfeat__item,
.nv-about__card,
.nv-category {
	padding: 1.25rem;
}

/*
 * Card icons: a 40px rounded square, not a 44px circle, and the same 12px
 * rhythm the reference uses between the icon, the title and the line below.
 */
.nv-keyfeat__icon,
.nv-about__card-icon {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 1rem;
}

.nv-keyfeat__head,
.nv-about__card-head {
	gap: 0.75rem;
}

.nv-keyfeat__text,
.nv-about__card-text {
	margin-top: 0.75rem;
}

/* The hero's supporting line drops a step on a phone, as the reference does. */
@media (max-width: 639px) {
	.nv-hero--ref .nv-hero__text {
		font-size: 0.875rem;
	}

	.nv-hero--ref .nv-hero__actions {
		gap: 0.75rem;
	}

	.nv-hero--ref .nv-hero__stats {
		gap: 0.75rem;
	}
}

/* Hero stat cards: a 16px inset and the same 24px corner as every other card. */
.nv-hero--ref .nv-hero__stat {
	padding: 1rem;
	border-radius: 1.5rem;
}

/* A little air between "Choose a duration" and the plans below it. */
.nv-purchase__block-text {
	margin-bottom: 0.875rem;
}

/* ==========================================================================
   Live demo — dressed as a game overlay
   --------------------------------------------------------------------------
   The reference draws this panel as a piece of software, not as another card
   on the page: a thin outer bezel around a second frame, near-square corners,
   a plain UI face, flat greys and a cyan accent. Every value below was read
   off it. The palette comes from Settings → Demo, so it stays editable.

   A fixed height on the frame keeps it from jumping as tabs are switched.
   ========================================================================== */

.nv-pdemo {
	font-family: var(--nv-demo-font);
	color: var(--nv-demo-text);
	background-color: var(--nv-demo-bezel);
	border: 1px solid var(--nv-demo-edge);
	border-radius: 2px;
	padding: 3px;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

.nv-pdemo__inner {
	position: relative;
	display: flex;
	min-height: 34.25rem;
	background-color: var(--nv-demo-bg);
	border: 1px solid var(--nv-demo-border);
	border-radius: 1px;
	overflow: hidden;
}

/* The hairline of colour along the top edge. */
.nv-pdemo__inner::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 2px;
	background-color: color-mix(in srgb, var(--nv-demo-accent) 67%, transparent);
}

/* ---- Rail --------------------------------------------------------------- */

.nv-pdemo__rail {
	flex: 0 0 4.75rem;
	width: 4.75rem;
	border-radius: 0;
	border-right: 1px solid color-mix(in srgb, var(--nv-demo-border) 90%, white);
	background-color: var(--nv-demo-rail);
}

.nv-pdemo__rail-tab {
	border-radius: 0;
	padding: 1rem 0.75rem;
	font-family: var(--nv-demo-font);
	font-size: 0.875rem;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	color: var(--nv-demo-dim);
	background-color: color-mix(in srgb, var(--nv-demo-rail) 92%, black);
	border-bottom: 1px solid color-mix(in srgb, var(--nv-demo-border) 90%, white);
}

.nv-pdemo__rail-tab.is-active {
	background-color: color-mix(in srgb, var(--nv-demo-bg) 92%, black);
	color: color-mix(in srgb, var(--nv-demo-text) 92%, white);
	font-weight: 600;
}

/* The reference marks the active tab by its fill alone. */
.nv-pdemo__rail-tab.is-active::after,
.nv-pdemo__tab.is-active::after {
	display: none;
}

.nv-pdemo__stage {
	flex: 1 1 auto;
	min-width: 0;
	padding: 1rem;
}

/* ---- Header strip ------------------------------------------------------- */

.nv-pdemo__head {
	border: 1px solid color-mix(in srgb, var(--nv-demo-border) 85%, white);
	border-radius: 0;
	background-color: color-mix(in srgb, var(--nv-demo-bg) 94%, white);
	padding: 0.75rem 1rem;
	margin-bottom: 1rem;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

.nv-pdemo__name {
	font-family: var(--nv-demo-font);
	font-size: 1.125rem;
	line-height: 1.75rem;
	font-weight: 400;
	letter-spacing: normal;
	color: var(--nv-demo-title);
}

.nv-pdemo__subs {
	border-color: color-mix(in srgb, var(--nv-demo-border) 70%, transparent);
}

.nv-pdemo__sub {
	border-radius: 0;
	font-family: var(--nv-demo-font);
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	color: color-mix(in srgb, var(--nv-demo-dim) 94%, black);
}

.nv-pdemo__sub:hover,
.nv-pdemo__sub.is-active {
	background-color: transparent;
	color: color-mix(in srgb, var(--nv-demo-text) 96%, white);
}

/* ---- Boxes -------------------------------------------------------------- */

.nv-pdemo__box {
	border: 1px solid color-mix(in srgb, var(--nv-demo-border) 80%, white);
	border-radius: 0;
	background-color: var(--nv-demo-box);
	padding: 0.75rem 1rem;
	min-height: 26.25rem;
}

.nv-pdemo__box-title {
	font-family: var(--nv-demo-font);
	font-size: 0.9375rem;
	line-height: 1.5rem;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	color: color-mix(in srgb, var(--nv-demo-text) 94%, white);
	margin-bottom: 0.75rem;
}

/* ---- Rows --------------------------------------------------------------- */

.nv-pdemo__row {
	border-color: color-mix(in srgb, var(--nv-demo-border) 60%, transparent);
}

.nv-pdemo__row-label,
.nv-pdemo__check span,
.nv-pdemo__text,
.nv-pdemo__wide,
.nv-pdemo__empty {
	font-family: var(--nv-demo-font);
	font-size: 0.9375rem;
	color: var(--nv-demo-text);
}

.nv-pdemo__key {
	font-family: var(--nv-demo-font);
	font-size: 0.8125rem;
	color: color-mix(in srgb, var(--nv-demo-dim) 70%, white);
}

/*
 * A hollow square with a small filled centre when ticked — the reference
 * never fills the whole box, which is what made ours read as a website
 * checkbox rather than a menu one.
 */
.nv-pdemo__check input {
	appearance: none;
	-webkit-appearance: none;
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 0;
	border: 1px solid color-mix(in srgb, var(--nv-demo-border) 120%, white);
	background-color: color-mix(in srgb, var(--nv-demo-bezel) 60%, black);
	display: grid;
	place-items: center;
	accent-color: auto;
}

.nv-pdemo__check input:checked {
	border-color: var(--nv-demo-accent);
	background-color: color-mix(in srgb, var(--nv-demo-bezel) 60%, black);
}

.nv-pdemo__check input:checked::after {
	content: "";
	width: 0.375rem;
	height: 0.375rem;
	background-color: var(--nv-demo-accent);
}

/* ---- Dropdown ----------------------------------------------------------- */

.nv-pdemo__select {
	border-radius: 2px;
	border-color: color-mix(in srgb, var(--nv-demo-border) 110%, white);
	background-color: color-mix(in srgb, var(--nv-demo-box) 130%, white);
	font-family: var(--nv-demo-font);
	font-size: 0.875rem;
	padding: 0.3125rem 0.5rem;
	color: var(--nv-demo-text);
}

.nv-pdemo__select svg {
	width: 0.75rem;
	height: 0.75rem;
	color: var(--nv-demo-dim);
}

/* ---- Slider ------------------------------------------------------------- */

.nv-pdemo__slider {
	height: 4px;
	border: 1px solid color-mix(in srgb, var(--nv-demo-border) 80%, white);
	border-radius: 0;
	accent-color: auto;
	/* Cyan up to the handle, flat grey after it. */
	background:
		linear-gradient(
			to right,
			var(--nv-demo-accent) 0 var(--nv-fill, 50%),
			color-mix(in srgb, var(--nv-demo-bg) 130%, white) var(--nv-fill, 50%) 100%
		);
}

.nv-pdemo__slider::-webkit-slider-thumb {
	width: 0.625rem;
	height: 0.625rem;
	border-radius: 0;
	border: 0;
	background-color: var(--nv-demo-accent);
	box-shadow: none;
}

.nv-pdemo__slider::-moz-range-thumb {
	width: 0.625rem;
	height: 0.625rem;
	border-radius: 0;
	border: 0;
	background-color: var(--nv-demo-accent);
	box-shadow: none;
}

.nv-pdemo__row-value {
	font-family: var(--nv-demo-font);
	font-size: 0.8125rem;
	color: color-mix(in srgb, var(--nv-demo-text) 80%, transparent);
}

/* ---- Chips -------------------------------------------------------------- */

.nv-pdemo__chip {
	border-radius: 2px;
	border-color: color-mix(in srgb, var(--nv-demo-border) 110%, white);
	background-color: color-mix(in srgb, var(--nv-demo-bezel) 70%, black);
	font-family: var(--nv-demo-font);
	font-size: 0.8125rem;
	color: var(--nv-demo-text);
}

@media (max-width: 767px) {
	.nv-pdemo__inner {
		min-height: 0;
	}

	.nv-pdemo__box {
		min-height: 0;
	}
}

/*
 * The bezel has a single child now, so it stops being the flex row itself —
 * that job moved to the inner frame, which must fill it.
 */
.nv-pdemo {
	display: block;
}

/* The reference gives the demo two thirds of the row, with a 24px gutter. */
@media (min-width: 1024px) {
	.nv-product {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
		gap: 1.5rem;
	}
}

/* ==========================================================================
   Product page — the smaller gaps from the audit
   ========================================================================== */

.nv-purchase__title {
	font-size: 2.25rem;
	line-height: 2.5rem;
	font-weight: 600;
	letter-spacing: normal;
}

.nv-purchase__text {
	line-height: 1.75rem;
	color: color-mix(in srgb, var(--nv-foreground) 70%, transparent);
}

/* The badge beside the status glows faintly, as it does on the reference. */
.nv-purchase__badges .nv-chip-sm--accent {
	color: color-mix(in srgb, var(--nv-primary-glow) 22%, var(--nv-foreground));
	box-shadow: 0 0 18px rgba(var(--nv-primary-rgb), 0.35);
}

.nv-purchase__badges .nv-status {
	font-size: 0.75rem;
	padding: 0.25rem 0.75rem;
	border-color: color-mix(in srgb, var(--nv-success) 70%, transparent);
}

/* ==========================================================================
   Live demo on a phone
   --------------------------------------------------------------------------
   The rail turns into a row of tabs across the top of the frame, exactly as
   the reference does — a 76px column down the side would leave the panel
   about 270px wide, which is not enough for a two-column menu.
   ========================================================================== */

@media (max-width: 767px) {
	.nv-pdemo__inner {
		flex-direction: column;
		min-height: 0;
	}

	.nv-pdemo__rail {
		flex: 0 0 auto;
		width: 100%;
		flex-direction: row;
		overflow-x: auto;
		scrollbar-width: none;
		border-right: 0;
		border-bottom: 1px solid color-mix(in srgb, var(--nv-demo-border) 90%, white);
	}

	.nv-pdemo__rail::-webkit-scrollbar {
		display: none;
	}

	.nv-pdemo__rail-tab {
		flex: 1 0 auto;
		border-bottom: 0;
		border-right: 1px solid color-mix(in srgb, var(--nv-demo-border) 90%, white);
		padding: 0.75rem 1rem;
		white-space: nowrap;
	}

	.nv-pdemo__rail-tab:last-child {
		border-right: 0;
	}

	.nv-pdemo__stage {
		padding: 0.75rem;
	}

	/* One column of boxes, each only as tall as what it holds. */
	.nv-pdemo__body {
		grid-template-columns: minmax(0, 1fr);
	}

	.nv-pdemo__box {
		min-height: 0;
	}

	.nv-pdemo__head {
		padding: 0.75rem;
		margin-bottom: 0.75rem;
	}
}

/* ==========================================================================
   Homepage hero, measured against the reference
   --------------------------------------------------------------------------
   Every value below was read off the reference with getComputedStyle at
   1440px and compared with ours. Only the numbers that actually differed are
   restated here; the hero grid (1fr 2fr), the 40px column gap, the 64px block
   padding and the headline were already identical and are left alone.

   The header background is the one deliberate departure: the reference tints
   it and blurs what passes underneath, but that was reported as a bug on this
   site, so the bar stays opaque. Only its bottom hairline is restored — ours
   was drawn in a transparent colour, so the line never appeared at all.
   ========================================================================== */

.nv-header,
.nv-header.is-scrolled {
	border-bottom-color: rgba(255, 255, 255, 0.1);
}

/* ---- Badge ------------------------------------------------------------- */

/*
 * Ours sat 6px taller and 7px wider than the reference badge, in flat white
 * on a slightly weaker purple. The glow is part of it too.
 */
.nv-hero--ref .nv-pill {
	padding: 0.25rem 0.75rem;
	background-color: rgba(var(--nv-primary-rgb), 0.18);
	border-color: rgba(var(--nv-primary-rgb), 0.45);
	color: #efe7ff;
	box-shadow: 0 0 18px rgba(var(--nv-primary-rgb), 0.35);
}

/* ---- Copy column ------------------------------------------------------- */

.nv-hero--ref .nv-hero__text {
	margin-top: 1rem;
	max-width: 36rem;
}

.nv-hero--ref .nv-hero__actions {
	margin-top: 1.5rem;
	gap: 0.75rem;
}

/* The reference sets the Discord button in purple, not in the card navy. */
.nv-hero__actions .nv-btn--ghost {
	border-color: rgba(var(--nv-primary-rgb), 0.35);
	background-color: rgba(var(--nv-primary-rgb), 0.08);
	color: rgba(255, 255, 255, 0.9);
}

.nv-hero__actions .nv-btn--ghost:hover {
	border-color: rgba(var(--nv-primary-rgb), 0.55);
	background-color: rgba(var(--nv-primary-rgb), 0.14);
}

.nv-hero__actions .nv-btn--light {
	color: #000000;
}

/* ---- Stat cards -------------------------------------------------------- */

/*
 * These read as dark navy slabs against the reference's frosted glass. The
 * surface is plain white at 3.5%, the border white at 10%, and there is no
 * gap between the figure and its label — which is where our extra 5px of
 * card height was coming from.
 */
.nv-hero--ref .nv-hero__stats {
	margin-top: 2rem;
	gap: 0.75rem;
	max-width: 36rem;
}

.nv-hero--ref .nv-hero__stat {
	gap: 0;
	padding: 1rem;
	border-color: rgba(255, 255, 255, 0.1);
	background-color: rgba(255, 255, 255, 0.035);
}

.nv-hero--ref .nv-hero__stat-label {
	color: rgba(255, 255, 255, 0.6);
}

/* ---- The label above the demo ------------------------------------------ */

.nv-hero--ref .nv-hero__panel-label {
	margin-bottom: 1rem;
	color: rgba(255, 255, 255, 0.5);
}

/* ==========================================================================
   Hero demo panel
   --------------------------------------------------------------------------
   The reference draws this as one flat card split into two columns: a fixed
   260px sidebar with its own darker surface and a divider down its right
   edge, and no padding on the card itself. Ours was a padded card holding a
   second floating rounded card, which is what made it read as a different
   component. The card and its two halves are rebuilt below.
   ========================================================================== */

.nv-hero--ref .nv-hero__panel--demo {
	padding: 0;
	border-color: rgba(255, 255, 255, 0.1);
	border-radius: 1rem;
	background-color: #0e0f14;
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

/*
 * On a phone the sidebar lies down into a scrolling strip of tabs across the
 * top of the same card, keeping its darker surface. The card carries no
 * padding of its own at any width — the strip and the panel bring their own,
 * which is where 24px of our extra mobile height was going.
 */
.nv-demo {
	gap: 0;
}

.nv-demo__tabs {
	gap: 0.5rem;
	padding: 0.75rem;
	border-radius: 0;
	background-color: #0b0c10;
}

/* Wide enough that the second tab peeks in and invites the scroll. */
.nv-demo__tab {
	min-width: 11.875rem;
}

.nv-demo__panels {
	padding: 1rem;
}

.nv-demo__value {
	min-width: 3.5rem;
	color: rgba(255, 255, 255, 0.6);
}

/* The reference sets the two lines solid against each other, 20px + 16px. */
.nv-demo__row-text {
	gap: 0;
}

.nv-demo__panel-title {
	color: rgba(255, 255, 255, 0.75);
	margin-bottom: 0.75rem;
}

/* ---- Rows -------------------------------------------------------------- */

/*
 * Capped at 420px on a phone and 520px from the tablet breakpoint up. A slim
 * scrollbar when it does overflow, as the reference has — the default one is
 * a wide grey slab on Windows that cuts into the panel.
 */
.nv-demo__rows {
	gap: 0.75rem;
	max-height: 26.25rem;
	overflow-y: auto;
	padding-right: 0.25rem;
	scrollbar-width: thin;
}

.nv-demo__row {
	gap: 1.5rem;
	border-radius: 0.5rem;
	padding: 0.75rem 1rem;
	background-color: rgba(20, 22, 33, 0.8);
}

.nv-demo__row-label {
	color: rgba(255, 255, 255, 0.7);
}

.nv-demo__row-sub {
	color: rgba(255, 255, 255, 0.4);
}

/*
 * 40px square, and it is the tick box that sets the 64px row height on the
 * reference — ours was 30px, which is why every row came out 4px short.
 */
.nv-demo__check {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 0.375rem;
	border-color: rgba(255, 255, 255, 0.1);
	background-color: #0f1016;
}

.nv-demo__check:hover {
	border-color: rgba(255, 255, 255, 0.25);
}

.nv-demo__check:checked {
	border-color: rgba(255, 255, 255, 0.1);
}

/* ---- Tabs -------------------------------------------------------------- */

.nv-demo__tab {
	border: 0;
	border-radius: 0.5rem;
	padding: 0.75rem;
}

.nv-demo__tab.is-active {
	border: 0;
	background-color: #141522;
}

/* 4px between the two lines is what makes the reference tab 64px, not 61px. */
.nv-demo__tab-text {
	gap: 0.25rem;
}

.nv-demo__tab-title {
	color: rgba(255, 255, 255, 0.7);
}

.nv-demo__tab.is-active .nv-demo__tab-title {
	color: rgba(255, 255, 255, 0.8);
}

.nv-demo__tab-sub {
	color: rgba(255, 255, 255, 0.4);
}

/* The reference dims a locked tab further and shows it cannot be opened. */
.nv-demo__tab.is-locked {
	opacity: 0.4;
	cursor: not-allowed;
}

/* ---- The note under the panel ------------------------------------------ */

.nv-hero--ref .nv-hero__panel-note {
	border-color: rgba(var(--nv-primary-rgb), 0.18);
	border-radius: 1.5rem;
	background-color: rgba(15, 16, 36, 0.78);
	padding: 1.25rem;
}

/*
 * The breakpoint goes last: a media query carries no specificity of its own,
 * so placed above the base rules it would simply lose to them.
 */
@media (min-width: 640px) {
	.nv-demo {
		grid-template-columns: 16.25rem minmax(0, 1fr);
	}

	.nv-demo__tabs {
		gap: 0.75rem;
		border-right: 1px solid rgba(255, 255, 255, 0.1);
		align-content: start;
	}

	.nv-demo__panels {
		padding: 1.25rem;
	}

	.nv-demo__rows {
		max-height: 32.5rem;
	}
}

/*
 * Below the two-column breakpoint the reference drops the bar onto its own
 * line under the label instead of squeezing it in beside it. Ours was left
 * inline, which on a 390px phone gave the bar 81px to work with against the
 * reference's 220px. From 640px up both sites put it back on one line.
 *
 * Turning the row into a column turns the slider's flex-basis into a height,
 * so it has to be released here as well.
 */
@media (max-width: 639px) {
	.nv-demo__row--slider {
		flex-direction: column;
		align-items: stretch;
		gap: 0.75rem;
	}

	.nv-demo__row--slider .nv-demo__slider {
		flex: 0 0 auto;
		max-width: none;
	}
}

/* ==========================================================================
   Product page with nothing to show beside the price
   --------------------------------------------------------------------------
   The account products carry no demo, no panel picture and no gallery, so the
   left column of the two-up grid comes out empty and the purchase panel sits
   alone against 795px of nothing. There the page runs as one centred column,
   held to a comfortable reading width rather than stretched across the
   container. Below the two-column breakpoint nothing changes — it was already
   a single column there.
   ========================================================================== */

@media (min-width: 1024px) {
	.nv-product--solo {
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
	}

	.nv-product--solo .nv-product__main {
		display: none;
	}

	.nv-product--solo .nv-product__aside {
		width: 100%;
		max-width: 34rem;
	}
}

/* ==========================================================================
   Status cards open the product
   --------------------------------------------------------------------------
   The reference makes each status entry a button covering the whole card, so
   a click anywhere on it opens that product. Ours had a link on the product
   name alone — 3% of the card — and no pointer cursor, so the card did not
   look clickable at all and most clicks landed on nothing.

   Rather than wrap everything in an anchor, the existing link is stretched
   across the card with a pseudo-element. The markup and the heading stay as
   they are, the keyboard reaches the link once rather than twice, and the
   "Status since" tooltip is lifted back above the overlay so it still shows.
   ========================================================================== */

.nv-status-card {
	position: relative;
	cursor: pointer;
}

.nv-status-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}

/* The whole card takes the focus ring, not just the few words of the name. */
.nv-status-card:focus-within {
	border-color: rgba(var(--nv-primary-rgb), 0.55);
}

.nv-status-card__link:focus-visible {
	outline: none;
}

.nv-status-card:focus-within::before {
	content: "";
	position: absolute;
	inset: -3px;
	z-index: 2;
	border-radius: inherit;
	outline: 2px solid var(--nv-primary-glow);
	outline-offset: 0;
	pointer-events: none;
}

/*
 * Nothing is raised above the overlay: the client asked for the whole card,
 * and a raised child is a dead patch in the middle of it. The cost is the
 * timestamp's hover tooltip, which cannot fire through the overlay — the
 * exact date can go inline instead if it is wanted back.
 */

/* The reference lifts the card slightly under the pointer. */
.nv-status-card:hover {
	border-color: rgba(197, 151, 241, 0.32);
}

/* ---- The exact moment, on the icon ------------------------------------- */

/*
 * Built to match the reference: a small dark bubble above the info icon,
 * shown on hover, and nothing else on the card behaves like this. Lifting
 * the icon above the card's click layer is what lets it be hovered at all,
 * and is also why it is the one spot that does not open the product — the
 * reference behaves the same way.
 */
.nv-status-card__info {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	cursor: pointer;
}

.nv-status-card__tip {
	position: absolute;
	right: 0;
	bottom: 100%;
	z-index: 20;
	margin-bottom: 0.5rem;
	transform: translateX(0.75rem);
	width: max-content;
	max-width: calc(100vw - 2rem);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 0.75rem;
	background-color: rgba(0, 0, 0, 0.9);
	padding: 0.375rem 1rem;
	font-size: 0.6875rem;
	line-height: 1.45;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.8);
	white-space: nowrap;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
	opacity: 0;
	pointer-events: none;
	transition: opacity 150ms ease-out;
}

.nv-status-card__info:hover .nv-status-card__tip,
.nv-status-card__info:focus-visible .nv-status-card__tip {
	opacity: 1;
}

/* The bubble hangs outside the card, so nothing along the way may clip it. */
.nv-status-card,
.nv-status-card__since,
.nv-status-card__ago {
	overflow: visible;
}

/* ==========================================================================
   Review avatars
   --------------------------------------------------------------------------
   Reviewers who gave a name get their own picture. The ones who did not are
   shown the same placeholder the reference uses — a 40px disc with a purple
   gradient inside a faint white ring, and a plain user glyph at 70% white.
   Measured off the reference rather than approximated.
   ========================================================================== */

.nv-review__avatar {
	width: 2.5rem;
	height: 2.5rem;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background-image: linear-gradient(to bottom right, #15111f, #2a1a3f, #241734);
	background-color: transparent;
	color: rgba(255, 255, 255, 0.7);
}

.nv-review__avatar svg {
	width: 1rem;
	height: 1rem;
}

/* A supplied picture fills the disc, so the gradient never shows through. */
.nv-review__avatar img {
	border-radius: inherit;
}

/* ==========================================================================
   Product badges: category, status, extra tag
   --------------------------------------------------------------------------
   Read off the reference chip by chip. Ours came out 4px taller with a
   heavier surface on the category pill and green lettering on the status
   pill, where the reference keeps the fill green and the lettering almost
   white. Sizes, radius, padding and the purple glow already matched.

   The greens still come from --nv-success, so the colour a client picks for
   a status in the settings is what these follow; only the weight of the fill
   and the lettering are restated.
   ========================================================================== */

.nv-purchase__badges .nv-chip-sm,
.nv-purchase__badges .nv-status {
	gap: 0.5rem;
	line-height: 1rem;
	font-weight: 600;
}

.nv-purchase__badges svg {
	width: 0.875rem;
	height: 0.875rem;
}

/* The category pill is plain frosted glass, not a navy slab. */
.nv-purchase__badges .nv-chip-sm {
	border-color: rgba(255, 255, 255, 0.1);
	background-color: rgba(255, 255, 255, 0.05);
	color: rgba(255, 255, 255, 0.7);
}

.nv-purchase__badges .nv-chip-sm:hover {
	border-color: rgba(255, 255, 255, 0.2);
	background-color: rgba(255, 255, 255, 0.09);
	color: #ffffff;
}

/* Green fill, near-white lettering — including the shield. */
.nv-purchase__badges .nv-status--available {
	background-color: rgba(var(--nv-success-rgb), 0.2);
	color: color-mix(in srgb, var(--nv-success) 10%, white);
}

.nv-purchase__badges .nv-status svg {
	color: currentColor;
}

/* The extra tag keeps its glow but sits a shade stronger. */
.nv-purchase__badges .nv-chip-sm--accent {
	border-color: rgba(var(--nv-primary-rgb), 0.45);
	background-color: rgba(var(--nv-primary-rgb), 0.18);
	color: #efe7ff;
}

.nv-purchase__badges .nv-chip-sm--accent:hover {
	border-color: rgba(var(--nv-primary-rgb), 0.45);
	background-color: rgba(var(--nv-primary-rgb), 0.18);
	color: #efe7ff;
}

/* The reference tints the tag's icon lighter than its text. */
.nv-purchase__badges .nv-chip-sm--accent svg {
	color: var(--nv-primary-glow);
}

/*
 * The reference tightens the band above and below a policy card on a phone —
 * 32px there against 48px from the shared section rule. Placed at the end of
 * the file because a media query carries no specificity of its own.
 */
@media (max-width: 639px) {
	.nv-legal {
		padding-block: 2rem;
	}
}

/*
 * Two more breathing spaces the reference gets from blank paragraphs in its
 * editor, and which the client's own draft has as blank lines too: one under
 * the title before the effective date, and one after a list before the line
 * that closes the section. Given as margins so the editor stays free of
 * empty blocks that authors trip over.
 */
.nv-legal__body > p:first-child {
	margin-top: 3.25rem;
}

.nv-legal__body ul + p,
.nv-legal__body ol + p {
	margin-top: 3rem;
}

/*
 * The demo panel's inner glow
 * --------------------------------------------------------------------------
 * The reference lays a transparent sheet over the whole card carrying two
 * soft purple pools — one over the top of the rail, one over the top right of
 * the settings panel. On a flat #0e0f14 card they lift that corner to about
 * #16151d, which is the difference you can see against ours. Drawn here as a
 * pseudo-element so no markup changes, and from the theme's own two purples
 * so it follows whatever colours are set.
 */
.nv-hero--ref .nv-hero__panel--demo {
	position: relative;
}

.nv-hero--ref .nv-hero__panel--demo::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		radial-gradient(circle at 20% 15%, rgba(var(--nv-primary-rgb), 0.14), transparent 45%),
		radial-gradient(circle at 80% 30%, rgba(var(--nv-primary-glow-rgb), 0.1), transparent 45%);
}

/* The rail and the panel sit on top of that sheet, as they do on the reference. */
.nv-hero--ref .nv-hero__panel--demo .nv-demo {
	position: relative;
}

/* ==========================================================================
   Homepage demo, dressed as the product demo is
   --------------------------------------------------------------------------
   The client asked for the panel on the homepage to look like the one on the
   Elysian page: a piece of software rather than another card on the site —
   thin outer bezel around a second frame, near-square corners, a plain UI
   face, flat greys and a cyan accent.

   It reads the same --nv-demo-* palette the product panel does, set under
   Settings → Demo, so both stay in step and both stay editable. The markup is
   untouched; this is the same component underneath, wearing the other skin.

   This deliberately replaces the frosted-card treatment that matched the
   reference homepage. Both looks are measured; this is the one asked for.
   ========================================================================== */

.nv-hero--ref .nv-hero__panel--demo {
	font-family: var(--nv-demo-font);
	color: var(--nv-demo-text);
	background-color: var(--nv-demo-bezel);
	border: 1px solid var(--nv-demo-edge);
	border-radius: 2px;
	padding: 3px;
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

/* No inner glow on this skin — the product panel has none. */
.nv-hero--ref .nv-hero__panel--demo::before {
	content: none;
}

/* The grid becomes the second frame inside the bezel. */
.nv-hero--ref .nv-demo {
	position: relative;
	overflow: hidden;
	background-color: var(--nv-demo-bg);
	border: 1px solid var(--nv-demo-border);
	border-radius: 1px;
}

/* The hairline of colour along the top edge. */
.nv-hero--ref .nv-demo::after {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 2px;
	z-index: 2;
	background-color: color-mix(in srgb, var(--nv-demo-accent) 67%, transparent);
	pointer-events: none;
}

/* ---- Rail --------------------------------------------------------------- */

.nv-hero--ref .nv-demo__tabs {
	gap: 0;
	padding: 0;
	border-radius: 0;
	border-right: 1px solid color-mix(in srgb, var(--nv-demo-border) 90%, white);
	background-color: var(--nv-demo-rail);
}

.nv-hero--ref .nv-demo__tab {
	border: 0;
	border-bottom: 1px solid color-mix(in srgb, var(--nv-demo-border) 90%, white);
	border-radius: 0;
	padding: 0.875rem 0.75rem;
	background-color: color-mix(in srgb, var(--nv-demo-rail) 92%, black);
}

.nv-hero--ref .nv-demo__tab.is-active {
	background-color: color-mix(in srgb, var(--nv-demo-bg) 92%, black);
}

/* The product panel names its sections in words alone. */
.nv-hero--ref .nv-demo__tab-icon {
	display: none;
}

.nv-hero--ref .nv-demo__tab-title {
	font-family: var(--nv-demo-font);
	font-size: 0.875rem;
	font-weight: 400;
	letter-spacing: normal;
	color: var(--nv-demo-dim);
}

.nv-hero--ref .nv-demo__tab.is-active .nv-demo__tab-title {
	font-weight: 600;
	color: color-mix(in srgb, var(--nv-demo-text) 92%, white);
}

.nv-hero--ref .nv-demo__tab-sub {
	font-family: var(--nv-demo-font);
	font-size: 0.75rem;
	font-weight: 400;
	color: color-mix(in srgb, var(--nv-demo-dim) 80%, black);
}

.nv-hero--ref .nv-demo__tab.is-locked {
	opacity: 0.55;
	cursor: not-allowed;
}

/* ---- Stage -------------------------------------------------------------- */

.nv-hero--ref .nv-demo__panels {
	padding: 1rem;
}

/* The heading becomes the head strip the product panel opens with. */
.nv-hero--ref .nv-demo__panel-title {
	border: 1px solid color-mix(in srgb, var(--nv-demo-border) 85%, white);
	border-radius: 0;
	background-color: color-mix(in srgb, var(--nv-demo-bg) 94%, white);
	padding: 0.75rem 1rem;
	margin-bottom: 1rem;
	font-family: var(--nv-demo-font);
	font-size: 1.125rem;
	line-height: 1.75rem;
	font-weight: 400;
	letter-spacing: normal;
	color: var(--nv-demo-title);
}

/* ---- The settings box --------------------------------------------------- */

/* One bordered box holding plain rows, rather than a stack of slabs. */
.nv-hero--ref .nv-demo__rows {
	gap: 0;
	padding: 0.75rem 1rem;
	border: 1px solid color-mix(in srgb, var(--nv-demo-border) 80%, white);
	border-radius: 0;
	background-color: var(--nv-demo-box);
	scrollbar-width: thin;
}

.nv-hero--ref .nv-demo__row {
	gap: 1rem;
	border-radius: 0;
	padding: 0.5rem 0;
	background-color: transparent;
	border-bottom: 1px solid color-mix(in srgb, var(--nv-demo-border) 60%, transparent);
}

.nv-hero--ref .nv-demo__row:last-child {
	border-bottom: 0;
}

.nv-hero--ref .nv-demo__row-label {
	font-family: var(--nv-demo-font);
	font-size: 0.9375rem;
	font-weight: 400;
	color: var(--nv-demo-text);
}

.nv-hero--ref .nv-demo__row-sub {
	font-family: var(--nv-demo-font);
	font-size: 0.8125rem;
	color: color-mix(in srgb, var(--nv-demo-dim) 70%, white);
}

/* ---- Tick box ----------------------------------------------------------- */

/*
 * A hollow square with a small filled centre when ticked — never a filled
 * box with a white tick, which is what made it read as a website control.
 */
.nv-hero--ref .nv-demo__check {
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 0;
	border: 1px solid color-mix(in srgb, var(--nv-demo-border) 120%, white);
	background-color: color-mix(in srgb, var(--nv-demo-bezel) 60%, black);
}

.nv-hero--ref .nv-demo__check:hover {
	border-color: color-mix(in srgb, var(--nv-demo-accent) 60%, white);
}

.nv-hero--ref .nv-demo__check:checked {
	border-color: var(--nv-demo-accent);
	background-color: color-mix(in srgb, var(--nv-demo-bezel) 60%, black);
}

.nv-hero--ref .nv-demo__check::after {
	width: 0.375rem;
	height: 0.375rem;
	background-color: var(--nv-demo-accent);
	-webkit-mask: none;
	mask: none;
	transform: none;
}

/* ---- Slider ------------------------------------------------------------- */

.nv-hero--ref .nv-demo__range {
	appearance: none;
	-webkit-appearance: none;
	height: 4px;
	border: 1px solid color-mix(in srgb, var(--nv-demo-border) 80%, white);
	border-radius: 0;
	accent-color: auto;
	background-color: color-mix(in srgb, var(--nv-demo-bg) 130%, white);
	background-image: linear-gradient(
		to right,
		var(--nv-demo-accent) 0,
		var(--nv-demo-accent) var(--nv-range-fill, 50%),
		transparent var(--nv-range-fill, 50%)
	);
}

.nv-hero--ref .nv-demo__range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 0.625rem;
	height: 0.625rem;
	border: 0;
	border-radius: 0;
	background-color: var(--nv-demo-accent);
	box-shadow: none;
}

.nv-hero--ref .nv-demo__range::-moz-range-thumb {
	width: 0.625rem;
	height: 0.625rem;
	border: 0;
	border-radius: 0;
	background-color: var(--nv-demo-accent);
}

.nv-hero--ref .nv-demo__value {
	font-family: var(--nv-demo-font);
	font-size: 0.8125rem;
	font-weight: 400;
	color: color-mix(in srgb, var(--nv-demo-text) 80%, transparent);
}

/* ---- Label above the panel ---------------------------------------------- */

/*
 * Breakpoints last: a media query carries no specificity of its own, so above
 * the base rules it would simply lose to them.
 */
@media (min-width: 640px) {
	.nv-hero--ref .nv-demo {
		grid-template-columns: 11.5rem minmax(0, 1fr);
	}

	.nv-hero--ref .nv-demo__tabs {
		align-content: start;
	}
}

/* ========================================================================== 
   Checkout: hosted payment-method preview
   --------------------------------------------------------------------------
   These cards mirror the selectable payment rows while remaining a preview.
   The buyer makes the real selection on SellHub, where the active methods are
   authoritative.
   ========================================================================== */

.nv-co__accepted {
	margin-top: 1.25rem;
}

.nv-co__methods--preview .nv-co__method--preview {
	min-height: 4.5rem;
	cursor: default;
}

.nv-co__methods--preview .nv-co__method--preview:hover {
	border-color: var(--nv-border);
}

/* ---------------------------------------------------------------------------
   Product demo — slider end marks (17 Aug 2026)

   Read off the reference: each rail is flanked by a 12px dash in #676c74 with
   an 8px gap, and the rail itself no longer carries the top margin that used
   to space it from the label row — that spacing now lives on the wrapper, so
   the dashes line up with the middle of the rail instead of the label above.

   The wrapper is __track, not __rail: __rail is already the demo's group-tab
   column, and reusing it restyled that column into this row.
--------------------------------------------------------------------------- */

.nv-pdemo__track {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.25rem;
}

.nv-pdemo__tick {
	flex: none;
	font-size: 0.75rem;
	line-height: 1;
	color: #676c74;
}

/* Beats the (0,1,0) margin on the slider itself, which is now the wrapper's. */
.nv-pdemo__track .nv-pdemo__slider {
	margin: 0;
}

/* ---------------------------------------------------------------------------
   Product page — mobile header (17 Aug 2026)

   Two differences measured against the reference at 360px wide.

   The card was padded 24px where the reference pads 20px, leaving the inner
   column 278px — 1.8px short of the three badges, so "Public" dropped to a
   second line. The reference pads 20px at every width, not only this one, so
   the base padding changes rather than a breakpoint being bolted on top.

   The heading was pinned to 36px by an earlier desktop measurement. Being a
   base rule it also silently overrode the smaller mobile size set further up
   this file. The reference steps to 30px/36px below 640px and back to
   36px/40px from 640px up, and that breakpoint was read off it directly.
--------------------------------------------------------------------------- */

.nv-purchase {
	padding: 1.25rem;
}

@media (max-width: 639px) {
	.nv-purchase__title {
		font-size: 1.875rem;
		line-height: 2.25rem;
	}
}

/* ---------------------------------------------------------------------------
   Product cards — pills are desktop only (17 Aug 2026)

   The badge carries either the tag ("Public") or the stock count ("99+ In
   Stock"), and beside the category on a phone that row reads as clutter — the
   reference shows the category alone there. It stays on wider screens, where
   there is room for it, so this hides rather than removes it; the switch in
   Settings still turns it off everywhere.

   640px is the theme's own mobile edge, the same one the product heading and
   the rest of this file already step at.
--------------------------------------------------------------------------- */

@media (max-width: 639px) {
	.nv-product-card__meta .nv-badge,
	.nv-product-card__meta .nv-status {
		display: none;
	}

	/* Without a category left to show, the row would just be a blank gap. */
	.nv-product-card__meta:not(:has(.nv-product-card__cat)) {
		display: none;
	}
}