/* Shop / category grid only. Deliberately minimal — no sidebar, no filters,
   no sorting UI, no result count (master handoff v1.2 §17). Same file
   styles real category archives too, since they share the same
   WooCommerce template. */

.woocommerce-page.woocommerce {
	padding-block: var(--space-6);
}

/* Breadcrumb — thin, muted trail, not a UI element competing for attention. */
.woocommerce-breadcrumb {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	margin-bottom: var(--space-4);
}
.woocommerce-breadcrumb a { color: var(--color-text-muted); }
.woocommerce-breadcrumb a:hover { color: var(--color-accent); }

.page-title,
.woocommerce-products-header__title {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: var(--display-h1);
	margin-bottom: var(--space-3);
}
@media (min-width: 1024px) {
	.page-title, .woocommerce-products-header__title { font-size: 3rem; } /* 48px — page H1, desktop */
}

/* Optional short category description. */
.term-description {
	max-width: 65ch;
	color: var(--color-text-muted);
	font-size: var(--text-base);
	margin-bottom: var(--space-5);
}
@media (max-width: 1023px) {
	/* Mobile type refinement pass — desktop rules above untouched. */
	.page-title,
	.woocommerce-products-header__title {
		font-size: 2rem; /* 32px, within the 30–32px target */
		line-height: 1.08;
	}
	.term-description { font-size: 15px; line-height: 1.5; }
}

/* Category chips — Catalog: Усі / categories / Новинки / Бестселери.
   Category page: same row, doubles as "neighboring categories" nav. */
.category-chips {
	display: flex;
	gap: var(--space-2);
	overflow-x: auto;
	scrollbar-width: none;
	padding-bottom: var(--space-2);
	margin-bottom: var(--space-5);
}
.category-chips::-webkit-scrollbar { display: none; }
.category-chips__item {
	flex-shrink: 0;
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius-pill);
	border: 1px solid var(--color-border);
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--color-text);
	white-space: nowrap;
}
.category-chips__item:hover { border-color: var(--color-accent); }
.category-chips__item.is-active {
	background: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-accent-contrast);
}

.product-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-4) var(--space-3);
}
@media (min-width: 640px) {
	.product-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
}
@media (min-width: 1024px) {
	.product-grid { grid-template-columns: repeat(4, 1fr); }
}

.woocommerce-pagination {
	margin-top: var(--space-6);
	text-align: center;
}
.woocommerce-pagination ul {
	display: inline-flex;
	gap: var(--space-2);
}
.woocommerce-pagination a,
.woocommerce-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-border);
}
.woocommerce-pagination .current {
	background: var(--color-accent);
	color: var(--color-accent-contrast);
	border-color: var(--color-accent);
}

/* Progressive-enhancement "load more" button (assets/js/catalog.js) —
   replaces the (hidden but still present) native pagination when JS runs. */
.catalog__load-more {
	display: flex;
	margin: var(--space-6) auto 0;
}

/* Subcategory row (category pages): lighter, smaller chips under the main
   row; the active one is outlined in terracotta rather than filled, so the
   two rows don't compete. */
.category-chips:has(+ .category-chips--sub) {
	margin-bottom: var(--space-3);
}
.category-chips--sub .category-chips__item {
	padding: 6px var(--space-3);
	background: var(--color-surface);
	color: var(--color-text-muted);
}
.category-chips--sub .category-chips__item.is-active {
	background: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface));
	border-color: var(--color-accent);
	color: var(--color-accent-dark);
}