/**
 * 9rang Store: layout, header, footer, typography and home page.
 *
 * Every colour, size and font here resolves to a CSS custom property printed
 * by inc/customizer-output.php, so nothing in this file needs editing to
 * re-skin the theme.
 *
 * @package ninerang
 */

/* -------------------------------------------------------------- 1. Reset */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

@media ( prefers-reduced-motion: reduce ) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	background: var( --nr-bg );
	color: var( --nr-text );
	font-family: var( --nr-font-body );
	font-size: var( --nr-font-size );
	font-weight: var( --nr-weight-body );
	letter-spacing: var( --nr-track-body );
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-wrap: break-word;
}

body.nr-locked {
	overflow: hidden;
}

img,
picture,
video,
svg {
	max-width: 100%;
	height: auto;
	display: block;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
	background: none;
	border: 0;
	padding: 0;
}

a {
	color: inherit;
	text-decoration: none;
	transition: color 0.18s ease, opacity 0.18s ease;
}

a:hover {
	color: var( --nr-primary );
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 0.5em;
	font-family: var( --nr-font-heading );
	font-weight: var( --nr-weight-heading );
	letter-spacing: var( --nr-track-heading );
	line-height: 1.18;
	color: var( --nr-heading );
}

h1 {
	font-size: var( --nr-h1 );
}
h2 {
	font-size: var( --nr-h2 );
}
h3 {
	font-size: var( --nr-h3 );
}
h4 {
	font-size: var( --nr-h4 );
}
h5 {
	font-size: var( --nr-h5 );
}
h6 {
	font-size: var( --nr-h6 );
}

p {
	margin: 0 0 1em;
}

:focus-visible {
	outline: 2px solid var( --nr-primary );
	outline-offset: 3px;
	border-radius: 2px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: 999999;
	width: auto;
	height: auto;
	clip: auto;
	padding: 12px 20px;
	background: var( --nr-surface );
	color: var( --nr-heading );
	box-shadow: var( --nr-shadow-lift );
	border-radius: var( --nr-radius );
}

/* ------------------------------------------------------------ 2. Layout */

.nr-container {
	width: 100%;
	max-width: var( --nr-container );
	margin-inline: auto;
	padding-inline: clamp( 16px, 4.4vw, 64px );
}

.nr-section {
	padding-block: var( --nr-section-gap );
}

.nr-section + .nr-section {
	padding-top: 0;
}

.nr-section__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 36px;
}

.nr-section__title {
	margin: 0;
	text-transform: var( --nr-heading-transform );
}

.nr-section__subtitle {
	margin: 8px 0 0;
	color: var( --nr-muted );
	max-width: 56ch;
}

.nr-section__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: none;
	font-size: 0.9rem;
	font-weight: 500;
	border-bottom: 1px solid var( --nr-border-strong );
	padding-bottom: 3px;
}

.nr-section__link:hover {
	border-color: var( --nr-primary );
}

.nr-layout--sidebar {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) 300px;
	gap: 56px;
	align-items: start;
	padding-block: 48px;
}

.nr-no-sidebar .nr-layout--sidebar {
	grid-template-columns: minmax( 0, 1fr );
}

/* Kept in its own rule: an unsupported :has() would otherwise invalidate the
   whole selector list and take the plain fallback above down with it. */
.nr-layout--sidebar:not( :has( .nr-layout__sidebar ) ) {
	grid-template-columns: minmax( 0, 1fr );
}

.nr-grid {
	display: grid;
	grid-template-columns: repeat( var( --nr-cols, 4 ), minmax( 0, 1fr ) );
	gap: clamp( 16px, 2vw, 32px );
}

.nr-prose {
	max-width: 74ch;
}

.nr-prose img {
	border-radius: var( --nr-radius );
}

.nr-prose blockquote {
	margin: 32px 0;
	padding-left: 24px;
	border-left: 3px solid var( --nr-primary );
	font-family: var( --nr-font-heading );
	font-size: 1.2rem;
	color: var( --nr-heading );
}

/* ----------------------------------------------------------- 3. Buttons */

.nr-button,
.button,
button.button,
input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 13px 26px;
	border: 1px solid transparent;
	border-radius: var( --nr-radius-button );
	background: var( --nr-button-bg );
	color: var( --nr-button-text );
	font-size: 0.9rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease,
		transform 0.12s ease;
}

.nr-button:hover,
.button:hover,
input[type="submit"]:hover {
	background: var( --nr-button-hover );
	color: var( --nr-button-text );
	transform: translateY( -1px );
}

.nr-button:active {
	transform: translateY( 0 );
}

.nr-button--primary {
	background: var( --nr-primary );
	color: #fff;
}

.nr-button--primary:hover {
	background: var( --nr-primary-dark );
	color: #fff;
}

.nr-button--ghost {
	background: transparent;
	color: var( --nr-heading );
	border-color: var( --nr-border-strong );
}

.nr-button--ghost:hover {
	background: var( --nr-heading );
	color: var( --nr-surface );
	border-color: var( --nr-heading );
}

.nr-button.is-disabled,
.nr-button[disabled] {
	opacity: 0.5;
	pointer-events: none;
}

.nr-button.is-busy {
	opacity: 0.75;
	pointer-events: none;
}

.nr-button.is-added {
	background: var( --nr-success );
	border-color: var( --nr-success );
	color: #fff;
}

.nr-iconbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	color: inherit;
	transition: background 0.18s ease, color 0.18s ease;
}

.nr-iconbtn:hover {
	background: rgba( var( --nr-primary-rgb ), 0.1 );
	color: var( --nr-primary );
}

.nr-count {
	position: absolute;
	top: 2px;
	right: 0;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 999px;
	background: var( --nr-primary );
	color: #fff;
	font-family: var( --nr-font-body );
	font-size: 10px;
	font-weight: 600;
	line-height: 17px;
	text-align: center;
}

.nr-count.is-empty {
	display: none;
}

/* ------------------------------------------------------------ 4. Header */

.nr-topbar {
	background: var( --nr-topbar-bg );
	color: var( --nr-topbar-text );
	font-size: 0.8rem;
	letter-spacing: 0.03em;
}

.nr-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: 40px;
}

.nr-topbar__text {
	margin: 0;
}

.nr-topbar__menu {
	display: flex;
	gap: 20px;
}

.nr-header {
	position: relative;
	z-index: 60;
	background: var( --nr-header-bg );
	color: var( --nr-header-text );
	border-bottom: var( --nr-header-border ) solid var( --nr-border );
}

.has-sticky-header .nr-header {
	position: sticky;
	top: 0;
}

.nr-header.is-stuck {
	box-shadow: var( --nr-shadow );
}

.has-transparent-header .nr-header {
	position: absolute;
	inset: auto 0 auto 0;
	background: transparent;
	border-bottom-color: transparent;
	color: #fff;
}

.has-transparent-header .nr-header.is-stuck {
	position: fixed;
	background: var( --nr-header-bg );
	color: var( --nr-header-text );
	border-bottom-color: var( --nr-border );
}

.nr-header__inner {
	display: flex;
	align-items: center;
	gap: 32px;
	min-height: 82px;
}

.nr-header--logo-center .nr-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	grid-template-areas: "spacer brand actions" "nav nav nav";
	gap: 8px 32px;
	padding-bottom: 8px;
}

.nr-header--logo-center .nr-brand {
	grid-area: brand;
	justify-self: center;
}

.nr-header--logo-center .nr-header__actions {
	grid-area: actions;
}

.nr-header--logo-center .nr-nav {
	grid-area: nav;
	justify-content: center;
}

.nr-header--logo-split .nr-header__inner {
	justify-content: center;
}

.nr-header--logo-split .nr-nav {
	flex: 1;
}

.nr-header--logo-split .nr-nav--right .nr-menu {
	justify-content: flex-start;
}

.nr-header--logo-split .nr-nav--left .nr-menu {
	justify-content: flex-end;
}

.nr-brand {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: none;
}

.nr-brand .custom-logo-link {
	display: block;
	line-height: 0;
}

.nr-brand img {
	width: var( --nr-logo-width );
	height: auto;
	object-fit: contain;
}

/* The swap only happens where a sticky logo was actually uploaded; without the
   has-sticky-logo class the main logo simply stays put. */
.nr-brand__sticky-logo {
	display: none;
}

.is-stuck .nr-brand.has-sticky-logo .custom-logo-link {
	display: none;
}

.is-stuck .nr-brand.has-sticky-logo .nr-brand__sticky-logo {
	display: block;
}

.site-title {
	margin: 0;
	font-size: 1.5rem;
	letter-spacing: 0.04em;
}

/* The brand is a fixed-height lockup, so the heading around it must not add a
   line box of its own on top. */
.nr-brand .site-title {
	display: flex;
	line-height: 1;
}

.site-description {
	margin: 0;
	font-size: 0.75rem;
	color: var( --nr-muted );
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.nr-nav {
	flex: 1;
	min-width: 0;
}

.nr-menu {
	display: flex;
	align-items: center;
	gap: var( --nr-menu-gap );
}

/* Flex rather than block: a submenu is emitted on its own line, and the
   whitespace between it and the link would otherwise draw a line box and make
   items with dropdowns taller than the rest of the row. */
.nr-menu > li {
	position: relative;
	display: flex;
	align-items: center;
}

.nr-menu__link {
	display: inline-flex;
	align-items: center;
	padding: 10px 0;
	font-size: var( --nr-menu-size );
	font-weight: var( --nr-menu-weight );
	letter-spacing: var( --nr-menu-track );
	text-transform: var( --nr-menu-transform );
	white-space: nowrap;
}

.nr-menu > li > .nr-menu__link::after {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 4px;
	height: 1px;
	background: currentColor;
	transform: scaleX( 0 );
	transform-origin: left;
	transition: transform 0.24s ease;
}

.nr-menu > li:hover > .nr-menu__link::after,
.nr-menu > li.current-menu-item > .nr-menu__link::after {
	transform: scaleX( 1 );
}

.nr-menu__toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	color: inherit;
}

.nr-submenu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 30;
	min-width: 220px;
	padding: 10px;
	background: var( --nr-surface );
	border: 1px solid var( --nr-border );
	border-radius: var( --nr-radius );
	box-shadow: var( --nr-shadow-lift );
	opacity: 0;
	visibility: hidden;
	transform: translateY( 8px );
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.nr-menu li:hover > .nr-submenu,
.nr-menu li:focus-within > .nr-submenu,
.nr-menu li.is-open > .nr-submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY( 0 );
}

.nr-submenu .nr-menu__link {
	display: block;
	width: 100%;
	padding: 9px 12px;
	border-radius: var( --nr-radius-sm );
	color: var( --nr-text );
}

.nr-submenu .nr-menu__link:hover {
	background: rgba( var( --nr-primary-rgb ), 0.08 );
	color: var( --nr-primary );
}

.nr-submenu .nr-submenu {
	top: -10px;
	left: 100%;
}

.nr-header__actions {
	display: flex;
	align-items: center;
	gap: var( --nr-header-icon-gap );
	margin-left: auto;
	flex: none;
}

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

.nr-header__focus {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

.nr-header__back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.85rem;
	color: var( --nr-muted );
}

/* Search panel */

.nr-search-panel {
	border-top: 1px solid var( --nr-border );
	background: var( --nr-surface );
	padding-block: 22px;
}

.nr-search-panel .nr-container {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
}

.nr-searchform {
	position: relative;
	flex: 1;
	display: flex;
	align-items: center;
}

.nr-searchform__input {
	width: 100%;
	padding: 14px 48px 14px 18px;
	border: 1px solid var( --nr-border );
	border-radius: var( --nr-radius-button );
	background: var( --nr-bg );
}

.nr-searchform__submit {
	position: absolute;
	right: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	color: var( --nr-muted );
}

/* --------------------------------------------------------- 5. Overlays */

.nr-offcanvas,
.nr-minicart,
.nr-filter-drawer,
.nr-quickview {
	position: fixed;
	inset: 0;
	z-index: 200;
}

.nr-offcanvas__backdrop,
.nr-minicart__backdrop,
.nr-filter-drawer__backdrop,
.nr-quickview__backdrop {
	position: absolute;
	inset: 0;
	background: rgba( 0, 0, 0, 0.45 );
	opacity: 0;
	transition: opacity 0.28s ease;
}

.is-open .nr-offcanvas__backdrop,
.is-open .nr-minicart__backdrop,
.is-open .nr-filter-drawer__backdrop,
.is-open .nr-quickview__backdrop {
	opacity: 1;
}

.nr-offcanvas__panel,
.nr-minicart__panel,
.nr-filter-drawer__panel {
	position: absolute;
	top: 0;
	bottom: 0;
	width: min( 400px, 88vw );
	display: flex;
	flex-direction: column;
	background: var( --nr-surface );
	box-shadow: var( --nr-shadow-lift );
	transition: transform 0.3s cubic-bezier( 0.4, 0, 0.2, 1 );
}

.nr-offcanvas__panel,
.nr-filter-drawer__panel {
	left: 0;
	transform: translateX( -100% );
}

.nr-menu-right .nr-offcanvas__panel {
	left: auto;
	right: 0;
	transform: translateX( 100% );
}

.nr-minicart__panel {
	right: 0;
	transform: translateX( 100% );
}

.is-open .nr-offcanvas__panel,
.is-open .nr-minicart__panel,
.is-open .nr-filter-drawer__panel {
	transform: translateX( 0 );
}

.nr-offcanvas__head,
.nr-minicart__head,
.nr-filter-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 24px;
	border-bottom: 1px solid var( --nr-border );
}

.nr-minicart__title {
	position: relative;
	margin: 0;
	font-size: 1.1rem;
	padding-right: 24px;
}

.nr-offcanvas__search {
	padding: 18px 24px 0;
}

.nr-offcanvas__nav {
	flex: 1;
	overflow-y: auto;
	padding: 18px 12px;
}

.nr-menu--stacked {
	display: block;
}

.nr-menu--stacked > li {
	border-bottom: 1px solid var( --nr-border );
}

.nr-menu--stacked li {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.nr-menu--stacked .nr-menu__link {
	flex: 1;
	padding: 15px 12px;
	font-size: 1rem;
}

.nr-menu--stacked .nr-menu__toggle {
	display: inline-flex;
	transition: transform 0.2s ease;
}

.nr-menu--stacked li.is-open > .nr-menu__toggle {
	transform: rotate( 180deg );
}

.nr-menu--stacked .nr-submenu {
	position: static;
	display: none;
	width: 100%;
	margin: 0 0 8px;
	padding: 0 0 0 16px;
	border: 0;
	border-left: 2px solid var( --nr-border );
	border-radius: 0;
	box-shadow: none;
	opacity: 1;
	visibility: visible;
	transform: none;
}

.nr-menu--stacked li.is-open > .nr-submenu {
	display: block;
}

.nr-offcanvas__foot {
	padding: 20px 24px;
	border-top: 1px solid var( --nr-border );
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.nr-offcanvas__link {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 0.95rem;
}

.nr-offcanvas__link .nr-count {
	position: static;
	margin-left: auto;
}

/* -------------------------------------------------------------- 6. Hero */

.nr-hero {
	position: relative;
}

.nr-hero__slider,
.nr-slider {
	position: relative;
	overflow: hidden;
}

.nr-slider__track {
	display: flex;
	transition: transform 0.6s cubic-bezier( 0.4, 0, 0.2, 1 );
	will-change: transform;
}

.nr-slide {
	position: relative;
	flex: 0 0 100%;
	min-width: 0;
	height: var( --nr-hero-height );
	display: flex;
	align-items: center;
}

.nr-slide__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nr-slide__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		rgba( 0, 0, 0, calc( var( --nr-hero-overlay ) + 0.15 ) ) 0%,
		rgba( 0, 0, 0, var( --nr-hero-overlay ) ) 55%,
		rgba( 0, 0, 0, calc( var( --nr-hero-overlay ) * 0.4 ) ) 100%
	);
}

.nr-slide__inner {
	position: relative;
	width: 100%;
}

.nr-slide__content {
	max-width: 560px;
	color: #fff;
}

.nr-slide--center .nr-slide__content {
	margin-inline: auto;
	text-align: center;
}

.nr-slide--right .nr-slide__content {
	margin-left: auto;
	text-align: right;
}

.nr-slide__title {
	margin: 0 0 16px;
	color: #fff;
	font-size: var( --nr-h1 );
	text-transform: var( --nr-heading-transform );
}

.nr-slide__text {
	margin: 0 0 28px;
	font-size: 1.05rem;
	color: rgba( 255, 255, 255, 0.88 );
}

.nr-slider__arrow {
	position: absolute;
	top: 50%;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	transform: translateY( -50% );
	background: rgba( 255, 255, 255, 0.9 );
	color: var( --nr-heading );
	border-radius: 999px;
	box-shadow: var( --nr-shadow );
	transition: background 0.18s ease, opacity 0.18s ease;
}

.nr-slider__arrow:hover {
	background: #fff;
}

.nr-slider__arrow[disabled] {
	opacity: 0.35;
	pointer-events: none;
}

.nr-slider__arrow--prev {
	left: 20px;
}

.nr-slider__arrow--next {
	right: 20px;
}

.nr-slider__dots {
	position: absolute;
	left: 50%;
	bottom: 26px;
	z-index: 5;
	display: flex;
	gap: 10px;
	transform: translateX( -50% );
}

.nr-slider__dot {
	width: 28px;
	height: 3px;
	background: rgba( 255, 255, 255, 0.45 );
	border-radius: 2px;
	transition: background 0.2s ease, width 0.2s ease;
}

.nr-slider__dot.is-active {
	width: 44px;
	background: #fff;
}

/* ------------------------------------------------------------- 7. Tiles */

.nr-tiles__grid {
	display: grid;
	grid-template-columns: repeat( var( --nr-tile-columns, 3 ), minmax( 0, 1fr ) );
	gap: clamp( 12px, 1.6vw, 24px );
}

.nr-tile {
	grid-column: span var( --nr-tile-span, 1 );
	min-width: 0;
}

.nr-tile__link {
	position: relative;
	display: block;
	height: 100%;
	overflow: hidden;
	border-radius: var( --nr-radius );
	background: var( --nr-surface );
}

.nr-tile__media {
	position: relative;
	display: block;
	aspect-ratio: var( --nr-tile-ratio );
	overflow: hidden;
	background: var( --nr-surface );
}

.nr-tile__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s cubic-bezier( 0.2, 0, 0.2, 1 ), opacity 0.45s ease;
}

.nr-tile__image--hover {
	opacity: 0;
}

.nr-tile:hover .nr-tile__image--primary {
	transform: scale( 1.05 );
}

.nr-tile.has-swap:hover .nr-tile__image--primary {
	opacity: 0;
}

.nr-tile.has-swap:hover .nr-tile__image--hover {
	opacity: 1;
	transform: scale( 1.05 );
}

.nr-tile__body {
	position: absolute;
	inset: auto 0 0 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 28px 24px 22px;
	background: linear-gradient(
		to top,
		rgba( 0, 0, 0, 0.72 ) 0%,
		rgba( 0, 0, 0, 0.3 ) 55%,
		rgba( 0, 0, 0, 0 ) 100%
	);
	color: #fff;
}

.nr-tile__title {
	font-family: var( --nr-font-heading );
	font-size: 1.35rem;
	font-weight: var( --nr-weight-heading );
	letter-spacing: var( --nr-track-heading );
	line-height: 1.2;
}

.nr-tile__subtitle {
	font-size: 0.85rem;
	color: rgba( 255, 255, 255, 0.8 );
}

.nr-tile__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 10px;
	font-size: 0.78rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0;
	transform: translateY( 6px );
	transition: opacity 0.28s ease, transform 0.28s ease;
}

.nr-tile:hover .nr-tile__cta,
.nr-tile__link:focus-visible .nr-tile__cta {
	opacity: 1;
	transform: translateY( 0 );
}

/* ------------------------------------------------------------- 8. Promo */

.nr-promo__inner {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 380px;
	overflow: hidden;
	border-radius: var( --nr-radius );
}

.nr-promo__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nr-promo__content {
	position: relative;
	max-width: 480px;
	margin: 48px;
	padding: 40px;
	background: rgba( var( --nr-surface-rgb ), 0.94 );
	border-radius: var( --nr-radius );
}

.nr-promo__title {
	margin-top: 0;
}

/* ------------------------------------------------------------ 9. Quotes */

.nr-quotes__slider .nr-slider__track {
	gap: 24px;
}

.nr-quote {
	flex: 0 0 calc( ( 100% - 48px ) / 3 );
	margin: 0;
	padding: 32px;
	background: var( --nr-surface );
	border: 1px solid var( --nr-border );
	border-radius: var( --nr-radius );
}

.nr-quote__text {
	margin: 16px 0;
	font-family: var( --nr-font-heading );
	font-size: 1.05rem;
	line-height: 1.55;
	color: var( --nr-heading );
}

.nr-quote__meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 0.85rem;
}

.nr-quote__author {
	font-weight: 600;
}

.nr-quote__product {
	color: var( --nr-muted );
}

/* ------------------------------------------------------------ 10. Studio */

.nr-studio__grid {
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	gap: 12px;
}

.nr-studio__item a {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var( --nr-radius-sm );
}

.nr-studio__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.nr-studio__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba( 0, 0, 0, 0.35 );
	color: #fff;
	opacity: 0;
	transition: opacity 0.24s ease;
}

.nr-studio__item a:hover img {
	transform: scale( 1.06 );
}

.nr-studio__item a:hover .nr-studio__overlay {
	opacity: 1;
}

/* -------------------------------------------------------- 11. Blog bits */

.nr-archive__head {
	padding-block: 48px 8px;
}

.nr-grid--posts {
	--nr-cols: 3;
}

.nr-postcard__media {
	display: block;
	overflow: hidden;
	border-radius: var( --nr-radius );
	aspect-ratio: 4 / 3;
}

.nr-postcard__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.nr-postcard:hover .nr-postcard__image {
	transform: scale( 1.04 );
}

.nr-postcard__body {
	padding-top: 18px;
}

.nr-postcard__cat,
.nr-card__cat {
	display: inline-block;
	margin-bottom: 8px;
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var( --nr-muted );
}

.nr-postcard__title {
	margin: 0 0 8px;
	font-size: 1.2rem;
}

.nr-postcard__excerpt {
	color: var( --nr-muted );
	font-size: 0.92rem;
}

.nr-post__meta {
	display: flex;
	gap: 14px;
	font-size: 0.8rem;
	color: var( --nr-muted );
}

.nr-post__meta > * + *::before {
	content: "\00b7";
	margin-right: 14px;
}

.widget {
	margin-bottom: 36px;
}

.widget-title {
	margin-bottom: 14px;
	font-size: 0.95rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.widget ul li {
	padding: 7px 0;
	border-bottom: 1px solid var( --nr-border );
	font-size: 0.92rem;
}

/* --------------------------------------------------- 12. Crumbs & pager */

.nr-crumbs {
	padding-block: 22px;
	font-size: 0.82rem;
	color: var( --nr-muted );
}

.nr-crumbs a:hover {
	color: var( --nr-primary );
}

.nr-crumb__sep {
	display: inline-flex;
	margin-inline: 8px;
	vertical-align: -2px;
	opacity: 0.5;
}

.nr-pagination,
.woocommerce-pagination {
	margin-top: 48px;
}

.nr-pagination ul,
.woocommerce-pagination ul,
.nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.nr-pagination .page-numbers,
.woocommerce-pagination .page-numbers,
.nav-links .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding-inline: 12px;
	border: 1px solid var( --nr-border );
	border-radius: var( --nr-radius-button );
	font-size: 0.9rem;
	background: var( --nr-surface );
}

.nr-pagination .page-numbers.current,
.woocommerce-pagination .page-numbers.current,
.nav-links .page-numbers.current {
	background: var( --nr-heading );
	border-color: var( --nr-heading );
	color: var( --nr-surface );
}

.nr-pagination .page-numbers:hover,
.woocommerce-pagination .page-numbers:hover {
	border-color: var( --nr-heading );
}

/* ----------------------------------------------------------- 13. Footer */

.nr-footer {
	margin-top: var( --nr-section-gap );
	background: var( --nr-footer-bg );
	color: var( --nr-footer-text );
}

.nr-footer a {
	color: var( --nr-footer-text );
}

.nr-footer a:hover {
	color: var( --nr-footer-heading );
}

.nr-footer .widget-title,
.nr-footer h2,
.nr-footer h3 {
	color: var( --nr-footer-heading );
}

.nr-footer__newsletter {
	padding-block: 56px;
	border-bottom: 1px solid rgba( 255, 255, 255, 0.1 );
}

.nr-newsletter {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px 56px;
	align-items: center;
}

.nr-newsletter__title {
	margin: 0 0 6px;
}

.nr-newsletter__text {
	margin: 0;
	font-size: 0.9rem;
	opacity: 0.8;
}

.nr-newsletter__form {
	display: flex;
	gap: 10px;
}

.nr-newsletter__form input {
	flex: 1;
	padding: 14px 18px;
	border: 1px solid rgba( 255, 255, 255, 0.25 );
	border-radius: var( --nr-radius-button );
	background: rgba( 255, 255, 255, 0.06 );
	color: inherit;
}

.nr-newsletter__form input::placeholder {
	color: rgba( 255, 255, 255, 0.45 );
}

.nr-footer__main {
	padding-block: 64px;
}

.nr-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr repeat( var( --nr-footer-cols, 4 ), minmax( 0, 1fr ) );
	gap: 40px;
}

.nr-footer__about {
	margin: 16px 0 20px;
	font-size: 0.9rem;
	opacity: 0.8;
	max-width: 42ch;
}

.nr-footer .nr-brand img {
	filter: brightness( 0 ) invert( 1 );
	opacity: 0.92;
}

.nr-footer__menu li,
.nr-footer .widget ul li {
	padding: 6px 0;
	border: 0;
	font-size: 0.9rem;
}

.nr-social {
	display: flex;
	gap: 10px;
}

.nr-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1px solid rgba( 255, 255, 255, 0.2 );
	border-radius: 999px;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.nr-social a:hover {
	background: rgba( 255, 255, 255, 0.12 );
	border-color: transparent;
}

.nr-colophon {
	padding-block: 22px;
	border-top: 1px solid rgba( 255, 255, 255, 0.1 );
	font-size: 0.82rem;
}

.nr-footer--focus .nr-colophon {
	border-top: 0;
}

.nr-colophon__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.nr-colophon__copy {
	margin: 0;
	opacity: 0.75;
}

.nr-colophon__menu {
	display: flex;
	gap: 20px;
}

.nr-payments {
	display: flex;
	gap: 8px;
	opacity: 0.85;
}

/* ------------------------------------------------------ 14. Bottom nav */

.nr-bottomnav {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 90;
	display: none;
	background: var( --nr-surface );
	border-top: 1px solid var( --nr-border );
	padding-bottom: env( safe-area-inset-bottom );
}

.nr-bottomnav__item {
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	padding: 9px 4px;
	font-size: 0.68rem;
	color: var( --nr-muted );
}

.nr-bottomnav__item.is-active {
	color: var( --nr-primary );
}

.nr-bottomnav__item .nr-count {
	top: 2px;
	right: calc( 50% - 18px );
}

/* -------------------------------------------------- 15. Toasts & modals */

.nr-toasts {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 400;
	display: flex;
	flex-direction: column;
	gap: 10px;
	pointer-events: none;
}

.nr-toast {
	display: flex;
	align-items: center;
	gap: 14px;
	max-width: 360px;
	padding: 14px 20px;
	background: var( --nr-heading );
	color: var( --nr-surface );
	border-radius: var( --nr-radius );
	box-shadow: var( --nr-shadow-lift );
	font-size: 0.88rem;
	opacity: 0;
	transform: translateY( 12px );
	transition: opacity 0.28s ease, transform 0.28s ease;
	pointer-events: auto;
}

.nr-toast.is-visible {
	opacity: 1;
	transform: translateY( 0 );
}

.nr-toast--error {
	background: var( --nr-error );
	color: #fff;
}

.nr-toast__action {
	margin-left: auto;
	text-decoration: underline;
	white-space: nowrap;
}

.nr-lightbox {
	position: fixed;
	inset: 0;
	z-index: 300;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba( 0, 0, 0, 0.9 );
	opacity: 0;
	transition: opacity 0.28s ease;
}

.nr-lightbox.is-open {
	opacity: 1;
}

.nr-lightbox__figure {
	margin: 0;
	max-width: min( 1100px, 92vw );
	max-height: 86vh;
	text-align: center;
}

.nr-lightbox__image {
	max-height: 78vh;
	width: auto;
	margin-inline: auto;
	object-fit: contain;
	border-radius: var( --nr-radius-sm );
}

.nr-lightbox__caption {
	margin-top: 14px;
	color: rgba( 255, 255, 255, 0.75 );
	font-size: 0.85rem;
}

.nr-lightbox__close {
	position: absolute;
	top: 22px;
	right: 22px;
	color: #fff;
	opacity: 0.85;
}

.nr-lightbox__nav {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	border-radius: 999px;
	background: rgba( 255, 255, 255, 0.12 );
	color: #fff;
}

.nr-lightbox__nav:hover {
	background: rgba( 255, 255, 255, 0.22 );
}

.nr-lightbox__nav--prev {
	left: 24px;
}

.nr-lightbox__nav--next {
	right: 24px;
}

/* --------------------------------------------------------- 16. Empties */

.nr-empty {
	max-width: 460px;
	margin-inline: auto;
	padding-block: 72px;
	text-align: center;
}

.nr-empty__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 76px;
	height: 76px;
	margin-bottom: 22px;
	border-radius: 999px;
	background: rgba( var( --nr-primary-rgb ), 0.08 );
	color: var( --nr-primary );
}

.nr-empty__title {
	margin-bottom: 10px;
}

.nr-empty__text {
	color: var( --nr-muted );
}

.nr-empty__note {
	margin-top: 18px;
	font-size: 0.85rem;
	color: var( --nr-muted );
}

.nr-empty__note a,
.nr-wishlist__notice a {
	text-decoration: underline;
}

/* ----------------------------------------------------------- 17. Forms */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
select,
textarea {
	width: 100%;
	padding: 13px 16px;
	border: 1px solid var( --nr-border );
	border-radius: var( --nr-radius-button );
	background: var( --nr-surface );
	color: var( --nr-heading );
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

input:focus,
select:focus,
textarea:focus {
	outline: none;
	border-color: var( --nr-primary );
	box-shadow: 0 0 0 3px rgba( var( --nr-primary-rgb ), 0.14 );
}

label {
	display: block;
	margin-bottom: 6px;
	font-size: 0.85rem;
	font-weight: 500;
	color: var( --nr-heading );
}

.required {
	color: var( --nr-error );
}

/* ------------------------------------------------------ 18. Print tidy */

@media print {
	.nr-header,
	.nr-footer,
	.nr-bottomnav,
	.nr-topbar,
	.nr-toasts {
		display: none !important;
	}
}

/* ------------------------------------------------------- Mega menu

   Figma 810:2466 — 1440 x 546, 22px padding, laid out as a row: the link
   columns, then the feature cards. Measurements below are the frame's own.

   The panel spans the header rather than the menu item it hangs off, so the
   item it belongs to drops out of the positioning chain and the header row
   becomes the containing block. */

.nr-header {
	position: relative;
}

.nr-menu > li.nr-mega-parent {
	position: static;
}

.nr-submenu--mega {
	left: 0;
	right: 0;
	width: auto;
	min-width: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
}

/* Scoped to the panel. The menu item that opens it carries the same
   `nr-mega` class, because that is what the editor types into Appearance →
   Menus, and an unscoped rule would pad the menu item itself. */
.nr-submenu--mega > .nr-mega {
	display: flex;
	align-items: flex-start;
	gap: 0;
	max-width: var( --nr-container );
	margin-inline: auto;
	padding: 22px;
}

.nr-mega__columns {
	display: flex;
	align-items: flex-start;
	flex: none;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The first column measures 200 and the second 220 in the frame; the rest of
   the row is the cards. */
.nr-mega__column {
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: 200px;
}

.nr-mega__column + .nr-mega__column {
	width: 220px;
}

.nr-mega__heading {
	display: block;
	font-size: 16px;
	font-weight: 500;
	line-height: 23px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var( --nr-primary );
}

.nr-mega__heading:hover {
	color: var( --nr-primary-dark );
}

.nr-mega__links {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nr-submenu--mega .nr-mega__link {
	display: block;
	width: auto;
	padding: 0;
	border-radius: 0;
	background: none;
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	color: #222;
}

.nr-submenu--mega .nr-mega__link:hover {
	background: none;
	color: var( --nr-primary );
}

/* The design sets "Shop All" apart as the lighter, unweighted first entry. */
.nr-mega__links li:first-child .nr-mega__link {
	font-weight: 400;
	color: #333;
}

.nr-mega__cards {
	display: flex;
	flex: 1;
	gap: 8px;
	min-width: 0;
}

.nr-mega__card {
	position: relative;
	display: block;
	flex: 1;
	min-width: 0;
	aspect-ratio: 320 / 466;
	overflow: hidden;
	border-radius: 4px;
	background: var( --nr-card-image-bg );
}

.nr-mega__card-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.nr-mega__card:hover .nr-mega__card-image {
	transform: scale( 1.04 );
}

/* A 90px band at the foot, so the label stays legible over any photograph. */
.nr-mega__card-label {
	position: absolute;
	inset: auto 0 0 0;
	display: flex;
	align-items: flex-end;
	min-height: 90px;
	padding: 12px 16px 16px;
	background: linear-gradient( to top, rgba( 0, 0, 0, 0.55 ), rgba( 0, 0, 0, 0 ) );
	color: #fff;
	font-size: 18px;
	font-weight: 500;
	line-height: 26px;
	text-transform: uppercase;
}

/* ---------------------------------------------------- Press states

   Hover tells you a thing is interactive; press tells you the click
   registered. The theme had hover throughout and press on one button, so
   pointer-down went unacknowledged everywhere else — worst on the controls
   that do their work over the network (add to basket, wishlist, filters),
   where the gap between click and response is longest.

   Two shapes only, so the whole interface presses the same way:
   `--nr-press` for anything that reads as a button, and a settle for cards
   that lift on hover. Both are transforms, which compose with the existing
   colour transitions instead of fighting them. */

:root {
	--nr-press: scale( 0.97 );
	--nr-press-tile: scale( 0.94 );
}

/* Buttons and anything shaped like one. */

.nr-button:active,
button.button:active,
.single_add_to_cart_button:active,
.nr-iconbtn:active,
.nr-qty__btn:active,
.nr-card__cart:active,
.nr-wishlist-btn:active,
.nr-gallery__arrow:active,
.nr-chip:active,
.page-numbers:active {
	transform: var( --nr-press );
}

/* Swatches, size tiles and thumbnails are small, so they take a firmer
   press to register at that scale. */

.nr-attr__option:active,
.nr-swatch:active,
.nr-gallery__thumb:active {
	transform: var( --nr-press-tile );
}

/* A disabled control must not answer the pointer at all. */

.nr-attr__option[disabled]:active,
.single_add_to_cart_button.disabled:active,
button[disabled]:active,
.nr-button[disabled]:active {
	transform: none;
}

/* Cards lift on hover, so they settle rather than shrink. */

.nr-card:active,
.nr-card--boxed:active,
.nr-tile__link:active {
	transform: translateY( 0 );
}

/* Rows and panels get a tint instead of a transform: moving a wide block
   under the pointer reads as a glitch rather than a press. */

.nr-acc__toggle:active,
.nr-filter__label:active,
.nr-menu a:active {
	opacity: 0.65;
}

/* The transform is instant, so the reduced-motion block above — which only
   shortens transitions — does not reach it. */

@media ( prefers-reduced-motion: reduce ) {
	:root {
		--nr-press: none;
		--nr-press-tile: none;
	}
}

/* A press state on a touch screen is a flash the finger covers, and it
   sticks while scrolling. Pointer devices only. */

@media ( hover: none ) {
	:root {
		--nr-press: none;
		--nr-press-tile: none;
	}
}