/* ==========================================================================
   ALIENWEAR — design system
   01 tokens  02 base  03 layout  04 buttons  05 forms  06 announce  07 header

   The palette is deliberately achromatic: void through bone, nothing else.
   Accent colour is expressed as an inversion (ink on light, bone on dark)
   rather than a hue, which is what `--signal` resolves to per surface.
   ========================================================================== */

/* 01 — Tokens ------------------------------------------------------------- */
/* Raw ramp is the brand manual's colour system, verbatim: Black, White, Space Gray,
   Graphite (primary) + Cool Silver, Light Gray, Alien Green, Cosmic Blue (secondary).
   The identity has to read in black and white, so the page is achromatic and the two
   accents are rationed: green for signal/live, blue for interactive focus only. */
:root {
	--void: #000000;
	--carbon: #16171b;
	--space-gray: #2b2e34;
	--graphite: #4c5056;
	--silver: #b8bcc2;
	--light-gray: #e5e7eb;
	--alien-green: #7cff4f;
	--cosmic-blue: #4b7bff;

	--ash: #63676d;
	--bone: var(--light-gray);
	--bone-dim: #d7dade;
	--paper: #ffffff;

	/* Semantic aliases — every rule in this file reads through these. */
	--ink: var(--void);
	--ink-2: var(--carbon);
	--ink-3: var(--graphite);
	--sand: #d7dade;
	--signal: var(--void);
	--signal-ink: var(--paper);
	/* Secondary greys are pinned to the lightest values that still clear WCAG AA on
	   bone (#edeae1) and paper (#f4f2ec) — anything softer reads as decoration, and
	   the identity uses enough decoration already. */
	--muted: #5b5f65;
	--muted-soft: #63676d;
	--line: rgba(0, 0, 0, 0.14);
	--line-dark: rgba(255, 255, 255, 0.16);
	--ok: #1f6b45;
	--sale: #8f2f2a;

	--radius: 2px;
	--radius-lg: 4px;
	--shell: 1600px;
	--gutter: 20px;

	--font-display: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	/* Mono is not a brand face — it is reserved for machine data: codes, counts,
	   coordinates, prices, spec values. */
	--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--ease: cubic-bezier(0.16, 0.84, 0.44, 1);
	--shadow-sm: 0 1px 2px rgba(10, 10, 10, 0.05);
	--shadow-md: 0 30px 60px -34px rgba(10, 10, 10, 0.45);
	--header-h: 76px;
}

/* Dark surfaces flip the accent to bone so `--signal` stays visible everywhere. */
.drawer .drawer__panel,
.hero,
.ticker,
.marquee,
.spotlight,
.newsletter-band,
.site-footer,
.section--ink,
.section--void,
.rating-summary,
.artifact,
.dispatch,
.forge,
.header-mega,
.drawer--cart .drawer__panel {
	--signal: var(--bone);
	--signal-ink: var(--void);
	--muted: var(--silver);
	--muted-soft: var(--silver);
	--line: var(--line-dark);
}

/* 02 — Base --------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.65;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
}

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

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

h1, h2, h3, h4, h5 {
	font-family: var(--font-display);
	/* Manual: "HEADING / 36–56PT BOLD". */
	font-weight: 700;
	line-height: 1.04;
	letter-spacing: -0.025em;
	margin: 0 0 0.5em;
	color: var(--ink);
	text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 7vw, 5.4rem); line-height: 0.95; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.85rem, 4vw, 3.15rem); }
h3 { font-size: clamp(1.05rem, 1.5vw, 1.3rem); font-weight: 500; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* Micro-label type. Manual: "LABEL / 8–10PT TRACKED" in Inter. */
.eyebrow {
	font-family: var(--font-body);
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0 0 18px;
}

/* Machine data keeps the monospace voice. */
.mono-data {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.16em;
}

.mono-label {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
}

.hairline { border: 1px solid var(--line); }

/* A field of 1px rules drawn by the grid gap rather than per-cell borders. */
.hairline-grid {
	display: grid;
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
}
.hairline-grid > * { background: var(--paper); }

.section--void { background: var(--void); color: var(--bone); }
.section--void h1, .section--void h2, .section--void h3 { color: var(--bone); }
.section--carbon { background: var(--carbon); color: var(--bone); }
.section--carbon h1, .section--carbon h2, .section--carbon h3 { color: var(--bone); }
.section--paper { background: var(--paper); }
.section--bone { background: var(--bone); }
.section--bone h1, .section--bone h2, .section--bone h3 { color: var(--void); }

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

.skip-link:focus {
	position: fixed;
	top: 10px;
	left: 10px;
	z-index: 100000;
	width: auto; height: auto;
	clip: auto;
	padding: 12px 18px;
	background: var(--ink);
	color: var(--bone);
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

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

.i { flex: 0 0 auto; }

/* 03 — Layout ------------------------------------------------------------- */
.shell {
	width: 100%;
	max-width: var(--shell);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.section { padding-block: clamp(54px, 7.5vw, 118px); }
.section--tight { padding-block: clamp(38px, 5vw, 70px); }
.section--ink { background: var(--ink); color: var(--bone); }
.section--ink h1, .section--ink h2, .section--ink h3 { color: var(--bone); }
.section--ink .eyebrow { color: rgba(244, 242, 237, 0.55); }
.section--bone { background: var(--bone); }

.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: clamp(28px, 4vw, 54px); }
.section-head__main { max-width: 720px; }
.section-head--center { display: block; max-width: 720px; margin-inline: auto; text-align: center; }
.section-head__title { margin-bottom: 14px; }
.section-head__link { display: inline-flex; align-items: center; gap: 9px; padding-bottom: 5px; border-bottom: 1px solid currentColor; font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; }
.section-head__link .i { transition: transform 0.3s var(--ease); }
.section-head__link:hover .i { transform: translateX(4px); }
.section-head__text { color: var(--muted); font-size: 1.05rem; }
.section--ink .section-head__text { color: rgba(244, 242, 237, 0.68); }
.section__foot { margin-top: clamp(26px, 3vw, 44px); display: flex; justify-content: center; }

.site-main { min-height: 40vh; }

/* 04 — Buttons ------------------------------------------------------------ */
.btn {
	--btn-bg: var(--ink);
	--btn-fg: var(--bone);
	--btn-bd: var(--ink);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 16px 26px;
	border: 1px solid var(--btn-bd);
	border-radius: var(--radius);
	background: var(--btn-bg);
	color: var(--btn-fg);
	font-family: var(--font-body);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
}

.btn:hover { background: var(--signal); border-color: var(--signal); color: var(--signal-ink); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn .i { transition: transform 0.3s var(--ease); }
.btn:hover .i { transform: translateX(3px); }

.btn--signal { --btn-bg: var(--signal); --btn-fg: var(--signal-ink); --btn-bd: var(--signal); }
.btn--signal:hover { --btn-bg: var(--ink); --btn-fg: var(--bone); --btn-bd: var(--ink); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: rgba(11, 11, 12, 0.24); }
.btn--ghost:hover { --btn-bg: var(--ink); --btn-fg: var(--bone); --btn-bd: var(--ink); }
.btn--light { --btn-bg: var(--bone); --btn-fg: var(--ink); --btn-bd: var(--bone); }
.btn--light:hover { --btn-bg: var(--signal); --btn-fg: var(--signal-ink); --btn-bd: var(--signal); }
.btn--ghost-light { --btn-bg: transparent; --btn-fg: var(--bone); --btn-bd: rgba(244, 242, 237, 0.4); }
.btn--ghost-light:hover { --btn-bg: var(--bone); --btn-fg: var(--ink); --btn-bd: var(--bone); }
.btn--block { width: 100%; }
.btn--sm { padding: 12px 18px; font-size: 11.5px; }

.icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	cursor: pointer;
	transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.icon-btn:hover { background: rgba(11, 11, 12, 0.06); }
.site-header--dark .icon-btn:hover, .drawer--cart .icon-btn:hover, .drawer--nav .icon-btn:hover, .drawer--search .icon-btn:hover { background: rgba(255, 255, 255, 0.08); }

.count-badge {
	position: absolute;
	top: 4px;
	right: 2px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 9px;
	background: var(--signal);
	color: var(--signal-ink);
	font-size: 10px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
}

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	border-bottom: 1px solid currentColor;
	padding-bottom: 4px;
}
.link-arrow .i { transition: transform 0.3s var(--ease); }
.link-arrow:hover .i { transform: translateX(4px); }

/* 05 — Forms ------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="url"],
select,
textarea {
	width: 100%;
	padding: 14px 16px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 15px;
	transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

input:focus, select:focus, textarea:focus {
	border-color: var(--ink);
	box-shadow: 0 0 0 3px rgba(200, 255, 61, 0.4);
	outline: none;
}

::placeholder { color: var(--muted-soft); }

/* 06 — Announcement bar -------------------------------------------------- */
.announce {
	position: relative;
	background: var(--ink);
	color: var(--bone);
	overflow: hidden;
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}
.announce__track {
	display: flex;
	gap: 56px;
	white-space: nowrap;
	padding: 11px 0;
	width: max-content;
	animation: awn-marquee 34s linear infinite;
}
.announce__track span { display: inline-flex; align-items: center; gap: 56px; }
.announce__track span::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--signal); }
.announce:hover .announce__track { animation-play-state: paused; }

@keyframes awn-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

/* 07 — Header ------------------------------------------------------------ */
.site-header {
	position: sticky;
	top: 0;
	z-index: 900;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: saturate(140%) blur(12px);
	border-bottom: 1px solid var(--line);
	transition: transform 0.35s var(--ease), box-shadow 0.3s var(--ease);
}
.site-header.is-stuck { box-shadow: var(--shadow-sm); }
.site-header.is-hidden { transform: translateY(-102%); }

.site-header__inner {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: var(--header-h);
}

.site-header__brand { flex: 0 0 auto; margin-inline: auto; }
.site-header__tools { display: flex; align-items: center; gap: 2px; margin-left: auto; }

.wordmark {
	display: inline-flex;
	align-items: baseline;
	gap: 0.24em;
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 900;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	line-height: 1;
}
.wordmark__alien { font-weight: 900; }
.wordmark__wear { font-weight: 300; letter-spacing: 0.14em; }
.wordmark--sm { font-size: 18px; }
.wordmark--lg { font-size: clamp(26px, 3vw, 34px); color: var(--bone); }
.wordmark--lg .wordmark__wear { color: rgba(244, 242, 237, 0.75); }

.custom-logo-link img { max-height: 34px; width: auto; }

.primary-nav { display: none; }
.primary-nav__list {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.primary-nav__list > li { position: relative; }
.primary-nav__list > li > a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 13px;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	transition: color 0.2s var(--ease);
}
.primary-nav__list > li > a::after {
	content: "";
	position: absolute;
	left: 13px;
	right: 13px;
	bottom: 6px;
	height: 1px;
	background: var(--ink);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s var(--ease);
}
.primary-nav__list > li:hover > a::after,
.primary-nav__list > li.current-menu-item > a::after { transform: scaleX(1); }
.primary-nav__list .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	padding: 10px;
	margin: 0;
	list-style: none;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-md);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s;
}
.primary-nav__list > li:hover > .sub-menu,
.primary-nav__list > li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.primary-nav__list .sub-menu a { display: block; padding: 9px 12px; font-size: 13.5px; border-radius: 2px; }
.primary-nav__list .sub-menu a:hover { background: var(--bone); }

.site-header__burger { margin-left: -8px; }

/* 09 — Drawers ----------------------------------------------------------- */
.drawer { position: fixed; inset: 0; z-index: 1000; }
.drawer[hidden] { display: none; }
.drawer__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(11, 11, 12, 0.55);
	opacity: 0;
	transition: opacity 0.35s var(--ease);
}
.drawer__panel {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: min(430px, 92vw);
	display: flex;
	flex-direction: column;
	background: var(--ink);
	color: var(--bone);
	box-shadow: var(--shadow-md);
	transform: translateX(102%);
	transition: transform 0.42s var(--ease);
	overflow-y: auto;
}
.drawer--nav .drawer__panel { left: 0; right: auto; transform: translateX(-102%); }
.drawer--search .drawer__panel {
	left: 0;
	right: 0;
	top: 0;
	width: 100%;
	max-height: 62vh;
	transform: translateY(-102%);
}
.drawer.is-open .drawer__backdrop { opacity: 1; }
.drawer.is-open .drawer__panel { transform: none; }

.drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 18px 20px;
	border-bottom: 1px solid var(--line-dark);
}
.drawer__head .eyebrow { margin: 0; color: rgba(244, 242, 237, 0.55); }
.drawer__title { margin: 0; font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.drawer__count { color: var(--muted-soft); font-weight: 500; }
.drawer__body { padding: 18px 20px; }
.drawer__hint { padding: 0 20px 22px; margin: 0; font-size: 12.5px; letter-spacing: 0.06em; color: rgba(244, 242, 237, 0.5); }
.drawer__foot { margin-top: auto; padding: 20px; border-top: 1px solid var(--line-dark); }
.drawer__note { margin: 14px 0 0; font-size: 12px; letter-spacing: 0.06em; color: rgba(244, 242, 237, 0.5); }
.drawer__perks { margin-top: auto; padding: 16px 20px 22px; border-top: 1px solid var(--line-dark); display: grid; gap: 10px; }
.drawer__perks p { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 12.5px; letter-spacing: 0.05em; color: rgba(244, 242, 237, 0.7); }

.mobile-nav__list { list-style: none; margin: 0; padding: 8px 20px 0; }
.mobile-nav__list li { border-bottom: 1px solid var(--line-dark); }
.mobile-nav__list a {
	display: block;
	padding: 16px 0;
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}
.mobile-nav__list .sub-menu { list-style: none; margin: 0 0 12px; padding: 0; }
.mobile-nav__list .sub-menu li { border: 0; }
.mobile-nav__list .sub-menu a { padding: 8px 0 8px 14px; font-size: 14px; font-weight: 500; font-family: var(--font-body); letter-spacing: 0.08em; color: rgba(244, 242, 237, 0.7); }

.search-form-wrap { padding: 22px 20px 0; }
.search-form-wrap input[type="search"] {
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--line-dark);
	border-radius: 0;
	color: var(--bone);
	font-family: var(--font-display);
	font-size: clamp(1.4rem, 3vw, 2.2rem);
	font-weight: 600;
	padding: 12px 0;
}
.search-form-wrap input[type="search"]::placeholder { color: rgba(244, 242, 237, 0.35); }
.search-form-wrap input[type="search"]:focus { border-color: var(--signal); box-shadow: none; }
.search-form-wrap .search-submit { display: none; }

/* 10 — Hero -------------------------------------------------------------- */
.hero {
	position: relative;
	color: var(--bone);
	background: var(--ink);
	overflow: hidden;
	isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img,
.hero__media video { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(11, 11, 12, 0.55) 0%, rgba(11, 11, 12, 0.35) 38%, rgba(11, 11, 12, 0.92) 100%);
}
.hero__inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: clamp(24px, 3.5vw, 42px);
	/* Leave room for the announcement bar + sticky header so the CTAs and the trust strip
	   still sit above the fold on a laptop. */
	min-height: clamp(540px, calc(100vh - 140px), 840px);
	min-height: clamp(540px, calc(100svh - 140px), 840px);
	padding-block: clamp(70px, 9vh, 130px) clamp(34px, 5vh, 56px);
}
.hero__copy { max-width: 760px; }
.hero .eyebrow { color: rgba(244, 242, 237, 0.7); }
.hero__title {
	margin: 0 0 20px;
	font-size: clamp(2.6rem, 8.4vw, 6.4rem);
	line-height: 0.92;
	letter-spacing: -0.03em;
	text-transform: uppercase;
	color: var(--bone);
}
.hero__title em { font-style: normal; color: var(--signal); }
.hero__text { max-width: 560px; font-size: clamp(0.98rem, 1.3vw, 1.1rem); color: rgba(244, 242, 237, 0.78); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
/* Hero footer: social proof only. The shipping/returns/checkout promises live in the USP
   bar immediately below, so repeating them here read as a double strip. */
.hero__foot {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 14px 28px;
	padding-top: 20px;
	border-top: 1px solid var(--line-dark);
}
.hero__foot .stars { color: rgba(244, 242, 237, 0.38); }
.hero__foot .stars__star.is-on { color: var(--signal); }
.hero__foot .stars__label { color: rgba(244, 242, 237, 0.66); font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.hero__scroll {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: rgba(244, 242, 237, 0.6);
}
.hero__scroll .i { transition: transform 0.3s var(--ease); }
.hero__scroll:hover { color: var(--bone); }
.hero__scroll:hover .i { transform: translateY(4px); }

/* 11 — Trust / USP bar --------------------------------------------------- */
.usp-bar { background: var(--bone); border-block: 1px solid var(--line); }
.usp-bar__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	background: var(--line);
}
.usp {
	display: flex;
	align-items: flex-start;
	gap: 13px;
	padding: 24px 20px;
	background: var(--bone);
}
.usp .i { color: var(--ink); margin-top: 2px; }
.usp__title { display: block; font-family: var(--font-display); font-size: 13.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.usp__text { display: block; margin: 4px 0 0; font-size: 13px; color: var(--muted); line-height: 1.5; }

/* 12 — Category tiles ---------------------------------------------------- */
.tile-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
.tile { position: relative; display: block; overflow: hidden; border-radius: var(--radius); background: var(--sand); }
.tile__media { display: block; aspect-ratio: 4 / 5; }
.tile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.tile:hover .tile__media img { transform: scale(1.05); }
.tile__body {
	position: absolute;
	inset: auto 0 0 0;
	padding: 26px 22px;
	background: linear-gradient(180deg, rgba(11, 11, 12, 0) 0%, rgba(11, 11, 12, 0.78) 100%);
	color: var(--bone);
}
.tile__kicker { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(244, 242, 237, 0.66); }
.tile__title { display: block; margin: 8px 0 0; font-family: var(--font-display); font-size: clamp(1.35rem, 2.4vw, 1.85rem); font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; }
.tile__cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.tile__cta .i { transition: transform 0.3s var(--ease); }
.tile:hover .tile__cta .i { transform: translateX(4px); }

/* 13 — Marquee band ------------------------------------------------------ */
.marquee { background: var(--ink); color: var(--bone); border-block: 1px solid var(--line-dark); overflow: hidden; }
.marquee__track { display: flex; gap: 46px; width: max-content; padding: 20px 0; animation: awn-marquee 40s linear infinite; }
.marquee__item { display: inline-flex; align-items: center; gap: 46px; font-family: var(--font-display); font-size: clamp(1rem, 2vw, 1.5rem); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.marquee__item::after { content: "◆"; color: var(--signal); font-size: 0.6em; }

/* 14 — Editorial / story ------------------------------------------------ */
.editorial { display: grid; gap: clamp(26px, 4vw, 60px); align-items: center; }
.editorial__media { position: relative; overflow: hidden; border-radius: var(--radius); }
.editorial__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.editorial__badge {
	position: absolute;
	right: 16px;
	bottom: 16px;
	padding: 12px 16px;
	background: var(--signal);
	color: var(--signal-ink);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
.editorial__list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 16px; }
.editorial__list li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; }
.editorial__num { font-family: var(--font-display); font-size: 12px; font-weight: 800; letter-spacing: 0.1em; color: var(--muted); padding-top: 4px; }
.editorial__list h3 { margin: 0 0 4px; font-size: 1.02rem; font-weight: 700; letter-spacing: 0.01em; }
.editorial__list p { margin: 0; font-size: 14.5px; color: var(--muted); }

/* 15 — Reviews --------------------------------------------------------- */
.review-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
.review {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 26px 22px;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}
.review__quote { font-size: 15.5px; line-height: 1.6; color: var(--ink); margin: 0; }
.review__author { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.review__verified { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ok); font-weight: 600; }
.review__item { display: block; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-soft); }
.review figcaption { margin-top: auto; display: grid; gap: 7px; }
.stars { display: inline-flex; align-items: center; gap: 3px; color: var(--muted-soft); }
.stars__star.is-on { color: #f2a516; }
.stars__star.is-on svg { fill: currentColor; }
.stars__label { font-style: normal; font-size: 12.5px; color: var(--muted); margin-left: 8px; }

/* 16 — Newsletter ------------------------------------------------------- */
.newsletter-band { background: var(--ink-2); color: var(--bone); padding-block: clamp(46px, 6vw, 82px); }
.newsletter-band__inner { display: grid; gap: 26px; align-items: center; }
.newsletter-band__title { color: var(--bone); margin: 0 0 10px; font-size: clamp(1.6rem, 3vw, 2.4rem); text-transform: uppercase; }
.newsletter-band__text { color: rgba(244, 242, 237, 0.7); max-width: 46ch; margin: 0; }
.newsletter-form { display: grid; grid-template-columns: 1fr; gap: 10px; }
.newsletter-form input[type="email"] { background: transparent; border-color: var(--line-dark); color: var(--bone); }
.newsletter-form input[type="email"]::placeholder { color: rgba(244, 242, 237, 0.4); }
.newsletter-form__note { grid-column: 1 / -1; margin: 6px 0 0; font-size: 11.5px; letter-spacing: 0.06em; color: rgba(244, 242, 237, 0.5); }
.newsletter-form.is-done input, .newsletter-form.is-done button { display: none; }
.newsletter-form__success { grid-column: 1 / -1; font-size: 14px; color: var(--signal); }

/* 17 — Product cards ---------------------------------------------------- */
.card { position: relative; display: flex; flex-direction: column; height: 100%; }
.card__metarow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.card__metarow .card__meta { margin: 0; }
.card__size { font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-soft); white-space: nowrap; }
.card__media {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--sand);
	border-radius: var(--radius);
	aspect-ratio: 4 / 5;
}
.card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.9s var(--ease), opacity 0.4s var(--ease);
}
.card__img--alt { position: absolute; inset: 0; opacity: 0; }
.card:hover .card__media img { transform: scale(1.045); }
.card:hover .card__img--alt { opacity: 1; }
.card:hover .card__img--main { opacity: 0; }

.card__flags { position: absolute; top: 11px; left: 11px; z-index: 3; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.flag {
	display: inline-block;
	padding: 6px 9px;
	background: var(--ink);
	color: var(--bone);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	border-radius: 2px;
}
.flag--signal { background: var(--signal); color: var(--signal-ink); }
.flag--sale { background: var(--sale); color: #fff; }
.flag--sold { background: rgba(11, 11, 12, 0.72); }

.card__actions {
	position: absolute;
	left: 11px;
	right: 11px;
	bottom: 11px;
	z-index: 3;
	display: flex;
	gap: 8px;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.card:hover .card__actions,
.card:focus-within .card__actions { opacity: 1; transform: none; }
.card__actions .btn { flex: 1 1 auto; padding: 13px 14px; font-size: 11px; box-shadow: var(--shadow-sm); }
.card__wish { position: absolute; top: 9px; right: 9px; z-index: 3; background: rgba(255, 255, 255, 0.86); color: var(--ink); opacity: 0; transition: opacity 0.3s var(--ease); }
.card:hover .card__wish { opacity: 1; }
.card__wish:hover { background: var(--ink); color: var(--bone); }
.card__wish .i { fill: none; }
.card__wish.is-active { opacity: 1; color: var(--sale); }

.card__body { display: flex; flex-direction: column; gap: 6px; padding-top: 13px; }
.card__meta { font-size: 10.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted-soft); }
.card__title { margin: 0; font-family: var(--font-display); font-size: 15.5px; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; }
.card__title a { background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size 0.35s var(--ease); }
.card:hover .card__title a { background-size: 100% 1px; }
.card__price { display: flex; align-items: baseline; gap: 8px; font-size: 15px; font-weight: 600; }
.card__price del { color: var(--muted-soft); font-weight: 400; font-size: 13.5px; }
.card__price ins { text-decoration: none; color: var(--sale); }
.card__swatches { display: flex; align-items: center; gap: 5px; }
.card__swatch { width: 13px; height: 13px; border-radius: 50%; border: 1px solid var(--line); }

/* 18 — Product grid ----------------------------------------------------- */
.product-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px 12px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
.section--ink .card__title, .section--ink .card__price { color: var(--bone); }

/* 19 — Shop toolbar ---------------------------------------------------- */
.shop-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	justify-content: space-between;
	padding: 16px 0;
	border-bottom: 1px solid var(--line);
	margin-bottom: 26px;
}
.shop-toolbar__count { margin: 0; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.shop-toolbar__count strong { color: var(--ink); }
.shop-toolbar__actions { display: flex; align-items: center; gap: 10px; }
.woocommerce-ordering select { padding: 10px 12px; font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; min-width: 190px; }
.filter-toggle { display: inline-flex; }
.filter-panel {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: grid;
	grid-template-columns: 1fr;
	background: rgba(11, 11, 12, 0.55);
}
.filter-panel[hidden] { display: none; }
.filter-panel__inner {
	position: absolute;
	inset: 0 34% 0 0;
	background: var(--paper);
	padding: 20px;
	overflow-y: auto;
	box-shadow: var(--shadow-md);
}
.filter-widget { padding: 16px 0; border-bottom: 1px solid var(--line); }
.filter-widget h2, .filter-widget h3 { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; margin: 0 0 12px; }
.filter-widget ul,
.filter-widget .cat-item,
.widget_product_categories ul,
.woocommerce-widget-layered-nav-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.filter-widget li::marker { content: none; }
.filter-widget a, .filter-widget label { font-size: 14px; display: flex; align-items: center; gap: 9px; }
.woocommerce-widget-layered-nav-list__item--chosen a { font-weight: 700; }
.price_slider_wrapper .button { margin-top: 10px; }

/* 20 — Pagination ------------------------------------------------------ */
.woocommerce-pagination ul, .page-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
	list-style: none;
	margin: 40px 0 0;
	padding: 0;
}
.page-numbers li { border: 0 !important; }
.page-numbers li a, .page-numbers li span, a.page-numbers, span.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	font-size: 13px;
	font-weight: 600;
}
.page-numbers li span.current, span.page-numbers.current { background: var(--ink); border-color: var(--ink); color: var(--bone); }
.page-numbers li a:hover, a.page-numbers:hover { background: var(--bone); }

/* 21 — Single product -------------------------------------------------- */
/* `align-items: start` keeps the gallery at its natural height so the sticky image can
   travel while the (much taller) summary column scrolls past it. */
.product-hero { display: grid; gap: 22px; align-items: start; }
.product-gallery { position: relative; }
/* WooCommerce's own layout CSS ships `div.images { width: 48%; float: left }`. Our gallery
   already sits in its own grid column, so that rule collapses the main image (and the
   FlexSlider maths that follows it) to half the column — reset both. */
.product-gallery .images,
.product-gallery .woocommerce-product-gallery { width: 100% !important; float: none !important; margin: 0; }
.product-gallery .flex-viewport { max-width: 100%; }
/* WooCommerce's layout stylesheet targets `div.images .flex-control-thumbs` at a higher
   specificity (4 classes), which wins over a plain two-class selector — hence !important. */
.product-gallery .flex-control-thumbs {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	margin: 8px 0 0 !important;
	padding: 0 !important;
	list-style: none;
}
.product-gallery .flex-control-thumbs li {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	clear: none !important;
}
.product-gallery .flex-control-thumbs img { border-radius: var(--radius); opacity: 0.6; border: 1px solid transparent; transition: opacity 0.25s var(--ease), border-color 0.25s var(--ease); }
.product-gallery .flex-control-thumbs img:hover { opacity: 0.9; }
.product-gallery .flex-control-thumbs img.flex-active { opacity: 1; border-color: var(--ink); }
.product-gallery img { border-radius: var(--radius); }
/* Fresh drop, printed to order — a quiet reassurance line under the gallery. */
.gallery-note { display: flex; align-items: center; gap: 9px; margin: 14px 0 0; font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.gallery-note .i { color: var(--signal-ink); background: var(--signal); border-radius: 50%; padding: 3px; }

.product-summary { display: flex; flex-direction: column; gap: 14px; }
.product-summary .product_title { margin: 0; font-size: clamp(1.7rem, 3.6vw, 2.6rem); text-transform: none; letter-spacing: -0.02em; }
.product-summary .price {
	display: flex;
	align-items: baseline;
	gap: 10px;
	font-family: var(--font-display);
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--ink);
}
.product-summary .price del { color: var(--muted-soft); font-size: 1.1rem; font-weight: 400; }
.product-summary .price ins { text-decoration: none; color: var(--sale); }
.product-summary .woocommerce-product-details__short-description { color: var(--muted); font-size: 15.5px; }
.product-summary form.cart { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 0; }
.quantity { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--radius); height: 54px; }
.quantity .qty {
	width: 62px;
	border: 0;
	padding: 0 4px;
	height: 100%;
	text-align: center;
	font-size: 15px;
	-moz-appearance: textfield;
	appearance: textfield;
}
.quantity .qty::-webkit-outer-spin-button, .quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.product-summary .single_add_to_cart_button { height: 54px; flex: 1 1 200px; }
.product-summary .variations th,
.product-summary .variations td { text-align: left; padding: 8px 0; vertical-align: middle; }
.product-summary .variations .label label { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.woocommerce-variation-price { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; margin-bottom: 8px; }
.reset_variations { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

.product-perks { list-style: none; margin: 6px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.product-perks li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; font-size: 14px; color: var(--muted); align-items: start; }
.product-perks .i { color: var(--ink); margin-top: 2px; }
.product-perks strong { display: block; color: var(--ink); font-weight: 600; }

.accordion { border-top: 1px solid var(--line); margin-top: 18px; }
.accordion details { border-bottom: 1px solid var(--line); }
.accordion summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 17px 2px;
	cursor: pointer;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	list-style: none;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary .i { transition: transform 0.3s var(--ease); }
.accordion details[open] summary .i { transform: rotate(180deg); }
.accordion__body { padding: 0 2px 20px; color: var(--muted); font-size: 14.5px; }
.accordion__body ul { padding-left: 18px; margin: 0; display: grid; gap: 6px; }

.product-tabs { margin-top: clamp(38px, 6vw, 74px); }
.woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	margin: 0 0 24px;
	padding: 0 0 14px;
	border-bottom: 1px solid var(--line);
	list-style: none;
}
.woocommerce-tabs ul.tabs li { margin: 0; padding: 0; background: none; border: 0; border-radius: 0; }
.woocommerce-tabs ul.tabs li::before, .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce-tabs ul.tabs li a { padding: 0; font-size: 12.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.woocommerce-tabs ul.tabs li.active a { color: var(--ink); }
.related.products, .upsells.products { margin-top: clamp(44px, 6vw, 80px); }
.related.products > h2, .upsells.products > h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); text-transform: uppercase; margin-bottom: 22px; }

.sticky-buy {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 940;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
	background: rgba(255, 255, 255, 0.97);
	border-top: 1px solid var(--line);
	transform: translateY(102%);
	transition: transform 0.4s var(--ease);
}
.sticky-buy.is-visible { transform: none; }
.sticky-buy__info { display: flex; flex-direction: column; min-width: 0; }
.sticky-buy__title { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticky-buy__price { font-size: 13.5px; font-weight: 700; }
.sticky-buy .btn { margin-left: auto; white-space: nowrap; }

/* 21b — Product summary extras ---------------------------------------- */
.stock-note { display: inline-flex; align-items: center; gap: 9px; align-self: flex-start; margin: 0; font-size: 13px; font-weight: 600; color: var(--ok); }
.stock-note .i { flex: 0 0 auto; }
.stock-note--low { color: #a86500; }
.stock-note--out { color: var(--sale); }
.buy-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 18px; margin-top: 8px; }
.pay-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.pay-chips > span { padding: 5px 8px; border: 1px solid var(--line); border-radius: 3px; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; color: var(--muted); }
/* Quantity stepper (buttons injected by main.js). */
form.cart .quantity { overflow: hidden; }
.qty-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 100%; min-height: 52px; padding: 0; border: 0; background: transparent; color: var(--ink); font-size: 17px; line-height: 1; cursor: pointer; transition: background-color 0.2s var(--ease); }
.qty-btn:hover { background: var(--bone); }
form.cart .quantity .qty { width: 48px; }

.price-save {
	display: inline-flex;
	align-self: flex-start; /* the summary is a flex column — do not stretch the pill */
	align-items: center;
	gap: 6px;
	padding: 5px 9px;
	border-radius: 2px;
	background: rgba(215, 54, 47, 0.1);
	color: var(--sale);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.delivery-note { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 13.5px; color: var(--muted); }
.delivery-note .i { color: var(--ok); flex: 0 0 auto; }
.delivery-note strong { color: var(--ink); font-weight: 600; }
.size-guide { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; border-bottom: 1px solid currentColor; padding-bottom: 4px; }
.size-guide .i { transition: transform 0.3s var(--ease); }
.size-guide:hover .i { transform: translateX(3px); }

/* YITH Wishlist ships no usable styling for our dark-free summary — normalise it. */
.product-summary .yith-wcwl-add-to-wishlist { margin: 0; padding: 0; border: 0; }
.product-summary .yith-wcwl-add-button a,
.product-summary .yith-wcwl-wishlistaddedbrowse a,
.product-summary .yith-wcwl-wishlistexistsbrowse a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink);
}
.product-summary .yith-wcwl-add-to-wishlist svg { width: 18px; height: 18px; flex: 0 0 auto; display: block; }
.product-summary .yith-wcwl-add-to-wishlist img { display: none; }
.product-summary .yith-wcwl-add-to-wishlist .feedback { display: none; }

/* 22 — WooCommerce core overrides ------------------------------------- */
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error {
	border: 1px solid var(--line);
	border-top: 0;
	border-left: 3px solid var(--ink);
	background: var(--bone);
	color: var(--ink);
	border-radius: var(--radius);
	padding: 16px 18px;
	font-size: 14.5px;
	margin: 0 0 24px;
}
.woocommerce-notices-wrapper .woocommerce-error { border-left-color: var(--sale); }
.woocommerce-notices-wrapper .woocommerce-message { border-left-color: var(--ok); }
.woocommerce-notices-wrapper .woocommerce-message::before,
.woocommerce-notices-wrapper .woocommerce-info::before,
.woocommerce-notices-wrapper .woocommerce-error::before { display: none; }

.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce .cart .button, .woocommerce .cart input.button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce #payment #place_order {
	background: var(--ink);
	color: var(--bone);
	border-radius: var(--radius);
	font-family: var(--font-body);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 16px 24px;
	line-height: 1;
	transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce #respond input#submit:hover, .woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce #payment #place_order:hover {
	background: var(--signal);
	color: var(--signal-ink);
}
.woocommerce a.button.alt, .woocommerce button.button.alt { background: var(--ink); color: var(--bone); }
.woocommerce .woocommerce-message .button { padding: 10px 16px; font-size: 11px; }

/* WooCommerce loop markup rendered as the theme grid. */
.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.woocommerce ul.products li.product {
	width: 100%;
	margin: 0;
	float: none;
	clear: none;
	display: flex;
}
/* WooCommerce's clearfix pseudo-elements would otherwise become grid items. */
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; display: none; }
.woocommerce ul.products li.product .card { width: 100%; }
.woocommerce ul.products li.product a img { margin: 0; width: 100%; }
.woocommerce ul.products li.product .woocommerce-loop-product__link { display: block; }
@media (min-width: 600px) {
	.woocommerce ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 16px; }
}
@media (min-width: 900px) {
	.woocommerce ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 18px; }
}
.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-checkout-review-order,
.woocommerce-checkout .col2-set .col-1, .woocommerce-checkout .col2-set .col-2 { width: 100%; float: none; }

.woocommerce table.shop_table {
	border: 1px solid var(--line);
	border-collapse: separate;
	border-radius: var(--radius);
	font-size: 14.5px;
}
.woocommerce table.shop_table th { background: var(--bone); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; padding: 14px 16px; }
.woocommerce table.shop_table td { padding: 16px; border-top: 1px solid var(--line); }
.woocommerce table.shop_table_responsive tr:nth-child(2n) td { background: transparent; }
.cart_totals, .woocommerce-checkout-review-order { margin-top: 22px; }
.woocommerce .cart_totals h2, .woocommerce-checkout-review-order > h3 { font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 14px; }
.woocommerce-checkout #payment { background: var(--bone); border-radius: var(--radius); }
.woocommerce-checkout #payment div.payment_box { background: rgba(11, 11, 12, 0.04); }
.woocommerce-checkout #payment div.payment_box::before { display: none; }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select { padding: 14px 16px; border: 1px solid var(--line); }
.woocommerce form .form-row label { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.wc-block-components-button, .wp-block-woocommerce-cart .wc-block-cart__submit-button { background: var(--ink); color: var(--bone); border-radius: var(--radius); }

.woocommerce-mini-cart { list-style: none; margin: 0; padding: 18px 20px; display: grid; gap: 16px; }
/* WooCommerce prints the thumbnail *inside* the product-name link, so the link is a grid of
   its own and the remove button floats in the corner. The plugin's widget styles
   (`.woocommerce ul.product_list_widget li a/img`, 2 classes + 3 elements) outrank a plain
   two-class selector, so the contested properties are marked !important. */
.woocommerce-mini-cart-item { position: relative; display: grid; grid-template-columns: 66px 1fr; gap: 4px 12px; align-items: start; padding: 0 22px 0 0 !important; margin: 0 !important; border: 0; }
.woocommerce-mini-cart-item img { grid-column: 1; grid-row: 1 / span 2; width: 66px !important; height: 82px !important; float: none !important; margin: 0 !important; object-fit: cover; border-radius: 2px; background: var(--sand); }
.woocommerce-mini-cart-item > a:not(.remove) { grid-column: 1 / -1; display: grid !important; grid-template-columns: 66px 1fr; gap: 12px; align-items: start; color: var(--bone); font-size: 13.5px; font-weight: 500; line-height: 1.4; }
.woocommerce-mini-cart-item a { color: var(--bone); font-size: 13.5px; font-weight: 500; line-height: 1.4; }
.woocommerce-mini-cart-item .quantity { grid-column: 2; font-size: 12.5px; color: rgba(244, 242, 237, 0.6); border: 0; height: auto; }
.woocommerce-mini-cart-item .variation { grid-column: 2; margin: 0; font-size: 12px; color: rgba(244, 242, 237, 0.6); }
.woocommerce-mini-cart-item a.remove { position: absolute; top: 0; right: 0; margin: 0; color: rgba(244, 242, 237, 0.5) !important; font-size: 18px; width: auto; height: auto; line-height: 1; }
.woocommerce-mini-cart-item a.remove:hover { color: var(--signal) !important; background: transparent; }
.woocommerce-mini-cart__total { display: flex; justify-content: space-between; padding: 16px 20px; border-top: 1px solid var(--line-dark); font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; }
.woocommerce-mini-cart__buttons { display: grid; gap: 10px; padding: 0 20px 20px; }
.woocommerce-mini-cart__buttons a { text-align: center; }
.woocommerce-mini-cart__buttons a.button:not(.checkout) { background: transparent; border: 1px solid var(--line-dark); color: var(--bone); }
.widget_shopping_cart_content .cart-empty { padding: 34px 20px; text-align: center; color: rgba(244, 242, 237, 0.65); }
.cart-drawer-loading { opacity: 0.5; pointer-events: none; transition: opacity 0.2s ease; }

/* 23 — Footer ----------------------------------------------------------- */
.site-footer { background: var(--ink); color: rgba(244, 242, 237, 0.72); padding-block: clamp(44px, 6vw, 76px) 26px; }
.site-footer__inner { display: grid; gap: 34px; }
.site-footer__note { margin: 16px 0 0; max-width: 34ch; font-size: 14px; line-height: 1.6; }
.site-footer__col-title { font-size: 11.5px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bone); margin: 0 0 16px; }
.site-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; font-size: 14px; }
.site-footer__list a { position: relative; }
.site-footer__list a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--signal); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease); }
.site-footer__list a:hover { color: var(--bone); }
.site-footer__list a:hover::after { transform: scaleX(1); }
.socials { display: flex; gap: 10px; list-style: none; margin: 22px 0 0; padding: 0; }
.socials a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--line-dark); border-radius: 50%; color: var(--bone); transition: background-color 0.25s var(--ease), color 0.25s var(--ease); }
.socials a:hover { background: var(--signal); color: var(--signal-ink); border-color: var(--signal); }
.payments { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 20px; }
.payments__item { padding: 6px 9px; border: 1px solid var(--line-dark); border-radius: 3px; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; color: rgba(244, 242, 237, 0.72); }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 12px 22px; justify-content: space-between; align-items: center; margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line-dark); font-size: 12.5px; }
.site-footer__legal p { margin: 0; }
.site-footer__legal-list { display: flex; flex-wrap: wrap; gap: 16px; list-style: none; margin: 0; padding: 0; }

/* 24 — Content, blog, pages -------------------------------------------- */
.page-hero { background: var(--bone); border-bottom: 1px solid var(--line); padding-block: clamp(46px, 7vw, 96px) clamp(34px, 5vw, 64px); }
.page-hero__title { margin: 0 0 12px; text-transform: uppercase; font-size: clamp(2rem, 5vw, 3.6rem); }
.page-hero__text { max-width: 62ch; color: var(--muted); font-size: 1.02rem; }
.entry-content { max-width: 780px; }
/* WooCommerce blocks are full-width layouts — let them use the whole column and give
   the order-summary rows room so long product names wrap on word boundaries. */
.entry-content:has(.wp-block-woocommerce-checkout),
.entry-content:has(.wp-block-woocommerce-cart),
.entry-content:has(.wp-block-woocommerce-order-confirmation) { max-width: 1240px; }
.entry-content .wc-block-components-sidebar-layout { align-items: start; }
.entry-content .wc-block-components-order-summary-item__description { min-width: 0; padding-right: 14px; }
.entry-content .wc-block-components-product-name { overflow-wrap: normal; word-break: normal; }
.entry-content .wc-block-components-order-summary-item__total-price { margin-left: auto; text-align: right; }
.entry-content .wc-block-components-sidebar { position: static; }

.entry-content > * + * { margin-top: 1.1em; }
.entry-content h2 { margin-top: 1.6em; text-transform: uppercase; font-size: clamp(1.4rem, 2.6vw, 2rem); }
.entry-content h3 { margin-top: 1.4em; }
.entry-content ul, .entry-content ol { padding-left: 20px; display: grid; gap: 8px; }
.entry-content img, .entry-content .wp-block-image img { border-radius: var(--radius); }
.entry-content blockquote { margin: 1.6em 0; padding: 20px 24px; border-left: 3px solid var(--signal); background: var(--bone); font-family: var(--font-display); font-size: 1.15rem; }
.entry-content a { text-decoration: underline; text-underline-offset: 3px; }
.entry-content table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.entry-content th, .entry-content td { border: 1px solid var(--line); padding: 11px 13px; text-align: left; }
.entry-content th { background: var(--bone); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }

.post-list { display: grid; gap: 16px; }
.post-card { display: grid; gap: 16px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); }
.post-card__meta { font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.post-card h2 { margin: 0; font-size: 1.35rem; }

.error-404 { text-align: center; padding-block: clamp(70px, 12vw, 150px); }
.error-404__code { font-family: var(--font-display); font-size: clamp(4rem, 18vw, 12rem); font-weight: 900; line-height: 0.9; letter-spacing: -0.04em; margin: 0; }
.error-404__code em { color: var(--signal); font-style: normal; }

/* 25 — Reveal + utilities --------------------------------------------- */
[data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity 0.75s var(--ease), transform 0.75s var(--ease); transition-delay: var(--delay, 0ms); }
[data-reveal].is-revealed { opacity: 1; transform: none; }
.to-top { position: fixed; right: 16px; bottom: 82px; z-index: 930; width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow-sm); }
.to-top:hover { background: var(--ink); color: var(--bone); }
.to-top .i { transform: rotate(-90deg); }
.breadcrumbs { font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }
.breadcrumbs a { color: var(--muted); }
.breadcrumbs a:hover { color: var(--ink); }
.breadcrumbs span.sep { margin-inline: 8px; opacity: 0.5; }

/* 25b — Homepage bands ------------------------------------------------ */
/* Spotlight: the newest drop pulled out of the grid so the homepage has a focal point. */
.spotlight { background: var(--ink); color: var(--bone); overflow: hidden; }
.spotlight__inner { display: grid; gap: clamp(24px, 4vw, 58px); align-items: center; }
.spotlight__media { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--ink-3); }
.spotlight__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.spotlight .eyebrow { color: rgba(244, 242, 237, 0.6); }
.spotlight__title { margin: 0 0 16px; color: var(--bone); text-transform: uppercase; font-size: clamp(1.9rem, 4vw, 3.4rem); }
.spotlight__text { max-width: 48ch; margin: 0; color: rgba(244, 242, 237, 0.72); font-size: 1.02rem; }
.spotlight__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; margin: 26px 0 0; font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; }
.spotlight__price del { color: rgba(244, 242, 237, 0.5); font-size: 1.1rem; font-weight: 400; }
.spotlight__price ins { text-decoration: none; color: var(--signal); }
.spotlight__meta { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 18px 0 0; padding: 0; list-style: none; font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(244, 242, 237, 0.62); }
.spotlight__meta li { display: inline-flex; align-items: center; gap: 8px; }
.spotlight__meta .i { color: var(--signal); }
.spotlight__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.spotlight__badge { position: absolute; top: 14px; left: 14px; z-index: 3; }

/* Weekly deal countdown */
.deal-timer { display: grid; gap: 12px; margin: 24px 0 0; padding: 16px 18px; border: 1px solid var(--line-dark); border-radius: var(--radius); background: rgba(244, 242, 237, 0.03); }
.deal-timer__label { display: inline-flex; align-items: center; gap: 9px; margin: 0; font-size: 10.5px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(244, 242, 237, 0.62); }
.deal-timer__label .i { color: var(--signal); }
.deal-timer__clock { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px 18px; margin: 0; }
.deal-timer__unit { display: inline-flex; align-items: baseline; gap: 6px; }
.deal-timer__unit b { font-family: var(--font-display); font-size: clamp(1.35rem, 2.4vw, 1.8rem); font-weight: 800; line-height: 1; color: var(--bone); font-variant-numeric: tabular-nums; }
.deal-timer__unit i { font-style: normal; font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(244, 242, 237, 0.45); }
.deal-timer__track { display: block; height: 3px; border-radius: 2px; background: rgba(244, 242, 237, 0.14); overflow: hidden; }
.deal-timer__track b { display: block; height: 100%; width: 0; background: var(--signal); transition: width 1s linear; }
.deal-timer.is-over .deal-timer__track b { background: var(--muted-soft); }

/* Rating summary sits beside the review cards. */
.review-layout { display: grid; gap: 16px; }
.rating-summary { display: flex; flex-direction: column; gap: 14px; padding: 28px 24px; background: var(--ink); color: var(--bone); border-radius: var(--radius); }
.rating-summary__score { display: flex; align-items: baseline; gap: 10px; font-family: var(--font-display); font-size: clamp(2.6rem, 5vw, 3.6rem); font-weight: 800; line-height: 1; margin: 0; }
.rating-summary__score span { font-size: 1.1rem; font-weight: 500; font-family: var(--font-body); color: rgba(244, 242, 237, 0.55); }
.rating-summary .stars__star.is-on { color: var(--signal); }
.rating-summary__text { margin: 0; font-size: 13.5px; color: rgba(244, 242, 237, 0.7); }
.rating-summary__bars { display: grid; gap: 8px; margin-top: 4px; }
.rating-summary__bar { display: grid; grid-template-columns: 34px 1fr 46px; align-items: center; gap: 10px; font-size: 11.5px; letter-spacing: 0.1em; color: rgba(244, 242, 237, 0.6); }
.rating-summary__bar i { display: block; height: 4px; border-radius: 2px; background: rgba(244, 242, 237, 0.16); overflow: hidden; }
.rating-summary__bar i b { display: block; height: 100%; background: var(--signal); }

/* Guarantee band closing the page before the newsletter. */
.guarantee { border-top: 1px solid var(--line); background: var(--paper); }
.guarantee__grid { display: grid; gap: 1px; background: var(--line); grid-template-columns: 1fr; }
.guarantee__item { display: grid; gap: 9px; padding: 30px 24px; background: var(--paper); }
.guarantee__item .i { color: var(--ink); }
.guarantee__item strong { font-family: var(--font-display); font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.guarantee__item p { margin: 0; font-size: 13.5px; color: var(--muted); }

@media (min-width: 600px) {
	.guarantee__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.rating-summary { flex-direction: row; align-items: center; gap: 30px; }
	.rating-summary__main { min-width: 210px; }
	.rating-summary__bars { flex: 1 1 220px; }
}

@media (min-width: 900px) {
	.spotlight__inner { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
	.spotlight--flip .spotlight__media { order: 2; }
	.guarantee__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.review-layout { grid-template-columns: minmax(280px, 0.68fr) minmax(0, 1.32fr); align-items: start; }
}

/* 26 — Responsive ------------------------------------------------------ */
/* Mobile: quick-add stays visible so shoppers can add in one tap. */
@media (max-width: 899px) {
	.card__actions { opacity: 1; transform: none; }
	.card__actions .btn--light { display: none; }
	.card__wish { opacity: 1; }
}

@media (min-width: 600px) {
	:root { --gutter: 26px; }
	.usp-bar__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 16px; }
	.rail { grid-auto-columns: 46%; }
	.review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.newsletter-form { grid-template-columns: 1fr auto; }
	.tile-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
	.post-card { grid-template-columns: 240px 1fr; align-items: center; }
	.hero__foot { gap: 14px 40px; }
}

@media (min-width: 900px) {
	:root { --gutter: 34px; --header-h: 76px; }
	.wordmark { font-size: 25px; }
	.primary-nav { display: block; }
	.site-header__brand { margin-inline: 0; order: -1; }
	.site-header__burger { display: none; }
	.product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 18px; }
	.rail { grid-auto-flow: initial; grid-auto-columns: auto; overflow: visible; grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.review-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.product-hero { grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr); gap: clamp(30px, 5vw, 72px); }
	.product-gallery { position: sticky; top: calc(var(--header-h) + 20px); }
	.product-gallery .flex-control-thumbs { grid-template-columns: repeat(5, 1fr); }
	.filter-panel,
	.filter-panel[hidden] { position: static; display: block; background: none; }
	.filter-panel .drawer__head,
	.filter-panel .drawer__backdrop { display: none; }
	.filter-panel__inner { position: static; box-shadow: none; padding: 0; overflow: visible; }
	.filter-toggle { display: none; }
	.shop-layout { display: grid; grid-template-columns: 258px minmax(0, 1fr); gap: 40px; align-items: start; }
	.shop-sidebar { position: sticky; top: calc(var(--header-h) + 20px); }
	.site-footer__inner { grid-template-columns: 1.4fr repeat(3, 1fr) 1fr; gap: 40px; }
	.editorial { grid-template-columns: 1fr 1fr; }
	.editorial--flip .editorial__media { order: 2; }
	.newsletter-band__inner { grid-template-columns: 1.1fr 1fr; gap: 50px; }
	.sticky-buy { display: none; }
	.to-top { bottom: 26px; right: 26px; }
	.product-summary { position: sticky; top: calc(var(--header-h) + 20px); }
}

@media (min-width: 1200px) {
	.rail { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.hero__title { max-width: 16ch; }
}

/* 27 — Motion & print ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
	[data-reveal] { opacity: 1; transform: none; }
	/* The boot screen stays (it covers the non-blocking stylesheets landing) but the
	   cycling status lines need a static winner once their animations are frozen. */
}

@media print {
	.site-header, .site-footer, .announce, .sticky-buy, .to-top, .drawer { display: none !important; }
}

/* 28 — Admin bar offset ---------------------------------------------- */
.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
	.admin-bar .site-header { top: 46px; }
}

/* 29 — Motion layer --------------------------------------------------- */
/* Reveal only ever hides content when JavaScript is running, so a broken
   script (or no script at all) leaves the page fully readable. */
html:not(.awn-js) [data-reveal] { opacity: 1; transform: none; }

/* Reading progress rail (injected by main.js). */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 9997; pointer-events: none; }
.scroll-progress span { display: block; height: 100%; background: var(--signal); transform: scaleX(0); transform-origin: 0 50%; will-change: transform; }
.admin-bar .scroll-progress { top: 32px; }
@media screen and (max-width: 782px) {
	.admin-bar .scroll-progress { top: 46px; }
}

/* Card hover gets a body-shifting shadow, the same move as the image zoom. */
@media (hover: hover) {
	.card__media { transition: box-shadow 0.45s var(--ease); }
	.card:hover .card__media { box-shadow: 0 34px 54px -36px rgba(11, 11, 12, 0.55); }
	.review { transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); }
	.review:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
	.tile { transition: box-shadow 0.45s var(--ease); }
	.tile:hover { box-shadow: var(--shadow-md); }

	/* Slow light sweep across solid buttons. */
	.btn { position: relative; overflow: hidden; }
	.btn::after {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: -60%;
		width: 45%;
		background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.3), transparent);
		transform: skewX(-18deg);
		transition: left 0.65s var(--ease);
		pointer-events: none;
	}
	.btn:hover::after { left: 125%; }
	.btn--ghost::after { background: linear-gradient(100deg, transparent, rgba(11, 11, 12, 0.08), transparent); }
}

/* Cart badge acknowledges the change instead of silently re-labelling. */
.count-badge.is-bump { animation: awn-bump 0.5s var(--ease); }
@keyframes awn-bump {
	0% { transform: scale(1); }
	38% { transform: scale(1.5); }
	100% { transform: scale(1); }
}

/* The hero drifts into place rather than snapping. */
.hero__media img { animation: awn-kenburns 24s ease-out both; }
@keyframes awn-kenburns {
	from { transform: scale(1.07); }
	to { transform: scale(1); }
}

.usp .i { transition: transform 0.35s var(--ease); }
.usp:hover .i { transform: translateY(-3px); }
.guarantee__item .i { transition: transform 0.35s var(--ease), color 0.35s var(--ease); }
.guarantee__item:hover .i { transform: translateY(-3px); color: var(--sale); }

/* 30 — Desktop mega panel -------------------------------------------- */
.header-mega { display: none; }
.header-mega[hidden] { display: none; }

.mega-cat-grid { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mega-cat {
	display: grid;
	grid-template-columns: 58px minmax(0, 1fr) 16px;
	align-items: center;
	gap: 14px;
	padding: 9px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.mega-cat:hover { border-color: var(--ink); background: var(--bone); }
.mega-cat__media { display: block; width: 58px; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 2px; background: var(--sand); }
.mega-cat__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.mega-cat:hover .mega-cat__media img { transform: scale(1.07); }
.mega-cat__body { display: grid; gap: 3px; min-width: 0; }
.mega-cat__title { font-family: var(--font-display); font-size: 14px; font-weight: 700; letter-spacing: 0.01em; }
.mega-cat__meta { font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-soft); }
.mega-cat__arrow { opacity: 0; transform: translateX(-4px); transition: opacity 0.25s var(--ease), transform 0.25s var(--ease); }
.mega-cat:hover .mega-cat__arrow { opacity: 1; transform: none; }

.mega-perks { list-style: none; margin: 20px 0; padding: 0; display: grid; gap: 10px; }
.mega-perks li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 11px; align-items: start; font-size: 13px; color: var(--muted); }
.mega-perks .i { color: var(--signal-ink); background: var(--signal); border-radius: 50%; padding: 2px; }

.mega-feature { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 16px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); transition: border-color 0.25s var(--ease); }
.mega-feature:hover { border-color: var(--ink); }
.mega-feature__media { display: block; width: 92px; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 2px; background: var(--sand); }
.mega-feature__media img { width: 100%; height: 100%; object-fit: cover; }
.mega-feature__body { display: grid; gap: 5px; min-width: 0; }
.mega-feature__kicker { font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sale); }
.mega-feature__title { font-family: var(--font-display); font-size: 15.5px; font-weight: 700; line-height: 1.3; }
.mega-feature__price { display: flex; align-items: baseline; gap: 8px; font-size: 14.5px; font-weight: 600; }
.mega-feature__price del { color: var(--muted-soft); font-size: 13px; font-weight: 400; }
.mega-feature__price ins { text-decoration: none; color: var(--sale); }

@media (min-width: 900px) {
	.header-mega {
		display: block;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 880;
		background: var(--paper);
		border-bottom: 1px solid var(--line);
		box-shadow: 0 46px 70px -46px rgba(11, 11, 12, 0.45);
		opacity: 0;
		transform: translateY(-12px);
		transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
		pointer-events: none;
	}
	.header-mega.is-open { opacity: 1; transform: none; pointer-events: auto; }
	.header-mega__inner { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.85fr); gap: clamp(26px, 3.5vw, 54px); padding-block: clamp(24px, 3vw, 36px); }
	.header-mega__label { margin: 0 0 14px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted-soft); }
	.header-mega__aside { display: grid; align-content: start; gap: 14px; padding-left: clamp(0px, 2vw, 28px); border-left: 1px solid var(--line); }
	.primary-nav__list > .awn-has-mega > a::after { transform: scaleX(1); }
	.primary-nav__list > li.is-mega-active > a { color: var(--ink); }
}

@media (min-width: 1200px) {
	.mega-cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 31 — Menu polish ---------------------------------------------------- */
.nav-caret { display: inline-flex; align-items: center; margin-left: 6px; transition: transform 0.3s var(--ease); }
.primary-nav__list > li > a .nav-caret { margin-left: 0; }
.primary-nav__list > li.menu-item-has-children > a > .nav-caret { opacity: 0.55; }
.primary-nav__list > li.menu-item-has-children:hover > a > .nav-caret { opacity: 1; transform: rotate(180deg); }

/* Mobile sub menus behave like an accordion instead of a wall of links. */
.mobile-nav__list .sub-menu {
	display: grid;
	gap: 0;
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	margin: 0;
	transition: max-height 0.42s var(--ease), opacity 0.3s var(--ease), margin-bottom 0.42s var(--ease);
}
.mobile-nav__list .sub-menu.is-open { max-height: 640px; opacity: 1; margin-bottom: 14px; }
html:not(.awn-js) .mobile-nav__list .sub-menu { max-height: none; opacity: 1; margin-bottom: 14px; }
.mobile-nav__list > li > a.has-sub { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mobile-nav__list > li > a.has-sub[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }

.drawer__quick {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	background: var(--line-dark);
	border-top: 1px solid var(--line-dark);
	margin-top: 24px;
}
.drawer__quick a { display: flex; align-items: center; gap: 10px; padding: 15px 20px; background: var(--ink); font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(244, 242, 237, 0.78); transition: background-color 0.25s var(--ease), color 0.25s var(--ease); }
.drawer__quick a:hover { background: var(--ink-2); color: var(--bone); }
.drawer__quick .i { color: var(--signal); }

/* 32 — FAQ accordion (built from the page content by main.js) ---------- */
.faq-list { display: grid; gap: 10px; }
.faq-item { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); overflow: hidden; }
.faq-item__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 20px;
	cursor: pointer;
	font-family: var(--font-display);
	font-size: 1.02rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.4;
	list-style: none;
	transition: background-color 0.25s var(--ease);
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q:hover { background: var(--bone); }
.faq-item__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--bone);
	transition: transform 0.35s var(--ease), background-color 0.35s var(--ease);
}
.faq-item[open] .faq-item__icon { transform: rotate(180deg); background: var(--signal); }
.faq-item__a { padding: 0 20px 20px; color: var(--muted); font-size: 15px; }
.faq-item__a > *:first-child { margin-top: 0; }
.faq-item__a a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* 33 — My Account ----------------------------------------------------- */
.awn-account .entry-content { max-width: 1240px; }
.awn-account .site-main > .page-hero { display: none; }

/* `minmax(0, 1fr)` keeps the column pinned to the container: without it the mobile tab
   strip (auto-flowed, max-content columns) drags the whole page hundreds of pixels wide. */
.account { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(22px, 3vw, 36px); }
.account__hero,
.account__layout,
.account__content,
.account-nav,
.account-stats,
.account-actions { min-width: 0; }

.account__hero {
	display: grid;
	gap: 26px;
	padding: clamp(26px, 3.6vw, 44px);
	background: var(--ink);
	color: var(--bone);
	border-radius: var(--radius);
}
.account__id { display: flex; align-items: center; gap: 18px; }
.account__avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 66px;
	height: 66px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--signal);
	color: var(--signal-ink);
	font-family: var(--font-display);
	font-size: 21px;
	font-weight: 800;
	letter-spacing: 0.04em;
}
.account__hero .eyebrow { color: rgba(244, 242, 237, 0.55); margin-bottom: 8px; }
.account__name { margin: 0; color: var(--bone); font-size: clamp(1.45rem, 3vw, 2.15rem); text-transform: uppercase; }
.account__email { margin: 8px 0 0; font-size: 13px; color: rgba(244, 242, 237, 0.6); }

.account-stats { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line-dark); border: 1px solid var(--line-dark); border-radius: var(--radius); grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; }
.account-stats li { background: var(--ink); }
.account-stats a, .account-stats .account-stat { display: grid; gap: 7px; padding: 17px 18px; color: var(--bone); transition: background-color 0.25s var(--ease); }
.account-stats a:hover { background: var(--ink-2); }
.account-stats .i { color: var(--signal); }
.account-stat__value { font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; line-height: 1.1; }
.account-stat__label { font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(244, 242, 237, 0.55); }

.account__layout { display: grid; gap: clamp(20px, 3vw, 38px); align-items: start; }
.account__content { min-width: 0; }

.account-nav { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; }
.account-nav__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.account-nav__list a {
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr) 16px;
	align-items: center;
	gap: 12px;
	padding: 13px 14px;
	border-radius: 2px;
	font-size: 13.5px;
	font-weight: 600;
	transition: background-color 0.22s var(--ease), color 0.22s var(--ease);
}
.account-nav__list a:hover { background: var(--bone); }
.account-nav__list .is-active a { background: var(--ink); color: var(--bone); }
.account-nav__list .is-active a .i { color: var(--signal); }
.account-nav__arrow { opacity: 0; transform: translateX(-4px); transition: opacity 0.22s var(--ease), transform 0.22s var(--ease); }
.account-nav__list a:hover .account-nav__arrow,
.account-nav__list .is-active .account-nav__arrow { opacity: 1; transform: none; }
.account-nav__extra { display: flex; align-items: center; gap: 12px; margin-top: 2px; padding: 13px 14px; border-top: 1px solid var(--line); font-size: 13.5px; font-weight: 600; }
.account-nav__extra .i { color: var(--sale); }
.account-nav__extra:hover { color: var(--sale); }
.account-nav__help { margin: 12px 4px 4px; font-size: 12.5px; color: var(--muted); }
.account-nav__help a { text-decoration: underline; text-underline-offset: 3px; color: var(--ink); }

.account-intro { color: var(--muted); font-size: 15.5px; }
.account-intro strong { color: var(--ink); }

.account-actions { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: clamp(22px, 3vw, 34px); }
.account-action {
	display: grid;
	gap: 8px;
	padding: 20px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	transition: border-color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.account-action:hover { border-color: var(--ink); transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.account-action .i { color: var(--ink); }
.account-action__title { font-family: var(--font-display); font-size: 15px; font-weight: 700; }
.account-action__text { font-size: 13px; color: var(--muted); }

.account-block { border-top: 1px solid var(--line); padding-top: clamp(20px, 2.6vw, 30px); }
.account-block__head { margin-bottom: 18px; }
.account-block__title { font-size: clamp(1.2rem, 2.2vw, 1.5rem); text-transform: uppercase; margin: 0 0 6px; }
.account-block__note { margin: 0; font-size: 13.5px; color: var(--muted); }

.account-order {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 10px 18px;
	align-items: center;
	padding: 20px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.account-order:hover { border-color: var(--ink); background: var(--bone); }
.account-order__num { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; }
.account-order__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.account-order__total { font-weight: 700; text-align: right; }
.account-order__cta { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.account-order__cta .i { transition: transform 0.3s var(--ease); }
.account-order:hover .account-order__cta .i { transform: translateX(4px); }

.account-status { display: inline-flex; padding: 5px 9px; border-radius: 2px; background: var(--bone); font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); }
.account-status--completed { background: rgba(29, 138, 78, 0.12); color: var(--ok); }
.account-status--processing { background: rgba(200, 255, 61, 0.34); color: var(--signal-ink); }
.account-status--pending, .account-status--on-hold { background: rgba(242, 165, 22, 0.18); color: #8a5a00; }
.account-status--cancelled, .account-status--failed, .account-status--refunded { background: rgba(215, 54, 47, 0.1); color: var(--sale); }

.account-empty { display: grid; gap: 14px; justify-items: start; }
.account-empty__kicker { margin: 0; font-size: 10.5px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--sale); }
.account-empty p { color: var(--muted); max-width: 52ch; }
.account-out { margin-top: 28px; font-size: 12.5px; color: var(--muted); }
.account-out a { text-decoration: underline; text-underline-offset: 3px; color: var(--ink); }

/* `woocommerce-layout.css` floats the account nav and content at 30% / 68%. Inside the
   theme's own grid those percentages resolve against the *grid column*, not the page,
   which shrinks both to a fraction of it — so the dimensions are reset. */
.awn-account .woocommerce-MyAccount-navigation,
.awn-account .woocommerce-MyAccount-content {
	float: none !important;
	width: 100% !important;
	max-width: none !important;
	box-sizing: border-box;
}

/* My Account inner content (orders table, addresses, forms, order view). */
.woocommerce-MyAccount-content > h2:first-child,
.woocommerce-MyAccount-content form > h3,
.woocommerce-MyAccount-content .woocommerce-address-fields > h3 { font-size: clamp(1.2rem, 2.2vw, 1.55rem); text-transform: uppercase; }
.woocommerce .col2-set, .woocommerce-page .col2-set { display: grid; gap: 18px; }
/* WooCommerce's layout sheet floats these columns; the theme stacks them instead.
   The body carries `woocommerce-page` (not a bare `woocommerce`), so both are listed. */
.woocommerce .col2-set .col-1, .woocommerce .col2-set .col-2,
.woocommerce-page .col2-set .col-1, .woocommerce-page .col2-set .col-2,
.woocommerce .u-column1, .woocommerce .u-column2,
.woocommerce-page .u-column1, .woocommerce-page .u-column2 { width: 100% !important; float: none !important; }
.woocommerce-Addresses { display: grid; gap: 16px; margin-top: 6px; }
.woocommerce-Address { border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.woocommerce-Address-title { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.woocommerce-Address-title h2 { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.woocommerce-Address-title .edit { font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; border-bottom: 1px solid currentColor; padding-bottom: 3px; white-space: nowrap; }
.woocommerce-Address address { font-style: normal; font-size: 14.5px; color: var(--muted); line-height: 1.7; }
.woocommerce-MyAccount-content .woocommerce-orders-table { margin-top: 6px; }
.woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions { white-space: nowrap; }
.woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions .button { padding: 11px 16px; font-size: 11px; }
.woocommerce-MyAccount-content .form-row { margin-bottom: 16px; }
.woocommerce-MyAccount-content .required { color: var(--sale); }
.woocommerce-MyAccount-content fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin: 0 0 20px; }
.woocommerce-MyAccount-content fieldset legend { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding-inline: 6px; }
.woocommerce-MyAccount-content .woocommerce-form__label-for-checkbox { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.woocommerce-MyAccount-content .woocommerce-form__input-checkbox { width: 16px; height: 16px; }
.woocommerce-MyAccount-content .woocommerce-Button { margin-top: 6px; }
.woocommerce-order-details, .woocommerce-customer-details { margin-top: clamp(26px, 3vw, 40px); }
.woocommerce-order-details__title, .woocommerce-column__title { font-size: clamp(1.1rem, 2vw, 1.4rem); text-transform: uppercase; }
.woocommerce-customer-details address { font-style: normal; font-size: 14.5px; line-height: 1.7; }

/* Split login / register screen. */
.auth { display: grid; gap: clamp(24px, 4vw, 54px); align-items: start; }
.auth__aside { background: var(--ink); color: var(--bone); border-radius: var(--radius); padding: clamp(26px, 3.6vw, 44px); }
.auth__aside .eyebrow { color: rgba(244, 242, 237, 0.55); }
.auth__title { margin: 0 0 14px; color: var(--bone); text-transform: uppercase; font-size: clamp(1.55rem, 3vw, 2.25rem); }
.auth__lead { margin: 0; color: rgba(244, 242, 237, 0.72); font-size: 15px; }
.auth__perks { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; }
.auth__perks li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 14px; color: rgba(244, 242, 237, 0.8); }
.auth__perks .i { color: var(--signal); margin-top: 2px; }
.auth__note { margin: 26px 0 0; padding-top: 18px; border-top: 1px solid var(--line-dark); font-size: 12.5px; color: rgba(244, 242, 237, 0.55); }
.auth__heading { margin: 0 0 6px; text-transform: uppercase; font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
.auth__intro { margin: 0 0 22px; color: var(--muted); font-size: 14.5px; }
.auth__columns { display: grid; gap: clamp(26px, 3vw, 44px); }
.auth__col { min-width: 0; }
.auth__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.woocommerce-form-login__rememberme { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; }
.woocommerce-form__input-checkbox { width: 16px; height: 16px; }
.woocommerce-LostPassword a { font-size: 13px; text-decoration: underline; text-underline-offset: 3px; color: var(--muted); }
.woocommerce-LostPassword a:hover { color: var(--ink); }

@media (min-width: 600px) {
	.account-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.woocommerce-Addresses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 899px) {
	/* The account menu becomes a swipeable tab strip on phones. */
	.account-nav { padding: 8px; }
	.account-nav__list { grid-auto-flow: column; grid-auto-columns: max-content; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
	.account-nav__list::-webkit-scrollbar { display: none; }
	.account-nav__list a { grid-template-columns: 18px auto; gap: 8px; padding: 11px 15px; border: 1px solid var(--line); border-radius: 999px; white-space: nowrap; }
	.account-nav__list .is-active a { border-color: var(--ink); }
	.account-nav__arrow { display: none; }
	.account-nav__extra, .account-nav__help { display: none; }
	.account-order { grid-template-columns: minmax(0, 1fr); }
	.account-order__total { text-align: left; }
}

@media (min-width: 900px) {
	.account__hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; }
	.account-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.account__layout { grid-template-columns: 274px minmax(0, 1fr); }
	.account-nav { position: sticky; top: calc(var(--header-h) + 20px); }
	.auth { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
	.auth__columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.woocommerce-Addresses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
	.account-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* 34 — Long-form & support pages -------------------------------------- */
/* Anchor targets must clear the sticky header. */
.entry-content h2, .entry-content h3 { scroll-margin-top: calc(var(--header-h) + 28px); }

/* Contents rail, built from the page's own H2s by main.js. */
.page-toc { margin: 0 0 clamp(26px, 3vw, 42px); padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bone); }
.page-toc__title { margin: 0 0 14px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); }
.page-toc__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; counter-reset: awn-toc; }
.page-toc__list li { counter-increment: awn-toc; }
.page-toc__list a { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; font-size: 14.5px; font-weight: 600; line-height: 1.45; }
.page-toc__list a::before { content: counter(awn-toc, decimal-leading-zero); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--muted-soft); padding-top: 3px; }
.page-toc__list a:hover { color: var(--sale); }
.page-toc__list a:hover::before { color: var(--sale); }

@media (min-width: 700px) {
	.page-toc__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 32px; }
}

/* Support hub blocks used by the Contact page. */
.support-lead { max-width: 62ch; font-size: clamp(1.02rem, 1.5vw, 1.16rem); }
.support-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 0 0 clamp(24px, 3vw, 38px); }
.support-card { display: grid; gap: 9px; align-content: start; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); transition: border-color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.support-card:hover { border-color: var(--ink); transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.support-card .i { color: var(--ink); }
.support-card h3 { margin: 0; font-size: 0.98rem; letter-spacing: 0.06em; text-transform: uppercase; }
.support-card p { margin: 0; font-size: 14px; color: var(--muted); }
.support-card a { font-weight: 600; }
.support-promise { display: grid; gap: 10px; padding: 24px; margin: 0 0 clamp(24px, 3vw, 38px); background: var(--ink); color: var(--bone); border-radius: var(--radius); }
.support-promise strong { font-family: var(--font-display); font-size: 1.15rem; text-transform: uppercase; letter-spacing: 0.01em; }
.support-promise p { margin: 0; color: rgba(244, 242, 237, 0.72); font-size: 14.5px; }
.support-promise .i { color: var(--signal); }
.support-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.support-promise .support-cta .btn { padding: 13px 20px; font-size: 11.5px; }

/* ==========================================================================
   35 — ARCHIVE EDITION
   The identity kit's own system: an achromatic ramp, monospaced micro-labels,
   hairline rules drawn by grid gaps, and numbered artifacts.
   ========================================================================== */

/* 35.1 — Mark & wordmark -------------------------------------------------- */
.wordmark { display: inline-flex; align-items: center; gap: 11px; color: currentColor; }
.wordmark .mark { width: auto; flex: 0 0 auto; }
.wordmark__text { display: flex; flex-direction: column; line-height: 1; }
.wordmark__name {
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.4em;
	text-indent: 0.4em;
}
.wordmark__co {
	font-family: var(--font-mono);
	font-size: 8px;
	letter-spacing: 0.42em;
	text-indent: 0.42em;
	opacity: 0.65;
	margin-top: 4px;
}
.wordmark--sm .mark { height: 26px; }
.wordmark--sm .wordmark__name { font-size: 11.5px; }
.wordmark--md .mark { height: 34px; }
.wordmark--lg .mark { height: 46px; }
.wordmark--lg .wordmark__name { font-size: 16px; }
.wordmark--lg .wordmark__co { font-size: 9px; }
@media (max-width: 520px) {
	.wordmark--md .mark { height: 28px; }
}

/* 35.2 — Transmission ticker --------------------------------------------- */
.ticker {
	background: var(--void);
	color: var(--bone);
	border-bottom: 1px solid var(--line-dark);
	overflow: hidden;
	padding-block: 7px;
}
.ticker__track { display: flex; width: max-content; animation: awn-marquee 42s linear infinite; }
.ticker__group { display: flex; align-items: center; }
.ticker__item {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: rgba(237, 234, 225, 0.6);
	white-space: nowrap;
	padding-inline: 22px;
}
.ticker__sep { color: rgba(237, 234, 225, 0.25); font-family: var(--font-mono); font-size: 10px; }
@keyframes awn-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.ticker__track, .foot-statement__track { animation: none; }
}

/* 35.3 — Header: nav · mark · tools -------------------------------------- */
.site-header {
	background: var(--void);
	color: var(--bone);
	border-bottom: 1px solid var(--line-dark);
}
.site-header__inner { display: flex; align-items: center; gap: 18px; min-height: 74px; }
.site-header__nav { flex: 1 1 0; display: flex; align-items: center; min-width: 0; }
.site-header__brand { flex: 0 0 auto; display: flex; justify-content: center; }
.site-header__brand a { display: inline-flex; color: var(--bone); }
.site-header__tools { flex: 1 1 0; display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.site-header .primary-nav__list { margin: 0; }
.site-header .primary-nav__list > li > a {
	display: inline-block;
	padding: 8px 0;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: rgba(237, 234, 225, 0.62);
	transition: color 0.24s var(--ease);
}
.site-header .primary-nav__list > li > a:hover,
.site-header .primary-nav__list > li.current-menu-item > a { color: var(--bone); }
.site-header .icon-btn { color: rgba(237, 234, 225, 0.68); }
.site-header .icon-btn:hover { color: var(--bone); }
.site-header .count-badge { background: var(--bone); color: var(--void); }
.site-header__burger {
	display: none;
	flex: 0 0 auto;
	border: 1px solid var(--line-dark);
	width: 40px;
	height: 40px;
}
@media (max-width: 1023px) {
	.site-header__nav { display: none; }
	.site-header__inner { justify-content: space-between; position: relative; }
	.site-header__burger { display: inline-flex; }
	.site-header__tools { flex: 0 0 auto; }
	/* With the nav out of the flow the two shoulders are unequal, so the mark is
	   centred against the rail itself rather than between them. */
	.site-header__brand { position: absolute; left: 50%; transform: translateX(-50%); }
}
@media (min-width: 1024px) {
	.site-header .primary-nav__list { display: flex; align-items: center; gap: clamp(16px, 2vw, 30px); }
}
/* Between 1024 and 1200 the centred mark and a five-label rail compete for the same
   width. The rail tightens rather than colliding with the mark. */
@media (min-width: 1024px) and (max-width: 1199px) {
	.site-header .primary-nav__list { gap: 16px; }
	.site-header .primary-nav__list > li > a { font-size: 10.5px; letter-spacing: 0.18em; }
	.site-header .wordmark--md { gap: 8px; }
	.site-header .wordmark--md .wordmark__name { font-size: 12px; letter-spacing: 0.3em; text-indent: 0.3em; }
}

/* The story links live in the panel rather than the rail, which only has room for the
   four class entries before it collides with the centred mark. */
.mega-links { list-style: none; margin: 0 0 18px; padding: 0 0 18px; border-bottom: 1px solid var(--line-dark); display: grid; gap: 11px; }
.mega-links a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(237, 234, 225, 0.66);
}
.mega-links a:hover { color: var(--bone); }
.mega-links .i { transition: transform 0.3s var(--ease); }
.mega-links a:hover .i { transform: translate(2px, -2px); }

/* 35.3b — Mega panel: a dark sheet under the dark rail ------------------- */
/* The panel was built as a paper dropdown. Under a void rail that read as a seam, so it
   now continues the header: carbon cells, hairline dividers, mono labels. */
@media (min-width: 900px) {
	.header-mega {
		background: var(--void);
		border-bottom: 1px solid var(--line-dark);
		box-shadow: 0 40px 70px -40px rgba(10, 10, 10, 0.7);
	}
}
.header-mega .header-mega__label {
	margin: 0 0 14px;
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: rgba(237, 234, 225, 0.5);
}
.header-mega .header-mega__aside { border-left-color: var(--line-dark); }
.header-mega .mega-cat,
.header-mega .mega-feature {
	border-color: var(--line-dark);
	border-radius: 0;
	background: var(--carbon);
}
.header-mega .mega-cat:hover,
.header-mega .mega-feature:hover { border-color: var(--bone); background: var(--carbon); }
.header-mega .mega-cat__media,
.header-mega .mega-feature__media { background: var(--void); border-radius: 0; }
.header-mega .mega-cat__title {
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bone);
}
.header-mega .mega-cat__meta {
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 0.06em;
	color: rgba(237, 234, 225, 0.6);
}
.header-mega .mega-cat__arrow { color: var(--bone); }
.header-mega .mega-feature__kicker {
	font-family: var(--font-mono);
	font-weight: 400;
	letter-spacing: 0.24em;
	color: rgba(237, 234, 225, 0.55);
}
.header-mega .mega-feature__title {
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--bone);
}
.header-mega .mega-feature__price,
.header-mega .mega-feature__price ins { color: var(--bone); }
.header-mega .mega-feature__price del { color: rgba(237, 234, 225, 0.5); }
.header-mega .mega-perks { margin: 18px 0 20px; }
.header-mega .mega-perks li { font-size: 12.5px; color: rgba(237, 234, 225, 0.66); }
.header-mega .mega-perks .i { color: var(--void); background: var(--bone); border-radius: 50%; }

/* 35.4 — Hero ------------------------------------------------------------- */
.hero { background: var(--void); }
.hero__media::after {
	background: linear-gradient(180deg, rgba(10, 10, 10, 0.72) 0%, rgba(10, 10, 10, 0.22) 42%, rgba(10, 10, 10, 0.96) 100%);
}
.hero__inner {
	justify-content: space-between;
	gap: clamp(28px, 5vh, 60px);
	min-height: clamp(560px, calc(100svh - 118px), 900px);
	padding-block: clamp(22px, 3vh, 34px);
}
.hero__specs,
.hero__base {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: rgba(237, 234, 225, 0.55);
	white-space: nowrap;
}
.hero__specs > *,
.hero__base > * { flex: 0 0 auto; }
.hero__base .hero__scroll { display: inline-flex; align-items: center; gap: 8px; }
.hero__base { border-top: 1px solid var(--line-dark); padding-top: 16px; }
@media (max-width: 780px) {
	.hero__specs > *:nth-child(2),
	.hero__base > *:nth-child(2) { display: none; }
}
.hero__copy { max-width: 900px; }
.hero .eyebrow { color: rgba(237, 234, 225, 0.58); font-size: 11px; letter-spacing: 0.4em; }
.hero__title {
	margin: 0 0 26px;
	font-size: clamp(2.9rem, 9.6vw, 7.6rem);
	font-weight: 500;
	line-height: 0.94;
	letter-spacing: -0.04em;
	text-transform: uppercase;
}
.hero__text { max-width: 460px; font-size: 14.5px; line-height: 1.75; color: rgba(237, 234, 225, 0.72); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* 35.5 — Assurance strip ------------------------------------------------- */
.assure { background: var(--bone); border-bottom: 1px solid var(--line); }
.assure__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); }
.assure__item {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 17px 18px;
	background: var(--bone);
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--void);
}
.assure__item .i { color: var(--void); opacity: 0.7; }
.assure__item b { font-weight: 500; }
@media (min-width: 900px) {
	.assure__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* 35.6 — Forge: the numbered artifact grid ------------------------------- */
.forge { background: var(--void); color: var(--bone); }
.forge__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1px;
	background: var(--line-dark);
	border: 1px solid var(--line-dark);
}
@media (min-width: 860px) {
	.forge__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.piece { position: relative; display: flex; flex-direction: column; gap: 22px; padding: 20px; background: var(--void); }
@media (min-width: 700px) { .piece { padding: 30px; } }
.piece__media { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--carbon); }
.piece__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.75s var(--ease); }
.piece:hover .piece__media img { transform: scale(1.035); }
.piece__no {
	position: absolute;
	left: 16px;
	top: 10px;
	font-family: var(--font-mono);
	font-size: clamp(2.6rem, 4.6vw, 4rem);
	line-height: 1;
	font-weight: 400;
	color: rgba(237, 234, 225, 0.9);
	text-shadow: 0 2px 24px rgba(10, 10, 10, 0.5);
}
.piece__flags { position: absolute; right: 12px; top: 12px; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.piece__body { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; }
.piece__name { margin: 0; font-size: 1.1rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }
.piece__name a { color: var(--bone); }
.piece__specs { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 5px; }
.piece__specs li {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.04em;
	color: rgba(237, 234, 225, 0.55);
}
.piece__price { font-family: var(--font-mono); font-size: 13px; color: rgba(237, 234, 225, 0.85); white-space: nowrap; }
.piece__price del { opacity: 0.5; margin-right: 6px; }
.piece__price ins { text-decoration: none; }
.piece__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.piece__stock {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: rgba(237, 234, 225, 0.5);
}
.piece__stock.is-out { color: var(--sale); }

/* 35.7 — The Archive: class cards ---------------------------------------- */
.archive { background: var(--bone); color: var(--void); }
.archive-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1px;
	overflow: hidden;
	border: 1px solid var(--line);
	background: var(--line);
}
@media (min-width: 720px) {
	.archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1080px) {
	.archive-grid[data-awn-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.archive-grid[data-awn-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.cls {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	padding: 22px;
	background: var(--carbon);
	color: var(--bone);
}
.cls__media { position: absolute; inset: 0; }
.cls__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.75;
	transition: transform 0.6s var(--ease), opacity 0.6s var(--ease);
}
.cls:hover .cls__media img { transform: scale(1.035); opacity: 0.9; }
.cls__veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(10, 10, 10, 0.88) 0%, rgba(10, 10, 10, 0.2) 55%, rgba(10, 10, 10, 0.42) 100%);
}
.cls__code {
	position: absolute;
	left: 20px;
	top: 20px;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: rgba(237, 234, 225, 0.72);
}
.cls__foot { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.cls__label { display: grid; gap: 6px; }
.cls__title {
	font-family: var(--font-display);
	font-size: clamp(1.25rem, 1.9vw, 1.5rem);
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.cls__count { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: rgba(237, 234, 225, 0.62); }
.cls__go {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid rgba(237, 234, 225, 0.4);
	color: var(--bone);
	transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.cls:hover .cls__go { background: var(--bone); color: var(--void); border-color: var(--bone); }

/* 35.8 — Manifesto -------------------------------------------------------- */
.manifesto { background: var(--paper); color: var(--void); }
.manifesto__grid { display: grid; gap: clamp(30px, 5vw, 76px); align-items: center; }
@media (min-width: 1000px) {
	.manifesto__grid { grid-template-columns: 0.85fr 1fr; }
}
.manifesto__emblem {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 3 / 4;
	width: 100%;
	max-width: 430px;
	margin-inline: auto;
	border: 1px solid var(--line);
	background: var(--bone);
}
.manifesto__emblem img { width: 100%; height: 100%; object-fit: contain; padding: 26px; mix-blend-mode: multiply; }
.manifesto__emblem span {
	position: absolute;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: rgba(10, 10, 10, 0.4);
}
.manifesto__emblem span:first-of-type { left: 16px; top: 14px; }
.manifesto__emblem span:last-of-type { right: 16px; bottom: 14px; }
.manifesto__lede { max-width: 54ch; color: rgba(10, 10, 10, 0.72); line-height: 1.8; }
.tenets { margin-top: 36px; border-block: 1px solid var(--line); }
.tenet { display: flex; gap: 26px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.tenet:last-child { border-bottom: 0; }
.tenet__k { font-family: var(--font-mono); font-size: 13px; color: rgba(10, 10, 10, 0.42); padding-top: 2px; }
.tenet__t { margin: 0 0 7px; font-size: 1rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.tenet__d { margin: 0; max-width: 46ch; font-size: 14px; line-height: 1.75; color: rgba(10, 10, 10, 0.62); }

/* 35.9 — Featured artifact band ------------------------------------------ */
.artifact { position: relative; isolation: isolate; overflow: hidden; background: var(--carbon); color: var(--bone); }
.artifact__bg { position: absolute; inset: 0; z-index: 0; }
.artifact__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.4; }
.artifact__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, var(--void) 0%, rgba(10, 10, 10, 0.72) 45%, rgba(10, 10, 10, 0.2) 100%);
}
.artifact__inner { position: relative; z-index: 2; display: grid; gap: clamp(30px, 4vw, 60px); align-items: center; }
@media (min-width: 1000px) {
	.artifact__inner { grid-template-columns: 1fr 0.78fr; }
}
.artifact__name { font-size: clamp(2.1rem, 4.6vw, 3.6rem); letter-spacing: -0.03em; margin: 0 0 20px; }
.artifact__text { max-width: 46ch; color: rgba(237, 234, 225, 0.72); line-height: 1.8; }
.artifact__specs {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 15px 20px;
	max-width: 460px;
	margin: 32px 0 0;
	padding-block: 20px;
	border-block: 1px solid var(--line-dark);
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}
.artifact__specs dt { color: rgba(237, 234, 225, 0.55); }
.artifact__specs dd { margin: 0; text-align: right; color: rgba(237, 234, 225, 0.9); }
.artifact__media { position: relative; aspect-ratio: 4 / 5; border: 1px solid var(--line-dark); background: var(--bone); }
.artifact__media img { width: 100%; height: 100%; object-fit: cover; }
.artifact__media span {
	position: absolute;
	right: 16px;
	top: 14px;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: rgba(10, 10, 10, 0.5);
}

/* 35.10 — Dispatch ------------------------------------------------------- */
.dispatch { background: var(--void); color: var(--bone); }
.dispatch__inner { max-width: 680px; margin-inline: auto; text-align: center; }
.dispatch__title { margin: 0 0 18px; }
.dispatch__text { max-width: 46ch; margin-inline: auto; color: rgba(237, 234, 225, 0.7); line-height: 1.8; }
.dispatch .newsletter-form {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 520px;
	margin: 32px auto 0;
}
@media (min-width: 620px) {
	.dispatch .newsletter-form { flex-direction: row; align-items: stretch; flex-wrap: wrap; }
}
.dispatch .newsletter-form input[type="email"] {
	flex: 1 1 auto;
	min-width: 0;
	height: 56px;
	padding: 0 16px;
	border: 1px solid var(--line-dark);
	border-radius: 0;
	background: transparent;
	color: var(--bone);
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}
.dispatch .newsletter-form input[type="email"]::placeholder { color: rgba(237, 234, 225, 0.4); }
.dispatch .newsletter-form input[type="email"]:focus { border-color: var(--bone); outline: none; }
.dispatch .newsletter-form .btn { height: 56px; flex: 0 0 auto; justify-content: center; }
.dispatch .newsletter-form__note {
	flex-basis: 100%;
	margin: 16px 0 0;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(237, 234, 225, 0.45);
	text-align: center;
}

/* 35.11 — Footer statement + columns ------------------------------------- */
.foot-statement { overflow: hidden; border-block: 1px solid var(--line-dark); padding-block: 22px; }
.foot-statement__track { display: flex; width: max-content; animation: awn-marquee 58s linear infinite; }
.foot-statement__text {
	padding-inline: 30px;
	font-family: var(--font-display);
	font-size: clamp(1.9rem, 5vw, 3.6rem);
	font-weight: 500;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: rgba(237, 234, 225, 0.2);
	white-space: nowrap;
}
.site-footer { background: var(--void); color: rgba(237, 234, 225, 0.66); padding-block: clamp(42px, 5vw, 72px) 24px; }
.site-footer__inner { display: grid; gap: clamp(30px, 4vw, 54px); grid-template-columns: 1fr; }
@media (min-width: 900px) {
	.site-footer__inner { grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr)); }
}
.site-footer__brand .wordmark { color: var(--bone); }
.site-footer__note { margin: 22px 0 0; max-width: 30ch; font-size: 14px; line-height: 1.8; color: rgba(237, 234, 225, 0.55); }
.site-footer__coords {
	margin: 22px 0 0;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: rgba(237, 234, 225, 0.4);
}
.site-footer__col-title {
	margin: 0 0 18px;
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: rgba(237, 234, 225, 0.62);
}
.site-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.site-footer__list a,
.site-footer__list li { font-size: 14px; color: rgba(237, 234, 225, 0.55); }
.site-footer__list a:hover { color: var(--bone); }

/* 35.12 — Mono button treatment ------------------------------------------ */
.btn {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	border-radius: 0;
}
.hero__actions .btn,
.artifact .btn,
.dispatch .btn { padding: 16px 26px; }

/* 35.13 — Section rhythm -------------------------------------------------- */
.section-head {
	align-items: flex-end;
	gap: 18px;
	padding-bottom: 22px;
	margin-bottom: clamp(30px, 4vw, 52px);
	border-bottom: 1px solid var(--line);
}
.section-head--center { border-bottom: 0; padding-bottom: 0; }
.section-head__title { margin-bottom: 0; }
.section-head__meta {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--muted);
	white-space: nowrap;
}
.section-head__link {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.28em;
	font-weight: 400;
	padding-bottom: 4px;
	border-bottom: 0;
}
.section-head__link .i { transition: transform 0.3s var(--ease); }
.section-head__link:hover .i { transform: translate(3px, -3px); }
.section--ink .section-head,
.section--void .section-head,
.forge .section-head,
.artifact .section-head { border-color: var(--line-dark); }
.section--ink .section-head__text,
.forge .section-head__text { color: rgba(237, 234, 225, 0.68); }

/* 35.14 — Existing surfaces inherit the mono language --------------------- */
.card__title { font-family: var(--font-display); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }
.card__cat, .card__price { font-family: var(--font-mono); }
.usp__title { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; }
.flag { border-radius: 0; font-family: var(--font-mono); letter-spacing: 0.2em; }
.flag--sale { background: var(--sale); color: var(--bone); }

/* 35.15 — Reconciliations with the earlier layout ------------------------- */
body { font-size: 15px; line-height: 1.7; }

/* The header rail is a solid void band now, and the mark is optically centred by the
   two flex:1 shoulders rather than by auto margins. */
.site-header { backdrop-filter: none; }
.site-header__brand { margin-inline: 0; order: 0; }
.site-header__nav { order: 0; }
.site-header__tools { order: 1; margin-left: 0; }

/* The old nav used a scaling underline; this one signals hover with colour alone. */
.site-header .primary-nav__list > li > a::after,
.site-header .primary-nav__list > .awn-has-mega > a::after { display: none; }
.primary-nav__list > li.is-mega-active > a { color: var(--bone); }
.primary-nav__list > li > a .nav-caret { color: currentColor; }

/* Card and catalog chrome picks up the monospaced micro-label treatment. */
.card__media { background: var(--sand); }
.card__actions .btn { border-radius: 0; }
.wc-block-grid__product-title,
.woocommerce-loop-product__title { font-family: var(--font-display); font-weight: 500; }
.price,
.woocommerce-Price-amount { font-family: var(--font-mono); }

/* Skip link + focus ring read in the brand's own inversion. */
.skip-link:focus { background: var(--void); color: var(--bone); letter-spacing: 0.2em; font-family: var(--font-mono); }
:focus-visible { outline: 2px solid var(--void); outline-offset: 3px; }
.section--void :focus-visible,
.site-footer :focus-visible,
.hero :focus-visible { outline-color: var(--bone); }

/* 35.16 — Mobile header budget -------------------------------------------- */
/* At 390px the rail has to hold a 40px burger, the mark and the tools. The wishlist
   and account shortcuts already live in the drawer's quick grid, so the top rail keeps
   only search + bag and gives the rest of the width back to the mark. */
@media (max-width: 600px) {
	.site-header__inner { gap: 10px; }
	.site-header .icon-btn { width: 38px; height: 38px; }
	.site-header .icon-btn--wishlist,
	.site-header .icon-btn--account { display: none; }
	.site-header .wordmark--md .mark { height: 26px; }
	.site-header .wordmark--md .wordmark__name { font-size: 11px; letter-spacing: 0.3em; text-indent: 0.3em; }
	.site-header .wordmark--md .wordmark__co { font-size: 7px; }
	.site-header .wordmark--md { gap: 8px; }
}

/* The assurance strip drops its second line on narrow screens — the promise is the
   headline, the detail belongs to the account page. */
@media (max-width: 700px) {
	.assure__item { padding: 14px 15px; gap: 9px; }
	.assure__item span { display: none; }
}

/* Square chrome: the identity has no circles except the notification dot. */
.icon-btn { border-radius: 0; }
.site-header .icon-btn:hover,
.site-header .icon-btn[aria-expanded="true"] { background: rgba(237, 234, 225, 0.1); }
.to-top { border-radius: 0; }
.socials a { border-radius: 0; }
.payments__item { border-radius: 0; }
.drawer .icon-btn:hover { background: rgba(237, 234, 225, 0.1); }

/* Flags sitting on photography need their own contrast, independent of the page. */
.piece .flag,
.artifact .flag {
	background: rgba(10, 10, 10, 0.7);
	color: var(--bone);
	border: 1px solid rgba(237, 234, 225, 0.3);
}
.piece .flag--sale,
.artifact .flag--sale { background: var(--sale); border-color: var(--sale); }

/* 35.17 — Every dark band owns its own headings --------------------------- */
/* The global heading rule paints in --ink (void). On a void band that is invisible, so
   each dark surface has to re-declare it. Listing them in one :is() keeps the rule in
   one place instead of sed-ing a dozen colour declarations. */
:is(.hero, .marquee, .spotlight, .newsletter-band, .site-footer, .section--void, .section--ink, .forge, .artifact, .dispatch, .header-mega, .drawer .drawer__panel) :is(h1, h2, h3, h4, h5, h6) {
	color: var(--bone);
}
/* Body copy inside those bands keeps its own tone — only the headings were broken. */

/* ==========================================================================
   36 — BRAND MANUAL REVISION
   Adopts the identity manual: achromatic base that survives in pure black and
   white, accents rationed, Space Grotesk headings at bold, Inter labels tracked.
   ========================================================================== */

/* 36.1 — Accents, used sparingly ----------------------------------------- */
/* Manual: "Accent colors support the identity. They never define it."
   Green marks the signal (live, in-motion). Blue marks interaction (focus). */
:focus-visible { outline: 2px solid var(--cosmic-blue); outline-offset: 3px; }
.section--void :focus-visible,
.section--ink :focus-visible,
.site-footer :focus-visible,
.hero :focus-visible,
.forge :focus-visible,
.artifact :focus-visible,
.dispatch :focus-visible { outline-color: var(--cosmic-blue); }

.signal-dot {
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--alien-green);
	vertical-align: middle;
}
.ticker__dot { color: var(--alien-green); }
.scroll-progress span { background: var(--alien-green); }

/* 36.2 — Mark & wordmark refit ------------------------------------------- */
.wordmark { gap: 12px; }
.wordmark .mark { height: 30px; width: auto; }
.wordmark--sm .mark { height: 22px; }
.wordmark--md .mark { height: 30px; }
.wordmark--lg .mark { height: 40px; }
.wordmark__name { font-weight: 700; letter-spacing: 0.34em; text-indent: 0.34em; }
.wordmark__co { letter-spacing: 0.42em; }

/* 36.3 — Label voice on dark bands --------------------------------------- */
:is(.hero, .forge, .artifact, .dispatch, .site-footer, .section--void, .section--ink) .eyebrow { color: rgba(255, 255, 255, 0.55); }
:is(.hero, .forge, .artifact, .dispatch, .site-footer, .section--void, .section--ink) .mono-data { color: rgba(255, 255, 255, 0.6); }
.archive .eyebrow, .manifesto .eyebrow, .notband .eyebrow { color: var(--graphite); }

/* 36.4 — Hero: EXPLORE BEYOND -------------------------------------------- */
.hero__media::after {
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.97) 100%);
}
/* A hairline inset frame + corner ticks: the graphic language's "geometric layouts". */
.hero__frame {
	position: absolute;
	inset: 14px;
	z-index: 2;
	border: 1px solid rgba(255, 255, 255, 0.14);
	pointer-events: none;
}
.hero__frame::before,
.hero__frame::after {
	content: "";
	position: absolute;
	width: 12px;
	height: 12px;
	border: 1px solid rgba(255, 255, 255, 0.55);
}
.hero__frame::before { left: -1px; top: -1px; border-right: 0; border-bottom: 0; }
.hero__frame::after { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }
@media (max-width: 700px) { .hero__frame { inset: 8px; } }

.hero__title {
	font-weight: 700;
	letter-spacing: -0.045em;
	font-size: clamp(3rem, 10.5vw, 8.2rem);
}
.hero__specs, .hero__base { letter-spacing: 0.26em; font-weight: 500; }
.hero__text { font-size: 15px; }
.hero .eyebrow { letter-spacing: 0.36em; }

/* 36.5 — Piece cards ------------------------------------------------------ */
.piece__media { aspect-ratio: 1 / 1; }
.piece__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 46%);
	opacity: 0.9;
	transition: opacity 0.5s var(--ease);
}
.piece:hover .piece__media::after { opacity: 0.55; }
.piece__code {
	position: absolute;
	left: 16px;
	bottom: 14px;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.8);
}
.piece__no { font-size: clamp(2.2rem, 3.6vw, 3rem); top: 12px; left: 14px; font-weight: 700; letter-spacing: -0.04em; }
.piece__acquire {
	position: absolute;
	right: 14px;
	bottom: 14px;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 13px;
	background: var(--paper);
	color: var(--void);
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.piece:hover .piece__acquire { opacity: 1; transform: none; }
.piece__name { font-size: 1.15rem; font-weight: 700; letter-spacing: 0.02em; }
.piece__specs li { font-family: var(--font-mono); font-size: 10.5px; color: rgba(255, 255, 255, 0.5); }
.piece__price { font-family: var(--font-mono); font-size: 13.5px; }
.piece { border-top: 0; }

/* 36.6 — "What we are not" ------------------------------------------------ */
/* Straight out of the manual's NOT page: the fastest way to say premium is to
   name what the brand refuses to be. */
.notband { background: var(--void); color: #ffffff; }
.notband__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1px;
	background: var(--line-dark);
	border: 1px solid var(--line-dark);
}
@media (min-width: 640px) { .notband__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .notband__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.notband__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 20px;
	background: var(--void);
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.62);
}
.notband__item .i { color: rgba(255, 255, 255, 0.3); }
.notband__statements { display: grid; gap: 10px; margin-bottom: clamp(30px, 4vw, 46px); }
.notband__statement {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(1.3rem, 2.6vw, 2.1rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.16;
}
.notband__statement em { font-style: normal; color: var(--alien-green); }

/* 36.7 — Lookbook band --------------------------------------------------- */
.lookbook { background: var(--bone); color: var(--void); }
.lookbook__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
}
@media (min-width: 780px) { .lookbook__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.look {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--sand);
	aspect-ratio: 3 / 4;
}
.look img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.look:hover img { transform: scale(1.04); }
.look__cap {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0));
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
}
.look__cap span:last-child { color: rgba(255, 255, 255, 0.5); }

/* 36.8 — Signal stats ----------------------------------------------------- */
.stats { background: var(--paper); border-block: 1px solid var(--line); }
.stats__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); }
@media (min-width: 900px) { .stats__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat { padding: 26px 20px; background: var(--paper); display: grid; gap: 7px; align-content: start; }
.stat__k {
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 2.6vw, 2.1rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1;
}
.stat__v {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--graphite);
}

/* 36.9 — Manifesto / philosophy ------------------------------------------- */
.manifesto__lede { font-size: 1.02rem; line-height: 1.85; }
.tenet__t { font-weight: 700; letter-spacing: 0.04em; text-transform: none; font-size: 1.02rem; }
.tenet__k { font-weight: 500; }
.manifesto__stamp {
	margin-top: 28px;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 9px 14px;
	border: 1px solid var(--line);
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--graphite);
}

/* ==========================================================================
   36.10 — PRODUCT RECORD
   The product page rebuilt as an artifact record: sticky media column with a
   real specification table under it, buy column on the right, then the record
   itself (description + full spec) instead of a generic tab strip.
   ========================================================================== */

.record { background: var(--paper); }
.record__top { display: grid; gap: clamp(26px, 4vw, 44px); align-items: start; }
@media (min-width: 1000px) {
	.record__top { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.9fr); gap: clamp(34px, 5vw, 84px); }
	.record__media { position: sticky; top: calc(var(--header-h) + 22px); }
}
.record__media { display: grid; gap: 18px; }

/* Buy column ------------------------------------------------------------------ */
.record__buy { display: flex; flex-direction: column; gap: 18px; }
.record-tag {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--graphite);
}
.record-tag b {
	display: inline-flex;
	align-items: center;
	padding: 5px 9px;
	background: var(--void);
	color: var(--paper);
	font-weight: 500;
	letter-spacing: 0.22em;
}
.record__buy .product_title {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(1.85rem, 3.4vw, 2.9rem);
	font-weight: 700;
	line-height: 1.03;
	letter-spacing: -0.035em;
	text-transform: none;
}
.record__buy .price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	font-family: var(--font-mono);
	font-size: 1.25rem;
	font-weight: 500;
	color: var(--void);
}
.record__buy .price del { color: var(--muted-soft); font-size: 1rem; font-weight: 400; }
.record__buy .price ins { text-decoration: none; }
.record__buy .price-save { color: var(--sale); }
.record__buy .woocommerce-product-details__short-description { color: var(--graphite); font-size: 15.5px; line-height: 1.8; }
.record__buy .stock-note { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; }
.record__buy .delivery-note {
	font-family: var(--font-mono);
	font-size: 10.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--graphite);
	padding: 13px 15px;
	border: 1px solid var(--line);
	background: var(--bone);
}
.record__buy .delivery-note strong { color: var(--void); }
.record__buy .delivery-note .i { color: var(--void); }

/* Variations ------------------------------------------------------------------ */
.record__buy .variations { margin: 0; border: 0; }
.record__buy .variations tbody { display: grid; gap: 18px; }
.record__buy .variations tr { display: grid; gap: 9px; }
.record__buy .variations th,
.record__buy .variations td { display: block; padding: 0; text-align: left; }
.record__buy .variations .label label {
	font-family: var(--font-body);
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--graphite);
}
.record__buy .variations td.value { width: 100%; }
.record__buy .variations select {
	width: 100%;
	max-width: none;
	height: 54px;
	padding: 0 14px;
	border: 1px solid var(--line);
	border-radius: 0;
	background: var(--paper);
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--void);
}
/* Swatch buttons get the square hairline treatment. */
.record__buy .variable-items-wrapper { display: flex; flex-wrap: wrap; gap: 8px; }
.record__buy .variable-item.button-variable-item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 54px;
	height: 46px;
	padding: 0 12px;
	border: 1px solid var(--line);
	border-radius: 0;
	background: var(--paper);
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.08em;
	color: var(--void);
	transition: background-color 0.22s var(--ease), color 0.22s var(--ease), border-color 0.22s var(--ease);
}
.record__buy .variable-item.button-variable-item:hover { border-color: var(--void); }
.record__buy .variable-item.selected,
.record__buy .variable-item.button-variable-item.selected { background: var(--void); border-color: var(--void); color: var(--paper); }
.record__buy .variable-item.selected .variable-item-span { color: var(--paper); }
.record__buy .woo-selected-variation-item-name { font-family: var(--font-mono); font-size: 11px; }

/* Cart form ------------------------------------------------------------------ */
.record__buy form.cart { display: grid; gap: 12px; margin: 0; }
.record__buy form.cart .quantity {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--line);
	height: 56px;
	align-self: start;
}
.record__buy form.cart .quantity input {
	width: 64px;
	height: 100%;
	border: 0;
	border-radius: 0;
	background: transparent;
	text-align: center;
	font-family: var(--font-mono);
	font-size: 13px;
	color: var(--void);
}
.record__buy form.cart .qty-btn {
	width: 44px;
	height: 100%;
	border: 0;
	background: transparent;
	color: var(--void);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}
.record__buy form.cart .qty-btn:hover { background: var(--bone); }
.record__buy .card__flags {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 3;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.record__media .woocommerce-product-gallery { position: relative; }
.record__buy .single_add_to_cart_button {
	height: 56px;
	flex: 0 0 auto;
	border-radius: 0;
	background: var(--void);
	color: var(--paper);
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	padding-inline: 30px;
}
.record__buy .single_add_to_cart_button:hover { background: var(--graphite); }
.record__buy form.cart .qty-wrap { display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap; }

/* Under-layout for the cart row on wide screens. */
@media (min-width: 620px) {
	.record__buy form.cart { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
	.record__buy form.cart .woocommerce-variation-add-to-cart { display: contents; }
	.record__buy form.cart .yith-wcwl-add-to-wishlist { grid-column: 1 / -1; }
}

/* Media column: specification table that fills the space the gallery leaves --------- */
.record-facts { margin: 0; border-top: 1px solid var(--line); }
.record-facts div { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.record-facts dt {
	font-family: var(--font-body);
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--graphite);
	white-space: nowrap;
}
.record-facts dd {
	margin: 0;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--void);
	text-align: right;
}
.record-facts__title {
	margin: 6px 0 14px;
	font-family: var(--font-body);
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--graphite);
}

/* Gallery ------------------------------------------------------------------ */
.record__media .gallery-note { margin-top: 0; }
.record__media .flex-control-thumbs { margin-top: 12px !important; }
.record__media .flex-control-thumbs img { border-radius: 0 !important; }
.record__media .product-flags { top: 14px; left: 14px; }

/* 36.11 — The record body ------------------------------------------------- */
.record-detail {
	margin-top: clamp(46px, 6vw, 92px);
	padding-top: clamp(30px, 4vw, 52px);
	border-top: 1px solid var(--line);
	display: grid;
	gap: clamp(30px, 4vw, 64px);
}
@media (min-width: 1000px) { .record-detail { grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr); } }
.record-detail__col > h2 {
	margin: 0 0 20px;
	font-size: clamp(1.3rem, 2.2vw, 1.75rem);
	font-weight: 700;
	letter-spacing: -0.02em;
}
.record-detail .entry-content { color: var(--graphite); font-size: 15.5px; line-height: 1.85; }
.record-detail .entry-content > * + * { margin-top: 1.1em; }
.record-detail .entry-content h3 { font-weight: 700; font-size: 1.05rem; margin-top: 1.8em; }

.spec-table { margin: 0; border-top: 1px solid var(--line); }
.spec-table div { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.spec-table dt { font-family: var(--font-body); font-size: 9.5px; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--graphite); }
.spec-table dd { margin: 0; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.05em; text-align: right; color: var(--void); }

/* Size chart -------------------------------------------------------------- */
.size-chart { width: 100%; border-collapse: collapse; margin-top: 22px; font-family: var(--font-mono); font-size: 11.5px; }
.size-chart th, .size-chart td { padding: 11px 10px; text-align: center; border-bottom: 1px solid var(--line); }
.size-chart th { font-family: var(--font-body); font-size: 9.5px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--graphite); }
.size-chart tbody th { text-align: left; }

/* 36.12 — Related: more from the archive ---------------------------------- */
.related.products, .upsells.products { margin-top: clamp(52px, 7vw, 104px); }
.related.products > h2, .upsells.products > h2 {
	margin: 0 0 clamp(22px, 3vw, 34px);
	padding-bottom: 20px;
	border-bottom: 1px solid var(--line);
	font-size: clamp(1.35rem, 2.4vw, 1.9rem);
	font-weight: 700;
	letter-spacing: -0.025em;
	text-transform: none;
}
.related.products > h2::before,
.upsells.products > h2::before {
	content: "[ Continue the collection ]";
	display: block;
	margin-bottom: 12px;
	font-family: var(--font-body);
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--muted);
}
.related.products ul.products,
.upsells.products ul.products { display: grid; gap: 1px; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--line); border: 1px solid var(--line); }
@media (min-width: 900px) {
	.related.products ul.products, .upsells.products ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.related.products ul.products::before, .related.products ul.products::after,
.upsells.products ul.products::before, .upsells.products ul.products::after { content: none !important; display: none !important; }
.related.products ul.products li.product,
.upsells.products ul.products li.product { width: auto !important; float: none !important; margin: 0 !important; padding: 16px; background: var(--paper); }
.related.products ul.products li.product .card__media,
.upsells.products ul.products li.product .card__media { border-radius: 0; }

/* 36.13 — Breadcrumbs ----------------------------------------------------- */
.breadcrumbs {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.22em;
	color: var(--graphite);
	margin-bottom: 22px;
}
.breadcrumbs a { color: var(--graphite); }
.breadcrumbs a:hover { color: var(--void); }
.breadcrumbs span.sep { margin-inline: 9px; opacity: 0.45; }

/* 36.14 — Reviews inside the record --------------------------------------- */
.record-reviews { margin-top: clamp(40px, 5vw, 74px); padding-top: clamp(26px, 3vw, 44px); border-top: 1px solid var(--line); }
.record-reviews > h2 { font-size: clamp(1.3rem, 2.2vw, 1.75rem); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 20px; }
.record-reviews .commentlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.record-reviews .commentlist li { background: var(--paper); padding: 22px; }

/* ==========================================================================
   37 — COLLECTIONS, LOOKBOOK, RECORD
   The manual's collection strategy made navigable (001–005), the "what we are
   not" declaration, an editorial lookbook band, the signal statistics strip,
   and the top edge of the product record.
   ========================================================================== */

/* 37.1 — Collection index ------------------------------------------------- */
.collections { background: var(--void); color: var(--paper); padding-block: clamp(52px, 7vw, 96px); }
.collections__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: clamp(26px, 3vw, 44px); }
.collections__title { margin: 8px 0 0; font-family: var(--font-display); font-size: clamp(1.7rem, 3.6vw, 2.9rem); font-weight: 700; line-height: 1; letter-spacing: -0.035em; }
.collections__note { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); }

.collections__rail { display: grid; gap: 1px; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.14); }
@media (min-width: 760px) { .collections__rail { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1120px) { .collections__rail { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.collection {
	display: flex;
	flex-direction: column;
	background: var(--void);
	color: var(--paper);
	text-decoration: none;
	position: relative;
	overflow: hidden;
	min-height: 240px;
}
.collection__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--carbon); }
.collection__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06); transition: transform 900ms var(--ease), filter 600ms var(--ease); }
.collection:hover .collection__media img { transform: scale(1.06); filter: grayscale(0.25) contrast(1.04); }
.collection__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.72)); }
.collection__no {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.24em;
	color: var(--paper);
	padding: 4px 7px;
	border: 1px solid rgba(255, 255, 255, 0.4);
}
.collection__body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 8px; padding: 18px 16px 20px; }
.collection__name { margin: 0; font-family: var(--font-display); font-size: 1.06rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1.15; }
.collection__class { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }
.collection__cta {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--font-body);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--paper);
}
.collection__cta .i { transition: transform 320ms var(--ease); }
.collection:hover .collection__cta .i { transform: translate(2px, -2px); }
.collection__cta span { border-bottom: 1px solid rgba(255, 255, 255, 0.35); padding-bottom: 3px; }
.collection:hover .collection__cta span { border-bottom-color: var(--paper); }

/* 37.2 — What we are not -------------------------------------------------- */
.notband { background: var(--paper); padding-block: clamp(46px, 6vw, 84px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.notband__inner { display: grid; gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (min-width: 900px) { .notband__inner { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr); } }
.notband__mark { font-family: var(--font-display); font-size: clamp(3.4rem, 11vw, 7.4rem); font-weight: 700; line-height: 0.82; letter-spacing: -0.05em; color: var(--void); margin: 0; }
.notband__mark em { display: block; font-style: normal; color: transparent; -webkit-text-stroke: 1px var(--void); }
.notband__lede { margin: 16px 0 0; color: var(--graphite); font-size: 15px; line-height: 1.8; max-width: 44ch; }
.notband__list { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); margin: 0; padding: 0; list-style: none; }
@media (min-width: 560px) { .notband__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.notband__list li {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--paper);
	padding: 15px 16px;
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--graphite);
}
.notband__list li .i { color: var(--silver); flex: 0 0 auto; }
.notband__list li span { text-decoration: line-through; text-decoration-thickness: 1px; }

/* 37.3 — Lookbook band ---------------------------------------------------- */
.lookbook { position: relative; background: var(--void); color: var(--paper); overflow: hidden; }
.lookbook__media { position: absolute; inset: 0; }
.lookbook__media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.62; filter: grayscale(1); }
.lookbook__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.5) 45%, rgba(0, 0, 0, 0.86)); }
.lookbook__inner { position: relative; padding-block: clamp(72px, 13vw, 172px); display: grid; gap: 18px; justify-items: center; text-align: center; }
.lookbook__kicker { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255, 255, 255, 0.62); margin: 0; }
.lookbook__type {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(2.4rem, 9.2vw, 7.6rem);
	font-weight: 700;
	line-height: 0.9;
	letter-spacing: -0.045em;
	text-transform: uppercase;
}
.lookbook__type em { display: block; font-style: normal; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.72); }
.lookbook__text { margin: 0; max-width: 52ch; color: rgba(255, 255, 255, 0.72); font-size: 15px; line-height: 1.8; }
.lookbook__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 10px; }
.lookbook__meta { display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: center; margin-top: 20px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); }

/* 37.4 — Signal statistics ------------------------------------------------ */
.stats { background: var(--bone); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stats__grid { display: grid; gap: 1px; background: var(--line); border-inline: 1px solid var(--line); }
@media (min-width: 640px) { .stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .stats__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat { background: var(--bone); padding: clamp(22px, 3vw, 38px) 22px; display: grid; gap: 9px; }
.stat__k { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--graphite); }
.stat__v { font-family: var(--font-display); font-size: clamp(1.6rem, 3.2vw, 2.4rem); font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: var(--void); }
.stat__d { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--graphite); }

/* 37.5 — Record: the top edge ------------------------------------------- */
.record-bar {
	background: var(--void);
	color: var(--paper);
	padding-block: 13px;
	position: relative;
	z-index: 2;
}
.record-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.record-bar__id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.record-bar__mark { display: inline-flex; height: 20px; color: var(--paper); }
.record-bar__mark svg { height: 100%; width: auto; }
.record-bar__label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.record-bar__chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.record-bar__chip {
	font-family: var(--font-mono);
	font-size: 9.5px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.78);
	border: 1px solid rgba(255, 255, 255, 0.26);
	padding: 5px 9px;
	text-decoration: none;
}
a.record-bar__chip:hover { color: var(--void); background: var(--paper); border-color: var(--paper); }

/* 37.6 — Record: specification table + specimen strip -------------------- */
.record-spec { border: 1px solid var(--line); background: var(--paper); margin: 0; }
.record-spec__row { display: grid; grid-template-columns: minmax(96px, 0.42fr) minmax(0, 1fr); gap: 16px; padding: 12px 15px; border-bottom: 1px solid var(--line); }
.record-spec__row:last-child { border-bottom: 0; }
.record-spec__k { font-family: var(--font-body); font-size: 9.5px; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--graphite); }
.record-spec__v { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.08em; color: var(--void); }
.record-spec__v a { color: var(--void); }

.record-specimen { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: clamp(30px, 4vw, 56px); }
@media (min-width: 720px) { .record-specimen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.specimen { background: var(--paper); position: relative; overflow: hidden; }
.specimen__media { aspect-ratio: 5 / 4; overflow: hidden; }
.specimen__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: transform 900ms var(--ease), filter 700ms var(--ease); }
.specimen:hover .specimen__media img { transform: scale(1.05); filter: grayscale(0.2); }
.specimen__cap { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 13px 15px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--graphite); }
.specimen__cap b { color: var(--void); font-weight: 500; }

/* 37.7 — Record body: description + full spec ---------------------------- */
.record-body { display: grid; gap: clamp(30px, 5vw, 74px); align-items: start; }
@media (min-width: 960px) { .record-body { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr); } }
.record-body__copy { font-size: 16px; line-height: 1.9; color: var(--graphite); }
.record-body__copy h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); color: var(--void); margin: 0 0 18px; letter-spacing: -0.03em; }
.record-body__copy h3 { font-size: 1.06rem; color: var(--void); margin: 28px 0 10px; letter-spacing: 0.01em; }
.record-body__copy ul, .record-body__copy ol { padding-left: 20px; display: grid; gap: 8px; }
.record-body__copy li { line-height: 1.8; }
.record-body__copy p { margin: 0 0 16px; }
.record-body__side { display: grid; gap: 14px; }

/* 37.8 — Sizing table inside the record --------------------------------- */
.awn-size-table { width: 100%; border-collapse: collapse; border: 1px solid var(--line); }
.awn-size-table th, .awn-size-table td { padding: 11px 12px; border-bottom: 1px solid var(--line); text-align: left; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; }
.awn-size-table thead th { font-family: var(--font-body); font-size: 9.5px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--graphite); background: var(--bone); }
.awn-size-table tr:last-child td, .awn-size-table tr:last-child th { border-bottom: 0; }

/* 37.9 — Related rail heading ------------------------------------------- */
.related.products > h2,
.upsells.products > h2 {
	font-family: var(--font-display);
	font-size: clamp(1.4rem, 2.8vw, 2.1rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	margin-bottom: 22px;
}


/* ==========================================================================
   38 — RECORD & COLLECTION MARKUP SUPPORT
   The few structural rules the new homepage and record markup need on top of
   sections 36–37 (which describe the look, not the document).
   ========================================================================== */

/* 38.1 — Collection index ------------------------------------------------- */
/* These two dark bands build their own headings, so they inherit nothing. */
.collections__title,
.lookbook__type { color: var(--paper); }
.collections .eyebrow { color: rgba(255, 255, 255, 0.55); }
.collection { text-decoration: none; }
.collection.is-current .collection__no { border-color: var(--alien-green); color: var(--alien-green); }
.collection.is-current .collection__class { color: var(--alien-green); }
.collection.is-current .collection__media::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.6)); }

/* 38.2 — "What we are not" ------------------------------------------------ */
.notband__mark em { line-height: 0.86; }
.notband__list li .i { color: var(--silver); }
/* The eighth cell answers the list instead of leaving a hole in the grid. */
.notband__list li.is-answer { background: var(--void); color: var(--paper); }
.notband__list li.is-answer .i { color: var(--alien-green); }
.notband__list li.is-answer span { text-decoration: none; }

/* 38.3 — Signal statistics ----------------------------------------------- */
.stat { align-content: start; }
.stat__d { margin: 0; }

/* 38.4 — Record: media column ------------------------------------------- */
/* The media column is sticky from 1000px up (section 36.10), so it only needs
   positioning of its own on the narrow layout where the flags overlay the gallery. */
@media (max-width: 999px) { .record__media { position: relative; } }

/* The gallery sits in its own grid column, so WooCommerce's `div.images { width: 48%;
   float: left }` has to be neutralised here too (section 14 does it for .product-gallery). */
.record__gallery { position: relative; }
.record__gallery .images,
.record__gallery .woocommerce-product-gallery { width: 100% !important; float: none !important; margin: 0; }
.record__gallery .flex-viewport { max-width: 100%; }
.record__gallery .flex-control-thumbs {
	display: grid !important;
	grid-template-columns: repeat(5, 1fr);
	gap: 8px;
	margin: 12px 0 0 !important;
	padding: 0 !important;
	list-style: none;
}
.record__gallery .flex-control-thumbs li {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	clear: none !important;
}
.record__gallery img { border-radius: 0; }
.record__gallery .flex-control-thumbs img {
	border-radius: 0;
	opacity: 0.6;
	border: 1px solid transparent;
	transition: opacity 0.25s var(--ease), border-color 0.25s var(--ease);
}
.record__gallery .flex-control-thumbs img:hover { opacity: 0.9; }
.record__gallery .flex-control-thumbs img.flex-active { opacity: 1; border-color: var(--void); }
.record__media .card__flags {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 4;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
}
.record__media .gallery-note { margin: 0; }
.record-facts dd { max-width: 62%; }

/* 38.4b — Swatch selection -------------------------------------------------
   The swatch plugin styles `.variable-item.selected` itself, and it loads after the
   theme, so the selected state needs both more specificity and !important to hold.
   Without this the selected chip renders white-on-white — invisible. */
.record__buy .variations .variable-items-wrapper .variable-item.selected,
.record__buy .variations .variable-items-wrapper .variable-item.button-variable-item.selected,
.record__buy .variations .variable-items-wrapper .variable-item.selected:not(.disabled) {
	background: var(--void) !important;
	border-color: var(--void) !important;
	color: var(--paper) !important;
}
.record__buy .variations .variable-items-wrapper .variable-item.selected .variable-item-span,
.record__buy .variations .variable-items-wrapper .variable-item.selected span {
	color: var(--paper) !important;
}
.record__buy .variations .variable-items-wrapper .variable-item.disabled { opacity: 0.4; }

/* 38.4c — Price ---------------------------------------------------------
   WooCommerce ships `.woocommerce:where(...) div.product p.price { color: #958e09 }`
   — specificity (0,3,2) — so a plain `.record__buy .price` loses and the sale price
   renders in the plugin's olive. These selectors outrank it without !important. */
.woocommerce div.product .record__buy p.price,
.woocommerce div.product .record__buy span.price,
.record__buy p.price, .record__buy span.price { color: var(--void); }
.woocommerce div.product .record__buy p.price ins,
.record__buy .price ins { color: inherit; }
.record__buy .price del { color: var(--muted-soft); text-decoration: line-through; }
.record__buy .price ins { text-decoration: none; }

/* The savings badge is a record chip, not a coloured sticker — the manual's accents
   are green and blue only, and neither of those belongs on a discount. */
.price-save {
	background: var(--void);
	color: var(--paper) !important;
	border: 1px solid var(--void);
	border-radius: 0;
	padding: 6px 10px;
	font-family: var(--font-body);
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: 0.26em;
	text-transform: uppercase;
}
.record__buy .price-save { color: var(--paper); }

/* WooCommerce's clear-variations link, in the brand's label voice. */
.record__buy .reset_variations {
	font-family: var(--font-mono);
	font-size: 9.5px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--graphite);
	border-bottom: 1px solid var(--line);
	padding-bottom: 2px;
}
.record__buy .reset_variations:hover { color: var(--void); border-bottom-color: var(--void); }

/* 38.5 — Record body ----------------------------------------------------- */
.record-body {
	margin-top: clamp(46px, 6vw, 92px);
	padding-top: clamp(30px, 4vw, 52px);
	border-top: 1px solid var(--line);
}
.record-body__copy .entry-content h3 { margin: 28px 0 10px; }
.record-body__side .accordion { margin-top: 0; }
.accordion__body .awn-size-table { margin-top: 14px; }

/* 38.6 — Specimen strip -------------------------------------------------- */
.specimen { text-decoration: none; color: inherit; }
.specimen__media { display: block; }

/* 38.8 — Sale prices read achromatic -------------------------------------
   The manual's identity has to survive in pure black and white, so a reduced price is
   marked by weight and a struck-through original rather than by a red accent. The red
   token stays where it carries meaning (flags, errors, notices). */
.card__price ins, .spotlight__price ins, .product-summary .price ins,
.mega-feature__price ins, .record__buy .price ins { color: inherit; font-weight: 600; }
.card__price del, .spotlight__price del, .product-summary .price del,
.mega-feature__price del { text-decoration: line-through; }

/* 38.7 — Record reviews -------------------------------------------------- */
/* The band prints its own heading (with the live count), so WooCommerce's duplicate
   "Reviews" title is hidden rather than stacked under it. */
.record-reviews .woocommerce-Reviews-title { display: none; }
.record-reviews .commentlist li .star-rating,
.record-reviews .commentlist li .stars { color: var(--void); }
.record-reviews .comment-respond { margin-top: 34px; }
.record-reviews .comment-form label { font-family: var(--font-body); font-size: 10px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--graphite); }
.record-reviews .comment-form input[type="text"],
.record-reviews .comment-form input[type="email"],
.record-reviews .comment-form input[type="url"],
.record-reviews .comment-form textarea {
	border: 1px solid var(--line);
	border-radius: 0;
	background: var(--paper);
	padding: 13px 14px;
	font-family: var(--font-body);
	font-size: 14.5px;
	color: var(--void);
}
.record-reviews .comment-form .form-submit input[type="submit"] {
	height: 52px;
	padding-inline: 28px;
	border: 1px solid var(--void);
	border-radius: 0;
	background: var(--void);
	color: var(--paper);
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
}
.record-reviews .comment-form .form-submit input[type="submit"]:hover { background: var(--graphite); border-color: var(--graphite); }

/* ==========================================================================
   39 — IDENTITY: THE AW MONOGRAM
   The manual's three lockups (primary, secondary, icon mark) share one monogram. It is a
   wide "AW" — 101.4 x 54, roughly 1.88:1 — where the older square mark was 1:1, so the
   heights below are tuned to its cap height rather than to its box, and every instance
   keeps at least one cap height of clear space around it.
   ========================================================================== */

.wordmark { gap: 13px; }
.wordmark .mark { height: 30px; width: auto; }
.wordmark--sm .mark { height: 24px; }
.wordmark--md .mark { height: 30px; }
.wordmark--lg .mark { height: 42px; }
@media (max-width: 520px) {
	.wordmark--md .mark { height: 26px; }
}

/* Secondary logo: the wordmark alone carries the signature, so it takes the size the
   monogram would otherwise occupy. */
.wordmark--secondary { gap: 0; }
.wordmark--secondary .wordmark__name {
	font-size: clamp(20px, 2.6vw, 27px);
	font-weight: 700;
	letter-spacing: 0.3em;
	text-indent: 0.3em;
}
.wordmark--secondary .wordmark__co { font-size: 10px; letter-spacing: 0.5em; }

/* 40 — UX hardening: motion control, busy states, reflow ---------------- */
/* Structural fixes taken from the ui-ux-pro-max High-severity rules. The brand
   manual still owns palette, type and voice, so nothing here changes the look. */

/* 40.1 — Focus must never land behind the sticky header (WCAG 2.2). */
html { scroll-padding-top: calc(var(--header-h) + 22px); }
:target { scroll-margin-top: calc(var(--header-h) + 22px); }
.site-footer :target, .drawer :target, .hero :target { scroll-margin-top: 24px; }

/* 40.2 — Moving rails stop on hover, on keyboard focus, and on request. */
.ticker { position: relative; padding-right: 46px; }
.ticker__toggle {
	position: absolute;
	inset-block: 0;
	right: 0;
	width: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-left: 1px solid var(--line-dark);
	background: var(--void);
	color: rgba(237, 234, 225, 0.55);
	cursor: pointer;
	transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.ticker__toggle:hover { color: var(--bone); background: rgba(237, 234, 225, 0.09); }
.ticker__toggle .i-play { display: none; }
.ticker__toggle[aria-pressed="true"] .i-pause { display: none; }
.ticker__toggle[aria-pressed="true"] .i-play { display: block; }
.ticker:hover .ticker__track,
.ticker:focus-within .ticker__track,
.marquee:hover .marquee__track,
.foot-statement:hover .foot-statement__track,
.foot-statement:focus-within .foot-statement__track { animation-play-state: paused; }
html.awn-motion-paused .ticker__track,
html.awn-motion-paused .marquee__track,
html.awn-motion-paused .foot-statement__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
	.ticker__toggle { display: none; }
	.ticker { padding-right: 0; }
}

/* 40.3 — Busy states: a control in flight looks in flight and cannot be
   clicked twice. */
button[aria-busy="true"], .btn[aria-busy="true"] {
	cursor: progress;
	pointer-events: none;
	opacity: 0.78;
}
button[aria-busy="true"] .i, .btn[aria-busy="true"] .i { animation: awn-busy-pulse 1.1s ease-in-out infinite; }
@keyframes awn-busy-pulse {
	0%, 100% { opacity: 0.3; }
	50% { opacity: 1; }
}

/* 40.4 — Long tokens and compact labels reflow instead of pushing the layout. */
.record-spec__k,
.record-spec__v,
.record-facts dt,
.record-facts dd,
.record-bar__chip,
.drawer__hint,
.flag,
.pay-chips > span { min-width: 0; overflow-wrap: anywhere; }
.card__flags,
.record-bar__chips,
.pay-chips,
.record__buy .card__flags { max-width: 100%; }

/* 40.5 — The sticky rail keeps one line, but the truncated name stays a
   visible, operable route back to the full record. */
.sticky-buy__title {
	color: inherit;
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0% 1px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size 0.3s var(--ease);
}
.sticky-buy__title:hover, .sticky-buy__title:focus-visible { background-size: 100% 1px; }

/* 40.6 — A failed submit says so in words, not only in colour (WCAG 1.4.1). */
.newsletter-form__note.is-error {
	color: var(--bone);
	padding-left: 10px;
	border-left: 2px solid var(--signal);
}
.newsletter-form__note.is-error::before {
	content: "Error — ";
	font-family: var(--font-mono);
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

/* 40.7 — The saved-piece control is the wishlist plugin's real button wearing the
   card's heart affordance, so a save actually saves. The plate lives on our own slot,
   because the plugin swaps its fragment (and its own styling) on every state change. */
.card__media .card__save {
	position: absolute;
	top: 9px;
	right: 9px;
	z-index: 3;
	width: 42px;
	height: 42px;
	background-color: rgba(255, 255, 255, 0.86);
	color: var(--ink);
	opacity: 0;
	transition: opacity 0.3s var(--ease), background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.card:hover .card__save,
.card__save:focus-within,
.card__save.is-saved { opacity: 1; }
.card__save.is-saved { color: var(--sale); }
/* Hover brightens the plate instead of inverting it: the heart is `currentColor`, and
   an inverted plate would put a dark glyph on dark ground whenever the state chain
   (saved / hover / focus) changes colour underneath it. */
.card__media .card__save:hover,
.card__media .card__save:focus-within,
.card__media .card__save:hover .yith-wcwl-add-to-wishlist a,
.card__media .card__save:focus-within .yith-wcwl-add-to-wishlist a { background-color: #fff; }
@supports selector(:has(*)) {
	.card__save:has(.exists),
	.card__save:has(.added) { opacity: 1; }
}
.card__save .yith-wcwl-add-to-wishlist,
.card__save .yith-wcwl-add-to-wishlist > div { margin: 0; }
/* In the "saved" state the plugin parks its filled heart in a feedback span whose text
   ("Product added!") would widen the plate. Both that span and the anchor are stacked
   inside the plate instead: glyph visible, words hidden, whole plate clickable. */
.card__save .yith-wcwl-add-to-wishlist > div {
	position: relative;
	display: flex;
	width: 42px;
	height: 42px;
}
.card__save .yith-wcwl-add-to-wishlist .feedback,
.card__save .yith-wcwl-add-to-wishlist a {
	position: absolute;
	inset: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: auto;
	font-size: 0;
	line-height: 1;
	/* The plate is painted on both layers: the slot survives the plugin's fragment
	   swaps, the anchor is what actually receives the pointer. */
	background-color: rgba(255, 255, 255, 0.86);
}
.card__save .yith-wcwl-add-to-wishlist a { color: inherit; text-decoration: none; }
/* The plugin colours its own glyph with `--add-to-wishlist-icon-color`, so the state
   colour is re-stated on the glyph itself rather than inherited from the plate. */
.card__save.is-saved .yith-wcwl-add-to-wishlist svg.yith-wcwl-icon-svg { color: var(--sale); }
/* One glyph rule for both states: the plugin puts the heart inside the anchor while
   unsaved and inside the feedback span once saved. */
.card__save .yith-wcwl-add-to-wishlist svg.yith-wcwl-icon-svg {
	width: 18px;
	height: 18px;
	color: inherit;
}
.card__save .yith-wcwl-add-to-wishlist a span {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
@media (hover: none) {
	.card__save { opacity: 1; }
}
/* 41 - Motion & editorial polish ---------------------------------------- */
/* ui-ux-pro-max: "Exaggerated Minimalism" (oversized type, extreme whitespace,
   a single accent) + "Minimalist Monochrome" (hairlines, hard inversion, zero
   radius) + the motion.csv timings (150-300ms micro, 300-600ms entrances,
   parallax on decorative layers only, reduced-motion final states).
   The brand manual still owns palette, typefaces and voice. */

:root {
	--dur-micro: 180ms;
	--dur-card: 260ms;
	--dur-reveal: 420ms;
	--dur-veil: 220ms;
	--ease-back: cubic-bezier(0.34, 1.42, 0.48, 1);
}

/* 41.1 - Reveal primitives --------------------------------------------- */
[data-reveal] {
	opacity: 0;
	transform: translate3d(0, 24px, 0);
	transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease);
	transition-delay: var(--delay, 0ms);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }

/* Headline mask: words rise out of their own baseline. Short headlines only. */
[data-split] .awn-w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.06em; }
[data-split] .awn-w > span {
	display: inline-block;
	transform: translate3d(0, 110%, 0);
	opacity: 0;
	transition: transform 720ms var(--ease), opacity 520ms var(--ease);
	transition-delay: calc(var(--i, 0) * 42ms);
}
[data-split].is-split .awn-w > span { transform: none; opacity: 1; }

/* Curtain: media unveils from a hard top edge. */
[data-curtain] img {
	clip-path: inset(0 0 100% 0);
	transition: clip-path 680ms var(--ease), transform 900ms var(--ease);
}
[data-curtain].is-revealed img { clip-path: inset(0 0 0 0); }

/* 41.2 - Hover & press micro-interactions ------------------------------ */
.btn {
	transition: transform var(--dur-micro) var(--ease), background-color var(--dur-micro) var(--ease),
		color var(--dur-micro) var(--ease), border-color var(--dur-micro) var(--ease);
}
.btn:hover { transform: translate3d(0, -2px, 0); }
.btn:active { transform: translate3d(0, 0, 0); }
.btn .i { transition: transform var(--dur-micro) var(--ease); }
.btn:hover .i { transform: translate3d(2px, -2px, 0); }

/* Cards: the plate lifts and the photo breathes. */
.card__media {
	transition: transform var(--dur-card) var(--ease), box-shadow var(--dur-card) var(--ease);
}
.card:hover .card__media {
	transform: translate3d(0, -4px, 0);
	box-shadow: 0 28px 50px -36px rgba(0, 0, 0, 0.55);
}

/* Collection tiles: hard flood inversion on hover (monochrome rule: state changes
   read as an inversion of the ground, not as a tint). */
.collection { transition: background-color 220ms var(--ease), color 220ms var(--ease); }
.collection:hover { background: var(--bone); color: var(--void); }
.collection:hover .collection__class { color: var(--graphite); }
.collection:hover .collection__no { color: var(--graphite); border-color: rgba(0, 0, 0, 0.28); }
.collection:hover .collection__cta span { border-bottom-color: var(--void); }
/* Green cannot sit on the bone flood (1.3:1), so the current tile goes to ink there. */
.collection.is-current:hover .collection__no,
.collection.is-current:hover .collection__class { color: var(--void); }
.collection.is-current:hover .collection__no { border-color: var(--void); }

/* Inline links grow an underline from the left. */
.breadcrumbs a, .site-footer a, .account-nav a, .record-body a, .entry-content a, .drawer__hint a {
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0% 1px;
	background-repeat: no-repeat;
	background-position: 0 100%;
	transition: background-size 320ms var(--ease);
}
.breadcrumbs a:hover, .site-footer a:hover, .account-nav a:hover, .record-body a:hover,
.entry-content a:hover, .drawer__hint a:hover { background-size: 100% 1px; }

/* 41.3 - Editorial rhythm ---------------------------------------------- */
.section { padding-block: clamp(60px, 8.4vw, 134px); }
.section--tight { padding-block: clamp(42px, 5.4vw, 78px); }
.hero__title { font-size: clamp(2.9rem, 9.2vw, 7.4rem); letter-spacing: -0.045em; }
.lookbook__type { font-size: clamp(2.4rem, 8.6vw, 7rem); letter-spacing: -0.04em; }
.collections__title, .dispatch__title, .artifact__name, .notband__mark { letter-spacing: -0.035em; }

/* 41.4 - Shop: sticky toolbar with a blur ground once it detaches -------- */
.shop-toolbar {
	position: sticky;
	top: var(--header-h);
	z-index: 40;
	background: var(--bone);
	transition: background-color var(--dur-micro) var(--ease), box-shadow var(--dur-micro) var(--ease);
}
html.awn-header-hidden .shop-toolbar { top: 0; }
.shop-toolbar.is-stuck {
	background: rgba(229, 231, 235, 0.94);
	backdrop-filter: saturate(1.1) blur(10px);
	box-shadow: 0 1px 0 var(--line), 0 16px 30px -30px rgba(0, 0, 0, 0.55);
}

/* 41.5 - Product record motion ----------------------------------------- */
.record__media img { transition: transform 900ms var(--ease); }
.product-gallery:hover .woocommerce-product-gallery__image img { transform: scale(1.015); }
.product-gallery .flex-control-thumbs img {
	transition: transform var(--dur-card) var(--ease), opacity var(--dur-card) var(--ease);
}
.product-gallery .flex-control-thumbs li:hover img { transform: scale(1.06); }
.record-spec__row { transition: background-color var(--dur-micro) var(--ease); }
.record-spec__row:hover { background: var(--bone); }
.sticky-buy { transition: transform 380ms var(--ease), opacity 380ms var(--ease); }
.single_add_to_cart_button.is-added { background: var(--alien-green); color: var(--void); }

/* 41.6 - Details motion (FAQ, size guide, spec accordions) -------------- */
.faq-item__icon, .record-body summary .i { transition: transform var(--dur-micro) var(--ease); }
.faq-item[open] .faq-item__icon { transform: rotate(180deg); }
.faq-item__q { transition: background-color var(--dur-micro) var(--ease); }

/* 41.7 - Page veil: the exit fades faster than any entrance it precedes -- */
.awn-veil {
	position: fixed;
	inset: 0;
	z-index: 1400;
	background: var(--void);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--dur-veil) var(--ease);
}
.awn-veil::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 2px;
	background: var(--bone);
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform var(--dur-veil) linear;
}
html.awn-leaving .awn-veil { opacity: 1; }
html.awn-leaving .awn-veil::after { transform: scaleX(1); }

/* 41.7b - Stat codes roll their digits in (aria-label carries the plain value). */
.stat__r { display: inline-block; overflow: hidden; vertical-align: bottom; }
.stat__r > i {
	display: inline-block;
	font-style: normal;
	transform: translate3d(0, 112%, 0);
	opacity: 0;
	transition: transform 620ms var(--ease), opacity 420ms var(--ease);
	transition-delay: calc(var(--i, 0) * 55ms);
}
.stat__v.is-rolled .stat__r > i { transform: none; opacity: 1; }

/* 41.8 - Motion safety: every effect above resolves to its final state --- */
@media (prefers-reduced-motion: reduce) {
	[data-reveal], [data-split] .awn-w > span { opacity: 1 !important; transform: none !important; transition: none !important; }
	[data-curtain] img { clip-path: none !important; transition: none !important; }
	.card:hover .card__media { transform: none; box-shadow: none; }
	.btn:hover { transform: none; }
	.btn:hover .i { transform: none; }
	.faq-item[open] .faq-item__icon { transform: none; }
	.awn-veil { display: none; }
	.shop-toolbar { position: static; box-shadow: none; backdrop-filter: none; }
}