/**
 * Coffee Trade — Shop archive & filter
 * ----------------------------------------------------------------------------
 * Scoped to `.ctc-shop-archive` (a body class added in inc/woo-presentation.php
 * on is_shop()/is_product_taxonomy(), so we never have to guess Astra's own
 * body classes).
 *
 * The brief replaces the dominant left filter column with a calm, compact filter
 * bar ABOVE the product grid (desktop) and a button-opened panel (mobile). This
 * is built on NATIVE WooCommerce filter widgets placed in the `ctc-shop-filters`
 * widget area and rendered above the loop (see inc/woo-presentation.php) — no
 * third-party filter plugin is involved.
 *
 *   BLOCK A — calm toolbar (result count + ordering).
 *   BLOCK B — the horizontal native filter bar + mobile panel.
 */

/* ===========================================================================
 * BLOCK A — Calm toolbar
 * ======================================================================== */

.ctc-shop-archive .woocommerce-result-count {
	color: var(--ctc-text-muted);
	font-size: 0.9rem;
	margin-bottom: var(--ctc-space-4);
}

.ctc-shop-archive .woocommerce-ordering select,
.ctc-shop-archive select.orderby {
	border: var(--ctc-border);
	border-radius: var(--ctc-radius);
	background-color: var(--ctc-cream);
	color: var(--ctc-text);
	padding: 0.5rem 2rem 0.5rem 0.75rem;
	font-size: 0.9rem;
}

/* ===========================================================================
 * BLOCK B — Native filter bar (above the grid) + mobile panel
 * ======================================================================== */

.ctc-filter-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--ctc-space-5) var(--ctc-space-6);
	margin-bottom: var(--ctc-space-6);
	padding: var(--ctc-space-5);
	background: var(--ctc-cream);
	border: var(--ctc-border);
	border-radius: var(--ctc-radius-lg);
}

/* Each filter widget becomes a compact column in the bar. */
.ctc-filter-bar .ctc-filter-widget,
.ctc-filter-bar .widget {
	flex: 0 1 auto;
	min-width: 170px;
	max-width: 280px;
	margin: 0;
}

.ctc-filter-bar .ctc-filter-widget__title,
.ctc-filter-bar .widget-title,
.ctc-filter-bar .widgettitle {
	margin: 0 0 var(--ctc-space-3);
	color: var(--ctc-text);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Filter lists: quiet, compact, no bullets. */
.ctc-filter-bar ul {
	margin: 0;
	padding: 0;
	list-style: none;
	max-height: 11rem;
	overflow: auto;
}

.ctc-filter-bar li {
	margin: 0;
	line-height: 1.9;
	border: 0;
}

.ctc-filter-bar a {
	color: var(--ctc-text);
	text-decoration: none;
}

.ctc-filter-bar a:hover {
	color: var(--ctc-walnut);
}

/* Layered-nav counts + chosen state. */
.ctc-filter-bar .woocommerce-widget-layered-nav-list__item--chosen a,
.ctc-filter-bar .chosen a {
	font-weight: 600;
	color: var(--ctc-walnut);
}

.ctc-filter-bar .count {
	color: var(--ctc-text-muted);
	font-size: 0.85em;
}

.ctc-filter-bar input[type="checkbox"],
.ctc-filter-bar input[type="radio"] {
	accent-color: var(--ctc-walnut);
}

/* Active-filters chips. */
.ctc-filter-bar .woocommerce-widget-layered-nav-filters {
	flex-basis: 100%;
	max-width: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: var(--ctc-space-2);
}

.ctc-filter-bar .woocommerce-widget-layered-nav-filters a {
	display: inline-flex;
	align-items: center;
	gap: var(--ctc-space-2);
	padding: 0.25rem 0.6rem;
	background: var(--ctc-stone);
	border-radius: var(--ctc-radius-pill);
	font-size: 0.85rem;
	color: var(--ctc-espresso);
}

/* Price filter slider tuned to the palette. */
.ctc-filter-bar .price_slider_wrapper {
	min-width: 220px;
}

.ctc-filter-bar .ui-slider {
	background: var(--ctc-taupe);
	border-radius: var(--ctc-radius-pill);
}

.ctc-filter-bar .ui-slider .ui-slider-range {
	background: var(--ctc-walnut);
}

.ctc-filter-bar .ui-slider .ui-slider-handle {
	background: var(--ctc-espresso);
	border-radius: 50%;
}

.ctc-filter-bar .price_slider_amount {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ctc-space-2);
	margin-top: var(--ctc-space-3);
	font-size: 0.85rem;
}

.ctc-filter-bar .price_slider_amount .button {
	padding: 0.4rem 1rem;
	font-size: 0.85rem;
}

/* --- Mobile "Filtre" toggle ---------------------------------------------- */
.ctc-filter-toggle {
	display: none; /* desktop: the bar is always visible */
	align-items: center;
	gap: var(--ctc-space-2);
	background: transparent;
	color: var(--ctc-text);
	border: var(--ctc-border);
	border-radius: var(--ctc-radius);
	padding: 0.625rem 1.25rem;
	font-weight: 600;
	cursor: pointer;
	margin-bottom: var(--ctc-space-4);
}

.ctc-filter-toggle__bars {
	width: 1rem;
	height: 0.7rem;
	background:
		linear-gradient(var(--ctc-espresso), var(--ctc-espresso)) top/100% 2px no-repeat,
		linear-gradient(var(--ctc-espresso), var(--ctc-espresso)) center/100% 2px no-repeat,
		linear-gradient(var(--ctc-espresso), var(--ctc-espresso)) bottom/100% 2px no-repeat;
}

@media (max-width: 921px) {
	.ctc-filter-toggle {
		display: inline-flex;
	}

	/* Collapse the bar behind the toggle (JS adds body.ctc-filters-open). */
	.ctc-shop-archive .ctc-filter-bar {
		display: none;
	}

	body.ctc-shop-archive.ctc-filters-open .ctc-filter-bar {
		display: flex;
		flex-direction: column;
		gap: var(--ctc-space-4);
	}

	.ctc-shop-archive.ctc-filters-open .ctc-filter-bar .ctc-filter-widget,
	.ctc-shop-archive.ctc-filters-open .ctc-filter-bar .widget {
		max-width: 100%;
		width: 100%;
	}
}