/* =========================================================================
   AFFINITY FORMATIONS — COMPONENTS
   Unlayered by design. See the cascade note at the top of base.css.
   Every value references a token. No literals below except geometry that
   has no token (border widths, dash patterns).
   ========================================================================= */

/* -------------------------------------------------------------------------
   BUTTONS
   48px minimum height (56px for primary on mobile) to clear the 44px touch
   target minimum with room for comfortable tapping.
   ------------------------------------------------------------------------- */

.af-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--af-s-2xs);
	min-height: var(--af-btn-h);
	padding: 0 var(--af-s-md);
	border: 1.5px solid transparent;
	border-radius: var(--af-r-md);
	font-family: var(--af-font-body);
	font-size: var(--af-t-body);
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.01em;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color var(--af-dur-fast) var(--af-ease-out),
		border-color var(--af-dur-fast) var(--af-ease-out),
		color var(--af-dur-fast) var(--af-ease-out),
		translate var(--af-dur-fast) var(--af-ease-out),
		box-shadow var(--af-dur-fast) var(--af-ease-out);
}

/* Primary — Crimson fill. The single most important action on any screen. */
.af-btn--primary {
	background-color: var(--af-crimson);
	border-color: var(--af-crimson);
	color: var(--af-surface);
}

.af-btn--primary:hover {
	background-color: var(--af-crimson-deep);
	border-color: var(--af-crimson-deep);
	color: var(--af-surface);
	translate: 0 -1px;
	box-shadow: var(--af-shadow-2);
}

.af-btn--primary:active {
	translate: 0 0;
	box-shadow: none;
}

/* Secondary — outlined, inverts on hover. */
.af-btn--secondary {
	background-color: transparent;
	border-color: var(--af-ink);
	color: var(--af-ink);
}

.af-btn--secondary:hover {
	background-color: var(--af-ink);
	color: var(--af-bone);
	translate: 0 -1px;
}

/* Tertiary — text with an underline that grows from the left. */
.af-btn--tertiary {
	min-height: var(--af-touch);
	padding: 0;
	border: 0;
	border-radius: 0;
	color: var(--af-ink);
	background: none;
	position: relative;
}

.af-btn--tertiary::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 100%;
	height: 1.5px;
	background-color: var(--af-crimson);
	scale: 0 1;
	transform-origin: left center;
	transition: scale var(--af-dur-base) var(--af-ease-out);
}

.af-btn--tertiary:hover {
	color: var(--af-crimson);
}

.af-btn--tertiary:hover::after,
.af-btn--tertiary:focus-visible::after {
	scale: 1 1;
}

/* On dark fields Gold becomes the primary action colour. */
.af-btn--on-dark {
	background-color: var(--af-gold);
	border-color: var(--af-gold);
	color: var(--af-ink);
}

.af-btn--on-dark:hover {
	background-color: var(--af-gold-soft);
	border-color: var(--af-gold-soft);
	color: var(--af-ink);
	translate: 0 -1px;
}

.af-btn--ghost-dark {
	background-color: transparent;
	border-color: var(--af-on-dark-muted);
	color: var(--af-on-dark);
}

.af-btn--ghost-dark:hover {
	border-color: var(--af-on-dark);
	background-color: rgb(255 255 255 / 0.06);
}

.af-btn--lg {
	min-height: 56px;
	padding-inline: var(--af-s-lg);
	font-size: var(--af-t-lead);
}

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

.af-btn[disabled],
.af-btn[aria-disabled="true"] {
	background-color: var(--af-surface-alt);
	border-color: var(--af-line);
	color: var(--af-slate);
	cursor: not-allowed;
	translate: 0 0;
	box-shadow: none;
	pointer-events: none;
}

@media (max-width: 767px) {
	.af-btn--primary {
		min-height: 56px;
	}
}

/* -------------------------------------------------------------------------
   HEADER & NAVIGATION
   ------------------------------------------------------------------------- */

.af-header::before {
	content: "Custom-made • Proof approved • Crafted with care";
	display: block;
	padding: 7px var(--af-s-md);
	background: var(--af-ink-800);
	border-bottom: 1px solid var(--af-ink-700);
	color: var(--af-gold-soft);
	font-size: var(--af-t-micro);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-align: center;
	text-transform: uppercase;
}

/*
 * The header sits at the top of the page and scrolls away with it.
 *
 * It used to be `position: sticky`, pinned to the top of the viewport so it
 * followed the reader down the page. That is the movement the client
 * objected to: the content slid underneath a bar that never left. It is now
 * static — it belongs to the top of the document, not to the screen.
 *
 * The translucent background and blur went with it. Both existed only to
 * make content legible as it passed behind the bar, which no longer happens.
 */
.af-header {
	position: static;
	z-index: 100;
	background-color: var(--af-ink);
	border-bottom: 1px solid var(--af-ink-700);
}

/* -------------------------------------------------------------------------
   HOMEPAGE HERO
   A bright editorial opening that lets the real work carry the emotion.
   ------------------------------------------------------------------------- */

.af-hero-home {
	position: relative;
	overflow: hidden;
	padding-block: clamp(3.5rem, 7vw, 7rem) var(--af-s-xl);
	background:
		radial-gradient(circle at 80% 20%, color-mix(in srgb, var(--af-gold-soft) 45%, transparent), transparent 32%),
		linear-gradient(145deg, var(--af-bone) 0%, var(--af-surface) 64%, var(--af-surface-alt) 100%);
}

.af-hero-home__glow {
	position: absolute;
	width: 32rem;
	height: 32rem;
	right: -12rem;
	top: -14rem;
	border: 1px solid color-mix(in srgb, var(--af-gold) 35%, transparent);
	border-radius: 50%;
	box-shadow: 0 0 0 5rem color-mix(in srgb, var(--af-gold-soft) 10%, transparent);
}

.af-hero-home__grid {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(28rem, 1.1fr);
	align-items: center;
	gap: clamp(3rem, 6vw, 7rem);
}

.af-hero-home__copy {
	display: flex;
	flex-direction: column;
	gap: var(--af-s-lg);
	max-width: 42rem;
	padding-block: var(--af-s-xs);
}

.af-hero-home .af-display {
	max-width: 9ch;
	font-size: clamp(3.8rem, 7vw, 7rem);
	line-height: 0.88;
	letter-spacing: -0.045em;
}

.af-kicker-pill {
	width: fit-content;
	padding: 8px 14px;
	border: 1px solid var(--af-line);
	border-radius: var(--af-r-pill);
	background: color-mix(in srgb, var(--af-surface) 82%, transparent);
	color: var(--af-crimson-deep);
	font-size: var(--af-t-micro);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.af-hero-home__actions { gap: var(--af-s-sm); }
.af-hero-home__actions p { margin: 0; }

.af-hero-home__proof {
	max-width: 38rem;
	padding: var(--af-s-sm) 0 var(--af-s-sm) var(--af-s-md);
	border-left: 3px solid var(--af-gold);
	color: var(--af-slate);
	font-size: var(--af-t-small);
}

.af-hero-home__proof strong { color: var(--af-ink); }

.af-hero-gallery {
	position: relative;
	min-height: 0;
	isolation: isolate;
}

.af-hero-gallery__feature {
	position: relative;
	margin: 0;
	overflow: hidden;
	background: var(--af-ink);
	border: 1px solid color-mix(in srgb, var(--af-gold-soft) 35%, var(--af-ink));
	border-radius: var(--af-r-lg);
	box-shadow: var(--af-shadow-4);
}

.af-hero-gallery__feature img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: contain;
}

.af-hero-home__trust {
	position: relative;
	justify-content: space-between;
	gap: var(--af-s-md);
	margin-top: var(--af-s-2xl);
	padding-top: var(--af-s-lg);
	border-top: 1px solid var(--af-line);
	color: var(--af-slate);
	font-size: var(--af-t-small);
	font-weight: 600;
}

.af-hero-home__trust p { margin: 0; }
.af-hero-home__trust span { color: var(--af-crimson); }

@media (max-width: 1023px) {
	.af-hero-home__grid { grid-template-columns: 1fr; }
	.af-hero-home__copy {
		max-width: 48rem;
		padding-block: var(--af-s-sm);
	}
	.af-hero-home .af-display { line-height: 0.94; }
	.af-hero-gallery { width: 100%; max-width: 56rem; }
}

@media (max-width: 600px) {
	.af-header::before { font-size: 0.65rem; }
	.af-hero-home { padding-top: var(--af-s-2xl); }
	.af-hero-home .af-display { font-size: clamp(3.4rem, 17vw, 5rem); }
	.af-hero-home__actions { align-items: stretch; flex-direction: column; }
	.af-hero-home__actions .af-btn { width: 100%; }
	.af-hero-gallery { margin-top: var(--af-s-md); }
	.af-hero-gallery__feature { border-radius: var(--af-r-md); }
	.af-hero-home__trust { justify-content: flex-start; }
}

/* Product-led category tiles */
.af-product-tile {
	border-radius: var(--af-r-lg);
	box-shadow: var(--af-shadow-2);
	overflow: hidden;
	transition: transform var(--af-dur-base) var(--af-ease-out), box-shadow var(--af-dur-base) var(--af-ease-out);
}

.af-product-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 30%, rgb(14 14 16 / 0.88) 100%);
}

.af-product-tile:hover { transform: translateY(-6px); box-shadow: var(--af-shadow-4); }
.af-product-tile .wp-block-cover__image-background { transition: transform 700ms var(--af-ease-out); }
.af-product-tile:hover .wp-block-cover__image-background { transform: scale(1.04); }
.af-product-tile .wp-block-cover__inner-container { position: relative; z-index: 2; }
.af-product-tile h3 { font-size: clamp(1.8rem, 3vw, 2.6rem) !important; }
.af-product-tile__link { color: var(--af-surface); font-weight: 700; text-decoration: none; }
.af-product-tile__link span { color: var(--af-gold); }

.af-finish-photo { border-radius: var(--af-r-lg); overflow: hidden; box-shadow: var(--af-shadow-4); }
.af-finish-photo__caption {
	position: absolute;
	left: var(--af-s-md);
	bottom: var(--af-s-md);
	margin: 0;
	padding: 8px 12px;
	border: 1px solid rgb(255 255 255 / 0.2);
	border-radius: var(--af-r-pill);
	background: rgb(14 14 16 / 0.68);
	color: var(--af-on-dark);
	font-size: var(--af-t-micro);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	backdrop-filter: blur(8px);
}

.af-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--af-s-lg);
	min-height: var(--af-header-h);
	padding-block: var(--af-s-xs);
}

.af-header__brand {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	text-decoration: none;
	color: var(--af-on-dark);
}

.af-header__brand img,
.af-header__brand svg {
	height: 40px;
	width: auto;
}

/*
 * Brand mark.
 *
 * The site title link is replaced with the wordmark image rather than
 * emptied: the text stays in the document for screen readers and for search
 * engines, and is pushed out of sight visually. An <img> here would need the
 * theme URL, which a static template part cannot produce — CSS can, because
 * the path resolves relative to this stylesheet.
 *
 * The full badge logo is not used here. It is a 4x4 print label — a squarish
 * card with a framed border and a tagline — and at header height it shrinks
 * to an illegible 60px stamp. The badge belongs on dark surfaces where it
 * has room: the footer, the favicon, the social share image.
 */
.af-header__brand .wp-block-site-title {
	margin: 0;
}

.af-header__brand .wp-block-site-title a {
	display: block;
	width: 168px;
	height: 52px;
	background-image: url("../images/af-wordmark.png");
	background-repeat: no-repeat;
	background-position: left center;
	background-size: contain;
	/* Push the text out of view without hiding it from assistive tech. */
	text-indent: -200vw;
	overflow: hidden;
	white-space: nowrap;
}

@media (max-width: 600px) {
	.af-header__brand .wp-block-site-title a {
		width: 132px;
		height: 44px;
	}
}

.af-header__actions {
	display: flex;
	align-items: center;
	gap: var(--af-s-sm);
	flex-shrink: 0;
	color: var(--af-on-dark);
}

.af-header__actions a,
.af-header__actions button,
.af-header .wc-block-mini-cart__button,
.af-header .wp-block-woocommerce-customer-account a {
	color: var(--af-on-dark);
}

.af-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--af-touch);
	height: var(--af-touch);
	border-radius: var(--af-r-sm);
	color: var(--af-on-dark);
	transition: background-color var(--af-dur-fast) var(--af-ease-out);
}

.af-icon-btn:hover {
	background-color: var(--af-ink-700);
}

.af-cart-count {
	position: absolute;
	top: 2px;
	right: 2px;
	min-width: 18px;
	height: 18px;
	padding-inline: 4px;
	display: grid;
	place-items: center;
	background-color: var(--af-crimson);
	color: var(--af-surface);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	border-radius: var(--af-r-pill);
}

/* --- Primary navigation --------------------------------------------------
   Built on the core Navigation block. WordPress supplies the markup,
   submenu ARIA, responsive overlay, focus trap and Escape handling; we
   supply the appearance. This keeps menu editing in the Site Editor where
   staff can reach it, and avoids re-implementing tested accessibility.
   ------------------------------------------------------------------------- */

.af-nav {
	flex: 1 1 auto;
}

.af-nav .wp-block-navigation__container {
	gap: var(--af-s-md);
}

.af-nav .wp-block-navigation-item__content {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: var(--af-touch);
	font-size: var(--af-t-small);
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--af-on-dark);
	text-decoration: none;
}

/*
 * Navigation blocks can receive link and label colours from saved Global
 * Styles after the theme stylesheets load. Pin both rendered elements to the
 * on-dark token so editor customizations cannot make the desktop labels
 * disappear against this header.
 */
.af-header .af-nav .wp-block-navigation-item__content,
.af-header .af-nav .wp-block-navigation-item__content:visited,
.af-header .af-nav .wp-block-navigation-item__label {
	color: var(--af-on-dark) !important;
}

/* Underline grows from the left on hover and for the current page. */
.af-nav .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 8px;
	width: 100%;
	height: 1.5px;
	background-color: var(--af-crimson);
	scale: 0 1;
	transform-origin: left center;
	transition: scale var(--af-dur-base) var(--af-ease-out);
}

.af-nav .wp-block-navigation-item__content:hover::after,
.af-nav .current-menu-item > .wp-block-navigation-item__content::after {
	scale: 1 1;
}

/* Submenu arrow */
.af-nav .wp-block-navigation__submenu-icon {
	color: var(--af-on-dark-muted);
	transition: rotate var(--af-dur-fast) var(--af-ease-out);
}

.af-nav .wp-block-navigation-item[aria-expanded="true"] .wp-block-navigation__submenu-icon,
.af-nav .wp-block-navigation-submenu[aria-expanded="true"] .wp-block-navigation__submenu-icon {
	rotate: 180deg;
}

/* --- Desktop dropdown panels --------------------------------------------- */

@media (min-width: 1024px) {

	.af-nav .wp-block-navigation__container > .wp-block-navigation-item {
		position: static;
	}

	.af-nav .wp-block-navigation__submenu-container {
		min-width: 16rem;
		padding: var(--af-s-sm);
		background-color: var(--af-surface);
		border: 1px solid var(--af-line);
		border-radius: var(--af-r-lg);
		box-shadow: var(--af-shadow-3);
		/*
		 * Core renders submenus with opacity/visibility already; we only
		 * add the lift so the panel arrives rather than snapping.
		 */
		translate: 0 -6px;
		transition:
			opacity var(--af-dur-base) var(--af-ease-out),
			translate var(--af-dur-base) var(--af-ease-out);
	}

	.af-nav .wp-block-navigation-item:hover > .wp-block-navigation__submenu-container,
	.af-nav .wp-block-navigation-item:focus-within > .wp-block-navigation__submenu-container,
	.af-nav .wp-block-navigation-submenu[aria-expanded="true"] > .wp-block-navigation__submenu-container {
		translate: 0 0;
	}

	.af-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		display: block;
		width: 100%;
		padding: 10px var(--af-s-sm);
		border-radius: var(--af-r-sm);
		font-weight: 400;
		color: var(--af-ink);
		transition:
			background-color var(--af-dur-fast) var(--af-ease-out),
			color var(--af-dur-fast) var(--af-ease-out);
	}

	.af-header .af-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
	.af-header .af-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__label {
		color: var(--af-ink) !important;
	}

	.af-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
		content: none;
	}

	.af-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
		background-color: var(--af-surface-alt);
		color: var(--af-crimson);
	}

	.af-header .af-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
	.af-header .af-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover .wp-block-navigation-item__label {
		color: var(--af-crimson) !important;
	}

	/*
	 * A submenu with many children lays out in two columns rather than one
	 * very tall list. Applied by adding the class to the submenu block.
	 */
	.af-nav .af-submenu--wide > .wp-block-navigation__submenu-container {
		min-width: 34rem;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 2px var(--af-s-sm);
	}
}

/* --- Mobile overlay ------------------------------------------------------
   Core's responsive overlay, restyled. It already traps focus, closes on
   Escape, and locks scroll.
   ------------------------------------------------------------------------- */

.af-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--af-s-md);
	background-color: var(--af-bone);
	color: var(--af-ink);
}

.af-nav .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content {
	padding-top: var(--af-s-xl);
}

.af-nav .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container {
	gap: 0;
}

.af-nav .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid var(--af-line);
}

.af-nav .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content {
	width: 100%;
	min-height: 56px;
	font-size: var(--af-t-lead);
	font-weight: 500;
	color: var(--af-ink);
}

.af-header .af-nav .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content,
.af-header .af-nav .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__label {
	color: var(--af-ink) !important;
}

.af-nav .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-icon {
	color: var(--af-slate);
}

.af-nav .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content::after {
	content: none;
}

/* Submenus in the overlay read as an indented group, not a second level. */
.af-nav .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-container {
	padding-left: var(--af-s-sm);
	border: 0;
	background: none;
	box-shadow: none;
}

.af-nav .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: var(--af-t-body);
	color: var(--af-slate);
	min-height: 48px;
}

.af-header .af-nav .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-container .wp-block-navigation-item__content,
.af-header .af-nav .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-container .wp-block-navigation-item__label {
	color: var(--af-slate) !important;
}

/* Open/close controls */
.af-nav .wp-block-navigation__responsive-container-open,
.af-nav .wp-block-navigation__responsive-container-close {
	align-items: center;
	justify-content: center;
	width: var(--af-touch);
	height: var(--af-touch);
	border-radius: var(--af-r-sm);
	color: var(--af-on-dark);
	transition: background-color var(--af-dur-fast) var(--af-ease-out);
}

.af-nav .wp-block-navigation__responsive-container-open {
	display: none;
}

.af-nav .wp-block-navigation__responsive-container-close {
	display: inline-flex;
	color: var(--af-ink);
}

.af-nav .wp-block-navigation__responsive-container-open:hover,
.af-nav .wp-block-navigation__responsive-container-close:hover {
	background-color: var(--af-ink-700);
}

.af-nav .wp-block-navigation__responsive-container-close:hover {
	background-color: var(--af-surface-alt);
}

/*
 * The primary CTA is pinned to the top of the mobile overlay rather than
 * buried at the end of the list. Add the class to the menu item.
 */
.af-nav .wp-block-navigation__responsive-container.is-menu-open
	.af-nav-cta {
	order: -1;
	border-bottom: 0;
	margin-bottom: var(--af-s-sm);
}

.af-nav .af-nav-cta > .wp-block-navigation-item__content {
	justify-content: center;
	padding: 0 var(--af-s-md);
	min-height: var(--af-btn-h);
	background-color: var(--af-crimson);
	color: var(--af-surface);
	border-radius: var(--af-r-md);
	font-weight: 600;
	letter-spacing: 0.01em;
	transition: background-color var(--af-dur-fast) var(--af-ease-out);
}

.af-header .af-nav .af-nav-cta > .wp-block-navigation-item__content,
.af-header .af-nav .af-nav-cta > .wp-block-navigation-item__content .wp-block-navigation-item__label {
	color: var(--af-surface) !important;
}

.af-nav .af-nav-cta > .wp-block-navigation-item__content:hover {
	background-color: var(--af-crimson-deep);
	color: var(--af-surface);
}

.af-nav .af-nav-cta > .wp-block-navigation-item__content::after {
	content: none;
}

@media (max-width: 599px) {
	.af-nav .wp-block-navigation__responsive-container-open {
		display: inline-flex;
	}
}

@media (max-width: 1023px) {
	.af-nav .af-nav-cta > .wp-block-navigation-item__content {
		width: 100%;
		min-height: 56px;
	}
}

/* -------------------------------------------------------------------------
   CARDS
   ------------------------------------------------------------------------- */

.af-card {
	display: flex;
	flex-direction: column;
	background-color: var(--af-surface);
	border-radius: var(--af-r-md);
	overflow: hidden;
	box-shadow: var(--af-shadow-1);
	transition:
		box-shadow var(--af-dur-base) var(--af-ease-out),
		translate var(--af-dur-base) var(--af-ease-out);
}

.af-card:hover {
	box-shadow: var(--af-shadow-2);
	translate: 0 -2px;
}

.af-card__media {
	position: relative;
	aspect-ratio: 1 / 1;
	background-color: var(--af-surface-alt);
	overflow: hidden;
	/* Product photography is never rounded — see design system §3. */
	border-radius: 0;
}

.af-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity var(--af-dur-base) var(--af-ease-out);
}

/* Second image crossfades in on hover when one is supplied. */
.af-card__media img + img {
	position: absolute;
	inset: 0;
	opacity: 0;
}

.af-card:hover .af-card__media img + img {
	opacity: 1;
}

.af-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--af-s-2xs);
	padding: var(--af-s-md);
}

.af-card__title {
	font-family: var(--af-font-body);
	font-size: var(--af-t-h3);
	font-weight: 600;
	line-height: 1.25;
	margin: 0;
}

/*
 * The whole card is one link with the title as its accessible name.
 * Four separate tab stops per card would make a 12-product grid a
 * 48-stop keyboard slog.
 */
.af-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.af-card {
	position: relative;
}

.af-card__price {
	font-size: var(--af-t-body);
	font-weight: 600;
	color: var(--af-ink);
	font-variant-numeric: tabular-nums;
}

/* Editorial / occasion card with an overlaid label. */
.af-tile {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--af-r-md);
	text-decoration: none;
	background-color: var(--af-ink);
}

.af-tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: scale var(--af-dur-slow) var(--af-ease-out);
}

.af-tile:hover img {
	scale: 1.04;
}

.af-tile__veil {
	position: absolute;
	inset: 0;
	background: var(--wp--preset--gradient--ink-veil);
}

.af-tile__label {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: var(--af-s-md);
	color: var(--af-on-dark);
	font-family: var(--af-font-display);
	font-size: var(--af-t-h3);
	line-height: 1.15;
}

/* -------------------------------------------------------------------------
   GALLERY
   Rendered by the plugin's [af_gallery] shortcode (Milestone 6). Reuses
   .af-tile from the card section above for individual entries.
   ------------------------------------------------------------------------- */

.af-gallery__filters {
	margin-bottom: var(--af-s-lg);
	padding-bottom: var(--af-s-md);
	border-bottom: 1px solid var(--af-line);
}

.af-gallery__filters a {
	text-decoration: none;
}

.af-gallery__grid {
	display: grid;
	gap: var(--af-s-md);
	grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
}

/*
 * .af-tile's base rule already sizes a direct <img> child to fill the
 * tile via width/height 100% + object-fit:cover — no extra positioning
 * needed here. Only the caption/veil layers use position:absolute.
 */

/* -------------------------------------------------------------------------
   CHIPS, BADGES, TRUST ROW
   ------------------------------------------------------------------------- */

.af-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border-radius: var(--af-r-pill);
	font-size: var(--af-t-micro);
	font-weight: 600;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

.af-chip--neutral { background-color: color-mix(in srgb, var(--af-slate) 12%, transparent);   color: var(--af-slate); }
.af-chip--info    { background-color: color-mix(in srgb, var(--af-info) 12%, transparent);    color: var(--af-info); }
.af-chip--warning { background-color: color-mix(in srgb, var(--af-warning) 14%, transparent); color: var(--af-warning); }
.af-chip--crimson { background-color: color-mix(in srgb, var(--af-crimson) 10%, transparent); color: var(--af-crimson); }
.af-chip--success { background-color: color-mix(in srgb, var(--af-success) 12%, transparent); color: var(--af-success); }
.af-chip--error   { background-color: color-mix(in srgb, var(--af-error) 12%, transparent);   color: var(--af-error); }

.af-trust {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--af-s-xs) var(--af-s-md);
	font-size: var(--af-t-small);
	color: var(--af-slate);
}

.af-trust__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.af-trust__item + .af-trust__item::before {
	content: "•";
	color: var(--af-line);
	margin-inline-end: var(--af-s-2xs);
}

.af-section--dark .af-trust {
	color: var(--af-on-dark-muted);
}

/* -------------------------------------------------------------------------
   STEPS (How It Works)
   ------------------------------------------------------------------------- */

.af-steps {
	display: grid;
	gap: var(--af-s-lg);
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	counter-reset: af-step;
	list-style: none;
	margin: 0;
	padding: 0;
}

.af-step {
	counter-increment: af-step;
	display: flex;
	flex-direction: column;
	gap: var(--af-s-2xs);
	padding-top: var(--af-s-md);
	border-top: 2px solid var(--af-gold-soft);
}

.af-step::before {
	content: "0" counter(af-step);
	font-family: var(--af-font-display);
	font-size: var(--af-t-h3);
	font-variation-settings: var(--wp--custom--font-variation--display);
	color: var(--af-gold);
	line-height: 1;
}

.af-step__title {
	font-size: var(--af-t-lead);
	font-weight: 600;
	line-height: 1.3;
	margin: 0;
}

.af-step__text {
	font-size: var(--af-t-small);
	color: var(--af-slate);
	margin: 0;
}

.af-section--dark .af-step {
	border-top-color: var(--af-ink-700);
}

.af-section--dark .af-step__text {
	color: var(--af-on-dark-muted);
}

/* -------------------------------------------------------------------------
   FORMS
   Labels are always visible above the field. Placeholder-only labelling
   fails both accessibility and usability and is banned in this build.
   ------------------------------------------------------------------------- */

.af-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.af-label {
	font-size: var(--af-t-small);
	font-weight: 600;
	color: var(--af-ink);
}

.af-label__optional {
	font-weight: 400;
	color: var(--af-slate);
}

.af-input,
.af-select,
.af-textarea {
	width: 100%;
	min-height: var(--af-control-h);
	padding: var(--af-s-xs) var(--af-s-sm);
	background-color: var(--af-surface-alt);
	border: 1px solid var(--af-line);
	border-radius: var(--af-r-sm);
	font-size: var(--af-t-body);
	color: var(--af-ink);
	transition:
		border-color var(--af-dur-fast) var(--af-ease-out),
		background-color var(--af-dur-fast) var(--af-ease-out);
}

.af-textarea {
	min-height: 8rem;
	line-height: 1.6;
	resize: vertical;
}

.af-input:hover,
.af-select:hover,
.af-textarea:hover {
	border-color: var(--af-slate);
}

.af-input:focus,
.af-select:focus,
.af-textarea:focus {
	background-color: var(--af-surface);
	border-color: var(--af-crimson);
	outline: 3px solid var(--af-info);
	outline-offset: 2px;
}

.af-input::placeholder,
.af-textarea::placeholder {
	color: var(--af-slate);
	opacity: 0.75;
}

.af-help {
	font-size: var(--af-t-small);
	color: var(--af-slate);
}

.af-error-text {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	font-size: var(--af-t-small);
	font-weight: 500;
	color: var(--af-error);
}

.af-input[aria-invalid="true"],
.af-textarea[aria-invalid="true"],
.af-select[aria-invalid="true"] {
	border-color: var(--af-error);
	background-color: color-mix(in srgb, var(--af-error) 5%, var(--af-surface));
}

/* -------------------------------------------------------------------------
   BREADCRUMB
   ------------------------------------------------------------------------- */

.af-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	font-size: var(--af-t-small);
	color: var(--af-slate);
	padding-block: var(--af-s-sm);
}

.af-breadcrumb a {
	color: var(--af-slate);
	text-decoration: none;
}

.af-breadcrumb a:hover {
	color: var(--af-crimson);
	text-decoration: underline;
}

.af-breadcrumb__sep {
	color: var(--af-line);
}

/* -------------------------------------------------------------------------
   CTA PANEL
   Closing call to action for content pages — How It Works, policies, guides.
   Sits inside the normal content column rather than breaking full width, so
   it reads as the end of the article rather than a separate advertisement.
   ------------------------------------------------------------------------- */

.af-cta-panel {
	margin-top: var(--af-s-2xl);
	padding: var(--af-s-xl);
	background-color: var(--af-surface-alt);
	border: 1px solid var(--af-line);
	border-radius: var(--af-r-lg);
	text-align: center;
}

.af-cta-panel h2 {
	margin-bottom: var(--af-s-xs);
}

.af-cta-panel p {
	max-width: var(--af-measure-lead);
	margin-inline: auto;
	color: var(--af-slate);
}

.af-cta-panel__actions {
	justify-content: center;
	margin-top: var(--af-s-lg);
	gap: var(--af-s-sm);
}

/* The buttons are wrapped in paragraphs by the block editor. */
.af-cta-panel__actions p {
	margin: 0;
}

@media (max-width: 600px) {
	.af-cta-panel {
		padding: var(--af-s-lg) var(--af-s-md);
	}

	.af-cta-panel__actions {
		flex-direction: column;
		align-items: stretch;
	}
}

/* -------------------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------------------- */

.af-footer {
	background-color: var(--af-ink);
	color: var(--af-on-dark);
	padding-block: var(--af-s-3xl) var(--af-s-xl);
}

.af-footer a {
	color: var(--af-on-dark-muted);
	text-decoration: none;
	transition: color var(--af-dur-fast) var(--af-ease-out);
}

.af-footer a:hover {
	color: var(--af-gold);
}

.af-footer .af-btn--on-dark,
.af-footer .af-btn--on-dark:visited,
.af-footer .af-btn--on-dark:hover {
	font-family: var(--af-font-body);
	font-size: var(--af-t-body);
	font-weight: 700;
	letter-spacing: 0.01em;
	color: var(--af-ink);
}

.af-footer__grid {
	display: grid;
	gap: var(--af-s-xl);
	grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}

.af-footer__intro {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: var(--af-s-xl);
	margin-bottom: var(--af-s-3xl);
	padding-bottom: var(--af-s-2xl);
	border-bottom: 1px solid var(--af-ink-700);
}

.af-footer__intro h2 {
	max-width: 16ch;
	margin: 0;
	color: var(--af-on-dark);
	font-size: clamp(2.25rem, 5vw, 4.5rem);
	line-height: 0.98;
}

.af-footer__intro p { margin: 0; flex-shrink: 0; }

@media (max-width: 767px) {
	.af-footer__intro { align-items: flex-start; flex-direction: column; }
}

.af-footer__heading {
	font-family: var(--af-font-body);
	font-size: var(--af-t-micro);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--af-gold);
	margin-bottom: var(--af-s-sm);
}

.af-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--af-s-2xs);
	font-size: var(--af-t-small);
}

.af-footer__bottom {
	margin-top: var(--af-s-2xl);
	padding-top: var(--af-s-lg);
	border-top: 1px solid var(--af-ink-700);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--af-s-md);
	font-size: var(--af-t-micro);
	color: var(--af-on-dark-muted);
}

.af-footer__tagline {
	font-family: var(--af-font-display);
	font-variation-settings: var(--wp--custom--font-variation--display);
	font-size: var(--af-t-small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--af-gold);
}

/* -------------------------------------------------------------------------
   STICKY MOBILE CTA BAR
   Appears on product and configurator pages (brief §5, §34).
   ------------------------------------------------------------------------- */

/*
 * The floating bottom bar is switched off.
 *
 * It was pinned to the bottom of the screen and slid into view once the
 * main call to action scrolled past — a second piece of furniture moving
 * independently of the page. Removed for the same reason as the sticky
 * header: nothing should follow the reader around.
 *
 * `display: none` rather than deletion, so the markup in the templates can
 * stay put and the behaviour is one rule away if it is ever wanted back.
 */
.af-sticky-cta {
	display: none;
}