/**
 * Catalogue page: /pood/ and the product category archives.
 *
 * Auto-enqueued by inc/assets.php on is_shop() and is_product_taxonomy().
 * Layout and rhythm measured from the mockup's /pood; every value is a token.
 * Grid gutters and section rhythm come from .cc-grid / .cc-section — nothing
 * here redefines them.
 *
 * @package CreativeCanvas
 */

/* ---------------------------------------------------------------------------
 * Page head — h1 plus the optional term / shop description.
 * ------------------------------------------------------------------------ */

.cc-shop-head {
	margin-block-end: var(--cc-space-8);
}

/* The archive description Woo renders under the title (term-description on a
 * category, page content on the shop page). Reads as a lead, not body copy. */
.cc-shop-head .term-description,
.cc-shop-head .page-description {
	max-width: var(--cc-prose-max);
	margin-block-start: var(--cc-space-3);
	color: var(--cc-color-muted);
	font-size: var(--cc-text-small);
}

/* ---------------------------------------------------------------------------
 * Category filter row — plain links to the term archives.
 *
 * Nav-style links: the resting underline is dropped and comes back as the
 * state carrier — persistent on the current page, on hover/focus elsewhere.
 * ------------------------------------------------------------------------ */

.cc-shop-filters {
	margin-block-end: var(--cc-space-6);
}

.cc-shop-filters__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cc-space-2) var(--cc-space-5);
}

.cc-shop-filters__list a {
	display: inline-block;
	font-size: var(--cc-text-ui);
	text-decoration: none;
	padding-block: var(--cc-space-1);
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-size: 0 1.5px;
	background-position: 0 100%;
	transition: background-size var(--cc-duration-mid) var(--cc-ease);
}

.cc-shop-filters__list a:hover,
.cc-shop-filters__list a:focus-visible {
	color: var(--cc-color-ink);
	background-size: 100% 1.5px;
}

/* The current archive keeps the underline permanently. */
.cc-shop-filters__list a[aria-current="page"] {
	font-weight: var(--cc-weight-medium);
	background-size: 100% 1.5px;
}

/* ---------------------------------------------------------------------------
 * Toolbar — Woo's result count and ordering select, side by side.
 * ------------------------------------------------------------------------ */

.cc-shop-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--cc-space-3) var(--cc-space-4);
	margin-block-end: var(--cc-space-8);
	padding-block-start: var(--cc-space-4);
	border-block-start: var(--cc-border);
}

.cc-shop-toolbar .woocommerce-result-count {
	margin: 0;
	font-size: var(--cc-text-footnote);
	color: var(--cc-color-muted);
}

.cc-shop-toolbar .woocommerce-ordering {
	margin: 0;
}

/* The select inherits the global .cc-field look via `.woocommerce select`
 * (components.css); the toolbar only stops it stretching full-width. */
.cc-shop-toolbar .woocommerce-ordering select {
	width: auto;
	max-width: 100%;
}

/* ---------------------------------------------------------------------------
 * Pagination — hairline boxes, the current page underlined, not filled.
 * ------------------------------------------------------------------------ */

.cc-shop .woocommerce-pagination {
	margin-block-start: var(--cc-space-12);
	text-align: center;
}

.cc-shop .woocommerce-pagination .page-numbers {
	list-style: none;
	margin: 0;
	padding: 0;
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--cc-space-2);
}

.cc-shop .woocommerce-pagination .page-numbers li {
	margin: 0;
}

.cc-shop .woocommerce-pagination a.page-numbers,
.cc-shop .woocommerce-pagination span.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* The handoff's pill family: 44px round buttons, the current page filled
	 * in the action colour. */
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0 var(--cc-space-3);
	border: var(--cc-border);
	border-radius: var(--cc-radius-pill);
	font-size: var(--cc-text-small);
	font-variant-numeric: tabular-nums;
	text-decoration: none;
	background-color: var(--cc-color-ground);
	color: var(--cc-color-ink);
	transition: border-color var(--cc-duration-fast) var(--cc-ease), background-color var(--cc-duration-fast) var(--cc-ease);
}

.cc-shop .woocommerce-pagination a.page-numbers:hover,
.cc-shop .woocommerce-pagination a.page-numbers:focus-visible {
	border-color: var(--cc-color-action);
	background-color: var(--cc-color-accent-soft);
	color: var(--cc-color-ink);
}

.cc-shop .woocommerce-pagination span.page-numbers.current {
	border-color: var(--cc-color-action);
	background-color: var(--cc-color-action);
	color: var(--cc-color-ground);
	font-weight: var(--cc-weight-medium);
}

/* ---------------------------------------------------------------------------
 * Empty state — message plus a way back to the full catalogue.
 * ------------------------------------------------------------------------ */

.cc-shop-empty {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--cc-space-6);
	padding-block: var(--cc-space-12);
	border-block-start: var(--cc-border);
}

.cc-shop-empty__text {
	max-width: var(--cc-prose-max);
	color: var(--cc-color-muted);
}

/* ---------------------------------------------------------------------------
 * md and up — 768px. The toolbar's stacking never engages above mobile
 * widths; only the head-to-filters gap steps with the mockup's rhythm.
 * ------------------------------------------------------------------------ */

@media (min-width: 48rem) {
	.cc-shop-head {
		margin-block-end: var(--cc-space-10);
	}
}

/* ---------------------------------------------------------------------------
 * Collections row
 *
 * Visually subordinate to the category row above it: the categories are the
 * primary axis of the shop, the themes are a way in. Smaller type and a lighter
 * weight say that without needing a heading.
 * ------------------------------------------------------------------------ */

.cc-shop-filters--collections {
	margin-block-start: calc(var(--cc-space-3) * -1);
}

.cc-shop-filters--collections .cc-shop-filters__list {
	font-size: var(--cc-text-footnote);
}

.cc-shop-filters--collections a {
	color: var(--cc-color-muted);
}

.cc-shop-filters--collections a:hover,
.cc-shop-filters--collections a:focus-visible,
.cc-shop-filters--collections a[aria-current='page'] {
	color: var(--cc-color-ink);
}

/* Woo frames the whole pagination list and each item; the pills stand alone. */
.cc-shop .woocommerce-pagination ul.page-numbers {
	display: flex;
	gap: var(--cc-space-2);
	border: 0;
}

.cc-shop .woocommerce-pagination ul.page-numbers li {
	border: 0;
}