/**
 * Amiology Core — template part styles v2
 *
 * Utility bar, header with persistent search, category nav, footer, archive
 * and single product. Wider and bolder than v1 throughout.
 */

.screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.ami-skip {
	position: absolute;
	inset-inline-start: -9999px;
	z-index: var(--ami-z-modal, 1000);
	padding: var(--ami-space-sm, 0.75rem) var(--ami-space-md, 1rem);
	background: var(--ami-amber, #ffb302);
	color: var(--ami-ink, #0b0b0c);
	font-weight: var(--ami-weight-bold, 700);
	font-size: var(--ami-text-sm, 0.875rem);
	text-decoration: none;
}

/*
 * :focus-visible, not :focus.
 *
 * :focus fires for programmatic focus too, so anything calling .focus() on
 * this link made it appear and stay put — which is exactly what the
 * back-to-top button was doing. :focus-visible only matches when the browser
 * judges a focus ring appropriate, which for a skip link means keyboard
 * navigation and nothing else.
 *
 * :focus is kept as a fallback for browsers without :focus-visible, but scoped
 * so it cannot match a programmatic focus that carries no keyboard intent.
 */
.ami-skip:focus-visible {
	inset-inline-start: var(--ami-space-xs, 0.5rem);
	inset-block-start: var(--ami-space-xs, 0.5rem);
}

@supports not selector(:focus-visible) {
	.ami-skip:focus {
		inset-inline-start: var(--ami-space-xs, 0.5rem);
		inset-block-start: var(--ami-space-xs, 0.5rem);
	}
}

.ami-notice {
	margin: 0;
	padding: var(--ami-space-xs, 0.5rem) var(--ami-space-sm, 0.75rem);
	border: 1px dashed var(--ami-border, #e4e4e7);
	font-size: var(--ami-text-xs, 0.8rem);
	color: var(--ami-fg-muted, #6b6b72);
}

/* ---------------------------------------------------------------------------
 * Utility bar — scrolling trust messaging above the header
 *
 * Static and centred until JavaScript sets it moving. That ordering is
 * deliberate: the scroll needs enough clones to fill the bar, and clones can
 * only be made by script — so if the script fails, the fallback is a clean
 * centred bar rather than a short strip sweeping across a gap.
 * ------------------------------------------------------------------------- */

.ami-utility {
	overflow: hidden;
	background: var(--ami-ink, #0b0b0c);
	color: var(--ami-white, #fff);
	font-size: var(--ami-text-sm, 0.875rem);
	font-weight: var(--ami-weight-semi, 600);
	letter-spacing: var(--ami-tracking-label, 0.14em);
	text-transform: uppercase;
	user-select: none;
}

.ami-utility__track {
	display: flex;
	width: 100%;
	justify-content: center;
}

.ami-utility__run {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
	flex-shrink: 0;
	gap: var(--ami-space-sm, 0.75rem) var(--ami-space-xl, 2.5rem);
	margin: 0;
	padding: 0.6rem var(--ami-gutter, 1rem);
	list-style: none;
}

/* The second copy exists only to make a scroll seamless. With the bar static
   it would just print the same three statements twice. */
.ami-utility__run[aria-hidden="true"] {
	display: none;
}

.ami-utility__item {
	display: grid !important;
	grid-template-columns: auto auto;
	align-items: center;
	gap: 0.5em;
	white-space: nowrap;
}

.ami-utility__icon {
	grid-column: 1;
	display: block;
	width: 1.25em;
	height: 1.25em;
	/* Amber, matching the buttons and the hero eyebrow. On a black bar it
	   picks the icons out from the type rather than letting them read as
	   punctuation. */
	fill: var(--ami-amber, #ffb302);
	margin-inline-end: -0.14em;
}

/* ---------------------------------------------------------------------------
 * Scrolling state, added by JavaScript only when the statements overflow.
 * ------------------------------------------------------------------------- */

.ami-utility.is-scrolling .ami-utility__track {
	width: max-content;
	justify-content: flex-start;
	animation: ami-utility-scroll var(--ami-utility-duration, 20s) linear infinite;
}

.ami-utility.is-scrolling .ami-utility__run {
	flex-wrap: nowrap;
	padding: 0.6rem var(--ami-space-xl, 2.5rem) 0.6rem 0;
}

.ami-utility.is-scrolling .ami-utility__run[aria-hidden="true"] {
	display: flex;
}

/* Pause on hover and on keyboard focus. Someone reading a delivery threshold
   should be able to stop it, and focus-within covers a keyboard user who
   cannot hover at all. */
.ami-utility.is-scrolling:hover .ami-utility__track,
.ami-utility.is-scrolling:focus-within .ami-utility__track {
	animation-play-state: paused;
}

/*
 * Shifts by exactly one run's width, which the script measures and writes to
 * --ami-utility-shift.
 *
 * A percentage would not do: the track's width depends on how many clones were
 * needed to fill the bar, so -50% is only correct when there happen to be two.
 * One run's width is correct for any number, because that is the distance at
 * which the next clone lands precisely where the previous one started.
 */
@keyframes ami-utility-scroll {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(calc(var(--ami-utility-shift, 50%) * -1), 0, 0); }
}

/* No duration override here: the script derives it from the content width so
   the text travels at a constant speed on any screen. Only the type size
   changes. */
@media (max-width: 700px) {
	.ami-utility {
		font-size: var(--ami-text-xs, 0.8rem);
	}
}

/*
 * Motion is an accessibility question, not a stylistic one: scrolling text
 * causes nausea for some people and makes reading impossible for others. This
 * overrides the scrolling state entirely rather than relying on the script to
 * check, so the guarantee does not depend on JavaScript running.
 */
@media (prefers-reduced-motion: reduce) {
	.ami-utility.is-scrolling .ami-utility__track {
		animation: none;
		width: 100%;
		justify-content: center;
	}

	.ami-utility.is-scrolling .ami-utility__run {
		flex-wrap: wrap;
		padding: 0.6rem var(--ami-gutter, 1rem);
	}

	.ami-utility.is-scrolling .ami-utility__run[aria-hidden="true"] {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
 * Header
 * ------------------------------------------------------------------------- */

.ami-header {
	position: sticky;
	inset-block-start: 0;
	z-index: var(--ami-z-header, 100);
	background: var(--ami-bg, #fff);
	box-shadow: var(--ami-shadow-header, 0 1px 0 rgba(11,11,12,.08));
	font-family: var(--ami-font-body, sans-serif);
}

.ami-header__inner {
	display: flex;
	align-items: center;
	gap: var(--ami-space-lg, 1.5rem);
	max-width: var(--ami-container, 100rem);
	margin-inline: auto;
	padding: var(--ami-space-sm, 0.75rem) var(--ami-gutter, 1rem);
}

.ami-header__brand { flex-shrink: 0; }

/* The wordmark lockup: a hard black block cropping the first three letters,
   exactly as the logo does. Rendered in type so it stays crisp and costs no
   image request; swap in a real logo via Customiser → Site Identity. */
.ami-logo {
	display: inline-flex;
	/* centre, not baseline: an image has no baseline to align to, so baseline
	   alignment drops the monogram to sit on the text's descender line. */
	align-items: center;
	font-family: var(--ami-font-display, sans-serif);
	/* Scaled up alongside the monogram. A large mark beside small type reads
	   as two unrelated things rather than one lockup. */
	font-size: clamp(1.25rem, 0.85rem + 1.7vw, 2.25rem);
	font-weight: var(--ami-weight-black, 900);
	letter-spacing: var(--ami-tracking-tight, -0.035em);
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--ami-fg-strong, #0b0b0c);
	white-space: nowrap;
}

.ami-logo__block {
	background: var(--ami-ink, #0b0b0c);
	color: var(--ami-white, #fff);
	padding: 0.28em 0.32em 0.28em 0.38em;
}

.ami-logo__rest { padding-inline-start: 0.3em; }

/* AM monogram, left of the wordmark.
 *
 * Sized from its own token rather than inheriting a cap from a generic
 * `.ami-header__brand img` rule. That rule carried higher specificity than
 * this one and was silently limiting the monogram to whatever height had been
 * set for an uploaded logo — two different marks fighting over one value.
 */
.ami-logo__mark {
	grid-column: 1;
	flex: 0 0 auto;
	display: block;
	height: var(--ami-logo-mark, 88px);
	width: auto;
	max-width: none;
	object-fit: contain;
}

/* Optical spacing, not mathematical. A serif monogram and a heavy grotesque
   block need a little more air between them than the wordmark's own internal
   letterspacing, or they read as one crowded glyph. */
.ami-logo:has(.ami-logo__mark) {
	gap: 0.45em;
}

/* An uploaded logo, from Customiser → Site Identity. Excludes the monogram,
   which has its own token above. */
.ami-logo__image {
	display: block;
	height: auto;
	max-height: var(--ami-logo-height, 100px);
	width: auto;
	max-width: none;
}

.ami-header__nav {
	grid-column: 1;
	justify-self: start;
}

.ami-header__utils {
	grid-column: 3;
	justify-self: end;
	display: flex;
	align-items: center;
	gap: var(--ami-space-lg, 1.5rem);
}

.ami-header__menu,
.ami-drawer__menu,
.ami-footer__menu,
.ami-footer__legal-menu {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ami-header__menu { gap: var(--ami-space-lg, 1.5rem); }

.ami-header__menu a,
.ami-header__util {
	display: inline-flex;
	align-items: center;
	min-height: var(--ami-tap, 44px);
	font-size: var(--ami-text-xs, 0.8rem);
	font-weight: var(--ami-weight-bold, 700);
	letter-spacing: var(--ami-tracking-wide, 0.08em);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--ami-fg-strong, #0b0b0c);
	white-space: nowrap;
}

.ami-header__menu a:hover,
.ami-header__util:hover {
	text-decoration: underline;
	text-underline-offset: 0.35em;
}

.ami-header__menu .current-menu-item > a {
	text-decoration: underline;
	text-underline-offset: 0.35em;
}

/* ---------------------------------------------------------------------------
 * Category nav
 * ------------------------------------------------------------------------- */

.ami-catnav {
	background: var(--ami-bg, #fff);
	border-block-end: var(--ami-border-width, 1px) solid var(--ami-border, #e4e4e7);
}

.ami-catnav__inner {
	max-width: var(--ami-container, 100rem);
	margin-inline: auto;
	padding-inline: var(--ami-gutter, 1rem);
}

.ami-catnav__menu {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
	/* overflow must stay visible or dropdowns are clipped by their own nav. */
	overflow: visible;
}

.ami-catnav__menu > li > a {
	display: inline-flex;
	align-items: center;
	min-height: var(--ami-tap, 44px);
	padding: var(--ami-space-sm, 0.75rem) var(--ami-space-md, 1rem);
	border-block-end: var(--ami-rule-width, 3px) solid transparent;
	font-size: var(--ami-text-xs, 0.8rem);
	font-weight: var(--ami-weight-bold, 700);
	letter-spacing: var(--ami-tracking-wide, 0.08em);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--ami-fg-strong, #0b0b0c);
	white-space: nowrap;
}

.ami-catnav__menu > li > a:hover,
.ami-catnav__menu > .current-menu-item > a {
	border-block-end-color: var(--ami-amber, #ffb302);
}

/* Give a "Clearance" or "Sale" item the sale colour automatically. */
.ami-catnav__menu > li.ami-nav-sale > a { color: var(--ami-sale, #d62839); }

/* Search — persistent, prominent, the primary way to find things. */
.ami-search {
	flex: 1;
	display: flex;
	min-width: 0;
	border: 2px solid var(--ami-ink, #0b0b0c);
	background: var(--ami-bg, #fff);
}

.ami-search__field {
	flex: 1;
	min-width: 0;
	padding: var(--ami-space-sm, 0.75rem) var(--ami-space-md, 1rem);
	border: 0;
	background: transparent;
	font: inherit;
	font-size: var(--ami-text-sm, 0.875rem);
	color: var(--ami-fg, #2a2a2e);
}

.ami-search__field::placeholder { color: var(--ami-fg-muted, #6b6b72); }
.ami-search__field:focus { outline: 0; }

.ami-search:focus-within {
	outline: 3px solid var(--ami-amber, #ffb302);
	outline-offset: 1px;
}

/* Search submit */
.ami-search__submit {
	flex: 0 0 auto;
	padding-inline: var(--ami-space-lg, 1.5rem);
	background: var(--ami-amber, #ffb302);
	color: var(--ami-on-amber, #0b0b0c);
	border: 0;
	font-family: var(--ami-font-display, sans-serif);
	font-size: var(--ami-text-2xs, 0.688rem);
	font-weight: var(--ami-weight-extra, 800);
	letter-spacing: var(--ami-tracking-label, 0.14em);
	text-transform: uppercase;
	cursor: pointer;
	transition: background var(--ami-duration-fast, 120ms) var(--ami-ease, ease);
}

.ami-search__submit:hover { background: var(--ami-amber-hover, #e89e00); }

/* Basket count */
.ami-cart-count {
	margin-inline-start: 0.5em;
	padding: 0.1em 0.5em;
	background: var(--ami-surface, #f5f5f6);
	color: var(--ami-fg-strong, #0b0b0c);
	font-weight: var(--ami-weight-extra, 800);
	font-variant-numeric: tabular-nums;
}

.ami-cart-count.is-filled { background: var(--ami-amber, #ffb302); }

/* Hamburger, drawn in CSS. */
.ami-header__toggle {
	display: none;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--ami-tap, 44px);
	height: var(--ami-tap, 44px);
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	color: inherit;
}

.ami-header__toggle-bars,
.ami-header__toggle-bars::before,
.ami-header__toggle-bars::after {
	display: block;
	width: 22px;
	height: 2px;
	background: currentColor;
	transition: transform var(--ami-duration, 220ms) var(--ami-ease, ease);
}

.ami-header__toggle-bars { position: relative; }

.ami-header__toggle-bars::before,
.ami-header__toggle-bars::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
}

.ami-header__toggle-bars::before { inset-block-start: -7px; }
.ami-header__toggle-bars::after { inset-block-start: 7px; }

.ami-header__toggle[aria-expanded="true"] .ami-header__toggle-bars { background: transparent; }
.ami-header__toggle[aria-expanded="true"] .ami-header__toggle-bars::before { transform: translateY(7px) rotate(45deg); }
.ami-header__toggle[aria-expanded="true"] .ami-header__toggle-bars::after { transform: translateY(-7px) rotate(-45deg); }

/* ---------------------------------------------------------------------------
 * Category nav dropdowns
 * ------------------------------------------------------------------------- */

.ami-catnav__menu li { position: relative; }

/* A solid triangle built from borders rather than a rotated square. The
   rotation trick collapses when a flex context squeezes its box. */
.ami-catnav__menu .menu-item-has-children > a::after {
	content: "";
	flex: 0 0 auto;
	width: 0;
	height: 0;
	margin-inline-start: 0.5em;
	border-inline: 0.28em solid transparent;
	border-block-start: 0.32em solid currentColor;
}

.ami-catnav__menu .sub-menu {
	position: absolute;
	inset-block-start: 100%;
	inset-inline-start: 0;
	z-index: 5;
	min-width: 15rem;
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--ami-bg, #fff);
	border: var(--ami-border-width, 1px) solid var(--ami-ink, #0b0b0c);
	border-block-start: var(--ami-rule-width, 3px) solid var(--ami-amber, #ffb302);
	box-shadow: 0 14px 34px rgba(11, 11, 12, 0.14);
	/* visibility, not display:none — it keeps the panel out of the
	   accessibility tree when closed while still allowing a transition. */
	visibility: hidden;
	opacity: 0;
	transform: translateY(-0.35rem);
	transition: opacity var(--ami-duration-fast, 120ms) var(--ami-ease, ease),
	            transform var(--ami-duration-fast, 120ms) var(--ami-ease, ease),
	            visibility 0s linear var(--ami-duration-fast, 120ms);
}

/* focus-within is load-bearing: without it every child category is
   unreachable by keyboard. */
.ami-catnav__menu > li:hover > .sub-menu,
.ami-catnav__menu > li:focus-within > .sub-menu {
	visibility: visible;
	opacity: 1;
	transform: none;
	transition-delay: 0s;
}

.ami-catnav__menu .sub-menu li { width: 100%; }

.ami-catnav__menu .sub-menu a {
	display: block;
	width: 100%;
	min-height: 0;
	padding: var(--ami-space-sm, 0.75rem) var(--ami-space-md, 1rem);
	border-block-end: var(--ami-border-width, 1px) solid var(--ami-line, #e4e4e7);
	font-size: var(--ami-text-xs, 0.8rem);
	font-weight: var(--ami-weight-semi, 600);
	letter-spacing: var(--ami-tracking-wide, 0.08em);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--ami-fg-strong, #0b0b0c);
	white-space: nowrap;
}

.ami-catnav__menu .sub-menu li:last-child > a { border-block-end: 0; }

.ami-catnav__menu .sub-menu a:hover,
.ami-catnav__menu .sub-menu a:focus-visible {
	background: var(--ami-amber-soft, #fff4da);
	text-decoration: none;
}

/* Third level opens sideways rather than stacking underneath. */
.ami-catnav__menu .sub-menu .sub-menu {
	inset-block-start: -3px;
	inset-inline-start: 100%;
}

.ami-catnav__menu .sub-menu .menu-item-has-children > a::after {
	border-block: 0.28em solid transparent;
	border-inline: 0;
	border-inline-start: 0.32em solid currentColor;
	margin-inline-start: auto;
}

/* Near the right edge a dropdown would otherwise run off screen. */
.ami-catnav__menu > li:last-child .sub-menu,
.ami-catnav__menu > li:nth-last-child(2) .sub-menu {
	inset-inline-start: auto;
	inset-inline-end: 0;
}

.ami-catnav__menu > li:last-child .sub-menu .sub-menu,
.ami-catnav__menu > li:nth-last-child(2) .sub-menu .sub-menu {
	inset-inline-start: auto;
	inset-inline-end: 100%;
}

@media (max-width: 860px) {
	.ami-header__toggle { display: inline-flex; }
	.ami-catnav { display: none; }
	.ami-header__utils { gap: var(--ami-space-md, 1rem); }
	.ami-header__util--account { display: none; }
}

/* Narrow header: three rows.
 *
 * Logo alone on the first row, controls on the second, search on the third.
 * Cramming a logo, hamburger, basket count and search field onto one or two
 * rows leaves every one of them too small — and the logo suffers first, being
 * the only element with no fixed minimum. */
@media (max-width: 600px) {
	.ami-header__inner {
		display: grid;
		grid-template-columns: auto 1fr auto;
		grid-template-areas:
			"brand  brand brand"
			"toggle .     utils"
			"search search search";
		align-items: center;
		gap: var(--ami-space-sm, 0.75rem);
	}

	/* The lockup fills the row it now owns. justify-self: stretch plus a
	   centred flex lets the mark and wordmark grow together and stay centred,
	   rather than the mark growing and the type staying put. */
	.ami-header__brand {
		grid-area: brand;
		justify-self: stretch;
		display: flex;
		justify-content: center;
	}

	/*
	 * Sized from the viewport so the lockup fills its row.
	 *
	 * The whole lockup measures about 7.67em wide — monogram, gap, eight
	 * glyphs of a heavy grotesque, and the block's own padding. At 11.8vw that
	 * lands just inside the row at every width from 600px down to 320px, where
	 * the previous 2.75rem ceiling left it filling barely two thirds.
	 *
	 * The upper bound never binds below 600px; it exists only so nothing
	 * absurd happens if the breakpoint is ever moved.
	 */
	.ami-logo {
		font-size: clamp(1.5rem, 11.8vw, 4.5rem);
		width: 100%;
		justify-content: center;
	}

	/*
	 * Back to em, matching the desktop rule's intent: 1.56em is the height of
	 * the black block — 1em of line box plus its 0.28em padding top and
	 * bottom — so the monogram and the block read as one lockup rather than
	 * two marks that happen to sit together.
	 *
	 * A fixed pixel height here would stop tracking the wordmark the moment
	 * the font-size became fluid, which is exactly what it just did.
	 */
	.ami-logo__mark {
		height: 1.56em;
	}
	.ami-header__toggle { grid-area: toggle; margin-inline-start: 0; }
	.ami-header__utils { grid-area: utils; justify-self: end; }

	.ami-search,
	.ami-search--fibo { grid-area: search; }

	.ami-header__nav { display: none; }
}

/* ---------------------------------------------------------------------------
 * Mobile drawer
 * ------------------------------------------------------------------------- */

.ami-drawer {
	position: fixed;
	inset: 0;
	z-index: var(--ami-z-overlay, 900);
	display: flex;
	flex-direction: column;
	gap: var(--ami-space-lg, 1.5rem);
	/*
	 * The drawer covers the header, so it never needed to clear it — that
	 * padding was pushing the first menu item a long way down for no reason.
	 * Enough room for the close button, and the admin bar when present.
	 */
	padding: var(--ami-space-3xl, 6rem) var(--ami-gutter, 1rem) var(--ami-space-xl, 2.5rem);
	background: var(--ami-bg, #fff);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.ami-drawer[hidden] { display: none; }

/* Close button, pinned to the top corner of the panel.
 *
 * Sits inside the drawer rather than relying on the header's hamburger: the
 * drawer is fixed and covers the header, so that control is underneath the
 * panel and cannot be reached. */
.ami-drawer__close {
	/*
	 * fixed, not absolute: the menu scrolls, and an absolute button scrolls
	 * away with it, leaving someone halfway down a list with no visible exit.
	 */
	position: fixed;
	inset-block-start: var(--ami-space-md, 1rem);
	inset-inline-end: var(--ami-gutter, 1rem);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--ami-tap, 44px);
	height: var(--ami-tap, 44px);
	padding: 0;
	/* A visible control, not a bare glyph. Against a white panel an unadorned
	   cross reads as decoration; a bordered target reads as a button. */
	background: var(--ami-bg, #fff);
	border: 2px solid var(--ami-ink, #0b0b0c);
	border-radius: var(--ami-radius, 0);
	color: var(--ami-fg-strong, #0b0b0c);
	cursor: pointer;
	transition: background var(--ami-duration-fast, 120ms) var(--ami-ease, ease);
}

.ami-drawer__close:hover {
	background: var(--ami-amber, #ffb302);
}

/*
 * Clear the WordPress admin bar.
 *
 * This is why the button appeared to be missing entirely. `position: fixed`
 * resolves against the viewport, ignoring the 46px the admin bar pushes the
 * document down by — and the admin bar sits at z-index 99999 against the
 * drawer's 900, so it renders on top. Logged out the button was visible;
 * logged in it never was, which is the only state a site owner tests in.
 *
 * 46px on small screens, 32px from 783px up: WordPress's own breakpoint.
 */
body.admin-bar .ami-drawer__close {
	inset-block-start: calc(var(--ami-space-md, 1rem) + 46px);
}

@media screen and (min-width: 783px) {
	body.admin-bar .ami-drawer__close {
		inset-block-start: calc(var(--ami-space-md, 1rem) + 32px);
	}
}

.ami-drawer__close svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
}

.ami-drawer__close:focus-visible {
	outline: 3px solid var(--ami-amber, #ffb302);
	outline-offset: 2px;
}

.ami-drawer__menu {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ami-drawer__menu > li > a {
	display: block;
	padding-block: var(--ami-space-sm, 0.75rem);
	border-block-end: var(--ami-border-width, 1px) solid var(--ami-border, #e4e4e7);
	font-family: var(--ami-font-display, sans-serif);
	font-size: var(--ami-text-xl, 1.375rem);
	font-weight: var(--ami-weight-black, 900);
	letter-spacing: var(--ami-tracking-tight, -0.035em);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--ami-fg-strong, #0b0b0c);
}

/* Drawer submenus are shown, not collapsed.
 *
 * A tap-to-expand accordion would need JavaScript and a second tap to reach
 * anything. The drawer is already a scrolling panel, so showing children
 * outright costs a little height and saves every visitor an interaction. */
.ami-drawer__menu .sub-menu {
	margin: 0 0 var(--ami-space-sm, 0.75rem);
	padding: 0;
	list-style: none;
}

.ami-drawer__menu .sub-menu a {
	display: block;
	padding: var(--ami-space-xs, 0.5rem) 0 var(--ami-space-xs, 0.5rem) var(--ami-space-md, 1rem);
	border-inline-start: 2px solid var(--ami-line, #e4e4e7);
	font-family: var(--ami-font-body, sans-serif);
	font-size: var(--ami-text-sm, 0.875rem);
	font-weight: var(--ami-weight-semi, 600);
	letter-spacing: var(--ami-tracking-wide, 0.08em);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--ami-fg, #2a2a2e);
}

.ami-drawer__menu .sub-menu a:hover {
	border-inline-start-color: var(--ami-amber, #ffb302);
	color: var(--ami-fg-strong, #0b0b0c);
}

.ami-drawer__util {
	display: block;
	padding-block: var(--ami-space-sm, 0.75rem);
	font-size: var(--ami-text-sm, 0.875rem);
	font-weight: var(--ami-weight-bold, 700);
	letter-spacing: var(--ami-tracking-wide, 0.08em);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--ami-fg-strong, #0b0b0c);
}

body.admin-bar .ami-drawer {
	padding-block-start: calc(var(--ami-space-3xl, 6rem) + 46px);
}

@media screen and (min-width: 783px) {
	body.admin-bar .ami-drawer {
		padding-block-start: calc(var(--ami-space-3xl, 6rem) + 32px);
	}
}

body.ami-drawer-open { overflow: hidden; }

/* ---------------------------------------------------------------------------
 * Footer — four columns, corporate attribution
 * ------------------------------------------------------------------------- */

/* No top margin. Every shell already carries its own bottom padding, so a
   margin here only added a second gap — and on the home page, where the last
   section is a full-bleed black band, that gap showed as a white stripe
   between two black areas.
   
   A hairline instead. Between the band and the footer it reads as a fine
   division; over a white page it simply disappears. */
.ami-footer {
	margin-block-start: 0;
	border-block-start: 1px solid var(--ami-white, #fff);
	background: var(--ami-ink, #0b0b0c);
	color: var(--ami-white, #fff);
	font-family: var(--ami-font-body, sans-serif);
	font-size: var(--ami-text-sm, 0.875rem);
}

.ami-footer__inner {
	display: grid;
	grid-template-columns: 1.4fr repeat(3, 1fr);
	gap: var(--ami-space-xl, 2.5rem);
	max-width: var(--ami-container, 100rem);
	margin-inline: auto;
	padding: var(--ami-space-2xl, 4rem) var(--ami-gutter, 1rem) var(--ami-space-xl, 2.5rem);
}

@media (max-width: 900px) {
	.ami-footer__inner { grid-template-columns: 1fr 1fr; gap: var(--ami-space-lg, 1.5rem); }
}

@media (max-width: 520px) {
	.ami-footer__inner { grid-template-columns: 1fr; }
}

.ami-footer__wordmark {
	display: inline-flex;
	align-items: baseline;
	font-family: var(--ami-font-display, sans-serif);
	font-size: var(--ami-text-2xl, 2rem);
	font-weight: var(--ami-weight-black, 900);
	letter-spacing: var(--ami-tracking-tight, -0.035em);
	line-height: 1;
	text-transform: uppercase;
}

.ami-footer__wordmark .ami-logo__block {
	background: var(--ami-white, #fff);
	color: var(--ami-ink, #0b0b0c);
}

.ami-footer__tagline {
	margin: var(--ami-space-md, 1rem) 0 0;
	max-width: 30ch;
	font-size: var(--ami-text-base, 1rem);
	font-weight: var(--ami-weight-semi, 600);
	color: var(--ami-amber, #ffb302);
}

.ami-footer__company {
	margin: var(--ami-space-md, 1rem) 0 0;
	max-width: 34ch;
	color: rgba(255, 255, 255, 0.65);
	line-height: var(--ami-leading-normal, 1.55);
}

/* Registered address.
 *
 * font-style: normal undoes the browser default — <address> is italicised by
 * every engine, which reads as emphasis rather than as an address block. */
.ami-footer__address {
	margin: var(--ami-space-md, 1rem) 0 0;
	font-style: normal;
	font-size: var(--ami-text-sm, 0.875rem);
	line-height: var(--ami-leading-normal, 1.55);
	color: rgba(255, 255, 255, 0.65);
}

/* Payment methods.
 *
 * Text badges, not logo reproductions — see the note in the footer block. The
 * bordered pill reads as a payment mark without redrawing anyone's trademark,
 * and swaps cleanly for a real logo image if one is supplied. */
.ami-footer__payments {
	margin-block-start: var(--ami-space-lg, 1.5rem);
}

.ami-footer__payment-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ami-space-xs, 0.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ami-footer__payment {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2rem;
	padding: 0.35rem 0.75rem;
	border: 1px solid rgba(255, 255, 255, 0.3);
	background: rgba(255, 255, 255, 0.06);
	font-size: var(--ami-text-2xs, 0.688rem);
	font-weight: var(--ami-weight-bold, 700);
	letter-spacing: var(--ami-tracking-wide, 0.08em);
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
}

/* A supplied logo replaces the badge entirely — no border, no padding, since
   brand guidelines generally require clear space the badge would eat into. */
.ami-footer__payment:has(img) {
	border: 0;
	background: none;
	padding: 0;
}

.ami-footer__payment img {
	display: block;
	height: 28px;
	width: auto;
}

/* Registration numbers are legal small print, not brand copy — set smaller and
   quieter, but still legible: 0.5 alpha on black clears 4.5:1. */
.ami-footer__registration {
	margin: var(--ami-space-sm, 0.75rem) 0 0;
	font-size: var(--ami-text-2xs, 0.688rem);
	letter-spacing: var(--ami-tracking-wide, 0.08em);
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
}

.ami-footer__coltitle {
	margin: 0 0 var(--ami-space-md, 1rem);
	font-size: var(--ami-text-2xs, 0.688rem);
	font-weight: var(--ami-weight-extra, 800);
	letter-spacing: var(--ami-tracking-label, 0.14em);
	text-transform: uppercase;
	color: var(--ami-white, #fff);
}

.ami-footer__menu,
.ami-footer__legal-menu {
	display: flex;
	flex-direction: column;
	gap: var(--ami-space-xs, 0.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ami-footer__menu a,
.ami-footer__legal-menu a {
	display: inline-block;
	padding-block: 0.25rem;
	color: rgba(255, 255, 255, 0.75);
	text-decoration: none;
}

.ami-footer__menu a:hover,
.ami-footer__legal-menu a:hover {
	color: var(--ami-amber, #ffb302);
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

.ami-footer__base {
	border-block-start: 1px solid rgba(255, 255, 255, 0.15);
}

.ami-footer__base-inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--ami-space-md, 1rem);
	max-width: var(--ami-container, 100rem);
	margin-inline: auto;
	padding: var(--ami-space-md, 1rem) var(--ami-gutter, 1rem);
	font-size: var(--ami-text-2xs, 0.688rem);
	letter-spacing: var(--ami-tracking-wide, 0.08em);
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
}

/* The sitemap link sits in the base row with the copyright, so it inherits
   that muted treatment — underlined only to mark it as a link, since a bare
   word in a row of statements does not read as one. */
.ami-footer__sitemap {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.ami-footer__sitemap:hover {
	color: var(--ami-white, #fff);
}

.ami-footer__copyright { margin: 0; }

.ami-footer__legal-menu--inline {
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--ami-space-md, 1rem);
}

/* ---------------------------------------------------------------------------
 * Archive
 * ------------------------------------------------------------------------- */

.ami-archive {
	width: 100%;
	padding-block: var(--ami-space-lg, 1.5rem) var(--ami-space-section, 3rem);
	font-family: var(--ami-font-body, sans-serif);
	color: var(--ami-fg, #2a2a2e);
}

/* One width for the whole site — the same token the header, footer, single
   product and page shell all read, so every template lines up edge to edge. */
.ami-archive > * {
	max-width: var(--ami-container, 100rem);
	margin-inline: auto;
	padding-inline: var(--ami-gutter, 1rem);
}

.ami-archive__header {
	padding-block: var(--ami-space-md, 1rem) var(--ami-space-lg, 1.5rem);
	border-block-start: var(--ami-rule-width, 3px) solid var(--ami-ink, #0b0b0c);
}

.ami-archive__title {
	margin: 0;
	font-family: var(--ami-font-display, sans-serif);
	font-size: var(--ami-text-3xl, 2.5rem);
	font-weight: var(--ami-weight-black, 900);
	letter-spacing: var(--ami-tracking-tight, -0.035em);
	line-height: var(--ami-leading-tight, 1.02);
	text-transform: uppercase;
	color: var(--ami-fg-strong, #0b0b0c);
}

.ami-archive__description {
	max-width: var(--ami-container-narrow, 48rem);
	margin-block-start: var(--ami-space-sm, 0.75rem);
	color: var(--ami-fg-muted, #6b6b72);
	line-height: var(--ami-leading-normal, 1.55);
}

.ami-archive__bar {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--ami-space-md, 1rem);
	margin-block-end: var(--ami-space-lg, 1.5rem);
	padding-block: var(--ami-space-sm, 0.75rem);
	border-block-end: var(--ami-border-width, 1px) solid var(--ami-border, #e4e4e7);
	font-size: var(--ami-text-xs, 0.8rem);
	font-weight: var(--ami-weight-semi, 600);
	letter-spacing: var(--ami-tracking-wide, 0.08em);
	text-transform: uppercase;
	color: var(--ami-fg-muted, #6b6b72);
}

.ami-archive__bar .woocommerce-result-count { margin: 0; }

.ami-archive__bar select {
	min-height: var(--ami-tap, 44px);
	padding: var(--ami-space-xs, 0.5rem) var(--ami-space-sm, 0.75rem);
	border: 2px solid var(--ami-ink, #0b0b0c);
	border-radius: var(--ami-radius, 0);
	background: var(--ami-bg, #fff);
	font: inherit;
	font-weight: var(--ami-weight-bold, 700);
	text-transform: inherit;
	letter-spacing: inherit;
	color: var(--ami-fg-strong, #0b0b0c);
}

/* Subcategory chips — lets shoppers drill down without the main nav. */
.ami-subcats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ami-space-xs, 0.5rem);
	margin-block: var(--ami-space-md, 1rem);
	padding: 0;
	list-style: none;
}

.ami-subcats a {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: var(--ami-space-xs, 0.5rem) var(--ami-space-md, 1rem);
	border: var(--ami-border-width, 1px) solid var(--ami-border, #e4e4e7);
	background: var(--ami-bg, #fff);
	font-size: var(--ami-text-xs, 0.8rem);
	font-weight: var(--ami-weight-bold, 700);
	letter-spacing: var(--ami-tracking-wide, 0.08em);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--ami-fg-strong, #0b0b0c);
}

.ami-subcats a:hover {
	background: var(--ami-ink, #0b0b0c);
	border-color: var(--ami-ink, #0b0b0c);
	color: var(--ami-white, #fff);
}

.ami-archive__empty {
	padding-block: var(--ami-space-2xl, 4rem);
	color: var(--ami-fg-muted, #6b6b72);
}

.ami-pagination { margin-block-start: var(--ami-space-xl, 2.5rem); }

.ami-pagination ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--ami-space-xs, 0.5rem);
	margin: 0; padding: 0;
	list-style: none;
}

.ami-pagination a,
.ami-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--ami-tap, 44px);
	min-height: var(--ami-tap, 44px);
	padding-inline: var(--ami-space-sm, 0.75rem);
	border: var(--ami-border-width, 1px) solid var(--ami-border, #e4e4e7);
	font-size: var(--ami-text-sm, 0.875rem);
	font-weight: var(--ami-weight-bold, 700);
	text-decoration: none;
	color: var(--ami-fg-strong, #0b0b0c);
}

.ami-pagination .current {
	background: var(--ami-ink, #0b0b0c);
	border-color: var(--ami-ink, #0b0b0c);
	color: var(--ami-white, #fff);
}

/* ---------------------------------------------------------------------------
 * Page shell — cart, checkout, account, and every Gutenberg page
 *
 * This targets the Oxygen Inner Content element (id="ami-main"), so anything
 * rendered through it — About Us, Contact, Terms, and all the WooCommerce
 * pages — shares one boundary with the header, footer, category grid and
 * product page.
 *
 * Same breakout as the archive, for the same reason: the Oxygen Section would
 * otherwise decide the width, and it does not know about our token.
 * ------------------------------------------------------------------------- */

/* LAYOUT MODEL — release, do not break out.
 *
 * The previous approach used `margin-inline: calc(50% - 50vw)` to escape any
 * constraining ancestor. A live diagnostic showed why that cannot work here:
 * Oxygen's .ct-section-inner-wrap is a flex container that does not stretch
 * its children, so a Code Block shrink-wraps to its content — 404px inside a
 * 1536px parent. The breakout then computes 50% of 404px and drags everything
 * hundreds of pixels off-screen.
 *
 * Two further problems with that approach, also visible in the diagnostic:
 * nested shells broke out twice, and 100vw includes the scrollbar, so every
 * breakout drifted ~7px left of true centre.
 *
 * So: neutralise the ancestors instead. Release every Oxygen wrapper that
 * contains one of our shells, let full width propagate down from <body>
 * normally, and cap the content with an ordinary max-width and auto margins.
 * No viewport units, no negative margins, no drift, and nothing that depends
 * on a parent being centred.
 */

/* Release the chain. Scoped by :has() to wrappers actually containing a
   shell, so bespoke Oxygen-designed sections keep the builder's own control. */
.ct-section:has(.ami-home),
.ct-section:has(.ami-archive),
.ct-section:has(.ami-product),
.ct-section:has(.ami-page),
.ct-section-inner-wrap:has(.ami-home),
.ct-section-inner-wrap:has(.ami-archive),
.ct-section-inner-wrap:has(.ami-product),
.ct-section-inner-wrap:has(.ami-page),
.ct-inner-content:has(.ami-home),
.ct-inner-content:has(.ami-archive),
.ct-inner-content:has(.ami-product) {
	width: 100%;
	max-width: none;
	padding-inline: 0;
	overflow: visible;
}

/* The actual culprit: flex children that shrink-wrap instead of filling.
   align-self on the block and align-items on the wrapper, because either one
   alone can be overridden by the builder's own settings. */
.ct-section-inner-wrap:has(.ami-home),
.ct-section-inner-wrap:has(.ami-archive),
.ct-section-inner-wrap:has(.ami-product),
.ct-section-inner-wrap:has(.ami-page),
.ct-inner-content:has(.ami-home),
.ct-inner-content:has(.ami-archive),
.ct-inner-content:has(.ami-product) {
	align-items: stretch;
}

/* Page templates: release whatever wraps Inner Content, so cart, checkout,
   account and Gutenberg pages get the same treatment without needing a class
   of their own.
   
   !important is required, not preferred. Oxygen writes per-element settings as
   ID-scoped CSS — `#section-2-179 .ct-section-inner-wrap { align-items:
   center }` — which is specificity (1,1,0) and beats any class-based rule
   here. The only alternatives are hard-coding section IDs, which differ per
   template and per site, or asking every template to be configured correctly
   forever.
   
   align-items is the one that matters most: `center` makes flex children
   shrink-wrap to their content instead of filling the row, which is exactly
   how a Code Block ended up 404px wide inside a 1536px parent. */
.ct-section:has(.ct-inner-content),
.ct-section-inner-wrap:has(.ct-inner-content) {
	width: 100% !important;
	max-width: none !important;
	padding-inline: 0;
	align-items: stretch !important;
	overflow: visible;
}

/* Inner Content itself can carry its own max-width from the builder's
   settings panel. */
.ct-inner-content,
[id^="inner_content"] {
	width: 100% !important;
	max-width: none !important;
}

/* The Oxygen page-title element is a sibling of Inner Content, not a child, so
   it needs the same cap and gutter applied separately. Identical values on
   both is what puts the title and the body copy on one left edge. */
.ct-section:has(.ct-inner-content) > .ct-section-inner-wrap > .ct-headline,
.ct-section-inner-wrap:has(.ct-inner-content) > .ct-headline {
	width: 100%;
	max-width: var(--ami-container, 100rem);
	margin-inline: auto;
	padding-inline: var(--ami-gutter, 1rem);
	font-family: var(--ami-font-display, sans-serif);
	font-size: var(--ami-text-3xl, 2.5rem);
	font-weight: var(--ami-weight-black, 900);
	letter-spacing: var(--ami-tracking-tight, -0.035em);
	line-height: var(--ami-leading-tight, 1.02);
	text-transform: uppercase;
	text-align: start;
	color: var(--ami-fg-strong, #0b0b0c);
}

.ct-code-block:has(.ami-home),
.ct-code-block:has(.ami-archive),
.ct-code-block:has(.ami-product),
.ct-code-block:has(.ami-page) {
	display: block;
	width: 100%;
	max-width: none;
	align-self: stretch;
	flex: 1 1 auto;
}

/* The page shell itself — Inner Content, for cart, checkout, account and
 * every Gutenberg page.
 *
 * The cap sits on the children, not on the shell. Moving it onto the shell was
 * tried and reverted: it fixed nothing on Gutenberg pages and broke the home,
 * archive and product templates, whose own shells sit several levels below
 * this one and were suddenly capped and padded twice.
 */
.ct-inner-content,
[id^="inner_content"],
#ami-main,
.ami-main {
	width: 100% !important;
	max-width: none !important;
	font-family: var(--ami-font-body, sans-serif);
	font-size: var(--ami-text-base, 1rem);
	line-height: var(--ami-leading-normal, 1.55);
	color: var(--ami-fg, #2a2a2e);
}

.ct-inner-content > *,
[id^="inner_content"] > *,
#ami-main > *,
.ami-main > * {
	max-width: var(--ami-container, 100rem);
	margin-inline: auto;
	padding-inline: var(--ami-gutter, 1rem);
}

/* A shell nested inside the page shell must not cap twice — the inner shell
   does its own capping. */
.ct-inner-content > :is(.ami-archive, .ami-product, .ami-home),
[id^="inner_content"] > :is(.ami-archive, .ami-product, .ami-home),
#ami-main > :is(.ami-archive, .ami-product, .ami-home),
.ami-main > :is(.ami-archive, .ami-product, .ami-home) {
	max-width: none;
	padding-inline: 0;
}

/* Reading measure — OFF by default, opt-in per page.
 *
 * Editor-written pages now run the full container width, the same as every
 * other template. That is the right default here: the constraint only ever
 * applied to user-created pages in the first place (home, category and product
 * render from Code Blocks, and WooCommerce pages were already excluded), so it
 * made those two pages the odd ones out rather than making them more readable.
 *
 * The typographic argument for a measure still stands — at 1600px a paragraph
 * runs roughly 200 characters a line, where the eye loses its place on the
 * return sweep. So the rule is kept, switched off, and available per page.
 *
 * To enable it on a page, add the body class `ami-prose`:
 *
 *   add_filter( 'body_class', function ( $classes ) {
 *       if ( is_page( array( 'about-us', 'privacy-policy' ) ) ) {
 *           $classes[] = 'ami-prose';
 *       }
 *       return $classes;
 *   } );
 *
 * The computed left margin puts the narrower column on the same left edge as a
 * container-width sibling. Without it the two centre on different axes and
 * never line up.
 */
body.ami-prose:not(.woocommerce-page) :is(.ct-inner-content, [id^="inner_content"], #ami-main, .ami-main) > :is(p, ul, ol, blockquote) {
	max-width: calc(var(--ami-container-narrow, 48rem) + (var(--ami-gutter, 1rem) * 2));
	margin-inline: max(0px, calc((100% - var(--ami-container, 100rem)) / 2)) auto;
}

:is(.ct-inner-content, [id^="inner_content"], #ami-main, .ami-main) :is(h1, h2, h3, h4):not([class*="ami-"]) {
	font-family: var(--ami-font-display, sans-serif);
	font-weight: var(--ami-weight-black, 900);
	letter-spacing: var(--ami-tracking-tight, -0.035em);
	line-height: var(--ami-leading-snug, 1.22);
	color: var(--ami-fg-strong, #0b0b0c);
}

:is(.ct-inner-content, [id^="inner_content"], #ami-main, .ami-main) h1:not([class*="ami-"]) {
	font-size: var(--ami-text-3xl, 2.5rem);
	line-height: var(--ami-leading-tight, 1.02);
	text-transform: uppercase;
}

:is(.ct-inner-content, [id^="inner_content"], #ami-main, .ami-main) h2:not([class*="ami-"]) { font-size: var(--ami-text-2xl, 2rem); }
:is(.ct-inner-content, [id^="inner_content"], #ami-main, .ami-main) h3:not([class*="ami-"]) { font-size: var(--ami-text-xl, 1.375rem); }

/* WooCommerce prints the page title itself on cart/checkout/account. */
.woocommerce-page :is(.ct-inner-content, [id^="inner_content"], #ami-main, .ami-main) .entry-title,
:is(.ct-inner-content, [id^="inner_content"], #ami-main, .ami-main) .woocommerce-products-header__title {
	margin-block: 0 var(--ami-space-lg, 1.5rem);
	padding-block-start: var(--ami-space-sm, 0.75rem);
	border-block-start: var(--ami-rule-width, 3px) solid var(--ami-ink, #0b0b0c);
	font-size: var(--ami-text-3xl, 2.5rem);
	text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
 * Single product
 * ------------------------------------------------------------------------- */

.ami-product {
	width: 100%;
	padding-block: var(--ami-space-lg, 1.5rem) var(--ami-space-section, 3rem);
	font-family: var(--ami-font-body, sans-serif);
	color: var(--ami-fg, #2a2a2e);
}

.ami-product > * {
	max-width: var(--ami-container, 100rem);
	margin-inline: auto;
	padding-inline: var(--ami-gutter, 1rem);
}

.ami-product__layout {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: var(--ami-space-xl, 2.5rem);
	align-items: start;
}

@media (max-width: 860px) {
	.ami-product__layout {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--ami-space-lg, 1.5rem);
	}
}

@media (min-width: 861px) {
	.ami-product__summary { position: sticky; inset-block-start: var(--ami-header-offset, 7rem); }
}

.ami-product__summary .product_title {
	margin: 0 0 var(--ami-space-md, 1rem);
	font-family: var(--ami-font-display, sans-serif);
	font-size: var(--ami-text-2xl, 2rem);
	font-weight: var(--ami-weight-black, 900);
	letter-spacing: var(--ami-tracking-tight, -0.035em);
	line-height: var(--ami-leading-tight, 1.02);
	text-transform: uppercase;
	color: var(--ami-fg-strong, #0b0b0c);
}

/* Price block — big, and the single loudest thing in the column. */
.ami-product__summary .price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--ami-space-sm, 0.75rem);
	margin: 0 0 var(--ami-space-lg, 1.5rem);
	font-family: var(--ami-font-display, sans-serif);
	font-size: var(--ami-text-price-lg, 2.5rem);
	font-weight: var(--ami-weight-black, 900);
	letter-spacing: var(--ami-tracking-tight, -0.035em);
	line-height: 1;
	color: var(--ami-fg-strong, #0b0b0c);
	font-variant-numeric: tabular-nums;
}

.ami-product__summary .price del {
	font-size: var(--ami-text-lg, 1.125rem);
	font-weight: var(--ami-weight-medium, 500);
	letter-spacing: 0;
	color: var(--ami-fg-muted, #6b6b72);
}

.ami-product__summary .price ins {
	text-decoration: none;
	color: var(--ami-sale, #d62839);
}

.ami-product__summary .woocommerce-product-details__short-description {
	margin-block-end: var(--ami-space-lg, 1.5rem);
	font-size: var(--ami-text-base, 1rem);
	line-height: var(--ami-leading-normal, 1.55);
	color: var(--ami-fg, #2a2a2e);
}

.ami-product__stock {
	display: inline-flex;
	align-items: center;
	gap: var(--ami-space-xs, 0.5rem);
	margin-block-end: var(--ami-space-md, 1rem);
	font-size: var(--ami-text-xs, 0.8rem);
	font-weight: var(--ami-weight-extra, 800);
	letter-spacing: var(--ami-tracking-wide, 0.08em);
	text-transform: uppercase;
	color: var(--ami-trust, #0e6e5c);
}

.ami-product__stock--out { color: var(--ami-ash, #6b6b72); }

.ami-product__promise {
	flex-direction: column;
	gap: var(--ami-space-xs, 0.5rem);
	padding-inline: 0;
	margin-block-start: var(--ami-space-lg, 1.5rem);
	padding-block-start: var(--ami-space-lg, 1.5rem);
	border-block-start: var(--ami-border-width, 1px) solid var(--ami-border, #e4e4e7);
	text-transform: none;
	letter-spacing: 0;
	font-size: var(--ami-text-sm, 0.875rem);
}

.ami-product__summary .product_meta {
	display: flex;
	flex-direction: column;
	gap: var(--ami-space-2xs, 0.25rem);
	margin-block: var(--ami-space-md, 1rem);
	font-size: var(--ami-text-2xs, 0.688rem);
	letter-spacing: var(--ami-tracking-wide, 0.08em);
	text-transform: uppercase;
	color: var(--ami-fg-muted, #6b6b72);
}

.ami-product__summary .product_meta a { color: inherit; }

.ami-product .related,
.ami-product .upsells {
	margin-block-start: var(--ami-space-section, 3rem);
}

.ami-product .related > h2,
.ami-product .upsells > h2 {
	margin: 0 0 var(--ami-space-lg, 1.5rem);
	padding-block-start: var(--ami-space-sm, 0.75rem);
	border-block-start: var(--ami-rule-width, 3px) solid var(--ami-ink, #0b0b0c);
	font-family: var(--ami-font-display, sans-serif);
	font-size: var(--ami-text-2xl, 2rem);
	font-weight: var(--ami-weight-black, 900);
	letter-spacing: var(--ami-tracking-tight, -0.035em);
	text-transform: uppercase;
	color: var(--ami-fg-strong, #0b0b0c);
}

/* ---------------------------------------------------------------------------
 * Home page shell
 *
 * Same breakout as the archive, so the homepage aligns with every other
 * template regardless of the Oxygen Section it sits in.
 * ------------------------------------------------------------------------- */

.ami-home {
	width: 100%;
	padding-block: 0 var(--ami-space-section, 3rem);
	font-family: var(--ami-font-body, sans-serif);
	color: var(--ami-fg, #2a2a2e);
}

/* A page ending on a full-bleed band should run straight into the footer.
   Trailing padding under a band leaves white space that reads as a mistake
   rather than as breathing room. */
.ami-home:has(> .ami-band:last-child) {
	padding-block-end: 0;
}

.ami-home > .ami-band:last-child {
	margin-block-end: 0;
}

.ami-home > * {
	max-width: var(--ami-container, 100rem);
	margin-inline: auto;
	padding-inline: var(--ami-gutter, 1rem);
}

/* Bands and the feedback banner break the container to run edge-to-edge, then
   contents. Used sparingly — a full-bleed colour field is emphasis, and
   emphasis stops working when everything has it. */
.ami-home > .ami-band,
.ami-home > .ami-reviews {
	max-width: none;
	padding-inline: 0;
}

/*
 * Space between the feedback banner and whatever follows it.
 *
 * Both it and the brand band are near-black, so without a gap they read as one
 * very tall block with a faint seam where two slightly different blacks meet.
 * The page background showing through is what separates them.
 *
 * Scaled rather than fixed: 20px is enough at phone width, where the bands are
 * short, and too little at desktop, where each carries 4rem of internal
 * padding and needs more to look deliberate.
 */
.ami-home > .ami-reviews {
	margin-block-end: clamp(1.25rem, 2.5vw, 3rem);
}

/* Except when it is last, where the gap would show as a stripe above the
   footer — the same reasoning as the band rule above it. */
.ami-home > .ami-reviews:last-child {
	margin-block-end: 0;
}

.ami-band {
	padding-block: var(--ami-space-2xl, 4rem);
	background: var(--ami-ink, #0b0b0c);
	color: var(--ami-white, #fff);
}

.ami-band--soft {
	background: var(--ami-surface, #f5f5f6);
	color: var(--ami-fg, #2a2a2e);
}

.ami-band--amber {
	background: var(--ami-amber, #ffb302);
	color: var(--ami-on-amber, #0b0b0c);
}

.ami-band__inner {
	max-width: var(--ami-container, 100rem);
	margin-inline: auto;
	padding-inline: var(--ami-gutter, 1rem);
}

.ami-band__title {
	color: inherit;
	margin: 0 0 var(--ami-space-md, 1rem);
	font-family: var(--ami-font-display, sans-serif);
	font-size: var(--ami-text-2xl, 2rem);
	font-weight: var(--ami-weight-black, 900);
	letter-spacing: var(--ami-tracking-tight, -0.035em);
	line-height: var(--ami-leading-tight, 1.02);
	text-transform: uppercase;
}

.ami-band__text {
	margin: 0;
	max-width: 62ch;
	font-size: var(--ami-text-lg, 1.125rem);
	line-height: var(--ami-leading-normal, 1.55);
	opacity: 0.85;
}

.ami-band__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--ami-space-xl, 2.5rem);
	margin-block-start: var(--ami-space-xl, 2.5rem);
}

/* Three columns of running text need about 300px each. Below that the lines
   get too short to read comfortably, so go straight to one rather than
   leaving an orphan in a two-column layout. */
@media (max-width: 980px) {
	.ami-band__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--ami-space-lg, 1.5rem);
	}

	.ami-band {
		padding-block: var(--ami-space-xl, 2.5rem);
	}
}

.ami-band__item-title {
	color: inherit;
	margin: 0 0 var(--ami-space-xs, 0.5rem);
	font-family: var(--ami-font-display, sans-serif);
	font-size: var(--ami-text-lg, 1.125rem);
	font-weight: var(--ami-weight-black, 900);
	letter-spacing: var(--ami-tracking-tight, -0.035em);
	text-transform: uppercase;
}

.ami-band__item-text {
	margin: 0;
	font-size: var(--ami-text-sm, 0.875rem);
	line-height: var(--ami-leading-normal, 1.55);
	opacity: 0.8;
}

/* ---------------------------------------------------------------------------
 * FiboSearch
 *
 * Restyles the plugin's markup to match the header: 2px ink border, amber
 * submit, hard corners. FiboSearch ships fairly specific CSS of its own, so
 * several of these need !important to land — leave them.
 *
 * Class names follow FiboSearch's standard markup (dgwt-wcas-*). If the plugin
 * changes them in a future release, these rules stop applying and the search
 * reverts to the plugin's own styling rather than breaking.
 * ------------------------------------------------------------------------- */

.ami-search--fibo {
	flex: 1;
	min-width: 0;
	display: block;
	border: 0;
	background: none;
}

.ami-search--fibo .dgwt-wcas-search-wrapp {
	width: 100%;
	max-width: none;
	min-width: 0;
}

.ami-search--fibo .dgwt-wcas-search-form {
	margin: 0;
	padding: 0;
}

/* The bordered shell. FiboSearch draws its border on the input; move it out to
   the wrapper so the submit button sits flush inside, as in the native form. */
.ami-search--fibo .dgwt-wcas-sf-wrapp {
	display: flex;
	align-items: stretch;
	border: 2px solid var(--ami-ink, #0b0b0c) !important;
	border-radius: var(--ami-radius, 0) !important;
	background: var(--ami-bg, #fff) !important;
	box-shadow: none !important;
	overflow: hidden;
}

.ami-search--fibo .dgwt-wcas-sf-wrapp:focus-within {
	outline: 3px solid var(--ami-amber, #ffb302);
	outline-offset: 1px;
}

.ami-search--fibo input[type="search"].dgwt-wcas-search-input {
	flex: 1;
	min-width: 0;
	height: auto !important;
	min-height: var(--ami-tap, 44px);
	padding: var(--ami-space-sm, 0.75rem) var(--ami-space-md, 1rem) !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	font-family: var(--ami-font-body, sans-serif) !important;
	font-size: var(--ami-text-sm, 0.875rem) !important;
	color: var(--ami-fg, #2a2a2e) !important;
}

.ami-search--fibo input[type="search"].dgwt-wcas-search-input:focus {
	outline: 0 !important;
	box-shadow: none !important;
}

.ami-search--fibo .dgwt-wcas-search-input::placeholder {
	color: var(--ami-fg-muted, #6b6b72);
	opacity: 1;
}

.ami-search--fibo .dgwt-wcas-search-submit {
	flex: 0 0 auto;
	display: flex !important;
	align-items: center;
	justify-content: center;
	min-width: 3.5rem;
	height: auto !important;
	padding-inline: var(--ami-space-lg, 1.5rem) !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: var(--ami-amber, #ffb302) !important;
	color: var(--ami-on-amber, #0b0b0c) !important;
	font-family: var(--ami-font-display, sans-serif) !important;
	font-size: var(--ami-text-2xs, 0.688rem) !important;
	font-weight: var(--ami-weight-extra, 800) !important;
	letter-spacing: var(--ami-tracking-label, 0.14em);
	text-transform: uppercase;
	cursor: pointer;
	transition: background var(--ami-duration-fast, 120ms) var(--ami-ease, ease);
}

.ami-search--fibo .dgwt-wcas-search-submit:hover {
	background: var(--ami-amber-hover, #e89e00) !important;
}

/* The magnifier icon inherits ink so it reads on amber. */
.ami-search--fibo .dgwt-wcas-search-submit svg,
.ami-search--fibo .dgwt-wcas-ico-magnifier {
	fill: var(--ami-on-amber, #0b0b0c) !important;
	color: var(--ami-on-amber, #0b0b0c) !important;
}

.ami-search--fibo .dgwt-wcas-preloader,
.ami-search--fibo .dgwt-wcas-close {
	inset-inline-end: 4rem;
}

/* Suggestions dropdown */
.dgwt-wcas-suggestions-wrapp,
.dgwt-wcas-details-wrapp {
	border: 2px solid var(--ami-ink, #0b0b0c) !important;
	border-radius: var(--ami-radius, 0) !important;
	box-shadow: 0 12px 32px rgba(11, 11, 12, 0.14) !important;
	font-family: var(--ami-font-body, sans-serif);
}

.dgwt-wcas-suggestion {
	border-block-end: var(--ami-border-width, 1px) solid var(--ami-line, #e4e4e7);
	padding-block: var(--ami-space-xs, 0.5rem);
}

.dgwt-wcas-suggestion:last-child { border-block-end: 0; }

.dgwt-wcas-suggestion-selected,
.dgwt-wcas-suggestion:hover {
	background: var(--ami-amber-soft, #fff4da) !important;
}

.dgwt-wcas-st--title,
.dgwt-wcas-st-title {
	font-weight: var(--ami-weight-semi, 600);
	color: var(--ami-fg-strong, #0b0b0c);
}

/* Price in results uses the same tabular, heavy treatment as the cards. */
.dgwt-wcas-sp,
.dgwt-wcas-price {
	font-family: var(--ami-font-display, sans-serif);
	font-weight: var(--ami-weight-black, 900);
	font-variant-numeric: tabular-nums;
	color: var(--ami-fg-strong, #0b0b0c) !important;
}

.dgwt-wcas-sp del { color: var(--ami-fg-muted, #6b6b72) !important; font-weight: var(--ami-weight-medium, 500); }
.dgwt-wcas-sp ins { text-decoration: none; color: var(--ami-sale, #d62839) !important; }

.dgwt-wcas-st-breadcrumbs,
.dgwt-wcas-sd {
	font-size: var(--ami-text-2xs, 0.688rem);
	color: var(--ami-fg-muted, #6b6b72);
}

.dgwt-wcas-suggestion-headline .dgwt-wcas-st {
	font-size: var(--ami-text-2xs, 0.688rem);
	font-weight: var(--ami-weight-extra, 800);
	letter-spacing: var(--ami-tracking-label, 0.14em);
	text-transform: uppercase;
	color: var(--ami-fg-muted, #6b6b72);
}

/* "Show all results" footer */
.dgwt-wcas-st-more-products,
.dgwt-wcas-suggestion-more {
	background: var(--ami-surface, #f5f5f6);
	font-weight: var(--ami-weight-bold, 700);
	letter-spacing: var(--ami-tracking-wide, 0.08em);
	text-transform: uppercase;
	font-size: var(--ami-text-2xs, 0.688rem);
}

/* On phones the search sits on its own row, so let it fill it. */
@media (max-width: 600px) {
	.ami-search--fibo { order: 3; flex-basis: 100%; }
}

/* ---------------------------------------------------------------------------
 * RESPONSIVE PASS
 *
 * The breakpoints across this build accumulated per component rather than to a
 * scale — 1100, 900, 860, 760, 700, 600, 520, 420. They are left as they are
 * rather than renumbered, because each was chosen against the content it
 * governs and a tidy scale would move layouts that currently break in the
 * right places. What follows fixes the cases that were genuinely wrong.
 * ------------------------------------------------------------------------- */

/* Tablet — the awkward width, where two-up cards get wide and three-up get
   tight. The archive bar is the main casualty: result count and sort control
   share a line and crowd each other. */
@media (max-width: 900px) {
	.ami-archive__bar {
		gap: var(--ami-space-sm, 0.75rem);
	}

	.ami-product__layout {
		gap: var(--ami-space-lg, 1.5rem);
	}
}

/* Phone */
@media (max-width: 600px) {
	/* Sort control on its own line and full width. A 44px select squeezed
	   beside a result count is a fiddly tap target on the page where
	   filtering matters most. */
	.ami-archive__bar {
		flex-direction: column;
		align-items: stretch;
	}

	.ami-archive__bar select {
		width: 100%;
	}

	.ami-archive__header {
		padding-block: var(--ami-space-sm, 0.75rem) var(--ami-space-md, 1rem);
	}

	/* Two-line titles on a two-up grid. Reserving three lines is right on
	   desktop, where it aligns prices across four cards; at phone width it
	   pushes the price and button below the fold for no benefit. */
	.ami-product-card__title {
		-webkit-line-clamp: 2;
		min-height: calc(var(--ami-leading-snug, 1.22) * 2em);
	}

	.woocommerce ul.products li.product .woocommerce-loop-product__title {
		-webkit-line-clamp: 2;
		min-height: calc(var(--ami-leading-snug, 1.22) * 2em) !important;
	}

	.ami-product-card__body,
	.ami-product-card__foot {
		padding-inline: var(--ami-space-xs, 0.5rem);
	}

	/* The promise strip in the product summary reads better as a stack. */
	.ami-product__promise {
		gap: var(--ami-space-sm, 0.75rem);
	}
}

/* Small phone — the hero aside is two tiles side by side from 900px down,
   which at this width leaves each barely wide enough for its heading. */
@media (max-width: 560px) {
	.ami-promo__aside {
		grid-template-rows: none;
		grid-template-columns: minmax(0, 1fr);
	}

	.ami-tile--sm {
		min-height: 7rem;
	}

	.ami-tile__cta {
		width: 100%;
		text-align: center;
	}

	/*
	 * Quantity and add-to-cart stay on one line at every width.
	 *
	 * They were stacked below 560px, which is where the button acquired a
	 * 224px height — flex-basis follows the main axis, so a 14rem basis meant
	 * for width became a height the moment the container turned vertical.
	 *
	 * Keeping them side by side avoids that entirely and reads better: a
	 * quantity field marooned above a full-width button looks like two
	 * unrelated controls.
	 */
	.ami-product__summary .cart {
		flex-direction: row;
		align-items: stretch;
		flex-wrap: nowrap;
		gap: var(--ami-space-sm, 0.75rem);
	}

	.ami-product__summary .quantity {
		flex: 0 0 auto;
	}

	.ami-product__summary .quantity input.qty,
	.woocommerce .quantity input.qty {
		/* Wide enough for two digits and the stepper, no wider. Every pixel
		   here comes off the button. */
		width: 4.5rem;
	}

	.ami-product__summary .cart .button,
	.ami-product__summary .cart button[type="submit"],
	.ami-product__summary .single_add_to_cart_button.button {
		/* Takes the remaining width rather than a fixed basis, so it cannot
		   push the quantity field onto its own line. */
		flex: 1 1 auto !important;
		width: auto;
		min-width: 0;
		min-height: var(--ami-tap, 44px);
		height: auto;
		padding-inline: var(--ami-space-md, 1rem);
	}

	.ami-product__summary .quantity input.qty,
	.woocommerce .quantity input.qty {
		width: 100%;
	}
}

/* Very small — gallery thumbnails at four across become too small to identify.
   Three is the floor; below that the strip is decoration rather than
   navigation. */
@media (max-width: 400px) {
	.ami-product .flex-control-thumbs,
	.woocommerce div.product div.images .flex-control-thumbs {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

/* ---------------------------------------------------------------------------
 * Social links
 * ------------------------------------------------------------------------- */

.ami-social {
	margin-block-start: var(--ami-space-lg, 1.5rem);
}

.ami-social__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ami-space-sm, 0.75rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ami-social__link {
	display: flex;
	align-items: center;
	justify-content: center;
	/* A full 44px target. These sit close together, and an icon-sized hit area
	   is one of the more common reasons a footer link is hard to tap. */
	width: var(--ami-tap, 44px);
	height: var(--ami-tap, 44px);
	border: 1px solid rgba(255, 255, 255, 0.3);
	color: var(--ami-white, #fff);
	text-decoration: none;
	transition: background var(--ami-duration-fast, 120ms) var(--ami-ease, ease),
	            color var(--ami-duration-fast, 120ms) var(--ami-ease, ease),
	            border-color var(--ami-duration-fast, 120ms) var(--ami-ease, ease);
}

.ami-social__link:hover {
	background: var(--ami-amber, #ffb302);
	border-color: var(--ami-amber, #ffb302);
	color: var(--ami-on-amber, #0b0b0c);
}

.ami-social__link:focus-visible {
	outline: 3px solid var(--ami-amber, #ffb302);
	outline-offset: 2px;
}

.ami-social__icon {
	display: block;
	width: 20px;
	height: 20px;
	fill: currentColor;
}

/* An official brand asset supplied through the filter arrives as an image
   rather than a path, and should not be recoloured on hover. */
.ami-social__link img {
	display: block;
	width: 20px;
	height: auto;
}

/* ---------------------------------------------------------------------------
 * Back to top
 * ------------------------------------------------------------------------- */

.ami-top {
	position: fixed;
	/*
	 * Stacked above the WhatsApp chat button rather than beside it. Sitting
	 * them side by side would put two unrelated controls within a thumb's
	 * width of each other, which is how people tap the wrong one.
	 */
	inset-block-end: var(--ami-top-offset, 6rem);
	/* Right, aligned with the chat button. FiboSearch parks its own floating
	   button bottom-left, so that corner is already spoken for. */
	inset-inline-end: var(--ami-space-lg, 1.5rem);
	z-index: var(--ami-z-header, 100);
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--ami-tap, 44px);
	height: var(--ami-tap, 44px);
	background: var(--ami-ink, #0b0b0c);
	color: var(--ami-white, #fff);
	border: 2px solid var(--ami-ink, #0b0b0c);
	text-decoration: none;
	box-shadow: 0 6px 20px rgba(11, 11, 12, 0.28);

	/*
	 * Hidden until scrolled, but reachable by keyboard the moment it becomes
	 * visible. visibility rather than display so the transition works, and
	 * pointer-events so an invisible button cannot be clicked by accident.
	 */
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(0.5rem);
	transition: opacity var(--ami-duration-fast, 120ms) var(--ami-ease, ease),
	            transform var(--ami-duration-fast, 120ms) var(--ami-ease, ease),
	            background var(--ami-duration-fast, 120ms) var(--ami-ease, ease),
	            visibility 0s linear var(--ami-duration-fast, 120ms);
}

.ami-top.is-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
	transition-delay: 0s;
}

.ami-top:hover {
	background: var(--ami-amber, #ffb302);
	border-color: var(--ami-amber, #ffb302);
	color: var(--ami-on-amber, #0b0b0c);
}

.ami-top:focus-visible {
	outline: 3px solid var(--ami-amber, #ffb302);
	outline-offset: 3px;
}

.ami-top svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

/*
 * Without JavaScript the button never gets .is-visible, so it would be
 * permanently hidden and the markup pointless. Keyboard focus reveals it
 * regardless — the anchor still works on its own, and this makes it reachable.
 */
.ami-top:focus {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
	transition-delay: 0s;
}

/* On a phone the chat button is closer to the edge and the screen is shorter,
   so the stack tightens rather than pushing the button into the middle of the
   viewport. */
@media (max-width: 600px) {
	.ami-top {
		--ami-top-offset: 5.75rem;
		inset-inline-end: var(--ami-space-sm, 0.75rem);
		width: 2.75rem;
		height: 2.75rem;
	}

	.ami-top svg {
		width: 18px;
		height: 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ami-top {
		transition: opacity var(--ami-duration-fast, 120ms) var(--ami-ease, ease),
		            visibility 0s linear var(--ami-duration-fast, 120ms);
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
 * Page shell
 *
 * For a Code Block page that is not an archive or a product — the returns
 * form, and anything similar. The layout-release rules above already name
 * .ami-page, so it breaks the container and re-contains its own content the
 * same way the other shells do.
 * ------------------------------------------------------------------------- */

.ami-page {
	width: 100%;
}

.ami-page__inner {
	max-width: var(--ami-container, 100rem);
	margin-inline: auto;
	padding-inline: var(--ami-gutter, 1rem);
	padding-block: var(--ami-space-xl, 2.5rem) var(--ami-space-3xl, 6rem);
}

.ami-page__title {
	margin: 0 0 var(--ami-space-lg, 1.5rem);
	font-family: var(--ami-font-display, sans-serif);
	font-size: var(--ami-text-3xl, 2.5rem);
	font-weight: var(--ami-weight-black, 900);
	letter-spacing: var(--ami-tracking-tight, -0.035em);
	line-height: var(--ami-leading-tight, 1.02);
	text-transform: uppercase;
	color: var(--ami-fg-strong, #0b0b0c);
}

/* ---------------------------------------------------------------------------
 * 404
 * ------------------------------------------------------------------------- */

.ami-404__lead {
	max-width: var(--ami-container-narrow, 48rem);
	margin: 0 0 var(--ami-space-xl, 2.5rem);
	font-size: var(--ami-text-lg, 1.125rem);
	line-height: var(--ami-leading-normal, 1.55);
	color: var(--ami-fg, #2a2a2e);
}

/* Wider than the header's search, and given room around it. This is the one
   control on the page most likely to be what the visitor needs, so it should
   not look like a leftover from the header. */
.ami-404__search {
	max-width: 40rem;
	margin-block-end: var(--ami-space-lg, 1.5rem);
}

.ami-404__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ami-space-sm, 0.75rem);
	margin-block-end: var(--ami-space-3xl, 6rem);
}

.ami-404__actions .ami-btn {
	width: auto;
	padding-inline: var(--ami-space-lg, 1.5rem);
}

@media (max-width: 600px) {
	/* Full width and stacked: three buttons wrapping raggedly across two lines
	   reads as clutter on the page someone has landed on by accident. */
	.ami-404__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.ami-404__actions .ami-btn {
		width: 100%;
		text-align: center;
	}
}

/* ---------------------------------------------------------------------------
 * Forms
 * ------------------------------------------------------------------------- */

.ami-form__intro {
	margin-block-end: var(--ami-space-xl, 2.5rem);
	font-size: var(--ami-text-lg, 1.125rem);
	line-height: var(--ami-leading-normal, 1.55);
	color: var(--ami-fg, #2a2a2e);
}

.ami-form {
	max-width: var(--ami-container-narrow, 48rem);
}

.ami-form__row {
	margin-block-end: var(--ami-space-lg, 1.5rem);
}

/* Two per line where the pair is short, one per line on a phone. */
.ami-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 var(--ami-space-lg, 1.5rem);
}

@media (max-width: 600px) {
	.ami-form__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.ami-form__label {
	display: block;
	margin-block-end: var(--ami-space-xs, 0.5rem);
	font-size: var(--ami-text-xs, 0.8rem);
	font-weight: var(--ami-weight-bold, 700);
	letter-spacing: var(--ami-tracking-wide, 0.08em);
	text-transform: uppercase;
	color: var(--ami-fg-strong, #0b0b0c);
}

/* "optional" rather than marking everything else required. Most fields here
   are required, so labelling the exceptions is less visual noise — and it
   states the thing people actually want to know. */
.ami-form__optional {
	margin-inline-start: 0.5em;
	font-weight: var(--ami-weight-medium, 500);
	letter-spacing: 0;
	text-transform: none;
	color: var(--ami-fg-muted, #6b6b72);
}

.ami-form__input,
.ami-form__file {
	display: block;
	width: 100%;
	min-height: var(--ami-tap, 44px);
	padding: var(--ami-space-sm, 0.75rem);
	border: 2px solid var(--ami-ink, #0b0b0c);
	border-radius: var(--ami-radius, 0);
	background: var(--ami-bg, #fff);
	font: inherit;
	font-size: var(--ami-text-base, 1rem);
	color: var(--ami-fg, #2a2a2e);
}

.ami-form__input:focus-visible,
.ami-form__file:focus-visible {
	outline: 3px solid var(--ami-amber, #ffb302);
	outline-offset: 1px;
}

textarea.ami-form__input {
	resize: vertical;
}

.ami-form__fieldset {
	margin-inline: 0;
	padding: 0;
	border: 0;
}

.ami-form__choice {
	display: flex;
	align-items: center;
	gap: var(--ami-space-sm, 0.75rem);
	min-height: var(--ami-tap, 44px);
	cursor: pointer;
}

.ami-form__choice input {
	width: 1.25rem;
	height: 1.25rem;
	accent-color: var(--ami-ink, #0b0b0c);
}

.ami-form__hint {
	margin: var(--ami-space-xs, 0.5rem) 0 0;
	font-size: var(--ami-text-sm, 0.875rem);
	color: var(--ami-fg-muted, #6b6b72);
}

.ami-form__error {
	display: block;
	margin-block-start: var(--ami-space-xs, 0.5rem);
	font-size: var(--ami-text-sm, 0.875rem);
	font-weight: var(--ami-weight-semi, 600);
	color: var(--ami-sale, #d62839);
}

/* Error summary at the top of the form. On a long form the first error can be
   off screen after submitting, and a marker beside a field nobody can see is
   no help at all. */
.ami-form__errors {
	margin-block-end: var(--ami-space-lg, 1.5rem);
	padding: var(--ami-space-md, 1rem);
	border: 2px solid var(--ami-sale, #d62839);
	background: #fdf2f3;
	color: var(--ami-fg-strong, #0b0b0c);
}

.ami-form__errors p { margin: 0 0 var(--ami-space-xs, 0.5rem); }
.ami-form__errors ul { margin: 0; padding-inline-start: 1.25rem; }

.ami-form__sent {
	padding: var(--ami-space-xl, 2.5rem);
	border: var(--ami-rule-width, 3px) solid var(--ami-trust, #0e6e5c);
	background: #f2faf8;
}

.ami-form__sent h2 {
	margin: 0 0 var(--ami-space-sm, 0.75rem);
	font-family: var(--ami-font-display, sans-serif);
	font-size: var(--ami-text-xl, 1.375rem);
	font-weight: var(--ami-weight-black, 900);
	text-transform: uppercase;
	color: var(--ami-trust, #0e6e5c);
}

.ami-form__sent p { margin: 0; }

.ami-form__submit {
	width: auto;
	min-width: 16rem;
	padding-inline: var(--ami-space-xl, 2.5rem);
}

/*
 * The honeypot. Off screen rather than display:none — some bots skip hidden
 * fields, and a field that is simply positioned away is likelier to be filled
 * in. aria-hidden and tabindex="-1" keep it away from anyone real.
 */
.ami-form__hp {
	position: absolute;
	inset-inline-start: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (max-width: 600px) {
	.ami-form__submit {
		width: 100%;
		min-width: 0;
	}
}