/* Boldly Unseen — main stylesheet. Mobile-first; tokens first. */

/* ---------- Fonts (self-hosted, latin subsets) ---------- */
@font-face {
	font-family: "Archivo Black";
	font-style: normal;
	font-weight: 400;
	/* optional: on slow connections keep the metric-matched fallback rather than
	   swapping in the brand font late and shifting the whole hero (CLS). */
	font-display: optional;
	src: url("../fonts/archivo-black-latin.woff2") format("woff2");
}
/* Metric-matched fallback so the swap into Archivo Black does not shift layout. */
@font-face {
	font-family: "Archivo Black Fallback";
	src: local("Arial Black"), local("Arial");
	size-adjust: 104%;
	ascent-override: 92%;
	descent-override: 22%;
	line-gap-override: normal;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/inter-latin.woff2") format("woff2");
}

/* ---------- Tokens ---------- */
:root {
	--ink: #111111;
	--paper: #faf8f4;
	--signal: #ffd400;
	--focus: #0b5fff;
	--link: #084bc7; /* ≥5:1 on paper, mist and signal */
	--slate: #4a4a4a;
	--mist: #ece9e2;
	--line: #cfcac0;
	--error: #b3261e;
	--success: #1b5e20;

	--font-display: "Archivo Black", "Archivo Black Fallback", "Arial Black", Impact, sans-serif;
	--font-body: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	--text-s: 1rem;
	--text-m: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
	--text-l: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
	--text-xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
	--text-xxl: clamp(2.5rem, 1.6rem + 4.5vw, 4.5rem);

	--space-1: 0.5rem;
	--space-2: 1rem;
	--space-3: 1.5rem;
	--space-4: 2rem;
	--space-5: 3rem;
	--space-6: 4rem;
	--space-7: 6rem;

	--measure: 65ch;
	--content: 800px;
	--wide: 1360px;
	--gutter: clamp(1.25rem, 5vw, 2rem);
	--radius: 4px;
	--focus-ring: 3px solid var(--focus);
	--focus-offset: 3px;
}

@media (prefers-contrast: more) {
	:root {
		--paper: #ffffff;
		--ink: #000000;
		--slate: #000000;
		--line: #000000;
		--mist: #f2f2f2;
	}
}

/* ---------- Reset & base ---------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}
html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}
body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: var(--text-m);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-wrap: break-word;
	overflow-x: clip;
}
img,
svg,
video {
	max-width: 100%;
	height: auto;
	display: block;
}
h1,
h2,
h3,
h4 {
	font-family: var(--font-display);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -0.01em;
	margin: 0 0 var(--space-3);
	text-wrap: balance;
}
h1 {
	font-size: var(--text-xxl);
	text-transform: uppercase;
}
h2 {
	font-size: var(--text-xl);
	text-transform: uppercase;
	margin-top: var(--space-5);
}
h3 {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: var(--text-l);
	line-height: 1.3;
	margin-top: var(--space-4);
}
h4 {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: var(--text-m);
}
p,
ul,
ol,
dl {
	margin: 0 0 var(--space-3);
	max-width: var(--measure);
}
li {
	margin-bottom: var(--space-1);
}
a {
	color: var(--link);
	text-decoration: underline;
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.15em;
}
a:hover {
	text-decoration-thickness: 0.16em;
}
:focus {
	outline: var(--focus-ring);
	outline-offset: var(--focus-offset);
}
:focus:not(:focus-visible) {
	outline: none;
}
:focus-visible {
	outline: var(--focus-ring);
	outline-offset: var(--focus-offset);
}
hr {
	border: 0;
	border-top: 2px solid var(--ink);
	margin: var(--space-5) 0;
}
blockquote {
	margin: var(--space-4) 0;
	padding-left: var(--space-3);
	border-left: 6px solid var(--signal);
	font-size: var(--text-l);
}
table {
	border-collapse: collapse;
	width: 100%;
	margin-bottom: var(--space-3);
}
th,
td {
	text-align: left;
	padding: var(--space-1) var(--space-2);
	border-bottom: 1px solid var(--line);
	vertical-align: top;
}
th {
	font-weight: 700;
}
caption {
	text-align: left;
	font-weight: 700;
	padding-bottom: var(--space-1);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
.screen-reader-text:focus {
	position: fixed !important;
	inset: var(--space-2) auto auto var(--space-2);
	width: auto;
	height: auto;
	clip: auto;
	clip-path: none;
	padding: var(--space-2) var(--space-3);
	background: var(--ink);
	color: var(--paper);
	z-index: 1000;
	font-weight: 700;
}
.skip-link {
	position: absolute;
	left: var(--space-2);
	top: -100px;
	background: var(--ink);
	color: var(--paper);
	padding: var(--space-2) var(--space-3);
	font-weight: 700;
	z-index: 1000;
	border-radius: 0 0 var(--radius) var(--radius);
}
.skip-link:focus {
	top: 0;
}

/* ---------- Layout ---------- */
.wrap {
	width: min(100% - 2 * var(--gutter), var(--wide));
	margin-inline: auto;
}
.wrap--narrow {
	width: min(100% - 2 * var(--gutter), var(--content));
}
.section,
.hero {
	padding-inline: max(var(--gutter), calc((100% - var(--wide)) / 2));
}
.section {
	padding-block: var(--space-6);
}
/* Constrained children are centred by WP with !important margins; pin them to the
   left edge of the wide column so every page shares the shop/product margins. */
.section.is-layout-constrained > *,
.hero.is-layout-constrained > * {
	margin-inline: 0 !important;
}
/* Grid-like children span the full wide column; text children keep the contentSize cap. */
.section.is-layout-constrained > .wp-block-columns,
.section.is-layout-constrained > .card-grid,
.section.is-layout-constrained > .wear-split,
.section.is-layout-constrained > .steps,
.hero.is-layout-constrained > .hero-split {
	max-width: none;
}
.section--tight {
	padding-block: var(--space-4);
}
.section--ink {
	background: var(--ink);
	color: var(--paper);
}
.section--ink a:not(.button):not(.wp-block-button__link) {
	color: var(--paper);
}
.section--ink .button,
.section--ink .wp-block-button__link {
	background: var(--paper);
	color: var(--ink);
	border-color: var(--paper);
}
.section--ink .button:hover,
.section--ink .wp-block-button__link:hover {
	background: var(--signal);
	border-color: var(--signal);
	color: var(--ink);
}
.section--mist {
	background: var(--mist);
}
.section > h2:first-child,
.section .wrap > h2:first-child {
	margin-top: 0;
}
.site-main {
	min-height: 50vh;
}

/* ---------- Header ---------- */
.site-header {
	border-bottom: 3px solid var(--ink);
	background: var(--paper);
}
.site-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-4);
	padding-block: var(--space-2);
}
.site-brand {
	display: inline-flex;
	align-items: center;
	color: var(--ink);
	text-decoration: none;
	margin-right: auto;
}
.site-brand .site-brand__logo {
	height: clamp(3rem, 6vw, 5rem);
	width: auto;
	max-width: min(60vw, 28rem);
	object-fit: contain;
	object-position: left center;
}
.site-brand__text {
	font-family: var(--font-display);
	font-size: 1.5rem;
	text-transform: uppercase;
}
.nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1) var(--space-3);
	max-width: none;
}
.nav__list li {
	margin: 0;
}
.nav__list a {
	display: inline-block;
	color: var(--ink);
	font-weight: 700;
	text-decoration: none;
	padding: 0.6rem 0.25rem;
	min-height: 44px;
	border-bottom: 3px solid transparent;
}
.nav__list a:hover,
.nav__list .current-menu-item > a,
.nav__list .current-menu-ancestor > a,
.nav__list .current_page_parent > a {
	border-bottom-color: var(--ink);
}
.nav--utility .nav__list a {
	font-weight: 400;
	font-size: var(--text-s);
}
.nav__list .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}
@media (min-width: 768px) {
	/* Dropdown for nested items (e.g. Articles under Understand). */
	.nav__list .menu-item-has-children {
		position: relative;
	}
	.nav__list .menu-item-has-children > a::after {
		content: " ▾";
	}
	.nav__list .sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 20;
		display: none;
		min-width: 11rem;
		background: var(--paper);
		border: 2px solid var(--ink);
		padding: var(--space-1) 0;
	}
	.nav__list .menu-item-has-children:hover > .sub-menu,
	.nav__list .menu-item-has-children:focus-within > .sub-menu {
		display: block;
	}
	.nav__list .sub-menu a {
		display: block;
		padding: 0.5rem 1rem;
		border-bottom: 0;
	}
	.nav__list .menu-item-has-children.submenu-dismissed:hover > .sub-menu,
	.nav__list .menu-item-has-children.submenu-dismissed:focus-within > .sub-menu {
		display: none;
	}
	.nav__list .sub-menu a:hover,
	.nav__list .sub-menu .current-menu-item > a {
		border-bottom: 0;
		text-decoration: underline;
		text-decoration-thickness: 3px;
		text-underline-offset: 0.2em;
	}
	/* The currency picker sits at the nav's right edge — open leftwards. */
	.nav--utility .nav__list .menu-item.bu-currency .sub-menu {
		left: auto;
		right: 0;
	}
}
.nav-toggle {
	display: none;
}
@media (max-width: 767px) {
	.site-header__inner {
		gap: var(--space-2);
	}
	.nav-toggle {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		background: var(--ink);
		color: var(--paper);
		border: 0;
		font: inherit;
		font-weight: 700;
		padding: 0.6rem 1rem;
		min-height: 44px;
		border-radius: var(--radius);
		cursor: pointer;
	}
	.nav-toggle[aria-expanded="true"] .nav-toggle__open,
	.nav-toggle[aria-expanded="false"] .nav-toggle__close {
		display: none;
	}
	.site-header__navs {
		display: none;
		flex-basis: 100%;
		padding-block: var(--space-2) var(--space-3);
		border-top: 1px solid var(--line);
	}
	.site-header__navs.is-open,
	.no-js .site-header__navs {
		display: block;
	}
	.nav__list {
		flex-direction: column;
		gap: 0;
	}
	.nav__list a {
		display: block;
		padding: 0.75rem 0;
		border-bottom: 1px solid var(--line);
	}
	.nav__list .current-menu-item > a {
		border-left: 6px solid var(--signal);
		padding-left: 0.75rem;
	}
	/* Nested items stay visible inside the open menu, indented. */
	.nav__list .sub-menu {
		padding-left: var(--space-3);
		border-left: 3px solid var(--signal);
	}
	.nav--utility {
		margin-top: var(--space-2);
	}
}
@media (min-width: 768px) {
	.site-header__navs {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--space-2) var(--space-4);
	}
	.nav--utility {
		margin-left: var(--space-2);
	}
}

/* ---------- Footer ---------- */
.site-footer {
	background: var(--ink);
	color: var(--paper);
	padding-block: var(--space-6) var(--space-4);
	margin-top: var(--space-7);
}
.site-footer a {
	color: var(--paper);
}
.site-footer .nav__list a {
	color: var(--paper);
	padding: 0.5rem 0;
	border: 0;
	text-decoration: underline;
	text-decoration-color: rgba(250, 248, 244, 0.5);
	font-weight: 400;
}
.site-footer .nav__list a:hover {
	text-decoration-color: var(--paper);
}
.site-footer__tagline {
	font-family: var(--font-display);
	font-size: var(--text-xl);
	text-transform: uppercase;
	margin-bottom: var(--space-4);
}
.site-footer__grid {
	display: grid;
	gap: var(--space-4);
}
@media (min-width: 768px) {
	.site-footer__grid {
		grid-template-columns: 2fr 1fr 1fr;
	}
	.site-footer .nav__list {
		flex-direction: column;
		gap: 0;
	}
}
.site-footer__meta {
	margin-top: var(--space-5);
	padding-top: var(--space-3);
	border-top: 1px solid rgba(250, 248, 244, 0.3);
	font-size: var(--text-s);
}

/* ---------- Statement hero ---------- */
.hero {
	padding-block: var(--space-6) var(--space-5);
}
.hero-split {
	display: grid;
	gap: var(--space-4);
	align-items: center;
}
@media (min-width: 900px) {
	.hero-split {
		grid-template-columns: 1.05fr 0.95fr;
		gap: var(--space-6);
	}
}
.hero-split__media {
	margin: 0;
}
.hero-split__media svg,
.hero-split__media img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 30rem;
	margin-inline: auto;
	border-radius: var(--radius);
}
.hero-carousel {
	position: relative;
	/* Fixed box so crossfading slides never change layout height (CLS).
	   Explicit width: all children are absolutely positioned, so an auto
	   width would shrink-wrap to 0 once centred by margin-inline:auto. */
	width: 100%;
	aspect-ratio: 1 / 1;
	max-width: 30rem;
	margin-inline: auto;
}
.hero-carousel .hero-carousel__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.6s ease;
}
.hero-carousel .hero-carousel__img:not(.is-active) {
	opacity: 0;
	pointer-events: none;
}
.hero-carousel__toggle {
	position: absolute;
	bottom: var(--space-2);
	right: var(--space-2);
	padding: 0.35rem 0.7rem;
	font-size: var(--text-s);
	font-family: inherit;
	background: var(--paper);
	color: var(--ink);
	border: 2px solid var(--ink);
	border-radius: var(--radius);
	cursor: pointer;
}
@media (prefers-reduced-motion: reduce) {
	.hero-carousel .hero-carousel__img {
		transition: none;
	}
}
.hero-split__caption {
	font-size: var(--text-s);
	color: var(--slate);
	text-align: center;
	margin-top: var(--space-1);
}
.hero__title {
	margin-bottom: var(--space-3);
}
.hero__title .highlight,
.is-style-statement,
mark.statement {
	background: linear-gradient(transparent 55%, var(--signal) 55%, var(--signal) 92%, transparent 92%);
	color: inherit;
	padding: 0 0.1em;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}
.hero__lead,
.lead {
	font-size: var(--text-l);
	max-width: 40ch;
	line-height: 1.4;
}
/* Constrained block layouts centre narrow children (with !important); lead paragraphs should stay left-aligned with their heading. */
.section > .lead,
.section > .hero__lead {
	margin-inline: 0 !important;
}
.hero--ink {
	background: var(--ink);
	color: var(--paper);
}
.hero--ink a:not(.button) {
	color: var(--paper);
}
.hero--ink .highlight {
	background: linear-gradient(transparent 55%, var(--signal) 55%, var(--signal) 92%, transparent 92%);
	color: var(--paper);
}
.hero--ink .highlight {
	color: var(--ink);
	background: var(--signal);
	padding: 0 0.15em;
}

/* ---------- Buttons ---------- */
.buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-block: var(--space-4);
}
.button,
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wc-block-components-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 48px;
	padding: 0.75rem 1.5rem;
	background: var(--ink);
	color: var(--paper);
	font: inherit;
	font-weight: 700;
	text-decoration: none;
	border: 3px solid var(--ink);
	border-radius: var(--radius);
	cursor: pointer;
	line-height: 1.2;
}
.button:hover,
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
	background: var(--paper);
	color: var(--ink);
	text-decoration: none;
}
.button--secondary,
.is-style-secondary .wp-block-button__link {
	background: transparent;
	color: var(--ink);
}
.button--secondary:hover {
	background: var(--ink);
	color: var(--paper);
}
.hero--ink .button {
	background: var(--paper);
	color: var(--ink);
	border-color: var(--paper);
}
.hero--ink .button:hover {
	background: var(--ink);
	color: var(--paper);
}
.hero--ink .button--secondary {
	background: transparent;
	color: var(--paper);
}
.hero--ink .button--secondary:hover {
	background: var(--paper);
	color: var(--ink);
}
.button--quiet,
.quiet-link {
	font-size: var(--text-s);
	color: var(--slate);
}

/* ---------- Breadcrumbs ---------- */
.breadcrumbs {
	padding-block: var(--space-2);
	font-size: var(--text-s);
}
.breadcrumbs__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0;
	max-width: none;
}
.breadcrumbs__item {
	margin: 0;
}
.breadcrumbs__item + .breadcrumbs__item::before {
	content: "›";
	padding-inline: 0.5rem;
	color: var(--slate);
}
.breadcrumbs a {
	color: var(--slate);
}
.breadcrumbs a[aria-current] {
	color: var(--ink);
	text-decoration: none;
	font-weight: 700;
}

/* ---------- Article / prose ---------- */
.article {
	padding-block: var(--space-4) var(--space-6);
}
.article__header {
	margin-bottom: var(--space-5);
}
.article__summary {
	font-size: var(--text-l);
	line-height: 1.4;
	max-width: 45ch;
}
.prose > * {
	max-width: var(--measure);
}
.prose h2 {
	font-size: var(--text-xl);
}
.prose .alignwide {
	max-width: var(--wide);
}
.prose .alignfull {
	max-width: none;
	width: 100vw;
	margin-left: calc(50% - 50vw);
}
.prose img {
	border-radius: var(--radius);
}
.prose figcaption {
	font-size: var(--text-s);
	color: var(--slate);
	margin-top: var(--space-1);
}

.is-style-try-this,
.callout {
	background: var(--ink);
	color: var(--paper);
	padding: var(--space-3) var(--space-4);
	border-left: 8px solid var(--signal);
	margin-block: var(--space-4);
	border-radius: var(--radius);
}
.is-style-try-this a,
.callout a {
	color: var(--paper);
}
.is-style-try-this > :first-child,
.callout > :first-child {
	margin-top: 0;
}
.is-style-try-this > :last-child,
.callout > :last-child {
	margin-bottom: 0;
}
.callout__label {
	display: block;
	font-family: var(--font-display);
	text-transform: uppercase;
	font-size: var(--text-s);
	letter-spacing: 0.08em;
	color: var(--paper);
	margin-bottom: var(--space-1);
}
.is-style-editorial-note {
	display: none;
}
.editor-styles-wrapper .is-style-editorial-note {
	display: block;
	border: 2px dashed var(--error);
	padding: var(--space-2);
	background: #fff4f2;
}
.editor-styles-wrapper .is-style-editorial-note::before {
	content: "Editorial note: hidden on the live site";
	display: block;
	font-weight: 700;
	color: var(--error);
	font-size: var(--text-s);
}

.article-meta {
	margin-top: var(--space-6);
	padding-top: var(--space-4);
	border-top: 2px solid var(--ink);
	font-size: var(--text-s);
	max-width: var(--measure);
}
.article-meta__heading {
	font-size: var(--text-m);
	margin-top: 0;
}
.article-meta__subheading {
	font-size: var(--text-s);
	margin-top: var(--space-3);
}
.article-meta__list {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.25rem var(--space-3);
}
.article-meta__list div {
	display: contents;
}
.article-meta__list dt {
	font-weight: 700;
}
.article-meta__list dd {
	margin: 0;
}

/* ---------- Cards ---------- */
.card-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-3);
	max-width: none;
}
@media (min-width: 640px) {
	.card-grid {
		grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	}
}
.card {
	background: var(--paper);
	border: 2px solid var(--ink);
	border-radius: var(--radius);
	padding: var(--space-3);
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	position: relative;
}
.section--ink .card {
	background: var(--ink);
	border-color: var(--paper);
}
.card__title,
.card .wp-block-heading {
	font-family: var(--font-display);
	font-size: var(--text-l);
	text-transform: uppercase;
	line-height: 1.1;
	margin: 0;
}
.card__title a {
	color: inherit;
	text-decoration: none;
}
.card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}
.card__title a:focus-visible::after {
	outline: var(--focus-ring);
	outline-offset: var(--focus-offset);
}
.card__title a:focus-visible {
	outline: none;
}
.card:hover .card__title a {
	text-decoration: underline;
}
.card__summary {
	margin: 0;
	flex: 1;
}
.card a:not(.button) {
	color: var(--ink);
}
.section--ink .card a:not(.button) {
	color: var(--paper);
}
.card__cta {
	font-weight: 700;
	color: inherit;
}
.card .card__links {
	margin-top: auto;
	padding-top: var(--space-2);
}
.card .card__links .button {
	min-height: 0;
	padding: 0.5rem 1rem;
}
.section--ink .card__cta {
	color: var(--paper);
}
.related {
	margin-top: var(--space-6);
}
.related__heading {
	margin-top: 0;
}

/* ---------- Home paths ---------- */
.paths {
	display: grid;
	gap: var(--space-3);
}
@media (min-width: 768px) {
	.paths {
		grid-template-columns: 1fr 1fr;
	}
}
.path {
	border: 3px solid var(--ink);
	padding: var(--space-4);
	border-radius: var(--radius);
	position: relative;
}
.path h2 {
	margin-top: 0;
}
.path--shop {
	background: var(--signal);
}

/* ---------- Home: steps strip ---------- */
.section--signal {
	background: var(--signal);
}
.section--signal a:not(.button):not(.wp-block-button__link) {
	color: var(--ink);
}
.steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-3);
}
@media (min-width: 700px) {
	.steps {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-4);
	}
}
.steps li {
	margin: 0;
	border-top: 4px solid var(--signal);
	padding-top: var(--space-2);
	max-width: none;
}
.section--ink .steps li {
	border-top-color: var(--signal);
}
.steps__n {
	display: block;
	font-family: var(--font-display);
	font-size: var(--text-xxl);
	line-height: 1;
	color: var(--ink);
	margin-bottom: var(--space-1);
}
.section--ink .steps__n {
	color: var(--paper);
}
.steps__t {
	display: block;
	font-family: var(--font-display);
	font-size: var(--text-l);
	text-transform: uppercase;
	line-height: 1.1;
	margin-bottom: var(--space-1);
}
.steps p {
	margin: 0;
	font-size: var(--text-s);
	max-width: none;
}
.steps__note {
	margin-top: var(--space-3);
	font-size: var(--text-s);
	max-width: none;
}
.qr-placement {
	display: grid;
	gap: var(--space-3);
	align-items: center;
	margin-top: var(--space-4);
	max-width: none;
}
@media (min-width: 700px) {
	.qr-placement {
		grid-template-columns: minmax(10rem, 14rem) 1fr;
	}
}
.qr-placement__media {
	margin: 0;
	overflow: hidden;
	border-radius: var(--radius);
}
.qr-placement__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--radius);
	transition: transform 0.4s ease;
}
.qr-placement:hover .qr-placement__img {
	transform: scale(1.07);
}
/* Keyboard users get a much stronger zoom into the upper-back logo/QR
   area: the media frame clips it, so the image stays contained. */
.qr-placement:focus-within .qr-placement__img {
	transform: scale(2.7) translate(0px, 50px);
}
@media (prefers-reduced-motion: reduce) {
	.qr-placement__img {
		transition: none;
	}
}
.qr-placement__media--video {
	position: relative;
}
.qr-placement__video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--radius);
}
.qr-video-toggle {
	position: absolute;
	bottom: var(--space-2);
	right: var(--space-2);
	padding: 0.35rem 0.7rem;
	font-size: var(--text-s);
	font-family: inherit;
	background: var(--paper);
	color: var(--ink);
	border: 2px solid var(--ink);
	border-radius: var(--radius);
	cursor: pointer;
}
.qr-placement__text {
	margin: 0;
	max-width: var(--measure);
}

/* ---------- Home: product showcase cards ---------- */
.wear-split {
	display: grid;
	gap: var(--space-4);
}
@media (min-width: 960px) {
	.wear-split {
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
		align-items: start;
	}
	.saw-shirt {
		position: sticky;
		top: var(--space-4);
	}
}
.saw-shirt {
	border: 3px solid var(--ink);
	border-radius: var(--radius);
	padding: var(--space-3);
	background: var(--mist);
}
.saw-shirt h3 {
	font-family: var(--font-display);
	font-size: var(--text-l);
	line-height: 1.1;
	text-transform: uppercase;
	margin: 0 0 var(--space-1);
}
.saw-shirt p {
	margin: 0 0 var(--space-2);
	font-size: var(--text-s);
}
.saw-shirt__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-1);
}
.saw-shirt__list a {
	font-family: var(--font-display);
	text-transform: uppercase;
	line-height: 1.2;
}
.product-cards {
	display: grid;
	gap: var(--space-4);
	max-width: none;
}
@media (min-width: 640px) {
	.product-cards {
		grid-template-columns: 1fr 1fr;
	}
}
@media (min-width: 960px) {
	.product-cards {
		grid-template-columns: 1fr 1fr;
	}
}
.product-card {
	border: 3px solid var(--ink);
	border-radius: var(--radius);
	padding: var(--space-3);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}
.product-card__media {
	display: block;
	background: var(--mist);
	border-radius: var(--radius);
	padding: var(--space-3);
}
/* Shared hover/focus image swap: second view cross-fades in over the featured image. */
.img-swap {
	position: relative;
	display: block;
}
.img-swap img {
	display: block;
	width: 100%;
	height: auto;
}
.img-swap__alt {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.25s ease;
	pointer-events: none;
}
.product-card:hover .img-swap__alt,
.product-card:focus-within .img-swap__alt,
li.product:hover .img-swap__alt,
li.product:focus-within .img-swap__alt {
	opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
	.img-swap__alt {
		transition: none;
	}
}
.product-card__title a,
.product-card__meta a {
	color: inherit;
	text-decoration: none;
}
.product-card__title a:hover,
.product-card__meta a:hover {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}
.product-card__media svg {
	width: 100%;
	height: auto;
	max-width: 20rem;
	margin-inline: auto;
}
.product-card__title {
	font-family: var(--font-display);
	font-size: var(--text-l);
	text-transform: uppercase;
	line-height: 1.1;
	margin: 0;
}
.product-card__meta {
	font-size: var(--text-s);
	color: var(--slate);
	margin: 0;
}
.product-card__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-top: auto;
	padding-top: var(--space-2);
}
.product-card__links a:not(.button) {
	color: var(--ink);
}

/* ---------- Brand mark (About) ---------- */
.brand-mark {
	margin: 0 auto;
	max-width: 18rem;
}
/* Buttons inside a centred section (About closing band) centre too. */
.section.text-center > * {
	margin-inline: auto !important;
}
.section.text-center .buttons {
	justify-content: center;
}
/* Secondary (outline) buttons stay legible on the ink band. */
.section--ink .is-style-secondary .wp-block-button__link {
	background: transparent;
	color: var(--paper);
	border-color: var(--paper);
}
.section--ink .is-style-secondary .wp-block-button__link:hover {
	background: var(--paper);
	color: var(--ink);
}
/* Signal invite band on guides: clear space above so it doesn't butt
   against the related-reading list. */
.invite-signal {
	margin-top: var(--space-5);
}

/* ---------- Home: pull quote ---------- */
.pull-quote {
	border: 0;
	border-left: 8px solid var(--ink);
	padding-left: var(--space-3);
	font-family: var(--font-display);
	font-size: var(--text-l);
	line-height: 1.25;
	text-transform: uppercase;
	max-width: 32ch;
	margin-block: var(--space-4);
}
.section--ink .pull-quote {
	border-left-color: var(--signal);
}
.pull-quote__mark {
	display: block;
	font-size: 4rem;
	line-height: 0.5;
	margin-bottom: var(--space-2);
}

/* ---------- Look (QR) pages ---------- */
.is-look-page .site-header {
	border-bottom-width: 2px;
}
.look {
	padding-block: var(--space-5) var(--space-6);
}
.look__title {
	font-size: var(--text-xxl);
}
.look__answer {
	font-size: var(--text-l);
	font-weight: 700;
	line-height: 1.35;
	max-width: 40ch;
}
.look__body {
	max-width: var(--measure);
}
/* Monochrome consistency: QR pages and the Printful size guide use ink links,
   underlined, with the global focus ring preserved. */
.is-look-page .look a:not(.btn):not(.wp-block-button__link):not(.wp-element-button),
.pf-size-guide-modal-wrapper a:not(.btn),
.pf-size-guide-modal-wrapper button,
.saw-shirt__list a {
	color: var(--ink);
}
.look__shop {
	margin-top: var(--space-5);
	font-size: var(--text-s);
	color: var(--slate);
}
.look__shop a {
	color: var(--slate);
}

/* ---------- Learning → shop invitation (look pages + Understand guides) ---------- */
.learn-shop {
	margin-top: var(--space-5);
	padding-top: var(--space-3);
	border-top: 1px solid var(--line);
	font-size: var(--text-s);
	color: var(--slate);
}
.learn-shop__lead {
	margin: 0 0 var(--space-1);
}
.learn-shop__lead strong {
	color: var(--ink);
}
.learn-shop__links {
	margin: 0;
}
.learn-shop__links a {
	display: inline-block;
	margin-right: var(--space-4);
}
.learn-shop__links a.learn-shop__product {
	font-weight: 700;
	color: var(--ink);
}

/* ---------- Shop: category chips ---------- */
.shop-cats__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
	list-style: none;
	padding: 0;
	margin: 0 0 var(--space-4);
	max-width: none;
}
.shop-cats__item {
	margin: 0;
}
.shop-cats__link {
	display: inline-block;
	padding: 0.5rem 1rem;
	min-height: 44px;
	border: 2px solid var(--ink);
	border-radius: 999px;
	color: var(--ink);
	text-decoration: none;
	font-weight: 700;
	font-size: var(--text-s);
}
.shop-cats__link[aria-current],
.shop-cats__link:hover {
	background: var(--ink);
	color: var(--paper);
}
/* Eyebrow label on product category archives (e.g. "Big print. Good days."). */
.shop-cat-eyebrow {
	display: block;
	font-family: var(--font-display);
	text-transform: uppercase;
	font-size: var(--text-s);
	letter-spacing: 0.08em;
	color: var(--ink);
	margin-bottom: var(--space-1);
}
/* ---------- Shop: group enquiries ---------- */
.shop-groups {
	margin: var(--space-5) 0 var(--space-3);
	max-width: var(--measure);
	font-size: var(--text-s);
	color: var(--slate);
}
.shop-groups__lead {
	margin: 0 0 var(--space-1);
}
.shop-groups__lead strong {
	color: var(--ink);
}
.shop-groups__link {
	margin: 0;
}

/* ---------- Contact form: group topic fields ---------- */
.contact-groups {
	margin: 0 0 var(--space-3);
	padding: var(--space-3);
	border: 1px solid var(--line);
	border-radius: 4px;
}
.contact-groups[hidden] {
	display: none;
}
.contact-groups > legend {
	padding: 0 var(--space-1);
	font-weight: 700;
}
.contact-groups__statements {
	border: 0;
	padding: 0;
	margin: 0 0 var(--space-2);
}
.contact-groups__statements legend {
	font-weight: 400;
	padding: 0;
	margin-bottom: var(--space-1);
}
.form__optional {
	font-weight: 400;
	color: var(--slate);
}
.form__check {
	display: block;
	font-weight: 400;
	margin: 0 0 var(--space-1);
}
.form__check input {
	margin-right: var(--space-1);
	width: auto;
}
.look__source {
	margin-top: var(--space-5);
	padding-top: var(--space-3);
	border-top: 1px solid var(--line);
	font-size: var(--text-s);
	color: var(--slate);
}

/* ---------- Address blocks (returns depot vs business correspondence) ---------- */
.addr-blocks {
	display: grid;
	gap: var(--space-3);
	margin-block: var(--space-3);
	max-width: var(--measure);
}
@media (min-width: 720px) {
	.addr-blocks {
		grid-template-columns: 1fr 1fr;
	}
	.addr-blocks p {
		margin-block: var(--space-2);
	}
}
address.addr {
	font-style: normal;
	padding: var(--space-3);
	border: 2px solid var(--ink);
	border-radius: var(--radius);
	background: var(--paper);
	line-height: 1.6;
}
address.addr .addr__label {
	display: inline-block;
	margin-bottom: var(--space-2);
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: var(--text-s);
}

/* ---------- Voices ---------- */
.voice-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
	list-style: none;
	padding: 0;
	margin: 0 0 var(--space-4);
	max-width: none;
}
.voice-filters li {
	margin: 0;
}
.voice-filters a {
	display: inline-block;
	padding: 0.5rem 1rem;
	min-height: 44px;
	border: 2px solid var(--ink);
	border-radius: 999px;
	color: var(--ink);
	text-decoration: none;
	font-weight: 700;
	font-size: var(--text-s);
}
.voice-filters a[aria-current],
.voice-filters a:hover {
	background: var(--ink);
	color: var(--paper);
}
.voice {
	border-top: 3px solid var(--ink);
	padding-block: var(--space-4);
	max-width: var(--measure);
}
.voice__text {
	font-size: var(--text-l);
	line-height: 1.4;
	margin: 0 0 var(--space-3);
	padding-left: var(--space-4);
	quotes: "\201C" "\201D";
}
.voice__text::before {
	content: open-quote;
}
.voice__text::after {
	content: close-quote;
}
.voice__attribution {
	font-size: var(--text-s);
	color: var(--slate);
	margin: 0;
}
.voice__attribution strong {
	color: var(--ink);
}
.voice__category {
	display: inline-block;
	font-size: var(--text-s);
	background: var(--mist);
	padding: 0.1rem 0.6rem;
	border-radius: 999px;
	margin-left: var(--space-1);
}
.voice__date {
	display: block;
	font-size: var(--text-s);
	margin-top: 0.25rem;
}
.voices-app.is-loading .voices {
	opacity: 0.55;
}

/* Category pills stay visible while submissions scroll (desktop only —
   on mobile the vision panel already owns the pinned top zone). */
@media (min-width: 901px) {
	.voices-app > nav {
		position: sticky;
		top: var(--space-2);
		z-index: 4;
		background: var(--paper);
		padding-block: var(--space-1);
	}
}

/* Closing section: CTA + ground rules in a signal band that ends the page. */
.prose > .voices-closing {
	max-width: none;
}
.voices-closing {
	width: 100vw;
	margin-left: calc(50% - 50vw);
}
.voices-closing .voices-cta {
	margin: 0 0 var(--space-4);
}

/* Voices page: contributions get the full reading column with breathing
   room. The sight simulator lives in the Understand guide. */
.voices .voice {
	padding-block: var(--space-5);
}
/* Indent contributions off the screen edge — fluid so mobile keeps room. */
.voices {
	padding-left: clamp(1rem, 5vw, var(--space-6));
}
.voices-invite {
	margin: var(--space-4) 0 0;
	font-weight: 700;
}
.voices-invite a {
	color: var(--ink);
	text-decoration-thickness: 3px;
	text-underline-offset: 0.2em;
}
.voices-invite a:hover {
	color: var(--slate);
}

@media (max-width: 900px) {
	/* Slide/flip entrance as each submission scrolls in (JS adds the hooks). */
	.voices.bu-voices-animate .voice {
		opacity: 0;
		transform: perspective(900px) rotateX(-9deg) translateY(64px);
		transform-origin: top center;
		transition: transform 0.55s cubic-bezier(0.2, 0.65, 0.3, 1), opacity 0.45s ease;
	}
	.voices.bu-voices-animate .voice.voice--in {
		opacity: 1;
		transform: none;
	}
}
@media (prefers-reduced-motion: reduce) {
	.voices.bu-voices-animate .voice {
		transition: none;
	}
}

/* ---------- Sight simulator (Understand guides) ---------- */
.sight-sim {
	max-width: var(--content);
	margin-block: var(--space-4);
}
.sight-sim__viewport {
	position: relative;
	overflow: hidden;
	border: 3px solid var(--ink);
	background: var(--paper);
}
.sight-sim__scene {
	line-height: 0;
}
.sight-sim__scene svg {
	display: block;
	width: 100%;
	height: auto;
	transition: filter 0.45s ease;
}
.sight-sim__overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
	transition: opacity 0.45s ease, background 0.45s ease;
}
.sight-sim__mode {
	position: absolute;
	top: var(--space-1);
	left: var(--space-1);
	z-index: 2;
	font-weight: 700;
	font-size: var(--text-s);
	margin: 0;
	background: var(--paper);
	border: 2px solid var(--ink);
	padding: 0.3rem 0.75rem;
}
.sight-sim__controls {
	margin-top: var(--space-3);
}
.sight-sim__examples {
	border: 0;
	padding: 0;
	margin: 0 0 var(--space-3);
}
.sight-sim__examples legend {
	font-weight: 700;
	font-size: var(--text-s);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 0;
	margin-bottom: var(--space-2);
}
.sight-sim__pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
}
.sight-sim__pill input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.sight-sim__pill span {
	display: inline-block;
	padding: 0.5rem 1rem;
	min-height: 44px;
	border: 2px solid var(--ink);
	border-radius: 999px;
	font-weight: 700;
	font-size: var(--text-s);
	cursor: pointer;
	box-sizing: border-box;
}
.sight-sim__pill input:checked + span {
	background: var(--ink);
	color: var(--paper);
}
.sight-sim__pill input:focus-visible + span {
	outline: 3px solid var(--signal);
	outline-offset: 2px;
}
.sight-sim__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
}
.sight-sim__btn {
	padding: 0.5rem 1rem;
	min-height: 44px;
	border: 2px solid var(--ink);
	border-radius: 999px;
	background: var(--paper);
	color: var(--ink);
	font-weight: 700;
	font-size: var(--text-s);
	cursor: pointer;
}
.sight-sim__btn:hover {
	background: var(--ink);
	color: var(--paper);
}
.sight-sim__btn[disabled] {
	opacity: 0.45;
	cursor: default;
}
.sight-sim__btn[disabled]:hover {
	background: var(--paper);
	color: var(--ink);
}
.sight-sim__compare[aria-pressed="true"] {
	background: var(--ink);
	color: var(--paper);
}
.sight-sim__motion {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: var(--text-s);
	font-weight: 700;
	cursor: pointer;
}
.sight-sim__motion input {
	width: 1.1rem;
	height: 1.1rem;
	accent-color: var(--ink);
}
.sight-sim__motion input:disabled {
	opacity: 0.45;
}
.sight-sim__motion input:disabled ~ .sight-sim__motion-label {
	font-weight: 400;
	color: var(--slate);
}
.sight-sim__panel {
	margin-top: var(--space-3);
	border-left: 4px solid var(--signal);
	padding-left: var(--space-2);
}
.sight-sim__name {
	font-weight: 900;
	font-size: var(--text-l);
	margin: 0;
}
.sight-sim__note {
	margin: var(--space-1) 0 0;
}
.sight-sim__help {
	margin: var(--space-1) 0 0;
}
.sight-sim__disclaimer {
	font-size: var(--text-s);
	color: var(--slate);
	margin: var(--space-3) 0 0;
}
.sight-sim__all {
	margin-top: var(--space-3);
	font-size: var(--text-s);
}
.sight-sim__all summary {
	font-weight: 700;
	cursor: pointer;
}
.sight-sim__all dl {
	margin: var(--space-2) 0 0;
}
.sight-sim__all dt {
	font-weight: 700;
	margin-top: var(--space-2);
}
.sight-sim__all dd {
	margin: 0;
}
.sight-sim--no-motion .sight-sim__scene svg,
.sight-sim--no-motion .sight-sim__overlay {
	transition: none;
}
/* Desktop: visualisation holds its size on the left; controls, info,
   disclaimer and the examples list stack in the right column. */
@media (min-width: 900px) {
	.sight-sim {
		display: grid;
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
		column-gap: var(--space-4);
		align-items: start;
	}
	.sight-sim__viewport {
		grid-column: 1;
	}
	.sight-sim__controls,
	.sight-sim__panel,
	.sight-sim__disclaimer,
	.sight-sim__all {
		grid-column: 2;
	}
	.sight-sim__controls {
		margin-top: 0;
	}
	.sight-sim__panel {
		margin-top: 0;
	}
}

/* Impairment effects (class on .sight-sim__viewport). */
.sight-sim__viewport.v-cataract .sight-sim__scene svg {
	filter: blur(2.5px) brightness(1.12) contrast(0.72) saturate(0.7);
}
.sight-sim__viewport.v-cataract .sight-sim__overlay {
	background: rgba(243, 228, 178, 0.28);
}
.sight-sim__viewport.v-glaucoma .sight-sim__overlay {
	background: radial-gradient(circle at 50% 50%, transparent 0 26%, rgba(0, 0, 0, 0.97) 58%);
}
.sight-sim__viewport.v-rp .sight-sim__overlay {
	background: radial-gradient(circle at 50% 50%, transparent 0 11%, rgba(0, 0, 0, 0.98) 32%);
}
.sight-sim__viewport.v-amd .sight-sim__overlay {
	-webkit-backdrop-filter: blur(7px);
	backdrop-filter: blur(7px);
	-webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0 20%, transparent 46%);
	mask-image: radial-gradient(circle at 50% 50%, #000 0 20%, transparent 46%);
}
.sight-sim__viewport.v-amd .sight-sim__overlay::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.5) 0 14%, transparent 40%);
}
.sight-sim__viewport.v-hemianopia .sight-sim__overlay {
	background: linear-gradient(90deg, transparent 50%, #050505 50%);
}
.sight-sim__viewport.v-myopia .sight-sim__scene svg {
	filter: blur(6px) contrast(0.92);
}
.sight-sim__viewport.v-deuteranopia .sight-sim__scene svg {
	filter: url(#sim-deuteranopia);
}
.sight-sim__viewport.v-nyctalopia .sight-sim__scene svg {
	filter: brightness(0.3) contrast(1.15) saturate(0.7);
}
.sight-sim__viewport.v-drd .sight-sim__scene svg {
	filter: blur(1.5px) brightness(0.95);
}
.sight-sim__viewport.v-drd .sight-sim__overlay {
	background:
		radial-gradient(circle at 18% 24%, rgba(8, 8, 8, 0.9) 0 2.5%, transparent 4%),
		radial-gradient(circle at 32% 62%, rgba(8, 8, 8, 0.85) 0 3.5%, transparent 5.5%),
		radial-gradient(circle at 47% 38%, rgba(8, 8, 8, 0.8) 0 2%, transparent 3.5%),
		radial-gradient(circle at 61% 72%, rgba(8, 8, 8, 0.9) 0 4%, transparent 6%),
		radial-gradient(circle at 74% 28%, rgba(8, 8, 8, 0.75) 0 2.5%, transparent 4%),
		radial-gradient(circle at 86% 55%, rgba(8, 8, 8, 0.85) 0 3%, transparent 5%),
		radial-gradient(circle at 38% 84%, rgba(8, 8, 8, 0.7) 0 2%, transparent 3.5%),
		radial-gradient(circle at 68% 88%, rgba(8, 8, 8, 0.8) 0 2.5%, transparent 4%);
}
.sight-sim__viewport.v-diplopia .sight-sim__scene svg {
	filter: url(#sim-diplopia);
}
.sight-sim__viewport.v-quadrant .sight-sim__overlay {
	background: linear-gradient(90deg, transparent 50%, #050505 50%) bottom / 100% 50% no-repeat;
}

/* "See the original" briefly lifts the effect without changing the choice. */
.sight-sim__viewport.sight-sim--show-original .sight-sim__scene svg {
	filter: none !important;
}
.sight-sim__viewport.sight-sim--show-original .sight-sim__overlay {
	opacity: 0;
}

@media (max-width: 480px) {
	/* Keep the mode badge compact so long names cover less of the scene. */
	.sight-sim__mode {
		font-size: 0.75rem;
		padding: 0.2rem 0.5rem;
		max-width: 70%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sight-sim__scene svg,
	.sight-sim__overlay {
		transition: none;
	}
}

/* ---------- Payment icons ---------- */
.pay-icons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-1);
	list-style: none;
	padding: 0;
	margin: 0;
	max-width: none;
}
.pay-icons li {
	margin: 0;
}
.pay-icons img {
	display: block;
	height: 26px;
	width: auto;
	background: #fff;
	padding: 3px 6px;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 4px;
	box-sizing: content-box;
}
.pay-icons__label {
	font-size: var(--text-s);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 0 0 var(--space-1);
}
.product-pay-icons {
	margin-top: var(--space-3);
}
.site-footer__pay {
	margin-top: var(--space-4);
}
.site-footer__pay .pay-icons__label {
	color: inherit;
}

/* ---------- Forms ---------- */
.form {
	max-width: var(--content);
}
.form__field {
	margin-bottom: var(--space-4);
}
.form__field label,
.form__legend {
	display: block;
	font-weight: 700;
	margin-bottom: var(--space-1);
}
.form__hint {
	display: block;
	color: var(--slate);
	font-size: var(--text-s);
	margin-bottom: var(--space-1);
}
.form__hint a {
	color: var(--ink);
}
.form__field input[type="text"],
.form__field input[type="email"],
.form__field select,
.form__field textarea,
.woocommerce .input-text,
.woocommerce select,
.wc-block-components-text-input input,
.wc-block-components-form .wc-block-components-text-input input[type="text"],
.wc-block-components-form .wc-block-components-text-input input[type="email"],
.wc-block-components-form .wc-block-components-text-input input[type="tel"] {
	display: block;
	width: 100%;
	min-height: 48px;
	padding: 0.65rem 0.85rem;
	font: inherit;
	color: var(--ink);
	background: #fff;
	border: 2px solid var(--ink);
	border-radius: var(--radius);
}
.form__field textarea {
	min-height: 10rem;
	resize: vertical;
}
.form__field [aria-invalid="true"] {
	border-color: var(--error);
	border-width: 3px;
}
.form__error {
	color: var(--error);
	font-weight: 700;
	margin-top: var(--space-1);
	display: block;
}
.form__error:empty {
	display: none;
}
.form__count {
	font-size: var(--text-s);
	color: var(--slate);
	margin-top: var(--space-1);
	display: block;
}
fieldset.form__field {
	border: 0;
	padding: 0;
	margin-inline: 0;
	min-width: 0;
}
.form__choice {
	display: flex;
	gap: var(--space-2);
	align-items: flex-start;
	margin-bottom: var(--space-2);
	font-weight: 400;
}
.form__choice input {
	width: 1.5rem;
	height: 1.5rem;
	flex: none;
	margin: 0.15rem 0 0;
	accent-color: var(--ink);
}
.form__choice label {
	font-weight: 400;
	margin: 0;
}
.form__consent {
	background: var(--mist);
	padding: var(--space-3);
	border-radius: var(--radius);
}
.form__honeypot {
	position: absolute;
	left: -9999px;
	opacity: 0;
	height: 0;
	overflow: hidden;
}
.notice {
	padding: var(--space-3);
	border-left: 8px solid var(--ink);
	background: var(--mist);
	margin-block: var(--space-4);
	max-width: var(--measure);
}
.notice--error {
	border-color: var(--error);
	background: #fbeeec;
}
.notice--success {
	border-color: var(--success);
	background: #e8f3e9;
}
.notice ul {
	margin-bottom: 0;
}
.notice__title {
	margin: 0 0 var(--space-1);
	font-family: var(--font-body);
	font-size: var(--text-m);
	text-transform: none;
}

/* ---------- Search ---------- */
.search-form {
	display: flex;
	gap: var(--space-1);
	max-width: var(--content);
}
.search-form input[type="search"] {
	flex: 1;
	min-width: 0;
	min-height: 48px;
	padding: 0.65rem 0.85rem;
	font: inherit;
	border: 2px solid var(--ink);
	border-radius: var(--radius);
}

/* ---------- WooCommerce ---------- */
.woocommerce-notices-wrapper:empty {
	display: none;
}
.woocommerce ul.products {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-4);
	max-width: none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after {
	display: none;
}
@media (min-width: 640px) {
	.woocommerce ul.products {
		grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	}
}
.woocommerce ul.products[class] li.product.product {
	margin: 0;
	float: none;
	width: auto;
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	border: 2px solid var(--ink);
	border-radius: var(--radius);
	padding: var(--space-3);
	position: relative;
}
.woocommerce ul.products li.product img {
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	background: var(--mist);
	border-radius: var(--radius);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--font-display);
	font-size: var(--text-l);
	text-transform: uppercase;
	line-height: 1.1;
	margin: var(--space-2) 0 0;
}
.woocommerce ul.products li.product .woocommerce-loop-product__link {
	color: var(--ink);
	text-decoration: none;
}
.woocommerce ul.products li.product .woocommerce-loop-product__link::after {
	content: "";
	position: absolute;
	inset: 0;
}
.woocommerce ul.products li.product:hover .woocommerce-loop-product__title {
	text-decoration: underline;
}
.woocommerce ul.products li.product .price {
	font-weight: 700;
	color: var(--ink);
	font-size: var(--text-m);
}
.woocommerce ul.products li.product .button {
	position: relative;
	z-index: 1;
	align-self: flex-start;
	margin-top: auto;
}
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
	font-size: var(--text-s);
	margin-bottom: var(--space-3);
}
.woocommerce .woocommerce-ordering select {
	min-height: 44px;
	font: inherit;
	border: 2px solid var(--ink);
	border-radius: var(--radius);
	padding: 0.4rem 0.6rem;
}
.woocommerce span.onsale {
	display: none;
}
.woocommerce div.product .product_title {
	font-size: var(--text-xl);
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--ink);
	font-size: var(--text-l);
	font-weight: 700;
}
.woocommerce div.product form.cart {
	margin-block: var(--space-4);
}
.woocommerce div.product form.cart .variations {
	margin-bottom: var(--space-3);
}
.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td {
	display: block;
	border: 0;
	padding: 0;
}
.woocommerce div.product form.cart .variations td {
	margin-bottom: var(--space-3);
}
.woocommerce div.product form.cart .variations label {
	font-weight: 700;
	display: block;
	margin-bottom: var(--space-1);
}
.woocommerce div.product form.cart .variations select {
	width: 100%;
	max-width: 24rem;
	margin-right: 0;
}
.woocommerce div.product form.cart .reset_variations {
	display: inline-block;
	margin-top: var(--space-1);
	font-size: var(--text-s);
}
.woocommerce .quantity .qty {
	min-height: 48px;
	width: 5rem;
	font: inherit;
	border: 2px solid var(--ink);
	border-radius: var(--radius);
	text-align: center;
	margin-right: var(--space-1);
}
.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	scrollbar-width: thin;
	list-style: none;
	padding: 0;
	margin: var(--space-5) 0 var(--space-3);
	border-bottom: 1px solid #000;
	max-width: none; /* global "ul" caps at --measure; tabs run the full product width */
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	flex: 0 0 auto;
	white-space: nowrap;
	border: 1px solid #000000;
	background-color: #ffffff;
	color: #515151;
	position: relative;
	z-index: 0;
	border-radius: 4px 4px 0 0;
	margin: 0 -5px 0;
	padding: 0 0.5em;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li:first-child {
	margin-left: 0;
}
/* White text, not the grey in the reference spec: #515151 on black fails contrast. */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	background: #000000;
	color: #ffffff;
	z-index: 2;
	border-bottom-color: #ffffff;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: inline-block;
	padding: 0.75rem 0.5rem;
	min-height: 44px;
	color: inherit;
	text-decoration: none;
	font-weight: 700;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}
.woocommerce div.product .woocommerce-tabs .panel h2:first-child {
	margin-top: 0;
	font-size: var(--text-l);
}
.product-facts {
	margin-block: var(--space-4);
	max-width: var(--measure);
}
.product-facts dl {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: var(--space-1) var(--space-3);
}
.product-facts dl div {
	display: contents;
}
.product-facts dt {
	font-weight: 700;
}
.product-facts dd {
	margin: 0;
}
.product-learn {
	background: var(--ink);
	color: var(--paper);
	padding: var(--space-3) var(--space-4);
	border-left: 8px solid var(--signal);
	border-radius: var(--radius);
	margin-block: var(--space-4);
	max-width: var(--measure);
}
.product-learn a {
	color: var(--paper);
}
.product-learn h2 {
	font-size: var(--text-l);
	margin-top: 0;
}
.product-design {
	margin-block: var(--space-4);
	max-width: var(--measure);
}
.product-design h2 {
	font-size: var(--text-l);
	margin-top: 0;
}
.product-design p {
	margin: 0;
}
.product-links {
	font-size: var(--text-s);
	margin-top: var(--space-2);
}
.product-links a {
	margin-right: var(--space-2);
}
.size-chart {
	overflow-x: auto;
	margin-block: var(--space-3);
}
.size-chart table {
	min-width: 480px;
}

/* ---------- Product gallery: image chevrons + 4-up thumbnail strip ---------- */
.woocommerce div.product .woocommerce-product-gallery .flex-viewport {
	position: relative;
}
.bu-gallery-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 2px solid var(--ink);
	background: rgba(255, 255, 255, 0.92);
	color: var(--ink);
	font-size: 1.6rem;
	line-height: 1;
	display: grid;
	place-items: center;
	cursor: pointer;
	padding: 0 0 4px;
}
.bu-gallery-nav:hover,
.bu-gallery-nav:focus-visible {
	background: var(--ink);
	color: var(--paper);
}
.bu-gallery-nav--prev {
	left: var(--space-2);
}
.bu-gallery-nav--next {
	right: var(--space-2);
}
.bu-thumbs {
	display: flex;
	align-items: center;
	gap: var(--space-1);
	margin-top: var(--space-2);
}
.bu-thumbs .flex-control-thumbs {
	display: flex;
	gap: var(--space-1);
	flex: 1 1 auto;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	scrollbar-width: none;
	scroll-snap-type: x proximity;
}
.bu-thumbs .flex-control-thumbs::-webkit-scrollbar {
	display: none;
}
.bu-thumbs .flex-control-thumbs li,
.woocommerce-product-gallery .flex-control-thumbs li {
	list-style: none;
	cursor: pointer;
}
.bu-thumbs .flex-control-thumbs li {
	flex: 0 0 calc(25% - var(--space-1) * 0.75);
	width: auto;
	float: none;
	margin: 0;
	scroll-snap-align: start;
}
.woocommerce-product-gallery .flex-control-thumbs li img[role="button"]:focus-visible {
	outline: 3px solid var(--signal);
	outline-offset: 2px;
}
.bu-thumb-nav {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border: 2px solid var(--ink);
	border-radius: 50%;
	background: var(--paper);
	color: var(--ink);
	font-size: 1.1rem;
	line-height: 1;
	display: grid;
	place-items: center;
	cursor: pointer;
	padding: 0 0 3px;
}
.bu-thumb-nav:hover,
.bu-thumb-nav:focus-visible {
	background: var(--ink);
	color: var(--paper);
}
.bu-thumb-nav:disabled,
.bu-thumb-nav:disabled:hover {
	opacity: 0.35;
	cursor: default;
	background: var(--paper);
	color: var(--ink);
}
/* Gallery stays invisible until flexslider fades it in — reveal it for no-JS. */
.no-js .woocommerce-product-gallery {
	opacity: 1 !important;
}

/* ---------- Variation form helpers ---------- */
/* Utility links (Clear, Size guide) sit in ink, not link blue. The Printful
 * trigger carries an inline colour, so !important is required. */
.woocommerce div.product .reset_variations,
.woocommerce div.product .product-links a,
.woocommerce div.product .product_meta a,
.woocommerce div.product .variations_form a[onclick*="Size_Guide"] {
	color: var(--ink) !important;
}
.variations tr.is-locked .value {
	opacity: 0.55;
}
.variations .choose-first-hint {
	margin: 0 0 var(--space-1);
	font-size: var(--text-s);
	color: var(--slate);
}
.variations tr:not(.is-locked) .choose-first-hint {
	display: none;
}
.staging-badge {
	display: inline-block;
	background: var(--error);
	color: #fff;
	font-weight: 700;
	font-size: var(--text-s);
	padding: 0.2rem 0.6rem;
	border-radius: var(--radius);
	margin-bottom: var(--space-2);
}
.woocommerce table.shop_table {
	border: 0;
	border-radius: 0;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	border-bottom: 1px solid var(--line);
	padding: var(--space-2);
}
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	background: var(--mist);
	border-top: 0;
	border-left: 8px solid var(--ink);
	padding: var(--space-3) !important;
	color: var(--ink);
	list-style: none;
	margin-bottom: var(--space-4);
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	display: none;
}
.woocommerce-error {
	border-left-color: var(--error);
	background: #fbeeec;
}
.woocommerce-message {
	border-left-color: var(--success);
	background: #e8f3e9;
}
.woocommerce form .form-row label {
	font-weight: 700;
}
.woocommerce form .form-row.woocommerce-invalid .input-text {
	border-color: var(--error);
	border-width: 3px;
}
.woocommerce form .form-row .required {
	color: var(--error);
	text-decoration: none;
}
.wc-block-components-checkout-step__title,
.wc-block-components-title {
	font-family: var(--font-display) !important;
	text-transform: uppercase;
}
.wc-block-components-button {
	border-radius: var(--radius) !important;
}
.wc-block-components-button:not(.is-link):hover {
	background: var(--paper) !important;
	color: var(--ink) !important;
}
.wc-block-components-validation-error p {
	color: var(--error);
	font-weight: 700;
}
.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] {
	width: 1.5rem;
	height: 1.5rem;
	border: 2px solid var(--ink);
}
.wc-block-components-notice-banner {
	border-radius: var(--radius);
}
.staging-checkout-note {
	background: #fff4f2;
	border-left: 8px solid var(--error);
	padding: var(--space-3);
	margin-bottom: var(--space-4);
	max-width: var(--measure);
}

/* ---------- Utilities ---------- */
.text-center {
	text-align: center;
}
.mt-0 {
	margin-top: 0 !important;
}
.visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}
.tag {
	display: inline-block;
	font-size: var(--text-s);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--slate);
	margin-bottom: var(--space-2);
}
.pagination,
.woocommerce-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
	margin-top: var(--space-5);
	padding: 0;
	list-style: none;
}
.woocommerce-pagination ul.page-numbers li {
	float: none;
	display: inline-block;
}
.pagination .page-numbers,
.woocommerce-pagination ul.page-numbers .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 0.75rem;
	border: 2px solid var(--ink);
	border-radius: var(--radius);
	color: var(--ink);
	text-decoration: none;
	font-weight: 700;
}
.pagination .page-numbers.current,
.woocommerce-pagination ul.page-numbers .page-numbers.current {
	background: var(--ink);
	color: var(--paper);
}

/* Single product: stack on small screens (Woo's layout.css floats summary/images at 48%). */
.woocommerce div.product div.images,
.woocommerce div.product div.summary,
.woocommerce #content div.product div.images,
.woocommerce #content div.product div.summary {
	float: none;
	width: 100%;
	margin-bottom: var(--space-4);
}
@media (min-width: 768px) {
	.woocommerce div.product .product-main,
	.woocommerce #content div.product .product-main {
		display: grid;
		grid-template-columns: minmax(0, 44%) minmax(0, 1fr);
		column-gap: var(--space-4);
		align-items: start;
	}
	/* Woo core pins .images.woocommerce-product-gallery to position:relative;
	 * .woocommerce lives on <body>, so #main raises specificity to win.
	 * The containing block is .product-main, so the gallery un-sticks when
	 * the Description / Additional information tabs reach it. */
	.woocommerce #main .product div.images.woocommerce-product-gallery {
		float: none;
		width: auto;
		margin: 0;
		grid-column: 1;
		grid-row: 1;
		position: sticky;
		top: var(--space-4);
		align-self: start;
	}
	.woocommerce div.product div.summary,
	.woocommerce #content div.product div.summary {
		float: none;
		width: auto;
		margin: 0;
		grid-column: 2;
		grid-row: 1;
	}
}
.woocommerce div.product .product_title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	overflow-wrap: anywhere;
}
/* Woo's purple .alt button fails contrast against white text. */
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
	background: var(--ink);
	color: var(--paper);
}
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce input.button.alt:hover {
	background: var(--paper);
	color: var(--ink);
}
.woocommerce button.button.alt.disabled,
.woocommerce button.button.alt:disabled,
.woocommerce button.button.alt.disabled:hover {
	background: var(--slate);
	color: var(--paper);
	border-color: var(--slate);
	opacity: 1;
	cursor: not-allowed;
}
.woocommerce-store-notice,
p.demo_store {
	position: static;
	background: var(--ink);
	color: var(--paper);
	font-size: var(--text-s);
	padding: var(--space-2) var(--gutter);
	margin: 0;
	box-shadow: none;
}
.woocommerce-store-notice a,
p.demo_store a {
	color: var(--paper);
}
/* Account forms: password toggle needs a 24px+ target (WCAG 2.5.8). */
.woocommerce-form .show-password-input,
.woocommerce form .show-password-input {
	min-width: 44px;
	min-height: 44px;
	top: 50%;
	transform: translateY(-50%);
}

/* Print: QR pages should print cleanly. */
@media print {
	.site-header,
	.site-footer,
	.buttons,
	.skip-link {
		display: none;
	}
	body {
		background: #fff;
		color: #000;
	}
}

/* Checkout gate: shown in the product summary while ordering is closed */
.checkout-gate-note {
	border: var(--border);
	padding: 0.9rem 1.1rem;
	font-weight: 700;
	margin: var(--gap) 0 0;
}

/* Made-to-order / EU fulfilment note in the product summary */
.bu-delivery-note {
	font-size: var(--text-s);
	color: var(--slate);
	margin: var(--space-3) 0 0;
}

/* US customs reassurance at checkout — shown only for US shipping country */
.bu-customs-note {
	border-left: 8px solid var(--signal);
	background: var(--paper);
	padding: var(--space-3);
	margin-bottom: var(--space-4);
	max-width: var(--measure);
}
.bu-customs-note[hidden] {
	display: none;
}

/* Consent banner: fixed bottom bar, hidden until JS shows it */
.consent-banner {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 999;
	background: var(--ink);
	color: var(--paper);
	border-top: 6px solid var(--signal);
	padding: 1rem 0;
}
.consent-banner[hidden] {
	display: none;
}
.consent-banner__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
}
.consent-banner__text {
	margin: 0;
	flex: 1 1 26rem;
}
.consent-banner__text a {
	color: var(--paper);
}
.consent-banner__actions {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
}
.consent-banner .button--primary {
	background: var(--signal);
	border-color: var(--signal);
	color: var(--ink);
}
.consent-banner .button--primary:hover {
	background: var(--paper);
	border-color: var(--paper);
	color: var(--ink);
}
.consent-banner .button--secondary {
	background: transparent;
	border-color: var(--paper);
	color: var(--paper);
}
.consent-banner .button--secondary:hover {
	background: var(--paper);
	color: var(--ink);
}

/* ---------- Order tracking: live shipment status ---------- */
.bu-tracking__status {
	font-size: 1.15rem;
}
.bu-tracking__late {
	font-weight: 600;
}
.bu-tracking__steps {
	display: flex;
	gap: var(--space-1);
	list-style: none;
	margin: var(--space-2) 0;
	padding: 0;
}
.bu-tracking__step {
	flex: 1 1 0;
	border: 2px solid var(--line);
	padding: var(--space-1) var(--space-2);
	text-align: center;
	font-weight: 600;
	color: var(--ink);
	background: var(--paper);
}
.bu-tracking__step--done {
	border-color: var(--ink);
	background: var(--ink);
	color: var(--paper);
}
.bu-tracking__step--now {
	border-color: var(--ink);
	background: var(--signal);
	color: var(--ink);
}
.bu-tracking__events {
	list-style: none;
	margin: var(--space-2) 0;
	padding: 0 0 0 var(--space-3);
	border-left: 6px solid var(--signal);
}
.bu-tracking__events li {
	margin-bottom: var(--space-1);
}
.bu-tracking__events time {
	font-weight: 600;
}
.bu-tracking__dest {
	font-size: 0.95rem;
}