/* ==========================================================================
   FLINTLOCK WORKS — Design System

   Warm ivory ground, near-black warm text, a single brass accent. Derived from
   the client's own mockups: the cream and the brass were sampled from those
   files, then the brass was darkened by roughly four percent lightness so it
   passes AA both as text on ivory and as a fill under white — the mockup's
   own value failed both (3.74:1 and 4.09:1).

   Depth comes from photography and hairlines, never from CSS gradients.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
	/* Ground and surfaces. 60 ivory / 30 ink+photography / 10 brass. */
	--ink: #f8f4f0;          /* page ground */
	--ink-raised: #ffffff;   /* cards, panels */
	--ink-sunk: #f2ece4;     /* alternating band */
	/* The ground the product photography is shot on. Image boxes use it so a
	   letterboxed frame reads as part of the photograph, not as a border. */
	--studio: #f8ece0;
	--leather: #4a2e1c;      /* photographic grounds only */
	--leather-deep: #2a1810;

	/* Text. Named for role, not colour, so the whole system can invert. */
	--bone: #1b1714;         /* headings — 16.3:1 on ivory */
	--bone-dim: #544b44;     /* body — 7.8:1 */
	--bone-faint: #6d635b;   /* captions, labels — 5.4:1 */

	/* The one accent. Reserved for primary actions, prices and active states. */
	--brass: #9b632b;        /* fills and large display prices — 4.55:1 on ivory, 4.98:1 under white */
	--brass-deep: #8c5e2a;   /* small text and links — 5.07:1, the safe margin */
	--brass-lit: #b07f45;    /* decorative only: rules, ornaments, icon strokes */
	--steel: #8e8a84;
	--danger: #a3341f;

	--hairline: rgba(155, 99, 43, 0.34);
	--hairline-soft: #e6ddd2;

	/* Type */
	--font-display: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
	--font-body: "Archivo", "Helvetica Neue", Arial, sans-serif;
	--font-tech: "Archivo", "Helvetica Neue", Arial, sans-serif;

	--step--1: 0.8125rem;  /* 13 */
	--step-0: 1rem;        /* 16 */
	--step-1: 1.125rem;    /* 18 */
	--step-2: 1.375rem;    /* 22 */
	--step-3: 1.75rem;     /* 28 */
	--step-4: clamp(2rem, 1.4rem + 2.4vw, 2.5rem);   /* 32–40 */
	--step-5: clamp(2.5rem, 1.6rem + 3.6vw, 3.5rem); /* 40–56 */
	--step-6: clamp(3rem, 1.6rem + 5.6vw, 4.75rem);  /* 48–76 */

	/* Space — 8px rhythm */
	--sp-1: 0.25rem;
	--sp-2: 0.5rem;
	--sp-3: 1rem;
	--sp-4: 1.5rem;
	--sp-5: 2rem;
	--sp-6: 3rem;
	--sp-7: 4rem;
	--sp-8: 6rem;
	--sp-9: 8rem;

	--radius: 2px;
	--shell: 76rem;
	--shell-narrow: 46rem;

	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

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

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

body {
	margin: 0;
	background: var(--ink);
	color: var(--bone);
	font-family: var(--font-body);
	font-size: var(--step-0);
	line-height: 1.65;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* A single very faint grain layer over the whole page. Photographic prints of
   metal on leather are never perfectly smooth; this stops large dark areas
   from banding and reads as material rather than as flat CSS. */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	/* Below overlays: at 9999 this sat on top of the PhotoSwipe lightbox. */
	z-index: 1;
	pointer-events: none;
	opacity: 0.02;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

a {
	color: inherit;
	text-decoration-color: var(--hairline);
	text-underline-offset: 0.25em;
}

a:hover {
	text-decoration-color: var(--brass-lit);
}

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

::selection {
	background: var(--brass);
	color: var(--ink);
}

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */

h1,
h2,
h3,
h4 {
	margin: 0;
	font-weight: 400;
	line-height: 1.1;
}

/* The display face carries the wordmark's personality: high stroke contrast,
   set in caps with wide tracking, used sparingly. */
.fw-display {
	font-family: var(--font-display);
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0.005em;
	line-height: 1.1;
}

.fw-display--xl {
	font-size: var(--step-6);
	letter-spacing: 0;
}

.fw-display--lg {
	font-size: var(--step-5);
}

.fw-display--md {
	font-size: var(--step-4);
}

.fw-eyebrow {
	margin: 0 0 var(--sp-3);
	font-family: var(--font-body);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--brass);
}

.fw-lede {
	font-size: var(--step-2);
	line-height: 1.55;
	color: var(--bone-dim);
	max-width: 34ch;
}

.fw-prose {
	max-width: 62ch;
	color: var(--bone-dim);
}

.fw-prose p {
	margin: 0 0 var(--sp-3);
}

.fw-prose strong {
	color: var(--bone);
	font-weight: 500;
}

/* Fixed-width figures keep spec tables and prices from shifting. */
.fw-num {
	font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */

.fw-shell {
	width: min(100% - 2.5rem, var(--shell));
	margin-inline: auto;
}

.fw-shell--narrow {
	width: min(100% - 2.5rem, var(--shell-narrow));
	margin-inline: auto;
}

.fw-section {
	padding-block: var(--sp-8);
	position: relative;
}

.fw-section--tight {
	padding-block: var(--sp-7);
}

.fw-section--leather {
	background: var(--ink-sunk);
}

.fw-section--sunk {
	background: var(--ink-sunk);
}

/* The lozenge rule is the client's own divider, lifted from their
   "How to order" artwork. Reused rather than reinvented. */
.fw-rule {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	color: var(--brass);
}

.fw-rule::before,
.fw-rule::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--hairline);
}

.fw-rule__mark {
	width: 6px;
	height: 6px;
	transform: rotate(45deg);
	background: var(--brass);
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */

.fw-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	min-height: 52px;
	padding: 0.9rem 2rem;
	border: 1px solid transparent;
	border-radius: var(--radius);
	font-family: var(--font-body);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.fw-btn--primary {
	background: var(--brass);
	color: #fff;
	border-color: var(--brass);
}

.fw-btn--primary:hover,
.fw-btn--primary:focus-visible {
	background: var(--brass-deep);
	border-color: var(--brass-deep);
}

.fw-btn--ghost {
	background: transparent;
	color: var(--brass-deep);
	border-color: var(--brass);
}

.fw-btn--ghost:hover,
.fw-btn--ghost:focus-visible {
	background: var(--brass);
	border-color: var(--brass);
	color: #fff;
}

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

.fw-btn[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */

.fw-header {
	position: sticky;
	isolation: isolate;
	top: 0;
	z-index: 100;
	background: rgba(248, 244, 240, 0.94);
	border-bottom: 1px solid var(--hairline-soft);
	backdrop-filter: saturate(140%) blur(6px);
}

/* The hairline with the lozenge is the client's own header device. */
.fw-header::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 1px;
	background: var(--hairline);
}

.fw-header__lozenge {
	position: absolute;
	left: 50%;
	bottom: -4px;
	width: 7px;
	height: 7px;
	transform: translateX(-50%) rotate(45deg);
	background: var(--ink);
	border: 1px solid var(--brass);
	z-index: 2;
}

.fw-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	min-height: 76px;
}

.fw-wordmark {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	text-decoration: none;
	color: var(--bone);
}

.fw-wordmark__name {
	font-family: var(--font-display);
	font-weight: 400;
	text-transform: uppercase;
	font-size: 1.4rem;
	letter-spacing: 0.3em;
	text-indent: 0.3em;
	text-transform: uppercase;
	line-height: 1;
}

.fw-wordmark__sub {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.5rem;
	letter-spacing: 0.44em;
	text-indent: 0.44em;
	text-transform: uppercase;
	color: var(--bone-dim);
}

.fw-wordmark__sub::before,
.fw-wordmark__sub::after {
	content: "";
	width: 18px;
	height: 1px;
	background: var(--bone-faint);
}

.fw-nav__list {
	display: flex;
	align-items: center;
	gap: var(--sp-5);
	list-style: none;
	margin: 0;
	padding: 0;
}

.fw-nav a {
	position: relative;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--bone-dim);
	padding-block: 0.6rem;
	transition: color 0.2s var(--ease);
}

.fw-nav a:hover,
.fw-nav a[aria-current="page"] {
	color: var(--bone);
}

/* Current page marked with a rule, not colour alone. */
.fw-nav a[aria-current="page"]::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--brass);
}

.fw-header__actions {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
}

.fw-cart-count {
	position: absolute;
	top: 2px;
	right: 0;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	display: grid;
	place-items: center;
	border-radius: 9px;
	background: var(--brass);
	color: #fff;
	font-size: 0.625rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.fw-icon-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	color: var(--bone-dim);
	text-decoration: none;
	transition: color 0.2s var(--ease);
}

.fw-icon-link:hover {
	color: var(--brass-lit);
}

.fw-burger {
	display: none;
	background: none;
	border: 0;
	color: var(--bone);
	min-width: 44px;
	min-height: 44px;
	cursor: pointer;
}

.fw-mobile-nav {
	border-top: 1px solid var(--hairline-soft);
	background: var(--ink-sunk);
}

.fw-mobile-nav ul {
	list-style: none;
	margin: 0;
	padding-block: var(--sp-3);
	display: grid;
}

.fw-mobile-nav a {
	display: block;
	padding: 0.9rem 0;
	min-height: 44px;
	font-size: 0.8125rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--bone-dim);
	border-bottom: 1px solid var(--hairline-soft);
}

.fw-mobile-nav li:last-child a {
	border-bottom: 0;
}

/* --------------------------------------------------------------------------
   7. Hero — split: copy on ivory, photograph bleeding off the right edge
   -------------------------------------------------------------------------- */

.fw-hero {
	position: relative;
	background: var(--ink);
	overflow: hidden;
}

.fw-hero__grid {
	width: min(100% - 2.5rem, var(--shell));
	margin-inline: auto;
	display: grid;
	gap: var(--sp-5);
	align-items: center;
	padding-block: var(--sp-7);
}

.fw-hero__inner {
	position: relative;
	z-index: 2;
	max-width: 34rem;
}

.fw-hero__title {
	margin: 0 0 var(--sp-4);
	/* Two lines, as in the mockup. Roughly 22 characters per line at this size,
	   so the measure and the type scale have to agree. */
	max-width: 22ch;
	font-size: clamp(2.25rem, 1.3rem + 2.6vw, 3.25rem);
	letter-spacing: 0.03em;
	line-height: 1.1;
	color: var(--bone);
}

.fw-hero__title em {
	font-style: normal;
	color: inherit;
}

.fw-hero__lede {
	margin: 0 0 var(--sp-5);
	max-width: 44ch;
	font-size: var(--step-1);
	color: var(--bone-dim);
}

.fw-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	align-items: center;
}

.fw-hero__meta {
	margin-top: var(--sp-5);
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2) var(--sp-5);
	font-size: var(--step--1);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bone-faint);
}

.fw-hero__meta span {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.fw-hero__meta span::before {
	content: "";
	width: 4px;
	height: 4px;
	transform: rotate(45deg);
	background: var(--brass);
}

.fw-hero__media {
	position: relative;
	min-height: 18rem;
}

.fw-hero__media img {
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: center 60%;
}

/* On a phone the photograph sits above the copy rather than behind it: text
   over a busy dashboard shot is unreadable at that width. */
@media (max-width: 899px) {
	/* The photograph sits directly above this block in the source order, so the
	   copy needs its own breathing room — without it the wordmark touches the
	   image edge. (gap and order did nothing here: below 900px .fw-hero is not
	   a grid and .fw-hero__grid has a single child.) */
	.fw-hero__grid {
		padding-block: var(--sp-5) var(--sp-7);
	}

	.fw-hero__media {
		margin-inline: calc(50% - 50vw);
		width: 100vw;
	}

	.fw-hero__media img {
		aspect-ratio: 5 / 4;
	}

	.fw-hero__veil {
		display: none;
	}
}

@media (min-width: 900px) {
	.fw-hero {
		display: grid;
		grid-template-columns: 1fr;
	}

	.fw-hero__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.05fr);
		min-height: clamp(28rem, 58svh, 36rem);
		padding-block: var(--sp-8);
	}

	.fw-hero__inner {
		max-width: 40rem;
	}

	/* The photograph runs from the middle of the shell to the right edge of the
	   viewport, so it reads as a window rather than a boxed image. */
	.fw-hero__media {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 52%;
		right: calc(50% - 50vw);
		min-height: 0;
	}

	.fw-hero__media img {
		aspect-ratio: auto;
		object-position: 62% 58%;
	}

	/* Feathers the photograph into the ivory so there is no hard seam. */
	.fw-hero__veil {
		position: absolute;
		inset: 0;
		z-index: 1;
		pointer-events: none;
		background: linear-gradient(to right, var(--ink) 0%, rgba(248, 244, 240, 0.35) 4%, rgba(248, 244, 240, 0) 11%);
	}
}

/* --------------------------------------------------------------------------
   7b. Trust bar — four facts, directly under the hero
   -------------------------------------------------------------------------- */

.fw-trustbar {
	border-block: 1px solid var(--hairline-soft);
	background: var(--ink);
}

.fw-trustbar__grid {
	width: min(100% - 2.5rem, var(--shell));
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fw-trustbar__item {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-4) var(--sp-3);
	color: var(--bone-dim);
	font-size: var(--step--1);
	line-height: 1.35;
}

.fw-trustbar__item svg {
	flex: none;
	width: 30px;
	height: 30px;
	color: var(--brass);
}

.fw-trustbar__item strong {
	display: block;
	color: var(--bone);
	font-weight: 500;
}

@media (min-width: 760px) {
	.fw-trustbar__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.fw-trustbar__item + .fw-trustbar__item {
		border-left: 1px solid var(--hairline-soft);
	}
}

/* --------------------------------------------------------------------------
   8. Statement — the negation block
   -------------------------------------------------------------------------- */

.fw-statement {
	text-align: center;
}

.fw-statement__text {
	margin: var(--sp-5) auto 0;
	max-width: 24ch;
	font-family: var(--font-display);
	font-weight: 300;
	font-size: var(--step-5);
	line-height: 1.18;
	letter-spacing: 0.01em;
}

.fw-statement__text b {
	font-weight: 400;
	color: var(--brass-lit);
}

.fw-statement__note {
	margin: var(--sp-4) auto 0;
	max-width: 48ch;
	color: var(--bone-dim);
}

/* --------------------------------------------------------------------------
   9. Product showcase
   -------------------------------------------------------------------------- */

.fw-showcase {
	display: grid;
	gap: var(--sp-7);
	grid-template-columns: 1fr;
	align-items: center;
}

.fw-showcase__media {
	position: relative;
	background: var(--ink-sunk);
	border: 1px solid var(--hairline-soft);
}

.fw-showcase__media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: contain;
	background: var(--studio);
}

.fw-showcase__price {
	display: flex;
	align-items: baseline;
	gap: var(--sp-2);
	margin: var(--sp-4) 0 var(--sp-2);
}

.fw-showcase__price b {
	font-family: var(--font-display);
	font-size: var(--step-4);
	font-weight: 400;
	letter-spacing: 0.02em;
}

.fw-showcase__price small {
	font-size: var(--step--1);
	color: var(--bone-faint);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.fw-bullets {
	list-style: none;
	margin: var(--sp-4) 0 var(--sp-5);
	padding: 0;
	display: grid;
	gap: var(--sp-2);
}

.fw-bullets li {
	position: relative;
	padding-left: 1.6rem;
	color: var(--bone-dim);
}

.fw-bullets li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 5px;
	height: 5px;
	transform: rotate(45deg);
	background: var(--brass);
}

/* Finish chooser — real photographs of the finishes, not colour circles. */
.fw-finishes {
	display: flex;
	gap: var(--sp-3);
	margin-block: var(--sp-4);
	padding: 0;
	list-style: none;
}

.fw-finish {
	flex: 1;
	text-align: center;
}

.fw-finish__swatch {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	border: 1px solid var(--hairline-soft);
	object-fit: cover;
	border-radius: var(--radius);
}

.fw-finish__name {
	display: block;
	margin-top: var(--sp-2);
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bone-dim);
}

/* --------------------------------------------------------------------------
   9b. Product cards — photograph left, facts right, as in the client's mockup
   -------------------------------------------------------------------------- */

.fw-partgrid {
	display: grid;
	gap: var(--sp-4);
	grid-template-columns: 1fr;
	margin-top: var(--sp-6);
}

.fw-part {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	background: var(--ink-raised);
	border: 1px solid var(--hairline-soft);
	border-radius: var(--radius);
	overflow: hidden;
	transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.fw-part:hover,
.fw-part:focus-within {
	border-color: var(--brass-lit);
	transform: translateY(-2px);
}

.fw-part__media {
	display: block;
	background: var(--studio);
}

/* `contain`, not `cover`. The photographs are shot on one studio ground, so a
   letterboxed frame is invisible against it — and a part that does not fit the
   box is shown smaller rather than cut in half. The old low anchor is gone with
   the portrait photography it was calibrated for. */
.fw-part__media img {
	width: 100%;
	height: 100%;
	min-height: 11rem;
	object-fit: contain;
	object-position: center;
}

.fw-part__body {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	padding: var(--sp-4);
}

.fw-part__title {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: var(--step-2);
	letter-spacing: 0.01em;
	line-height: 1.15;
	text-transform: none;
}

.fw-part__title a {
	color: var(--bone);
	text-decoration: none;
}

.fw-part__blurb {
	margin: 0;
	color: var(--bone-dim);
	font-size: var(--step--1);
	line-height: 1.55;
	max-width: 40ch;
}

/* The fitment line is the first thing this audience looks for, so it sits
   above the price rather than in a tab. */
.fw-part__fitment {
	margin: var(--sp-1) 0 0;
	padding-top: var(--sp-2);
	border-top: 1px solid var(--hairline-soft);
	color: var(--bone-faint);
	font-size: 0.75rem;
	line-height: 1.45;
}

.fw-part__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--sp-2);
	margin: var(--sp-1) 0 0;
	font-family: var(--font-display);
	font-size: var(--step-2);
	color: var(--brass);
	font-variant-numeric: tabular-nums;
}

.fw-part__price small {
	font-family: var(--font-body);
	font-size: 0.75rem;
	color: var(--bone-faint);
}

/* WooCommerce wraps a sale price in <ins>, and nothing in the stack resets the
   user-agent underline — next to the struck-through old price that reads as a
   rendering fault. The old price steps back instead of competing: it is an
   anchor, not the number we want read first. */
.fw-part__price ins,
.fw-buybar__price ins,
.single-product div.product p.price ins,
.woocommerce ul.products li.product .price ins {
	text-decoration: none;
	background: none;
}

.fw-part__price del,
.fw-buybar__price del,
.single-product div.product p.price del,
.woocommerce ul.products li.product .price del {
	font-size: 0.8em;
	color: var(--bone-faint);
	opacity: 1;
}

.fw-part__cta {
	margin-top: auto;
	align-self: flex-start;
	min-height: 44px;
	padding: 0.6rem 1.3rem;
	font-size: 0.6875rem;
}

.fw-part__link {
	position: absolute;
	inset: 0;
}

.fw-part:focus-within .fw-part__cta {
	border-color: var(--brass);
	color: var(--brass-deep);
}

@media (max-width: 559px) {
	.fw-part {
		grid-template-columns: 1fr;
	}

	/* Stacked, the photograph gets the card's full width — a landscape box on a
	   product photograph needs room to be read at all. 4:3 follows the shape the
	   photographs are actually taken in; `contain` keeps whatever does not fit
	   whole rather than trimming it. */
	.fw-part__media img {
		aspect-ratio: 4 / 3;
		height: auto;
		min-height: 0;
	}
}

@media (min-width: 900px) {
	.fw-partgrid {
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
		gap: var(--sp-4);
	}

	/* The image used to sit in a 155px column beside the text — a slot no
	   landscape photograph survives. Stacked, the photograph gets the card's
	   full width and the part is legible at a glance. */
	.fw-part {
		grid-template-columns: minmax(0, 1fr);
	}

	/* height:auto is what lets the ratio decide: with the inherited height:100%
	   a portrait photograph made its card taller than the two beside it. */
	.fw-part__media img {
		aspect-ratio: 4 / 3;
		height: auto;
		min-height: 0;
	}
}

/* --------------------------------------------------------------------------
   9b2. Testimonials
   -------------------------------------------------------------------------- */

.fw-quotes {
	display: grid;
	gap: var(--sp-4);
	grid-template-columns: 1fr;
	margin-top: var(--sp-6);
}

.fw-quote {
	padding: var(--sp-5);
	background: var(--ink-raised);
	border: 1px solid var(--hairline-soft);
	border-radius: var(--radius);
	text-align: center;
}

.fw-quote__stars {
	display: flex;
	justify-content: center;
	gap: 3px;
	margin-bottom: var(--sp-3);
	color: var(--brass);
}

.fw-quote__stars svg {
	width: 15px;
	height: 15px;
}

.fw-quote__text {
	margin: 0 0 var(--sp-4);
	color: var(--bone-dim);
	font-size: var(--step--1);
	line-height: 1.6;
}

.fw-quote__who {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--bone);
}

.fw-quote__who span {
	font-weight: 400;
	color: var(--bone-faint);
}

/* Shown until real, attributable reviews exist. Deliberately looks unfinished
   rather than convincing — an invented review is unlawful under the EU
   Omnibus rules and this audience checks. */
.fw-quotes__pending {
	grid-column: 1 / -1;
	padding: var(--sp-5);
	border: 1px dashed var(--hairline);
	border-radius: var(--radius);
	text-align: center;
	color: var(--bone-faint);
	font-size: var(--step--1);
}

@media (min-width: 760px) {
	.fw-quotes {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* --------------------------------------------------------------------------
   9b3. Social wall
   -------------------------------------------------------------------------- */

.fw-social {
	display: grid;
	gap: var(--sp-4);
	grid-template-columns: 1fr;
	margin-top: var(--sp-6);
}

.fw-social__card {
	background: var(--ink-raised);
	border: 1px solid var(--hairline-soft);
	border-radius: var(--radius);
	overflow: hidden;
}

.fw-social__head {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	padding: var(--sp-3);
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--bone);
}

.fw-social__avatar {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--ink-sunk);
}

.fw-social__card img.fw-social__shot {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.fw-social__caption {
	padding: var(--sp-3);
	font-size: var(--step--1);
	color: var(--bone-dim);
	line-height: 1.5;
}

.fw-social__caption a {
	color: var(--brass-deep);
	text-decoration: none;
}

@media (min-width: 760px) {
	.fw-social {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* --------------------------------------------------------------------------
   9c. About — brand-level, homepage only
   -------------------------------------------------------------------------- */

.fw-about {
	display: grid;
	gap: var(--sp-6);
	align-items: center;
}

.fw-about__media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: contain;
	object-position: center;
	background: var(--studio);
	border: 1px solid var(--hairline-soft);
}

.fw-about__text {
	margin: var(--sp-4) 0 0;
	max-width: 58ch;
	color: var(--bone-dim);
	font-size: var(--step-1);
	line-height: 1.65;
}

.fw-about__text p {
	margin: 0 0 var(--sp-3);
}

.fw-about__body .fw-btn {
	margin-top: var(--sp-4);
}

.fw-about--noimage .fw-about__body {
	display: grid;
	gap: var(--sp-4);
}

@media (min-width: 900px) {
	.fw-about {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
		gap: var(--sp-8);
	}

	.fw-about--noimage {
		grid-template-columns: 1fr;
	}

	/* Without a photograph the prose would leave half the row empty, so the
	   text and the three working principles share the width instead. */
	.fw-about--noimage .fw-about__body {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
		gap: var(--sp-4) var(--sp-8);
		align-items: start;
	}

	.fw-about--noimage .fw-eyebrow,
	.fw-about--noimage .fw-about__body > h2 {
		grid-column: 1 / -1;
	}

	.fw-about--noimage .fw-about__text {
		margin-top: 0;
		grid-column: 1;
	}

	.fw-about--noimage .fw-bullets {
		grid-column: 2;
		margin: 0;
		padding-top: var(--sp-2);
	}

	.fw-about--noimage .fw-btn {
		grid-column: 1;
		justify-self: start;
	}
}

/* --------------------------------------------------------------------------
   10. Process — a real sequence, so numbers carry meaning
   -------------------------------------------------------------------------- */

.fw-steps {
	counter-reset: step;
	display: grid;
	gap: var(--sp-6);
	margin-top: var(--sp-6);
	padding-left: 0; /* it is an <ol>: the user-agent indent would offset the whole block */
	list-style: none;
}

.fw-step {
	display: grid;
	grid-template-columns: 3.5rem 1fr;
	gap: var(--sp-4);
	align-items: start;
	padding-top: var(--sp-4);
	border-top: 1px solid var(--hairline-soft);
}

/* On a phone the two-column step leaves 140px of empty gutter and squeezes the
   text against the right edge. Stacked, the copy uses the full measure and the
   block reads centred — the same shape the three columns take on a desktop. */
@media (max-width: 699px) {
	.fw-step {
		grid-template-columns: 1fr;
		gap: var(--sp-2);
	}
}

.fw-step:first-child {
	border-top: 0;
	padding-top: 0;
}

.fw-step__num {
	counter-increment: step;
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: var(--brass);
	color: #fff;
	font-family: var(--font-body);
	font-size: 0.9375rem;
	font-weight: 600;
}

.fw-step__num::before {
	content: counter(step);
}

.fw-step h3 {
	font-size: var(--step-2);
	letter-spacing: 0.005em;
	margin-bottom: var(--sp-2);
	font-family: var(--font-display);
	font-weight: 500;
}

.fw-step p {
	margin: 0;
	color: var(--bone-dim);
	max-width: 46ch;
}

/* --------------------------------------------------------------------------
   11. Fitment + spec tables
   -------------------------------------------------------------------------- */

.fw-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: var(--sp-5);
	font-size: var(--step-0);
}

.fw-table th,
.fw-table td {
	text-align: left;
	padding: 0.9rem 1rem;
	border-bottom: 1px solid var(--hairline-soft);
	vertical-align: top;
}

.fw-table th {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--bone-faint);
}

.fw-table td:first-child {
	color: var(--bone);
	font-weight: 500;
}

.fw-table td {
	color: var(--bone-dim);
}

.fw-scroll-x {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* Status is never carried by colour alone — each state also has a glyph. */
.fw-status {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--step--1);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Anchor target for the sticky bar. The offset keeps the sticky header from
   covering what the tap was aiming at. */
.fw-anchor {
	display: block;
	scroll-margin-top: 6rem;
}

/* The caveat that qualifies a fitment, set under it rather than in a column of
   its own — it is a footnote to the answer, not a second answer. */
.fw-fitment-note {
	display: block;
	margin-top: var(--sp-1);
	font-size: var(--step--1);
	line-height: 1.4;
	color: var(--bone-faint);
	text-transform: none;
	letter-spacing: 0;
}

.fw-status--yes {
	color: var(--brass-deep);
}

.fw-status--note {
	color: var(--bone-dim);
}

.fw-status--no {
	color: var(--danger);
}

.fw-status__glyph {
	font-family: var(--font-body);
	font-weight: 700;
}

/* --------------------------------------------------------------------------
   12. Gallery
   -------------------------------------------------------------------------- */

.fw-gallery {
	display: grid;
	gap: var(--sp-3);
	grid-template-columns: repeat(2, 1fr);
	margin-top: var(--sp-6);
}

.fw-gallery figure {
	margin: 0;
	position: relative;
}

.fw-gallery img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border: 1px solid var(--hairline-soft);
}

.fw-gallery figcaption {
	margin-top: var(--sp-2);
	font-size: var(--step--1);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bone-faint);
}

/* --------------------------------------------------------------------------
   13. FAQ
   -------------------------------------------------------------------------- */

.fw-faq {
	margin-top: var(--sp-6);
	border-top: 1px solid var(--hairline-soft);
}

.fw-faq details {
	border-bottom: 1px solid var(--hairline-soft);
}

.fw-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	padding: 1.35rem 0;
	cursor: pointer;
	list-style: none;
	font-size: var(--step-1);
	color: var(--bone);
}

.fw-faq summary::-webkit-details-marker {
	display: none;
}

.fw-faq summary::after {
	content: "+";
	font-family: var(--font-display);
	font-size: 1.5rem;
	line-height: 1;
	color: var(--brass);
	transition: transform 0.2s var(--ease);
}

.fw-faq details[open] summary::after {
	transform: rotate(45deg);
}

.fw-faq__answer {
	padding-bottom: 1.35rem;
	color: var(--bone-dim);
	max-width: 62ch;
}

/* --------------------------------------------------------------------------
   14. CTA band
   -------------------------------------------------------------------------- */

.fw-cta {
	text-align: center;
	padding-block: var(--sp-8);
	background: var(--ink-sunk);
	border-top: 1px solid var(--hairline-soft);
	border-bottom: 1px solid var(--hairline-soft);
}

.fw-cta h2 {
	margin-bottom: var(--sp-4);
}

.fw-cta p {
	margin: 0 auto var(--sp-5);
	max-width: 46ch;
	color: var(--bone-dim);
}

/* --------------------------------------------------------------------------
   15. Engraving form + live preview (the signature element)
   -------------------------------------------------------------------------- */

.fw-engraving {
	margin-block: var(--sp-5);
	padding: var(--sp-5);
	background: var(--ink-raised);
	border: 1px solid var(--hairline-soft);
	border-radius: var(--radius);
}

.fw-engraving__title {
	font-family: var(--font-display);
	font-size: var(--step-3);
	letter-spacing: 0.005em;
	margin-bottom: var(--sp-2);
}

.fw-engraving__intro {
	margin: 0 0 var(--sp-5);
	font-size: var(--step--1);
	color: var(--bone-dim);
	max-width: 52ch;
}

.fw-engraving__fields {
	display: grid;
	gap: var(--sp-3);
}

.fw-field {
	display: grid;
	grid-template-columns: 7rem 1fr;
	align-items: center;
	gap: var(--sp-3);
	margin: 0;
}

.fw-field__label {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--bone-dim);
}

.fw-field__control {
	position: relative;
	display: block;
}

.fw-field__input {
	width: 100%;
	min-height: 48px;
	padding: 0.7rem 3.25rem 0.7rem 0.9rem;
	background: var(--ink);
	border: 1px solid var(--hairline-soft);
	border-radius: var(--radius);
	color: var(--bone);
	font-family: var(--font-tech);
	font-size: 1rem; /* 16px keeps iOS from zooming the viewport on focus */
	letter-spacing: 0.06em;
	text-transform: uppercase;
	transition: border-color 0.2s var(--ease);
}

.fw-field__input::placeholder {
	color: var(--bone-faint);
	text-transform: none;
	letter-spacing: 0.02em;
	opacity: 1;
}

.fw-field__input:hover {
	border-color: var(--hairline);
}

.fw-field__input:focus {
	border-color: var(--brass);
	outline: none;
	box-shadow: 0 0 0 1px var(--brass);
}

.fw-field__count {
	position: absolute;
	right: 0.9rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
	color: var(--bone-faint);
	pointer-events: none;
}

.fw-field__count.is-tight {
	color: var(--brass-deep);
}

.fw-engraving__confirm {
	margin: var(--sp-5) 0 0;
	padding-top: var(--sp-4);
	border-top: 1px solid var(--hairline-soft);
}

.fw-checkbox {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--sp-3);
	align-items: start;
	cursor: pointer;
	font-size: var(--step--1);
	color: var(--bone-dim);
	line-height: 1.5;
}

.fw-checkbox__input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.fw-checkbox__box {
	width: 22px;
	height: 22px;
	margin-top: 1px;
	border: 1px solid var(--bone-faint);
	border-radius: var(--radius);
	display: grid;
	place-items: center;
	transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.fw-checkbox__box::after {
	content: "";
	width: 10px;
	height: 6px;
	border-left: 2px solid var(--ink);
	border-bottom: 2px solid var(--ink);
	transform: rotate(-45deg) scale(0);
	transition: transform 0.15s var(--ease);
}

.fw-checkbox__input:checked + .fw-checkbox__box {
	background: var(--brass);
	border-color: var(--brass);
}

.fw-checkbox__input:checked + .fw-checkbox__box::after {
	transform: rotate(-45deg) scale(1);
}

.fw-checkbox__input:focus-visible + .fw-checkbox__box {
	outline: 2px solid var(--brass-lit);
	outline-offset: 3px;
}

/* Preview overlay — plain absolutely positioned text on the product photo.
   Percentages come from ACF, so the same code fits any future panel. */
.fw-preview-stage {
	position: relative;
	overflow: hidden;
	container-type: inline-size;
	background: var(--ink-sunk);
	border: 1px solid var(--hairline-soft);
	border-radius: var(--radius);
	--fw-stage-unit: 1cqw;
}

/* Position and scale come from the product's crop settings, printed inline. */
.fw-preview-stage > img {
	position: absolute;
	max-width: none;
}

.fw-stage__caption {
	margin: var(--sp-2) 0 var(--sp-5);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--sp-1) var(--sp-3);
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bone-faint);
}

.fw-preview-layer {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* Sized in container-query units so the marks scale with the photograph
   rather than with the viewport. The proportions are deliberately close to a
   real engraving: roughly 2.5 mm of text across a 30 mm switch pitch. */
.fw-preview-mark {
	position: absolute;
	transform: translate(-50%, -100%);
	font-family: var(--font-tech);
	font-weight: 500;
	font-stretch: 82%;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: clip;
	color: rgba(236, 229, 213, 0.94);
	text-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
	line-height: 1;
}

/* Matches the real panels: the engraving reads light on black anodize and on
   brass, and dark on brushed raw aluminium. */
.fw-preview-layer[data-finish="raw-aluminum"] .fw-preview-mark {
	color: rgba(24, 18, 10, 0.86);
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.18);
}

.fw-preview-layer.is-debug .fw-preview-mark {
	outline: 1px dashed rgba(217, 176, 114, 0.8);
	min-height: 1em;
}

/* --------------------------------------------------------------------------
   16. Product page
   -------------------------------------------------------------------------- */

.fw-pdp {
	display: grid;
	gap: var(--sp-6);
	grid-template-columns: 1fr;
	padding-block: var(--sp-6);
}

.fw-pdp__title {
	margin-bottom: var(--sp-3);
}

.fw-pdp__price {
	display: flex;
	align-items: baseline;
	gap: var(--sp-3);
	margin-bottom: var(--sp-4);
	padding-bottom: var(--sp-4);
	border-bottom: 1px solid var(--hairline-soft);
}

.fw-pdp__price b {
	font-family: var(--font-display);
	font-size: var(--step-4);
	font-weight: 400;
}

/* Lead time is the single most-asked question on made-to-order goods, so it
   sits with the price rather than buried in a tab. */
.fw-leadtime {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	font-size: var(--step--1);
	color: var(--bone-dim);
	letter-spacing: 0.06em;
}

.fw-leadtime::before {
	content: "";
	width: 5px;
	height: 5px;
	transform: rotate(45deg);
	background: var(--brass);
	flex: none;
}

.fw-trustrow {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2) var(--sp-4);
	margin-top: var(--sp-3);
	font-size: var(--step--1);
	color: var(--bone-faint);
	letter-spacing: 0.06em;
}

.fw-swatches {
	display: flex;
	gap: var(--sp-2);
	margin-block: var(--sp-3);
	padding: 0;
	list-style: none;
}

.fw-swatch {
	position: relative;
	display: grid;
	place-items: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0.55rem 0.9rem;
	border: 1px solid var(--hairline-soft);
	border-radius: var(--radius);
	background: var(--ink);
	color: var(--bone-dim);
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
}

.fw-swatch[aria-pressed="true"] {
	border-color: var(--brass);
	color: var(--bone);
}

/* WooCommerce's own single-product markup, mapped onto the same grid and
   tokens as .fw-pdp above. Done with selectors rather than template overrides
   so a WooCommerce update can never orphan a stale copy. */
.single-product div.product {
	display: grid;
	gap: var(--sp-6);
	grid-template-columns: 1fr;
	padding-block: var(--sp-6);
}

/* The product photography is tall portrait with the part lit in the lower
   third. Shown at its natural ratio the gallery is a column of black, and on a
   phone it is taller than the screen — which would push the name and the price
   below the fold. Crop to the part instead. */
.single-product .woocommerce-product-gallery__image img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center 82%;
}

@media (max-width: 979px) {
	.single-product .woocommerce-product-gallery__image img {
		aspect-ratio: 4 / 3;
		object-position: center 78%;
	}
}

/* WooCommerce's own stylesheet floats the gallery and summary at 48% each,
   which inside a grid column leaves both at roughly a quarter of the page.
   The grid owns the columns here, so the children take the full track. */
.single-product div.product .woocommerce-product-gallery,
.single-product div.product .summary,
.single-product div.product div.images,
.single-product div.product div.summary {
	width: 100%;
	max-width: none;
	float: none;
	margin: 0;
	clear: none;
}

.single-product div.product .product_title {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: var(--step-5);
	letter-spacing: 0.005em;
	line-height: 1.1;
	margin-bottom: var(--sp-3);
}

.single-product div.product p.price,
.single-product div.product span.price {
	display: block;
	font-family: var(--font-display);
	font-size: var(--step-4);
	color: var(--bone);
	font-variant-numeric: tabular-nums;
	margin: 0 0 var(--sp-3);
	padding-bottom: var(--sp-4);
	border-bottom: 1px solid var(--hairline-soft);
}

.single-product div.product .woocommerce-product-details__short-description {
	max-width: 62ch;
	color: var(--bone-dim);
}

/* `.alt` is what WooCommerce puts on the variable-product button; without it
   named here its own purple wins on equal specificity. Shop-loop buttons are
   covered too, otherwise they render in WooCommerce's default grey. */
.woocommerce div.product .single_add_to_cart_button,
.woocommerce div.product button.single_add_to_cart_button.alt,
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product a.button.alt,
.woocommerce ul.products li.product a.add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0.9rem 2rem;
	background: var(--brass);
	color: var(--ink);
	border: 1px solid var(--brass);
	border-radius: var(--radius);
	font-family: var(--font-body);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s var(--ease);
}

.woocommerce div.product .single_add_to_cart_button:hover,
.woocommerce div.product button.single_add_to_cart_button.alt:hover,
.woocommerce ul.products li.product a.button:hover,
.woocommerce ul.products li.product a.button.alt:hover {
	background: var(--brass-lit);
	border-color: var(--brass-lit);
	color: var(--ink);
}

.woocommerce ul.products li.product a.button {
	min-height: 44px;
	padding: 0.7rem 1.4rem;
	font-size: 0.75rem;
}

.single-product div.product .single_add_to_cart_button {
	width: 100%;
	min-height: 52px;
	margin-top: var(--sp-4);
	background: var(--brass);
	color: var(--ink);
	border: 0;
	border-radius: var(--radius);
	font-family: var(--font-body);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.2s var(--ease);
}

.single-product div.product .single_add_to_cart_button:hover {
	background: var(--brass-lit);
}

.single-product div.product .woocommerce-tabs,
.single-product div.product .related,
.single-product div.product .upsells,
.single-product div.product .fw-product-band {
	grid-column: 1 / -1;

	/* A grid item defaults to min-width: auto, so the fitment table's intrinsic
	   width pushed the whole track — and with it the page — past the viewport
	   on a phone. Capping it here lets .fw-scroll-x do its job: the table
	   scrolls inside its own box while the page stays put. */
	min-width: 0;
}

/* Product-level bands (how it works, FAQ) sit inside the product grid, so they
   span both tracks and pad themselves rather than breaking out of the page. */
.fw-product-band {
	margin-inline: calc(var(--sp-5) * -1);
	padding-inline: var(--sp-5);
}

.fw-product-band__inner--narrow {
	max-width: 46rem;
	margin-inline: auto;
}

.woocommerce-tabs ul.tabs {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-5);
	margin: 0 0 var(--sp-5);
	padding: 0 0 var(--sp-3);
	border-bottom: 1px solid var(--hairline-soft);
}

.woocommerce-tabs ul.tabs a {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--bone-faint);
}

.woocommerce-tabs ul.tabs li.active a {
	color: var(--brass-lit);
}

@media (min-width: 980px) {
	.single-product div.product {
		grid-template-columns: 1.1fr 1fr;
		gap: var(--sp-8);
		align-items: start;
	}

	.single-product div.product .woocommerce-product-gallery {
		position: sticky;
		top: 104px;
	}
}

/* --------------------------------------------------------------------------
   16b. Cart, checkout and account

   These are shortcode pages rendered through page.php, wrapped in .fw-shopflow.
   WooCommerce ships its own floats and percentage widths for all of this; the
   rules below take the layout back and rebuild it on the same grid and tokens
   as the rest of the site.
   -------------------------------------------------------------------------- */

.fw-shopflow .woocommerce {
	max-width: none;
}

/* ---- shared form controls ---- */

.fw-shopflow .woocommerce form .form-row input.input-text,
.fw-shopflow .woocommerce form .form-row textarea,
.fw-shopflow .woocommerce form .form-row select,
.fw-shopflow .woocommerce input[type="text"],
.fw-shopflow .woocommerce input[type="email"],
.fw-shopflow .woocommerce input[type="tel"],
.fw-shopflow .woocommerce input[type="password"],
.fw-shopflow .woocommerce input[type="number"],
.fw-shopflow .woocommerce textarea,
.fw-shopflow .woocommerce select,
.woocommerce .select2-container .select2-selection--single,
.single-product .variations select {
	width: 100%;
	min-height: 50px;
	padding: 0.75rem 0.9rem;
	background: var(--ink);
	border: 1px solid var(--hairline-soft);
	border-radius: var(--radius);
	color: var(--bone);
	font-family: var(--font-body);
	font-size: 1rem; /* 16px stops iOS zooming the viewport on focus */
	line-height: 1.4;
	appearance: none;
	-webkit-appearance: none;
}

.fw-shopflow .woocommerce textarea {
	min-height: 7rem;
	resize: vertical;
}

/* A native select on a dark page renders its option list on a white popup, so
   light text would be invisible. Both surfaces are set explicitly. */
.fw-shopflow .woocommerce select,
.single-product .variations select {
	background-image: linear-gradient(45deg, transparent 50%, var(--brass) 50%), linear-gradient(135deg, var(--brass) 50%, transparent 50%);
	background-position: right 1.15rem center, right 0.85rem center;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: 2.75rem;
	cursor: pointer;
}

.fw-shopflow .woocommerce select option,
.single-product .variations select option {
	background: #ffffff;
	color: #1b1714;
}

.fw-shopflow .woocommerce input::placeholder,
.fw-shopflow .woocommerce textarea::placeholder {
	color: var(--bone-faint);
	opacity: 1;
}

.fw-shopflow .woocommerce input:focus,
.fw-shopflow .woocommerce textarea:focus,
.fw-shopflow .woocommerce select:focus,
.single-product .variations select:focus {
	border-color: var(--brass);
	outline: none;
	box-shadow: 0 0 0 1px var(--brass);
}

.fw-shopflow .woocommerce label,
.woocommerce form .form-row label {
	display: block;
	margin-bottom: var(--sp-2);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--bone-dim);
	white-space: normal;
}

.woocommerce form .form-row .required {
	color: var(--brass);
	text-decoration: none;
}

/* ---- buttons: exactly one brass action per screen ---- */

.fw-shopflow .woocommerce .button,
.fw-shopflow .woocommerce a.button,
.fw-shopflow .woocommerce button.button,
.fw-shopflow .woocommerce input.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 0.85rem 1.6rem;
	background: transparent;
	color: var(--bone);
	border: 1px solid var(--hairline-soft);
	border-radius: var(--radius);
	font-family: var(--font-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.fw-shopflow .woocommerce .button:hover,
.fw-shopflow .woocommerce a.button:hover,
.fw-shopflow .woocommerce button.button:hover {
	border-color: var(--brass);
	color: var(--brass-lit);
}

.fw-shopflow .woocommerce a.checkout-button,
.fw-shopflow .woocommerce button.button.alt,
.fw-shopflow .woocommerce input.button.alt,
.fw-shopflow .woocommerce #place_order {
	width: 100%;
	background: var(--brass);
	color: var(--ink);
	border-color: var(--brass);
	font-size: 0.8125rem;
	letter-spacing: 0.16em;
}

.fw-shopflow .woocommerce a.checkout-button:hover,
.fw-shopflow .woocommerce button.button.alt:hover,
.fw-shopflow .woocommerce input.button.alt:hover,
.fw-shopflow .woocommerce #place_order:hover {
	background: var(--brass-lit);
	border-color: var(--brass-lit);
	color: var(--ink);
}

.fw-shopflow .woocommerce .button:disabled,
.fw-shopflow .woocommerce .button[disabled] {
	opacity: 0.35;
	cursor: not-allowed;
}

/* ---- cart ----

   The line item is rendered as a card rather than a table row at every width.
   A six-column table cannot hold a product name, a thumbnail, a quantity
   stepper and seven engraving lines without the engraving — the thing the
   customer is actually checking — turning into wrapped noise.
   -------------------------------------------------------------------------- */

.woocommerce-cart .fw-shopflow > .woocommerce {
	display: grid;
	gap: var(--sp-6);
	align-items: start;
}

.woocommerce-cart .fw-shopflow .woocommerce-cart-form,
.woocommerce-cart .fw-shopflow .cart-collaterals {
	min-width: 0;
}

.woocommerce-cart .fw-shopflow form.woocommerce-cart-form table.shop_table,
.woocommerce-cart .fw-shopflow form.woocommerce-cart-form table.shop_table tbody {
	display: block;
	width: 100%;
	border: 0;
	margin: 0;
}

.woocommerce-cart .fw-shopflow form.woocommerce-cart-form table.shop_table thead {
	display: none;
}

.woocommerce-cart .fw-shopflow form.woocommerce-cart-form table.shop_table tr.woocommerce-cart-form__cart-item {
	display: grid;
	grid-template-columns: 104px minmax(0, 1fr) auto;
	grid-template-areas:
		"thumb name  remove"
		"thumb meta  meta"
		"thumb qty   total";
	gap: var(--sp-2) var(--sp-4);
	padding: var(--sp-5) 0;
	border-bottom: 1px solid var(--hairline-soft);
}

.woocommerce-cart .fw-shopflow form.woocommerce-cart-form table.shop_table tr.woocommerce-cart-form__cart-item:first-child {
	padding-top: 0;
}

.woocommerce-cart .fw-shopflow form.woocommerce-cart-form table.shop_table td {
	display: block;
	padding: 0;
	border: 0;
	color: var(--bone-dim);
	vertical-align: top;
}

.woocommerce-cart .fw-shopflow td.product-thumbnail {
	grid-area: thumb;
}

.woocommerce-cart .fw-shopflow td.product-thumbnail img {
	width: 104px;
	height: 104px;
	object-fit: cover;
	border: 1px solid var(--hairline-soft);
	border-radius: var(--radius);
}

.woocommerce-cart .fw-shopflow td.product-name {
	grid-area: name;
}

.woocommerce-cart .fw-shopflow td.product-name > a {
	display: inline-block;
	color: var(--bone);
	font-size: var(--step-1);
	line-height: 1.35;
	text-decoration: none;
}

/* The engraving list is moved into its own full-width row so the labels never
   compete with the quantity and price for horizontal space. */
.woocommerce-cart .fw-shopflow td.product-name dl.variation {
	grid-area: meta;
}

.woocommerce-cart .fw-shopflow td.product-remove {
	grid-area: remove;
	text-align: right;
}

.woocommerce-cart .fw-shopflow td.product-remove a.remove {
	display: inline-grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border: 1px solid transparent;
	border-radius: 50%;
	color: var(--bone-faint) !important;
	font-size: 1.1rem;
	line-height: 1;
	text-decoration: none;
	background: transparent !important;
}

.woocommerce-cart .fw-shopflow td.product-remove a.remove:hover {
	border-color: var(--danger);
	color: var(--danger) !important;
}

.woocommerce-cart .fw-shopflow form.woocommerce-cart-form table.shop_table td.product-price {
	display: none; /* identical to the subtotal at quantity 1; shown in the total */
}

.woocommerce-cart .fw-shopflow td.product-quantity {
	grid-area: qty;
	align-self: end;
}

.woocommerce-cart .fw-shopflow td.product-subtotal {
	grid-area: total;
	align-self: end;
	text-align: right;
	color: var(--bone);
	font-size: var(--step-2);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.woocommerce-cart .fw-shopflow .quantity input.qty {
	width: 5.5rem;
	min-height: 44px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/* The engraving lines are the whole point of the order — they get read, not
   skimmed, so they are set as a proper two-column definition list. */
.fw-shopflow .woocommerce dl.variation {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	gap: 0.2rem 0.9rem;
	margin: var(--sp-3) 0 0;
	padding-top: var(--sp-3);
	border-top: 1px dashed var(--hairline-soft);
	font-size: var(--step--1);
	line-height: 1.5;
}

.fw-shopflow .woocommerce dl.variation dt {
	float: none;
	margin: 0;
	color: var(--bone-faint);
	font-weight: 500;
	white-space: nowrap;
}

.fw-shopflow .woocommerce dl.variation dd {
	margin: 0;
	color: var(--bone);
	font-family: var(--font-tech);
	font-stretch: 88%;
	letter-spacing: 0.04em;
}

.fw-shopflow .woocommerce dl.variation dd p {
	margin: 0;
}

/* Coupon and update sit below the list as quiet secondary actions. */
.woocommerce-cart .fw-shopflow tr.woocommerce-cart-form__contents-actions,
.woocommerce-cart .fw-shopflow td.actions {
	display: block;
	padding: var(--sp-5) 0 0;
	border: 0;
}

.woocommerce-cart .fw-shopflow td.actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	align-items: center;
}

.woocommerce-cart .fw-shopflow td.actions .coupon {
	display: flex;
	gap: var(--sp-2);
	flex: 1 1 22rem;
	min-width: 0;
}

.woocommerce-cart .fw-shopflow td.actions .coupon input#coupon_code {
	flex: 1;
	min-width: 0;
	width: auto;
}

.woocommerce-cart .fw-shopflow .cart-collaterals {
	width: 100%;
}

.woocommerce-cart .fw-shopflow .cart_totals {
	padding: var(--sp-5);
	background: var(--ink-raised);
	border: 1px solid var(--hairline-soft);
	border-radius: var(--radius);
}

.woocommerce-cart .fw-shopflow .cart_totals h2 {
	margin-bottom: var(--sp-4);
	font-family: var(--font-body);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--bone-faint);
}

.woocommerce-cart .fw-shopflow .cart_totals table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var(--sp-4);
	border: 0;
}

/* Depth in this design comes from the card the totals sit on, not from a boxed
   table inside it. Only the hairline between rows stays. */
.woocommerce-cart .fw-shopflow .cart_totals table th,
.woocommerce-cart .fw-shopflow .cart_totals table td {
	border-top: 0;
	border-left: 0;
	border-right: 0;
}

.woocommerce-cart .fw-shopflow .cart_totals th,
.woocommerce-cart .fw-shopflow .cart_totals td {
	vertical-align: baseline;
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--hairline-soft);
	text-align: left;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--bone-faint);
	width: 50%;
}

.woocommerce-cart .fw-shopflow .cart_totals td {
	text-align: right;
	font-size: var(--step-0);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--bone);
	font-variant-numeric: tabular-nums;
}

/* The basket states the rate, not the destination. WooCommerce prints the
   session address here whether or not the calculator is switched on, which
   reads as a stray fragment of the checkout — the address belongs to the step
   that asks for it. */
.woocommerce-cart .fw-shopflow .woocommerce-shipping-destination {
	display: none;
}

/* The shipping row is not a figure but a small form — destination, rates, a
   country selector. Half a column on a phone squeezed it into a six-line
   column of wrapped words; it gets the full width instead. */
@media (max-width: 559px) {
	.woocommerce-cart .fw-shopflow .cart_totals tr.shipping th,
	.woocommerce-cart .fw-shopflow .cart_totals tr.shipping td {
		display: block;
		width: 100%;
		text-align: left;
	}

	.woocommerce-cart .fw-shopflow .cart_totals tr.shipping th {
		padding-bottom: var(--sp-2);
		border-bottom: 0;
	}

	.woocommerce-cart .fw-shopflow .cart_totals .woocommerce-shipping-destination,
	.woocommerce-cart .fw-shopflow .cart_totals .shipping-calculator-button {
		font-size: var(--step--1);
		color: var(--bone-faint);
	}
}

/* Sits under the order button: quiet, factual, not a badge. */
.fw-payment-note {
	margin: var(--sp-3) 0 0;
	font-size: var(--step--1);
	line-height: 1.5;
	color: var(--bone-faint);
}

.woocommerce-cart .fw-shopflow .cart_totals tr.order-total th,
.woocommerce-cart .fw-shopflow .cart_totals tr.order-total td {
	border-bottom: 0;
	padding-top: var(--sp-3);
	color: var(--bone);
}

.woocommerce-cart .fw-shopflow .cart_totals tr.order-total th {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.woocommerce-cart .fw-shopflow .cart_totals tr.order-total td {
	font-family: var(--font-display);
	font-size: var(--step-3);
	line-height: 1;
}

/* Made-to-order reminder, repeated where the customer commits. */
.woocommerce-cart .fw-shopflow .fw-madetoorder {
	margin: var(--sp-4) 0 0;
	padding: var(--sp-3) var(--sp-4);
	background: var(--ink);
	border-left: 2px solid var(--brass);
	border-radius: var(--radius);
	color: var(--bone-dim);
	font-size: var(--step--1);
	line-height: 1.55;
}

/* ---- checkout ---- */

.woocommerce-checkout form.checkout {
	display: grid;
	gap: var(--sp-6);
	align-items: start;
}

.woocommerce-checkout .col2-set {
	display: grid;
	gap: var(--sp-5);
	width: 100%;
}

.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
	width: 100%;
	float: none;
}

.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading {
	margin-bottom: var(--sp-4);
	font-family: var(--font-display);
	font-weight: 500;
	font-size: var(--step-3);
	letter-spacing: 0.005em;
}

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
	display: grid;
	gap: var(--sp-4);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

.woocommerce-checkout .form-row-wide,
.woocommerce-checkout #order_comments_field,
.woocommerce-checkout #billing_address_1_field,
.woocommerce-checkout #billing_address_2_field {
	grid-column: 1 / -1;
}

.woocommerce-checkout #order_review {
	padding: var(--sp-5);
	background: var(--ink-raised);
	border: 1px solid var(--hairline-soft);
	border-radius: var(--radius);
}

.woocommerce-checkout #order_review table.shop_table {
	width: 100%;
	border-collapse: collapse;
	border: 0;
	margin-bottom: var(--sp-4);
}

.woocommerce-checkout #order_review th,
.woocommerce-checkout #order_review td {
	padding: 0.85rem 0;
	border-bottom: 1px solid var(--hairline-soft);
	text-align: left;
	color: var(--bone-dim);
	vertical-align: top;
}

.woocommerce-checkout #order_review th {
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--bone-faint);
}

.woocommerce-checkout #order_review td {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.woocommerce-checkout #order_review td.product-name {
	text-align: left;
	color: var(--bone);
}

.woocommerce-checkout #order_review tr.order-total th,
.woocommerce-checkout #order_review tr.order-total td {
	border-bottom: 0;
	font-size: var(--step-2);
	color: var(--bone);
}

.woocommerce-checkout #order_review tr.order-total td {
	font-family: var(--font-display);
	font-size: var(--step-3);
}

.woocommerce-checkout #payment {
	background: transparent;
	border-radius: 0;
}

.woocommerce-checkout #payment ul.payment_methods {
	margin: 0 0 var(--sp-4);
	padding: 0 0 var(--sp-4);
	list-style: none;
	border-bottom: 1px solid var(--hairline-soft);
}

/* The payment choice is the last decision before money moves, and it was
   wearing the browser's default 13px blue radio. Same shape and states as the
   consent checkbox, so the two controls in this flow look related. */
.woocommerce-checkout #payment ul.payment_methods input.input-radio {
	appearance: none;
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin: 0 var(--sp-2) 0 0;
	border: 1px solid var(--bone-faint);
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.woocommerce-checkout #payment ul.payment_methods input.input-radio:checked {
	border-color: var(--brass);
	box-shadow: inset 0 0 0 5px var(--brass);
}

.woocommerce-checkout #payment ul.payment_methods input.input-radio:focus-visible {
	outline: 2px solid var(--brass-lit);
	outline-offset: 3px;
}

/* The whole row is the target, not the 22px disc. */
.woocommerce-checkout #payment ul.payment_methods li > label {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	min-height: 44px;
	cursor: pointer;
}

.woocommerce-checkout #payment ul.payment_methods li {
	margin-bottom: var(--sp-3);
}

.woocommerce-checkout #payment ul.payment_methods label {
	display: inline;
	margin: 0 0 0 0.5rem;
	font-size: var(--step-0);
	letter-spacing: 0;
	text-transform: none;
	color: var(--bone);
}

.woocommerce-checkout #payment div.payment_box {
	margin-top: var(--sp-3);
	padding: var(--sp-3);
	background: var(--ink);
	border: 1px solid var(--hairline-soft);
	border-radius: var(--radius);
	color: var(--bone-dim);
	font-size: var(--step--1);
}

/* Stripe's card form brings its own framed container. Ours around it made three
   nested boxes; the outer one steps back and leaves the frame to Stripe. */
.woocommerce-checkout #payment div.payment_box.payment_method_stripe {
	padding: 0;
	background: none;
	border: 0;
}

.woocommerce-checkout #payment div.payment_box::before {
	display: none;
}

.woocommerce-checkout .woocommerce-privacy-policy-text,
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
	margin-bottom: var(--sp-4);
	color: var(--bone-faint);
	font-size: var(--step--1);
	line-height: 1.55;
}

.woocommerce-checkout .woocommerce-privacy-policy-text p {
	margin: 0 0 var(--sp-2);
}

/* The withdrawal-rights notice is a legal disclosure, not fine print. */
.woocommerce-checkout .fw-madetoorder {
	margin: 0 0 var(--sp-4);
	padding: var(--sp-3) var(--sp-4);
	background: var(--ink);
	border-left: 2px solid var(--brass);
	border-radius: var(--radius);
	color: var(--bone-dim);
	font-size: var(--step--1);
	line-height: 1.55;
}

/* ---- notices ---- */

.fw-shopflow .woocommerce .woocommerce-message,
.fw-shopflow .woocommerce .woocommerce-info,
.fw-shopflow .woocommerce .woocommerce-error,
.woocommerce-cart .woocommerce-message,
.woocommerce-checkout .woocommerce-info,
.woocommerce-checkout .woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-3);
	margin: 0 0 var(--sp-5);
	padding: var(--sp-4);
	background: var(--ink-raised);
	border: 1px solid var(--hairline-soft);
	border-left: 2px solid var(--brass);
	border-radius: var(--radius);
	list-style: none;
	color: var(--bone-dim);
	font-size: var(--step-0);
}

.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-error::before {
	display: none;
}

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

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

.woocommerce-error li,
.woocommerce-message li,
.woocommerce-info li {
	margin: 0;
}

/* Empty cart */

.woocommerce .cart-empty {
	font-family: var(--font-display);
	font-size: var(--step-3);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: var(--sp-4);
}

.woocommerce .return-to-shop {
	margin-top: var(--sp-4);
}

@media (min-width: 900px) {
	.woocommerce-cart .fw-shopflow > .woocommerce {
		grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
		gap: var(--sp-7);
	}

	/* WooCommerce prints a notices wrapper as the first child, so auto-flow
	   would push the cart itself into the second column. Place all three
	   explicitly instead. */
	.woocommerce-cart .fw-shopflow .woocommerce-notices-wrapper {
		grid-column: 1 / -1;
	}

	.woocommerce-cart .fw-shopflow .woocommerce-cart-form {
		grid-column: 1;
		grid-row: 2;
	}

	.woocommerce-cart .fw-shopflow .cart-collaterals {
		grid-column: 2;
		grid-row: 2;
	}

	.woocommerce-cart .cart-collaterals {
		position: sticky;
		top: 104px;
	}

	.woocommerce-checkout form.checkout {
		grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
		/* Both rows were auto, so the tall billing column (spanning both) split
		   its height across them and pushed the order table a screen below its
		   own heading. Row 1 is the heading; row 2 takes the rest. */
		grid-template-rows: auto 1fr;
		gap: var(--sp-7);
	}

	.woocommerce-checkout #order_review_heading {
		grid-column: 2;
		grid-row: 1;
		margin-bottom: var(--sp-3);
	}

	.woocommerce-checkout #order_review {
		grid-column: 2;
		grid-row: 2;
		position: sticky;
		top: 104px;
	}

	.woocommerce-checkout .col2-set {
		grid-column: 1;
		grid-row: 1 / span 2;
	}
}

@media (max-width: 599px) {
	.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
	.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
		grid-template-columns: 1fr;
	}

	/* A cart table with four columns does not fit a phone; each line becomes
	   a stacked block with its label in front of the value. */
	.woocommerce-cart form.woocommerce-cart-form table.shop_table thead {
		display: none;
	}

	.woocommerce-cart form.woocommerce-cart-form table.shop_table tr {
		display: grid;
		grid-template-columns: 88px 1fr auto;
		gap: 0 var(--sp-3);
		padding: var(--sp-4) 0;
		border-bottom: 1px solid var(--hairline-soft);
	}

	.woocommerce-cart form.woocommerce-cart-form table.shop_table td {
		border: 0;
		padding: 0;
	}

	.woocommerce-cart td.product-thumbnail {
		grid-row: 1 / span 3;
		padding-right: 0 !important;
	}

	.woocommerce-cart td.product-remove {
		grid-column: 3;
		grid-row: 1;
	}

	.woocommerce-cart td.product-name {
		grid-column: 2;
		grid-row: 1;
	}

	.woocommerce-cart td.product-price {
		display: none;
	}

	.woocommerce-cart td.product-quantity {
		grid-column: 2;
		grid-row: 2;
		padding-top: var(--sp-3) !important;
	}

	.woocommerce-cart td.product-subtotal {
		grid-column: 3;
		grid-row: 2;
		padding-top: var(--sp-3) !important;
		text-align: right;
	}

	.woocommerce-cart .actions .coupon {
		flex: 1 1 100%;
	}
}

/* --------------------------------------------------------------------------
   16c. Product page components from the client's mockup
   -------------------------------------------------------------------------- */

/* Lozenge rule under the product name. */
.fw-pdp-rule {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	margin: 0 0 var(--sp-4);
	max-width: 7rem;
	color: var(--brass);
}

.fw-pdp-rule::before,
.fw-pdp-rule::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--hairline);
}

.fw-pdp-rule span {
	width: 6px;
	height: 6px;
	transform: rotate(45deg);
	background: var(--brass);
}

/* Benefit list with brass check circles. */
.fw-checks {
	list-style: none;
	margin: var(--sp-4) 0;
	padding: 0;
	display: grid;
	gap: var(--sp-2);
}

.fw-checks li {
	display: grid;
	grid-template-columns: 20px 1fr;
	gap: var(--sp-2);
	align-items: start;
	color: var(--bone-dim);
	font-size: var(--step-0);
	line-height: 1.5;
}

.fw-checks li::before {
	content: "";
	width: 18px;
	height: 18px;
	margin-top: 0.2em;
	border-radius: 50%;
	border: 1px solid var(--brass);
	background:
		linear-gradient(45deg, transparent 46%, var(--brass) 46%, var(--brass) 60%, transparent 60%) no-repeat 4px 8px / 6px 4px,
		linear-gradient(-50deg, transparent 46%, var(--brass) 46%, var(--brass) 58%, transparent 58%) no-repeat 7px 5px / 8px 7px;
}

/* Quantity stepper. */
.fw-qty {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--hairline-soft);
	border-radius: var(--radius);
	background: var(--ink-raised);
	overflow: hidden;
}

.fw-qty button {
	width: 44px;
	min-height: 52px;
	border: 0;
	background: transparent;
	color: var(--bone-dim);
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.fw-qty button:hover {
	background: var(--ink-sunk);
	color: var(--brass-deep);
}

.fw-qty input {
	width: 3.25rem;
	border: 0;
	border-inline: 1px solid var(--hairline-soft);
	background: transparent;
	text-align: center;
	color: var(--bone);
	font-family: var(--font-body);
	font-size: 1rem;
	font-variant-numeric: tabular-nums;
}

/* Circular finish swatches, labelled underneath. */
.fw-finishes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-4);
	margin: var(--sp-4) 0;
	padding: 0;
	list-style: none;
}

.fw-finish {
	flex: 0 0 auto;
	width: 5.25rem;
	text-align: center;
}

.fw-finish__swatch {
	display: block;
	width: 3.5rem;
	height: 3.5rem;
	margin-inline: auto;
	border-radius: 50%;
	border: 1px solid var(--hairline-soft);
	object-fit: cover;
	box-shadow: 0 1px 2px rgba(27, 23, 20, 0.12);
	transition: outline-color 0.15s var(--ease);
	outline: 2px solid transparent;
	outline-offset: 3px;
}

.fw-finish[aria-current="true"] .fw-finish__swatch,
.fw-finish input:checked + .fw-finish__swatch {
	outline-color: var(--brass);
}

.fw-finish__name {
	display: block;
	margin-top: var(--sp-2);
	font-size: 0.6875rem;
	line-height: 1.3;
	letter-spacing: 0.04em;
	color: var(--bone-dim);
}

/* Commerce facts under the price: VAT, lead time, shipping — stated before
   the buyer invests effort, not discovered at checkout. */
.fw-facts {
	display: grid;
	gap: var(--sp-1);
	margin: var(--sp-3) 0 var(--sp-4);
	padding-bottom: var(--sp-4);
	border-bottom: 1px solid var(--hairline-soft);
	font-size: var(--step--1);
	color: var(--bone-faint);
}

/* "How it works" band on a light ground. */
.fw-steps__media {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: var(--radius);
	margin-bottom: var(--sp-3);
	background: var(--leather-deep);
}

/* --------------------------------------------------------------------------
   17. Footer
   -------------------------------------------------------------------------- */

.fw-footer {
	padding-block: var(--sp-7) var(--sp-5);
	border-top: 1px solid var(--hairline);
	background: var(--ink-sunk);
}

/* "Made for Defenders" badge from the client's footer. */
.fw-madefor {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	margin-top: var(--sp-4);
	padding: 0.55rem 0.9rem;
	border: 1px solid var(--brass);
	border-radius: var(--radius);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--brass-deep);
}

/* Footer newsletter: field and arrow button read as one control. */
.fw-subscribe {
	display: flex;
	margin-top: var(--sp-3);
	max-width: 20rem;
	border: 1px solid var(--hairline-soft);
	border-radius: var(--radius);
	background: var(--ink-raised);
	overflow: hidden;
}

.fw-subscribe input[type="email"] {
	flex: 1;
	min-width: 0;
	min-height: 46px;
	padding: 0.6rem 0.8rem;
	border: 0;
	background: transparent;
	color: var(--bone);
	font-family: var(--font-body);
	font-size: 1rem;
}

.fw-subscribe input[type="email"]::placeholder {
	color: var(--bone-faint);
	opacity: 1;
}

.fw-subscribe button {
	flex: none;
	width: 46px;
	border: 0;
	background: var(--brass);
	color: #fff;
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: background-color 0.2s var(--ease);
}

.fw-subscribe button:hover {
	background: var(--brass-deep);
}

.fw-footer__grid {
	display: grid;
	gap: var(--sp-6);
	grid-template-columns: 1fr;
}

.fw-footer h3 {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--bone-faint);
	margin-bottom: var(--sp-3);
}

.fw-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--sp-2);
}

.fw-footer a {
	color: var(--bone-dim);
	text-decoration: none;
	font-size: var(--step--1);
}

.fw-footer a:hover {
	color: var(--bone);
}

.fw-footer__base {
	margin-top: var(--sp-6);
	padding-top: var(--sp-4);
	border-top: 1px solid var(--hairline-soft);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--sp-3);
	font-size: 0.75rem;
	color: var(--bone-faint);
}

/* --------------------------------------------------------------------------
   17b. Pre-launch holding page

   Composed rather than floating: the product sits in its own lit frame beside
   the copy, so a first-time visitor can see what they are signing up for.
   -------------------------------------------------------------------------- */

.fw-prelaunch-body {
	min-height: 100svh;
	background: var(--ink);
}

.fw-prelaunch {
	position: relative;
	min-height: 100svh;
	display: grid;
	align-items: center;
	overflow: hidden;
	isolation: isolate;
	padding: var(--sp-6) 0;
}

/* One warm light, the same device the product photography uses. */
.fw-prelaunch__glow {
	position: absolute;
	inset: 0;
	z-index: -1;
	/* Barely-there warmth. The original values came from the dark stylesheet,
	   where they read as a lamp on black; at that strength on ivory they sank
	   the body text to roughly 2.6:1. */
	background:
		radial-gradient(70% 55% at 78% 42%, rgba(155, 99, 43, 0.05) 0%, transparent 70%),
		radial-gradient(50% 45% at 12% 78%, rgba(155, 99, 43, 0.03) 0%, transparent 70%);
}

.fw-prelaunch__grid {
	width: min(100% - 2.5rem, 72rem);
	margin-inline: auto;
	display: grid;
	gap: var(--sp-5);
	align-items: center;
	/* On a phone the product comes before the form: nobody types their address
	   for something they have not seen yet. */
	grid-template-areas:
		"mark"
		"figure"
		"body";
}

.fw-prelaunch__mark {
	grid-area: mark;
}

.fw-prelaunch__body {
	grid-area: body;
}

.fw-prelaunch__figure {
	grid-area: figure;
}

.fw-prelaunch__mark {
	display: inline-flex;
	flex-direction: column;
	gap: 3px;
	text-decoration: none;
	color: var(--bone);
}

.fw-prelaunch__mark .fw-wordmark__name {
	font-size: clamp(1.35rem, 1rem + 1.4vw, 1.75rem);
}

.fw-prelaunch__eyebrow {
	margin-top: 0;
}

.fw-prelaunch__title {
	margin: 0 0 var(--sp-4);
	max-width: 14ch;
}

.fw-prelaunch__intro {
	margin: 0 0 var(--sp-6);
	max-width: 44ch;
	color: var(--bone-dim);
	font-size: var(--step-1);
}

.fw-prelaunch__form {
	max-width: 34rem;
}

.fw-prelaunch__row {
	display: grid;
	gap: var(--sp-2);
}

.fw-prelaunch__row input[type="email"] {
	width: 100%;
	min-height: 56px;
	padding: 0.9rem 1.1rem;
	background: var(--ink-raised);
	border: 1px solid var(--hairline-soft);
	border-radius: var(--radius);
	color: var(--bone);
	font-family: var(--font-body);
	font-size: 1rem; /* 16px keeps iOS from zooming on focus */
}

.fw-prelaunch__row input[type="email"]::placeholder {
	color: var(--bone-faint);
	opacity: 1;
}

.fw-prelaunch__row input[type="email"]:focus {
	border-color: var(--brass);
	outline: none;
	box-shadow: 0 0 0 1px var(--brass);
}

.fw-prelaunch__row .fw-btn {
	min-height: 56px;
}

.fw-prelaunch__consent {
	margin: var(--sp-4) 0 0;
}

.fw-prelaunch__consent .fw-checkbox__text {
	color: var(--bone-dim);
}

/* Off-screen rather than display:none, so bots still fill it in. */
.fw-prelaunch__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.fw-prelaunch__result {
	max-width: 34rem;
	margin: 0 0 var(--sp-5);
	padding: var(--sp-3) var(--sp-4);
	border-left: 2px solid var(--brass);
	border-radius: var(--radius);
	background: var(--ink-raised);
	color: var(--bone);
}

.fw-prelaunch__result.is-error {
	border-left-color: var(--danger);
}

.fw-prelaunch__note {
	margin: var(--sp-5) 0 0;
	max-width: 42ch;
	color: var(--bone-faint);
	font-size: var(--step--1);
}

.fw-prelaunch__contact {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2) var(--sp-5);
	margin: var(--sp-7) 0 0;
	padding-top: var(--sp-4);
	border-top: 1px solid var(--hairline-soft);
	font-size: var(--step--1);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.fw-prelaunch__contact a {
	color: var(--bone-faint);
	text-decoration: none;
}

.fw-prelaunch__contact a:hover {
	color: var(--brass-lit);
}

.fw-prelaunch__figure {
	margin: 0;
	position: relative;
}

.fw-prelaunch__figure img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: center 55%;
	border: 1px solid var(--hairline-soft);
	border-radius: var(--radius);
}

.fw-prelaunch__figure figcaption {
	margin-top: var(--sp-3);
	font-size: var(--step--1);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bone-faint);
}

@media (min-width: 640px) {
	.fw-prelaunch__row {
		grid-template-columns: 1fr auto;
	}

	.fw-prelaunch__row .fw-btn {
		white-space: nowrap;
	}
}

@media (min-width: 980px) {
	.fw-prelaunch__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
		grid-template-areas:
			"mark figure"
			"body figure";
		gap: var(--sp-5) var(--sp-8);
		align-items: start;
	}

	.fw-prelaunch__body {
		align-self: center;
	}

	.fw-prelaunch__figure img {
		aspect-ratio: 5 / 6;
		object-position: center 66%;
	}
}

/* --------------------------------------------------------------------------
   18. Utilities + responsive
   -------------------------------------------------------------------------- */

.fw-visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	/* min-width wins over width in the box model, and WooCommerce puts
	   min-width:75% on the variation select — without this the "hidden"
	   control stayed 900px wide and pushed the page sideways. */
	min-width: 0 !important;
	max-width: none !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap;
	border: 0 !important;
}

.fw-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	padding: 1rem 1.5rem;
	background: var(--brass);
	color: var(--ink);
	font-weight: 600;
}

.fw-skip:focus {
	left: 0;
}

@media (min-width: 700px) {
	.fw-gallery {
		grid-template-columns: repeat(3, 1fr);
	}

	.fw-steps {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--sp-5);
	}

	.fw-step {
		grid-template-columns: 1fr;
		border-top: 1px solid var(--hairline-soft);
		padding-top: var(--sp-4);
	}

	.fw-step:first-child {
		border-top: 1px solid var(--hairline-soft);
		padding-top: var(--sp-4);
	}

	.fw-footer__grid {
		grid-template-columns: 1.4fr repeat(3, 1fr);
	}
}

@media (min-width: 980px) {
	.fw-showcase {
		grid-template-columns: 1.05fr 1fr;
		gap: var(--sp-8);
	}

	.fw-showcase--flip .fw-showcase__media {
		order: 2;
	}

	.fw-pdp {
		grid-template-columns: 1.1fr 1fr;
		gap: var(--sp-8);
		align-items: start;
	}

	.fw-pdp__media {
		position: sticky;
		top: 104px;
	}
}

@media (min-width: 861px) {
	.fw-mobile-nav {
		display: none;
	}
}

@media (max-width: 860px) {
	.fw-nav {
		display: none;
	}

	.fw-burger {
		display: inline-grid;
		place-items: center;
	}

	.fw-field {
		grid-template-columns: 1fr;
		gap: var(--sp-1);
	}
}

/* Sticky buy bar on small screens: the primary action must never require a
   scroll to reach. */
.fw-buybar {
	display: none;
}

@media (max-width: 979px) {
	.fw-buybar {
		position: sticky;
		bottom: 0;
		z-index: 90;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--sp-3);
		padding: 0.75rem 1.25rem calc(0.75rem + env(safe-area-inset-bottom));
		background: rgba(248, 244, 240, 0.97);
		border-top: 1px solid var(--hairline-soft);
		backdrop-filter: blur(8px);
	}

	.fw-buybar__price {
		font-family: var(--font-display);
		font-size: var(--step-2);
	}
}

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

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
}

/* Footer newsletter column. The consent hidden field mirrors the pre-launch
   form: the same stored proof-of-consent record, one place to export from. */
.fw-footer__signup {
	margin-top: var(--sp-6);
	padding-top: var(--sp-5);
	border-top: 1px solid var(--hairline-soft);
	max-width: 26rem;
}

.fw-footer__signup h3 {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--bone-faint);
	margin-bottom: var(--sp-2);
}

@media (min-width: 700px) {
	.fw-footer__signup {
		margin-top: var(--sp-6);
	}
}

/* Swatch buttons built by theme.js over WooCommerce's variation select. */
.fw-finish__button {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	font: inherit;
	color: inherit;
}

.fw-finish__button .fw-finish__swatch {
	background-color: var(--ink-sunk);
	background-size: 260%;
	background-position: 50% 62%;
}

.fw-finish__button[aria-pressed="true"] .fw-finish__swatch {
	outline-color: var(--brass);
}

.fw-finish__button:focus-visible .fw-finish__swatch {
	outline-color: var(--brass-deep);
}

.fw-finish__button[aria-pressed="true"] .fw-finish__name {
	color: var(--bone);
	font-weight: 600;
}


/* --------------------------------------------------------------------------
   16d. Product gallery — one large photograph, thumbnails beneath
   -------------------------------------------------------------------------- */

.woocommerce div.product .woocommerce-product-gallery {
	position: relative;
}

.woocommerce div.product .woocommerce-product-gallery__wrapper {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--sp-2);
	margin: 0;
	transform: none !important; /* nothing drives this now */
	width: auto !important;
}

.woocommerce div.product .woocommerce-product-gallery__image {
	float: none !important;
	width: auto !important;
	margin: 0;
	border: 1px solid var(--hairline-soft);
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--leather-deep);
}

.woocommerce div.product .woocommerce-product-gallery__image:first-child {
	grid-column: 1 / -1;
}

.woocommerce div.product .woocommerce-product-gallery__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.woocommerce div.product .woocommerce-product-gallery__image:first-child img {
	aspect-ratio: 4 / 3;
	object-position: center 56%;
}

.woocommerce div.product .woocommerce-product-gallery__image:not(:first-child) img {
	aspect-ratio: 1;
	object-position: center 62%;
	cursor: zoom-in;
}

/* Flexslider leftovers, now unused. */
.woocommerce div.product .flex-control-nav,
.woocommerce div.product .flex-direction-nav {
	display: none !important;
}

.woocommerce div.product .woocommerce-product-gallery__trigger {
	position: absolute;
	top: var(--sp-3);
	right: var(--sp-3);
	z-index: 3;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(248, 244, 240, 0.92);
	color: var(--bone);
	text-decoration: none;
	font-size: 0;
}

.woocommerce div.product .woocommerce-product-gallery__trigger::after {
	content: "";
	width: 15px;
	height: 15px;
	border: 1.5px solid currentColor;
	border-radius: 50%;
	box-shadow: 5px 5px 0 -4px currentColor;
	transform: translate(-1px, -1px);
}

/* ---- quantity stepper ---- */

.woocommerce div.product form.cart div.quantity {
	display: inline-flex;
	align-items: stretch;
	float: none;
	margin: 0 var(--sp-3) 0 0;
	border: 1px solid var(--hairline-soft);
	border-radius: var(--radius);
	background: var(--ink-raised);
	overflow: hidden;
}

.woocommerce div.product form.cart div.quantity label {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.woocommerce div.product form.cart div.quantity input.qty {
	width: 3.5rem;
	min-height: 52px;
	padding: 0 0.4rem;
	border: 0;
	background: transparent;
	text-align: center;
	color: var(--bone);
	font-family: var(--font-body);
	font-size: 1rem;
	font-variant-numeric: tabular-nums;
	-moz-appearance: textfield;
}

.woocommerce div.product form.cart div.quantity input.qty::-webkit-outer-spin-button,
.woocommerce div.product form.cart div.quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.fw-qty-btn {
	width: 42px;
	min-height: 52px;
	border: 0;
	background: transparent;
	color: var(--bone-dim);
	font-size: 1.05rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.fw-qty-btn:hover {
	background: var(--ink-sunk);
	color: var(--brass-deep);
}

/* WooCommerce floats the add-to-cart button left, which drags it in front of
   the quantity control. A flex row restores the order the mockup shows:
   quantity first, then the action. */
.woocommerce div.product form.cart .button {
	float: none;
}

.woocommerce div.product form.cart:not(.variations_form),
.woocommerce div.product .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	align-items: stretch;
}

.woocommerce div.product form.cart .single_add_to_cart_button {
	width: auto;
	flex: 1 1 14rem;

	/* In this stretch row the inherited top margin made the quantity stepper
	   grow to 76px while the button stayed 52px and sat lower. Both are 52px
	   and share a baseline without it. */
	margin-top: 0;
}

.woocommerce div.product form.cart div.quantity {
	margin-right: 0;
}

/* ---- tabs on ivory ---- */

.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-5);
	margin: 0 0 var(--sp-5);
	padding: 0 0 var(--sp-3);
	border-bottom: 1px solid var(--hairline-soft);
	list-style: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	border-radius: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 0;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--bone-faint);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--brass-deep);
	border-bottom: 2px solid var(--brass);
	padding-bottom: 0.4rem;
	margin-bottom: -0.4rem;
}

.woocommerce div.product .woocommerce-tabs .panel > h2:first-child {
	display: none;
}

@media (max-width: 559px) {
	.woocommerce div.product .woocommerce-product-gallery__wrapper {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}


/* --------------------------------------------------------------------------
   16e. Variation chooser

   WooCommerce renders the attribute as a two-column table, which squeezes the
   label into a narrow cell and forces the swatches to wrap. The mockup puts
   the label above the swatches, which is also what fits a phone.
   -------------------------------------------------------------------------- */

.woocommerce div.product form.cart table.variations,
.woocommerce div.product form.cart table.variations tbody,
.woocommerce div.product form.cart table.variations tr,
.woocommerce div.product form.cart table.variations th,
.woocommerce div.product form.cart table.variations td {
	display: block;
	width: auto;
	padding: 0;
	border: 0;
	text-align: left;
}

.woocommerce div.product form.cart table.variations {
	margin: 0 0 var(--sp-4);
}

.woocommerce div.product form.cart table.variations th.label label {
	display: block;
	margin: 0 0 var(--sp-2);
	font-family: var(--font-body);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--brass-deep);
}

.woocommerce div.product form.cart .reset_variations {
	display: inline-block;
	margin-top: var(--sp-2);
	font-size: var(--step--1);
	color: var(--bone-faint);
}

/* WooCommerce drops "Clear" into the last value cell, where it landed above the
   next set of swatches and read as their label. It belongs after the choice. */
.woocommerce div.product form.cart table.variations .reset_variations {
	order: 2;
}

.woocommerce div.product form.cart table.variations td.value {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* A second attribute stacked flush against the first one's captions and was
   read as part of it. One clear step between the two choices. */
.woocommerce div.product form.cart table.variations tr + tr {
	margin-top: var(--sp-5);
}

.woocommerce div.product form.cart .fw-finishes {
	margin: 0;
	gap: var(--sp-3);
}

/* Three swatches must sit on one row even on the narrowest phone. */
@media (max-width: 419px) {
	.fw-finish {
		width: 4.75rem;
	}

	.fw-finish__swatch {
		width: 3rem;
		height: 3rem;
	}
}


/* --------------------------------------------------------------------------
   16f. Shop archive and related products

   WooCommerce's own grid lives in woocommerce-layout.css, which this theme
   does not load. Without these rules `ul.products` renders as a single
   full-width column of oversized images.
   -------------------------------------------------------------------------- */

.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
	gap: var(--sp-5);
	margin: var(--sp-6) 0 0;
	padding: 0;
	list-style: none;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
	display: none;
}

.woocommerce ul.products li.product {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	clear: none !important;
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	padding: var(--sp-3);
	background: var(--ink-raised);
	border: 1px solid var(--hairline-soft);
	border-radius: var(--radius);
	transition: border-color 0.2s var(--ease);
}

.woocommerce ul.products li.product:hover {
	border-color: var(--brass-lit);
}

.woocommerce ul.products li.product img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: contain;
	object-position: center;
	background: var(--studio);
	margin: 0 0 var(--sp-2);
	border-radius: var(--radius);
	background: var(--leather-deep);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	padding: 0;
	font-family: var(--font-display);
	font-size: var(--step-2);
	font-weight: 500;
	line-height: 1.15;
	color: var(--bone);
}

.woocommerce ul.products li.product .price {
	display: block;
	margin: 0;
	color: var(--brass-deep);
	font-family: var(--font-display);
	font-size: var(--step-1);
	font-variant-numeric: tabular-nums;
}

.woocommerce ul.products li.product .price del {
	opacity: 0.6;
}

.woocommerce ul.products li.product a.button {
	margin-top: auto;
	align-self: flex-start;
}

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
	display: none; /* two products; sorting UI reads as an unfinished shop */
}

.woocommerce div.product .related > h2,
.woocommerce div.product .upsells > h2 {
	font-family: var(--font-display);
	font-size: var(--step-3);
	font-weight: 500;
	margin-bottom: var(--sp-2);
}

/* M11: the engraving panel is a block in the buy form, not a flex sibling of
   the quantity stepper. */
.woocommerce div.product form.cart .fw-engraving,
.woocommerce div.product form.cart .fw-preview-stage,
.woocommerce div.product form.cart .fw-stage__caption,
.woocommerce div.product form.cart > .fw-eyebrow {
	flex: 1 1 100%;
}


/* --------------------------------------------------------------------------
   19. Editorial pages

   Fitment, workshop, contact, the legal pages and journal articles all render
   raw editor content. Without this they inherited nothing: body-sized
   subheadings, default disc bullets, and a measure pinned to the left of a
   1216px shell with 800px of empty ivory beside it.
   -------------------------------------------------------------------------- */

.fw-pagehead {
	padding-block: var(--sp-8) 0;
	text-align: center;
}

.fw-pagehead h1 {
	margin: 0 auto var(--sp-4);
	max-width: 20ch;
	color: var(--bone);
}

.fw-pagehead .fw-rule {
	max-width: 6rem;
	margin-inline: auto;
}

.fw-pagehead__meta {
	margin-top: var(--sp-4);
	font-size: var(--step--1);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bone-faint);
}

.fw-article {
	color: var(--bone-dim);
	font-size: var(--step-1);
	line-height: 1.72;
}

.fw-article > *:first-child {
	margin-top: 0;
}

.fw-article p {
	margin: 0 0 var(--sp-4);
}

/* The opening paragraph carries the page, so it is set one step larger. */
.fw-article > p:first-of-type {
	font-size: var(--step-2);
	line-height: 1.6;
	color: var(--bone);
}

.fw-article h2 {
	margin: var(--sp-7) 0 var(--sp-3);
	font-family: var(--font-display);
	font-weight: 500;
	font-size: var(--step-4);
	line-height: 1.15;
	letter-spacing: 0.005em;
	color: var(--bone);
}

.fw-article h3 {
	margin: var(--sp-6) 0 var(--sp-2);
	font-family: var(--font-display);
	font-weight: 500;
	font-size: var(--step-2);
	line-height: 1.2;
	color: var(--bone);
}

.fw-article h4 {
	margin: var(--sp-5) 0 var(--sp-2);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--bone-faint);
}

.fw-article ul,
.fw-article ol {
	margin: 0 0 var(--sp-4);
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--sp-3);
}

.fw-article li {
	position: relative;
	padding-left: 1.75rem;
}

/* The lozenge again, rather than a browser disc. */
.fw-article ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 6px;
	height: 6px;
	transform: rotate(45deg);
	background: var(--brass);
}

.fw-article ol {
	counter-reset: fw-ol;
}

.fw-article ol li {
	counter-increment: fw-ol;
}

.fw-article ol li::before {
	content: counter(fw-ol) ".";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--brass);
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

.fw-article strong,
.fw-article b {
	color: var(--bone);
	font-weight: 600;
}

.fw-article a {
	color: var(--brass-deep);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	text-decoration-color: var(--hairline);
}

.fw-article a:hover {
	text-decoration-color: var(--brass);
}

.fw-article blockquote {
	margin: var(--sp-5) 0;
	padding-left: var(--sp-4);
	border-left: 2px solid var(--brass);
	font-family: var(--font-display);
	font-size: var(--step-2);
	line-height: 1.45;
	color: var(--bone);
}

.fw-article img,
.fw-article figure {
	margin: var(--sp-5) 0;
	border-radius: var(--radius);
}

.fw-article hr {
	margin: var(--sp-7) 0;
	border: 0;
	border-top: 1px solid var(--hairline-soft);
}

.fw-article table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 var(--sp-5);
	font-size: var(--step-0);
}

.fw-article th,
.fw-article td {
	padding: 0.85rem 0.75rem;
	border-bottom: 1px solid var(--hairline-soft);
	text-align: left;
}

/* An unresolved placeholder should look unresolved to the person who has to
   resolve it, not blend into the prose. */
.fw-article p:has(> em:only-child),
.fw-placeholder {
	color: var(--bone-faint);
}


/* --------------------------------------------------------------------------
   19b. Journal archive
   -------------------------------------------------------------------------- */

.fw-journal {
	display: grid;
	gap: var(--sp-5);
	grid-template-columns: 1fr;
}

.fw-entry {
	display: flex;
	flex-direction: column;
	background: var(--ink-raised);
	border: 1px solid var(--hairline-soft);
	border-radius: var(--radius);
	overflow: hidden;
	transition: border-color 0.2s var(--ease);
}

.fw-entry:hover,
.fw-entry:focus-within {
	border-color: var(--brass-lit);
}

.fw-entry__media img,
.fw-entry__placeholder {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	object-position: center 62%;
	background: var(--ink-sunk);
}

/* A post without a featured image still needs a shape, or the card collapses
   and the grid falls apart — which is what the sample post did. */
.fw-entry__placeholder {
	background:
		radial-gradient(60% 60% at 50% 50%, rgba(155, 99, 43, 0.1), transparent 70%),
		var(--ink-sunk);
}

.fw-entry__body {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	padding: var(--sp-4);
	flex: 1;
}

.fw-entry__date {
	margin: 0;
	font-size: 0.6875rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bone-faint);
}

.fw-entry__title {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: var(--step-3);
	line-height: 1.15;
}

.fw-entry__title a {
	color: var(--bone);
	text-decoration: none;
}

.fw-entry__excerpt {
	margin: 0;
	color: var(--bone-dim);
	font-size: var(--step--1);
	line-height: 1.6;
}

.fw-entry__more {
	margin-top: auto;
	padding-top: var(--sp-2);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--brass-deep);
}

.woocommerce-pagination,
.navigation.pagination {
	margin-top: var(--sp-6);
	text-align: center;
}

.navigation.pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 0.5rem;
	border: 1px solid var(--hairline-soft);
	border-radius: var(--radius);
	color: var(--bone-dim);
	text-decoration: none;
	font-size: var(--step--1);
}

.navigation.pagination .page-numbers.current {
	background: var(--brass);
	border-color: var(--brass);
	color: #fff;
}

@media (min-width: 700px) {
	.fw-journal {
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
	}
}


/* Archive head sits inside the shell that WooCommerce opens, so it needs its
   own top padding rather than the band spacing used elsewhere. */
.fw-pagehead--archive {
	padding-block: var(--sp-3) var(--sp-6);
}

.woocommerce .woocommerce-breadcrumb {
	margin: 0 0 var(--sp-3);
	font-size: var(--step--1);
	color: var(--bone-faint);
}

.woocommerce .woocommerce-breadcrumb a {
	color: var(--bone-faint);
	text-decoration: none;
}

.woocommerce .woocommerce-breadcrumb a:hover {
	color: var(--brass-deep);
}

/* Two products must not read as four with two missing. */
.woocommerce ul.products {
	justify-content: center;
	max-width: 62rem;
	margin-inline: auto;
}

.woocommerce ul.products li.product {
	max-width: 24rem;
}


/* --------------------------------------------------------------------------
   20. Corrections from the rendered desktop/mobile audit
   -------------------------------------------------------------------------- */

/* The product bands break out of the summary column by the shell padding. On
   narrow screens that padding is smaller than the negative margin, so the band
   pushed the page ~24px wider than the viewport. Inside the band's own gutter
   there is nothing to bleed into, so it simply sits inline. */
@media (max-width: 979px) {
	.fw-product-band {
		margin-inline: 0;
		padding-inline: 0;
	}
}

/* Cart: the coupon input collapsed to ~14px next to a letterspaced button.
   One control per line is the only honest layout at this width. */
@media (max-width: 600px) {
	/* The stacked cart turns every row into a 88px/1fr/auto grid — including
	   the actions row, which parked the coupon input in the 88px column. The
	   cell has to span the whole grid before any width inside it means
	   anything. */
	.woocommerce-cart .fw-shopflow td.actions,
	.woocommerce-cart table.shop_table td.actions {
		grid-column: 1 / -1;
		width: 100%;
		padding-top: var(--sp-4) !important;
	}

	.woocommerce-cart .fw-shopflow td.actions .coupon {
		flex-wrap: wrap;
	}

	.woocommerce-cart .fw-shopflow td.actions .coupon input#coupon_code,
	.woocommerce-cart .fw-shopflow td.actions .coupon button {
		flex: 1 1 100%;
		width: 100%;
	}
}

/* Sticky buy bar: at 390px the price range and the CTA each wrapped to two
   lines, doubling the bar's height over the content it sits on. */
@media (max-width: 479px) {
	.fw-buybar {
		gap: var(--sp-2);
		padding-inline: 1rem;
	}

	.fw-buybar__price {
		font-size: var(--step-0);
		white-space: nowrap;
	}

	.fw-buybar__price .woocommerce-Price-amount {
		white-space: nowrap;
	}

	.fw-buybar .fw-btn {
		white-space: nowrap;
		padding-inline: 1rem;
		font-size: 0.6875rem;
	}
}

/* Screen-reader price ranges must not add a visible line to the bar. */
.fw-buybar .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Tap targets. The cart remove control sits next to a personalised €209 line
   item, so it was the smallest and most consequential target on the page. */
/* WooCommerce sizes this in ems from its own font-size, which beat plain
   width/height. Min-* wins regardless of source order — the same trap the
   variation select set earlier in this build. */
.woocommerce-cart .fw-shopflow a.remove,
.woocommerce-cart .fw-shopflow td.product-remove a.remove {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	width: 44px;
	height: 44px;
	font-size: 1.25rem;
	line-height: 1;
}

.woocommerce-tabs ul.tabs li a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* Checkout is the one page where the footer's link columns and newsletter are
   pure exit ramps. The legal line stays. */
.woocommerce-checkout .fw-footer__grid,
.woocommerce-checkout .fw-footer__signup {
	display: none;
}

.woocommerce-checkout .fw-footer {
	padding-block: var(--sp-5);
}


/* --------------------------------------------------------------------------
   21. Second audit pass — cart row, receipt, live preview on phones
   -------------------------------------------------------------------------- */

/* On a phone the seven engraving fields push the preview off-screen exactly
   when it is being used. Sticking it under the header keeps "see it before we
   cut it" true while typing. */
@media (max-width: 979px) {
	/* Stuck at the top of a phone screen the eyebrow is redundant — the panel
	   is visibly the panel — and every pixel here competes with the keyboard. */
	.fw-preview > .fw-eyebrow {
		display: none;
	}

	.fw-preview .fw-stage__caption {
		margin-top: var(--sp-1);
		font-size: 0.625rem;
	}

	.fw-preview {
		position: sticky;
		top: 64px;
		z-index: 20;
		padding: var(--sp-3) var(--sp-3) var(--sp-2);
		margin-inline: calc(var(--sp-3) * -1);
		background: rgba(248, 244, 240, 0.97);
		backdrop-filter: blur(8px);
		border-bottom: 1px solid var(--hairline-soft);
	}
}

/* Two equally weighted all-caps lines read as leftover debug output. The first
   is a label, the second is a promise to the buyer — they should not look the
   same. */
.fw-stage__caption {
	display: block;
}

.fw-stage__caption span {
	display: block;
}

.fw-stage__caption span + span {
	margin-top: 0.35em;
	text-transform: none;
	letter-spacing: 0;
	font-size: var(--step--1);
	color: var(--bone-faint);
}

/* Stacked cart row: the title column was ~95px wide because the thumbnail
   spanned every row. The thumbnail now holds row 1 only, the name cell runs to
   the edge, and the remove control floats in the row's corner. */
@media (max-width: 599px) {
	.woocommerce-cart table.shop_table tr.cart_item {
		position: relative;
		grid-template-columns: 72px 1fr;
	}

	.woocommerce-cart tr.cart_item td.product-thumbnail {
		grid-row: 1 / span 2;
		grid-column: 1;
	}

	.woocommerce-cart tr.cart_item td.product-name {
		grid-column: 2 / -1;
		grid-row: 1;
		padding-right: 44px !important;
	}

	.woocommerce-cart tr.cart_item td.product-remove {
		position: absolute;
		top: var(--sp-3);
		right: 0;
		grid-row: auto;
		grid-column: auto;
	}

	.woocommerce-cart tr.cart_item td.product-quantity {
		grid-column: 2;
		grid-row: 2;
	}

	.woocommerce-cart tr.cart_item td.product-subtotal {
		grid-column: 2;
		grid-row: 2;
		justify-self: end;
	}
}

/* One receipt, one type voice. The display serif is reserved for the amount
   that actually gets charged. */
.woocommerce .cart_totals table th,
.woocommerce .cart_totals table td,
.woocommerce-checkout .shop_table tfoot th,
.woocommerce-checkout .shop_table tfoot td {
	text-align: right;
	vertical-align: baseline;
}

.woocommerce .cart_totals table th,
.woocommerce-checkout .shop_table tfoot th {
	text-align: left;
}

.woocommerce .cart_totals .order-total td,
.woocommerce-checkout .shop_table tfoot .order-total td {
	font-family: var(--font-display);
	font-size: var(--step-2);
	color: var(--bone);
}

/* The coupon prompt is the first thing a checkout visitor reads today. It is a
   secondary action and should look like one. */
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
	padding: var(--sp-2) 0;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--hairline-soft);
	font-size: var(--step--1);
	color: var(--bone-faint);
}