/* ============================================================
   Carmela facet drawer (R11, 2026-10-01) — archive-product.php
   Left side drawer: slides under the page header (z below it),
   stays open across AJAX facet clicks, closes via X / backdrop /
   Escape / outside click. The busy spinner overlays the content
   area while the grid swaps. Facet-internal styles (swatches,
   size chips, price slider) live in carmela-replica.css.
   ============================================================ */

.cqw-filter-backdrop {
	position: fixed; inset: 0;
	background: rgba(0, 0, 0, .35);
	z-index: 899;
}
/* Overrides the R9 absolute-dropdown block in carmela-replica.css by
   document order (same specificity, later stylesheet wins). */
.cqw-filter-panel {
	position: fixed; top: 0; bottom: 0; left: 0;
	width: 340px; max-width: 85vw; max-height: none; min-width: 0;
	background: #fff; border: 0;
	box-shadow: 2px 0 18px rgba(0, 0, 0, .12);
	z-index: 900; /* below the sticky page header (z1000) — never covers it */
	overflow-y: auto;
	padding: 18px 20px 30px;
	transform: translateX(-100%);
	transition: transform .28s ease;
}
.cqw-filter-panel.is-open { transform: none; }
.cqw-filter-close {
	position: absolute; top: 10px; right: 12px;
	width: 30px; height: 30px; border: 0; background: none;
	font-size: 22px; line-height: 1; color: #444; cursor: pointer;
}
.cqw-filter-close:hover { color: #000; }
.cqw-filter-panel .cqw-filter-title:first-of-type { margin-top: 6px; }
.cqw-filter-note { font-size: 12px; color: #999; margin: 4px 0 0; }

/* Busy state: spinner over the content area while the AJAX swap runs. */
body.cqw-facet-busy ul.products { position: relative; opacity: .5; transition: opacity .2s ease; }
body.cqw-facet-busy ul.products::after {
	content: '';
	position: absolute; inset: 0; margin: auto;
	width: 26px; height: 26px; border-radius: 50%;
	border: 2px solid #e5e5e5; border-top-color: #111;
	animation: cqwFacetSpin .7s linear infinite;
}
@keyframes cqwFacetSpin { to { transform: rotate(360deg); } }