/**
 * Catalogue — product and service archives, and their single views.
 *
 * Loaded only on those templates (see av_is_catalogue() in inc/assets.php), so
 * homepage visitors never download it.
 *
 * Same layer stack as main.css. Re-declaring @layer here is required: layer
 * ORDER is set by first declaration, and this file may parse before or after
 * main.css depending on cache. Naming them in the same order is idempotent.
 */

@layer reset, base, layout, components, utilities;

@layer components {

	/* ------------------------------------------------------- 13. PRODUCT CARD */
	/*
	 * Moved to main.css. The product card is also rendered by the block pattern
	 * in inc/patterns.php, which can sit on any page, and the post card reuses
	 * .av-pcard__media / .av-pcard__body on the blog — neither is a catalogue
	 * template, so defining the component only here left both unstyled.
	 * Nothing product-card-specific belongs in this file any more.
	 */

	/* ------------------------------------------------------------- FILTERS */

	.av-filterbar {
		display: flex;
		flex-direction: column;
		gap: var(--av-gap);
		margin-block-end: var(--av-gap-lg);
		padding: var(--av-card-pad);
		background: var(--av-surface);
		border: 1px solid var(--av-border);
		border-radius: var(--av-radius-card);
		box-shadow: var(--av-shadow-sm);
	}

	.av-filterbar__search {
		display: flex;
		gap: 0.5rem;
	}

	.av-filterbar__field {
		position: relative;
		flex: 1;
	}

	.av-filterbar__field .av-icon {
		position: absolute;
		left: 1rem;
		top: 50%;
		transform: translateY(-50%);
		color: var(--av-text-subtle);
		pointer-events: none;
	}

	.av-filterbar__input {
		width: 100%;
		padding: 0.9rem 1rem 0.9rem 2.85rem;
		border: 1px solid var(--av-border);
		border-radius: var(--av-radius-input);
		background: var(--av-ground);
		color: var(--av-ink);
		font-size: 1rem;
	}

	.av-filterbar__input:focus {
		outline: none;
		border-color: var(--av-primary);
		box-shadow: var(--av-shadow-focus);
		background: var(--av-surface);
	}

	.av-filterbar__group {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
	}

	.av-filterbar__label {
		font-family: var(--av-font-head);
		font-size: var(--av-fs-xs);
		font-weight: 600;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--av-text-subtle);
	}

	.av-filters {
		display: flex;
		flex-wrap: wrap;
		gap: 0.45rem;
	}

	.av-filter {
		display: inline-flex;
		align-items: center;
		gap: 0.4rem;
		padding: 0.45rem 0.9rem;
		border: 1px solid var(--av-border);
		border-radius: var(--av-radius-pill);
		font-size: var(--av-fs-sm);
		font-weight: 500;
		text-decoration: none;
		color: var(--av-text);
		background: var(--av-surface);
		transition:
			background-color var(--av-dur) var(--av-ease),
			border-color var(--av-dur) var(--av-ease),
			color var(--av-dur) var(--av-ease);
	}

	.av-filter:hover {
		border-color: rgb(var(--av-primary-rgb) / 40%);
		color: var(--av-primary);
	}

	.av-filter.is-active {
		background: var(--av-primary);
		border-color: var(--av-primary);
		color: var(--av-on-primary);
	}

	.av-filter__n {
		font-size: 0.6875rem;
		opacity: 0.65;
		font-variant-numeric: tabular-nums;
	}

	.av-filterbar__foot {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--av-gap-sm);
		flex-wrap: wrap;
		padding-block-start: var(--av-gap-sm);
		border-top: 1px solid var(--av-border);
		font-size: var(--av-fs-sm);
		color: var(--av-text-subtle);
	}

	.av-filterbar__count strong { color: var(--av-ink); }

	/* Mobile: stack the search field above its button, and let the filter groups
	   breathe. The bar had no small-screen rule, so the input + Search button
	   were cramped onto one line below ~560px. */
	@media (max-width: 560px) {
		.av-filterbar__search { flex-direction: column; }
		.av-filterbar__search .av-btn { width: 100%; }
	}

	/* --------------------------------------------------- CATALOGUE (AJAX) */

	/* Fade the grid slightly while a request is in flight — a quiet busy cue. */
	.is-loading [data-av-results] {
		opacity: 0.55;
		transition: opacity var(--av-dur) var(--av-ease);
		pointer-events: none;
	}

	.av-catalogue__more {
		display: flex;
		justify-content: center;
		margin-block-start: var(--av-gap-lg);
	}

	.av-catalogue__more [hidden] { display: none; }

	/* --------------------------------------------------------- PRODUCT VIEW */

	/*
	 * Layout only — vertical rhythm belongs to .av-section.
	 *
	 * This used to set `padding-block: var(--av-section-y-sm)` and sit outside an
	 * .av-section, which made the product page the only page on the site whose
	 * first content block opened at 40-64px while every other page opened at
	 * 64-120px. A component that sets its own section spacing cannot stay in step
	 * with one that leaves it to .av-section, so the template supplies the section
	 * and this supplies the grid.
	 */
	.av-product {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 340px;
		gap: clamp(1.5rem, 4vw, 3rem);
		align-items: start;
	}

	@media (max-width: 960px) {
		.av-product { grid-template-columns: 1fr; }
	}

	.av-product__main {
		display: flex;
		flex-direction: column;
		gap: var(--av-gap);
	}

	.av-product__media {
		margin: 0;
		border-radius: var(--av-radius-img);
		overflow: hidden;
	}

	.av-product__media img { width: 100%; }

	/* Stickiness comes from .av-u-sticky in the template — same offset, one owner. */
	.av-product__aside {
		display: flex;
		flex-direction: column;
		gap: var(--av-gap-sm);
	}

	/* Spec table. */
	.av-specs {
		border: 1px solid var(--av-border);
		border-radius: var(--av-radius-card);
		background: var(--av-surface);
		overflow: hidden;
		box-shadow: var(--av-shadow-sm);
	}

	.av-specs__title {
		font-family: var(--av-font-head);
		font-size: var(--av-fs-xs);
		font-weight: 600;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		padding: 0.9rem 1.15rem;
		background: var(--av-muted);
		color: var(--av-text-subtle);
		margin: 0;
		border-bottom: 1px solid var(--av-border);
	}

	.av-specs__list {
		margin: 0;
		padding: 0.35rem 1.15rem 0.9rem;
	}

	.av-specs__row {
		display: flex;
		justify-content: space-between;
		gap: 1rem;
		padding-block: 0.65rem;
		border-bottom: 1px solid var(--av-border-soft);
		font-size: var(--av-fs-sm);
	}

	.av-specs__row:last-child { border-bottom: 0; }

	.av-specs__row dt { color: var(--av-text-subtle); }

	.av-specs__row dd {
		margin: 0;
		font-weight: 600;
		text-align: end;
		color: var(--av-ink);
		font-variant-numeric: tabular-nums;
		overflow-wrap: anywhere;
	}

	/*
	 * Availability, above the description.
	 *
	 * The value existed on every product but only ever surfaced on the catalogue
	 * cards, so the page a buyer lands on never answered "can you supply this".
	 */
	.av-product__status {
		margin: 0;
	}

	/*
	 * The descriptions run ~240 characters, so the main column is short next to a
	 * tall spec aside. Setting the copy a step larger gives it the weight of an
	 * opening statement instead of leaving it looking like a stray caption.
	 */
	.av-prose--lead {
		font-size: var(--av-fs-lg);
		color: var(--av-text);
		max-width: 60ch;
	}

	/* The three buttons read as one enquiry panel rather than loose controls. */
	.av-product__cta {
		display: flex;
		flex-direction: column;
		gap: 0.6rem;
		padding: 1.15rem;
		border: 1px solid var(--av-border);
		border-radius: var(--av-radius-card);
		background: var(--av-surface);
		box-shadow: var(--av-shadow-sm);
	}

	.av-product__cta-title {
		font-family: var(--av-font-head);
		font-size: var(--av-fs-xs);
		font-weight: 600;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--av-text-subtle);
		margin: 0 0 0.15rem;
	}

	.av-product__cta .av-btn { width: 100%; }

	/* .av-btn--whatsapp lives in main.css — the contact page uses it too, and
	   this file only loads on catalogue templates. */

	/* Trust strip under the inquiry CTA. */
	.av-product__trust {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
		padding: 1rem 1.15rem;
		background: var(--av-muted);
		border-radius: var(--av-radius-card);
		font-size: var(--av-fs-xs);
		color: var(--av-text-muted);
	}

	.av-product__trust li {
		display: flex;
		align-items: center;
		gap: 0.5rem;
	}

	.av-product__trust .av-icon { color: var(--av-success); }

	/* --------------------------------------------------------- SERVICE VIEW */

	.av-service-hero__icon {
		display: inline-grid;
		place-items: center;
		width: 56px;
		height: 56px;
		border-radius: var(--av-radius-sm);
		background: rgb(var(--av-primary-rgb) / 10%);
		color: var(--av-primary);
		margin-block-end: 0.75rem;
	}
}