/* =========================================================================
   The 42 Threads — global stylesheet
   Loaded on every page. Section-specific styles live in home.css, shop.css
   and contact.css, which load conditionally.

   Contents
     1.  Design tokens
     2.  Reset and base
     3.  Typography
     4.  Layout: container, sections
     5.  Buttons and links
     6.  Utilities and accessibility
     7.  Reveal on scroll
     8.  Forms
     9.  Accordion
     10. Announcement bar
     11. Header
     12. Search panel
     13. Mobile drawer
     14. Editorial content (.prose)
     15. Page header band
     16. Archive, pagination, empty states, 404
     16b. Product grid and card
     17. Footer
     18. Print
   ====================================================================== */

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

   Every colour, type step and spacing value in the theme resolves to one of
   these. Rebrand by editing this block, not by hunting hex codes through the
   stylesheets.
   ---------------------------------------------------------------------- */

:root {
	/* Colour — strictly black and white, plus the grays a real interface
	   needs for hairlines and secondary text. No brand accent colour: badges,
	   sale prices and focus states all stay monochrome by design. */
	--ink: #000000;
	--ink-soft: #262626;
	--muted: #767676;
	--line: #e8e8e8;
	--line-strong: #d1d1d1;
	--bg: #ffffff;
	--bg-soft: #f5f5f5;
	--white: #ffffff;

	/* Functional colour only — form validation states. Not brand decoration,
	   so these are exempt from the black-and-white rule: a visitor needs a
	   faster signal than "read the words" when a submission fails. */
	--success: #2f6b3f;
	--error: #b3261e;

	/* Typography — three jobs, three families.
	     display   condensed poster face: the wordmark and the hero headline
	     heading   tight-tracked grotesk: section headings (h2)
	     body      Helvetica: everything else — nav, buttons, copy, card titles */
	--font-display: "Anton", "Arial Narrow", "Helvetica Neue", sans-serif;
	--font-heading: "Inter", "Helvetica Neue", Arial, sans-serif;
	--font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;

	/* Fluid type scale. The clamp() steps mean no breakpoint-by-breakpoint
	   font-size overrides are needed anywhere below. */
	--fs-100: 0.6875rem;
	--fs-200: 0.75rem;
	--fs-300: 0.8125rem;
	--fs-400: 0.9375rem;
	--fs-500: 1rem;
	--fs-600: clamp(1.0625rem, 0.3vw + 1rem, 1.1875rem);
	--fs-700: clamp(1.25rem, 0.8vw + 1.05rem, 1.5rem);
	--fs-800: clamp(1.75rem, 2.2vw + 1.1rem, 2.75rem);
	--fs-900: clamp(2.75rem, 6vw + 1rem, 6rem);

	--lh-tight: 0.98;
	--lh-snug: 1.15;
	--lh-body: 1.6;

	--tracking-wide: 0.1em;
	--tracking-tight: -0.03em;

	/* Spacing scale */
	--sp-1: 0.25rem;
	--sp-2: 0.5rem;
	--sp-3: 0.75rem;
	--sp-4: 1rem;
	--sp-5: 1.5rem;
	--sp-6: 2rem;
	--sp-7: 3rem;
	--sp-8: 4rem;
	--sp-9: 6rem;

	/* Layout */
	--container: 1320px;
	--container-narrow: 780px;
	--gutter: clamp(1.25rem, 4vw, 3rem);
	--section-y: clamp(3.5rem, 7vw, 7rem);
	--header-h: 4.5rem;

	/* Corners stay close to sharp throughout — a hairline radius on
	   interactive controls, none at all on imagery. */
	--radius: 2px;
	--radius-lg: 2px;

	/* Motion */
	--ease: cubic-bezier(0.16, 0.68, 0.28, 1);
	--dur-fast: 180ms;
	--dur: 320ms;
	--dur-slow: 620ms;

	--z-header: 100;
	--z-drawer: 200;
}

/* -------------------------------------------------------------------------
   2. Reset and base
   ---------------------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Anchored sections land below the sticky header rather than under it. */
	scroll-padding-top: calc(var(--header-h) + var(--sp-4));
}

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

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: var(--fs-500);
	line-height: var(--lh-body);
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

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

img {
	height: auto;
}

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

button {
	cursor: pointer;
}

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

figure,
dl,
dd,
address {
	margin: 0;
}

address {
	font-style: normal;
}

/* One visible focus treatment for the whole theme. Never remove it — keyboard
   users have no other way to tell where they are. */
:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 3px;
	border-radius: 2px;
}

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

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

/* Every H1 in the theme defaults to the same clean, tight-tracked heading
   treatment as an H2 — a product title, a page-header title and a store
   title all use it. The condensed poster face (.h-display) is opt-in, used
   in exactly one place, the homepage hero — it is not implied by heading
   level, so nothing else has to fight it back off. */
h1,
h2,
h3,
h4 {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 600;
	letter-spacing: var(--tracking-tight);
	line-height: var(--lh-snug);
	text-wrap: balance;
}

/* Anton reads best set in caps, so this is the one place in the theme that
   transforms text automatically rather than relying on how it was typed. */
.h-display {
	font-family: var(--font-display);
	font-weight: 400;
	line-height: var(--lh-tight);
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

/* h3/h4 — product titles, card headings, minor headings — stay in the body
   face rather than the heading face. Confirmed against the reference product
   grid: a card title inspects as an <h3> set in Helvetica, not Inter. */
h3,
h4 {
	font-family: var(--font-body);
	font-weight: 500;
	letter-spacing: 0;
}

p {
	margin: 0;
}

a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

strong {
	font-weight: 700;
}

/* Small bold tracked uppercase label. Used only as the text of an actual
   heading (e.g. the h2 "Bestsellers" in the featured section) — never as a
   caption sitting above a separate, larger heading. */
.label {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: var(--fs-300);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
}

.section__title {
	font-size: var(--fs-800);
}

.section__title--balance {
	max-width: 24ch;
}

.section__intro {
	max-width: 56ch;
	color: var(--ink-soft);
	font-size: var(--fs-600);
}

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

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

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

.section__head {
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
	margin-bottom: var(--sp-7);
}

.section__head--split {
	gap: var(--sp-5);
}

.section__head--centred {
	align-items: center;
	text-align: center;
}

.section__head--centred .section__intro {
	margin-inline: auto;
}

.section__foot {
	margin-top: var(--sp-7);
	display: flex;
	justify-content: center;
}

@media (min-width: 62rem) {
	.section__head--split {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
	}

	.section__head--split .section__intro {
		max-width: 40ch;
		flex-shrink: 0;
	}
}

/* -------------------------------------------------------------------------
   5. Buttons and links

   One solid black button and one outlined one — set in plain sentence case,
   the way they were typed. No uppercase, no heavy tracking: the reference
   buttons ("Add to cart", "Shop all") are quiet, not shouted.
   ---------------------------------------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	padding: 0.875rem 1.75rem;
	border: 1px solid transparent;
	border-radius: var(--radius);
	background: none;
	font-family: var(--font-body);
	font-size: var(--fs-300);
	font-weight: 500;
	letter-spacing: 0.01em;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	transition: background-color var(--dur-fast) var(--ease),
		color var(--dur-fast) var(--ease),
		border-color var(--dur-fast) var(--ease),
		transform var(--dur-fast) var(--ease);
}

.btn--primary,
.btn--dark {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--white);
}

.btn--primary:hover,
.btn--dark:hover {
	background: var(--ink-soft);
	border-color: var(--ink-soft);
}

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

.btn--ghost:hover {
	border-color: var(--ink);
	background: var(--ink);
	color: var(--white);
}

.btn--lg {
	padding: 1.0625rem 2.25rem;
	font-size: var(--fs-400);
}

.btn--sm {
	padding: 0.6875rem 1.125rem;
	font-size: var(--fs-200);
}

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

.btn:active {
	transform: translateY(1px);
}

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	font-size: var(--fs-400);
	font-weight: 500;
	text-decoration: underline;
	text-decoration-color: var(--line-strong);
	transition: text-decoration-color var(--dur-fast) var(--ease);
}

.link-arrow:hover {
	text-decoration-color: var(--ink);
}

/* For a link sitting over a photograph rather than the plain white page —
   the hero caption, an image caption on a lifestyle block. */
.link-arrow--invert {
	color: var(--white);
	text-decoration-color: rgba(255, 255, 255, 0.5);
}

.link-arrow--invert:hover {
	text-decoration-color: var(--white);
}

.link-arrow::after {
	content: "→";
	transition: transform var(--dur-fast) var(--ease);
}

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

.icon {
	width: 1.25rem;
	height: 1.25rem;
	flex-shrink: 0;
}

/* -------------------------------------------------------------------------
   6. Utilities and accessibility
   ---------------------------------------------------------------------- */

/* The WordPress-standard visually-hidden pattern. Content stays in the
   accessibility tree and in the tab order; it is only removed visually. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed !important;
	top: var(--sp-3);
	left: var(--sp-3);
	z-index: 999;
	width: auto;
	height: auto;
	clip-path: none;
	padding: var(--sp-3) var(--sp-4);
	background: var(--ink);
	color: var(--bg);
	font-size: var(--fs-300);
	text-decoration: none;
	border-radius: var(--radius);
}

/* Stand-in for an image that has not been uploaded yet, so a fresh install
   keeps its layout and aspect ratios instead of collapsing. */
.t42-placeholder {
	display: grid;
	place-items: center;
	width: 100%;
	aspect-ratio: 3 / 4;
	background:
		linear-gradient(135deg, var(--bg-soft) 0%, var(--bg-soft) 100%);
	color: var(--line-strong);
	font-family: var(--font-display);
	font-size: clamp(2rem, 6vw, 4rem);
	line-height: 1;
	user-select: none;
}

/* Admin-only guidance shown where a section cannot render real content. */
.editor-note {
	margin-block: var(--sp-6);
}

.editor-note p {
	padding: var(--sp-4) var(--sp-5);
	border: 1px dashed var(--line-strong);
	border-radius: var(--radius-lg);
	background: var(--bg-soft);
	color: var(--muted);
	font-size: var(--fs-300);
}

/* -------------------------------------------------------------------------
   7. Reveal on scroll

   Guarded by .has-js, which app.js adds to <html>. If JavaScript fails to
   load or is disabled, nothing is ever hidden — the content simply appears.
   ---------------------------------------------------------------------- */

.has-js [data-reveal] {
	opacity: 0;
	transform: translateY(1.25rem);
	transition: opacity var(--dur-slow) var(--ease),
		transform var(--dur-slow) var(--ease);
	transition-delay: var(--reveal-delay, 0ms);
}

.has-js [data-reveal].is-revealed {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.has-js [data-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* -------------------------------------------------------------------------
   8. Forms
   ---------------------------------------------------------------------- */

.form__row {
	display: grid;
	gap: var(--sp-4);
	margin-bottom: var(--sp-4);
}

.form__field {
	margin-bottom: var(--sp-4);
}

.form__row .form__field {
	margin-bottom: 0;
}

@media (min-width: 40rem) {
	.form__row--split {
		grid-template-columns: 1fr 1fr;
		gap: var(--sp-5);
	}
}

.form__label {
	display: block;
	margin-bottom: var(--sp-2);
	font-size: var(--fs-300);
	font-weight: 500;
	letter-spacing: 0.02em;
}

.form__required {
	color: var(--ink);
}

.form__hint {
	color: var(--muted);
	font-weight: 400;
}

.form__input {
	width: 100%;
	padding: 0.875rem 1rem;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	background: var(--white);
	font-size: var(--fs-400);
	transition: border-color var(--dur-fast) var(--ease);
}

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

.form__input:hover {
	border-color: var(--muted);
}

.form__input:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 1px;
	border-color: var(--ink);
}

.form__textarea {
	resize: vertical;
	min-height: 9rem;
	line-height: var(--lh-body);
}

.form__select {
	appearance: none;
	padding-right: 2.5rem;
	background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%),
		linear-gradient(135deg, var(--ink) 50%, transparent 50%);
	background-position: calc(100% - 1.25rem) 55%, calc(100% - 1rem) 55%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
}

.form__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-4);
	margin-top: var(--sp-5);
}

.form__note {
	color: var(--muted);
	font-size: var(--fs-300);
}

/* Honeypot. Hidden from sight here, from assistive technology via
   aria-hidden, and from the keyboard via tabindex="-1" in the markup. */
.form-honeypot {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.form-notice {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-3);
	margin-bottom: var(--sp-5);
	padding: var(--sp-4) var(--sp-5);
	border-left: 3px solid;
	border-radius: var(--radius);
	font-size: var(--fs-400);
}

.form-notice .icon {
	margin-top: 0.15em;
	width: 1.1rem;
	height: 1.1rem;
}

.form-notice--success {
	border-color: var(--success);
	background: rgba(60, 100, 73, 0.08);
	color: var(--success);
}

.form-notice--error {
	border-color: var(--error);
	background: rgba(161, 56, 42, 0.08);
	color: var(--error);
}

/* Newsletter form: a single joined row on desktop, stacked on mobile. */
.newsletter-form__row {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
}

.newsletter-form__input {
	flex: 1;
	min-width: 0;
	padding: 1rem 1.125rem;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	background: var(--white);
	font-size: var(--fs-400);
}

.newsletter-form__input:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 1px;
	border-color: var(--ink);
}

@media (min-width: 30rem) {
	.newsletter-form__row {
		flex-direction: row;
	}

	.newsletter-form__button {
		flex-shrink: 0;
	}
}

/* Search form */
.search-form {
	display: flex;
	gap: var(--sp-3);
	width: 100%;
}

.search-form__input {
	flex: 1;
	min-width: 0;
	padding: 0.9375rem 1.125rem;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	background: var(--white);
	font-size: var(--fs-400);
}

.search-form__input:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 1px;
	border-color: var(--ink);
}

.search-form__submit {
	padding-inline: 1.25rem;
	flex-shrink: 0;
}

/* -------------------------------------------------------------------------
   9. Accordion — native <details>/<summary>
   ---------------------------------------------------------------------- */

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

.accordion:last-of-type {
	border-bottom: 1px solid var(--line);
}

.accordion__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	padding: var(--sp-4) 0;
	cursor: pointer;
	font-size: var(--fs-400);
	font-weight: 500;
	list-style: none;
}

/* Safari renders a disclosure triangle unless this pseudo-element is cleared. */
.accordion__summary::-webkit-details-marker {
	display: none;
}

.accordion__summary .icon {
	flex-shrink: 0;
	color: var(--muted);
	transition: transform var(--dur) var(--ease);
}

.accordion[open] > .accordion__summary .icon {
	transform: rotate(180deg);
}

.accordion__body {
	padding-bottom: var(--sp-5);
	color: var(--ink-soft);
	font-size: var(--fs-400);
	max-width: 62ch;
}

@media (prefers-reduced-motion: reduce) {
	.accordion__summary .icon {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
   10. Announcement bar
   ---------------------------------------------------------------------- */

.announcement {
	background: var(--ink);
	color: var(--bg);
	font-size: var(--fs-200);
	letter-spacing: 0.04em;
}

.announcement__inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-3);
	min-height: 2.5rem;
	padding-block: var(--sp-2);
	text-align: center;
}

.announcement__text {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	margin: 0;
	text-decoration: none;
}

a.announcement__text:hover {
	text-decoration: underline;
}

.announcement__text .icon {
	width: 0.95rem;
	height: 0.95rem;
}

.announcement__close {
	position: absolute;
	right: var(--gutter);
	display: grid;
	place-items: center;
	padding: var(--sp-2);
	border: 0;
	background: none;
	color: inherit;
	opacity: 0.7;
	transition: opacity var(--dur-fast) var(--ease);
}

.announcement__close:hover {
	opacity: 1;
}

.announcement__close .icon {
	width: 0.9rem;
	height: 0.9rem;
}

/* -------------------------------------------------------------------------
   11. Header

   Sticky, and visually quiet until the page scrolls — at which point it picks
   up a translucent background and a hairline rule so it reads as a layer above
   the content rather than part of it.

   On the front page, the header instead sits transparent in white over the
   full-bleed hero image (.has-transparent-header, set on <body> — see
   inc/setup.php) and flips to its normal solid state the moment the hero has
   scrolled behind it. app.js decides *when* that flip happens; this file only
   defines what the two states look like.
   ---------------------------------------------------------------------- */

.header {
	position: sticky;
	top: 0;
	z-index: var(--z-header);
	background: var(--bg);
	color: var(--ink);
	transition: background-color var(--dur) var(--ease),
		color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.header.is-stuck {
	background: rgba(255, 255, 255, 0.92);
	box-shadow: inset 0 -1px 0 var(--line);
}

@supports (backdrop-filter: blur(12px)) {
	.header.is-stuck {
		backdrop-filter: blur(14px) saturate(140%);
	}
}

.has-transparent-header .header {
	background: transparent;
	color: var(--white);
}

.has-transparent-header .header.is-stuck {
	background: rgba(255, 255, 255, 0.92);
	color: var(--ink);
}

.header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--sp-4);
	min-height: var(--header-h);
}

.header__col {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
}

.header__col--brand {
	justify-content: center;
}

.header__col--end {
	justify-content: flex-end;
}

.brand {
	margin: 0;
	line-height: 1;
}

.brand__link {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.brand__word {
	font-family: var(--font-display);
	font-size: clamp(1.125rem, 2.2vw, 1.5rem);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	white-space: nowrap;
}

.brand__logo {
	width: auto;
	max-height: 2.25rem;
}

/* Desktop navigation */
.nav--primary {
	display: none;
}

.nav__list {
	display: flex;
	align-items: center;
	gap: var(--sp-5);
}

.nav__link,
.nav__list a {
	position: relative;
	display: inline-block;
	padding-block: var(--sp-2);
	font-size: var(--fs-300);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-decoration: none;
	text-transform: uppercase;
}

/* Underline that grows from the left on hover. Transform-driven, so it does
   not trigger layout on every pointer move. */
.nav__list a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--dur) var(--ease);
}

.nav__list a:hover::after,
.nav__list .current-menu-item > a::after,
.nav__list .current_page_item > a::after {
	transform: scaleX(1);
}

.header__action {
	position: relative;
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border: 0;
	background: none;
	color: inherit;
	text-decoration: none;
	border-radius: 50%;
	transition: background-color var(--dur-fast) var(--ease);
}

.header__action:hover {
	background: rgba(128, 128, 128, 0.14);
}

.header__action--desktop {
	display: none;
}

.header__cart-count {
	position: absolute;
	top: 0.1rem;
	right: 0.1rem;
	min-width: 1.125rem;
	height: 1.125rem;
	padding-inline: 0.25rem;
	border-radius: 999px;
	background: var(--line-strong);
	color: var(--ink);
	font-size: var(--fs-100);
	font-weight: 600;
	line-height: 1.125rem;
	text-align: center;
}

.header__cart-count.is-filled {
	background: var(--ink);
	color: var(--bg);
}

/* Burger — two bars that cross into an X when the drawer opens. */
.header__burger {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border: 0;
	background: none;
}

.header__burger-bars {
	display: block;
	position: relative;
	width: 1.25rem;
	height: 0.625rem;
}

.header__burger-bars span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 1px;
	background: currentColor;
	transition: transform var(--dur) var(--ease);
}

.header__burger-bars span:first-child {
	top: 0;
}

.header__burger-bars span:last-child {
	bottom: 0;
}

.header__burger[aria-expanded="true"] .header__burger-bars span:first-child {
	transform: translateY(0.3125rem) rotate(45deg);
}

.header__burger[aria-expanded="true"] .header__burger-bars span:last-child {
	transform: translateY(-0.3125rem) rotate(-45deg);
}

@media (min-width: 62rem) {
	.nav--primary {
		display: block;
	}

	.header__burger {
		display: none;
	}

	.header__action--desktop {
		display: grid;
	}
}

/* -------------------------------------------------------------------------
   12. Search panel
   ---------------------------------------------------------------------- */

.search-panel {
	padding-block: var(--sp-5);
	background: var(--bg-soft);
	box-shadow: inset 0 1px 0 var(--line);
}

.search-panel .search-form {
	max-width: var(--container-narrow);
	margin-inline: auto;
}

/* -------------------------------------------------------------------------
   13. Mobile drawer
   ---------------------------------------------------------------------- */

.drawer {
	position: fixed;
	inset: 0;
	z-index: var(--z-drawer);
}

.drawer__scrim {
	position: absolute;
	inset: 0;
	width: 100%;
	border: 0;
	background: rgba(0, 0, 0, 0.45);
	opacity: 0;
	transition: opacity var(--dur) var(--ease);
	cursor: default;
}

.drawer.is-open .drawer__scrim {
	opacity: 1;
}

.drawer__panel {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	width: min(22rem, 88vw);
	height: 100%;
	padding: var(--sp-5) var(--sp-5) var(--sp-6);
	background: var(--bg);
	transform: translateX(-100%);
	transition: transform var(--dur) var(--ease);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.drawer.is-open .drawer__panel {
	transform: none;
}

.drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: var(--sp-5);
	border-bottom: 1px solid var(--line);
}

.drawer__title {
	font-size: var(--fs-200);
	font-weight: 500;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--muted);
}

.drawer__close {
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border: 0;
	background: none;
}

.drawer__nav {
	padding-block: var(--sp-4);
	flex: 1;
}

.drawer__list a {
	display: block;
	padding: var(--sp-4) 0;
	border-bottom: 1px solid var(--line);
	font-family: var(--font-display);
	font-size: var(--fs-700);
	text-decoration: none;
}

.drawer__list .sub-menu a {
	padding-left: var(--sp-4);
	font-family: var(--font-body);
	font-size: var(--fs-400);
}

.drawer__foot {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	padding-top: var(--sp-5);
	border-top: 1px solid var(--line);
}

.drawer__link {
	font-size: var(--fs-400);
	text-decoration: none;
	color: var(--ink-soft);
}

.drawer__link:hover {
	text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
	.drawer__panel,
	.drawer__scrim {
		transition: none;
	}
}

/* Locks the page behind the drawer without the scroll position jumping. */
body.has-drawer-open {
	overflow: hidden;
}

/* -------------------------------------------------------------------------
   14. Editorial content (.prose)

   Wraps the_content(). Block editor output gets the theme's rhythm here so a
   client-written page never looks bolted on.
   ---------------------------------------------------------------------- */

.prose {
	max-width: 68ch;
	color: var(--ink-soft);
}

.prose > * + * {
	margin-top: var(--sp-4);
}

.prose h2,
.prose h3,
.prose h4 {
	margin-top: var(--sp-7);
	color: var(--ink);
}

.prose h2 {
	font-size: var(--fs-700);
}

.prose h3 {
	font-size: var(--fs-600);
	font-family: var(--font-body);
	font-weight: 600;
}

.prose a {
	color: var(--ink);
	text-decoration-color: var(--ink);
}

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

.prose ol {
	list-style: decimal;
}

.prose li + li {
	margin-top: var(--sp-2);
}

.prose blockquote {
	margin: var(--sp-6) 0;
	padding-left: var(--sp-5);
	border-left: 2px solid var(--line-strong);
	font-family: var(--font-display);
	font-size: var(--fs-700);
	color: var(--ink);
}

.prose img,
.prose figure {
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.prose hr {
	margin-block: var(--sp-7);
	border: 0;
	border-top: 1px solid var(--line);
}

.prose code {
	padding: 0.15em 0.4em;
	background: var(--bg-soft);
	border-radius: 2px;
	font-size: 0.9em;
}

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

.page-links {
	display: flex;
	gap: var(--sp-3);
	margin-top: var(--sp-6);
	font-size: var(--fs-300);
}

/* -------------------------------------------------------------------------
   15. Page header band
   ---------------------------------------------------------------------- */

.page-header {
	position: relative;
	padding-block: clamp(2.5rem, 6vw, 5rem);
	background: var(--bg-soft);
	box-shadow: inset 0 -1px 0 var(--line);
}

.page-header--centre {
	text-align: center;
}

.page-header--centre .page-header__subtitle {
	margin-inline: auto;
}

.page-header__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

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

/* Scrim, so the heading keeps its contrast over any uploaded photograph. */
.page-header--image .page-header__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to right,
		rgba(0, 0, 0, 0.78) 0%,
		rgba(0, 0, 0, 0.45) 60%,
		rgba(0, 0, 0, 0.25) 100%
	);
}

.page-header__inner {
	position: relative;
}

.page-header--image .page-header__inner {
	color: var(--bg);
	padding-block: clamp(2rem, 5vw, 4rem);
}

.page-header--image .page-header__subtitle {
	color: rgba(255, 255, 255, 0.82);
}

/* fs-800, not fs-900 — that largest step is reserved for the homepage hero,
   the site's one poster moment. An inner page title stays a size down. */
.page-header__title {
	font-size: var(--fs-800);
	max-width: 22ch;
}

.page-header--centre .page-header__title {
	margin-inline: auto;
}

.page-header__subtitle {
	max-width: 54ch;
	margin-top: var(--sp-4);
	color: var(--ink-soft);
	font-size: var(--fs-600);
}

/* -------------------------------------------------------------------------
   16. Archive, pagination, empty states, 404
   ---------------------------------------------------------------------- */

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

.post-list {
	display: grid;
	gap: var(--sp-6);
}

@media (min-width: 48rem) {
	.post-list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 68rem) {
	.post-list {
		grid-template-columns: repeat(3, 1fr);
	}
}

.post-card__media {
	display: block;
	margin-bottom: var(--sp-4);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.post-card__image {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	transition: transform var(--dur-slow) var(--ease);
}

.post-card__media:hover .post-card__image {
	transform: scale(1.03);
}

.post-card__title {
	font-size: var(--fs-700);
}

.post-card__title a {
	text-decoration: none;
}

.post-card__title a:hover {
	text-decoration: underline;
}

.post-card__meta {
	margin-top: var(--sp-2);
	color: var(--muted);
	font-size: var(--fs-300);
}

.post-card__excerpt {
	margin-top: var(--sp-3);
	color: var(--ink-soft);
	font-size: var(--fs-400);
}

.pagination {
	margin-top: var(--sp-8);
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	justify-content: center;
}

.pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding-inline: var(--sp-3);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	font-size: var(--fs-300);
	text-decoration: none;
}

.pagination .page-numbers:hover {
	border-color: var(--ink);
}

.pagination .page-numbers.current {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--bg);
}

.empty-state {
	max-width: var(--container-narrow);
	margin-inline: auto;
	padding-block: var(--sp-8);
	text-align: center;
}

.empty-state__text {
	margin-bottom: var(--sp-5);
	font-family: var(--font-display);
	font-size: var(--fs-700);
}

.error-404__inner {
	max-width: 46rem;
	padding-block: clamp(4rem, 12vw, 9rem);
	text-align: center;
}

.error-404__code {
	margin: 0 0 var(--sp-4);
	font-family: var(--font-display);
	font-size: clamp(5rem, 18vw, 11rem);
	line-height: 0.85;
	color: var(--line-strong);
}

.error-404__title {
	font-size: var(--fs-800);
	max-width: 20ch;
	margin-inline: auto;
}

.error-404__text {
	max-width: 44ch;
	margin: var(--sp-4) auto 0;
	color: var(--ink-soft);
	font-size: var(--fs-600);
}

.error-404__search {
	max-width: 26rem;
	margin: var(--sp-6) auto 0;
}

.error-404__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	justify-content: center;
	margin-top: var(--sp-5);
}

.error-404__help {
	margin-top: var(--sp-6);
	color: var(--muted);
	font-size: var(--fs-300);
}

/* -------------------------------------------------------------------------
   16b. Product grid and card

   These live in the global stylesheet rather than in home.css or shop.css
   because both of those pages use them. Duplicating the card into two files
   would mean two places to change and two chances to let them drift; the cost
   is roughly 2KB carried by the contact page, which is the cheaper mistake.
   ---------------------------------------------------------------------- */

.product-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--sp-5) var(--sp-4);
}

@media (min-width: 48rem) {
	.product-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--sp-6) var(--sp-5);
	}
}

@media (min-width: 68rem) {
	.product-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.card__link {
	text-decoration: none;
	color: inherit;
}

/* No radius, no background tint beyond the placeholder state — the image is
   meant to sit flush against the white page, the way the reference grid does. */
.card__media {
	position: relative;
	overflow: hidden;
	background: var(--bg-soft);
	aspect-ratio: 3 / 4;
}

.card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur-slow) var(--ease),
		opacity var(--dur) var(--ease);
}

/* Second image cross-fades in on hover and on keyboard focus — focus matters,
   or the alternate view is unreachable without a pointer. */
.card__image--hover {
	position: absolute;
	inset: 0;
	opacity: 0;
}

.card:hover .card__image--hover,
.card__link:focus-visible .card__image--hover {
	opacity: 1;
}

.card--soldout .card__media {
	opacity: 0.5;
}

.card__badge {
	position: absolute;
	top: var(--sp-3);
	left: var(--sp-3);
	z-index: 1;
	padding: 0.3rem 0.6rem;
	border: 1px solid var(--ink);
	font-family: var(--font-body);
	font-size: var(--fs-100);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background: var(--bg);
	color: var(--ink);
}

.card__body {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	padding-top: var(--sp-3);
}

/* Confirmed against the reference: a card title is an h3 in Helvetica, small,
   uppercase and tightly tracked — not the heading or display face. */
.card__title {
	font-family: var(--font-body);
	font-size: var(--fs-200);
	font-weight: 500;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	line-height: 1.4;
}

.card__price {
	color: var(--ink-soft);
	font-size: var(--fs-300);
}

.card__price del {
	color: var(--muted);
	margin-right: var(--sp-2);
}

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

/* Available colours as small filled dots rather than named text — scannable
   at a glance, and it never wraps the card body onto a third line. */
.card__swatches {
	display: flex;
	gap: 0.35rem;
	margin-top: 0.35rem;
}

.card__swatch {
	width: 0.7rem;
	height: 0.7rem;
	border-radius: 50%;
	border: 1px solid var(--line-strong);
	background-color: var(--swatch-color, var(--bg-soft));
}

/* Quick-add: a small circular "+" over the image rather than a full-width
   button under it. It submits the same WooCommerce add-to-cart request as
   every other add-to-cart control in the theme (see product-card.php) — it
   only looks different. On a variable product it is a plain link through to
   the product page instead, since a size cannot be guessed on its behalf. */
.card__quick-add {
	position: absolute;
	top: var(--sp-3);
	right: var(--sp-3);
	z-index: 1;
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border: 1px solid var(--ink);
	border-radius: 50%;
	background: var(--bg);
	color: var(--ink);
	transition: background-color var(--dur-fast) var(--ease),
		color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}

.card__quick-add:hover {
	background: var(--ink);
	color: var(--bg);
}

.card__quick-add .icon {
	width: 1rem;
	height: 1rem;
}

/* Quiet by default on a pointer device, so the grid stays calm — full opacity
   on hover or keyboard focus. Always shown on touch, where there is no hover
   to reveal it and a permanently invisible control would simply be unusable. */
@media (hover: hover) and (min-width: 48rem) {
	.card__quick-add {
		opacity: 0;
	}

	.card:hover .card__quick-add,
	.card__quick-add:focus-visible {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.card__image,
	.card__quick-add {
		transition: none;
	}
}

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

.footer {
	padding-block: var(--sp-8) var(--sp-5);
	background: var(--ink);
	color: var(--bg);
}

.footer__top {
	display: grid;
	gap: var(--sp-7);
	padding-bottom: var(--sp-7);
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.footer__wordmark {
	margin: 0 0 var(--sp-4);
	font-family: var(--font-display);
	font-size: var(--fs-700);
}

.footer__tagline {
	max-width: 40ch;
	color: rgba(255, 255, 255, 0.68);
	font-size: var(--fs-400);
}

.footer__tagline p {
	margin: 0;
}

.footer__tagline p + p {
	margin-top: var(--sp-3);
}

.footer__cols {
	display: grid;
	gap: var(--sp-6);
}

.footer__heading {
	margin-bottom: var(--sp-4);
	font-family: var(--font-body);
	font-size: var(--fs-200);
	font-weight: 500;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
}

.footer__list {
	display: grid;
	gap: var(--sp-3);
	font-size: var(--fs-400);
}

.footer__list a {
	color: rgba(255, 255, 255, 0.86);
	text-decoration: none;
}

.footer__list a:hover {
	color: var(--bg);
	text-decoration: underline;
}

.footer__list--contact {
	color: rgba(255, 255, 255, 0.86);
}

.social {
	display: flex;
	gap: var(--sp-2);
	margin-top: var(--sp-5);
}

.social a {
	display: grid;
	place-items: center;
	width: 2.375rem;
	height: 2.375rem;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 999px;
	transition: border-color var(--dur-fast) var(--ease),
		background-color var(--dur-fast) var(--ease);
}

.social a:hover {
	border-color: var(--bg);
	background: rgba(255, 255, 255, 0.1);
}

/* The drawer sits on the light background, so the social chips invert there. */
.social--drawer a {
	border-color: var(--line-strong);
	color: var(--ink);
}

.social--drawer a:hover {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--bg);
}

.footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	padding-top: var(--sp-5);
	color: rgba(255, 255, 255, 0.55);
	font-size: var(--fs-300);
}

.footer__legal-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-4);
}

.footer__legal-list a {
	color: inherit;
	text-decoration: none;
}

.footer__legal-list a:hover {
	color: var(--bg);
	text-decoration: underline;
}

@media (min-width: 48rem) {
	.footer__cols {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 68rem) {
	.footer__top {
		grid-template-columns: 1fr 1.4fr;
		gap: var(--sp-9);
	}
}

/* -------------------------------------------------------------------------
   18. Print
   ---------------------------------------------------------------------- */

@media print {
	.header,
	.footer,
	.announcement,
	.drawer,
	.search-panel,
	.newsletter {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
	}
}