/* =========================================================================
   Pukka Shop / Category Archive
   Wireframe-stage styling for the Products Archive template:
   archive header, result count, pagination, empty state, grid spacing.
   Token-driven (--pk-* from custom.css) with safe fallbacks.
   ========================================================================= */

/* ── Archive header (title + description + count) ─────────────────────── */
.pk-archive-head {
	max-width: var(--pk-header-max, 1320px);
	margin: 0 auto;
	padding: 8px 0 20px;
	text-align: center;
}
.pk-archive-head__title {
	margin: 0 0 10px;
	font-size: clamp(28px, 4vw, 40px);
	font-weight: 800;
	color: var(--pk-ink, #0F172A);
	line-height: 1.1;
}
.pk-archive-head__desc {
	max-width: 680px;
	margin: 0 auto 14px;
	color: var(--pk-mute, #6B7280);
	font-size: 16px;
	line-height: 1.65;
}

/* ── Result count ────────────────────────────────────────────────────── */
.pk-result-count {
	margin: 0;
	font-size: 14px;
	color: var(--pk-mute, #6B7280);
}
.pk-result-count strong { color: var(--pk-ink, #0F172A); font-weight: 600; }

/* When the count sits in the toolbar row next to the filter bar. */
.pk-archive-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin: 0 0 14px;
}

/* ── Grid spacing (the .sbncard loop items) ──────────────────────────── */
/* Elementor controls the grid columns/gap; this is just breathing room
   around the loop and consistent card stretch. */
.elementor-loop-container.elementor-grid { align-items: stretch; }
.e-loop-item { display: flex; }
.e-loop-item > .sbncard { width: 100%; }

/* ── Pagination (works for Elementor Loop Grid + WooCommerce) ─────────── */
.woocommerce-pagination,
.elementor-pagination {
	margin: 36px 0 8px;
	text-align: center;
}
.woocommerce-pagination ul,
.woocommerce-pagination .page-numbers {
	list-style: none;
	display: inline-flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 0;
	margin: 0;
	border: 0 !important;
}
.woocommerce-pagination .page-numbers li { margin: 0; }

.page-numbers,
.elementor-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	border: 1px solid var(--pk-line, #E5E7EB);
	border-radius: var(--pk-radius-sm, 10px);
	color: var(--pk-ink, #0F172A);
	text-decoration: none;
	font-size: 14.5px;
	font-weight: 500;
	background: #fff;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.page-numbers:hover { border-color: var(--pk-teal, #0E6B6B); color: var(--pk-teal, #0E6B6B); }
.page-numbers.current {
	background: var(--pk-teal, #0E6B6B);
	border-color: var(--pk-teal, #0E6B6B);
	color: #fff;
}
.page-numbers.dots { border: 0; background: transparent; }

/* ── Empty / no-results state ────────────────────────────────────────── */
.pk-no-results {
	text-align: center;
	padding: 60px 20px;
	max-width: 460px;
	margin: 0 auto;
	color: var(--pk-mute, #6B7280);
}
.pk-no-results svg { width: 56px; height: 56px; opacity: .4; margin-bottom: 16px; }
.pk-no-results h2 { margin: 0 0 8px; font-size: 20px; color: var(--pk-ink, #0F172A); font-weight: 700; }
.pk-no-results p { margin: 0 0 20px; font-size: 15px; }
.pk-no-results__reset {
	display: inline-block;
	background: var(--pk-teal, #0E6B6B);
	color: #fff;
	text-decoration: none;
	padding: 11px 22px;
	border-radius: var(--pk-radius-sm, 10px);
	font-weight: 600;
}
.pk-no-results__reset:hover { background: var(--pk-teal-dark, #0A5454); }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 600px) {
	.pk-archive-head { padding-bottom: 14px; }
	.pk-archive-toolbar { gap: 10px; }
	.page-numbers,
	.elementor-pagination .page-numbers { min-width: 38px; height: 38px; padding: 0 10px; }
}