/**
 * WooCommerce — shop, category and tag archives
 * ==========================================================================
 * Enqueued by inc/woocommerce.php on shop and product taxonomy archives only.
 * The product grid and card themselves come from layout/grid.css and
 * components/cards.css; this file covers what is specific to the archive.
 *
 * Implements UI-LAYOUTS.md §6 (Shop Page).
 *
 * @package Preloved
 * @since   1.0.0
 * ========================================================================== */

.shop {
	padding-block: var(--pl-space-6) var(--pl-space-9);
}


/* ==========================================================================
   1. Subcategory chips
   ========================================================================== */

/*
 * A horizontal rail on phones rather than a wrapping block: eight categories
 * wrapping to four rows pushes the first product below the fold.
 */
.shop__subcats {
	margin-block-end: var(--pl-space-6);
}

.shop__subcats-list {
	display: flex;
	gap: var(--pl-space-2);
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	scrollbar-width: none;
	margin-inline: calc(var(--pl-gutter) * -1);
	padding-inline: var(--pl-gutter);
	padding-block-end: var(--pl-space-1);
}

.shop__subcats-list::-webkit-scrollbar { display: none; }

.shop__subcats-list > li { flex: 0 0 auto; }

.chip__count {
	color: var(--pl-text-muted);
	font-size: var(--pl-micro);
	font-variant-numeric: tabular-nums;
}

.chip:hover .chip__count { color: inherit; }

@media (min-width: 768px) {
	.shop__subcats-list {
		flex-wrap: wrap;
		overflow: visible;
		margin-inline: 0;
		padding-inline: 0;
	}
}


/* ==========================================================================
   2. Result header
   ========================================================================== */

.shop__result-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--pl-space-3);
	margin-block-end: var(--pl-space-5);
	padding-block-end: var(--pl-space-4);
	border-block-end: 1px solid var(--pl-line-soft);
}

.shop__count {
	margin: 0;
	color: var(--pl-text-muted);
	font-size: var(--pl-ui-sm);
	font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   3. Grid entrance
   ========================================================================== */

/*
 * Cards fade up in sequence rather than all at once — the stagger is what
 * makes a grid feel composed instead of dumped. Capped at twelve: past that
 * the delay is long enough to read as slowness, and the rest are below the
 * fold anyway.
 *
 * `animation-fill-mode: both` holds the pre-animation state, so nothing
 * flashes at full opacity before its turn.
 */
@media (prefers-reduced-motion: no-preference) {
	.products .card {
		animation: pl-card-in var(--pl-slow) var(--pl-ease-out) both;
	}

	.products .card:nth-child(1)  { animation-delay: 0ms; }
	.products .card:nth-child(2)  { animation-delay: 40ms; }
	.products .card:nth-child(3)  { animation-delay: 80ms; }
	.products .card:nth-child(4)  { animation-delay: 120ms; }
	.products .card:nth-child(5)  { animation-delay: 160ms; }
	.products .card:nth-child(6)  { animation-delay: 200ms; }
	.products .card:nth-child(7)  { animation-delay: 240ms; }
	.products .card:nth-child(8)  { animation-delay: 280ms; }
	.products .card:nth-child(9)  { animation-delay: 320ms; }
	.products .card:nth-child(10) { animation-delay: 360ms; }
	.products .card:nth-child(11) { animation-delay: 400ms; }
	.products .card:nth-child(n + 12) { animation-delay: 440ms; }
}

@keyframes pl-card-in {
	from {
		opacity: 0;
		transform: translateY(14px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}


/* ==========================================================================
   4. Empty state
   ========================================================================== */

.shop__empty {
	padding-block: var(--pl-space-9);
}

.shop__empty-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--pl-space-3);
}

.shop__empty-search {
	max-inline-size: 460px;
	margin-inline: auto;
	margin-block-start: var(--pl-space-7);
	text-align: start;
}


/* ==========================================================================
   5. WooCommerce chrome the theme does not otherwise style
   ========================================================================== */

/* Notices moved to components/notices.css in 1.1.0 — they appear on the cart,
   checkout, account and tracking pages, none of which load this file. */


/* ==========================================================================
   WooCommerce pagination
   ==========================================================================
   The product archive renders `nav.woocommerce-pagination`, not the theme's
   own `.pagination` markup, so `components/pagination.css` never applied to it
   and `woocommerce-general` styled it instead: a lavender chip on grey,
   measured at 3.65:1 against a 4.5:1 requirement, and off-brand besides.

   `woocommerce-general` is kept deliberately for notices and form rows (see
   inc/woocommerce-assets.php), so the fix is to own this control rather than
   drop the stylesheet. Selectors mirror WooCommerce's own specificity exactly
   and this file loads after it, so equal weight wins on source order — no
   `!important`, and nothing that would break if Woo reorganises its cascade.
   ========================================================================== */

.woocommerce nav.woocommerce-pagination {
	margin-block-start: var(--pl-space-8);
}

.woocommerce nav.woocommerce-pagination ul,
.woocommerce nav.woocommerce-pagination ul li {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--pl-space-2);
	margin: 0;
	padding: 0;
	border: 0;
	overflow: visible;
	list-style: none;
}

.woocommerce nav.woocommerce-pagination ul li {
	display: block;
}

.woocommerce nav.woocommerce-pagination ul li a.page-numbers,
.woocommerce nav.woocommerce-pagination ul li span.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 44px;
	block-size: 44px;
	padding: 0 var(--pl-space-2);
	background-color: var(--pl-bg-elevated);
	border: 1px solid var(--pl-line-soft);
	border-radius: var(--pl-radius);
	color: var(--pl-text);
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition:
		background-color var(--pl-fast) var(--pl-ease-standard),
		border-color var(--pl-fast) var(--pl-ease-standard),
		color var(--pl-fast) var(--pl-ease-standard);
}

.woocommerce nav.woocommerce-pagination ul li a.page-numbers:hover,
.woocommerce nav.woocommerce-pagination ul li a.page-numbers:focus {
	background-color: var(--pl-bg-elevated);
	border-color: var(--pl-primary);
	color: var(--pl-primary);
}

/* 6.17:1 — the brand fill with inverse text, matching `.pagination .current`. */
.woocommerce nav.woocommerce-pagination ul li span.page-numbers.current,
.woocommerce nav.woocommerce-pagination ul li a.page-numbers.current {
	background-color: var(--pl-primary);
	border-color: var(--pl-primary);
	color: var(--pl-text-inverse);
}

.woocommerce nav.woocommerce-pagination ul li span.page-numbers.dots {
	background: none;
	border-color: transparent;
	color: var(--pl-text-muted);
}