/*
 * Catalogue styles — shop page and category archives.
 *
 * Enqueued only on WooCommerce pages (is_woocommerce() || is_shop() ||
 * is_product_category(), see functions.php), with kyrex-storefront
 * (style.css) as a dependency for the token variables, @font-face rules,
 * and the shared .kyrex-card shell this file builds on.
 *
 * Same brand rules as homepage.css: no border-radius, no drop shadows, no
 * gradients, cards carry a top border only. The one rule specific to this
 * template: NO pill buttons — "Add to cart" is a flat, square-cornered
 * control, never WooCommerce's default filled/rounded button.
 *
 * Responsive rule: explicit column counts per breakpoint (1 / 2 / 3 / 4),
 * never auto-fit/auto-fill. auto-fit with minmax() is what orphaned a card
 * on the homepage occasions grid — it under-fit the available columns by
 * one, wrapping the last card onto its own row next to a large dead area.
 * Explicit repeat(N, minmax(0, 1fr)) always renders exactly N tracks
 * regardless of item count, so that specific failure mode can't recur here.
 *
 * A related but distinct problem — a single leftover card alone in the
 * final row (e.g. 5 products in a 4-column grid leaves 1 alone in row 2) —
 * is handled per breakpoint below via :last-child:nth-child(Nn+1), which
 * spans that lone card across the row instead of leaving it stranded next
 * to empty tracks. This works for any product/category count, not just
 * today's 22 demo products.
 */

/* ── Intro — generic on the shop page, accented on category archives ─ */

.kyrex-catalogue__intro {
	background-color: var(--kyrex-ivory);
}

.kyrex-catalogue__intro-inner {
	max-width: 42rem;
}

.kyrex-catalogue__intro-inner--accented {
	border-top: 3px solid var(--kyrex-accent);
	padding-top: 2rem;
}

.kyrex-catalogue__title {
	margin-bottom: 1rem;
}

.kyrex-catalogue__description {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--kyrex-charcoal-muted);
	max-width: 34rem;
}

.kyrex-catalogue__description p {
	margin: 0 0 1rem;
}

.kyrex-catalogue__description p:last-child {
	margin-bottom: 0;
}

/* Notices are styled globally in style.css. Only this template's own spacing
   stays here — the intro block wants them below the heading, not above it. */

.kyrex-catalogue__intro .woocommerce-notices-wrapper:not(:empty) {
	margin-top: 1.5rem;
}

.kyrex-catalogue__intro .woocommerce-message,
.kyrex-catalogue__intro .woocommerce-error,
.kyrex-catalogue__intro .woocommerce-info {
	margin-bottom: 0;
}

/* ── Toolbar — result count + sort dropdown, restyled flat ──────────── */

.kyrex-catalogue__body {
	background-color: var(--kyrex-ivory);
}

.kyrex-catalogue__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 2.5rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--kyrex-border);
}

.kyrex-catalogue__toolbar .woocommerce-result-count {
	margin: 0;
	font-size: 0.875rem;
	color: var(--kyrex-charcoal-muted);
}

.kyrex-catalogue__toolbar .woocommerce-ordering {
	margin: 0;
}

.kyrex-catalogue__toolbar select.orderby {
	font-family: var(--kyrex-font-body);
	font-size: 0.875rem;
	color: var(--kyrex-charcoal);
	background-color: var(--kyrex-surface);
	border: 1px solid var(--kyrex-border);
	border-radius: 0;
	padding: 0.5rem 0.75rem;
}

/* ── Product grid — explicit column counts, never auto-fit ──────────── */

.kyrex-catalogue__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	list-style: none;
	margin: 0 0 3rem;
	padding: 0;
}

@media (min-width: 768px) and (max-width: 1023.98px) {
	.kyrex-catalogue__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.kyrex-catalogue__grid > .kyrex-product-card:last-child:nth-child(2n + 1) {
		grid-column: 1 / -1;
		max-width: calc(50% - 0.75rem);
	}
}

@media (min-width: 1024px) and (max-width: 1279.98px) {
	.kyrex-catalogue__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.kyrex-catalogue__grid > .kyrex-product-card:last-child:nth-child(3n + 1) {
		grid-column: 1 / -1;
		max-width: calc(33.333% - 1rem);
	}
}

@media (min-width: 1280px) {
	.kyrex-catalogue__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.kyrex-catalogue__grid > .kyrex-product-card:last-child:nth-child(4n + 1) {
		grid-column: 1 / -1;
		max-width: calc(25% - 1.125rem);
	}
}

/* ── Product card — ivory-on-white shell, top-border accent ─────────── */

.kyrex-product-card {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1.25rem;
}

.kyrex-product-card__link {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	text-decoration: none;
	color: var(--kyrex-charcoal);
	border-bottom: none;
}

.kyrex-product-card__link:hover,
.kyrex-product-card__link:focus-visible {
	border-bottom: none;
}

.kyrex-product-card__media {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.kyrex-product-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * The no-image placeholder — every demo product lacks a photo, so this is
 * the NORMAL state, not an error fallback. An ivory block with a small
 * centered gold mark reads as "no photo yet, by design" rather than a
 * broken <img>. No new colors: ivory fill and gold mark are both existing
 * tokens.
 */
.kyrex-product-card__placeholder {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	background-color: var(--kyrex-ivory);
	border: 1px solid var(--kyrex-border);
}

.kyrex-product-card__placeholder::before,
.kyrex-product-card__placeholder::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	background-color: var(--kyrex-gold);
}

.kyrex-product-card__placeholder::before {
	width: 1.75rem;
	height: 1px;
	transform: translate(-50%, -50%);
}

.kyrex-product-card__placeholder::after {
	width: 1px;
	height: 1.75rem;
	transform: translate(-50%, -50%);
}

.kyrex-product-card__name {
	font-family: var(--kyrex-font-display);
	font-weight: 600;
	letter-spacing: -0.02em;
	font-size: 1.125rem;
	line-height: 1.3;
	color: var(--kyrex-charcoal);
}

.kyrex-product-card__link:hover .kyrex-product-card__name,
.kyrex-product-card__link:focus-visible .kyrex-product-card__name {
	text-decoration: underline;
	text-decoration-color: var(--kyrex-gold);
	text-underline-offset: 0.2em;
}

.kyrex-product-card__price {
	font-family: var(--kyrex-font-body);
	font-size: 1rem;
	font-weight: 600;
	color: var(--kyrex-charcoal);
}

.kyrex-product-card__price .woocommerce-Price-amount {
	color: inherit;
}

/*
 * Add to Cart — a flat, square-cornered control. Explicitly NOT the
 * ".button" class WooCommerce/Elementor style into a grey rounded pill;
 * border-radius: 0 is stated anyway as a defensive brand guarantee.
 */
.kyrex-add-to-cart {
	display: inline-block;
	margin-top: auto;
	font-family: var(--kyrex-font-body);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	color: var(--kyrex-charcoal);
	background-color: transparent;
	border: 1px solid var(--kyrex-charcoal);
	border-radius: 0;
	padding: 0.625rem 1rem;
	transition: background-color 150ms ease, color 150ms ease;
}

.kyrex-add-to-cart:hover,
.kyrex-add-to-cart:focus-visible {
	background-color: var(--kyrex-charcoal);
	color: var(--kyrex-ivory);
	border-color: var(--kyrex-charcoal);
}

.kyrex-add-to-cart--unavailable {
	margin-top: auto;
	border-bottom: 2px solid var(--kyrex-gold);
	padding-bottom: 0.25rem;
	align-self: flex-start;
}

/* ── Pagination — flat page numbers, gold underline on current ──────── */

.kyrex-catalogue__pagination {
	display: flex;
	justify-content: center;
}

.kyrex-catalogue__pagination nav.woocommerce-pagination {
	display: flex;
}

.kyrex-catalogue__pagination ul.page-numbers {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.kyrex-catalogue__pagination .page-numbers li {
	display: block;
}

.kyrex-catalogue__pagination .page-numbers a,
.kyrex-catalogue__pagination .page-numbers span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	font-family: var(--kyrex-font-body);
	font-size: 0.875rem;
	color: var(--kyrex-charcoal-muted);
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: 0;
}

.kyrex-catalogue__pagination .page-numbers a:hover,
.kyrex-catalogue__pagination .page-numbers a:focus-visible {
	color: var(--kyrex-charcoal);
	border-color: var(--kyrex-border);
}

.kyrex-catalogue__pagination .page-numbers .current {
	color: var(--kyrex-charcoal);
	font-weight: 600;
	border-bottom-color: var(--kyrex-gold);
}

/* ── No products found ───────────────────────────────────────────────── */

.kyrex-catalogue__body p.woocommerce-info {
	font-size: 0.9375rem;
	color: var(--kyrex-charcoal-muted);
	list-style: none;
	padding: 0;
	border: none;
}

.kyrex-catalogue__body p.woocommerce-info a {
	color: var(--kyrex-charcoal);
	font-weight: 600;
}

/*
 * Collapse the intro section's bottom padding.
 *
 * .kyrex-section (style.css) applies padding-block to BOTH edges. The intro
 * and the product grid are adjacent sections, so their padding stacked —
 * ~88px bottom plus ~88px top produced roughly 200px of dead space between
 * the page heading and the first row of products. The grid section supplies
 * its own top padding, so the intro only needs padding above.
 */
.kyrex-catalogue__intro {
	padding-block-end: 0;
}

/* ── Filters ──────────────────────────────────────────────────────
   A sidebar at desktop, a stacked block above the grid on a phone.
   Source order puts the filters first, which is also the reading order
   a screen reader gets — controls, then the results they control. */

.kyrex-catalogue__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	align-items: start;
}

@media (min-width: 960px) {
	.kyrex-catalogue__layout {
		grid-template-columns: 15rem minmax(0, 1fr);
		gap: 3rem;
	}

	/* Sticky, because a shopper scrolling the fourth row of results should
	   not have to scroll back up to widen a price range. */
	.kyrex-filters {
		position: sticky;
		top: 6rem;
	}
}

/* min-width: 0 lets the grid track actually shrink. Without it the results
   column takes its width from its widest card and pushes the layout out. */
.kyrex-catalogue__results {
	min-width: 0;
}

.kyrex-filters {
	font-family: var(--kyrex-font-body);
	background-color: var(--kyrex-surface);
	border: 1px solid var(--kyrex-border);
	border-radius: var(--kyrex-radius-lg);
	padding: 1.25rem;
}

.kyrex-filters__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1rem;
}

.kyrex-filters__title {
	font-family: var(--kyrex-font-body);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--kyrex-charcoal-muted);
	margin: 0;
}

.kyrex-filters__clear {
	font-size: 0.75rem;
	color: var(--kyrex-gold-deep);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.kyrex-filters__clear:hover {
	color: var(--kyrex-charcoal);
}

.kyrex-filters__group {
	border: 0;
	padding: 0;
	margin: 0 0 1.25rem;
}

.kyrex-filters__legend {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--kyrex-charcoal);
	padding: 0;
	margin-bottom: 0.625rem;
}

.kyrex-filters__options {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.5rem;
}

.kyrex-filters__option {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

/* 1rem hit target is small for a finger; the label carries the rest of it
   by being clickable, which is why every input here has a real `for`. */
.kyrex-filters__option input {
	width: 1rem;
	height: 1rem;
	accent-color: var(--kyrex-gold-deep);
	flex: none;
}

.kyrex-filters__option label {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
	flex: 1;
	font-size: 0.875rem;
	color: var(--kyrex-charcoal);
	cursor: pointer;
	padding-block: 0.125rem;
}

.kyrex-filters__option input:focus-visible {
	outline: 2px solid var(--kyrex-charcoal);
	outline-offset: 2px;
}

.kyrex-filters__count {
	font-size: 0.75rem;
	color: var(--kyrex-charcoal-muted);
	font-variant-numeric: tabular-nums;
}

.kyrex-filters__price {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.625rem;
}

.kyrex-filters__price-field {
	display: grid;
	gap: 0.25rem;
	font-size: 0.75rem;
	color: var(--kyrex-charcoal-muted);
}

.kyrex-filters__price-field input {
	font-family: var(--kyrex-font-body);
	font-size: 0.9375rem;
	color: var(--kyrex-charcoal);
	background-color: var(--kyrex-ivory);
	border: 1px solid var(--kyrex-border);
	border-radius: var(--kyrex-radius-sm);
	padding: 0.5rem 0.625rem;
	width: 100%;
	min-width: 0;
}

.kyrex-filters__price-field input:focus-visible {
	border-color: var(--kyrex-gold-deep);
	outline: 2px solid var(--kyrex-charcoal);
	outline-offset: 1px;
}

.kyrex-filters__submit {
	width: 100%;
	padding-block: 0.75rem;
}

/* Results being replaced. Deliberately subtle and deliberately NOT a
   layout change — anything that moves the grid while a fetch is in flight
   would register as layout shift, and this build measured 0.3595 CLS once
   already. Opacity only. */
.kyrex-catalogue__results[aria-busy="true"] {
	opacity: 0.55;
	transition: opacity 120ms ease;
}

@media (prefers-reduced-motion: reduce) {
	.kyrex-catalogue__results[aria-busy="true"] {
		transition: none;
	}
}

/* Active filters, stated above the grid. The page heading still reads "The
   Full Collection" whatever is filtered — it lives outside the swapped
   region — so without this a shopper looking at 5 of 28 packages is told
   they are looking at everything. */

.kyrex-catalogue__active {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	font-family: var(--kyrex-font-body);
	font-size: 0.8125rem;
	margin: 0 0 1.25rem;
}

.kyrex-catalogue__active-label {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--kyrex-charcoal-muted);
}

.kyrex-catalogue__active-pill {
	background-color: var(--kyrex-surface);
	border: 1px solid var(--kyrex-border);
	border-radius: var(--kyrex-radius-pill);
	padding: 0.25rem 0.75rem;
	color: var(--kyrex-charcoal);
}

.kyrex-catalogue__active-clear {
	color: var(--kyrex-gold-deep);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.kyrex-catalogue__active-clear:hover {
	color: var(--kyrex-charcoal);
}

.kyrex-catalogue__active-clear:focus-visible {
	outline: 2px solid var(--kyrex-charcoal);
	outline-offset: 2px;
	border-radius: var(--kyrex-radius-sm);
}

/* Kill the native number spinners on the price filter.
   Chrome/Safari draw a pair of tiny stepper arrows inside the field that
   are unstyleable, mismatched with everything else on the page, and a
   3px-tall hit target nobody can reliably use. `appearance: textfield`
   removes them in Firefox; the ::-webkit- rule removes them everywhere
   else. The input stays type="number", so a phone still gets the numeric
   keypad — which is the only reason to use the type at all here. */

.kyrex-filters__price-field input[type="number"] {
	appearance: textfield;
	-moz-appearance: textfield;
}

.kyrex-filters__price-field input[type="number"]::-webkit-outer-spin-button,
.kyrex-filters__price-field input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
}