/* ==========================================================================
   The American Wear — core stylesheet
   Hand-written, no framework. Ordered: fonts, tokens, reset, base, layout,
   components. Everything catalog-related lives in woocommerce.css.

   Palette rule: this theme is black and white only. There is no accent
   colour token to reach for, by design.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts (self-hosted, latin subsets only)
   -------------------------------------------------------------------------- */

@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url('../fonts/montserrat-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url('../fonts/montserrat-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
		U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
		U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
		U+A720-A7FF;
}

@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 300 700;
	font-stretch: 100%;
	font-display: swap;
	src: url('../fonts/roboto-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 300 700;
	font-stretch: 100%;
	font-display: swap;
	src: url('../fonts/roboto-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
		U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
		U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
		U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */

:root {
	/* Palette — black, white, and the greys that fall between them. */
	--taw-ink: #000000;
	--taw-paper: #ffffff;
	--taw-ink-80: rgba(0, 0, 0, 0.78);
	--taw-ink-60: rgba(0, 0, 0, 0.58);
	--taw-ink-12: rgba(0, 0, 0, 0.14);
	--taw-ink-06: rgba(0, 0, 0, 0.06);
	--taw-line: rgba(0, 0, 0, 0.13);
	--taw-line-strong: rgba(0, 0, 0, 0.3);
	--taw-muted: #6b6b6b;
	--taw-shade: #f2f2f2;

	/* On-black equivalents, so inverted sections never guess at an opacity. */
	--taw-paper-70: rgba(255, 255, 255, 0.7);
	--taw-paper-line: rgba(255, 255, 255, 0.18);

	/* Type — Montserrat sets headings and UI, Roboto sets running text. */
	--taw-font: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI',
		Helvetica, Arial, sans-serif;
	--taw-font-display: 'Montserrat', -apple-system, BlinkMacSystemFont,
		'Segoe UI', Helvetica, Arial, sans-serif;

	/* The floor has to clear a phone: at 2.5rem a two-word hero title like
	   "New Collection" ran off both edges of a 375px screen. */
	--taw-fs-display: clamp(1.9rem, 6.8vw, 4.5rem);
	--taw-fs-h1: clamp(1.9rem, 3.4vw, 2.75rem);
	--taw-fs-h2: clamp(1.5rem, 2.4vw, 2.125rem);
	--taw-fs-h3: clamp(1.15rem, 1.6vw, 1.375rem);
	--taw-fs-lead: clamp(1rem, 1.15vw, 1.125rem);
	--taw-fs-body: 1rem;
	--taw-fs-sm: 0.875rem;
	--taw-fs-xs: 0.75rem;
	--taw-fs-micro: 0.6875rem;

	--taw-track-label: 0.14em;
	--taw-track-tight: -0.01em;

	/* Rhythm — one section value, used everywhere. */
	--taw-shell: 1440px;
	--taw-gutter: clamp(1.25rem, 4vw, 3.5rem);
	/* One rhythm, scaled to the viewport: tight enough that a phone isn't all
	   scrolling between sections, open enough that a wide desktop doesn't feel
	   cramped. A single flat value could only ever be right at one width. */
	--taw-section: clamp(48px, 6vw, 92px);
	--taw-gap: clamp(1rem, 1.6vw, 1.75rem);

	/* Chrome */
	--taw-header-h: 78px;
	--taw-announce-h: 40px;
	--taw-topbar-h: 118px;
	--taw-radius: 0px;
	--taw-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--taw-speed: 0.3s;
}

@media (max-width: 782px) {
	:root {
		--taw-header-h: 62px;
		--taw-announce-h: 36px;
		--taw-topbar-h: 98px;
	}
}

@media (max-width: 640px) {
	:root {
		/* Room for the announcement to wrap to a second line instead of being
		   cut off. --taw-topbar-h is only a first paint estimate; app.js
		   measures the real bar and overwrites it. */
		--taw-announce-h: 46px;
		--taw-topbar-h: 108px;
	}
}

/* --------------------------------------------------------------------------
   3. Reset
   -------------------------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--taw-header-h) + 24px);
}

body {
	margin: 0;
	background: var(--taw-paper);
	color: var(--taw-ink);
	font-family: var(--taw-font);
	font-size: var(--taw-fs-body);
	font-weight: 400;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-synthesis-weight: none;
	text-rendering: optimizeLegibility;
	/* clip, not hidden: hidden turns body into a scroll container, and a
	   position:sticky element (the header) can't stick past its nearest
	   scroll container — on iOS Safari specifically this is a well-known way
	   for a sticky header to stop tracking the viewport on scroll. clip
	   still stops horizontal bleed without creating that container. */
	overflow-x: clip;
}

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

img {
	height: auto;
	border: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
	margin: 0;
}

ul,
ol {
	margin: 0;
	padding: 0;
}

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

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

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

table {
	border-collapse: collapse;
	width: 100%;
}

hr {
	border: 0;
	border-top: 1px solid var(--taw-line);
	margin: 0;
}

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

/* --------------------------------------------------------------------------
   4. Base typography
   -------------------------------------------------------------------------- */

h1,
h2,
h3,
h4 {
	font-family: var(--taw-font-display);
	font-weight: 600;
	line-height: 1.16;
	letter-spacing: var(--taw-track-tight);
	text-wrap: balance;
}

.taw-display {
	font-family: var(--taw-font-display);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.04;
}

.taw-label {
	font-family: var(--taw-font-display);
	font-size: var(--taw-fs-micro);
	font-weight: 600;
	letter-spacing: var(--taw-track-label);
	text-transform: uppercase;
	line-height: 1;
	color: var(--taw-muted);
}

.taw-lead {
	font-size: var(--taw-fs-lead);
	line-height: 1.6;
	color: var(--taw-ink-80);
}

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

/* --------------------------------------------------------------------------
   5. Layout primitives
   -------------------------------------------------------------------------- */

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

.taw-shell--wide {
	max-width: 1760px;
}

.taw-shell--narrow {
	max-width: 820px;
}

/*
 * The homepage is an ordinary page whose content is mostly shortcodes, and each
 * of those renders its own full-width section. Anything else an editor writes
 * between them — a paragraph, a heading — still needs a column and the page
 * rhythm, so it gets one here rather than escaping to the window edge.
 */
.taw-home > :not(section):not(.taw-hero) {
	width: 100%;
	max-width: var(--taw-shell);
	margin-inline: auto;
	padding-inline: var(--taw-gutter);
}

.taw-home > :not(section):not(.taw-hero):first-child {
	padding-top: var(--taw-section);
}

.taw-home > :not(section):not(.taw-hero):last-child {
	padding-bottom: var(--taw-section);
}

/*
 * One rhythm for the whole site, sized from the viewport rather than fixed —
 * see --taw-section. Every section drawing from the same token is what keeps a
 * long page feeling composed at any width.
 */
.taw-section {
	padding-block: var(--taw-section);
}

/* Inverted section. Everything inside flips to white-on-black by inheritance
   rather than by a second set of component rules. */
.taw-section--ink {
	background: var(--taw-ink);
	color: var(--taw-paper);
	--taw-line: var(--taw-paper-line);
	--taw-line-strong: rgba(255, 255, 255, 0.42);
	--taw-muted: var(--taw-paper-70);
	--taw-ink-12: rgba(255, 255, 255, 0.18);
	--taw-shade: #171717;
}

/* Section heading: eyebrow, title, blurb, then links and carousel controls. */

.taw-sectionhead {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: 1.25rem 2rem;
	padding-bottom: 1.5rem;
	margin-bottom: 2rem;
	border-bottom: 1px solid var(--taw-line);
}

.taw-sectionhead__eyebrow {
	display: block;
	margin-bottom: 0.85rem;
}

.taw-sectionhead__title {
	font-size: var(--taw-fs-h2);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.015em;
	text-transform: uppercase;
}

.taw-sectionhead__text {
	margin-top: 0.75rem;
	max-width: 52ch;
	color: var(--taw-muted);
	font-size: var(--taw-fs-sm);
	line-height: 1.6;
}

.taw-sectionhead__aside {
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

.taw-sectionhead__link {
	white-space: nowrap;
}

@media (max-width: 640px) {
	.taw-sectionhead {
		grid-template-columns: 1fr;
		align-items: start;
	}

	.taw-sectionhead__aside {
		justify-content: space-between;
		width: 100%;
	}
}

/* --------------------------------------------------------------------------
   6. Buttons & links
   -------------------------------------------------------------------------- */

.taw-btn {
	--btn-bg: var(--taw-ink);
	--btn-fg: var(--taw-paper);
	--btn-bd: var(--taw-ink);

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	min-height: 50px;
	padding: 0.85rem 1.9rem;
	background: var(--btn-bg);
	color: var(--btn-fg);
	border: 1px solid var(--btn-bd);
	border-radius: var(--taw-radius);
	font-family: var(--taw-font-display);
	font-size: var(--taw-fs-xs);
	font-weight: 600;
	letter-spacing: var(--taw-track-label);
	text-transform: uppercase;
	line-height: 1;
	text-align: center;
	cursor: pointer;
	transition: background var(--taw-speed) var(--taw-ease),
		color var(--taw-speed) var(--taw-ease),
		border-color var(--taw-speed) var(--taw-ease);
}

.taw-btn:hover,
.taw-btn:focus-visible {
	--btn-bg: transparent;
	--btn-fg: var(--taw-ink);
}

.taw-btn--ghost {
	--btn-bg: transparent;
	--btn-fg: var(--taw-ink);
	--btn-bd: var(--taw-line-strong);
}

.taw-btn--ghost:hover,
.taw-btn--ghost:focus-visible {
	--btn-bg: var(--taw-ink);
	--btn-fg: var(--taw-paper);
	--btn-bd: var(--taw-ink);
}

.taw-btn--light {
	--btn-bg: var(--taw-paper);
	--btn-fg: var(--taw-ink);
	--btn-bd: var(--taw-paper);
}

.taw-btn--light:hover,
.taw-btn--light:focus-visible {
	--btn-bg: transparent;
	--btn-fg: var(--taw-paper);
}

.taw-btn--outline-light {
	--btn-bg: transparent;
	--btn-fg: var(--taw-paper);
	--btn-bd: rgba(255, 255, 255, 0.5);
}

.taw-btn--outline-light:hover,
.taw-btn--outline-light:focus-visible {
	--btn-bg: var(--taw-paper);
	--btn-fg: var(--taw-ink);
	--btn-bd: var(--taw-paper);
}

/* Inside an inverted section the default button has to invert too. */
.taw-section--ink .taw-btn:not(.taw-btn--light):not(.taw-btn--outline-light) {
	--btn-bg: var(--taw-paper);
	--btn-fg: var(--taw-ink);
	--btn-bd: var(--taw-paper);
}

.taw-section--ink .taw-btn:not(.taw-btn--light):not(.taw-btn--outline-light):hover {
	--btn-bg: transparent;
	--btn-fg: var(--taw-paper);
}

.taw-btn--sm {
	min-height: 42px;
	padding: 0.65rem 1.35rem;
	font-size: var(--taw-fs-micro);
}

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

.taw-btn[disabled],
.taw-btn.is-loading {
	opacity: 0.55;
	pointer-events: none;
}

/* Understated text link with a rule that retracts on hover. */

.taw-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--taw-font-display);
	font-size: var(--taw-fs-xs);
	font-weight: 600;
	letter-spacing: var(--taw-track-label);
	text-transform: uppercase;
	position: relative;
	padding-bottom: 0.35rem;
}

.taw-link::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	height: 1px;
	width: 100%;
	background: currentColor;
	transform: scaleX(1);
	transform-origin: right;
	transition: transform var(--taw-speed) var(--taw-ease);
}

.taw-link:hover::after,
.taw-link:focus-visible::after {
	transform: scaleX(0);
}

.taw-link .taw-icon {
	transition: transform var(--taw-speed) var(--taw-ease);
}

.taw-link:hover .taw-icon {
	transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   6b. Form controls
   Shared by the contact form, checkout, account screens and the filters, so a
   field looks the same wherever it appears.
   -------------------------------------------------------------------------- */

.taw-input,
input[type='text'],
input[type='email'],
input[type='url'],
input[type='tel'],
input[type='number'],
input[type='password'],
input[type='search'],
input[type='date'],
select,
textarea {
	width: 100%;
	min-height: 50px;
	padding: 0.8rem 1rem;
	background: var(--taw-paper);
	color: var(--taw-ink);
	border: 1px solid var(--taw-line-strong);
	border-radius: 0;
	font-family: var(--taw-font);
	font-size: var(--taw-fs-sm);
	line-height: 1.4;
	transition: border-color var(--taw-speed) var(--taw-ease);
	-webkit-appearance: none;
	appearance: none;
}

textarea {
	min-height: 0;
	resize: vertical;
}

select {
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
		linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 2.5rem;
	cursor: pointer;
}

input:focus,
select:focus,
textarea:focus {
	outline: none;
	border-color: var(--taw-ink);
	box-shadow: inset 0 0 0 1px var(--taw-ink);
}

input::placeholder,
textarea::placeholder {
	color: var(--taw-muted);
	opacity: 1;
}

/* Chrome renders a spinner that overlaps a 50px field's right padding. */
input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

input[type='number'] {
	-moz-appearance: textfield;
}

.taw-field {
	display: grid;
	gap: 0.45rem;
	margin: 0;
}

.taw-field > label,
.taw-formgrid label,
label.taw-label-row {
	font-family: var(--taw-font-display);
	font-size: var(--taw-fs-micro);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--taw-muted);
}

.taw-field > label span[aria-hidden] {
	color: var(--taw-ink);
}

.taw-formgrid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem;
}

.taw-check {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-size: var(--taw-fs-sm);
	cursor: pointer;
}

.taw-check input[type='checkbox'],
input[type='checkbox'],
input[type='radio'] {
	width: 18px;
	height: 18px;
	min-height: 0;
	margin: 0;
	padding: 0;
	flex: none;
	border: 1px solid var(--taw-line-strong);
	background: var(--taw-paper);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	display: grid;
	place-items: center;
}

input[type='radio'] {
	border-radius: 999px;
}

input[type='checkbox']:checked,
input[type='radio']:checked {
	background: var(--taw-ink);
	border-color: var(--taw-ink);
}

input[type='checkbox']:checked::after {
	content: '';
	width: 9px;
	height: 5px;
	border-left: 2px solid var(--taw-paper);
	border-bottom: 2px solid var(--taw-paper);
	transform: rotate(-45deg) translate(1px, -1px);
}

input[type='radio']:checked::after {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: var(--taw-paper);
}

/* Notices raised by the theme's own forms. */

.taw-formnotice {
	padding: 0.9rem 1.15rem;
	border: 1px solid var(--taw-line);
	border-left: 3px solid var(--taw-ink);
	background: var(--taw-shade);
	font-size: var(--taw-fs-sm);
}

.taw-formnotice--error {
	border-left-width: 4px;
}

/* A honeypot has to be reachable by a bot and invisible to everyone else, so
   it cannot use display:none. */
.taw-honeypot {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   7. Accessibility
   -------------------------------------------------------------------------- */

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

.taw-skip {
	position: absolute;
	top: -100px;
	left: 1rem;
	z-index: 999;
	background: var(--taw-ink);
	color: var(--taw-paper);
	padding: 0.85rem 1.4rem;
	font-size: var(--taw-fs-xs);
	letter-spacing: var(--taw-track-label);
	text-transform: uppercase;
	transition: top 0.2s var(--taw-ease);
}

.taw-skip:focus {
	top: 1rem;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--taw-ink);
	outline-offset: 3px;
}

.taw-section--ink :where(a, button):focus-visible,
.taw-hero :where(a, button):focus-visible,
.taw-footer :where(a, button):focus-visible,
.taw-announce :where(a, button):focus-visible {
	outline-color: var(--taw-paper);
}

/* --------------------------------------------------------------------------
   8. Top bar: announcement + header
   -------------------------------------------------------------------------- */

/*
 * The announcement bar and the header are one stacking unit. Sticking or
 * overlaying the header on its own is what used to let the two collide; here
 * they can only ever move together.
 */
.taw-topbar {
	position: relative;
	z-index: 60;
}

.taw-header-sticky .taw-topbar {
	position: sticky;
	top: 0;
}

/* Transparent-over-hero mode: the whole bar sits on the image until scrolled. */

.taw-header-overlay .taw-topbar {
	position: absolute;
	inset-inline: 0;
	top: 0;
}

.taw-header-overlay.taw-header-sticky .taw-topbar {
	position: fixed;
}

.taw-header-overlay .taw-topbar:not(.is-stuck) .taw-announce {
	background: transparent;
	border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}

.taw-header-overlay .taw-topbar:not(.is-stuck) .taw-header {
	background: transparent;
	border-bottom-color: transparent;
	color: var(--taw-paper);
}

.taw-header-overlay .taw-topbar.is-stuck {
	box-shadow: 0 1px 20px rgba(0, 0, 0, 0.08);
}

.taw-announce {
	background: var(--taw-ink);
	color: var(--taw-paper);
	text-align: center;
	overflow: hidden;
	transition: background var(--taw-speed) var(--taw-ease);
}

.taw-announce__viewport {
	position: relative;
	height: var(--taw-announce-h);
}

.taw-announce__item {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin: 0;
	font-family: var(--taw-font-display);
	font-size: var(--taw-fs-micro);
	font-weight: 500;
	letter-spacing: var(--taw-track-label);
	text-transform: uppercase;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.5s var(--taw-ease), transform 0.5s var(--taw-ease);
	pointer-events: none;
}

.taw-announce__item.is-active {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

@media (max-width: 640px) {
	/*
	 * Announcement copy is dashboard-written and unbounded, and the items are
	 * stacked absolutely for the crossfade, so the bar needs a fixed height.
	 * Rather than truncate the message — a promo that reads "complimentary
	 * shipping on orders over…" is worse than no promo — the bar gets enough
	 * height for a second line and the type is tightened so most messages
	 * still land on one.
	 */
	.taw-announce__item {
		padding-inline: 1rem;
		font-size: 0.625rem;
		letter-spacing: 0.08em;
		line-height: 1.35;
		overflow: hidden;
	}
}

.taw-announce a.taw-announce__item.is-active:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   9. Header
   -------------------------------------------------------------------------- */

.taw-header {
	background: var(--taw-paper);
	border-bottom: 1px solid var(--taw-line);
	transition: background var(--taw-speed) var(--taw-ease),
		border-color var(--taw-speed) var(--taw-ease),
		color var(--taw-speed) var(--taw-ease);
}

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

.taw-header__left {
	display: flex;
	align-items: center;
	gap: clamp(0.5rem, 1.5vw, 1.25rem);
	min-width: 0;
}

.taw-header__brand {
	display: inline-flex;
	align-items: center;
	justify-self: center;
	min-width: 0;
}

/*
 * --taw-logo-w carries the width set in the dashboard. Reading it through
 * min() lets each breakpoint impose a ceiling while still honouring a smaller
 * configured value, so the logo can never hold the header wider than the
 * viewport.
 */
.taw-header__brand img {
	width: min(var(--taw-logo-w, 168px), 100%);
	height: auto;
	max-height: 52px;
	object-fit: contain;
	transition: opacity var(--taw-speed) var(--taw-ease);
}

.taw-header__brand-text {
	font-family: var(--taw-font-display);
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Two logo files swap so the mark stays legible over image and over paper. */

.taw-header__logo--light {
	display: none;
}

.taw-header-overlay .taw-topbar:not(.is-stuck) .taw-header__logo--light {
	display: block;
}

.taw-header-overlay .taw-topbar:not(.is-stuck) .taw-header__logo--dark {
	display: none;
}

.taw-nav {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2vw, 2rem);
	list-style: none;
}

.taw-nav--end {
	justify-content: flex-end;
}

.taw-nav__item {
	position: relative;
}

.taw-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding-block: 0.35rem;
	font-family: var(--taw-font-display);
	font-size: var(--taw-fs-xs);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
	position: relative;
}

.taw-nav__link::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--taw-speed) var(--taw-ease);
}

.taw-nav__item:hover > .taw-nav__link::after,
.taw-nav__item.current-menu-item > .taw-nav__link::after,
.taw-nav__link:focus-visible::after {
	transform: scaleX(1);
}

/* Dropdowns */

.taw-nav__sub {
	position: absolute;
	top: calc(100% + 14px);
	left: -1.25rem;
	min-width: 230px;
	padding: 1rem 0;
	background: var(--taw-paper);
	color: var(--taw-ink);
	border: 1px solid var(--taw-line);
	list-style: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.22s var(--taw-ease), transform 0.22s var(--taw-ease),
		visibility 0.22s;
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.1);
}

.taw-nav__item:hover > .taw-nav__sub,
.taw-nav__item:focus-within > .taw-nav__sub {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.taw-nav__sub .taw-nav__link {
	display: block;
	padding: 0.5rem 1.5rem;
	letter-spacing: 0.02em;
	text-transform: none;
	font-family: var(--taw-font);
	font-size: var(--taw-fs-sm);
	font-weight: 400;
	color: var(--taw-muted);
}

.taw-nav__sub .taw-nav__link::after {
	display: none;
}

.taw-nav__sub .taw-nav__link:hover {
	color: var(--taw-ink);
}

/* Header action icons */

.taw-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: clamp(0.4rem, 1.2vw, 0.85rem);
}

.taw-action {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	transition: opacity var(--taw-speed) var(--taw-ease);
}

.taw-action:hover {
	opacity: 0.6;
}

.taw-action__count {
	position: absolute;
	top: 2px;
	right: 1px;
	min-width: 17px;
	height: 17px;
	padding-inline: 4px;
	display: grid;
	place-items: center;
	background: var(--taw-ink);
	color: var(--taw-paper);
	border-radius: 999px;
	font-family: var(--taw-font-display);
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
}

.taw-header-overlay .taw-topbar:not(.is-stuck) .taw-action__count {
	background: var(--taw-paper);
	color: var(--taw-ink);
}

.taw-burger {
	display: none;
	width: 40px;
	height: 40px;
	align-items: center;
	justify-content: center;
}

/*
 * Below the desktop breakpoint the header is three fixed passengers in one
 * row: burger, logo, actions. The logo is the only elastic one, so each step
 * down gives it a smaller ceiling and tightens the gaps around it. The numbers
 * are chosen so the row still fits inside the shell at 320px — if the row ever
 * overflows, it is the burger's column that silently collapses first and the
 * menu becomes unreachable.
 */
@media (max-width: 1024px) {
	.taw-nav--primary,
	.taw-nav--shop {
		display: none;
	}

	.taw-burger {
		display: inline-flex;
	}

	.taw-header__inner {
		gap: 0.75rem;
	}

	.taw-header__brand {
		max-width: min(46vw, 180px);
	}

	.taw-header__brand img {
		max-height: 38px;
	}
}

@media (max-width: 600px) {
	/*
	 * The header runs a tighter inline padding than the page gutter. That
	 * reclaimed space goes to the logo, which needs the presence — the row
	 * still clears 375px with room to spare.
	 */
	.taw-header__inner {
		gap: 0.5rem;
		padding-inline: 0.85rem;
	}

	.taw-header__brand {
		max-width: min(52vw, 150px);
	}

	.taw-header__brand img {
		max-height: 34px;
	}

	.taw-action,
	.taw-burger {
		width: 36px;
		height: 36px;
	}
}

@media (max-width: 380px) {
	.taw-header__inner {
		padding-inline: 0.6rem;
	}

	.taw-header__brand {
		max-width: min(50vw, 128px);
	}

	.taw-action,
	.taw-burger {
		width: 32px;
		height: 32px;
	}

	.taw-actions {
		gap: 0.2rem;
	}
}

/* --------------------------------------------------------------------------
   10. Off-canvas menu & search
   -------------------------------------------------------------------------- */

.taw-drawer {
	position: fixed;
	inset: 0;
	z-index: 200;
	visibility: hidden;
	pointer-events: none;
}

.taw-drawer.is-open {
	visibility: visible;
	pointer-events: auto;
}

.taw-drawer__scrim {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	opacity: 0;
	transition: opacity var(--taw-speed) var(--taw-ease);
}

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

.taw-drawer__panel {
	position: absolute;
	inset-block: 0;
	left: 0;
	width: min(420px, 88vw);
	background: var(--taw-paper);
	display: flex;
	flex-direction: column;
	transform: translateX(-100%);
	transition: transform 0.36s var(--taw-ease);
	overflow-y: auto;
	overscroll-behavior: contain;
}

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

.taw-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.15rem var(--taw-gutter);
	border-bottom: 1px solid var(--taw-line);
	min-height: var(--taw-header-h);
}

.taw-drawer__body {
	padding: 1.75rem var(--taw-gutter) 2.5rem;
	flex: 1;
}

.taw-drawer__nav {
	list-style: none;
}

.taw-drawer__nav > li {
	border-bottom: 1px solid var(--taw-line);
	position: relative;
}

.taw-drawer__nav a {
	display: block;
	padding: 1rem 0;
	font-family: var(--taw-font-display);
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.taw-drawer__nav .sub-menu {
	list-style: none;
	padding: 0 0 0.85rem 0.9rem;
}

.taw-drawer__nav .sub-menu a {
	padding: 0.45rem 0;
	font-family: var(--taw-font);
	font-size: var(--taw-fs-sm);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--taw-muted);
}

.taw-drawer__toggle {
	position: absolute;
	top: 0.5rem;
	right: 0;
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	font-size: 1.15rem;
	line-height: 1;
	color: var(--taw-muted);
	transition: transform var(--taw-speed) var(--taw-ease);
}

.taw-drawer__toggle.is-open {
	transform: rotate(45deg);
	color: var(--taw-ink);
}

.taw-drawer__foot {
	padding: 1.5rem var(--taw-gutter) 2rem;
	border-top: 1px solid var(--taw-line);
	display: grid;
	gap: 0.85rem;
}

.taw-drawer__meta {
	font-size: var(--taw-fs-sm);
	color: var(--taw-muted);
}

.taw-drawer__social {
	margin-top: 0.5rem;
}

.taw-drawer__social a {
	border-color: var(--taw-line);
	color: var(--taw-ink);
}

.taw-drawer__social a:hover {
	background: var(--taw-ink);
	border-color: var(--taw-ink);
	color: var(--taw-paper);
}

/* Search overlay */

.taw-search {
	position: fixed;
	inset: 0;
	z-index: 210;
	background: rgba(255, 255, 255, 0.98);
	display: grid;
	place-items: start center;
	padding-top: min(22vh, 200px);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--taw-speed) var(--taw-ease), visibility var(--taw-speed);
}

.taw-search.is-open {
	opacity: 1;
	visibility: visible;
}

.taw-search__inner {
	width: min(760px, 88vw);
}

.taw-search__form {
	display: flex;
	align-items: center;
	gap: 1rem;
	border-bottom: 1px solid var(--taw-ink);
	padding-bottom: 1rem;
}

.taw-search__input {
	flex: 1;
	border: 0;
	background: none;
	font-family: var(--taw-font-display);
	font-size: clamp(1.5rem, 3.4vw, 2.5rem);
	font-weight: 600;
	line-height: 1.1;
	padding: 0;
}

.taw-search__input:focus {
	outline: none;
}

.taw-search__input::placeholder {
	color: var(--taw-ink-12);
}

.taw-search__hint {
	margin-top: 1.15rem;
	font-size: var(--taw-fs-sm);
	color: var(--taw-muted);
}

.taw-search__close {
	position: absolute;
	top: 1.5rem;
	right: var(--taw-gutter);
}

body.taw-locked {
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   11. Hero
   -------------------------------------------------------------------------- */

.taw-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	isolation: isolate;
	background: var(--taw-ink);
	color: var(--taw-paper);
	min-height: 620px;
}

.taw-hero--standard {
	min-height: min(600px, 70vh);
}

.taw-hero--tall {
	min-height: min(780px, 86vh);
}

.taw-hero--full {
	min-height: 100svh;
}

.taw-hero--dark {
	background: var(--taw-paper);
	color: var(--taw-ink);
}

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

.taw-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.taw-hero__media picture {
	display: contents;
}

/* A vertical gradient reads better than a flat scrim: the type stays legible
   while the middle of the image keeps its contrast. */
.taw-hero__veil {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, calc(var(--veil) * 0.8)) 0%,
		rgba(0, 0, 0, calc(var(--veil) * 0.2)) 38%,
		rgba(0, 0, 0, calc(var(--veil) * 0.95)) 100%
	);
}

.taw-hero--dark .taw-hero__veil {
	background: linear-gradient(
		180deg,
		rgba(255, 255, 255, calc(var(--veil) * 0.6)) 0%,
		rgba(255, 255, 255, calc(var(--veil) * 0.2)) 45%,
		rgba(255, 255, 255, calc(var(--veil) * 0.85)) 100%
	);
}

.taw-hero__inner {
	width: 100%;
	padding-block: clamp(3.5rem, 7vw, 5.5rem);
}

/* Only the overlay header eats into the hero; the solid header does not. */
.taw-header-overlay .taw-hero__inner {
	padding-top: calc(var(--taw-topbar-h) + clamp(3.5rem, 7vw, 5.5rem));
}

.taw-hero__content {
	max-width: 660px;
}

.taw-hero--center .taw-hero__content {
	max-width: 780px;
	margin-inline: auto;
	text-align: center;
}

.taw-hero__eyebrow {
	color: rgba(255, 255, 255, 0.8);
	margin-bottom: 1.25rem;
	display: block;
}

.taw-hero--dark .taw-hero__eyebrow {
	color: var(--taw-muted);
}

.taw-hero__title {
	font-family: var(--taw-font-display);
	font-size: var(--taw-fs-display);
	font-weight: 700;
	line-height: 1.04;
	letter-spacing: -0.025em;
	text-transform: uppercase;
	text-wrap: balance;
	/* Titles are editor-written; a single long word still has to stay inside
	   the screen rather than push the page sideways. */
	overflow-wrap: break-word;
}

.taw-hero__text {
	margin-top: 1.35rem;
	max-width: 46ch;
	font-size: var(--taw-fs-lead);
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.88);
}

.taw-hero--center .taw-hero__text {
	margin-inline: auto;
}

.taw-hero--dark .taw-hero__text {
	color: var(--taw-ink-80);
}

.taw-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
	margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

.taw-hero--center .taw-hero__actions {
	justify-content: center;
}

/* Thin scroll cue anchored to the hero's bottom-right corner. */
.taw-hero__cue {
	position: absolute;
	right: var(--taw-gutter);
	bottom: clamp(1.75rem, 4vw, 3rem);
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-family: var(--taw-font-display);
	font-size: var(--taw-fs-micro);
	font-weight: 600;
	letter-spacing: var(--taw-track-label);
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
}

.taw-hero--dark .taw-hero__cue {
	color: var(--taw-muted);
}

.taw-hero__cue-line {
	display: block;
	width: 54px;
	height: 1px;
	background: currentColor;
	transform-origin: left;
	animation: taw-cue 2.6s var(--taw-ease) infinite;
}

@keyframes taw-cue {
	0%,
	100% {
		transform: scaleX(0.35);
		opacity: 0.5;
	}
	50% {
		transform: scaleX(1);
		opacity: 1;
	}
}

@media (max-width: 780px) {
	.taw-hero {
		min-height: 0;
		/*
		 * Anchoring to the bottom assumed a mobile banner with its own headline
		 * baked into the artwork, so the real HTML title never had to share the
		 * frame with the photo. A plain product photo puts the empty ground in
		 * the upper half instead, so the content is centred within the box
		 * rather than pinned to either edge of it.
		 */
		align-items: center;
	}

	.taw-hero__inner {
		padding-block: 2rem 2.25rem;
	}

	.taw-hero__text {
		margin-top: 0.85rem;
	}

	.taw-hero__actions {
		margin-top: 1.25rem;
	}

	/*
	 * 780px is also where <picture> switches to the portrait mobile banner, so
	 * the box is shaped to that artwork rather than to a fixed height. A 3:4
	 * image poured into a 375x660 box loses ~60px off each side to object-fit:
	 * cover, and on a banner with the headline set into the artwork that means
	 * the first and last letters get cut off. Matching the ratio crops nothing.
	 *
	 * If the mobile banner is ever replaced at a different ratio, this value
	 * has to move with it — which is the argument for a text-free banner plus
	 * the hero's own title fields instead.
	 */
	.taw-hero--standard,
	.taw-hero--tall {
		min-height: 0;
		aspect-ratio: 3 / 4;
		/* At 768 the 3:4 ratio alone would be a 1024px hero — a whole screen
		   before anything else. Capping the height only ever makes the box
		   relatively wider, so cover then trims top and bottom rather than the
		   sides, and the headline stays whole. */
		max-height: 88svh;
	}

	.taw-hero__cue {
		display: none;
	}

	.taw-hero__content {
		max-width: none;
	}
}

/* --------------------------------------------------------------------------
   12. Service strip (free shipping, returns, provenance, security)
   -------------------------------------------------------------------------- */

.taw-usp {
	background: var(--taw-paper);
	border-bottom: 1px solid var(--taw-line);
}

.taw-usp__grid {
	display: grid;
	grid-template-columns: repeat(var(--usp-cols, 4), minmax(0, 1fr));
	list-style: none;
}

.taw-usp__item {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.85rem;
	text-align: left;
	padding: 0 clamp(0.75rem, 2vw, 2rem);
	border-left: 1px solid var(--taw-line);
}

.taw-usp__item:first-child {
	border-left: 0;
}

.taw-usp__icon {
	flex: none;
	display: grid;
	place-items: center;
}

.taw-usp__title {
	font-family: var(--taw-font-display);
	font-size: var(--taw-fs-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.25;
}

.taw-usp__text {
	margin-top: 0.2rem;
	font-size: var(--taw-fs-micro);
	line-height: 1.45;
	color: var(--taw-muted);
}

@media (max-width: 900px) {
	.taw-usp__grid {
		/* The count is also written inline (--usp-cols, from the number of
		   items an editor added), which otherwise always outranks a plain
		   rule here regardless of media query — !important is the only way
		   a stylesheet breakpoint can still win. */
		--usp-cols: 2 !important;
		row-gap: 1.5rem;
	}

	.taw-usp__item {
		justify-content: flex-start;
		padding-inline: 0 1rem;
	}

	.taw-usp__item:nth-child(odd) {
		border-left: 0;
	}

	.taw-usp__item:nth-child(even) {
		border-left: 1px solid var(--taw-line);
		padding-left: 1rem;
	}
}

@media (max-width: 560px) {
	.taw-usp__grid {
		--usp-cols: 2 !important;
		row-gap: 1.5rem;
		column-gap: 1rem;
	}

	.taw-usp__item,
	.taw-usp__item:nth-child(even) {
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		text-align: center;
		border-left: 0;
		padding-inline: 0.5rem;
	}
}

/* --------------------------------------------------------------------------
   13. Carousel
   -------------------------------------------------------------------------- */

.taw-carousel {
	position: relative;
}

/*
 * Native overflow scrolling with snap points. A shopper can swipe, trackpad,
 * or use the arrows — and it costs no JavaScript to lay out, only to step.
 */
.taw-carousel__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc(
		(100% - (var(--per, 4) - 1) * var(--carousel-gap, 1.5rem)) / var(--per, 4)
	);
	gap: var(--carousel-gap, 1.5rem);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	/* Bleed to the viewport edge so cards run off-screen instead of stopping
	   short of it, which is what makes a row read as scrollable. */
	margin-inline: calc(var(--taw-gutter) * -1);
	padding-inline: var(--taw-gutter);
	scroll-padding-inline: var(--taw-gutter);
}

.taw-carousel__track::-webkit-scrollbar {
	display: none;
}

.taw-carousel__track > * {
	scroll-snap-align: start;
}

.taw-carousel__nav {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.taw-carousel__btn {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--taw-line-strong);
	color: inherit;
	background: transparent;
	transition: background var(--taw-speed) var(--taw-ease),
		color var(--taw-speed) var(--taw-ease),
		border-color var(--taw-speed) var(--taw-ease),
		opacity var(--taw-speed) var(--taw-ease);
}

.taw-carousel__btn:hover:not([disabled]) {
	background: var(--taw-ink);
	border-color: var(--taw-ink);
	color: var(--taw-paper);
}

.taw-section--ink .taw-carousel__btn:hover:not([disabled]) {
	background: var(--taw-paper);
	border-color: var(--taw-paper);
	color: var(--taw-ink);
}

.taw-carousel__btn[disabled] {
	opacity: 0.25;
	cursor: default;
}

@media (max-width: 1100px) {
	.taw-carousel__track {
		/* The Home page "Columns" field writes --per inline on this same
		   element, which otherwise always outranks a plain rule here
		   regardless of media query — !important is the only way a
		   stylesheet breakpoint can still win. */
		--per: 3 !important;
	}
}

@media (max-width: 820px) {
	.taw-carousel__track {
		--per: 2 !important;
	}
}

@media (max-width: 520px) {
	.taw-carousel__track {
		--per: 2 !important;
		--carousel-gap: 0.85rem;
	}

	.taw-carousel__nav {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */

.taw-footer {
	background: var(--taw-ink);
	color: var(--taw-paper-70);
	font-size: var(--taw-fs-sm);
	border-top: 1px solid var(--taw-paper-line);
}

.taw-footer a {
	transition: color var(--taw-speed) var(--taw-ease);
}

.taw-footer a:hover {
	color: var(--taw-paper);
}

.taw-footer__main {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
	gap: 2.5rem clamp(1.5rem, 3vw, 3rem);
	padding-block: var(--taw-section);
}

.taw-footer__brand {
	display: inline-flex;
}

.taw-footer__brand img {
	width: min(var(--taw-logo-w, 200px), 100%);
	height: auto;
	max-height: 44px;
	object-fit: contain;
}

.taw-footer__brand-text {
	font-family: var(--taw-font-display);
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--taw-paper);
}

.taw-footer__about {
	margin-top: 1.25rem;
	max-width: 36ch;
	line-height: 1.7;
}

.taw-footer__contact {
	margin-top: 1.5rem;
	display: grid;
	gap: 0.75rem;
	list-style: none;
}

.taw-footer__contact li {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	line-height: 1.55;
}

.taw-footer__contact .taw-icon {
	flex: none;
	margin-top: 3px;
	color: var(--taw-paper);
	opacity: 0.65;
}

.taw-footer__coltitle {
	font-family: var(--taw-font-display);
	font-size: var(--taw-fs-xs);
	font-weight: 700;
	letter-spacing: var(--taw-track-label);
	text-transform: uppercase;
	color: var(--taw-paper);
	margin-bottom: 1.25rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--taw-paper-line);
}

.taw-footer__menu {
	list-style: none;
	display: grid;
	gap: 0.65rem;
}

.taw-footer__menu a {
	font-size: var(--taw-fs-sm);
	line-height: 1.4;
}

.taw-footer__social {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: 1.75rem;
	list-style: none;
}

.taw-footer__social a {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border: 1px solid var(--taw-paper-line);
	transition: background var(--taw-speed) var(--taw-ease),
		color var(--taw-speed) var(--taw-ease),
		border-color var(--taw-speed) var(--taw-ease);
}

.taw-footer__social a:hover {
	background: var(--taw-paper);
	border-color: var(--taw-paper);
	color: var(--taw-ink);
}

.taw-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem 2rem;
	padding-block: 1.5rem 1.75rem;
	border-top: 1px solid var(--taw-paper-line);
	font-size: var(--taw-fs-xs);
}

.taw-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1.5rem;
	list-style: none;
}

/* Payment marks. Rendered as monochrome SVG so they sit on black without a
   row of mismatched brand-coloured boxes. */

.taw-footer__pay {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
}

.taw-footer__pay li {
	display: grid;
	place-items: center;
	width: 46px;
	height: 30px;
	padding: 0 6px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--taw-paper-line);
	transition: background var(--taw-speed) var(--taw-ease);
}

.taw-footer__pay li:hover {
	background: rgba(255, 255, 255, 0.12);
}

.taw-footer__pay svg {
	width: 100%;
	height: auto;
	fill: var(--taw-paper);
}

.taw-footer__pay img {
	max-height: 20px;
	width: auto;
	object-fit: contain;
}

@media (max-width: 1000px) {
	.taw-footer__main {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.taw-footer__main {
		grid-template-columns: 1fr;
		gap: 2.25rem;
	}

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

/* --------------------------------------------------------------------------
   15. Page shells (about, policies, 404, search)
   -------------------------------------------------------------------------- */

.taw-pagehead {
	padding-block: var(--taw-section);
	border-bottom: 1px solid var(--taw-line);
}

/* Inside a section that already carries the rhythm, the page head only needs
   the rule beneath it. */
.taw-pagehead--flush {
	padding-block: 0 1.75rem;
	margin-bottom: 2.5rem;
}

/*
 * --taw-section is tuned for a page like About, meant to be lingered on — up
 * to 92px above and below the title before the body even starts. A policy
 * page is opened, scanned for one fact and closed, and the same rhythm there
 * just reads as a slow page. This halves both sides of the pagehead and, via
 * .taw-section--tight-top below, the section padding that immediately follows
 * it, so a visitor reaches the first heading in one screen rather than two.
 */
.taw-pagehead--compact {
	padding-block: clamp(20px, 3vw, 34px) clamp(16px, 2.4vw, 26px);
}

/* Paired with .taw-pagehead--compact: only the top shrinks, so the section's
   own bottom padding still separates its content from the footer normally. */
.taw-section--tight-top {
	padding-top: clamp(20px, 3vw, 34px);
}

.taw-pagehead__title {
	font-size: var(--taw-fs-h1);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	margin-top: 0.85rem;
}

.taw-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--taw-font-display);
	font-size: var(--taw-fs-micro);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--taw-muted);
	list-style: none;
}

.taw-breadcrumb a:hover {
	color: var(--taw-ink);
}

.taw-prose {
	max-width: 74ch;
	line-height: 1.8;
	color: var(--taw-ink-80);
}

.taw-prose > * + * {
	margin-top: 1.35rem;
}

.taw-prose h2 {
	font-size: var(--taw-fs-h3);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	color: var(--taw-ink);
	margin-top: 2.5rem;
}

.taw-prose h3 {
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--taw-ink);
	margin-top: 2rem;
}

.taw-prose a {
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.taw-prose ul,
.taw-prose ol {
	padding-left: 1.25rem;
}

.taw-prose li + li {
	margin-top: 0.5rem;
}

.taw-prose blockquote {
	border-left: 2px solid var(--taw-ink);
	padding-left: 1.5rem;
	font-family: var(--taw-font-display);
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.45;
	color: var(--taw-ink);
}

/* Tables written in the editor — shipping rates, size charts. A narrow screen
   scrolls the table rather than the page. */
.taw-prose figure.wp-block-table,
.taw-prose .taw-table {
	overflow-x: auto;
	margin: 0;
}

.taw-prose table {
	width: 100%;
	min-width: 30rem;
	border-collapse: collapse;
	font-size: var(--taw-fs-sm);
}

.taw-prose thead th {
	background: var(--taw-ink);
	color: var(--taw-paper);
	font-family: var(--taw-font-display);
	font-size: var(--taw-fs-micro);
	font-weight: 700;
	letter-spacing: var(--taw-track-label);
	text-transform: uppercase;
}

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

.taw-prose tbody tr:nth-child(even) {
	background: var(--taw-shade);
}

.taw-prose tbody td:last-child {
	white-space: nowrap;
	font-weight: 600;
}

/*
 * Full-width pages, chosen per page in the Page layout box. Used by the policy
 * pages, which are mostly wide tables — shipping rates, data retention, who we
 * share with — that a 74ch column had nowhere to put, while half the screen
 * beside them stayed empty.
 *
 * The rule above each section is doing structural work rather than decoration.
 * Past roughly 100 characters a line, a reader loses their place returning to
 * the left edge, and a long policy collapses into one undifferentiated block.
 * The rules give the eye a fixed landmark per section, which is what the short
 * measure was providing for free.
 */
.taw-prose--wide {
	max-width: none;
}

.taw-prose--wide > h2 {
	padding-top: 1.9rem;
	border-top: 1px solid var(--taw-line);
}

.taw-prose--wide > h2:first-child {
	padding-top: 0;
	border-top: 0;
}

/*
 * The nowrap below is written for a rates table, where the last column is a
 * price. On a policy page it is a sentence, and holding a sentence on one line
 * pushes the table wider than the page.
 */
.taw-prose--wide tbody td:last-child {
	white-space: normal;
	font-weight: inherit;
}

/* On black, prose has to lighten its body colour and keep headings white. */
.taw-prose--invert {
	color: var(--taw-paper-70);
}

.taw-prose--invert h2,
.taw-prose--invert h3,
.taw-prose--invert strong {
	color: var(--taw-paper);
}

.taw-empty {
	padding-block: var(--taw-section);
	text-align: center;
	color: var(--taw-muted);
}

.taw-empty__title {
	font-family: var(--taw-font-display);
	font-size: var(--taw-fs-h3);
	font-weight: 600;
	color: var(--taw-ink);
	margin-bottom: 0.75rem;
}

.taw-empty .taw-icon {
	margin: 0 auto 1.25rem;
	color: var(--taw-line-strong);
}

.taw-empty__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
	margin-top: 1.75rem;
}

.taw-empty--catalog {
	padding-block: clamp(3rem, 8vw, 5rem);
	border: 1px solid var(--taw-line);
}

/* --------------------------------------------------------------------------
   15b. Contact page
   -------------------------------------------------------------------------- */

.taw-contact {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}

.taw-contact__intro {
	margin-bottom: 2.5rem;
}

/* --------------------------------------------------------------------------
   15c. Forms
   The shape is the same wherever a form appears — the contact page, the
   returns column, or a page an editor drops [taw_form] into.
   -------------------------------------------------------------------------- */

.taw-formblock {
	display: grid;
	gap: 1.25rem;
}

.taw-formblock__title {
	font-family: var(--taw-font-display);
	font-size: var(--taw-fs-h4, 1.25rem);
	font-weight: 700;
	letter-spacing: var(--taw-track-label);
	text-transform: uppercase;
	padding-bottom: 0.9rem;
	border-bottom: 1px solid var(--taw-ink);
}

.taw-formblock__intro {
	font-size: var(--taw-fs-sm);
	color: var(--taw-muted);
	max-width: 56ch;
}

.taw-form2 {
	display: grid;
	gap: 1.35rem;
}

/* A field that carries its own row: paragraphs, radio groups, uploads. */
.taw-field--full,
.taw-field--textarea,
.taw-field--radio,
.taw-field--checkbox,
.taw-field--file {
	grid-column: 1 / -1;
}

.taw-radios {
	display: grid;
	gap: 0.7rem;
	padding-top: 0.15rem;
}

/* The native control is unstyleable across browsers, so the label is the
   button and the input itself is taken out of the layout. */
.taw-upload {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.85rem;
}

.taw-upload__input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.taw-upload__button {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	min-height: 46px;
	padding: 0 1.25rem;
	border: 1px solid var(--taw-line-strong);
	background: var(--taw-paper);
	font-family: var(--taw-font-display);
	font-size: var(--taw-fs-micro);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--taw-ink);
	cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.taw-upload__button:hover,
.taw-upload__input:focus-visible + .taw-upload__button {
	border-color: var(--taw-ink);
	background: var(--taw-shade);
}

.taw-upload__name {
	font-size: var(--taw-fs-xs);
	color: var(--taw-muted);
	word-break: break-all;
}

.taw-form2__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.5rem;
	padding-top: 0.25rem;
}

/* A half-width submit reads as secondary on a phone; it is the only action on
   the page and should look like it. */
@media (max-width: 560px) {
	.taw-form2__foot .taw-btn {
		width: 100%;
	}
}

.taw-form2__note {
	font-size: var(--taw-fs-xs);
	color: var(--taw-muted);
	max-width: 34ch;
}

.taw-formnotice__list {
	margin: 0.6rem 0 0 1.1rem;
	padding: 0;
	font-size: var(--taw-fs-xs);
}

/* The slot the script writes into. Empty until something happens, and it must
   not open a gap in the grid while it waits. */
.taw-formnotice-slot:empty {
	display: none;
}

.taw-formnotice[tabindex]:focus {
	outline: 2px solid var(--taw-ink);
	outline-offset: 3px;
}

/* Content with a form alongside it — the returns policy, and anything else an
   editor points the Page layout box at. */

.taw-pagecols {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}

.taw-pagecols__aside {
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background: var(--taw-shade);
	position: sticky;
	top: calc(var(--taw-topbar-h) + 1.5rem);
}

.taw-pagecols__aside .taw-formblock__title {
	border-bottom-color: var(--taw-line-strong);
}

.taw-pagecols__aside .taw-formgrid {
	grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 900px) {
	.taw-pagecols {
		grid-template-columns: minmax(0, 1fr);
	}

	.taw-pagecols__aside {
		position: static;
	}
}

.taw-contact__aside {
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background: var(--taw-shade);
}

.taw-contact__asidetitle {
	font-size: var(--taw-fs-xs);
	font-weight: 700;
	letter-spacing: var(--taw-track-label);
	text-transform: uppercase;
	padding-bottom: 1rem;
	margin-bottom: 1.5rem;
	border-bottom: 1px solid var(--taw-line);
}

.taw-contact__list {
	display: grid;
	gap: 1.35rem;
	list-style: none;
	font-size: var(--taw-fs-sm);
}

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

.taw-contact__list .taw-icon {
	flex: none;
	margin-top: 2px;
}

.taw-contact__list strong {
	display: block;
	font-family: var(--taw-font-display);
	font-size: var(--taw-fs-micro);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--taw-muted);
	margin-bottom: 0.2rem;
}

.taw-contact__list address {
	font-style: normal;
	line-height: 1.5;
}

.taw-contact__social {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: 1.75rem;
	list-style: none;
}

.taw-contact__social a {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border: 1px solid var(--taw-line-strong);
	transition: background var(--taw-speed) var(--taw-ease),
		color var(--taw-speed) var(--taw-ease);
}

.taw-contact__social a:hover {
	background: var(--taw-ink);
	color: var(--taw-paper);
}

.taw-contact__links {
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--taw-line);
}

.taw-contact__links ul {
	list-style: none;
	display: grid;
	gap: 0.5rem;
	margin-top: 0.85rem;
	font-size: var(--taw-fs-sm);
}

.taw-contact__links a {
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: var(--taw-line-strong);
}

.taw-contact__links a:hover {
	text-decoration-color: currentColor;
}

@media (max-width: 900px) {
	.taw-contact {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 560px) {
	.taw-formgrid {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
   15d. FAQ page
   -------------------------------------------------------------------------- */

.taw-faq {
	margin-top: 2.5rem;
}

.taw-faq__item {
	border-bottom: 1px solid var(--taw-line);
}

.taw-faq__item:first-child {
	border-top: 1px solid var(--taw-line);
}

.taw-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1.35rem 0.1rem;
	cursor: pointer;
	list-style: none;
	font-family: var(--taw-font-display);
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--taw-ink);
	-webkit-tap-highlight-color: transparent;
}

.taw-faq__q::-webkit-details-marker {
	display: none;
}

.taw-faq__q:hover {
	color: var(--taw-muted);
}

.taw-faq__icon {
	flex: none;
	display: inline-flex;
	color: var(--taw-muted);
	transition: transform var(--taw-speed) var(--taw-ease);
}

.taw-faq__item[open] .taw-faq__icon {
	transform: rotate(180deg);
}

/*
 * A closed <details> hides everything but its <summary> outright — display:
 * none, with no partial state to animate. Forcing the answer to stay a grid
 * row and collapsing it through grid-template-rows instead is what makes the
 * open/close smooth. The one-open-at-a-time accordion behaviour itself needs
 * no JavaScript either: every <details> here shares one name= attribute,
 * which is what the browser groups on natively.
 */
.taw-faq__a {
	display: grid !important;
	grid-template-rows: 0fr;
	overflow: hidden;
	transition: grid-template-rows var(--taw-speed) var(--taw-ease);
}

.taw-faq__item[open] .taw-faq__a {
	grid-template-rows: 1fr;
}

.taw-faq__a-inner {
	min-height: 0;
	overflow: hidden;
}

.taw-faq__a-inner > * {
	padding: 0 0.1rem 1.5rem;
	color: var(--taw-ink-80);
	line-height: 1.75;
	max-width: 62ch;
}

.taw-faq__a-inner > * + * {
	margin-top: 1rem;
}

/* --------------------------------------------------------------------------
   16. Blog, search & pagination
   -------------------------------------------------------------------------- */

.taw-pagemedia {
	margin-top: 2rem;
}

.taw-pagemedia img {
	width: 100%;
	aspect-ratio: 16 / 7;
	object-fit: cover;
}

.taw-postgrid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2.5rem clamp(1rem, 2vw, 2rem);
}

.taw-post__media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background: var(--taw-shade);
	transition: opacity var(--taw-speed) var(--taw-ease);
}

.taw-post__media:hover img {
	opacity: 0.88;
}

.taw-post__body {
	padding-top: 1.15rem;
}

.taw-post__title {
	margin-top: 0.65rem;
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.35;
}

.taw-post__excerpt {
	margin-top: 0.6rem;
	font-size: var(--taw-fs-sm);
	color: var(--taw-muted);
	line-height: 1.65;
}

@media (max-width: 900px) {
	.taw-postgrid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.taw-postgrid {
		grid-template-columns: 1fr;
	}
}

.taw-pagination,
.woocommerce-pagination {
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var(--taw-line);
}

.taw-pagination .nav-links,
.woocommerce-pagination ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	list-style: none;
	border: 0;
}

.taw-pagination .page-numbers,
.woocommerce-pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 42px;
	height: 42px;
	padding-inline: 0.65rem;
	border: 1px solid transparent;
	font-size: var(--taw-fs-sm);
	font-variant-numeric: tabular-nums;
	transition: border-color var(--taw-speed) var(--taw-ease),
		background var(--taw-speed) var(--taw-ease),
		color var(--taw-speed) var(--taw-ease);
}

.taw-pagination a.page-numbers:hover,
.woocommerce-pagination a.page-numbers:hover {
	border-color: var(--taw-line-strong);
}

.taw-pagination .page-numbers.current,
.woocommerce-pagination .page-numbers.current {
	background: var(--taw-ink);
	color: var(--taw-paper);
	border-color: var(--taw-ink);
}

.taw-searchform {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	border-bottom: 1px solid var(--taw-ink);
	padding-bottom: 0.6rem;
}

.taw-searchform__input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: none;
	padding: 0.35rem 0;
	font-size: var(--taw-fs-sm);
}

.taw-searchform__input:focus {
	outline: none;
}

.taw-searchform__submit {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	color: var(--taw-muted);
	transition: color var(--taw-speed) var(--taw-ease);
}

.taw-searchform__submit:hover {
	color: var(--taw-ink);
}

/* Store shell used by WooCommerce archives and pages. Deliberately bare: every
   store template carries its own sections, and a padded shell would add a
   second helping of the 60px rhythm to all of them. */

.taw-store {
	display: block;
}

/* --------------------------------------------------------------------------
   17. Motion preferences
   -------------------------------------------------------------------------- */

/* Content lifts in once, then never animates again. Kept to opacity and a
   small translate so it costs one composite layer and no layout. */
.taw-reveal {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.6s var(--taw-ease), transform 0.6s var(--taw-ease);
}

.taw-reveal.is-visible {
	opacity: 1;
	transform: none;
}

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

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

	.taw-reveal {
		opacity: 1;
		transform: none;
	}
}