/* DHS Shop Filters — only what custom.css doesn't already style.
   custom.css already has the full design system for .title-breadcrumb,
   .filter-wrapper/.filter-column/.filter-body, .product-accordion/
   .accordion-item/.checkmark/.accordion-toggle, .pf (price filter),
   .toolbox/.grid-list, .product-grid/.product-row/.product-col,
   .pagination/.page-item/.page-link — do not redeclare any of that here,
   it will fight the existing rules instead of matching them. */

/* Bug fix: custom.css absolutely-positions the (invisible) checkbox input
   but never gives .accordion-checkbox its own position, so the input
   positions itself against some distant ancestor instead of its own label —
   it can end up overlapping/blocking the wrong element on the page. */
.accordion-checkbox {
	position: relative;
}

/* Bug fix: .filter-wrapper is a flex item inside .container (also flex) but
   custom.css never gives it its own width — without one it can shrink to
   its content's minimum size instead of filling .container, which starves
   .filter-column/.filter-body of the 1400px-based 25%/75% split they
   expect and collapses the sidebar down to a few cramped, wrapping words. */
.filter-wrapper {
	width: 100%;
}

/* "Categories" header — same dark-bar treatment as Brands/Filter/Colours. */
.product-accordion > h3 {
	background: #2c2e32;
	color: var(--white, #fff);
	font-size: 16px;
	margin: 0 0 0;
	padding-block: 15px;
	padding-inline: 20px;
	text-transform: uppercase;
	font-weight: bold;
}

/* Category count badge next to each accordion label — new, no data for it existed before. */
.dhs-count {
	color: #767676;
	font-size: 0.85em;
}

/* Empty-state message for the category tree. */
.dhs-no-filters {
	color: #767676;
}

/* Empty-state for the product grid — same bordered "card" footprint as the
   toolbar above it, instead of a bare line of text with no structure. */
.dhs-no-products {
	padding: 60px 20px;
	text-align: center;
	border: 1px solid #dee2e6;
	color: #767676;
	font-size: 16px;
}

.dhs-no-products p {
	margin: 0;
}

/* "Clear" sits above the accordion — resets categories + price via AJAX
   (see shop-filters.js), no separate "Apply" button needed since checking a
   category and releasing "Filter" on the price slider both apply instantly.
   Disabled/inert until a filter is actually active. */
.dhs-filter-actions {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 12px;
}

.dhs-btn-clear {
	color: var(--theme-green, #196D0C);
	font-weight: 500;
	cursor: pointer;
}

.dhs-btn-clear:hover {
	text-decoration: underline;
}

.dhs-btn-clear.is-disabled {
	color: #b7bcc2;
	pointer-events: none;
	text-decoration: none;
}

/* AJAX loading state while a new page of results is being fetched. */
#dhs-product-grid {
	position: relative;
	min-height: 60px;
}

#dhs-product-grid[aria-busy="true"] > *:not(.dhs-spinner) {
	opacity: 0.4;
	pointer-events: none;
}

.dhs-spinner {
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 42px;
	height: 42px;
	border: 4px solid #e2e5e9;
	border-top-color: var(--theme-green, #196D0C);
	border-radius: 50%;
	animation: dhs-spin 0.8s linear infinite;
}

#dhs-product-grid[aria-busy="true"] .dhs-spinner {
	display: block;
}

@keyframes dhs-spin {
	from {
		transform: translate(-50%, -50%) rotate(0deg);
	}
	to {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.dhs-spinner {
		animation: none;
	}
}