/* =========================================================================
   Resonant X — listening-equipment retail theme

   One design layer, not a base skin plus an override. The page is a run of
   chapters; each chapter owns a matte field and re-declares the surface
   tokens, so every component reads its colour from whatever it is sitting
   on instead of needing a second set of rules per background.

   Sections: tokens, base, frame + chapters, motion helpers, components,
   templates, system pages, responsive, reduced motion, editorial skin.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Design tokens
   ---------------------------------------------------------------------- */

:root {
	/* ---- Fixed frame -------------------------------------------------
	   Header, footer and the hero stage stay near-black through the whole
	   document. They are the frame the chapters hang inside, so they do
	   not follow the chapter surface. */
	--ink: #08080a;
	--ink-2: #0e0e11;
	--steel: #16161a;
	--steel-2: #1f1f25;

	/* ---- Chapter fields ----------------------------------------------
	   Alternating these is what gives the scroll its rhythm. A single
	   ground reads as one long page however much motion sits on top. */
	--field-ink: #08080a;
	--field-paper: #f2efe8;
	--field-umber: #2a231c;
	--field-slate: #14171a;

	/* ---- Brand ---- */
	--brass: #c9a227;
	--brass-lift: #e3c766;
	--brass-deep: #8f7212;

	/* ---- Surface -----------------------------------------------------
	   Every token below is re-declared by each chapter field. Components
	   only ever reference these, never a literal colour. */
	--surface: var(--field-ink);
	--surface-2: #121216;
	--surface-3: #0b0b0e;
	--text: #eceae3;
	--text-strong: #ffffff;
	--muted: #8c8a83;
	--line: rgba(236, 234, 227, 0.14);
	--line-strong: rgba(236, 234, 227, 0.32);
	--accent: var(--brass);
	--accent-deep: var(--brass-lift);
	--accent-ink: #0b0b0e;
	--danger: #e0755c;

	/* Text and hairlines for blocks that stay dark inside a light chapter. */
	--text-invert: #0b0b0e;
	--muted-invert: rgba(11, 11, 14, 0.66);
	--line-invert: rgba(236, 234, 227, 0.14);
	--line-invert-strong: rgba(236, 234, 227, 0.3);

	/* ---- Type --------------------------------------------------------
	   Display runs to roughly 147px. The distance between display and body
	   is the point: a 64px "large" heading beside 16px copy reads as a
	   template, however well the rest is drawn. */
	--font-display: 'Manrope', 'Segoe UI', Arial, sans-serif;
	--font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
	--font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

	--fs-display: clamp(3.1rem, 10.4vw, 9.2rem);
	--fs-chapter: clamp(2.4rem, 6.4vw, 5.4rem);
	--fs-h2: clamp(1.9rem, 4vw, 3.2rem);
	--fs-h3: clamp(1.22rem, 1.8vw, 1.6rem);
	--fs-lead: clamp(1.06rem, 1.4vw, 1.3rem);
	--fs-body: 1rem;
	--fs-small: 0.86rem;
	--fs-mono: 0.72rem;

	--track-display: -0.038em;
	--track-mono: 0.16em;

	/* ---- Frame and grid ----------------------------------------------
	   Full-bleed with a fixed outer margin over a 12-column field, rather
	   than a centred box floating in empty gutters. */
	--edge: clamp(1.15rem, 3.6vw, 3rem);
	--cols: 12;
	--col-gap: clamp(0.9rem, 1.5vw, 1.5rem);
	--measure: 62ch;
	--shell: 1600px;
	--gutter: var(--edge);

	/* ---- Rhythm ----
	   Chapter-level whitespace, then a smaller step inside a chapter. */
	--chapter-y: clamp(5rem, 11vw, 11rem);
	--section-y: clamp(3.5rem, 7vw, 6.5rem);

	/* Square corners and hairlines carry the structure; no shadows. */
	--radius: 0px;
	--radius-lg: 0px;
	--hair: 1px;
	--shadow-sm: none;
	--shadow-md: none;

	--ease: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--dur: 0.5s;
}

/* ---- Chapter fields ---------------------------------------------------
   Applied to a chapter wrapper. Nested blocks inherit, so a dark quote
   inside a paper chapter only has to set its own field to go back to ink.
   ---------------------------------------------------------------------- */

[data-field='ink'] {
	--surface: var(--field-ink);
	--surface-2: #121216;
	--surface-3: #0b0b0e;
	--text: #eceae3;
	--text-strong: #ffffff;
	--muted: #8c8a83;
	--line: rgba(236, 234, 227, 0.14);
	--line-strong: rgba(236, 234, 227, 0.32);
	--accent: var(--brass);
	--accent-deep: var(--brass-lift);
	--accent-ink: #0b0b0e;
}

[data-field='paper'] {
	--surface: var(--field-paper);
	--surface-2: #ffffff;
	--surface-3: #e7e2d7;
	--text: #14130f;
	--text-strong: #000000;
	--muted: #6a655a;
	--line: rgba(20, 19, 15, 0.16);
	--line-strong: rgba(20, 19, 15, 0.36);
	--accent: var(--brass-deep);
	--accent-deep: #6d5709;
	--accent-ink: #fbf9f5;
}

[data-field='umber'] {
	--surface: var(--field-umber);
	--surface-2: #33291f;
	--surface-3: #221c15;
	--text: #f0e9df;
	--text-strong: #ffffff;
	--muted: #a2937f;
	--line: rgba(240, 233, 223, 0.16);
	--line-strong: rgba(240, 233, 223, 0.34);
	--accent: var(--brass-lift);
	--accent-deep: #f0dc9c;
	--accent-ink: #221c15;
}

[data-field='slate'] {
	--surface: var(--field-slate);
	--surface-2: #1c2024;
	--surface-3: #101315;
	--text: #e6ebee;
	--text-strong: #ffffff;
	--muted: #869097;
	--line: rgba(230, 235, 238, 0.15);
	--line-strong: rgba(230, 235, 238, 0.32);
	--accent: var(--brass-lift);
	--accent-deep: #f0dc9c;
	--accent-ink: #101315;
}

/* -------------------------------------------------------------------------
   2. Base
   ---------------------------------------------------------------------- */

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

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

html.has-motion {
	scroll-behavior: auto;
}

html.is-locked,
html.is-locked body {
	overflow: hidden;
}

body {
	margin: 0;
	background: var(--surface);
	color: var(--text);
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.65;
	font-feature-settings: 'cv05' 1, 'ss01' 1;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

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

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.022em;
	margin: 0;
	text-wrap: balance;
}

p {
	margin: 0;
	text-wrap: pretty;
}

a {
	color: inherit;
	text-decoration: none;
}

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

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

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

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

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

.skip-link:focus {
	position: fixed !important;
	top: 12px;
	left: 12px;
	z-index: 999;
	width: auto;
	height: auto;
	clip: auto;
	clip-path: none;
	padding: 0.75rem 1.25rem;
	background: var(--accent);
	color: var(--accent-ink);
	border-radius: var(--radius);
}

.img-fallback {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	background:
		repeating-linear-gradient(135deg, var(--surface-3) 0 10px, var(--surface-2) 10px 20px);
}

/* -------------------------------------------------------------------------
   3. Frame and chapters

   The page is full-bleed inside a fixed outer margin. `.shell` is that
   margin, not a centred 1280 box, so photography can run to the edge while
   text still lands on the same 12-column field as everything else.
   ---------------------------------------------------------------------- */

.shell {
	width: 100%;
	max-width: var(--shell);
	margin-inline: auto;
	padding-inline: var(--edge);
}

/* Twelve columns. Content sits in a lane rather than being centred by hand. */
.grid12 {
	display: grid;
	grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
	column-gap: var(--col-gap);
}

.lane-full  { grid-column: 1 / -1; }
.lane-left  { grid-column: 1 / -1; }
.lane-right { grid-column: 1 / -1; }
.lane-wide  { grid-column: 1 / -1; }

@media (min-width: 900px) {
	.lane-left  { grid-column: 1 / span 6; }
	.lane-right { grid-column: 8 / span 5; }
	.lane-wide  { grid-column: 1 / span 9; }
}

/* Hairline rails run the height of a chapter so the grid is visible without
   being drawn on every card. */
.rails {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}

.rails::before,
.rails::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: var(--hair);
	background: var(--line);
	opacity: 0.7;
}

/* The rails sit in the outer margin, at half the content inset. On the content
   edge itself they end up flush against the first column of text, which reads
   as a border the copy is touching rather than as a guide. */
.rails::before { left: calc(var(--edge) / 2); }
.rails::after  { right: calc(var(--edge) / 2); }

@media (max-width: 700px) {
	.rails { display: none; }
}

/* ---- Chapter ----------------------------------------------------------
   A chapter is one field plus one idea. The padding step between chapters
   is deliberately much larger than the step inside one.
   ---------------------------------------------------------------------- */

.chapter {
	position: relative;
	background: var(--surface);
	color: var(--text);
	padding-block: var(--chapter-y);
	isolation: isolate;
}

.chapter > * {
	position: relative;
	z-index: 1;
}

.chapter--flush { padding-block: 0; }
.chapter--tight { padding-block: var(--section-y); }

/* ---- Chapter head -----------------------------------------------------
   Numeral, label, then the heading. The numeral is what makes a run of
   sections read as chapters instead of a stack of marketing blocks.
   ---------------------------------------------------------------------- */

.chead {
	display: grid;
	gap: clamp(1.4rem, 3vw, 2.4rem);
	margin-bottom: clamp(2.4rem, 5vw, 4.5rem);
}

.chead__meta {
	display: flex;
	align-items: baseline;
	gap: 1.1rem;
	font-family: var(--font-mono);
	font-size: var(--fs-mono);
	letter-spacing: var(--track-mono);
	text-transform: uppercase;
	color: var(--muted);
	padding-bottom: 0.9rem;
}

.chead__num { color: var(--accent); }

.chead__rule {
	flex: 1;
	height: var(--hair);
	background: var(--line);
}

.chead__title {
	font-family: var(--font-display);
	font-size: var(--fs-chapter);
	font-weight: 800;
	line-height: 0.98;
	letter-spacing: var(--track-display);
	color: var(--text-strong);
	max-width: 18ch;
}

.chead__text {
	max-width: var(--measure);
	color: var(--muted);
	font-size: var(--fs-lead);
	line-height: 1.55;
}

.chead__link { justify-self: start; }

.chead__aside {
	display: grid;
	gap: 1.4rem;
	justify-items: start;
	align-content: end;
}

@media (min-width: 900px) {
	.chead--split {
		grid-template-columns: minmax(0, 1fr) minmax(0, 27rem);
		align-items: end;
		column-gap: clamp(2rem, 5vw, 5rem);
	}

	.chead--split .chead__meta { grid-column: 1 / -1; }
	.chead--split .chead__aside { padding-bottom: 0.5rem; }
}

.chead--center {
	justify-items: center;
	text-align: center;
}

.chead--center .chead__title { max-width: 22ch; }
.chead--center .chead__aside { justify-items: center; }
.chead--center .chead__text { max-width: 54ch; }
.chead--center .chead__meta { width: min(100%, 40rem); }

/* ---- Legacy section wrapper ------------------------------------------
   Inner templates (shop, single, page) still use `.section`. It inherits
   the chapter rhythm so those pages pick up the new spacing scale.
   ---------------------------------------------------------------------- */

.section {
	padding-block: var(--section-y);
	position: relative;
}

.section--tight {
	padding-block: clamp(2.5rem, 5vw, 4rem);
}

.layout {
	display: grid;
	gap: clamp(2rem, 5vw, 4rem);
}

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

@media (min-width: 1000px) {
	.layout--sidebar {
		grid-template-columns: minmax(0, 1fr) 300px;
	}
}

.site-main {
	display: block;
	background: var(--ink);
}

/* -------------------------------------------------------------------------
   4. Motion helpers
   ---------------------------------------------------------------------- */

html.has-motion [data-motion-text],
html.has-motion [data-reveal],
html.has-motion [data-reveal-group],
html.has-motion [data-image-reveal],
html.has-motion [data-hero-item] {
	visibility: hidden;
}

.motion-word-mask {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	padding-bottom: 0.08em;
	margin-bottom: -0.08em;
}

.motion-word {
	display: inline-block;
	will-change: transform, opacity;
}

[data-image-reveal] {
	overflow: hidden;
}

/* -------------------------------------------------------------------------
   5. Typography components
   ---------------------------------------------------------------------- */

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	font-family: var(--font-mono);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 1.1rem;
}

.eyebrow__mark {
	width: 26px;
	height: 1px;
	background: var(--accent);
	flex: none;
}

.eyebrow--light {
	color: var(--muted);
}


.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-weight: 600;
	font-size: 0.92rem;
	color: var(--text);
	border-bottom: 1px solid var(--line-strong);
	padding-bottom: 0.3rem;
	transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), gap var(--dur) var(--ease);
}

.link-arrow svg {
	transition: transform var(--dur) var(--ease);
}

.link-arrow:hover {
	color: var(--accent);
	border-color: var(--accent);
	gap: 0.85rem;
}

.link-arrow:hover svg {
	transform: translateX(3px);
}

/* -------------------------------------------------------------------------
   6. Buttons
   ---------------------------------------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	min-height: 52px;
	padding: 0 1.6rem;
	border: 1px solid transparent;
	border-radius: var(--radius);
	font-family: var(--font-body);
	font-size: 0.94rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1;
	text-align: center;
	cursor: pointer;
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
		border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
	will-change: transform;
}

.btn__icon {
	display: inline-flex;
	transition: transform var(--dur) var(--ease);
}

.btn:hover .btn__icon {
	transform: translateX(3px);
}

.btn--primary {
	background: var(--accent);
	color: var(--accent-ink);
}

.btn--primary:hover {
	background: var(--accent-deep);
}

.btn--ghost {
	background: rgba(236, 235, 232, 0.07);
	border-color: var(--line-strong);
	color: var(--text);
	backdrop-filter: blur(6px);
}

.btn--ghost:hover {
	background: rgba(236, 235, 232, 0.16);
	border-color: var(--text);
}

.btn--line {
	border-color: var(--line-strong);
	color: var(--text);
}

.btn--line:hover {
	border-color: var(--accent);
	background: var(--accent);
	color: var(--accent-ink);
}

.btn--sm {
	min-height: 44px;
	padding: 0 1.15rem;
	font-size: 0.88rem;
}

.btn--xs {
	min-height: 38px;
	padding: 0 0.9rem;
	font-size: 0.82rem;
}

.btn--block {
	width: 100%;
}

.icon-btn {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: var(--radius);
	color: inherit;
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.icon-btn:hover {
	background: rgba(236, 235, 232, 0.09);
}

.chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.55rem;
	margin-bottom: 2.5rem;
}

.chip {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 1rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	font-size: 0.86rem;
	font-weight: 500;
	color: var(--muted);
	transition: all var(--dur) var(--ease);
}

.chip:hover,
.chip.is-active {
	border-color: var(--accent);
	background: var(--accent);
	color: var(--accent-ink);
}

/* -------------------------------------------------------------------------
   7. Header
   ---------------------------------------------------------------------- */

.site-header {
	position: relative;
	z-index: 100;
	background: var(--ink);
	color: var(--text);
}

.site-header--sticky {
	position: sticky;
	top: 0;
}

.site-header.is-condensed {
	box-shadow: 0 1px 0 var(--line-invert), 0 10px 30px rgba(0, 0, 0, 0.28);
}

.site-header.is-condensed .topbar {
	display: none;
}

.topbar {
	border-bottom: 1px solid var(--line-invert);
	font-size: 0.8rem;
}

.topbar__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
	min-height: 40px;
	padding-block: 0.4rem;
}

.topbar__text {
	color: var(--muted);
	letter-spacing: 0.01em;
}

.topbar__contacts {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
}

.topbar__contacts a {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: var(--muted);
	transition: color var(--dur) var(--ease);
}

.topbar__contacts a:hover {
	color: var(--accent);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: 78px;
	transition: min-height var(--dur) var(--ease);
}

.site-header.is-condensed .site-header__inner {
	min-height: 64px;
}

.brand {
	display: inline-flex;
	flex-direction: column;
	gap: 0.2rem;
	flex: none;
}

.brand__logo {
	max-height: 42px;
	width: auto;
}

.brand__logo--dark { display: none; }

.brand__type {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--font-display);
	font-size: 1.32rem;
	font-weight: 800;
	letter-spacing: -0.03em;
	text-transform: uppercase;
}

.brand__mark {
	width: 10px;
	height: 22px;
	background: var(--accent);
	clip-path: polygon(0 0, 100% 0, 100% 72%, 50% 100%, 0 72%);
	flex: none;
}

.brand__tagline {
	font-family: var(--font-mono);
	font-size: 0.62rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--muted);
	padding-left: 1.2rem;
}

.nav {
	flex: 1;
	display: none;
}

@media (min-width: 1080px) {
	.nav { display: block; }
}

.nav__list {
	display: flex;
	justify-content: center;
	gap: 0.35rem;
}

.nav__list > li {
	position: relative;
}

.menu-link {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.7rem 0.85rem;
	font-size: 0.93rem;
	font-weight: 500;
	color: var(--text);
	position: relative;
	transition: color var(--dur) var(--ease);
}

.menu-link::after {
	content: '';
	position: absolute;
	left: 0.85rem;
	right: 0.85rem;
	bottom: 0.45rem;
	height: 1px;
	background: var(--accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--dur) var(--ease);
}

.nav__list > li:hover > .menu-link::after,
.nav__list > li.current-menu-item > .menu-link::after,
.nav__list > li.current-menu-ancestor > .menu-link::after {
	transform: scaleX(1);
}

.menu-link__caret {
	opacity: 0.55;
	transition: transform var(--dur) var(--ease);
}

.nav__list > li:hover .menu-link__caret {
	transform: rotate(180deg);
}

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

.nav .submenu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 232px;
	padding: 0.5rem;
	background: var(--ink-2);
	border: 1px solid var(--line-invert);
	border-radius: var(--radius);
	box-shadow: 0 24px 50px rgba(0, 0, 0, 0.4);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}

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

.submenu-link {
	display: block;
	padding: 0.6rem 0.8rem;
	font-size: 0.88rem;
	color: var(--muted);
	border-radius: 3px;
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.submenu-link:hover {
	background: rgba(236, 235, 232, 0.07);
	color: var(--text);
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex: none;
}

.site-header__cta {
	display: none;
}

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

.burger {
	display: grid;
	place-items: center;
	gap: 5px;
	width: 44px;
	height: 44px;
}

@media (min-width: 1080px) {
	.burger { display: none; }
}

.burger__bar {
	width: 20px;
	height: 1.5px;
	background: currentColor;
	transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.burger.is-active .burger__bar:first-child {
	transform: translateY(3.25px) rotate(45deg);
}

.burger.is-active .burger__bar:last-child {
	transform: translateY(-3.25px) rotate(-45deg);
}

.header-progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: transparent;
	overflow: hidden;
}

.header-progress__bar {
	display: block;
	height: 100%;
	background: var(--accent);
	transform: scaleX(0);
	transform-origin: left;
}

/* Search panel */

.search-panel {
	position: sticky;
	top: 0;
	z-index: 99;
	background: var(--ink-2);
	border-bottom: 1px solid var(--line-invert);
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.32s var(--ease);
}

.search-panel.is-open {
	max-height: 180px;
}

.search-panel__inner {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding-block: 1.4rem;
}

.search-panel .searchform {
	flex: 1;
}

.search-panel__close {
	color: var(--muted);
}

.searchform {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	border-bottom: 1px solid var(--line-invert-strong);
}

.searchform__input {
	flex: 1;
	min-height: 48px;
	padding: 0 0.25rem;
	background: none;
	border: 0;
	color: var(--text);
	font-size: 1.05rem;
}

.searchform__input::placeholder {
	color: var(--muted);
}

.searchform__input:focus {
	outline: none;
}

.searchform__submit {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	color: var(--accent);
}

/* Mobile navigation */

.mobile-nav {
	position: fixed;
	inset: 0;
	z-index: 200;
}

.mobile-nav__scrim {
	position: absolute;
	inset: 0;
	background: rgba(3, 3, 4, 0.72);
	opacity: 0;
	transition: opacity 0.3s var(--ease);
	border: 0;
	width: 100%;
}

.mobile-nav.is-open .mobile-nav__scrim {
	opacity: 1;
}

.mobile-nav__panel {
	position: absolute;
	inset: 0 0 0 auto;
	width: min(420px, 100%);
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	padding: 1.25rem var(--gutter) 2rem;
	background: var(--ink);
	color: var(--text);
	overflow-y: auto;
	transform: translateX(100%);
	transition: transform 0.36s var(--ease);
}

.mobile-nav.is-open .mobile-nav__panel {
	transform: translateX(0);
}

.mobile-nav__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--line-invert);
}

.mobile-nav__list {
	display: grid;
}

.mobile-nav__list li {
	border-bottom: 1px solid var(--line-invert);
	position: relative;
}

.mobile-nav__list .menu-link,
.mobile-nav__list .submenu-link {
	display: block;
	padding: 0.95rem 3rem 0.95rem 0;
	font-family: var(--font-display);
	font-size: 1.12rem;
	font-weight: 600;
	color: var(--text);
}

.mobile-nav__list .menu-link__caret {
	display: none;
}

.mobile-nav__list .submenu-toggle {
	position: absolute;
	top: 0.5rem;
	right: 0;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	color: var(--muted);
	transition: transform var(--dur) var(--ease);
}

.mobile-nav__list .has-sub.is-open > .submenu-toggle {
	transform: rotate(45deg);
	color: var(--accent);
}

.mobile-nav__list .submenu {
	display: none;
	padding-bottom: 0.5rem;
}

.mobile-nav__list .has-sub.is-open > .submenu {
	display: block;
}

.mobile-nav__list .submenu-link {
	font-family: var(--font-body);
	font-size: 0.95rem;
	font-weight: 400;
	padding: 0.6rem 0 0.6rem 1rem;
	color: var(--muted);
}

.mobile-nav__list .submenu li {
	border: 0;
}

.mobile-nav__foot {
	margin-top: auto;
	display: grid;
	gap: 1.25rem;
}

.mobile-nav__contacts {
	display: grid;
	gap: 0.7rem;
	font-size: 0.92rem;
	color: var(--muted);
}

.mobile-nav__contacts a {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
}

/* -------------------------------------------------------------------------
   8. Hero
   ---------------------------------------------------------------------- */

.hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: min(92vh, 880px);
	padding-top: clamp(4rem, 12vh, 9rem);
	background: var(--ink);
	color: var(--text);
	overflow: hidden;
	isolation: isolate;
}

.hero__media {
	position: absolute;
	inset: -6% 0;
	z-index: -1;
}

.hero__img,
.hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero__video {
	opacity: 0;
	transition: opacity 0.8s var(--ease);
}

.hero__video.is-ready {
	opacity: 1;
}

.hero__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(8, 8, 10, 0.4) 0%, rgba(8, 8, 10, 0.12) 32%, rgba(8, 8, 10, 0.94) 100%),
		linear-gradient(90deg, rgba(8, 8, 10, 0.84) 0%, rgba(8, 8, 10, 0) 66%);
}

.hero__rules {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(90deg, var(--line-invert) 1px, transparent 1px);
	background-size: min(16.66%, 200px) 100%;
	opacity: 0.5;
	mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}

.hero__inner {
	position: relative;
	padding-bottom: clamp(3rem, 7vw, 5rem);
	max-width: 100%;
}

.hero__title {
	font-size: clamp(2.8rem, 8.4vw, 6.4rem);
	font-weight: 800;
	line-height: 0.94;
	letter-spacing: -0.035em;
	text-transform: uppercase;
	max-width: 15ch;
}

.hero__text {
	margin-top: 1.6rem;
	max-width: 52ch;
	font-size: clamp(1rem, 1.6vw, 1.14rem);
	color: var(--muted);
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
	margin-top: 2.4rem;
}

.hero__specs {
	position: relative;
	border-top: 1px solid var(--line-invert);
	background: rgba(8, 8, 10, 0.78);
	backdrop-filter: blur(10px);
}

.hero__specs-inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.hero-spec {
	display: grid;
	gap: 0.35rem;
	padding: 1.35rem 1.5rem 1.35rem 0;
	border-right: 1px solid var(--line-invert);
}

.hero-spec:last-child {
	border-right: 0;
}

.hero-spec__label {
	font-family: var(--font-mono);
	font-size: 0.68rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
}

.hero-spec__value {
	font-family: var(--font-display);
	font-size: clamp(1.1rem, 2vw, 1.4rem);
	font-weight: 700;
	letter-spacing: -0.02em;
}

.hero__cue {
	position: absolute;
	left: 50%;
	bottom: calc(100% - 100vh + 7rem);
	display: none;
}

@media (min-width: 900px) {
	.hero__cue {
		display: block;
		position: absolute;
		right: var(--gutter);
		left: auto;
		bottom: 8rem;
	}

	.hero__cue-line {
		display: block;
		width: 1px;
		height: 74px;
		background: linear-gradient(180deg, transparent, var(--accent));
		animation: cue 2.4s var(--ease) infinite;
		transform-origin: top;
	}
}

@keyframes cue {
	0% { transform: scaleY(0); opacity: 0; }
	40% { transform: scaleY(1); opacity: 1; }
	100% { transform: scaleY(1); opacity: 0; transform-origin: bottom; }
}

/* -------------------------------------------------------------------------
   9. Marquee
   ---------------------------------------------------------------------- */

.marquee {
	overflow: hidden;
	background: var(--accent);
	color: var(--accent-ink);
	padding-block: 0.85rem;
	border-block: 1px solid var(--accent-deep);
}

.marquee__track {
	display: flex;
	gap: 3rem;
	white-space: nowrap;
	width: max-content;
}

.marquee__item {
	font-family: var(--font-mono);
	font-size: 0.82rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* -------------------------------------------------------------------------
   10. Scroll-scrubbed reel
   ---------------------------------------------------------------------- */

.reel {
	position: relative;
	background: var(--ink);
	color: var(--text);
}

.reel__stage {
	position: sticky;
	top: 0;
	height: 100vh;
	overflow: hidden;
	display: grid;
	place-items: center;
}

.reel__video,
.reel__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.reel__poster {
	z-index: 1;
	transition: opacity 0.5s var(--ease);
}

.reel__stage.is-live .reel__poster {
	opacity: 0;
}

.reel__scrim {
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(180deg, rgba(8, 8, 10, 0.72), rgba(8, 8, 10, 0.38) 45%, rgba(8, 8, 10, 0.88));
}

.reel__copy {
	position: relative;
	z-index: 3;
	width: min(100% - var(--gutter) * 2, var(--shell));
	margin-inline: auto;
}

.reel__caption {
	max-width: 46ch;
}

.reel__title {
	font-size: clamp(2rem, 5vw, 3.8rem);
	text-transform: uppercase;
	letter-spacing: -0.03em;
}

.reel__text {
	margin-top: 1.1rem;
	color: var(--muted);
}

.reel__steps {
	display: flex;
	gap: 0.5rem;
	margin-top: 2.5rem;
}

.reel__step {
	flex: 1;
	max-width: 120px;
	display: grid;
	gap: 0.5rem;
	font-family: var(--font-mono);
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
	transition: color var(--dur) var(--ease);
}

.reel__step::before {
	content: '';
	display: block;
	height: 2px;
	background: var(--line-invert-strong);
	transform-origin: left;
	transition: background var(--dur) var(--ease);
}

.reel__step.is-active {
	color: var(--text);
}

.reel__step.is-active::before {
	background: var(--accent);
}

/* Static fallback when the stage cannot be scrubbed. */
.reel.is-static .reel__stage {
	position: relative;
	height: clamp(420px, 62vh, 620px);
}

/* -------------------------------------------------------------------------
   11. Category grid
   ---------------------------------------------------------------------- */

.cat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
}

.cat-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--surface);
	overflow: hidden;
	transition: background var(--dur) var(--ease);
}

.cat-card:hover {
	background: var(--ink);
	color: var(--text);
}

.cat-card__media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--surface-2);
}

.cat-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.8s var(--ease), filter 0.6s var(--ease);
}

.cat-card:hover .cat-card__img {
	transform: scale(1.06);
}

.cat-card__body {
	display: grid;
	gap: 0.35rem;
	padding: 1.5rem;
	margin-top: auto;
	position: relative;
}

.cat-card__index {
	font-family: var(--font-mono);
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	color: var(--accent);
}

.cat-card:hover .cat-card__index {
	color: var(--accent);
}

.cat-card__name {
	font-family: var(--font-display);
	font-size: 1.28rem;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.cat-card__count {
	font-size: 0.85rem;
	color: var(--muted);
}

.cat-card:hover .cat-card__count {
	color: var(--muted);
}

.cat-card__go {
	position: absolute;
	right: 1.5rem;
	bottom: 1.55rem;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border: 1px solid var(--line);
	border-radius: 50%;
	transition: all var(--dur) var(--ease);
}

.cat-card:hover .cat-card__go {
	border-color: var(--accent);
	background: var(--accent);
	color: var(--accent-ink);
	transform: translateX(3px);
}

/* -------------------------------------------------------------------------
   12. Product grid + card
   ---------------------------------------------------------------------- */

.p-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
	gap: clamp(1.25rem, 2.4vw, 2rem);
	align-items: stretch;
}

.p-card {
	display: flex;
	flex-direction: column;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.p-card:hover {
	border-color: var(--line-strong);
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
}

.p-card__media {
	display: block;
	aspect-ratio: 1 / 1;
	background: var(--surface-2);
	overflow: hidden;
}

.p-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.8s var(--ease);
}

.p-card:hover .p-card__img {
	transform: scale(1.05);
}

.p-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	padding: 1.35rem;
	flex: 1;
}

.p-card__sku {
	font-family: var(--font-mono);
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
}

.p-card__title {
	font-size: 1.14rem;
	letter-spacing: -0.015em;
}

.p-card__title a {
	transition: color var(--dur) var(--ease);
}

.p-card__title a:hover {
	color: var(--accent);
}

.p-card__specs {
	display: grid;
	gap: 0.35rem;
	padding-top: 0.6rem;
	border-top: 1px solid var(--line);
	font-size: 0.85rem;
}

.p-card__specs li {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
}

.p-card__spec-label {
	color: var(--muted);
}

.p-card__spec-value {
	font-family: var(--font-mono);
	font-size: 0.8rem;
	text-align: right;
}

.p-card__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: auto;
	padding-top: 1rem;
}

/* -------------------------------------------------------------------------
   13. Story scene
   ---------------------------------------------------------------------- */

.story {
	background: var(--ink);
	color: var(--text);
}

.story__pin {
	display: flex;
	align-items: center;
	padding-block: var(--section-y);
}

.story.is-pinned .story__pin {
	min-height: 100vh;
	padding-block: 0;
}

.story__inner {
	display: grid;
	gap: clamp(2rem, 5vw, 4rem);
	width: min(100% - var(--gutter) * 2, var(--shell));
}

@media (min-width: 900px) {
	.story__inner {
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
		align-items: center;
	}
}

.story__title {
	font-size: clamp(1.9rem, 3.8vw, 3rem);
	text-transform: uppercase;
	letter-spacing: -0.03em;
	max-width: 14ch;
}

.story__progress {
	margin-top: 2rem;
	height: 2px;
	background: var(--line-invert);
	max-width: 220px;
}

.story__progress-bar {
	display: block;
	height: 100%;
	background: var(--accent);
	transform: scaleX(0);
	transform-origin: left;
}

.story__panels {
	position: relative;
}

.story.is-pinned .story__panels {
	min-height: 340px;
}

.story.is-pinned .story-panel {
	position: absolute;
	inset: 0;
}

.story-panel {
	display: grid;
	gap: 0.9rem;
	align-content: center;
	padding: 2rem;
	border: 1px solid var(--line);
	background: rgba(236, 235, 232, 0.03);
	border-radius: var(--radius);
}

.story.is-stacked .story-panel + .story-panel {
	margin-top: 1rem;
}

.story-panel__index {
	font-family: var(--font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.18em;
	color: var(--accent);
}

.story-panel__title {
	font-size: clamp(1.5rem, 2.6vw, 2.1rem);
	text-transform: uppercase;
	letter-spacing: -0.02em;
}

.story-panel__text {
	color: var(--muted);
	max-width: 52ch;
}

/* -------------------------------------------------------------------------
   14. Industries (horizontal)
   ---------------------------------------------------------------------- */

.section--ind {
	overflow: hidden;
	background: var(--surface-2);
}

.ind-track {
	display: flex;
	gap: clamp(1rem, 2vw, 1.75rem);
	padding-inline: var(--gutter);
	width: max-content;
}

.section--ind.is-swipe .ind-track {
	width: auto;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 1rem;
	-webkit-overflow-scrolling: touch;
}

.section--ind.is-swipe .ind-card {
	scroll-snap-align: start;
}

.ind-card {
	flex: none;
	width: min(78vw, 420px);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.ind-card__media {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--surface-3);
}

.ind-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ind-card__body {
	display: grid;
	gap: 0.6rem;
	padding: 1.5rem;
}

.ind-card__title {
	font-size: 1.32rem;
	letter-spacing: -0.02em;
}

.ind-card__text {
	color: var(--muted);
	font-size: 0.95rem;
}

/* -------------------------------------------------------------------------
   15. Stats + steps
   ---------------------------------------------------------------------- */

.stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
}

.stat {
	display: grid;
	gap: 0.35rem;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background: var(--surface);
}

.stat__value {
	font-family: var(--font-display);
	font-size: clamp(2.2rem, 4.5vw, 3.4rem);
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1;
}

.stat__label {
	font-size: 0.9rem;
	color: var(--muted);
}

.steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
	gap: clamp(1.25rem, 2.5vw, 2rem);
}

.step {
	position: relative;
	display: grid;
	gap: 0.7rem;
	align-content: start;
	padding: 1.9rem 1.6rem;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.step:hover {
	border-color: var(--accent);
	transform: translateY(-4px);
}

.step__icon {
	display: grid;
	place-items: center;
	width: 50px;
	height: 50px;
	border-radius: var(--radius);
	background: var(--ink);
	color: var(--accent);
}

.step__index {
	position: absolute;
	top: 1.4rem;
	right: 1.5rem;
	font-family: var(--font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	color: var(--line-strong);
}

.step__title {
	font-size: 1.15rem;
	letter-spacing: -0.015em;
}

.step__text {
	color: var(--muted);
	font-size: 0.94rem;
}

/* -------------------------------------------------------------------------
   16. News
   ---------------------------------------------------------------------- */

.n-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
	gap: clamp(1.5rem, 3vw, 2.25rem);
}

.n-grid--list {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}

.n-card {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
}

.n-card__media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--surface-2);
}

.n-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.8s var(--ease);
}

.n-card:hover .n-card__img {
	transform: scale(1.05);
}

.n-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	flex: 1;
}

.n-card__meta {
	display: flex;
	gap: 0.5rem;
	font-family: var(--font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
}

.n-card__title {
	font-size: 1.24rem;
	letter-spacing: -0.02em;
}

.n-card__title a:hover {
	color: var(--accent);
}

.n-card__excerpt {
	color: var(--muted);
	font-size: 0.95rem;
}

.n-card .link-arrow {
	margin-top: auto;
	align-self: start;
}

/* -------------------------------------------------------------------------
   17. CTA + inquiry
   ---------------------------------------------------------------------- */

.cta {
	position: relative;
	padding-block: var(--section-y);
	background: var(--ink);
	color: var(--text);
	overflow: hidden;
	isolation: isolate;
}

.cta__media {
	position: absolute;
	inset: -6% 0;
	z-index: -1;
}

.cta__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cta__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(8, 8, 10, 0.95) 26%, rgba(8, 8, 10, 0.52));
}

.cta__inner {
	display: grid;
	gap: clamp(2rem, 5vw, 4rem);
}

@media (min-width: 960px) {
	.cta__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: start;
	}
}

.cta__title {
	font-size: clamp(1.9rem, 4vw, 3.1rem);
	text-transform: uppercase;
	letter-spacing: -0.03em;
	max-width: 16ch;
}

.cta__text {
	margin-top: 1.2rem;
	color: var(--muted);
	max-width: 46ch;
}

.cta__contacts {
	display: grid;
	gap: 0.7rem;
	margin-top: 2rem;
	font-size: 0.98rem;
}

.cta__contacts li {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	color: var(--muted);
}

.cta__contacts a:hover {
	color: var(--accent);
}

.cta__form {
	background: var(--surface);
	color: var(--text);
	border-radius: var(--radius-lg);
	padding: clamp(1.5rem, 3vw, 2.25rem);
	box-shadow: var(--shadow-md);
}

/* Inquiry plugin surface — scoped so third-party fields inherit the theme
   without leaking these rules onto unrelated forms. */

.rsn-inquiry,
.zc-inquiry-form {
	display: grid;
	gap: 1rem;
}

.rsn-inquiry input[type="text"],
.rsn-inquiry input[type="email"],
.rsn-inquiry input[type="tel"],
.rsn-inquiry input[type="url"],
.rsn-inquiry input[type="number"],
.rsn-inquiry select,
.rsn-inquiry textarea,
.zc-inquiry-form input[type="text"],
.zc-inquiry-form input[type="email"],
.zc-inquiry-form input[type="tel"],
.zc-inquiry-form input[type="url"],
.zc-inquiry-form input[type="number"],
.zc-inquiry-form select,
.zc-inquiry-form textarea {
	width: 100%;
	min-height: 50px;
	padding: 0.75rem 0.95rem;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	font-size: 0.96rem;
	transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.rsn-inquiry textarea,
.zc-inquiry-form textarea {
	min-height: 130px;
	resize: vertical;
}

.rsn-inquiry input:focus,
.rsn-inquiry select:focus,
.rsn-inquiry textarea:focus,
.zc-inquiry-form input:focus,
.zc-inquiry-form select:focus,
.zc-inquiry-form textarea:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.22);
}

.rsn-inquiry label,
.zc-inquiry-form label {
	display: block;
	margin-bottom: 0.4rem;
	font-size: 0.86rem;
	font-weight: 600;
	color: var(--text);
}

.rsn-inquiry button[type="submit"],
.zc-inquiry-form button[type="submit"],
.rsn-inquiry input[type="submit"],
.zc-inquiry-form input[type="submit"] {
	min-height: 52px;
	padding: 0 1.7rem;
	background: var(--accent);
	color: var(--accent-ink);
	border: 0;
	border-radius: var(--radius);
	font-family: var(--font-body);
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
	transition: background var(--dur) var(--ease);
}

.rsn-inquiry button[type="submit"]:hover,
.zc-inquiry-form button[type="submit"]:hover,
.rsn-inquiry input[type="submit"]:hover,
.zc-inquiry-form input[type="submit"]:hover {
	background: var(--accent-deep);
}

.inquiry-note {
	margin-top: 0.9rem;
	font-size: 0.85rem;
	color: var(--muted);
}

.inquiry-fallback {
	display: grid;
	gap: 0.9rem;
	padding: 1.5rem;
	border: 1px dashed var(--line-strong);
	border-radius: var(--radius);
}

.inquiry-fallback__title {
	font-family: var(--font-display);
	font-size: 1.15rem;
	font-weight: 700;
}

.inquiry-fallback__list {
	display: grid;
	gap: 0.55rem;
}

.inquiry-fallback__list li {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.inquiry-fallback__admin {
	font-size: 0.82rem;
	color: var(--muted);
}

/* -------------------------------------------------------------------------
   18. Page hero, breadcrumbs, prose
   ---------------------------------------------------------------------- */

.page-hero {
	position: relative;
	padding-block: clamp(3rem, 7vw, 5.5rem);
	background: var(--ink);
	color: var(--text);
	overflow: hidden;
	isolation: isolate;
}

.page-hero--media {
	padding-block: clamp(4.5rem, 10vw, 8rem);
}

.page-hero__media {
	position: absolute;
	inset: -6% 0;
	z-index: -1;
}

.page-hero__media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(8, 8, 10, 0.7), rgba(8, 8, 10, 0.88));
}

.page-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.page-hero__title {
	font-size: clamp(2.1rem, 5.4vw, 3.9rem);
	text-transform: uppercase;
	letter-spacing: -0.03em;
	max-width: 20ch;
}

.page-hero__text {
	margin-top: 1.1rem;
	max-width: 58ch;
	color: var(--muted);
}

.crumbs {
	margin-bottom: 1.3rem;
}

.crumbs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	font-family: var(--font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
}

.crumbs__item + .crumbs__item::before {
	content: '/';
	margin-right: 0.5rem;
	opacity: 0.5;
}

.crumbs__item a:hover {
	color: var(--accent);
}

.p-single .crumbs__list {
	color: var(--muted);
}

.prose {
	max-width: 78ch;
	font-size: 1.02rem;
	line-height: 1.75;
	color: var(--text);
}

.prose--page {
	max-width: 100%;
}

.prose > * + * {
	margin-top: 1.15em;
}

.prose h2 {
	margin-top: 2.4em;
	font-size: clamp(1.5rem, 2.6vw, 2rem);
}

.prose h3 {
	margin-top: 1.9em;
	font-size: 1.25rem;
}

.prose a {
	color: var(--accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.prose ul,
.prose ol {
	padding-left: 1.3rem;
	list-style: disc;
}

.prose ol {
	list-style: decimal;
}

.prose li + li {
	margin-top: 0.4em;
}

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

.prose blockquote {
	margin: 2em 0;
	padding-left: 1.4rem;
	border-left: 2px solid var(--accent);
	font-size: 1.1rem;
	color: var(--text);
}

.prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
}

.prose th,
.prose td {
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--line);
	text-align: left;
}

.prose figure { margin: 2em 0; }

.pager {
	margin-top: 3rem;
}

.pager .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	align-items: center;
}

.pager .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	padding: 0 0.6rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	font-size: 0.9rem;
	transition: all var(--dur) var(--ease);
}

.pager .page-numbers:hover,
.pager .page-numbers.current {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--accent-ink);
}

.is-flip { transform: rotate(180deg); }

.post-nav {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--line);
	font-weight: 600;
}

.tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 2rem;
}

.tags a {
	display: inline-flex;
	align-items: center;
	min-height: 34px;
	padding: 0 0.8rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	font-size: 0.82rem;
	color: var(--muted);
}

/* -------------------------------------------------------------------------
   19. Product single
   ---------------------------------------------------------------------- */

.p-single__top {
	display: grid;
	gap: clamp(2rem, 4vw, 3.5rem);
	padding-block: clamp(2.5rem, 5vw, 4rem);
}

@media (min-width: 960px) {
	.p-single__top {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: start;
	}
}

.p-single__gallery .woocommerce-product-gallery {
	position: relative;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--surface-2);
}

.p-single__gallery .woocommerce-product-gallery__wrapper {
	margin: 0;
}

.p-single__gallery .woocommerce-product-gallery__image img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.p-single__gallery .flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0.6rem 0 0;
	padding: 0 0.6rem 0.6rem;
	list-style: none;
}

.p-single__gallery .flex-control-thumbs li {
	width: calc(25% - 0.375rem);
}

.p-single__gallery .flex-control-thumbs img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border: 1px solid var(--line);
	border-radius: 3px;
	cursor: pointer;
	opacity: 0.62;
	transition: opacity var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.p-single__gallery .flex-control-thumbs img.flex-active,
.p-single__gallery .flex-control-thumbs img:hover {
	opacity: 1;
	border-color: var(--accent);
}

.p-single__gallery .flex-direction-nav {
	position: absolute;
	inset: auto 0 50% 0;
	display: flex;
	justify-content: space-between;
	padding-inline: 0.6rem;
	list-style: none;
	pointer-events: none;
}

.p-single__gallery .flex-direction-nav a {
	pointer-events: auto;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: var(--radius);
	background: rgba(8, 8, 10, 0.82);
	border: 1px solid var(--line-strong);
	font-size: 0;
	box-shadow: var(--shadow-sm);
}

.p-single__gallery .flex-direction-nav a::before {
	content: '';
	width: 9px;
	height: 9px;
	border-top: 1.5px solid var(--text);
	border-right: 1.5px solid var(--text);
}

.p-single__gallery .flex-direction-nav .flex-prev::before {
	transform: rotate(-135deg) translate(-2px, -2px);
}

.p-single__gallery .flex-direction-nav .flex-next::before {
	transform: rotate(45deg) translate(-2px, 2px);
}

.p-single__gallery .woocommerce-product-gallery__trigger {
	position: absolute;
	top: 0.8rem;
	right: 0.8rem;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: var(--radius);
	background: rgba(8, 8, 10, 0.82);
	border: 1px solid var(--line-strong);
	color: var(--text);
}

.p-single__summary {
	display: grid;
	gap: 1.1rem;
	align-content: start;
}

.p-single__sku {
	font-family: var(--font-mono);
	font-size: 0.75rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
}

.p-single__title {
	font-size: clamp(1.8rem, 4vw, 2.9rem);
	letter-spacing: -0.03em;
}

.p-single__short {
	color: var(--muted);
	font-size: 1.02rem;
}

.p-single__highlights {
	display: grid;
	gap: 0.6rem;
}

.p-single__highlights li {
	display: flex;
	gap: 0.7rem;
	align-items: flex-start;
	font-size: 0.96rem;
}

.p-single__highlights svg {
	flex: none;
	margin-top: 0.2rem;
	color: var(--accent);
}

.p-single__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
	padding-block: 0.5rem;
}

.spec-table {
	margin-top: 0.5rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
}

.spec-table__title {
	padding: 0.9rem 1.2rem;
	background: var(--surface-2);
	border-bottom: 1px solid var(--line);
	font-size: 0.8rem;
	font-family: var(--font-mono);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
}

.spec-table__list {
	margin: 0;
}

.spec-table__row {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: 1rem;
	padding: 0.85rem 1.2rem;
	border-bottom: 1px solid var(--line);
	font-size: 0.92rem;
}

.spec-table__row:last-child {
	border-bottom: 0;
}

.spec-table__row dt {
	color: var(--muted);
}

.spec-table__row dd {
	margin: 0;
	font-family: var(--font-mono);
	font-size: 0.88rem;
	overflow-wrap: anywhere;
}

.section--p-desc {
	background: var(--surface-2);
}

.p-single__desc-title {
	font-size: clamp(1.4rem, 2.6vw, 1.9rem);
	margin-bottom: 1rem;
}

.section--p-inquiry {
	background: var(--ink);
	color: var(--text);
}

.p-inquiry {
	display: grid;
	gap: clamp(2rem, 4vw, 3.5rem);
}

@media (min-width: 960px) {
	.p-inquiry {
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
		align-items: start;
	}
}

.p-inquiry .eyebrow { color: var(--muted); }

.p-inquiry__title {
	font-size: clamp(1.6rem, 3vw, 2.3rem);
	letter-spacing: -0.025em;
}

.p-inquiry__text {
	margin-top: 1rem;
	color: var(--muted);
	max-width: 46ch;
}

.p-inquiry__form {
	background: var(--surface);
	color: var(--text);
	border-radius: var(--radius-lg);
	padding: clamp(1.5rem, 3vw, 2.25rem);
}

/* -------------------------------------------------------------------------
   20. Contact page
   ---------------------------------------------------------------------- */

.contact {
	display: grid;
	gap: clamp(2rem, 4vw, 3.5rem);
}

@media (min-width: 900px) {
	.contact {
		grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
		align-items: start;
	}
}

.contact__list {
	display: grid;
	gap: 1.25rem;
	margin-top: 2rem;
}

.contact__list li {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
}

.contact__icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	flex: none;
	border-radius: var(--radius);
	background: var(--surface-2);
	color: var(--accent);
}

.contact__body {
	display: grid;
	gap: 0.2rem;
}

.contact__label {
	font-family: var(--font-mono);
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
}

.contact__value {
	font-size: 1rem;
	overflow-wrap: anywhere;
}

.contact__form {
	background: var(--surface-2);
	border-radius: var(--radius-lg);
	padding: clamp(1.5rem, 3vw, 2.5rem);
}

.contact__form-title {
	font-size: 1.4rem;
	margin-bottom: 1.4rem;
}

.contact__map {
	margin-top: clamp(2rem, 4vw, 3rem);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.contact__map iframe {
	width: 100%;
	min-height: 380px;
	border: 0;
	display: block;
}

/* -------------------------------------------------------------------------
   21. System states
   ---------------------------------------------------------------------- */

.empty {
	display: grid;
	gap: 1rem;
	justify-items: center;
	text-align: center;
	padding-block: clamp(3rem, 8vw, 6rem);
	max-width: 46ch;
	margin-inline: auto;
}

.empty__code {
	font-family: var(--font-display);
	font-size: clamp(4rem, 16vw, 9rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.05em;
	color: var(--steel-2);
}

.empty__title {
	font-size: clamp(1.5rem, 3vw, 2.2rem);
}

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

.empty__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
	justify-content: center;
	margin-top: 0.5rem;
}

.empty__search {
	width: 100%;
	margin-top: 1rem;
}

.empty__search .searchform,
.search-again .searchform {
	border-color: var(--line-strong);
}

.empty__search .searchform__input,
.search-again .searchform__input {
	color: var(--text);
}

.empty__search .searchform__input::placeholder,
.search-again .searchform__input::placeholder {
	color: var(--muted);
}

.empty__search .searchform__submit,
.search-again .searchform__submit {
	color: var(--accent);
}

.search-again {
	max-width: 560px;
	margin-bottom: 3rem;
}

.results {
	display: grid;
	gap: 1px;
	background: var(--line);
	border-block: 1px solid var(--line);
}

.result {
	display: grid;
	gap: 0.5rem;
	padding: 1.75rem 0;
	background: var(--surface);
}

.result__type {
	font-family: var(--font-mono);
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent);
}

.result__title {
	font-size: 1.3rem;
}

.result__text {
	color: var(--muted);
	max-width: 76ch;
}

.comments {
	margin-top: 3.5rem;
	padding-top: 2.5rem;
	border-top: 1px solid var(--line);
}

.comments__title {
	font-size: 1.4rem;
	margin-bottom: 1.5rem;
}

.comments__list {
	display: grid;
	gap: 1.5rem;
	margin-bottom: 2.5rem;
}

.comments__list ol {
	padding-left: 1.5rem;
	margin-top: 1.5rem;
	display: grid;
	gap: 1.5rem;
}

.comment-body {
	display: grid;
	gap: 0.5rem;
}

.comment-form {
	display: grid;
	gap: 1rem;
	max-width: 640px;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	min-height: 50px;
	padding: 0.75rem 0.95rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.comment-form textarea {
	min-height: 140px;
}

.comment-form .submit {
	min-height: 50px;
	padding: 0 1.6rem;
	background: var(--accent);
	color: var(--accent-ink);
	border: 0;
	border-radius: var(--radius);
	font-weight: 600;
	cursor: pointer;
	justify-self: start;
}

.widget {
	padding-bottom: 1.75rem;
	margin-bottom: 1.75rem;
	border-bottom: 1px solid var(--line);
}

.widget:last-child { border-bottom: 0; }

.widget__title {
	font-size: 1.05rem;
	margin-bottom: 0.9rem;
}

.widget ul {
	display: grid;
	gap: 0.5rem;
	font-size: 0.94rem;
	color: var(--muted);
}

/* -------------------------------------------------------------------------
   22. Footer
   ---------------------------------------------------------------------- */

.site-footer {
	background: var(--ink);
	color: var(--text);
	padding-top: clamp(3.5rem, 7vw, 5.5rem);
}

.site-footer .brand__logo--light { display: block; }
.site-footer .brand__logo--dark { display: none; }

.site-footer__top {
	display: grid;
	gap: clamp(2rem, 4vw, 3rem);
	padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

@media (min-width: 760px) {
	.site-footer__top {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1060px) {
	.site-footer__top {
		grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
	}
}

.site-footer__about {
	margin-top: 1.4rem;
	max-width: 42ch;
	color: var(--muted);
	font-size: 0.95rem;
}

.site-footer__title {
	font-family: var(--font-mono);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 1.1rem;
}

.site-footer__list,
.site-footer__contacts {
	display: grid;
	gap: 0.7rem;
	font-size: 0.94rem;
}

.site-footer__list a {
	color: var(--muted);
	transition: color var(--dur) var(--ease);
}

.site-footer__list a:hover {
	color: var(--accent);
}

.site-footer__contacts li {
	display: flex;
	gap: 0.7rem;
	align-items: flex-start;
	color: var(--muted);
}

.site-footer__contacts svg {
	flex: none;
	margin-top: 0.18rem;
	color: var(--accent);
}

.site-footer__contacts a:hover { color: var(--accent); }

.social {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 1.6rem;
}

.social__link {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border: 1px solid var(--line-invert);
	border-radius: 50%;
	color: var(--muted);
	transition: all var(--dur) var(--ease);
}

.social__link:hover {
	border-color: var(--accent);
	background: var(--accent);
	color: var(--accent-ink);
	transform: translateY(-3px);
}

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.8rem 1.5rem;
	padding-block: 1.5rem;
	border-top: 1px solid var(--line-invert);
	font-size: 0.84rem;
	color: var(--muted);
}

.site-footer__policy-list {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
}

.site-footer__policy-list a:hover { color: var(--accent); }

.site-footer__note {
	width: 100%;
	color: rgba(236, 235, 232, 0.42);
	font-size: 0.78rem;
}

/* -------------------------------------------------------------------------
   23. Floating rail + QR dialog
   ---------------------------------------------------------------------- */

.rail {
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	z-index: 90;
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.rail--right { right: clamp(0.5rem, 1.5vw, 1.25rem); }
.rail--left { left: clamp(0.5rem, 1.5vw, 1.25rem); }

.rail.is-tucked {
	opacity: 0;
	pointer-events: none;
	transform: translateY(-50%) translateX(20px);
}

.rail__list {
	display: grid;
	gap: 0.4rem;
}

.rail__btn {
	position: relative;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: var(--radius);
	background: var(--ink);
	color: var(--text);
	border: 1px solid var(--line-invert);
	box-shadow: var(--shadow-sm);
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.rail__btn:hover {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--accent-ink);
	transform: translateY(-2px);
}

.rail__tip {
	position: absolute;
	top: 50%;
	right: calc(100% + 10px);
	transform: translateY(-50%) translateX(6px);
	padding: 0.35rem 0.65rem;
	background: var(--ink);
	color: var(--text);
	border-radius: 3px;
	font-size: 0.76rem;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.rail--left .rail__tip {
	right: auto;
	left: calc(100% + 10px);
	transform: translateY(-50%) translateX(-6px);
}

.rail__btn:hover .rail__tip,
.rail__btn:focus-visible .rail__tip {
	opacity: 1;
	transform: translateY(-50%) translateX(0);
}

@media (max-width: 720px) {
	.rail--desktop { display: none; }

	.rail {
		top: auto;
		bottom: calc(1rem + env(safe-area-inset-bottom));
		transform: none;
	}

	.rail.is-tucked { transform: translateY(20px); }

	.rail__list {
		grid-auto-flow: column;
	}

	.rail__tip { display: none; }

	.rail__btn {
		width: 44px;
		height: 44px;
	}
}

.qr-modal {
	position: fixed;
	inset: 0;
	z-index: 220;
	display: grid;
	place-items: center;
	padding: var(--gutter);
}

.qr-modal__scrim {
	position: absolute;
	inset: 0;
	background: rgba(3, 3, 4, 0.78);
	opacity: 0;
	transition: opacity 0.28s var(--ease);
}

.qr-modal.is-open .qr-modal__scrim { opacity: 1; }

.qr-modal__dialog {
	position: relative;
	width: min(400px, 100%);
	padding: 2rem;
	background: var(--surface);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	opacity: 0;
	transform: translateY(14px) scale(0.98);
	transition: opacity 0.28s var(--ease), transform 0.28s var(--ease);
}

.qr-modal.is-open .qr-modal__dialog {
	opacity: 1;
	transform: none;
}

.qr-modal__close {
	position: absolute;
	top: 0.6rem;
	right: 0.6rem;
	color: var(--muted);
}

.qr-modal__close:hover {
	background: var(--surface-2);
	color: var(--text);
}

.qr-card {
	display: grid;
	gap: 0.9rem;
	justify-items: center;
	text-align: center;
}

.qr-card__title {
	font-size: 1.2rem;
}

.qr-card__text {
	color: var(--muted);
	font-size: 0.92rem;
}

.qr-card__img {
	width: min(220px, 100%);
	height: auto;
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

/* -------------------------------------------------------------------------
   24. Shop archive
   ---------------------------------------------------------------------- */

.section--shop .woocommerce-notices-wrapper:empty { display: none; }

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	padding: 1rem 1.2rem;
	margin-bottom: 1.5rem;
	border: 1px solid var(--line);
	border-left: 3px solid var(--accent);
	border-radius: var(--radius);
	background: var(--surface-2);
	font-size: 0.94rem;
	list-style: none;
}

/* -------------------------------------------------------------------------
   25. Responsive refinements
   ---------------------------------------------------------------------- */

@media (max-width: 900px) {
	.hero {
		min-height: auto;
		padding-top: 5rem;
	}

	.hero__inner {
		padding-bottom: 3rem;
	}

	.hero-spec {
		padding-right: 1rem;
	}
}

@media (max-width: 620px) {
	.topbar__text { display: none; }

	.hero__actions .btn { flex: 1 1 100%; }

	.p-card__actions { flex-direction: column; align-items: stretch; }

	.p-card__actions .btn { width: 100%; }

	.p-single__actions .btn { width: 100%; }

	.spec-table__row { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }

	.site-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* -------------------------------------------------------------------------
   26. Reduced motion
   ---------------------------------------------------------------------- */

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

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	html.has-motion [data-motion-text],
	html.has-motion [data-reveal],
	html.has-motion [data-reveal-group],
	html.has-motion [data-image-reveal] {
		visibility: visible;
	}

	.hero__cue {
		display: none;
	}

	.marquee__track {
		width: 100%;
		white-space: normal;
	}

	.marquee__item + .marquee__item { display: none; }
}

/* =========================================================================
   27. Editorial chapter skin

   This is the only skin layer in the file. It sets the display scale, the
   mono technical voice, the hairline structure and the per-chapter surfaces.
   Everything above it is structure — grids, positioning, flow — which the
   chapters inherit rather than override.
   ========================================================================= */

body {
	background: var(--ink);
	font-size: var(--fs-body);
	line-height: 1.66;
}

/* ---- 27.1 Display scale ------------------------------------------------
   The whole hierarchy hangs off one idea: display type is very large and
   very tight, body copy stays quiet, and the mono labels sit between them
   carrying every technical value on the page.
   ---------------------------------------------------------------------- */

h1, h2, h3, h4 {
	font-weight: 800;
	letter-spacing: var(--track-display);
	line-height: 1.02;
	color: var(--text-strong);
}

.hero__title,
.chead__title,
.story__title,
.cta__title,
.page-hero__title,
.p-single__title,
.reel__title,
.empty__title {
	text-transform: none;
	font-weight: 800;
	letter-spacing: var(--track-display);
	text-wrap: balance;
}

.hero__title {
	font-size: var(--fs-display);
	line-height: 0.92;
	max-width: 15ch;
}

.chead__title,
.story__title,
.cta__title,
.reel__title {
	font-size: var(--fs-chapter);
	line-height: 0.98;
}

.page-hero__title,
.p-single__title {
	font-size: var(--fs-chapter);
	line-height: 1;
}

.story-panel__title,
.ind-card__title,
.p-card__title,
.n-card__title,
.step__title,
.cat-card__name {
	font-family: var(--font-display);
	font-size: var(--fs-h3);
	font-weight: 700;
	line-height: 1.16;
	letter-spacing: -0.018em;
}

/* ---- 27.2 The mono voice ---------------------------------------------
   Labels, numerals, specs and counts are all mono. It is the one thread
   that runs through every chapter regardless of its field.
   ---------------------------------------------------------------------- */

.eyebrow,
.chead__meta,
.p-card__kicker,
.p-card__spec,
.cat-card__count,
.n-card__meta,
.hero-spec__label,
.stat__label,
.story-panel__index,
.step__index,
.cat-card__index,
.result__type,
.p-single__sku,
.spec-table__row dt {
	font-family: var(--font-mono);
	font-size: var(--fs-mono);
	font-weight: 400;
	letter-spacing: var(--track-mono);
	text-transform: uppercase;
}

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	color: var(--muted);
}

.eyebrow--light,
.page-hero .eyebrow,
.p-inquiry .eyebrow { color: var(--muted); }

.eyebrow__mark {
	width: 26px;
	height: var(--hair);
	background: var(--accent);
	flex: none;
}

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--font-mono);
	font-size: var(--fs-mono);
	letter-spacing: var(--track-mono);
	text-transform: uppercase;
	color: var(--text);
	padding-bottom: 0.5rem;
	border-bottom: var(--hair) solid var(--line-strong);
	transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.link-arrow:hover { color: var(--accent); border-color: var(--accent); }
.link-arrow svg { transition: transform var(--dur) var(--ease); }
.link-arrow:hover svg { transform: translateX(5px); }

/* ---- 27.3 Buttons and chips ------------------------------------------ */

/* No `display` here on purpose. The base layer sets it, and several buttons —
   the header CTA above all — are switched off with `display: none` at narrow
   widths. Restating it in this later block would turn the header CTA back on
   at 390px and push the whole page wider than the viewport. */
.btn {
	gap: 0.7rem;
	min-height: 54px;
	padding: 0 1.75rem;
	border: var(--hair) solid transparent;
	border-radius: 0;
	font-family: var(--font-mono);
	font-size: var(--fs-mono);
	font-weight: 500;
	letter-spacing: var(--track-mono);
	text-transform: uppercase;
	white-space: nowrap;
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.btn--sm { min-height: 46px; padding: 0 1.25rem; }
.btn--xs { min-height: 38px; padding: 0 1rem; }

.btn--primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn--primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--accent-ink); }

.btn--ghost { background: transparent; color: var(--text); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }

.btn--line { background: transparent; border-color: var(--line-strong); color: var(--text); }
.btn--line:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

.btn__icon { display: inline-flex; transition: transform var(--dur) var(--ease); }
.btn:hover .btn__icon { transform: translateX(4px); }

.chip {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	padding: 0 0.95rem;
	border: var(--hair) solid var(--line);
	border-radius: 0;
	font-family: var(--font-mono);
	font-size: var(--fs-mono);
	letter-spacing: var(--track-mono);
	text-transform: uppercase;
	color: var(--muted);
	transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

/* The base layer fills hover and active with brass; only the active state
   should be filled, or the label is brass text on a brass block. */
.chip:hover {
	background: transparent;
	color: var(--accent);
	border-color: var(--accent);
}

.chip.is-active {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--accent-ink);
}

/* ---- 27.4 Header ------------------------------------------------------
   The header is part of the fixed frame, so it keeps the ink field however
   light the chapter scrolling under it is.
   ---------------------------------------------------------------------- */

.site-header {
	--surface: var(--ink);
	--text: #eceae3;
	--muted: #8c8a83;
	--line: var(--line-invert);
	--line-strong: var(--line-invert-strong);
	--accent: var(--brass);
	background: var(--ink);
	color: var(--text);
	border-bottom: var(--hair) solid var(--line-invert);
	box-shadow: none;
}

.site-header.is-condensed {
	background: rgba(8, 8, 10, 0.94);
	backdrop-filter: saturate(140%) blur(14px);
}

.site-header__inner { max-width: var(--shell); }

.topbar {
	background: var(--ink);
	border-bottom: var(--hair) solid var(--line-invert);
}

.topbar__text,
.topbar__contacts a {
	font-family: var(--font-mono);
	font-size: var(--fs-mono);
	letter-spacing: var(--track-mono);
	text-transform: uppercase;
	color: var(--muted);
}

.topbar__contacts a:hover { color: var(--accent); }

.brand__type {
	font-family: var(--font-display);
	font-weight: 800;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--text);
}

/* Three brass bars — a level meter, not a droplet. The element is empty in the
   markup, so the bars are painted rather than made of child nodes. */
.brand__mark {
	display: inline-block;
	flex: none;
	width: 17px;
	height: 20px;
	background-image:
		linear-gradient(var(--accent), var(--accent)),
		linear-gradient(var(--accent), var(--accent)),
		linear-gradient(var(--accent), var(--accent));
	background-repeat: no-repeat;
	background-size: 3px 58%, 3px 100%, 3px 40%;
	background-position: 0 100%, 7px 100%, 14px 100%;
}

.brand__tagline {
	font-family: var(--font-mono);
	font-size: 0.62rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--muted);
}

.menu-link {
	color: var(--text);
	font-family: var(--font-mono);
	font-size: var(--fs-mono);
	font-weight: 400;
	letter-spacing: var(--track-mono);
	text-transform: uppercase;
}

.menu-link::after { background: var(--accent); }

.nav .submenu {
	background: var(--ink-2);
	border: var(--hair) solid var(--line-invert);
	border-radius: 0;
}

.submenu-link { color: var(--muted); border-radius: 0; }
.submenu-link:hover { color: var(--text); }

.cart-badge {
	position: absolute;
	top: -4px;
	right: -6px;
	min-width: 17px;
	height: 17px;
	display: grid;
	place-items: center;
	padding: 0 4px;
	background: var(--accent);
	color: var(--text-invert);
	font-family: var(--font-mono);
	font-size: 0.6rem;
	line-height: 1;
}

.cart-badge.is-empty { display: none; }
.icon-btn--cart { position: relative; }
.icon-btn { border-radius: 0; color: var(--text); }
.icon-btn:hover { color: var(--accent); }

.search-panel { background: var(--ink-2); border-color: var(--line-invert); color: #eceae3; }
.searchform { border-color: var(--line-invert-strong); border-radius: 0; }
.searchform__input { color: #eceae3; }
.searchform__input::placeholder { color: #8c8a83; }
.searchform__submit { color: var(--brass); }
.search-panel__close { color: #8c8a83; }

.empty__search .searchform__input,
.search-again .searchform__input { color: var(--text); }

.empty__search .searchform__submit,
.search-again .searchform__submit { color: var(--accent); }

.mobile-nav__panel { background: var(--ink); color: #eceae3; }
.mobile-nav__head { border-color: var(--line-invert); }
.mobile-nav__list li { border-color: var(--line-invert); }

.mobile-nav__list .menu-link {
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	text-transform: none;
	color: #eceae3;
}

.mobile-nav__list .submenu-link { color: #8c8a83; }
.mobile-nav__contacts { color: #8c8a83; }

/* ---- 27.5 Hero --------------------------------------------------------
   Full-bleed photograph as the stage, copy anchored low in one lane, spec
   rail along the foot. The image is the LCP element and never lazy.
   ---------------------------------------------------------------------- */

.hero {
	--surface: var(--ink);
	--text: #eceae3;
	--muted: #8c8a83;
	--line: var(--line-invert);
	--line-strong: var(--line-invert-strong);
	--accent: var(--brass);
	position: relative;
	min-height: min(96vh, 980px);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	background: var(--ink);
	color: var(--text);
	overflow: hidden;
	padding-top: clamp(5rem, 12vw, 9rem);
}

.hero__media { position: absolute; inset: 0; z-index: 0; }

.hero__img,
.hero__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero__video { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s var(--ease); }
.hero__video.is-playing { opacity: 1; }

.hero__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(8, 8, 10, 0.82) 0%, rgba(8, 8, 10, 0.18) 34%, rgba(8, 8, 10, 0.72) 76%, rgba(8, 8, 10, 0.96) 100%),
		linear-gradient(90deg, rgba(8, 8, 10, 0.9) 0%, rgba(8, 8, 10, 0.25) 52%, rgba(8, 8, 10, 0.05) 100%);
}

/* Guide rails over the photograph: the grid made just visible enough to
   feel deliberate, never heavy enough to compete with the image. */
.hero__rules {
	display: block;
	position: absolute;
	inset-block: 0;
	left: var(--edge);
	right: var(--edge);
	background-image:
		linear-gradient(90deg, var(--line-invert) var(--hair), transparent var(--hair));
	background-size: calc(100% / 6) 100%;
	opacity: 0.55;
}

@media (max-width: 700px) { .hero__rules { display: none; } }

.hero__inner {
	position: relative;
	z-index: 2;
	padding-bottom: clamp(2.5rem, 5vw, 4rem);
	display: grid;
	gap: clamp(1.1rem, 2vw, 1.6rem);
	justify-items: start;
}

.hero__text {
	max-width: 46ch;
	color: #cdc9c0;
	font-size: var(--fs-lead);
	line-height: 1.6;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 0.7rem; }

/*
 * Spectrum rule: forty-eight brass bars of varying height across the foot of
 * the hero. Purely decorative — no script, no audio. Heights come from a
 * 12-step base cycle multiplied by a 7-step cycle, so the pattern does not
 * visibly repeat across the row.
 */
.hero__spectrum {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: flex-end;
	gap: 3px;
	height: 34px;
	padding-inline: var(--edge);
	max-width: var(--shell);
	margin-inline: auto;
	width: 100%;
}

.hero__spectrum span {
	flex: 1;
	background: var(--brass);
	opacity: 0.5;
	height: calc(var(--b, 0.4) * var(--m, 1) * 100%);
	min-height: 2px;
}

.hero__spectrum span:nth-child(12n + 1)  { --b: 0.20; }
.hero__spectrum span:nth-child(12n + 2)  { --b: 0.46; }
.hero__spectrum span:nth-child(12n + 3)  { --b: 0.30; }
.hero__spectrum span:nth-child(12n + 4)  { --b: 0.68; }
.hero__spectrum span:nth-child(12n + 5)  { --b: 0.24; }
.hero__spectrum span:nth-child(12n + 6)  { --b: 0.88; }
.hero__spectrum span:nth-child(12n + 7)  { --b: 0.36; }
.hero__spectrum span:nth-child(12n + 8)  { --b: 0.56; }
.hero__spectrum span:nth-child(12n + 9)  { --b: 0.22; }
.hero__spectrum span:nth-child(12n + 10) { --b: 0.74; }
.hero__spectrum span:nth-child(12n + 11) { --b: 0.44; }
.hero__spectrum span:nth-child(12n + 12) { --b: 0.32; }

.hero__spectrum span:nth-child(7n + 1) { --m: 0.9; }
.hero__spectrum span:nth-child(7n + 2) { --m: 1.15; }
.hero__spectrum span:nth-child(7n + 3) { --m: 0.7; }
.hero__spectrum span:nth-child(7n + 4) { --m: 1.3; }
.hero__spectrum span:nth-child(7n + 5) { --m: 0.85; }
.hero__spectrum span:nth-child(7n + 6) { --m: 1.05; }
.hero__spectrum span:nth-child(7n + 7) { --m: 0.75; }

.hero__specs {
	position: relative;
	z-index: 2;
	border-top: var(--hair) solid var(--line-invert);
	background: rgba(8, 8, 10, 0.72);
	backdrop-filter: blur(10px);
}

.hero__specs-inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.hero-spec {
	display: grid;
	gap: 0.4rem;
	padding: clamp(1rem, 2vw, 1.5rem) 0;
	padding-right: 1.5rem;
}

.hero-spec + .hero-spec {
	padding-left: 1.5rem;
	border-left: var(--hair) solid var(--line-invert);
}

.hero-spec__label { color: #8c8a83; }

.hero-spec__value {
	font-family: var(--font-display);
	font-size: clamp(1rem, 1.5vw, 1.22rem);
	font-weight: 700;
	letter-spacing: -0.015em;
	color: #eceae3;
}

.hero__cue { position: absolute; right: var(--edge); bottom: 22%; z-index: 2; }

.hero__cue-line {
	display: block;
	width: var(--hair);
	height: 64px;
	background: linear-gradient(180deg, transparent, var(--brass));
}

/* ---- 27.6 Ribbon ------------------------------------------------------ */

.marquee {
	background: var(--ink);
	border-block: var(--hair) solid var(--line-invert);
	padding-block: 1.05rem;
	overflow: hidden;
}

.marquee__item {
	font-family: var(--font-mono);
	font-size: var(--fs-mono);
	letter-spacing: var(--track-mono);
	text-transform: uppercase;
	color: #6f6d67;
	padding-inline: 1.6rem;
}

/* ---- 27.7 The range: product index -----------------------------------
   Products are an index, not a wall of tiles: a numbered row per product
   with the photograph and the figures side by side, so the catalogue reads
   like a specification sheet rather than a grid of thumbnails.
   ---------------------------------------------------------------------- */

.p-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
	gap: var(--col-gap) var(--col-gap);
	border-top: var(--hair) solid var(--line);
}

/* An index row, not a tile: no fill, no shadow, one hairline underneath. The
   hover state moves the rule to brass and eases the photograph rather than
   dropping a panel behind the card, which on a paper chapter would read as a
   white box floating on cream. */
.p-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: transparent;
	border: 0;
	border-bottom: var(--hair) solid var(--line);
	border-radius: 0;
	padding-block: clamp(1.4rem, 2.4vw, 2rem);
	transition: border-color var(--dur) var(--ease);
}

.p-card:hover { border-bottom-color: var(--accent); }

.p-card__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--surface-3);
	margin-bottom: 1.2rem;
}

.p-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.9s var(--ease-out);
}

.p-card:hover .p-card__media img { transform: scale(1.045); }

.p-card__flag {
	position: absolute;
	top: 0;
	left: 0;
	padding: 0.35rem 0.7rem;
	background: var(--accent);
	color: var(--accent-ink);
	font-family: var(--font-mono);
	font-size: 0.6rem;
	letter-spacing: var(--track-mono);
	text-transform: uppercase;
}

.p-card__body { display: grid; gap: 0.6rem; flex: 1; }
.p-card__kicker { color: var(--muted); }
.p-card__title a:hover { color: var(--accent); }
.p-card__text { color: var(--muted); font-size: var(--fs-small); line-height: 1.6; }

.p-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1rem;
	padding-top: 0.75rem;
	border-top: var(--hair) solid var(--line);
}

.p-card__spec { color: var(--muted); }

.price {
	font-family: var(--font-mono);
	font-size: 0.95rem;
	letter-spacing: 0.02em;
	color: var(--text-strong);
}

.price del { color: var(--muted); text-decoration-thickness: 1px; margin-right: 0.5rem; }
.price ins { text-decoration: none; color: var(--accent); }

.p-card__actions { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.9rem; }

.p-card__actions .btn {
	min-height: 42px;
	padding: 0 1.1rem;
	border-color: var(--line-strong);
	color: var(--text);
	background: transparent;
}

.p-card__actions .btn:hover,
.p-card__actions .btn:focus-visible {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--accent-ink);
}

.p-card__actions .btn.added { border-color: var(--accent); color: var(--accent); }

/* ---- 27.8 Collections ------------------------------------------------- */

/* The base layer paints the grid with the hairline colour and closes the gap
   to 1px, so the tiles read as one block divided by rules. This chapter wants
   the tiles separate, so the panel has to go with the gap. */
.cat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
	gap: var(--col-gap);
	background: transparent;
	border: 0;
}

.cat-card {
	position: relative;
	display: block;
	overflow: hidden;
	border: var(--hair) solid var(--line);
	border-radius: 0;
	background: var(--surface-3);
}

.cat-card:hover { border-color: var(--accent); }

.cat-card__media { display: block; aspect-ratio: 5 / 4; overflow: hidden; }

.cat-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1s var(--ease-out);
}

.cat-card:hover .cat-card__img { transform: scale(1.06); }

.cat-card__media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(8, 8, 10, 0.05) 0%, rgba(8, 8, 10, 0.82) 100%);
}

.cat-card__body {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	z-index: 2;
	display: grid;
	gap: 0.3rem;
	padding: clamp(1rem, 2vw, 1.5rem);
	color: #eceae3;
}

.cat-card__index { color: var(--brass); }
.cat-card__name { color: #ffffff; }
.cat-card__count { color: rgba(236, 234, 227, 0.62); }

.cat-card__go {
	position: absolute;
	right: clamp(1rem, 2vw, 1.5rem);
	bottom: clamp(1rem, 2vw, 1.5rem);
	color: var(--brass);
	transition: transform var(--dur) var(--ease);
}

.cat-card:hover .cat-card__go { transform: translateX(5px); }

/* ---- 27.9 Story theatre ----------------------------------------------- */

.story {
	background: var(--surface);
	border-block: var(--hair) solid var(--line);
}

/* Panels are absolutely stacked and cross-faded while the scene is pinned, so
   each one has to be opaque. The base layer gave them a 3% white wash, which
   let every previous panel read straight through the current one. */
.story-panel {
	display: grid;
	gap: 1rem;
	align-content: center;
	background: var(--surface);
	border: var(--hair) solid var(--line);
	border-radius: 0;
	padding: clamp(1.6rem, 3vw, 2.6rem);
}

.story-panel__title { text-transform: none; }
.story-panel__index { color: var(--accent); }
.story-panel__text { color: var(--muted); font-size: var(--fs-lead); line-height: 1.6; max-width: 46ch; }

.story__progress { height: var(--hair); background: var(--line); margin-top: 2rem; }

.story__progress-bar {
	display: block;
	height: 100%;
	width: 100%;
	background: var(--accent);
	transform-origin: left center;
	transform: scaleX(0);
}

/* ---- 27.10 Reel -------------------------------------------------------- */

.reel { background: var(--ink); color: #eceae3; }
.reel__scrim { background: linear-gradient(180deg, rgba(8, 8, 10, 0.55), rgba(8, 8, 10, 0.9)); }
.reel__text { color: #b7b3ab; max-width: 46ch; }

.reel__step {
	font-family: var(--font-mono);
	font-size: var(--fs-mono);
	letter-spacing: var(--track-mono);
	text-transform: uppercase;
	color: rgba(236, 234, 227, 0.4);
	padding-block: 0.5rem;
	border-top: var(--hair) solid var(--line-invert);
	transition: color var(--dur) var(--ease);
}

.reel__step.is-active { color: var(--brass); }

/* ---- 27.11 Detail track ------------------------------------------------ */

/* The base rule paints this section with the raised surface, which is white
   on a paper chapter. A chapter always paints its own field. */
.section--ind {
	overflow: hidden;
	background: var(--surface);
}

.ind-card {
	flex: none;
	width: min(78vw, 460px);
	display: grid;
	gap: 1.2rem;
	align-content: start;
}

.ind-card__media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--surface-3);
	border: var(--hair) solid var(--line);
}

.ind-card__img { width: 100%; height: 100%; object-fit: cover; }
.ind-card__text { color: var(--muted); font-size: var(--fs-small); line-height: 1.65; }

/* ---- 27.12 Numbers and steps ------------------------------------------- */

.stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
	border-top: var(--hair) solid var(--line);
}

.stat {
	display: grid;
	gap: 0.5rem;
	padding: clamp(1.6rem, 3vw, 2.4rem) 0;
	padding-right: 1.5rem;
	border-bottom: var(--hair) solid var(--line);
}

.stat + .stat { padding-left: 1.5rem; border-left: var(--hair) solid var(--line); }

.stat__value {
	font-family: var(--font-display);
	font-size: clamp(2.2rem, 4.4vw, 3.6rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: var(--track-display);
	color: var(--text-strong);
}

.stat__label { color: var(--muted); }

.steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: 0;
	border-top: var(--hair) solid var(--line);
}

.step {
	position: relative;
	display: grid;
	gap: 0.8rem;
	align-content: start;
	padding: clamp(1.8rem, 3vw, 2.6rem) clamp(1.2rem, 2vw, 1.8rem) clamp(1.8rem, 3vw, 2.6rem) 0;
	border-bottom: var(--hair) solid var(--line);
	background: transparent;
	border-radius: 0;
	transition: background var(--dur) var(--ease);
}

.step + .step { padding-left: clamp(1.2rem, 2vw, 1.8rem); border-left: var(--hair) solid var(--line); }
.step:hover { background: var(--surface-2); }
.step__icon { color: var(--accent); }
.step__index { color: var(--muted); }
.step__text { color: var(--muted); font-size: var(--fs-small); line-height: 1.65; }

/* ---- 27.13 Journal ----------------------------------------------------- */

.n-card__media {
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--surface-3);
	margin-bottom: 1.1rem;
}

.n-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease-out); }
.n-card:hover .n-card__media img { transform: scale(1.045); }
.n-card__title a:hover { color: var(--accent); }
.n-card__meta { color: var(--muted); }
.n-card__excerpt { color: var(--muted); font-size: var(--fs-small); line-height: 1.65; }

/* ---- 27.14 Closing block and newsletter -------------------------------- */

.cta {
	--surface: var(--ink);
	--text: #eceae3;
	--muted: #8c8a83;
	--line: var(--line-invert);
	--line-strong: var(--line-invert-strong);
	--accent: var(--brass);
	background: var(--ink);
	color: var(--text);
}

/* Chapter scale, not display scale: the hero has to stay the largest moment
   on the page, and at 147px this closing line runs to four lines and outshouts
   it. */
.cta__title { font-size: var(--fs-chapter); line-height: 0.98; max-width: 16ch; }
.cta__text,
.cta__contacts li { color: #b7b3ab; }

.newsletter-form input[type="email"],
.newsletter-form input[type="text"] {
	background: transparent;
	border: var(--hair) solid var(--line-strong);
	border-radius: 0;
	min-height: 54px;
	padding: 0 1rem;
	color: var(--text);
	font-family: var(--font-mono);
	font-size: var(--fs-small);
}

.newsletter-form input::placeholder { color: var(--muted); }
.newsletter-form input:focus { border-color: var(--accent); outline: none; }

.newsletter-form button,
.newsletter-form input[type="submit"] {
	min-height: 54px;
	padding: 0 1.6rem;
	background: var(--accent);
	color: var(--accent-ink);
	border: var(--hair) solid var(--accent);
	border-radius: 0;
	font-family: var(--font-mono);
	font-size: var(--fs-mono);
	letter-spacing: var(--track-mono);
	text-transform: uppercase;
	cursor: pointer;
}

.newsletter-form button:hover,
.newsletter-form input[type="submit"]:hover { background: var(--accent-deep); border-color: var(--accent-deep); }

.newsletter-form form { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.newsletter__admin { color: var(--muted); font-size: var(--fs-small); }

/* ---- 27.15 Inner pages ------------------------------------------------- */

.page-hero {
	--surface: var(--ink);
	--text: #eceae3;
	--muted: #8c8a83;
	--line: var(--line-invert);
	--line-strong: var(--line-invert-strong);
	--accent: var(--brass);
	background: var(--ink);
	color: var(--text);
	border-bottom: var(--hair) solid var(--line-invert);
	padding-block: clamp(6rem, 12vw, 10rem) clamp(3rem, 6vw, 5rem);
}

.page-hero__text { color: #b7b3ab; max-width: var(--measure); font-size: var(--fs-lead); }
.page-hero--media .crumbs__list,
.page-hero--media .eyebrow,
.page-hero--media .page-hero__text { color: rgba(236, 234, 227, 0.78); }

.crumbs__list,
.page-hero .crumbs__list,
.p-single .crumbs__list {
	font-family: var(--font-mono);
	font-size: var(--fs-mono);
	letter-spacing: var(--track-mono);
	text-transform: uppercase;
	color: var(--muted);
}

.prose { color: var(--text); font-size: 1.02rem; line-height: 1.78; max-width: var(--measure); }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

.prose blockquote {
	border-left: 2px solid var(--accent);
	padding-left: 1.4rem;
	color: var(--text);
	font-size: var(--fs-lead);
}

.prose th,
.prose td { border-color: var(--line); }
.prose th { color: var(--text-strong); font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--track-mono); text-transform: uppercase; }
.prose img { border-radius: 0; }

.pager .page-numbers { border-color: var(--line); border-radius: 0; color: var(--muted); }
.pager .page-numbers.current,
.pager .page-numbers:hover { border-color: var(--accent); color: var(--accent); }

.post-nav { border-color: var(--line); }

.tags a {
	border: var(--hair) solid var(--line);
	border-radius: 0;
	color: var(--muted);
	font-family: var(--font-mono);
	font-size: var(--fs-mono);
	letter-spacing: var(--track-mono);
	text-transform: uppercase;
}

.tags a:hover { border-color: var(--accent); color: var(--accent); }

/* ---- 27.16 Product single ---------------------------------------------- */

.p-single__sku { color: var(--muted); }

.p-single__price {
	font-family: var(--font-mono);
	font-size: clamp(1.3rem, 2.2vw, 1.7rem);
	color: var(--text-strong);
}

.p-single__short { color: var(--muted); font-size: var(--fs-lead); line-height: 1.62; max-width: 48ch; }
.p-single__ship { color: var(--muted); font-size: var(--fs-small); }
.p-single__ship svg,
.p-single__highlights svg { color: var(--accent); }

.p-single__gallery .woocommerce-product-gallery { background: var(--surface-3); border: var(--hair) solid var(--line); }
.p-single__gallery .flex-control-thumbs img { border: var(--hair) solid var(--line); border-radius: 0; opacity: 0.6; }
.p-single__gallery .flex-control-thumbs img.flex-active,
.p-single__gallery .flex-control-thumbs img:hover { opacity: 1; border-color: var(--accent); }

.spec-table { border-top: var(--hair) solid var(--line); }

.spec-table__title {
	font-family: var(--font-mono);
	font-size: var(--fs-mono);
	letter-spacing: var(--track-mono);
	text-transform: uppercase;
	color: var(--muted);
	padding-block: 1rem;
}

.spec-table__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 1rem; padding-block: 0.85rem; border-bottom: var(--hair) solid var(--line); }
.spec-table__row dt { color: var(--muted); margin: 0; }
.spec-table__row dd { margin: 0; font-family: var(--font-mono); font-size: 0.86rem; color: var(--text); }

.section--p-desc { border-top: var(--hair) solid var(--line); }

.p-single__summary form.cart { display: grid; gap: 0.9rem; }

.p-single__summary .quantity input.qty {
	min-height: 54px;
	width: 84px;
	background: transparent;
	border: var(--hair) solid var(--line-strong);
	border-radius: 0;
	color: var(--text);
	text-align: center;
	font-family: var(--font-mono);
}

.p-single__summary form.cart button[type="submit"],
.p-single__summary .single_add_to_cart_button {
	min-height: 54px;
	padding: 0 1.8rem;
	background: var(--accent);
	color: var(--accent-ink);
	border: var(--hair) solid var(--accent);
	border-radius: 0;
	font-family: var(--font-mono);
	font-size: var(--fs-mono);
	letter-spacing: var(--track-mono);
	text-transform: uppercase;
	cursor: pointer;
}

.p-single__summary form.cart button[type="submit"]:hover,
.p-single__summary .single_add_to_cart_button:hover { background: var(--accent-deep); border-color: var(--accent-deep); }

.p-single__summary .stock { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--accent); }
.p-single__summary .stock.out-of-stock { color: var(--danger); }
.p-single__summary .variations th,
.p-single__summary .variations td { border-color: var(--line); color: var(--text); }

.p-single__summary .variations select {
	min-height: 50px;
	background: transparent;
	border: var(--hair) solid var(--line-strong);
	border-radius: 0;
	color: var(--text);
	padding: 0 0.8rem;
}

/* ---- 27.17 Contact and inquiry ----------------------------------------- */

.contact__icon { color: var(--accent); }
.contact__label { color: var(--muted); font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--track-mono); text-transform: uppercase; }
.contact__map { border: var(--hair) solid var(--line); border-radius: 0; }

.rsn-inquiry input[type="text"],
.rsn-inquiry input[type="email"],
.rsn-inquiry input[type="tel"],
.rsn-inquiry input[type="url"],
.rsn-inquiry input[type="number"],
.rsn-inquiry select,
.rsn-inquiry textarea,
.zc-inquiry-form input[type="text"],
.zc-inquiry-form input[type="email"],
.zc-inquiry-form input[type="tel"],
.zc-inquiry-form input[type="url"],
.zc-inquiry-form input[type="number"],
.zc-inquiry-form select,
.zc-inquiry-form textarea,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	min-height: 52px;
	padding: 0.85rem 1rem;
	background: transparent;
	border: var(--hair) solid var(--line-strong);
	border-radius: 0;
	color: var(--text);
	font-size: var(--fs-small);
}

.rsn-inquiry textarea,
.zc-inquiry-form textarea,
.comment-form textarea { min-height: 150px; }

.rsn-inquiry input::placeholder,
.rsn-inquiry textarea::placeholder,
.zc-inquiry-form input::placeholder,
.zc-inquiry-form textarea::placeholder,
.comment-form input::placeholder,
.comment-form textarea::placeholder { color: var(--muted); }

.rsn-inquiry button[type="submit"],
.zc-inquiry-form button[type="submit"],
.rsn-inquiry input[type="submit"],
.zc-inquiry-form input[type="submit"] {
	min-height: 54px;
	padding: 0 1.8rem;
	background: var(--accent);
	color: var(--accent-ink);
	border: var(--hair) solid var(--accent);
	border-radius: 0;
	font-family: var(--font-mono);
	font-size: var(--fs-mono);
	letter-spacing: var(--track-mono);
	text-transform: uppercase;
	cursor: pointer;
}

.inquiry-fallback { border: var(--hair) solid var(--line); padding: clamp(1.2rem, 2.5vw, 1.8rem); }
.inquiry-fallback__title { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--muted); }

/* ---- 27.18 System surfaces, footer, rail ------------------------------- */

.result__type { color: var(--accent); }

.site-footer {
	--surface: var(--ink);
	--text: #eceae3;
	--muted: #8c8a83;
	--line: var(--line-invert);
	--line-strong: var(--line-invert-strong);
	--accent: var(--brass);
	background: var(--ink);
	color: var(--text);
	border-top: var(--hair) solid var(--line-invert);
}

.site-footer__about { color: #b7b3ab; max-width: 40ch; }

.site-footer__title {
	font-family: var(--font-mono);
	font-size: var(--fs-mono);
	letter-spacing: var(--track-mono);
	text-transform: uppercase;
	color: var(--muted);
	padding-bottom: 0.9rem;
	border-bottom: var(--hair) solid var(--line-invert);
	margin-bottom: 1.1rem;
}

.site-footer__list a { color: #b7b3ab; font-size: var(--fs-small); }
.site-footer__list a:hover { color: var(--accent); }
.site-footer__contacts li { color: #b7b3ab; font-size: var(--fs-small); }
.site-footer__contacts svg { color: var(--accent); }
.site-footer__bottom { border-top: var(--hair) solid var(--line-invert); color: var(--muted); font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0.08em; }

.social__link { border: var(--hair) solid var(--line-invert); border-radius: 0; color: #b7b3ab; }
.social__link:hover { border-color: var(--accent); color: var(--accent); }

.rail__btn { border: var(--hair) solid var(--line-invert); border-radius: 0; background: rgba(8, 8, 10, 0.86); color: #eceae3; backdrop-filter: blur(8px); }
.rail__btn:hover { background: var(--brass); border-color: var(--brass); color: var(--ink); }
.rail__tip { background: var(--ink-2); border: var(--hair) solid var(--line-invert); border-radius: 0; color: #eceae3; font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0.08em; text-transform: uppercase; }

.qr-modal__dialog { background: var(--ink-2); border: var(--hair) solid var(--line-invert); border-radius: 0; color: #eceae3; }
.qr-modal__close:hover { background: var(--steel); color: #eceae3; }
.qr-card__text { color: #8c8a83; }
.qr-card__img { border: var(--hair) solid var(--line-invert); border-radius: 0; }

.widget { border-color: var(--line); border-radius: 0; }
.widget__title { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--muted); }
.widget ul { color: var(--muted); }


/* =========================================================================
   28. Cart, checkout and account
   These are designed theme surfaces, not plugin leftovers. Rules are scoped to
   .wc-page / WooCommerce's own classes so nothing here reaches other forms.
   ========================================================================= */

.section--system { padding-block: clamp(2.5rem, 5vw, 4rem); }

.wc-page {
	max-width: 100%;
	font-size: 1rem;
}

.wc-page a { color: var(--accent); }

.wc-page .woocommerce-notices-wrapper:empty { display: none; }

/* Notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1rem;
	padding: 1rem 1.25rem;
	margin: 0 0 1.5rem;
	background: var(--surface-2);
	border: 1px solid var(--line);
	border-left: 3px solid var(--accent);
	border-radius: var(--radius);
	list-style: none;
	font-size: 0.95rem;
}

.woocommerce-error { border-left-color: var(--danger); }

.woocommerce-message .button,
.woocommerce-info .button {
	margin-left: auto;
}

/* Shared button treatment for WooCommerce's own buttons */
.wc-page .button,
.wc-page button[type="submit"],
.woocommerce-message .button,
.woocommerce-info .button,
.wc-block-components-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 0 1.6rem;
	background: var(--accent);
	color: var(--accent-ink);
	border: 0;
	border-radius: var(--radius);
	font-family: var(--font-body);
	font-size: 0.94rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1;
	cursor: pointer;
	transition: background var(--dur) var(--ease);
}

.wc-page .button:hover,
.wc-page button[type="submit"]:hover,
.wc-block-components-button:hover { background: var(--accent-deep); }

.wc-page .button[disabled],
.wc-page button[disabled] { opacity: 0.55; cursor: not-allowed; }

/* Fields */
.wc-page input[type="text"],
.wc-page input[type="email"],
.wc-page input[type="tel"],
.wc-page input[type="password"],
.wc-page input[type="number"],
.wc-page input[type="search"],
.wc-page select,
.wc-page textarea,
.wc-block-components-text-input input {
	width: 100%;
	min-height: 52px;
	padding: 0.7rem 1rem;
	background: var(--surface-3);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--text);
	font-size: 0.98rem;
}

.wc-page textarea { min-height: 120px; }

.wc-page input::placeholder,
.wc-page textarea::placeholder { color: var(--muted); }

.wc-page select option { background: var(--surface-3); color: var(--text); }

.wc-page input:focus,
.wc-page select:focus,
.wc-page textarea:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.22);
}

.wc-page label { display: block; margin-bottom: 0.35rem; font-size: 0.88rem; font-weight: 500; }
.wc-page .required { color: var(--danger); text-decoration: none; }

/* Billing / shipping field grid — explicit tracks so nothing collapses. */
.wc-page .woocommerce-billing-fields__field-wrapper,
.wc-page .woocommerce-shipping-fields__field-wrapper,
.wc-page .woocommerce-address-fields__field-wrapper {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem 1.25rem;
}

.wc-page .form-row {
	margin: 0;
	float: none !important;
	width: auto !important;
	padding: 0;
}

.wc-page .form-row-wide,
.wc-page .form-row.notes,
.wc-page .form-row[id$="_address_1_field"],
.wc-page .form-row[id$="_address_2_field"],
.wc-page .form-row[id$="_company_field"] {
	grid-column: 1 / -1;
}

@media (max-width: 640px) {
	.wc-page .woocommerce-billing-fields__field-wrapper,
	.wc-page .woocommerce-shipping-fields__field-wrapper,
	.wc-page .woocommerce-address-fields__field-wrapper {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Cart table — a real table on desktop, stacked rows on a phone. */
.wc-page .shop_table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--surface-2);
	font-size: 0.95rem;
}

.wc-page .shop_table th {
	padding: 0.9rem 1rem;
	background: var(--surface-3);
	font-family: var(--font-mono);
	border-bottom: 1px solid var(--line);
	text-align: left;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
}

.wc-page .shop_table td {
	padding: 1rem;
	border-bottom: 1px solid var(--line);
	vertical-align: middle;
}

.wc-page .shop_table img { width: 68px; border-radius: var(--radius); }

.wc-page .product-remove a {
	display: inline-grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--surface-3);
	border: 1px solid var(--line);
	color: var(--muted);
	text-decoration: none;
	font-size: 1.1rem;
	line-height: 1;
}

.wc-page .product-remove a:hover { background: var(--danger); color: var(--surface); }

.wc-page .quantity input.qty {
	width: 84px;
	min-height: 46px;
	text-align: center;
	border-radius: var(--radius);
	border-color: var(--line-strong);
	background: var(--surface-3);
	color: var(--text);
	font-family: var(--font-mono);
}

.wc-page .coupon {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	align-items: center;
}

.wc-page .coupon input[type="text"] { flex: 1 1 200px; min-width: 0; }

.wc-page .actions {
	padding: 1rem;
	background: var(--surface-2);
}

@media (max-width: 760px) {
	.wc-page .shop_table thead { display: none; }

	.wc-page .shop_table,
	.wc-page .shop_table tbody,
	.wc-page .shop_table tr,
	.wc-page .shop_table td { display: block; width: 100%; }

	.wc-page .shop_table tr {
		padding: 0.5rem 0;
		border-bottom: 1px solid var(--line);
	}

	.wc-page .shop_table td {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 1rem;
		border: 0;
		padding: 0.5rem 1rem;
	}

	.wc-page .shop_table td::before {
		content: attr(data-title);
		font-size: 0.75rem;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--muted);
	}

	.wc-page .shop_table td.product-remove::before,
	.wc-page .shop_table td.actions::before { content: none; }

	.wc-page .actions { flex-direction: column; align-items: stretch; }
}

/* Cart totals + checkout review */
.wc-page .cart-collaterals {
	display: grid;
	justify-content: end;
	margin-top: 2rem;
}

.wc-page .cart_totals,
.wc-page .woocommerce-checkout-review-order {
	width: min(100%, 460px);
	padding: 1.5rem;
	background: var(--surface-2);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
}

.wc-page .cart_totals h2,
.wc-page #order_review_heading {
	font-family: var(--font-display);
	font-size: 1.2rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin-bottom: 1rem;
}

.wc-page .cart_totals table,
.wc-page .woocommerce-checkout-review-order-table {
	width: 100%;
	border: 0;
	background: transparent;
}

.wc-page .cart_totals th,
.wc-page .woocommerce-checkout-review-order-table th {
	background: transparent;
	border: 0;
	padding: 0.6rem 0;
	text-transform: none;
	letter-spacing: 0;
	font-size: 0.95rem;
	color: var(--text);
}

.wc-page .cart_totals td,
.wc-page .woocommerce-checkout-review-order-table td {
	border: 0;
	padding: 0.6rem 0;
	text-align: right;
}

.wc-page .order-total th,
.wc-page .order-total td {
	border-top: 1px solid var(--line-strong);
	padding-top: 1rem;
	font-weight: 600;
	font-size: 1.05rem;
}

.wc-page .wc-proceed-to-checkout { margin-top: 1.25rem; }
.wc-page .wc-proceed-to-checkout .button { width: 100%; }

/* Checkout two-column layout */
@media (min-width: 1000px) {
	.wc-page form.checkout {
		display: grid;
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
		gap: clamp(2rem, 4vw, 3.5rem);
		align-items: start;
	}

	.wc-page form.checkout #customer_details { grid-column: 1; }
	.wc-page form.checkout #order_review_heading,
	.wc-page form.checkout #order_review { grid-column: 2; }
	.wc-page .woocommerce-checkout-review-order { width: 100%; position: sticky; top: 100px; }
}

.wc-page #customer_details .col-1,
.wc-page #customer_details .col-2 { width: auto; float: none; }

.wc-page #customer_details .col-2 { margin-top: 2rem; }

.wc-page #payment {
	margin-top: 1.5rem;
	background: transparent;
	border-radius: 0;
}

.wc-page #payment ul.payment_methods {
	display: grid;
	gap: 0.6rem;
	padding: 0;
	margin: 0 0 1.25rem;
	border: 0;
	list-style: none;
}

.wc-page #payment ul.payment_methods li {
	padding: 0.9rem 1rem;
	background: var(--surface-2);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.wc-page #payment .payment_box {
	margin-top: 0.6rem;
	padding: 0.75rem 0 0;
	background: transparent;
	font-size: 0.9rem;
	color: var(--muted);
}

.wc-page #payment .payment_box::before { display: none; }
.wc-page .woocommerce-terms-and-conditions-wrapper { margin-bottom: 1rem; font-size: 0.92rem; }
.wc-page #place_order { width: 100%; }

/* Login / register */
.wc-page .woocommerce-form-login,
.wc-page .woocommerce-form-register,
.wc-page .lost_reset_password {
	max-width: 460px;
	padding: 1.75rem;
	background: var(--surface-2);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	display: grid;
	gap: 1rem;
}

.wc-page .u-columns.col2-set {
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.wc-page .u-column1,
.wc-page .u-column2 { width: auto; float: none; }

/* My Account */
.wc-page .woocommerce-MyAccount-navigation ul {
	display: grid;
	gap: 0.15rem;
	padding: 0.5rem;
	background: var(--surface-2);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
}

.wc-page .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 0.7rem 0.9rem;
	border-radius: var(--radius);
	color: var(--text);
	text-decoration: none;
	font-size: 0.95rem;
}

.wc-page .woocommerce-MyAccount-navigation li a:hover { background: var(--surface-3); color: var(--text); }

.wc-page .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--accent);
	color: var(--text-invert);
	font-weight: 600;
}

@media (min-width: 900px) {
	.wc-page .woocommerce-MyAccount-navigation {
		float: none;
		width: auto;
	}

	.wc-page .woocommerce-MyAccount-content {
		float: none;
		width: auto;
	}

	/* Only when the account navigation is actually rendered. Logged out, the
	   same page shows just the login form, and an unconditional two-column
	   grid drops that form into a 250px sidebar column. */
	.woocommerce-account .wc-page:has(.woocommerce-MyAccount-navigation) {
		display: grid;
		grid-template-columns: 250px minmax(0, 1fr);
		gap: clamp(1.5rem, 3vw, 2.5rem);
		align-items: start;
	}
}

.wc-page .woocommerce-MyAccount-content { min-width: 0; }

/* Empty cart state */
.wc-page .cart-empty {
	font-family: var(--font-display);
	font-size: 1.4rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin-bottom: 1rem;
}

.wc-page .return-to-shop { margin-top: 1rem; }

/* Order received */
.wc-page .woocommerce-order-overview {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 1px;
	margin: 2rem 0;
	padding: 0;
	background: var(--line);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	overflow: hidden;
	list-style: none;
}

.wc-page .woocommerce-order-overview li {
	padding: 1.1rem 1.25rem;
	background: var(--surface-2);
	font-family: var(--font-mono);
	font-size: 0.76rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
	border: 0;
}

.wc-page .woocommerce-order-overview li strong {
	display: block;
	margin-top: 0.35rem;
	font-family: var(--font-mono);
	font-size: 1rem;
	letter-spacing: 0;
	text-transform: none;
	color: var(--text);
}

/* -------------------------------------------------------------------------
   29. WooCommerce default-stylesheet overrides
   WooCommerce ships selectors like `.woocommerce a.button` (class+element+
   class). Matching that specificity is what makes the theme's button and
   notice treatment actually win, rather than adding !important everywhere.
   ---------------------------------------------------------------------- */

.woocommerce .wc-page a.button,
.woocommerce .wc-page button.button,
.woocommerce .wc-page input.button,
.woocommerce .wc-page button[type="submit"],
.woocommerce .wc-page input[type="submit"],
.woocommerce-page .wc-page a.button,
.woocommerce-page .wc-page button.button,
.woocommerce-page .wc-page input.button,
.woocommerce-page .wc-page button[type="submit"],
.woocommerce-page .wc-page input[type="submit"],
.woocommerce .woocommerce-message a.button,
.woocommerce .woocommerce-info a.button,
.woocommerce .wc-page a.button.alt,
.woocommerce .wc-page button.button.alt,
.woocommerce .wc-page #place_order {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 0 1.7rem;
	background: var(--accent);
	color: var(--accent-ink);
	border: var(--hair) solid var(--accent);
	border-radius: 0;
	font-family: var(--font-mono);
	font-size: var(--fs-mono);
	font-weight: 500;
	letter-spacing: var(--track-mono);
	text-transform: uppercase;
	line-height: 1;
	text-decoration: none;
	transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.woocommerce .wc-page a.button:hover,
.woocommerce .wc-page button.button:hover,
.woocommerce .wc-page input.button:hover,
.woocommerce .wc-page button[type="submit"]:hover,
.woocommerce .wc-page input[type="submit"]:hover,
.woocommerce .woocommerce-message a.button:hover,
.woocommerce .woocommerce-info a.button:hover,
.woocommerce .wc-page a.button.alt:hover,
.woocommerce .wc-page button.button.alt:hover,
.woocommerce .wc-page #place_order:hover {
	background: var(--accent-deep);
	border-color: var(--accent-deep);
	color: var(--accent-ink);
}

/* WooCommerce styles its fields as `.woocommerce form .form-row input.input-text`,
   which outranks the theme's `.wc-page input[type=...]` block. Login, register,
   checkout and address fields otherwise render as white boxes with black text
   on a near-black page. */
.woocommerce .wc-page form .form-row input.input-text,
.woocommerce .wc-page form .form-row textarea,
.woocommerce .wc-page form .form-row select,
.woocommerce-page .wc-page form .form-row input.input-text,
.woocommerce-page .wc-page form .form-row textarea,
.woocommerce-page .wc-page form .form-row select {
	width: 100%;
	min-height: 52px;
	padding: 0.7rem 1rem;
	background: var(--surface-3);
	border: var(--hair) solid var(--line-strong);
	border-radius: 0;
	color: var(--text);
	font-family: var(--font-body);
	font-size: 0.98rem;
	line-height: 1.4;
}

.woocommerce .wc-page form .form-row textarea,
.woocommerce-page .wc-page form .form-row textarea { min-height: 140px; }

.woocommerce .wc-page form .form-row input.input-text::placeholder,
.woocommerce-page .wc-page form .form-row input.input-text::placeholder { color: var(--muted); }

.woocommerce .wc-page form .form-row input.input-text:focus,
.woocommerce .wc-page form .form-row textarea:focus,
.woocommerce .wc-page form .form-row select:focus,
.woocommerce-page .wc-page form .form-row input.input-text:focus,
.woocommerce-page .wc-page form .form-row textarea:focus,
.woocommerce-page .wc-page form .form-row select:focus {
	outline: none;
	border-color: var(--accent);
}

/* The show/hide-password control WooCommerce injects sits inside the field. */
.woocommerce .wc-page .password-input,
.woocommerce-page .wc-page .password-input { display: block; position: relative; }

.woocommerce .wc-page .show-password-input,
.woocommerce-page .wc-page .show-password-input { color: var(--muted); }

/* Secondary weight for the update-cart action so it does not compete. */
.woocommerce .wc-page button[name="update_cart"] {
	background: transparent;
	color: var(--text);
	border: 1px solid var(--line-strong);
}

.woocommerce .wc-page button[name="update_cart"]:hover {
	background: var(--surface-2);
	color: var(--text);
}

/* Drop WooCommerce's own notice glyphs — the theme uses a coloured rule. */
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-error::before,
.woocommerce-page .woocommerce-message::before,
.woocommerce-page .woocommerce-info::before,
.woocommerce-page .woocommerce-error::before {
	content: none;
}

.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error,
.woocommerce-page .woocommerce-message,
.woocommerce-page .woocommerce-info,
.woocommerce-page .woocommerce-error {
	padding: 1rem 1.25rem;
	background: var(--surface-2);
	border-top: 1px solid var(--line);
	border-right: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	border-left: 3px solid var(--accent);
	border-radius: var(--radius);
	color: var(--text);
	font-family: var(--font-body);
	font-size: 0.95rem;
	font-weight: 400;
}

.woocommerce .woocommerce-error { border-left-color: var(--danger); }

/* The empty-cart line is a paragraph inside the notice, not a heading. */
.woocommerce .cart-empty {
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 400;
	margin: 0;
}

/* WooCommerce's own price colour is green by default. */
.woocommerce .wc-page .woocommerce-Price-amount,
.woocommerce div.product .price,
.woocommerce ul.products li.product .price {
	color: var(--text);
	font-family: var(--font-mono);
}

/* Quantity control */
.woocommerce .wc-page .quantity input.qty {
	border-radius: var(--radius);
	border-color: var(--line-strong);
}

/* -------------------------------------------------------------------------
   30. select2 (WooCommerce country/state pickers)
   These controls are rendered into <body>, outside .wc-page, so they need
   their own rules or the checkout shows a white dropdown on a dark page.
   ---------------------------------------------------------------------- */

.woocommerce .select2-container .select2-selection--single,
.woocommerce-page .select2-container .select2-selection--single {
	height: auto;
	min-height: 52px;
	display: flex;
	align-items: center;
	padding: 0 0.4rem;
	background: var(--surface-3);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.woocommerce .select2-container .select2-selection--single .select2-selection__rendered,
.woocommerce-page .select2-container .select2-selection--single .select2-selection__rendered {
	color: var(--text);
	line-height: 1.5;
	padding-left: 0.6rem;
}

.woocommerce .select2-container .select2-selection--single .select2-selection__arrow,
.woocommerce-page .select2-container .select2-selection--single .select2-selection__arrow {
	height: 100%;
	top: 0;
}

.select2-dropdown {
	background: var(--surface-3);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	color: var(--text);
}

.select2-search--dropdown .select2-search__field {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--text);
	min-height: 40px;
	padding: 0 0.6rem;
}

.select2-results__option { color: var(--text); }

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
	background: var(--accent);
	color: var(--text-invert);
}

.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[data-selected="true"] {
	background: var(--surface-2);
	color: var(--text);
}


/* -------------------------------------------------------------------------
   Motion performance guard
   Two rules straight out of the GSAP performance guidance: promote only what
   actually animates, and stop offscreen work rather than letting keyframes run
   against a section nobody can see.
   ---------------------------------------------------------------------- */

.btn,
.p-card,
.cat-card,
.step {
	will-change: auto;
}

[data-magnetic],
.motion-word,
[data-parallax-image] {
	will-change: transform;
}

.is-offscreen .hero__cue-line,
.is-offscreen .marquee__track,
.hero__cue-line.is-offscreen {
	animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
	[data-magnetic],
	.motion-word,
	[data-parallax-image] {
		will-change: auto;
	}
}

/* -------------------------------------------------------------------------
   Narrow-header guard
   brand + icon actions must fit inside the gutter on a small phone. Without
   this the row is nowrap and a long brand name pushes the whole page wider
   than the viewport.
   ---------------------------------------------------------------------- */

@media (max-width: 460px) {
	.site-header__inner {
		gap: 0.7rem;
	}

	.brand {
		min-width: 0;
	}

	.brand__tagline {
		display: none;
	}

	.brand__name,
	.brand__type {
		white-space: nowrap;
	}

	.site-header__actions {
		gap: 0.15rem;
		flex: none;
	}

	.site-header__actions .icon-btn,
	.site-header__actions .burger {
		width: 40px;
		height: 40px;
	}
}