/*
 * Shop / category / search archive (woocommerce/archive-product.php, template-parts/shop/*,
 * inc/shop.php's empty state). The product grid and cards live in product-card.css.
 */

.sl-wc {
	padding-block: 2.5rem;
}
@media (min-width: 1024px) {
	.sl-wc { padding-block: 3.5rem; }
}

/* ---------- Archive header ---------- */
.sl-archive-header { margin-bottom: 2rem; }
.sl-archive-header__title {
	margin-top: .25rem;
	color: var(--sl-black);
	font-family: var(--sl-font-display);
	font-size: 1.5rem;
	line-height: 2rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}
@media (min-width: 640px) {
	.sl-archive-header__title { font-size: 1.875rem; line-height: 2.25rem; }
}
.sl-archive-header__desc {
	max-width: 48rem;
	margin-top: .75rem;
	color: var(--sl-gray-500);
	font-size: .875rem;
	line-height: 1.25rem;
}

/* ---------- Toolbar basics: result count, "Clear all", ordering ---------- */
.sl-archive-toolbar {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.5rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--sl-gray-200);
}
@media (min-width: 1024px) {
	.sl-archive-toolbar { flex-direction: row; align-items: center; }
}
.sl-archive-result-count {
	color: var(--sl-gray-500);
	font-size: .75rem;
	line-height: 1rem;
}
.sl-archive-chips__clear {
	color: var(--sl-gray-400);
	font-size: .75rem;
	line-height: 1rem;
	font-weight: 600;
	transition: color var(--sl-duration) var(--sl-ease-std);
}
.sl-archive-chips__clear:hover { color: var(--sl-black); }
/* WooCommerce gives the sort form `margin: 0 0 1em; float: right`, which lifted it above the
   view switch; the select matches the switch's 38px height (36px buttons + 1px top/bottom border). */
.sl-archive-ordering { display: flex; align-items: center; }
.sl-archive-ordering .woocommerce-ordering {
	float: none;
	margin: 0;
}
.sl-archive-ordering .woocommerce-ordering select.orderby {
	box-sizing: border-box;
	height: 2.375rem;
	padding: .5rem 2rem .5rem .75rem;
	border: 1px solid var(--sl-gray-200);
	border-radius: var(--sl-r-field);
	font-size: .75rem;
	line-height: 1rem;
}

/* ---------- Pagination (template-parts/shop/load-more.php) ----------
   Centred: "Showing 1–24 of 28 products", a thin progress bar (share of the catalog seen so
   far), then square page buttons — current page filled, prev / next arrows, "…" gaps. Links
   open in place (assets/js/site.js "Catalog", data-sl-nav) and scroll back to the list top. */
.sl-paging {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .875rem;
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var(--sl-gray-100);
}
.sl-paging__status {
	margin: 0;
	color: var(--sl-gray-500);
	font-size: .75rem;
	line-height: 1rem;
}
.sl-paging__bar {
	width: 12rem;
	height: 3px;
	overflow: hidden;
	border-radius: var(--sl-radius-full);
	background: var(--sl-gray-200);
}
.sl-paging__bar > span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--sl-black);
	transition: width 400ms var(--sl-ease-apple);
}
.sl-pagination { margin-top: .5rem; }
.sl-pagination__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .375rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.sl-pagination__list > li { display: inline-flex; margin: 0; }
.sl-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 .75rem;
	border: 1px solid var(--sl-gray-200);
	border-radius: var(--sl-r-small);
	background: var(--sl-white);
	color: var(--sl-gray-700);
	font-family: var(--sl-font-mono);
	font-size: .8125rem;
	line-height: 1;
	font-weight: 600;
	text-decoration: none;
	transition: color var(--sl-duration) var(--sl-ease-std), background-color var(--sl-duration) var(--sl-ease-std), border-color var(--sl-duration) var(--sl-ease-std);
}
.sl-pagination a.page-numbers:hover {
	border-color: var(--sl-black);
	color: var(--sl-black);
}
.sl-pagination a.page-numbers:focus-visible {
	outline: 2px solid var(--sl-black);
	outline-offset: 2px;
}
.sl-pagination .page-numbers.current {
	border-color: var(--sl-black);
	background: var(--sl-black);
	color: var(--sl-white);
}
.sl-pagination .page-numbers.dots {
	min-width: 1.5rem;
	padding: 0;
	border-color: transparent;
	background: transparent;
	color: var(--sl-gray-400);
}
.sl-pagination .page-numbers:is(.prev, .next) { font-family: inherit; font-size: 1rem; }
.sl-catalog.is-loading .sl-pagination { opacity: .5; pointer-events: none; }
/* Page changes scroll the list's top under the sticky header. */
[data-sl-catalog] { scroll-margin-top: calc(var(--sl-header-h, 81px) + 1rem); }

/* ---------- Empty state (inc/shop.php) ---------- */
.sl-archive-empty {
	padding-block: 5rem;
	text-align: center;
}
.sl-archive-empty__title {
	margin-bottom: .5rem;
	color: var(--sl-black);
	font-family: var(--sl-font-display);
	font-size: 1.25rem;
	line-height: 1.75rem;
	font-weight: 700;
}
.sl-archive-empty__text {
	margin-bottom: 1.5rem;
	color: var(--sl-gray-500);
	font-size: .875rem;
	line-height: 1.25rem;
}

/* =========================================================================================
 * Category page: header, sidebar filters, toolbar, list view, "Show more"
 * (template-parts/shop/*, inc/catalog.php, assets/js/site.js "Catalog").
 * ====================================================================================== */

/* ---------- Category header ---------- */
.sl-cat-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	margin-top: 1rem;
	padding: 1.75rem;
	overflow: hidden;
	border: 1px solid var(--sl-gray-200);
	border-radius: var(--sl-r-block);
	background: var(--sl-white);
}
@media (min-width: 1024px) {
	.sl-cat-hero {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		padding: 2.5rem;
	}
}
.sl-cat-hero__copy {
	position: relative;
	z-index: 1;
	max-width: 48rem;
}
.sl-cat-hero__eyebrow {
	display: inline-block;
	padding: .125rem .5rem;
	border: 1px solid var(--sl-amber-200);
	border-radius: var(--sl-r-badge);
	background: var(--sl-amber-50);
	color: var(--sl-amber-700);
	font-family: var(--sl-font-mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.sl-cat-hero .sl-archive-header__title { margin-top: .75rem; }
.sl-cat-hero__highlights {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.5rem;
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
	color: var(--sl-gray-500);
	font-family: var(--sl-font-mono);
	font-size: .75rem;
	line-height: 1rem;
}
.sl-cat-hero__highlights li {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
}
.sl-cat-hero__highlights li::before {
	content: "";
	width: .375rem;
	height: .375rem;
	border-radius: var(--sl-radius-full);
	background: var(--sl-amber-500);
}
.sl-cat-hero__pdf {
	position: relative;
	z-index: 1;
	flex-shrink: 0;
	align-self: flex-start;
}
@media (min-width: 1024px) {
	.sl-cat-hero__pdf { align-self: auto; }
}
/* Decorative architectural line in the corner (mockup). */
.sl-cat-hero__art {
	position: absolute;
	top: 1.5rem;
	right: 2.5rem;
	display: none;
	width: 11rem;
	height: 7rem;
	border-top: 1px solid var(--sl-gray-200);
	border-left: 1px solid var(--sl-gray-200);
	transform: skewX(-35deg);
	pointer-events: none;
}
@media (min-width: 1024px) {
	.sl-cat-hero__art { display: block; }
	.sl-cat-hero:has(.sl-cat-hero__pdf) .sl-cat-hero__art { right: 18rem; }
}

/* ---------- Layout: sidebar + results ---------- */
.sl-catalog {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2rem;
	margin-top: 1.5rem;
}
@media (min-width: 1024px) {
	.sl-catalog { grid-template-columns: 16.5rem minmax(0, 1fr); }
}
.sl-catalog__main {
	min-width: 0;
	transition: opacity 200ms var(--sl-ease-std);
}
.sl-catalog.is-loading .sl-catalog__main {
	opacity: .45;
	pointer-events: none;
}
/* Product grid next to the sidebar: 2 / 3 columns (4 when the category asks for it). */
.sl-catalog ul.products {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px) {
	.sl-catalog ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
	.sl-catalog ul.products.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.sl-catalog ul.products.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Sidebar ---------- */
.sl-filters {
	position: fixed;
	inset: 0 auto 0 0;
	z-index: 70;
	width: min(22rem, 88vw);
	overflow-y: auto;
	background: var(--sl-white);
	box-shadow: var(--sl-shadow-xl);
	transform: translateX(-105%);
	transition: transform 300ms var(--sl-ease-apple);
}
.sl-catalog.is-filters-open .sl-filters { transform: none; }
.sl-filters-backdrop {
	position: fixed;
	inset: 0;
	z-index: 65;
	display: none;
	border: 0;
	background: rgb(0 0 0 / .4);
}
.sl-catalog.is-filters-open .sl-filters-backdrop { display: block; }
.sl-filters__form { padding: 1.25rem; }
@media (min-width: 1024px) {
	.sl-filters {
		position: sticky;
		top: calc(var(--sl-header-h, 81px) + 1rem);
		z-index: auto;
		width: auto;
		max-height: calc(100vh - var(--sl-header-h, 81px) - 2rem);
		align-self: start;
		border: 1px solid var(--sl-gray-200);
		border-radius: var(--sl-r-block);
		box-shadow: none;
		transform: none;
		transition: none;
	}
	.sl-filters-backdrop,
	.sl-filters__close,
	.sl-filters__done,
	.sl-filters-open { display: none !important; }
}
.sl-filters__head {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding-bottom: 1rem;
}
.sl-filters__title {
	margin-right: auto;
	color: var(--sl-black);
	font-family: var(--sl-font-mono);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.sl-filters__reset {
	color: var(--sl-gray-500);
	font-size: .75rem;
	text-decoration: underline;
}
.sl-filters__reset:hover { color: var(--sl-black); }

.sl-filter {
	min-width: 0;
	margin: 0;
	padding: 1rem 0;
	border: 0;
	border-top: 1px solid var(--sl-gray-200);
}
.sl-filter__title {
	display: block;
	width: 100%;
	margin-bottom: .75rem;
	padding: 0;
	color: var(--sl-black);
	font-family: var(--sl-font-mono);
	font-size: .75rem;
	line-height: 1rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.sl-filter__option {
	display: flex;
	align-items: center;
	gap: .625rem;
	padding: .3125rem 0;
	color: var(--sl-gray-700);
	font-size: .875rem;
	line-height: 1.25rem;
	cursor: pointer;
}
.sl-filter__option input {
	flex-shrink: 0;
	border-radius: var(--sl-radius-sm);
	color: var(--sl-black);
}
.sl-filter__option:hover .sl-filter__label { color: var(--sl-black); }
.sl-filter__option.is-empty { opacity: .45; }
.sl-filter__label { min-width: 0; }
.sl-filter__count {
	margin-left: auto;
	color: var(--sl-gray-400);
	font-family: var(--sl-font-mono);
	font-size: .75rem;
}
.sl-filter__dot {
	flex-shrink: 0;
	width: 1rem;
	height: 1rem;
	border-radius: var(--sl-radius-full);
	background: var(--sl-gray-100);
	box-shadow: 0 0 0 1px rgb(0 0 0 / .12);
}

/* Price: dual range slider over one track + two number fields. */
.sl-price-range {
	--lo: 0%;
	--hi: 100%;
	position: relative;
	height: 1.5rem;
	margin: .25rem .5rem .75rem;
}
.sl-price-range::before,
.sl-price-range::after {
	content: "";
	position: absolute;
	top: 50%;
	height: 4px;
	border-radius: 2px;
	transform: translateY(-50%);
}
.sl-price-range::before { left: 0; right: 0; background: var(--sl-gray-200); }
.sl-price-range::after { left: var(--lo); right: calc(100% - var(--hi)); background: var(--sl-black); }
.sl-price-range__slider {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	margin: 0;
	background: none;
	pointer-events: none;
	-webkit-appearance: none;
	appearance: none;
}
.sl-price-range__slider::-webkit-slider-thumb {
	width: 1.125rem;
	height: 1.125rem;
	border: 2px solid var(--sl-black);
	border-radius: 50%;
	background: var(--sl-white);
	cursor: pointer;
	pointer-events: auto;
	-webkit-appearance: none;
	appearance: none;
}
.sl-price-range__slider::-moz-range-thumb {
	width: 1rem;
	height: 1rem;
	border: 2px solid var(--sl-black);
	border-radius: 50%;
	background: var(--sl-white);
	cursor: pointer;
	pointer-events: auto;
}
.sl-price-range__slider::-moz-range-track { background: none; }
.sl-price-inputs {
	display: flex;
	align-items: center;
	gap: .5rem;
}
.sl-price-inputs__field { flex: 1 1 0%; min-width: 0; }
.sl-price-inputs input {
	width: 100%;
	padding: .5rem .625rem;
	border: 1px solid var(--sl-gray-200);
	border-radius: var(--sl-r-field);
	font-family: var(--sl-font-mono);
	font-size: .8125rem;
}
.sl-price-inputs__sep { color: var(--sl-gray-400); }

/* In-stock switch. */
.sl-switch {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	cursor: pointer;
}
.sl-switch__label {
	color: var(--sl-gray-700);
	font-size: .875rem;
	line-height: 1.25rem;
	font-weight: 500;
}
.sl-switch__label .sl-filter__count { margin-left: .25rem; }
.sl-switch__input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}
.sl-switch__track {
	position: relative;
	flex-shrink: 0;
	width: 2.5rem;
	height: 1.375rem;
	border-radius: var(--sl-radius-full);
	background: var(--sl-gray-300);
	transition: background-color 200ms var(--sl-ease-std);
}
.sl-switch__track::after {
	content: "";
	position: absolute;
	top: .1875rem;
	left: .1875rem;
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	background: var(--sl-white);
	box-shadow: var(--sl-shadow-sm);
	transition: transform 200ms var(--sl-ease-apple);
}
.sl-switch__input:checked + .sl-switch__track { background: var(--sl-black); }
.sl-switch__input:checked + .sl-switch__track::after { transform: translateX(1.125rem); }
.sl-switch__input:focus-visible + .sl-switch__track {
	outline: 2px solid var(--sl-black);
	outline-offset: 2px;
}

.sl-filters__actions {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	padding-top: 1rem;
	border-top: 1px solid var(--sl-gray-200);
}
/* Live filtering (JS) needs no Apply button; without JS the form is submitted with it. */
html.sl-js .sl-filters__apply { display: none; }
html:not(.sl-js) .sl-filters__done { display: none; }
@media (min-width: 1024px) {
	html.sl-js .sl-filters__actions { display: none; }
}

/* ---------- Toolbar ---------- */
.sl-archive-toolbar__start,
.sl-archive-toolbar__end {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem .75rem;
}
.sl-archive-toolbar__end { justify-content: space-between; }
@media (min-width: 1024px) {
	.sl-archive-toolbar__end { justify-content: flex-end; }
}
.sl-filters-open__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.25rem;
	height: 1.25rem;
	padding: 0 .25rem;
	border-radius: var(--sl-radius-full);
	background: var(--sl-black);
	color: var(--sl-white);
	font-size: 10px;
}
.sl-active-chip {
	display: inline-flex;
	align-items: center;
	gap: .375rem;
	padding: .25rem .625rem;
	border: 1px solid var(--sl-gray-200);
	border-radius: var(--sl-r-badge);
	background: var(--sl-gray-50);
	color: var(--sl-gray-700);
	font-size: .75rem;
	line-height: 1rem;
	transition: border-color var(--sl-duration) var(--sl-ease-std);
}
.sl-active-chip:hover { border-color: var(--sl-black); color: var(--sl-black); }
/* Category links (sidebar "Category" group on category / shop pages): real links to the
   category pages, drawn exactly like the checkbox options (a checked box on the current one). */
.sl-filter__check {
	flex-shrink: 0;
	width: 1rem;
	height: 1rem;
	border: 1px solid var(--sl-gray-500);
	border-radius: var(--sl-radius-sm);
	background: var(--sl-white) center / 100% 100% no-repeat;
}
.sl-filter__link.is-active .sl-filter__check {
	border-color: transparent;
	background-color: var(--sl-black);
	background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}
.sl-filter__link.is-active .sl-filter__label { color: var(--sl-black); font-weight: 600; }