/**
 * NOVA ROSE — components.
 *
 * main.css holds the tokens and the shell; this file holds everything with a
 * shape. Nothing here introduces a new colour, type size or spacing value —
 * they all come from the token set, so changing the mood cannot leave a stray
 * pink behind in a corner nobody looked at.
 */

/* ==========================================================================
   Header
   ========================================================================== */

.nr-header {
	position: sticky;
	top: 0;
	z-index: 40;
	border-bottom: 1px solid transparent;
	transition: background-color var(--nr-d-ui) var(--nr-ease), border-color var(--nr-d-ui) var(--nr-ease);
}
.nr-header.is-stuck {
	background: rgba( 255, 250, 251, 0.92 );
	backdrop-filter: blur( 16px ) saturate( 140% );
	-webkit-backdrop-filter: blur( 16px ) saturate( 140% );
	border-bottom-color: var(--nr-n-200);
}

/* A thin announcement rail above the masthead — where a shop puts the one
   thing it needs every visitor to read. */
.nr-notice {
	background: var(--nr-rose-deep);
	color: #fff;
	font-size: var(--nr-t-sm);
	font-weight: 600;
	text-align: center;
	padding-block: var(--nr-s-2);
}
.nr-notice a { color: #fff; text-decoration: underline; text-underline-offset: 0.2em; }

.nr-header-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--nr-s-6);
	min-height: var(--nr-header-h);
	min-width: 0;
}

.nr-brand {
	display: inline-flex;
	align-items: center;
	gap: var(--nr-s-3);
	min-width: 0;
	color: var(--nr-ink);
	flex: 0 1 auto;
}
.nr-brand:hover { color: var(--nr-ink); }

.nr-brand-mark {
	width: 2.25rem;
	height: 2.25rem;
	flex: none;
	display: grid;
	place-items: center;
	border-radius: var(--nr-r-md);
	background: linear-gradient( 140deg, var(--nr-rose-soft), var(--nr-rose) );
	box-shadow: 0 6px 16px -8px rgba( var(--nr-rose-rgb), 0.9 );
	color: #fff;
}
.nr-brand-mark .nr-icon { width: 1.15rem; height: 1.15rem; }

.nr-brand-text { display: flex; flex-direction: column; min-width: 0; }
.nr-brand-name {
	font-family: var(--nr-font-display);
	font-size: var(--nr-t-md);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.nr-brand-sub {
	font-family: var(--nr-font-mono);
	font-size: 0.625rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--nr-ink-faint);
	white-space: nowrap;
}

.nr-nav { display: flex; align-items: center; gap: var(--nr-s-1); }
.nr-nav ul { display: flex; align-items: center; gap: var(--nr-s-1); flex-wrap: wrap; }
.nr-nav a {
	display: inline-block;
	padding: var(--nr-s-2) var(--nr-s-3);
	border-radius: var(--nr-r-pill);
	font-size: var(--nr-t-sm);
	font-weight: 600;
	color: var(--nr-ink-soft);
	white-space: nowrap;
	transition: color var(--nr-d-micro) var(--nr-ease), background-color var(--nr-d-micro) var(--nr-ease);
}
.nr-nav a:hover { color: var(--nr-rose-deep); background: var(--nr-rose-wash); }
.nr-nav .current-menu-item > a,
.nr-nav .current_page_item > a {
	color: var(--nr-rose-deep);
	background: var(--nr-rose-wash);
}

.nr-header-tools { display: flex; align-items: center; gap: var(--nr-s-2); flex: none; }

.nr-icon-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.375rem;
	height: 2.375rem;
	border-radius: var(--nr-r-pill);
	border: 1px solid var(--nr-n-200);
	background: var(--nr-surface);
	color: var(--nr-ink-soft);
	cursor: pointer;
	transition: border-color var(--nr-d-micro) var(--nr-ease), color var(--nr-d-micro) var(--nr-ease);
}
.nr-icon-btn:hover { border-color: var(--nr-rose); color: var(--nr-rose-deep); }
.nr-icon-btn .nr-icon { width: 1.1rem; height: 1.1rem; }

/* The count bubble is only rendered when there is something in it, so an
   empty bag never wears a zero. */
.nr-count {
	position: absolute;
	top: -0.25rem;
	right: -0.25rem;
	min-width: 1.15rem;
	height: 1.15rem;
	padding-inline: 0.25rem;
	display: grid;
	place-items: center;
	border-radius: var(--nr-r-pill);
	background: var(--nr-rose);
	color: #fff;
	font-family: var(--nr-font-mono);
	font-size: 0.625rem;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.nr-nav-toggle { display: none; }

@media ( max-width: 1020px ) {
	.nr-nav-toggle { display: inline-flex; }
	.nr-nav {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: var(--nr-s-4);
		background: rgba( 255, 250, 251, 0.98 );
		backdrop-filter: blur( 16px );
		-webkit-backdrop-filter: blur( 16px );
		border-bottom: 1px solid var(--nr-n-200);
		box-shadow: var(--nr-shadow-card);
		display: none;
	}
	.nr-nav.is-open { display: flex; }
	.nr-nav ul { flex-direction: column; align-items: stretch; gap: var(--nr-s-1); }
	.nr-nav a { padding: var(--nr-s-3) var(--nr-s-4); font-size: var(--nr-t-base); border-radius: var(--nr-r-md); }
}

@media ( max-width: 620px ) {
	.nr-header-bar { gap: var(--nr-s-3); }
	.nr-brand-sub { display: none; }
	.nr-header-tools { gap: var(--nr-s-1); }
	.nr-moods-name { display: none; }
}

/* ==========================================================================
   Mood switcher
   ========================================================================== */

.nr-moods { position: relative; flex: none; }

.nr-moods-toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--nr-s-2);
	padding: var(--nr-s-2) var(--nr-s-3);
	border-radius: var(--nr-r-pill);
	border: 1px solid var(--nr-n-200);
	background: var(--nr-surface);
	color: var(--nr-ink-soft);
	font-size: var(--nr-t-sm);
	font-weight: 600;
	cursor: pointer;
	transition: border-color var(--nr-d-micro) var(--nr-ease);
}
.nr-moods-toggle:hover { border-color: var(--nr-rose); }

.nr-moods-dot,
.nr-moods-swatch {
	width: 0.85rem;
	height: 0.85rem;
	flex: none;
	border-radius: var(--nr-r-pill);
	background: var( --nr-swatch, var(--nr-rose) );
	box-shadow: 0 0 0 2px var(--nr-surface), 0 0 0 3px var( --nr-swatch, var(--nr-rose) );
}

.nr-moods-menu {
	position: absolute;
	right: 0;
	top: calc( 100% + var(--nr-s-2) );
	z-index: 50;
	width: min( 21rem, calc( 100vw - var(--nr-s-8) ) );
	padding: var(--nr-s-3);
	background: var(--nr-surface);
	border: 1px solid var(--nr-n-200);
	border-radius: var(--nr-r-lg);
	box-shadow: var(--nr-shadow-pop);
}

.nr-moods-hint {
	padding: 0 var(--nr-s-2) var(--nr-s-2);
	font-size: var(--nr-t-xs);
	color: var(--nr-ink-faint);
}

.nr-moods-menu ul { display: flex; flex-direction: column; gap: 2px; }

.nr-moods-item {
	display: flex;
	align-items: flex-start;
	gap: var(--nr-s-3);
	padding: var(--nr-s-3);
	border-radius: var(--nr-r-md);
	color: var(--nr-ink-soft);
	transition: background-color var(--nr-d-micro) var(--nr-ease);
}
.nr-moods-item:hover { background: var(--nr-n-50); color: var(--nr-ink); }
.nr-moods-item.is-current { background: var(--nr-rose-wash); color: var(--nr-rose-deep); }
.nr-moods-item .nr-moods-swatch { margin-top: 0.2rem; }

.nr-moods-body { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.nr-moods-label { font-size: var(--nr-t-sm); font-weight: 700; }
.nr-moods-note { font-size: var(--nr-t-xs); color: var(--nr-ink-faint); line-height: var(--nr-lh-snug); }

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

.nr-hero { padding-block: var(--nr-s-20) var(--nr-s-16); position: relative; }

/*
 * One column, not two. The hero has no product photograph beside it — the
 * field behind the page is the image — so a second grid track would only be
 * empty space that pushes the headline off its own left edge.
 */
.nr-hero-inner {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
}

.nr-hero-copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--nr-s-5);
	min-width: 0;
	max-width: 46rem;
}

@media ( max-width: 1020px ) {
	.nr-hero { padding-block: var(--nr-s-12) var(--nr-s-10); }
}

.nr-hero-badges { display: flex; flex-wrap: wrap; gap: var(--nr-s-2); }
.nr-hero h1 { margin: 0; }
.nr-hero-copy > * { margin: 0; }
.nr-hero-actions { display: flex; flex-wrap: wrap; gap: var(--nr-s-3); margin-top: var(--nr-s-3); }

.nr-hero-proof {
	display: flex;
	flex-wrap: wrap;
	gap: var( --nr-s-4 ) var( --nr-s-8 );
	list-style: none;
	margin: var( --nr-s-8 ) 0 0;
	padding: var( --nr-s-6 ) 0 0;
	border-top: 1px solid var( --nr-n-200 );
	width: 100%;
}

.nr-hero-proof li {
	display: flex;
	align-items: center;
	gap: var( --nr-s-3 );
	min-width: 0;
	font-size: var( --nr-t-sm );
	color: var( --nr-ink-muted );
}

.nr-hero-proof .nr-icon {
	flex: none;
	width: 1.15rem;
	height: 1.15rem;
	color: var( --nr-rose );
}

/* ==========================================================================
   Section heads
   ========================================================================== */

.nr-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--nr-s-8);
	margin-bottom: var(--nr-s-10);
	flex-wrap: wrap;
}
.nr-section-head > div { max-width: 40rem; display: flex; flex-direction: column; gap: var(--nr-s-3); }

/* ==========================================================================
   Stars, monogram
   ========================================================================== */

.nr-stars { display: inline-flex; gap: 0.1rem; }
.nr-star { color: var(--nr-n-300); }
.nr-star .nr-icon { width: 0.85rem; height: 0.85rem; }
.nr-star.is-on { color: #f59e0b; }
.nr-star.is-on .nr-icon { fill: currentColor; }

.nr-monogram {
	display: grid;
	place-items: center;
	flex: none;
	border-radius: var(--nr-r-pill);
	background: hsl( var( --nr-mono-hue, 340 ) 65% 92% );
	color: hsl( var( --nr-mono-hue, 340 ) 55% 32% );
	font-family: var(--nr-font-display);
	font-weight: 700;
	font-size: 1rem;
	border: 1px solid hsl( var( --nr-mono-hue, 340 ) 55% 86% );
}

/* ==========================================================================
   Breadcrumbs, pagination, empty
   ========================================================================== */

.nr-crumbs { font-size: var(--nr-t-sm); color: var(--nr-ink-faint); }
.nr-crumbs ol { display: flex; flex-wrap: wrap; gap: var(--nr-s-2); }
.nr-crumbs li { display: flex; align-items: center; gap: var(--nr-s-2); }
.nr-crumbs li + li::before { content: '/'; color: var(--nr-n-300); }
.nr-crumbs a { color: var(--nr-ink-muted); }
.nr-crumbs a:hover { color: var(--nr-rose-deep); }

.nr-page-head { padding-block: var(--nr-s-12) var(--nr-s-8); position: relative; }
.nr-page-head .nr-stack-6 { max-width: 46rem; }

.nr-pagination { margin-top: var(--nr-s-12); }
.nr-pagination ul { display: flex; flex-wrap: wrap; gap: var(--nr-s-2); justify-content: center; }
.nr-pagination a, .nr-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding-inline: var(--nr-s-3);
	border-radius: var(--nr-r-pill);
	border: 1px solid var(--nr-n-200);
	background: var(--nr-surface);
	font-size: var(--nr-t-sm);
	font-weight: 700;
	color: var(--nr-ink-soft);
}
.nr-pagination a:hover { border-color: var(--nr-rose); color: var(--nr-rose-deep); }
.nr-pagination .current { background: var(--nr-rose); border-color: var(--nr-rose); color: #fff; }

.nr-empty {
	padding: var(--nr-s-16) var(--nr-s-8);
	text-align: center;
	border: 1px dashed var(--nr-n-300);
	border-radius: var(--nr-r-xl);
	background: var(--nr-surface);
	display: flex;
	flex-direction: column;
	gap: var(--nr-s-3);
	align-items: center;
}
.nr-empty .nr-icon { width: 2rem; height: 2rem; color: var(--nr-n-400); }

/* ==========================================================================
   Article
   ========================================================================== */

.nr-article-head, .nr-article-body { max-width: var(--nr-shell-text); margin-inline: auto; }
.nr-article-figure { margin: var(--nr-s-10) 0; }
.nr-article-figure img { border-radius: var(--nr-r-xl); width: 100%; }
.nr-meta-row { display: flex; flex-wrap: wrap; gap: var(--nr-s-4); font-size: var(--nr-t-sm); color: var(--nr-ink-faint); }

/* ==========================================================================
   Journal cards
   ========================================================================== */

.nr-post { display: flex; flex-direction: column; overflow: hidden; }
.nr-post-figure { aspect-ratio: 16 / 10; overflow: hidden; background: var(--nr-n-100); }
.nr-post-figure img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--nr-d-reveal) var(--nr-ease); }
.nr-post:hover .nr-post-figure img { transform: scale( 1.04 ); }
.nr-post-body { padding: var(--nr-s-5); display: flex; flex-direction: column; gap: var(--nr-s-2); flex: 1 1 auto; min-width: 0; }
.nr-post-body > * { min-width: 0; }
.nr-post-title { font-size: var(--nr-t-md); font-weight: 700; }

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

.nr-comments { max-width: var(--nr-shell-text); margin-inline: auto; }
.nr-comments ol { display: flex; flex-direction: column; gap: var(--nr-s-6); }
.nr-comments .children { margin-top: var(--nr-s-6); margin-left: var(--nr-s-8); border-left: 2px solid var(--nr-n-200); padding-left: var(--nr-s-6); }
.nr-comment { display: flex; flex-direction: column; gap: var(--nr-s-3); }
.nr-comment-head { display: flex; align-items: center; gap: var(--nr-s-3); }
.nr-comment-author { font-size: var(--nr-t-sm); font-weight: 700; color: var(--nr-ink); }
.nr-comment-date { font-size: var(--nr-t-xs); color: var(--nr-ink-faint); }
.nr-comment-body { font-size: var(--nr-t-sm); color: var(--nr-ink-soft); line-height: var(--nr-lh-body); }

.comment-form { display: flex; flex-direction: column; gap: var(--nr-s-4); }
.comment-form label {
	font-size: var(--nr-t-xs); font-weight: 700; letter-spacing: 0.08em;
	text-transform: uppercase; color: var(--nr-ink-muted); display: block; margin-bottom: var(--nr-s-2);
}
.comment-form .submit {
	align-self: flex-start;
	padding: var(--nr-s-3) var(--nr-s-6);
	border-radius: var(--nr-r-pill);
	border: 0;
	background: var(--nr-rose);
	color: #fff;
	font-weight: 700;
	font-size: var(--nr-t-sm);
	cursor: pointer;
}
.comment-form .comment-notes, .comment-form .form-submit { margin: 0; }

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

.nr-footer {
	margin-top: var(--nr-s-20);
	border-top: 1px solid var(--nr-n-200);
	background: rgba( 255, 255, 255, 0.72 );
	backdrop-filter: blur( 10px );
	-webkit-backdrop-filter: blur( 10px );
}

.nr-footer-top {
	display: grid;
	grid-template-columns: minmax( 0, 1.4fr ) repeat( auto-fit, minmax( 9rem, 1fr ) );
	gap: var(--nr-s-10);
	padding-block: var(--nr-s-16);
}
@media ( max-width: 780px ) { .nr-footer-top { grid-template-columns: minmax( 0, 1fr ); gap: var(--nr-s-8); } }

.nr-footer-col { display: flex; flex-direction: column; gap: var(--nr-s-3); min-width: 0; }
.nr-widget-title, .nr-footer-title {
	font-family: var(--nr-font-display);
	font-size: var(--nr-t-sm);
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--nr-ink);
	margin-bottom: var(--nr-s-1);
}
.nr-footer-col ul { display: flex; flex-direction: column; gap: var(--nr-s-2); }
.nr-footer-col a { font-size: var(--nr-t-sm); color: var(--nr-ink-muted); }
.nr-footer-col a:hover { color: var(--nr-rose-deep); }
.nr-footer-note { font-size: var(--nr-t-sm); color: var(--nr-ink-faint); line-height: var(--nr-lh-body); }

.nr-footer-legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--nr-s-4);
	padding-block: var(--nr-s-6);
	border-top: 1px solid var(--nr-n-200);
	font-size: var(--nr-t-sm);
	color: var(--nr-ink-faint);
}
.nr-footer-legal ul { display: flex; flex-wrap: wrap; gap: var(--nr-s-4); }
.nr-footer-legal a { color: var(--nr-ink-muted); }
.nr-footer-legal a:hover { color: var(--nr-rose-deep); }

/* ==========================================================================
   404 and search
   ========================================================================== */

.nr-404 { padding-block: var(--nr-s-24); text-align: center; }
.nr-404-code {
	font-family: var(--nr-font-display);
	font-size: clamp( var(--nr-t-4xl), 13vw, 9rem );
	font-weight: 800;
	line-height: 1;
	color: var(--nr-rose-soft);
	letter-spacing: -0.06em;
}

.nr-searchform { display: flex; gap: var(--nr-s-2); }
.nr-searchform input[type="search"] { flex: 1 1 auto; min-width: 0; }

/* ==========================================================================
   Front page: the mood explainer
   ========================================================================== */

.nr-mood-list,
.nr-plain-list,
.nr-chip-row {
	list-style: none;
	margin: 0;
	padding: 0;
}

.nr-mood-list {
	display: grid;
	gap: var( --nr-s-2 );
}

.nr-mood-row {
	display: grid;
	grid-template-columns: 1.5rem minmax( 0, 1fr );
	align-items: start;
	gap: var( --nr-s-4 );
	padding: var( --nr-s-3 ) var( --nr-s-4 );
	border: 1px solid transparent;
	border-radius: var( --nr-r-md );
	color: inherit;
	text-decoration: none;
	transition: background-color var( --nr-d-micro ) var( --nr-ease ),
		border-color var( --nr-d-micro ) var( --nr-ease );
}

.nr-mood-row:hover,
.nr-mood-row:focus-visible,
.nr-mood-row.is-on {
	background: var( --nr-surface );
	border-color: rgba( var( --nr-rose-rgb ), 0.3 );
}

.nr-mood-row > span:last-child {
	display: grid;
	gap: 0.15rem;
	min-width: 0;
}

.nr-mood-row strong {
	font-family: var( --nr-font-display );
	font-size: var( --nr-t-base );
	font-weight: 600;
}

.nr-mood-row .nr-muted {
	font-size: var( --nr-t-sm );
	line-height: var( --nr-lh-snug );
}

.nr-moods-swatch {
	display: block;
	width: 1.5rem;
	height: 1.5rem;
	margin-top: 0.15rem;
	border-radius: var( --nr-r-pill );
	background: var( --nr-swatch, var( --nr-rose ) );
	box-shadow: inset 0 0 0 1px rgba( 31, 26, 36, 0.12 );
}

.nr-plain-list {
	display: grid;
	gap: var( --nr-s-3 );
}

.nr-plain-list li {
	position: relative;
	padding-left: var( --nr-s-6 );
	font-size: var( --nr-t-sm );
	line-height: var( --nr-lh-body );
	color: var( --nr-ink-soft );
}

.nr-plain-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: var( --nr-r-pill );
	background: var( --nr-rose );
}

.nr-chip-row {
	display: flex;
	flex-wrap: wrap;
	gap: var( --nr-s-2 );
}

/* ==========================================================================
   Single product page head
   ========================================================================== */

.nr-single-product {
	display: block;
}

.nr-single-product .nr-page-head {
	margin-bottom: var( --nr-s-6 );
}