/* ============================================================
 * Topro Product Filter — front-end styles.
 * Scoped under .topro-product-filter. Rename to .scss and wrap
 * if you want SASS nesting; the cascade below is already scoped.
 * ============================================================ */

.topro-product-filter {
	--tpf-columns: 4;
	--tpf-text: #1f2328;
	--tpf-muted: #6b7280;
	--tpf-border: #d8d2c7;
	--tpf-border-strong: #1f2328;
	--tpf-beige: #efe9df;
	--tpf-active-hover-border: #a69e90;
	--tpf-parent-active: #ddd0b6;
	--tpf-sub-bg: #f4efe6;
	--tpf-sub-active: #ddccae;
	--tpf-sub-active-hover-border: #a69e90;
	--tpf-radius: 6px;
	--tpf-pill-radius: 999px;
	--tpf-gap: 1.25rem;

	color: var( --tpf-text );
	font-family: inherit;
}

.topro-product-filter__heading {
	font-size: clamp( 2rem, 4vw, 3rem );
	font-weight: 500;
	line-height: 1.1;
	margin: 0 0 1.25rem;
}

/* ---- Category buttons --------------------------------------- */
.topro-product-filter__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
}

.topro-product-filter__button {
	display: inline-flex;
	align-items: baseline;
	gap: 0.35em;
	padding: 0.55em 0.9em;
	font: inherit;
	font-size: 1rem;
	line-height: 1.2;
	color: var( --tpf-text );
	background: #fff;
	border: 1px solid var( --tpf-border );
	border-radius: var( --tpf-radius );
	cursor: pointer;
	transition: background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.topro-product-filter__button:hover {
	border-color: var( --tpf-border-strong );
	text-decoration: underline;
}

.topro-product-filter__button:focus-visible {
	outline: 2px solid var( --tpf-border-strong );
	outline-offset: 2px;
}

/* Hovering a selected category softens its strong border to a tone between the
   border and the fill, rather than darkening it like an unselected button. */
.topro-product-filter__button.is-active:hover {
	border-color: var( --tpf-active-hover-border );
	box-shadow: inset 0 0 0 1px var( --tpf-active-hover-border );
}

.topro-product-filter__button.is-active {
	background: var( --tpf-beige );
	border-color: var( --tpf-border-strong );
	box-shadow: inset 0 0 0 1px var( --tpf-border-strong );
}

.topro-product-filter__button-count {
	color: var( --tpf-text );
}

.topro-product-filter__button.is-active .topro-product-filter__button-count {
	color: var( --tpf-text );
}

/* A top-level category that has sub-categories gets a distinct active state so
   it's clear which parent is currently expanded. */
.topro-product-filter__button.has-children.is-active {
	background: var( --tpf-parent-active );
	border-color: var( --tpf-border-strong );
	box-shadow: inset 0 0 0 1px var( --tpf-border-strong );
}

.topro-product-filter__button.has-children.is-active:hover {
	border-color: var( --tpf-active-hover-border );
	box-shadow: inset 0 0 0 1px var( --tpf-active-hover-border );
}

/* ---- Sub-category buttons (revealed when a parent is selected) --- */
.topro-product-filter__subcategories {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: -0.75rem;
	margin-bottom: 1.5rem;
	padding-left: 0.85rem;
	border-left: 3px solid var( --tpf-border-strong );
}

.topro-product-filter__subcategories.is-empty {
	display: none;
}

/* Sub-category buttons share the base button shape but use a tinted background
   in both states so they read as a nested tier, not top-level categories. */
.topro-product-filter__button--sub {
	background: var( --tpf-sub-bg );
}

.topro-product-filter__button--sub.is-active {
	background: var( --tpf-sub-active );
	border-color: var( --tpf-border-strong );
	box-shadow: inset 0 0 0 1px var( --tpf-border-strong );
}

/* Selected sub-categories soften only slightly on hover, not as light as the
   top-level selected buttons. */
.topro-product-filter__button--sub.is-active:hover {
	border-color: var( --tpf-sub-active-hover-border );
	box-shadow: inset 0 0 0 1px var( --tpf-sub-active-hover-border );
}

/* ---- Active filter pills ------------------------------------ */
.topro-product-filter__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1rem;
}

.topro-product-filter__pills.is-empty {
	display: none;
}

.topro-product-filter__pill {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.45em 0.9em;
	font: inherit;
	font-size: 0.95rem;
	color: var( --tpf-text );
	background: var( --tpf-beige );
	border: 0;
	border-radius: var( --tpf-pill-radius );
	cursor: pointer;
}

.topro-product-filter__pill:focus-visible {
	outline: 2px solid var( --tpf-border-strong );
	outline-offset: 2px;
}

.topro-product-filter__pill-remove {
	display: inline-block;
	font-size: 1.1em;
	line-height: 1;
	color: var( --tpf-text );
	transition: transform 0.12s ease;
}

.topro-product-filter__pill:hover .topro-product-filter__pill-remove {
	transform: scale( 1.25 );
}

/* ---- Clear filters ------------------------------------------ */
.topro-product-filter__clear {
	display: inline-flex;
	align-items: center;
	padding: 0.55em 0.9em;
	font: inherit;
	font-size: 1rem;
	color: var( --tpf-text );
	background: #fff;
	border: 1px solid var( --tpf-border-strong );
	border-radius: var( --tpf-radius );
	cursor: pointer;
	transition: background-color 0.12s ease;
}

.topro-product-filter__clear:hover {
	background: #f3f3f3;
	text-decoration: underline;
}

.topro-product-filter__clear:focus-visible {
	outline: 2px solid var( --tpf-border-strong );
	outline-offset: 2px;
}

/* ---- Toolbar: clear filters + result count ------------------ */
/* One row: "Clear filters" on the left (hidden when nothing is selected),
   the total result count 25px to its right. With the button hidden, the
   count is the only item, so it sits on the left on its own row. */
.topro-product-filter__toolbar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 25px;
	margin-bottom: 1.25rem;
}

.topro-product-filter__result-count {
	margin: 0;
	color: var( --tpf-muted );
	font-size: 0.95rem;
}

/* ---- Pagination --------------------------------------------- */
.topro-product-filter__pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	margin-top: 2rem;
}

.topro-product-filter__page {
	min-width: 2.5em;
	padding: 0.5em 0.7em;
	font: inherit;
	font-size: 0.95rem;
	color: var( --tpf-text );
	background: #fff;
	border: 1px solid var( --tpf-border );
	border-radius: var( --tpf-radius );
	cursor: pointer;
}

.topro-product-filter__page:hover:not( :disabled ) {
	border-color: var( --tpf-border-strong );
}

.topro-product-filter__page:focus-visible {
	outline: 2px solid var( --tpf-border-strong );
	outline-offset: 2px;
}

.topro-product-filter__page.is-current {
	background: var( --tpf-beige );
	border-color: var( --tpf-border-strong );
	box-shadow: inset 0 0 0 1px var( --tpf-border-strong );
	cursor: default;
}

.topro-product-filter__page:disabled {
	opacity: 0.45;
	cursor: default;
}

.topro-product-filter__page-gap {
	padding: 0 0.25em;
	color: var( --tpf-muted );
}

/* ---- Product grid ------------------------------------------- */
.topro-product-filter__grid {
	display: grid;
	grid-template-columns: repeat( var( --tpf-columns ), minmax( 0, 1fr ) );
	gap: 25px;
}

/* Auto-fit: columns adjust to the available width automatically, dropping to
   fewer columns on smaller screens without fixed breakpoints. */
.topro-product-filter.is-auto-columns .topro-product-filter__grid {
	grid-template-columns: repeat( auto-fill, minmax( var( --tpf-min-col ), 1fr ) );
}

.topro-product-filter__item-link {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	text-decoration: none;
	color: inherit;
}

.topro-product-filter__item-image {
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: #fff;
	border-radius: var( --tpf-radius );
}

/* Fixed image dimensions on desktop (keeps the 3:4 ratio: 313 × ~417). */
@media ( min-width: 783px ) {
	.topro-product-filter__item-image {
		width: 313px;
		max-width: 100%;
		margin-inline: auto;
	}
}

.topro-product-filter__item-image img,
.topro-product-filter__img {
	width: 100%;
	height: auto;
	max-width: 100%;
	/* Mirror the native WooCommerce product image: 3:4 frame, image centred
	   and cropped to fill, on a white card. */
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: inherit;
	vertical-align: middle;
	transition: transform 0.5s ease, box-shadow 0.2s ease;
}

.topro-product-filter__img--placeholder {
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient( 45deg, #f0ede7, #f0ede7 10px, #e9e5dd 10px, #e9e5dd 20px );
}

.topro-product-filter__item-title {
	font-size: 1rem;
	line-height: 1.35;
}

.topro-product-filter__item-link:hover .topro-product-filter__item-title,
.topro-product-filter__item-link:focus-visible .topro-product-filter__item-title {
	text-decoration: underline;
}

/* ---- Utility & states --------------------------------------- */
.topro-product-filter .is-hidden {
	display: none !important;
}

.topro-product-filter__empty {
	margin: 0;
	color: var( --tpf-muted );
}

.topro-product-filter--notice {
	padding: 1rem;
	border: 1px dashed var( --tpf-border );
	border-radius: var( --tpf-radius );
	color: var( --tpf-muted );
	background: #faf8f4;
}

/* Visually-hidden helper for screen readers (in case the theme lacks one). */
.topro-product-filter .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

@media ( max-width: 1100px ) {
	.topro-product-filter:not( .is-auto-columns ) .topro-product-filter__grid {
		grid-template-columns: repeat( min( var( --tpf-columns ), 3 ), minmax( 0, 1fr ) );
	}
}

@media ( max-width: 782px ) {
	.topro-product-filter:not( .is-auto-columns ) .topro-product-filter__grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( max-width: 480px ) {
	.topro-product-filter:not( .is-auto-columns ) .topro-product-filter__grid {
		grid-template-columns: 1fr 1fr;
	}
}