/**
 * Catalogue — product and service archives, and their single views.
 *
 * Loaded only on those templates (see ogt_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
	 * .ogt-pcard__media / .ogt-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 */

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

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

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

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

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

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

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

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

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

	.ogt-filter {
		display: inline-flex;
		align-items: center;
		gap: 0.4rem;
		padding: 0.45rem 0.9rem;
		/* 40px measured on a phone. These chips are the primary way to narrow a
		   313-product catalogue on a small screen, so they are worth the extra
		   four pixels. */
		min-height: 44px;
		border: 1px solid var(--ogt-border);
		border-radius: var(--ogt-radius-pill);
		font-size: var(--ogt-fs-sm);
		font-weight: 500;
		text-decoration: none;
		color: var(--ogt-text);
		background: var(--ogt-surface);
		transition:
			background-color var(--ogt-dur) var(--ogt-ease),
			border-color var(--ogt-dur) var(--ogt-ease),
			color var(--ogt-dur) var(--ogt-ease);
	}

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

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

	.ogt-filter__n {
		/* Was a hardcoded 0.6875rem — 11px, under the 12px floor the token
		   scale sets, and with 0.65 opacity on top it was the least legible
		   text on the site at phone size. */
		font-size: var(--ogt-fs-xs);
		opacity: 0.7;
		font-variant-numeric: tabular-nums;
	}

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

	.ogt-filterbar__count strong { color: var(--ogt-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) {
		.ogt-filterbar__search { flex-direction: column; }
		.ogt-filterbar__search .ogt-btn { width: 100%; }
	}

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

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

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

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

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

	/*
	 * Layout only — vertical rhythm belongs to .ogt-section.
	 *
	 * This used to set `padding-block: var(--ogt-section-y-sm)` and sit outside an
	 * .ogt-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 .ogt-section, so the template supplies the section
	 * and this supplies the grid.
	 */
	.ogt-product {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 340px;
		gap: clamp(1.5rem, 4vw, 3rem);
		align-items: start;
	}

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

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

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

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

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

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

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

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

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

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

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

	.ogt-specs__row dd {
		margin: 0;
		font-weight: 600;
		text-align: end;
		color: var(--ogt-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".
	 */
	.ogt-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.
	 */
	.ogt-prose--lead {
		font-size: var(--ogt-fs-lg);
		color: var(--ogt-text);
		max-width: 60ch;
	}

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

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

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

	/* .ogt-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. */
	.ogt-product__trust {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
		padding: 1rem 1.15rem;
		background: var(--ogt-muted);
		border-radius: var(--ogt-radius-card);
		font-size: var(--ogt-fs-xs);
		color: var(--ogt-text-muted);
	}

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

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

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

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