/* ============================================================
 * 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-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 );
}

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

.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-muted );
}

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

/* ---- 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 {
	font-size: 1.1em;
	line-height: 1;
	color: var( --tpf-muted );
}

.topro-product-filter__pill:hover .topro-product-filter__pill-remove {
	color: var( --tpf-text );
}

/* ---- 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;
}

.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;
	}
}