/**
 * 9rang Store: the Figma design layer.
 *
 * Implements the components that are specific to the design in
 * docs/figma-spec.md — the four-row header, the offer strip, the framed
 * Festival Arrivals tiles, the signature product tile and the footer.
 *
 * Loaded last, so it settles anything the base stylesheets set differently.
 * Colours and fonts still come from the same custom properties, so the
 * Customizer keeps working on top of all of it.
 *
 * @package ninerang
 */

/* ----------------------------------------------------- 1. Announcement bar */

.nr-topbar {
	font-size: 12px;
	letter-spacing: 1.44px;
	text-transform: uppercase;
}

.nr-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 60px;
	min-height: 36px;
	padding-block: 10px;
	max-width: var( --nr-container );
	margin-inline: auto;
	padding-inline: clamp( 12px, 4.4vw, 64px );
}

.nr-topbar__viewport {
	position: relative;
	display: grid;
	place-items: center;
	text-align: center;
	min-width: 0;
}

/* Every line occupies the same grid cell so the bar does not change height as
   it rotates; only opacity moves. */
.nr-topbar__text {
	grid-area: 1 / 1;
	margin: 0;
	font-weight: 500;
	line-height: 16px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.35s ease;
}

.nr-topbar__text.is-active {
	opacity: 1;
	visibility: visible;
}

.nr-topbar__nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 24px;
	height: 24px;
	color: inherit;
	opacity: 0.75;
	transition: opacity 0.18s ease;
}

.nr-topbar__nav:hover {
	opacity: 1;
}

.nr-promobar {
	background: var( --nr-surface );
	border-bottom: 1px solid var( --nr-border );
	text-align: center;
}

.nr-promobar__text {
	margin: 0;
	padding-block: 10px;
	color: var( --nr-primary );
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 1.68px;
	line-height: 16px;
	text-transform: uppercase;
}

/* --------------------------------------------------------- 2. Header rows */

.nr-header--nine-rang {
	background: var( --nr-header-bg );
	border-bottom: var( --nr-header-border ) solid var( --nr-border );
}

.nr-header--nine-rang .nr-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	min-height: var( --nr-header-row-h );
	padding-block: 16px;
	/* Overrides the global container padding so the header can be spaced
	   independently of the page body. */
	padding-inline: clamp( 16px, 4.4vw, var( --nr-header-pad-x ) );
}

.nr-header--nine-rang .nr-header__search {
	flex: 0 1 var( --nr-search-w );
}

.nr-header--nine-rang .nr-searchform__input {
	height: 42px;
	padding: 12px 44px 12px 44px;
	border-radius: var( --nr-search-radius );
	background: var( --nr-bg );
	border-color: var( --nr-border );
	font-size: 16px;
}

.nr-header--nine-rang .nr-searchform__submit {
	left: 12px;
	right: auto;
	width: 20px;
	height: 20px;
	color: var( --nr-heading );
}

.nr-header--nine-rang .nr-header__actions {
	gap: var( --nr-header-icon-gap );
}

.nr-header--nine-rang .nr-header__actions .nr-iconbtn {
	width: var( --nr-header-icon );
	height: var( --nr-header-icon );
}

.nr-header--nine-rang .nr-header__actions .nr-iconbtn:hover {
	background: none;
	color: var( --nr-primary );
}

.nr-header--nine-rang .nr-count {
	top: -6px;
	right: -8px;
}

/* Menu row */

.nr-header__menurow {
	border-top: var( --nr-header-border ) solid var( --nr-border );
}

.nr-nav--centred {
	display: flex;
	justify-content: center;
	max-width: var( --nr-container );
	margin-inline: auto;
	min-height: var( --nr-header-menurow-h );
	align-items: center;
	padding: 14px clamp( 12px, 4.4vw, var( --nr-header-pad-x ) );
}

.nr-nav--centred .nr-menu {
	gap: var( --nr-menu-gap );
}

.nr-nav--centred .nr-menu__link {
	padding: 7px 0;
	font-size: var( --nr-menu-size );
	font-weight: var( --nr-menu-weight );
	letter-spacing: var( --nr-menu-track );
	line-height: 18px;
	text-transform: var( --nr-menu-transform );
}

.nr-header--active-pill .nr-nav--centred .nr-menu > li > .nr-menu__link::after,
.nr-header--active-plain .nr-menu > li > .nr-menu__link::after {
	display: none;
}

/* The design marks the current page with a solid block rather than a rule.
   "Underline" and "plain" are the other two treatments the setting offers. */
.nr-header--active-pill .nr-menu > li.current-menu-item > .nr-menu__link,
.nr-header--active-pill .nr-menu > li.current_page_item > .nr-menu__link,
.nr-header--active-pill .nr-menu > li.current-menu-ancestor > .nr-menu__link {
	padding: 7px 18px;
	background: var( --nr-menu-active-bg );
	color: var( --nr-menu-active-text );
	font-size: calc( var( --nr-menu-size ) + 2px );
	letter-spacing: calc( var( --nr-menu-track ) + 0.08px );
}


/* ------------------------------------------------ Header, inline menu row

   Figma 781:3365 — the 108px bar: announcement, then a single 72px row of
   logo, menu and icons with no search field. The taller 781:206 bar is the
   default; this is what "Menu in the logo row" switches to.

   Nothing here restates a measurement. The row height, horizontal padding,
   icon size and menu type all come from the same custom properties the
   two-row header uses, so the setting changes both at once. */

.nr-header--nine-rang.has-menu-inline .nr-nav--inline {
	display: flex;
	flex: 1;
	justify-content: center;
	min-width: 0;
	padding: 0;
	margin: 0;
	/* The menu-row height belongs to the row this variant does not have. */
	min-height: 0;
	max-width: none;
}

.nr-header--nine-rang.has-menu-inline .nr-nav--inline .nr-menu {
	flex-wrap: wrap;
	justify-content: center;
}

/* The mega panel spans the header, so its containing block has to be the row
   the menu actually sits in — which differs between the two variants. */
.nr-header--nine-rang.has-menu-inline .nr-header__inner {
	position: relative;
}

/* ------------------------------------------------------ Active menu item */

.nr-header--active-underline .nr-menu > li > .nr-menu__link::after {
	display: block;
}

.nr-header--active-underline .nr-menu > li.current-menu-item > .nr-menu__link::after,
.nr-header--active-underline .nr-menu > li.current_page_item > .nr-menu__link::after,
.nr-header--active-underline .nr-menu > li.current-menu-ancestor > .nr-menu__link::after {
	transform: scaleX( 1 );
}

.nr-header--active-plain .nr-menu > li.current-menu-item > .nr-menu__link,
.nr-header--active-plain .nr-menu > li.current_page_item > .nr-menu__link {
	color: var( --nr-primary );
}

/* -------------------------------------------------------- Shrink on scroll

   Only the row heights move. Letting the type or the logo resize as well
   makes the whole bar jump, which reads as a glitch rather than a response. */

.has-sticky-header .nr-header.has-shrink .nr-header__inner,
.has-sticky-header .nr-header.has-shrink .nr-nav--centred {
	transition: min-height 0.24s ease, padding-block 0.24s ease;
}

.has-sticky-header .nr-header.has-shrink.is-stuck .nr-header__inner {
	min-height: calc( var( --nr-header-row-h ) * 0.76 );
	padding-block: 8px;
}

.has-sticky-header .nr-header.has-shrink.is-stuck .nr-nav--centred {
	min-height: calc( var( --nr-header-menurow-h ) * 0.76 );
	padding-block: 8px;
}

@media ( prefers-reduced-motion: reduce ) {
	.has-sticky-header .nr-header.has-shrink .nr-header__inner,
	.has-sticky-header .nr-header.has-shrink .nr-nav--centred {
		transition: none;
	}
}

/* ------------------------------------------------------- Icon-only search

   When the header row carries the menu instead of the field, the search
   becomes a toggle beside the other icons and opens the panel. It is the same
   button the other layouts use, so it only needs sizing to match its row. */

.nr-header--nine-rang .nr-header__actions .nr-search-toggle svg {
	width: var( --nr-header-icon );
	height: var( --nr-header-icon );
}

/* Brand lockup */

.nr-lockup {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/* Scoped under .nr-brand to outrank the generic ".nr-brand img" sizing rule,
   which would otherwise stretch both marks to the custom-logo width. */
.nr-brand .nr-lockup__mark {
	width: var( --nr-logo-height );
	height: var( --nr-logo-height );
	flex: none;
	box-shadow: 0 0 20px rgba( 0, 0, 0, 0.1 );
	border-radius: 999px;
}

.nr-lockup__word {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.nr-brand .nr-lockup__nine {
	width: 14px;
	height: 19px;
	flex: none;
}

.nr-lockup__rang {
	font-family: var( --nr-font-heading );
	font-size: 26px;
	font-weight: 700;
	letter-spacing: 1.56px;
	line-height: 1;
	color: #242424;
}

/* ---------------------------------------------------------- 3. Offer strip */

.nr-offer {
	background: var( --nr-offer-bg );
	border-bottom: 1px solid var( --nr-offer-border );
}

.nr-offer__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-block: 22px;
}

.nr-offer__headline {
	margin: 0;
	font-family: var( --nr-font-heading );
	font-size: clamp( 22px, 3vw, 32px );
	font-weight: 700;
	line-height: 1.5;
	color: var( --nr-ink );
	text-transform: uppercase;
}

.nr-offer__detail {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.nr-offer__title {
	margin: 0;
	color: var( --nr-primary );
	font-size: clamp( 22px, 3vw, 32px );
	font-weight: 500;
	line-height: 1.2;
}

.nr-offer__subtitle {
	margin: 0;
	color: var( --nr-ink );
	font-size: 16px;
	font-weight: 500;
	text-transform: uppercase;
}

.nr-offer__note {
	margin: 0;
	color: #666;
	font-size: 12px;
}

/* --------------------------------------------- 4. Festival Arrivals tiles */

.nr-tiles {
	background: var( --nr-festival-bg );
	padding-block: 60px 80px;
}

.nr-tiles__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin-bottom: 54px;
	text-align: center;
}

.nr-tiles__headline {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	flex-wrap: wrap;
}

.nr-tiles__ornament {
	width: 46px;
	height: auto;
	flex: none;
}

.nr-tiles .nr-section__title,
.nr-tiles__title-alt {
	margin: 0;
	font-family: var( --nr-font-heading );
	font-size: clamp( 24px, 3.4vw, 36px );
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
}

.nr-tiles__title-alt {
	color: var( --nr-heading-muted );
}

.nr-tiles__rule {
	width: 2px;
	align-self: stretch;
	min-height: 1.2em;
	background: var( --nr-rule );
}

.nr-tiles .nr-section__subtitle {
	max-width: none;
	margin: 0;
	font-size: 15px;
	line-height: 24px;
	color: var( --nr-muted );
}

.nr-tiles__grid {
	display: grid;
	grid-template-columns: repeat( var( --nr-tile-columns, 5 ), minmax( 0, 1fr ) );
	gap: 22px;
	justify-items: center;
}

.nr-tiles--framed .nr-tile {
	width: 100%;
	max-width: 234px;
}

.nr-tile__link {
	position: relative;
	display: block;
}

/* The frame art overhangs the photograph slightly, so the tile keeps padding
   at the bottom for the ribbon that straddles its edge. */
.nr-tiles--framed .nr-tile__media {
	position: relative;
	display: block;
	aspect-ratio: 234 / 370;
	overflow: visible;
	background: none;
}

/* Both layers are sized explicitly rather than by inset alone: the global
   img { height: auto } reset defeats inset-derived sizing on images. */
.nr-tiles--framed .nr-tile__image {
	position: absolute;
	top: 2.53%;
	left: 3.09%;
	width: 93.73%;
	height: 94.92%;
	max-width: none;
	object-fit: cover;
}

/* The frame is a cusped outline, not a rectangle, so a rectangular photograph
   spills past it at the arched top and the notched corners. Clipping the photo
   to the frame's own silhouette is the only way to make the two agree:
   frame-mask.svg is the identical path from frame.svg, filled instead of
   stroked, so mask and artwork are registered by construction.

   The photo keeps the inset box above rather than being promoted to the frame's
   box. mask-size: 100% 100% scales the silhouette down to whatever element it
   applies to, so the designed ~3% margin between photograph and gold line
   survives and the corners still get cut.

   Left as a plain rectangle where masks are unsupported: that is the current
   behaviour, and an inset rectangle is the safer of the two failure modes. */
@supports ( mask-image: url( "x.svg" ) ) or ( -webkit-mask-image: url( "x.svg" ) ) {
	.nr-tiles--framed .nr-tile__image {
		border-radius: 0;
		-webkit-mask-image: url( "../images/festival/frame-mask.svg" );
		mask-image: url( "../images/festival/frame-mask.svg" );
		-webkit-mask-size: 100% 100%;
		mask-size: 100% 100%;
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-position: center;
		mask-position: center;
	}
}

.nr-tile__frame {
	position: absolute;
	top: -0.27%;
	left: -0.43%;
	width: 100.86%;
	height: 100.54%;
	max-width: none;
	pointer-events: none;
}

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

.nr-tiles--framed .nr-tile:hover .nr-tile__image--primary {
	transform: none;
}

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

.nr-tiles--framed .nr-tile.has-swap:hover .nr-tile__image--hover {
	opacity: 1;
	transform: none;
}

/* Discount ribbon */

.nr-tile__badge {
	position: absolute;
	left: 50%;
	top: 75.6%;
	width: 45.3%;
	aspect-ratio: 105.734 / 95.176;
	transform: translateX( -50% );
	pointer-events: none;
}

.nr-tile__badge-art {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.nr-tile__badge-text {
	position: absolute;
	left: 50%;
	top: 57%;
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1.08;
	color: var( --nr-accent );
	text-align: center;
	transform: translate( -50%, -50% );
	/* Sizes are a share of the ribbon width so the lockup holds together as the
	   grid narrows. */
	font-size: calc( var( --nr-badge-scale, 1 ) * 1em );
}

.nr-tile__badge-top,
.nr-tile__badge-bottom {
	font-size: 0.48em;
	font-weight: 500;
	letter-spacing: 0.02em;
}

.nr-tile__badge-value {
	font-size: 1em;
	font-weight: 500;
}

.nr-tiles--framed .nr-tile__badge {
	font-size: clamp( 13px, 1.55vw, 21px );
}

/* ----------------------------------------------------------- 4b. Hero */

/* The design sets slide copy in a frosted panel pinned to the bottom-left of
   the photograph rather than centring it in the band. */
.nr-hero .nr-slide__inner {
	display: flex;
	align-items: flex-end;
	height: 100%;
	padding-bottom: 40px;
}

.nr-hero .nr-slide__content {
	max-width: 456px;
	padding: 36px 40px 40px;
	background: rgba( 224, 199, 178, 0.2 );
	backdrop-filter: blur( 5px );
	-webkit-backdrop-filter: blur( 5px );
}

.nr-hero .nr-slide--center .nr-slide__content,
.nr-hero .nr-slide--right .nr-slide__content {
	text-align: left;
	margin-inline: 0;
}

.nr-hero .nr-slide--center .nr-slide__inner {
	justify-content: center;
}

.nr-hero .nr-slide--right .nr-slide__inner {
	justify-content: flex-end;
}

.nr-hero .nr-slide__title {
	margin-bottom: 10px;
	font-size: clamp( 32px, 4.4vw, 58px );
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: 0;
	color: var( --nr-primary );
	text-shadow: 0 1px 12px rgba( 255, 255, 255, 0.35 );
}

.nr-hero .nr-slide__text {
	margin-bottom: 22px;
	color: var( --nr-ink );
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 1.8px;
	text-transform: uppercase;
}

.nr-hero .nr-slide__cta {
	width: 250px;
	max-width: 100%;
	height: 50px;
	background: var( --nr-ink );
	border-color: var( --nr-ink );
	color: var( --nr-button-text );
	font-size: 15.6px;
	letter-spacing: 1.25px;
	text-transform: uppercase;
}

.nr-hero .nr-slide__cta:hover {
	background: var( --nr-primary );
	border-color: var( --nr-primary );
}

/* The arrows sit clear of the copy panel. */
.nr-hero .nr-slider__arrow--prev {
	left: auto;
	right: 84px;
	top: auto;
	bottom: 40px;
	transform: none;
}

.nr-hero .nr-slider__arrow--next {
	right: 24px;
	top: auto;
	bottom: 40px;
	transform: none;
}

/* ------------------------------------------------- 5. Signature product tile */

.nr-card--nine-rang {
	background: var( --nr-card-bg );
	padding: 12px;
	border: 0;
}

.nr-card--nine-rang .nr-card__media {
	max-width: none;
	width: 100%;
	aspect-ratio: var( --nr-card-ratio );
	background: var( --nr-card-image-bg );
	border-radius: 0;
	overflow: hidden;
}

/* Badge sits flush in the corner rather than inset. */
.nr-card--nine-rang .nr-badges {
	top: 0;
	left: 0;
	gap: 0;
}

.nr-card--nine-rang .nr-badge {
	padding: 5px 10px;
	border-radius: 0;
	background: var( --nr-ink );
	color: var( --nr-button-text );
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1.68px;
	line-height: 16px;
}

.nr-card--nine-rang .nr-badge--sale {
	background: var( --nr-sale );
	color: var( --nr-sale-text );
}

.nr-card--nine-rang .nr-badge--new {
	background: var( --nr-ink );
}

/* The wishlist control is always visible here — it is the design's only tool. */
.nr-card--nine-rang .nr-card__tools {
	top: 10px;
	right: 10px;
	opacity: 1;
	transform: none;
	gap: 8px;
}

.nr-card--nine-rang .nr-wishlist-btn--floating {
	width: 32px;
	height: 32px;
	border-radius: 16px;
	background: rgba( 255, 255, 255, 0.93 );
	box-shadow: 0 1px 6px rgba( 0, 0, 0, 0.1 );
	color: var( --nr-heading );
}

.nr-card--nine-rang .nr-wishlist-btn--floating .nr-wishlist-btn__icon {
	width: 18px;
	height: 18px;
}

.nr-card--nine-rang .nr-card__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-top: 12px;
	text-align: left;
}

.nr-card--nine-rang .nr-card__title {
	margin: 0;
	font-size: 16px;
	font-weight: 500;
	line-height: 20px;
	color: var( --nr-ink );
	text-transform: none;
	/* One line with an ellipsis, as designed — a wrapping title would push the
	   button out of alignment across the row. */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.nr-card--nine-rang .nr-card__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.nr-card--nine-rang .nr-card__price,
.nr-card--nine-rang .nr-card__price .price {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 15px;
	font-weight: 600;
	line-height: 20px;
	color: var( --nr-ink );
}

.nr-card--nine-rang .nr-card__price del,
.nr-card--nine-rang .nr-card__price del .amount {
	margin: 0;
	color: var( --nr-compare );
	font-size: 13px;
	font-weight: 400;
	line-height: 18px;
	text-decoration: line-through;
}

.nr-card--nine-rang .nr-card__price ins {
	text-decoration: none;
	color: var( --nr-ink );
}

.nr-card--nine-rang .nr-card__rating {
	margin: 0;
	flex: none;
}

.nr-card--nine-rang .nr-stars {
	font-size: 12px;
}

.nr-card--nine-rang .nr-stars__base,
.nr-card--nine-rang .nr-stars__fill {
	gap: 2px;
}

.nr-card--nine-rang .nr-stars svg {
	width: 12px;
	height: 12px;
}

/* The add to cart button is part of the card, not a hover reveal. */
.nr-card--nine-rang .nr-card__body .nr-button--cart {
	position: static;
	display: flex;
	width: 100%;
	height: 40px;
	margin-top: 0;
	padding: 10px 16px;
	border-radius: 0;
	background: var( --nr-ink );
	color: var( --nr-button-text );
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.32px;
	opacity: 1;
	transform: none;
	text-transform: uppercase;
}

.nr-card--nine-rang .nr-card__body .nr-button--cart:hover {
	background: var( --nr-primary );
	transform: none;
}

.nr-card--nine-rang .nr-card__body .nr-button--cart.is-added {
	background: var( --nr-success );
}

/* --------------------------------------------------------------- 6. Footer */

.nr-footer {
	margin-top: 0;
	border-top: 1px solid var( --nr-border );
	color: var( --nr-footer-text );
}

.nr-footer__main {
	padding-block: 56px 40px;
}

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

.nr-footer__grid.has-app {
	grid-template-columns: repeat( var( --nr-footer-cols, 4 ), minmax( 0, 1fr ) ) 1.2fr;
}

.nr-footer .widget-title,
.nr-footer__col .widget-title {
	margin-bottom: 18px;
	color: var( --nr-heading );
	font-family: var( --nr-font-body );
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.nr-footer__menu li,
.nr-footer .widget ul li {
	padding: 0 0 12px;
	border: 0;
	font-size: 14px;
}

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

.nr-footer__app-title {
	margin: 0 0 12px;
	font-family: var( --nr-font-heading );
	font-size: 22px;
	font-weight: 400;
	text-transform: none;
	color: var( --nr-heading );
}

.nr-footer__app-text {
	margin: 0 0 18px;
	font-size: 13px;
	line-height: 1.55;
	max-width: 34ch;
}

.nr-appbadge {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 10px 16px 10px 10px;
	background: var( --nr-bg );
	border: 1px solid var( --nr-border );
}

.nr-appbadge__mark {
	width: 44px;
	height: 44px;
	flex: none;
	background: var( --nr-ink );
}

.nr-appbadge__copy {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}

.nr-appbadge__eyebrow {
	font-size: 9px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var( --nr-muted );
}

.nr-appbadge__store {
	font-size: 14px;
	font-weight: 700;
	color: var( --nr-heading );
}

.nr-colophon {
	border-top: 1px solid var( --nr-border );
	padding-block: 22px;
}

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

.nr-colophon__copy {
	font-size: 12px;
	color: var( --nr-muted );
	opacity: 1;
}

/* Social links read as plain uppercase labels in the design. */
.nr-footer .nr-social {
	gap: 28px;
}

.nr-footer .nr-social a {
	width: auto;
	height: auto;
	border: 0;
	border-radius: 0;
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var( --nr-muted );
}

.nr-footer .nr-social a:hover {
	background: none;
	color: var( --nr-primary );
}

/* ------------------------------------------------------------- 7. Sections */

/* Section headings across the home page share the split treatment. */
.nr-product-row .nr-section__head {
	flex-direction: column;
	align-items: center;
	gap: 12px;
	text-align: center;
	margin-bottom: 44px;
}

.nr-product-row .nr-section__headings {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

.nr-product-row .nr-section__title {
	font-size: clamp( 24px, 3.4vw, 36px );
	font-weight: 700;
	letter-spacing: 0;
}

.nr-product-row .nr-section__subtitle {
	max-width: none;
	font-size: 15px;
	line-height: 24px;
}

.nr-product-row .nr-section__link {
	order: 3;
}

/* -------------------------------------------------------- 8. Breakpoints */

@media ( max-width: 1024px ) {
	.nr-header--nine-rang .nr-header__inner {
		gap: 16px;
	}

	.nr-header--nine-rang .nr-header__search {
		order: 3;
		flex-basis: 100%;
	}

	.nr-header__menurow {
		display: none;
	}

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

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

@media ( max-width: 782px ) {
	.nr-topbar__inner {
		gap: 16px;
	}

	.nr-topbar {
		font-size: 10px;
		letter-spacing: 0.08em;
	}

	.nr-promobar__text {
		font-size: 11px;
		letter-spacing: 0.1em;
	}

	.nr-offer__inner {
		flex-direction: column;
		gap: 10px;
		text-align: center;
	}

	.nr-tiles {
		padding-block: 40px 48px;
	}

	.nr-tiles__head {
		margin-bottom: 32px;
	}

	.nr-tiles__grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: 14px;
	}

	.nr-tiles__ornament {
		width: 28px;
	}

	.nr-card--nine-rang {
		padding: 8px;
	}

	.nr-card--nine-rang .nr-card__title {
		font-size: 14px;
	}

	.nr-card--nine-rang .nr-card__body .nr-button--cart {
		height: 36px;
		font-size: 13px;
	}

	.nr-card--nine-rang .nr-card__price,
	.nr-card--nine-rang .nr-card__price .price {
		font-size: 14px;
	}

	.nr-footer__grid,
	.nr-footer__grid.has-app {
		grid-template-columns: minmax( 0, 1fr );
		gap: 28px;
	}

	.nr-colophon__inner {
		flex-direction: column;
		text-align: center;
	}
}

@media ( max-width: 480px ) {
	.nr-header--nine-rang .nr-lockup__rang {
		font-size: 20px;
	}

	.nr-header--nine-rang .nr-lockup__mark {
		width: 32px;
		height: 32px;
	}
}