/* Shop / Category archive
 *
 * Title + count, a sticky horizontal toolbar (Category + Price filter
 * dropdowns on the left, Sort on the right), then a centered full-width
 * product grid + pagination. Cards reuse .bollaert-product-card.
 */

.bollaert-shop {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--4);
	margin-block: var(--wp--preset--spacing--8);
}

/* --- Head --- */

.bollaert-shop__head {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--3);
}

.bollaert-shop__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--2xl);
	color: var(--wp--preset--color--text);
}

.bollaert-shop__count {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
}

.bollaert-shop__intro {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
	max-width: 90ch;
}

.bollaert-shop__intro p {
	margin: 0 0 0.5em;
}

/* --- Sticky toolbar (filters + sort) --- */

.bollaert-shop__toolbar {
	position: static;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--3);
	padding: var(--wp--preset--spacing--4) 0;
	background: transparent;
}

.bollaert-shop__toolbar-filters {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--2);
}

.bollaert-shop__clear {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.bollaert-shop__clear:hover {
	color: var(--wp--preset--color--brand);
}

/* --- Filter dropdowns --- */

.bollaert-dropdown {
	position: relative;
}

.bollaert-dropdown__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.72em 1.25em;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	background: var(--wp--preset--color--white);
	font: inherit;
	font-size: var(--wp--preset--font-size--md);
	font-weight: 600;
	color: var(--wp--preset--color--brand);
	cursor: pointer;
	box-shadow: var(--wp--preset--shadow--subtle);
	transition: border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

/* Leading icon on the filter / sort buttons (blue, like the label) */
.bollaert-toolbar__lead { flex-shrink: 0; }

.bollaert-dropdown__btn:hover,
.bollaert-dropdown__btn[aria-expanded="true"],
.bollaert-dropdown__btn.is-active {
	border-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--brand);
}

.bollaert-dropdown__chev {
	flex-shrink: 0;
	transform: rotate(90deg);
	transition: transform 0.2s ease;
}

.bollaert-dropdown__btn[aria-expanded="true"] .bollaert-dropdown__chev {
	transform: rotate(-90deg);
}

.bollaert-dropdown__panel {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 1500;
	min-width: 260px;
	max-height: 60vh;
	overflow-y: auto;
	padding: var(--wp--preset--spacing--4);
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	box-shadow: var(--wp--preset--shadow--elevated);
}

.bollaert-dropdown__panel[hidden] {
	display: none;
}

/* Category list inside the dropdown */
.bollaert-shop__cats,
.bollaert-shop__subcats {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bollaert-shop__cats a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--2);
	padding: 0.4em 0;
	color: var(--wp--preset--color--text);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--sm);
}

.bollaert-shop__cats a span {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--xs);
}

.bollaert-shop__cats a:hover,
.bollaert-shop__cats a.is-active {
	color: var(--wp--preset--color--brand);
	font-weight: 600;
}

.bollaert-shop__subcats {
	margin: 2px 0 var(--wp--preset--spacing--2) var(--wp--preset--spacing--3);
	padding-left: var(--wp--preset--spacing--3);
	border-left: 2px solid var(--wp--preset--color--border);
}

/* Price form inside the dropdown */
.bollaert-shop__price-row {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	margin-bottom: var(--wp--preset--spacing--3);
}

.bollaert-shop__price input {
	width: 100%;
	min-width: 0;
	padding: 0.5em 0.6em;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	font: inherit;
	font-size: var(--wp--preset--font-size--sm);
}

.bollaert-shop__price button {
	width: 100%;
	padding: 0.55em 1em;
	border: none;
	border-radius: 999px;
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--white);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.bollaert-shop__price button:hover {
	background: var(--wp--preset--color--brand-dark);
}

/* --- Sort --- */

.bollaert-shop__sort {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
}

.bollaert-shop__sort-label {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
}

.bollaert-select {
	position: relative;
}

.bollaert-select__btn {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.6em;
	min-width: 210px;
	padding: 0.72em 1.25em;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	background: var(--wp--preset--color--white);
	font: inherit;
	font-size: var(--wp--preset--font-size--md);
	color: var(--wp--preset--color--brand);
	cursor: pointer;
	box-shadow: var(--wp--preset--shadow--subtle);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.bollaert-select__btn:hover,
.bollaert-select__btn[aria-expanded="true"] {
	border-color: var(--wp--preset--color--brand);
}

.bollaert-select__chev {
	flex-shrink: 0;
	transform: rotate(90deg);
	transition: transform 0.2s ease;
}

.bollaert-select__btn[aria-expanded="true"] .bollaert-select__chev {
	transform: rotate(-90deg);
}

.bollaert-select__list {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	left: 0;
	z-index: 1500;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	box-shadow: var(--wp--preset--shadow--elevated);
}

.bollaert-select__list[hidden] {
	display: none;
}

.bollaert-select__list li {
	padding: 0.5em 0.7em;
	border-radius: 8px;
	font-size: var(--wp--preset--font-size--sm);
	white-space: nowrap;
	cursor: pointer;
}

.bollaert-select__list li:hover {
	background: var(--wp--preset--color--brand-tint);
	color: var(--wp--preset--color--brand);
}

.bollaert-select__list li.is-selected {
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--white);
	font-weight: 600;
}

/* --- Product grid (centered, 4-up) --- */

.bollaert-shop__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: var(--wp--preset--spacing--4);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 4 per full row; cards GROW to fill the row — including the last row — so no
 * dead space is left at the end of a listing. */
.bollaert-shop__grid .bollaert-product-card {
	flex: 1 1 calc((100% - 4 * var(--wp--preset--spacing--4)) / 5);
	max-width: 340px;
	scroll-snap-align: none;
}

/* --- Pagination --- */

.bollaert-shop__pagination {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--2);
	justify-content: center;
	margin-top: var(--wp--preset--spacing--8);
}

.bollaert-shop__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 0.6em;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--text);
	text-decoration: none;
	font-weight: 600;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.bollaert-shop__pagination a.page-numbers:hover {
	border-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--brand);
}

.bollaert-shop__pagination .page-numbers.current {
	background: var(--wp--preset--color--brand);
	border-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--white);
}

.bollaert-shop__pagination .page-numbers.dots {
	border-color: transparent;
	background: transparent;
}

.bollaert-shop__empty {
	padding: var(--wp--preset--spacing--12) 0;
	text-align: center;
	color: var(--wp--preset--color--muted);
}

/* --- Responsive: card basis per breakpoint --- */

@media (max-width: 1024.98px) {
	.bollaert-shop__grid .bollaert-product-card {
		flex-basis: calc((100% - 2 * var(--wp--preset--spacing--4)) / 3);
	}
}

@media (max-width: 700px) {
	/* Keep 2 products per row on phones (standard for shop grids) */
	.bollaert-shop__grid .bollaert-product-card {
		flex-basis: calc((100% - var(--wp--preset--spacing--4)) / 2);
		max-width: none;
	}

	.bollaert-shop__sort-label {
		display: none;
	}

	.bollaert-select__btn {
		min-width: 140px;
	}

	.bollaert-shop__toolbar {
		gap: var(--wp--preset--spacing--2);
	}

	/* Filter dropdown panels: anchor to the filter bar and let them span its
	   width instead of overflowing the right edge of the screen. The 260px
	   absolute panel (left: 0) ran off-screen when the "Prijs/Prix" button sat
	   mid-row — clipping the Max € field and the Apply button on phones. */
	.bollaert-shop__toolbar-filters {
		position: relative;
	}

	.bollaert-shop__toolbar-filters .bollaert-dropdown {
		position: static;
	}

	.bollaert-shop__toolbar-filters .bollaert-dropdown__panel {
		left: 0;
		right: 0;
		min-width: 0;
		width: auto;
		max-width: 100%;
	}
}