/*
Theme Name:   AssetYard
Theme URI:    https://assetyard.io
Description:  Storefront theme for AssetYard. Warm grey base with a single orange accent, built as a child of Twenty Twenty-Five.
Author:       AssetYard
Template:     twentytwentyfive
Version:      0.1.0
Requires at least: 6.4
Requires PHP: 8.0
License:      GPL-2.0-or-later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  assetyard
*/

/*
 * Colour, type, and spacing live in theme.json. This file is only for the
 * things theme.json cannot reach — mostly WooCommerce markup, which is not
 * block-based and therefore not addressable through global styles.
 *
 * Every colour below is a preset variable, never a literal, so the palette
 * stays defined in exactly one place.
 */

/* ------------------------------------------------------------------ Focus */

/*
 * A single focus ring that survives every ground in the system. The previous
 * one was a solid Ink outline, which measures 1.17:1 against Charcoal — on the
 * header and the hero it was invisible, so keyboard navigation had no visible
 * position at all.
 *
 * Two layers solve it without a per-section override: the Paper ring reads on
 * dark bands, the Ink halo reads on light ones, and one of the two is always
 * carrying. The halo is a shadow, which the flat-by-default rule permits
 * because it appears only in response to state.
 */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	border-radius: 2px;
	box-shadow: 0 0 0 4px var(--wp--preset--color--contrast);
	outline: 2px solid var(--wp--preset--color--base);
	outline-offset: 0;
}

/* ---------------------------------------------------------------- Buttons */

.wp-element-button,
.wc-block-components-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	background-color: var(--wp--preset--color--accent-strong);
	border: 0;
	border-radius: 4px;
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--manrope);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1;
	padding: 0.9em 1.6em;
	transition: background-color 120ms ease;
}

.wp-element-button:hover,
.wc-block-components-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* ------------------------------------------------------------ Price display */

.woocommerce .price,
.wc-block-components-product-price {
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--manrope);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 800;
	letter-spacing: -0.02em;
}

.woocommerce .price del {
	color: var(--wp--preset--color--muted);
	font-weight: 500;
}

.woocommerce .price ins {
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

/* -------------------------------------------------------------- Catalogue */

/*
 * WooCommerce still lays the catalogue out with floats: each card gets a
 * percentage width and float:left, and rows are broken by nth-child clears.
 * That only holds while every card is the same height. These are not — titles
 * wrap onto two lines at different widths and the format badges wrap with them
 * — so a short card lets the next one catch on the taller one beside it and
 * five products came out as rows of 2, 1, and 2.
 *
 * Grid removes the failure mode rather than patching the symptom: rows cannot
 * snag, and the last row simply leaves its trailing cell empty.
 */
.woocommerce ul.products {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	grid-template-columns: repeat(3, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

/* The float layout's clearfix has nothing to clear now, and as a grid item it
   would occupy a cell of its own. */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
	content: none;
}

/*
 * The attribute selector is not decoration. WooCommerce sizes cards through
 * `.woocommerce ul.products.columns-3 li.product`, which outranks the plain
 * selector, so a first attempt at this left every card 110px wide inside a
 * 351px track. Matching on [class*="columns-"] outranks it in turn and holds
 * for any column count the shortcode is given.
 */
.woocommerce ul.products[class*="columns-"] li.product {
	clear: none;
	float: none;
	margin: 0;
	width: auto;
}

@media (max-width: 1024px) {
	.woocommerce ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 781px) {
	.woocommerce ul.products {
		gap: var(--wp--preset--spacing--30);
		grid-template-columns: 1fr;
	}
}

.woocommerce ul.products li.product,
.wc-block-grid__product {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	overflow: hidden;
	padding: 0 0 var(--wp--preset--spacing--30);
	transition: border-color 120ms ease, transform 120ms ease;
}

.woocommerce ul.products li.product:hover,
.wc-block-grid__product:hover {
	border-color: var(--wp--preset--color--accent);
	transform: translateY(-2px);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	letter-spacing: -0.015em;
	padding: 0 var(--wp--preset--spacing--30);
}

.woocommerce ul.products li.product .price {
	display: block;
	padding: 0 var(--wp--preset--spacing--30);
}

/*
 * Cards stretch to a shared height in the grid, but their content flows from
 * the top, so a product with more format badges wrapped them onto a second
 * line and pushed its price and button 24px below its neighbours'. Making the
 * card a column and letting its last block absorb the slack puts every price
 * and button on one line across a row, whatever sits above them.
 *
 * The last block is targeted by position rather than by name: the price and
 * the button share a <p> that wpautop creates around the shortcode's output,
 * which is not markup the theme controls.
 */
.woocommerce ul.products[class*="columns-"] li.product {
	display: flex;
	flex-direction: column;
}

.woocommerce ul.products[class*="columns-"] li.product > :last-child {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--20);
}

/*
 * Everything under the image shares one inset while the image itself stays
 * flush to the card edge. The title, badges, and price carry it as padding
 * because they are full-width blocks; the button is an inline-block, so it
 * takes the same distance as a margin. Without this its left edge sits 20px
 * outside the column of text above it.
 */
.woocommerce ul.products[class*="columns-"] li.product .button,
.woocommerce ul.products[class*="columns-"] li.product .added_to_cart {
	margin-left: var(--wp--preset--spacing--30);
	margin-right: var(--wp--preset--spacing--30);
}

/* A storefront selling files has no "sale sticker" energy. Keep the badge
   quiet and rectangular rather than the default circle. */
.woocommerce span.onsale {
	background-color: var(--wp--preset--color--accent);
	border-radius: 3px;
	color: var(--wp--preset--color--base);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1;
	min-height: 0;
	min-width: 0;
	padding: 0.5em 0.75em;
	text-transform: uppercase;
}

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

.woocommerce div.product .product_title {
	letter-spacing: -0.03em;
}

/* Gallery — main image */
.woocommerce-product-gallery .woocommerce-product-gallery__image:first-child img {
	border-radius: 8px;
	display: block;
	width: 100%;
}

/* Gallery — thumbnail strip (4 thumbs, 1 row, 25% each) */
.woocommerce-product-gallery .flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0.625rem 0 0;
	padding: 0;
}

.woocommerce-product-gallery .flex-control-thumbs li {
	flex: 0 0 calc(25% - 0.375rem);
}

.woocommerce-product-gallery .flex-control-thumbs li img {
	border: 2px solid transparent;
	border-radius: 4px;
	cursor: pointer;
	display: block;
	opacity: 0.6;
	transition: opacity 120ms ease, border-color 120ms ease;
	width: 100%;
}

.woocommerce-product-gallery .flex-control-thumbs li img.flex-active,
.woocommerce-product-gallery .flex-control-thumbs li img:hover {
	border-color: var(--wp--preset--color--accent);
	opacity: 1;
}

/* Gallery — zoom trigger */
.woocommerce-product-gallery__trigger {
	align-items: center;
	background: var(--wp--preset--color--base);
	border-radius: 50%;
	box-shadow: 0 1px 8px rgba(0, 0, 0, .1);
	display: flex !important;
	height: 32px;
	justify-content: center;
	opacity: .75;
	position: absolute;
	right: .75rem;
	top: .75rem;
	transition: opacity 120ms ease;
	width: 32px;
	z-index: 9;
}

.woocommerce-product-gallery__trigger:hover {
	opacity: 1;
}

.woocommerce-product-gallery__trigger img {
	height: 16px;
	width: 16px;
}

.woocommerce div.product form.cart div.quantity input {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 4px;
	color: var(--wp--preset--color--contrast);
	padding: 0.75em;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding: 0;
}

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

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	margin: 0 1.5em 0 0;
	padding: 0;
}

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

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	border-bottom-color: var(--wp--preset--color--accent);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	color: var(--wp--preset--color--muted);
	font-weight: 700;
	padding: 0.75em 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--wp--preset--color--contrast);
}

/* --------------------------------------------------------------- Notices */

.woocommerce-message,
.woocommerce-info {
	background-color: var(--wp--preset--color--accent-soft);
	border: 0;
	border-radius: 6px;
	color: var(--wp--preset--color--contrast);
}

.woocommerce-error {
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--accent-strong);
	border-radius: 6px;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	color: var(--wp--preset--color--accent);
}

/*
 * The product specifications block is styled by the assetyard-product-specs
 * plugin, which reads this theme's palette presets. Deliberately not restyled
 * here: two sources for the same rules at equal specificity would be decided
 * by load order.
 */

/* ================================================================ Header */

.ay-header {
	position: sticky;
	top: 0;
	z-index: 200;
}

/*
 * The header is a full-bleed flex row so its Charcoal ground reaches the
 * viewport edges, but its contents were left-aligned to the viewport while the
 * hero and footer align to the 1200px column — the wordmark sat 104px left of
 * the one in the footer. Padding rather than a max-width keeps the background
 * full width while the contents land on the same line as everything below.
 */
.ay-header {
	padding-inline: max(var(--wp--preset--spacing--30), calc((100% - 1200px) / 2));
}

/* ================================================================ Logo */

/*
 * Sized by height so the wordmark and the monogram can swap at 781px without
 * the header row changing height. The source art is roughly 3x the rendered
 * size, which covers high-density screens without a second file.
 */
.ay-logo {
	align-items: center;
	display: inline-flex;
	min-height: 24px;
	text-decoration: none;
}

/* One height everywhere, so the header and footer marks read as the same
   object rather than two sizes of it. */
.ay-logo img {
	display: block;
	height: 30px;
	width: auto;
}

.ay-logo picture {
	display: block;
	line-height: 0;
}

/* ================================================================ Terms strip */

.ay-facts {
	display: grid;
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	grid-template-columns: repeat(4, 1fr);
	margin: 0;
	max-width: 1200px;
	margin-inline: auto;
}

.ay-fact__value {
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 800;
	letter-spacing: -0.02em;
	margin: 0 0 0.1875rem;
}

.ay-fact__note {
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
	line-height: 1.5;
	margin: 0;
}

@media (max-width: 781px) {
	.ay-facts {
		grid-template-columns: 1fr 1fr;
	}
}

/* ================================================================ Owner gaps */

/*
 * A fact the policy pages need and only the site owner can supply — the legal
 * entity, its address, the support address and its response time. Marked
 * loudly on purpose: these pages are what a payment provider reads, and a gap
 * that looks like prose is one somebody ships.
 */
.ay-todo {
	background: var(--wp--preset--color--accent-soft);
	border-left: 3px solid var(--wp--preset--color--accent-strong);
	border-radius: 0 3px 3px 0;
	color: var(--wp--preset--color--contrast);
	display: inline;
	padding: 0.15em 0.4em 0.15em 0.3em;
}

.ay-todo__tag {
	color: var(--wp--preset--color--accent-strong);
	font-family: var(--wp--preset--font-family--fira-code);
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	margin-right: 0.4em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* ================================================================ Slider */

.ay-slider {
	margin-inline: auto;
	max-width: 1200px;
}

/*
 * The track is the scroller. scroll-snap does the positioning, so touch swipe,
 * keyboard scrolling, and momentum are the browser's own and need no script.
 */
.ay-slider__track {
	display: flex;
	gap: var(--wp--preset--spacing--30);
	list-style: none;
	margin: 0;
	overflow-x: auto;
	padding: 0;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.ay-slider__track::-webkit-scrollbar {
	display: none;
}

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

.ay-slide {
	flex: 0 0 100%;
	margin: 0;
	scroll-snap-align: start;
}

/*
 * A fixed frame with a centred crop. The supplied slides run 2.00, 1.87, and
 * 1.78; without this the container would change height on every slide and the
 * page would jump under the reader. 16:9 is the narrowest of the three, so the
 * least-wide slide is shown whole and the widest lose 5.5% from each side —
 * their subjects are centred, so what goes is peripheral.
 */
.ay-slide__img {
	aspect-ratio: 16 / 9;
	border-radius: 8px;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.ay-slide__caption {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem var(--wp--preset--spacing--30);
	padding-top: var(--wp--preset--spacing--30);
}

.ay-slide__title {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.15;
	margin: 0;
}

.ay-slide__link {
	color: var(--wp--preset--color--accent-strong);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	text-underline-offset: 0.2em;
}

.ay-slider__controls {
	align-items: center;
	display: flex;
	gap: var(--wp--preset--spacing--30);
	justify-content: space-between;
	padding-top: var(--wp--preset--spacing--30);
}

.ay-slider__dots {
	display: flex;
	gap: 0.5rem;
}

/*
 * The dot is 8px of ink inside a 24px target: WCAG 2.2 measures the hit area,
 * not the paint.
 */
.ay-slider__dot {
	background: none;
	border: 0;
	cursor: pointer;
	display: grid;
	height: 24px;
	padding: 0;
	place-items: center;
	width: 24px;
}

.ay-slider__dot::before {
	background: var(--wp--preset--color--line);
	border-radius: 50%;
	content: "";
	height: 8px;
	transition: background-color 120ms ease, transform 120ms ease;
	width: 8px;
}

.ay-slider__dot[aria-current="true"]::before {
	background: var(--wp--preset--color--accent-strong);
	transform: scale(1.35);
}

.ay-slider__arrows {
	display: flex;
	gap: 0.5rem;
}

.ay-slider__arrow {
	align-items: center;
	background: none;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 4px;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	display: flex;
	height: 40px;
	justify-content: center;
	padding: 0;
	transition: border-color 120ms ease, color 120ms ease;
	width: 40px;
}

.ay-slider__arrow:hover:not(:disabled) {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-strong);
}

.ay-slider__arrow:disabled {
	cursor: default;
	opacity: 0.35;
}

/* Arrows and dots do nothing until the script wires them up. */
.ay-slider:not(.is-enhanced) .ay-slider__controls {
	display: none;
}

@media (max-width: 781px) {
	.ay-slide__title {
		font-size: var(--wp--preset--font-size--medium);
	}
}

/*
 * On the Charcoal band every control colour has to be restated. The arrow icon
 * inherits Ink, which measures 1.17:1 there — the same invisibility the focus
 * ring had. The active dot drops from Deep Kiln to Kiln Orange because a
 * non-text indicator still owes 3:1 (SC 1.4.11) and Deep Kiln gives 2.4 on this
 * ground. The link goes to Paper, since neither orange carries small text here.
 */
.ay-slider-section .ay-slide__title {
	color: var(--wp--preset--color--base);
}

.ay-slider-section .ay-slide__link {
	color: var(--wp--preset--color--base);
}

.ay-slider-section .ay-slide__link:hover {
	color: var(--wp--preset--color--accent-soft);
}

.ay-slider-section .ay-slider__arrow {
	border-color: rgba(255, 255, 255, .22);
	color: var(--wp--preset--color--base);
}

.ay-slider-section .ay-slider__arrow:hover:not(:disabled) {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

.ay-slider-section .ay-slider__dot::before {
	background: rgba(255, 255, 255, .3);
}

.ay-slider-section .ay-slider__dot[aria-current="true"]::before {
	background: var(--wp--preset--color--accent);
}

.ay-slider-section .ay-section-sub {
	color: var(--wp--preset--color--muted-lift);
}

/* ================================================================ Spec table */

.ay-spec-table-wrap {
	max-width: 1200px;
	margin-inline: auto;
	overflow-x: auto;
}

.ay-spec-table {
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--small);
	min-width: 46rem;
	width: 100%;
}

.ay-spec-table th,
.ay-spec-table td {
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding: 0.875rem 1rem 0.875rem 0;
	text-align: left;
	vertical-align: top;
}

.ay-spec-table thead th {
	border-bottom-width: 2px;
	color: var(--wp--preset--color--muted);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ay-spec-table tbody th {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 800;
	letter-spacing: -0.02em;
	white-space: nowrap;
}

.ay-spec-table tbody th a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.ay-spec-table tbody th a:hover {
	color: var(--wp--preset--color--accent-strong);
	text-decoration: underline;
}

.ay-spec-table tbody tr:hover td,
.ay-spec-table tbody tr:hover th {
	background: var(--wp--preset--color--surface);
}

.ay-fmt-cell {
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--fira-code);
	font-size: 0.75rem;
	white-space: nowrap;
}

.ay-compat-row {
	display: inline-flex;
	gap: 0.25rem;
}

/* Support is a fact, so it is stated with a value rather than a tick: the
   two-letter code is readable without colour and carries the app name in its
   title for anything that reads the markup. */
.ay-compat {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 3px;
	font-family: var(--wp--preset--font-family--fira-code);
	font-size: 0.6875rem;
	line-height: 1;
	padding: 0.35em 0.4em;
}

.ay-compat.is-yes {
	background: var(--wp--preset--color--accent-soft);
	border-color: var(--wp--preset--color--accent-soft);
	color: var(--wp--preset--color--accent-strong);
}

.ay-compat.is-no {
	color: var(--wp--preset--color--muted);
	opacity: 0.55;
	text-decoration: line-through;
}

.ay-spec-price {
	font-weight: 800;
	white-space: nowrap;
}

.ay-spec-legend {
	color: var(--wp--preset--color--muted);
	font-size: 0.8125rem;
	margin: var(--wp--preset--spacing--20) 0 0;
}

.ay-section-head--sub {
	margin-top: var(--wp--preset--spacing--50);
}

.ay-section-h3 {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.15;
	margin: 0 0 0.25rem;
}

/*
 * The header's three items were spread with space-between, which put 537px
 * between the menu and the cart and left the menu 130px off the header's
 * centre — neither aligned nor centred, so it read as floating. An auto left
 * margin packs the menu against the cart, and the two become one cluster
 * opposite the wordmark. space-between then has nothing left to distribute.
 */
.ay-header .wp-block-navigation {
	margin-left: auto;
}

.ay-header .wp-block-navigation .wp-block-navigation__container {
	gap: 1.375rem;
}

.ay-header .wc-block-mini-cart__button {
	background: none;
	border: 0;
	color: var(--wp--preset--color--base);
	padding: 0.5em;
}

.ay-header .wc-block-mini-cart__amount {
	color: var(--wp--preset--color--muted-lift);
	font-size: var(--wp--preset--font-size--small);
}

/* ================================================================ Hero */

/*
 * No minimum height. It was 88svh while the hero held a full-viewport
 * composition with the still-life on the right; with that gone and the slider
 * carrying the imagery below, the same rule reserved 792px for 332px of
 * content and left 348px of empty Charcoal between the call to action and the
 * first slide. The hero sizes to what is in it.
 */
.ay-hero {
	overflow: hidden;
	position: relative;
}


/* File-format tag grid — right column of hero. */
.ay-format-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.ay-fmt {
	border: 1px solid rgba(255, 255, 255, .15);
	border-radius: 4px;
	color: var(--wp--preset--color--muted-lift);
	display: inline-block;
	font-family: var(--wp--preset--font-family--fira-code);
	font-size: clamp(1.0625rem, 1.5vw + 0.375rem, 1.5rem);
	line-height: 1;
	padding: 0.55em 0.65em;
	transition: border-color 140ms ease, color 140ms ease;
}

/*
 * The lit pill marks itself with an orange border and Paper text, not orange
 * text. The pill's type lands at 23px on a 1100px viewport — one pixel under
 * WCAG's large-text threshold — where Kiln Orange on Charcoal measures 3.92:1
 * and needs 4.5:1. Orange stays on the border, which is non-text and free of
 * the requirement, and the marking reads harder for it.
 */
.ay-fmt--lit {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

@media (hover: hover) {
	.ay-fmt:hover {
		border-color: var(--wp--preset--color--accent);
		color: var(--wp--preset--color--base);
	}
}

@media (max-width: 781px) {
	.ay-hero__formats-col {
		order: -1;
	}

	.ay-fmt {
		font-size: 0.8125rem;
		padding: 0.45em 0.55em;
	}
}

/* ================================================================ Catalogue */

.ay-section-head {
	align-items: flex-end;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: space-between;
	margin-bottom: var(--wp--preset--spacing--50);
}

.ay-section-h2 {
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.12;
	margin: 0 0 0.375rem;
}

.ay-section-sub {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--medium);
	margin: 0;
}

.ay-product-count {
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--fira-code);
	font-size: 0.875rem;
	margin: 0;
	white-space: nowrap;
}

/* Format badges injected by PHP hook on catalogue cards. */
.ay-format-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3125rem;
	padding: 0.5rem var(--wp--preset--spacing--30) 0.125rem;
}

.ay-format-badge {
	background: var(--wp--preset--color--surface);
	border-radius: 3px;
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--fira-code);
	font-size: 0.6875rem;
	line-height: 1;
	padding: 0.35em 0.5em;
}

/* ================================================================ How it works */

.ay-steps {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	grid-template-columns: repeat(3, 1fr);
	max-width: 1200px;
	margin-inline: auto;
}

@media (max-width: 781px) {
	.ay-steps {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--40);
	}
}

.ay-step-num {
	color: var(--wp--preset--color--accent-strong);
	display: block;
	font-family: var(--wp--preset--font-family--fira-code);
	font-size: 0.8125rem;
	font-weight: 400;
	letter-spacing: 0.1em;
	margin-bottom: 0.875rem;
}

.ay-step-title {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.15;
	margin: 0 0 0.75rem;
}

.ay-step-body {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.75;
	margin: 0;
}

/* ================================================================ Bundle CTA */

.ay-bundle {
	position: relative;
	overflow: hidden;
}

.ay-bundle-card {
	background: rgba(255, 255, 255, .04);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 8px;
	padding: var(--wp--preset--spacing--40);
}

.ay-bundle-price {
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--manrope);
	font-size: clamp(3.5rem, 6vw + 1rem, 6rem);
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1;
	margin: 0 0 var(--wp--preset--spacing--30);
}

.ay-bundle-contents {
	color: var(--wp--preset--color--muted-lift);
	display: flex;
	flex-direction: column;
	font-size: var(--wp--preset--font-size--small);
	gap: 0.625rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ay-bundle-contents li {
	align-items: baseline;
	display: flex;
	gap: 0.75rem;
}

.ay-fmt-inline {
	border: 1px solid rgba(255, 255, 255, .15);
	border-radius: 3px;
	color: var(--wp--preset--color--muted-lift);
	font-family: var(--wp--preset--font-family--fira-code);
	font-size: 0.6875rem;
	line-height: 1;
	padding: 0.3em 0.45em;
	white-space: nowrap;
}

/* ================================================================ Footer */

.ay-footer-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ay-footer-list li {
	margin-bottom: 0.125rem;
}

/*
 * Padded to clear WCAG 2.2 SC 2.5.8 (24x24 CSS px) on its own rather than
 * leaning on the spacing exception. The text was 19px tall, which passed only
 * because the rows happened to sit 28px apart — a margin change would have
 * silently broken it.
 */
.ay-footer-list a {
	color: var(--wp--preset--color--muted-lift);
	display: inline-block;
	font-size: var(--wp--preset--font-size--small);
	min-height: 24px;
	padding-block: 0.28125rem;
	text-decoration: none;
	transition: color 120ms ease;
}

.ay-footer-list a:hover {
	color: var(--wp--preset--color--base);
}

.ay-footer-divider {
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, .08);
	margin: 0 0 var(--wp--preset--spacing--30);
}