/*
 * Structure only. Every colour, border, radius, font and spacing token belongs to the theme,
 * which styles .filters, .filters__group, .filters__option, .filters__range, .applied, .chip,
 * .count, .empty-state, .viewswitch, .catalog-toolbar and .compare-tray.
 */

/* The filter rail is a plain block on desktop and a drawer below the rail breakpoint. */
.filters__drawer {
	display: block;
}

.filters__drawer > .filters__drawer-toggle {
	display: none;
}

@media (max-width: 1023px) {
	.filters__drawer {
		position: fixed;
		inset: 0 auto 0 0;
		z-index: 60;
		width: min(22rem, 90vw);
		max-height: 100%;
		overflow-y: auto;
		transform: translateX(-100%);
		transition: transform 0.2s ease;
	}

	.filters__drawer[data-open] {
		transform: translateX(0);
	}

	.filters__drawer > .filters__drawer-toggle {
		display: inline-flex;
		position: sticky;
		top: 0;
		margin-inline-start: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.filters__drawer {
		transition: none;
	}
}

/* The main column is the second grid child of .catalog; it must be allowed to shrink. */
.catalog__main {
	min-width: 0;
}

/* Hidden options keep their place in the DOM but must not take space. */
.filters__option[hidden] {
	display: none;
}

/* A wide specification matrix scrolls inside itself instead of pushing the page. */
.compare-matrix {
	overflow-x: auto;
}

.compare-matrix table {
	width: 100%;
	border-collapse: collapse;
}

.compare-tray[hidden] {
	display: none;
}

/* While a REST update runs the old result stays readable but is marked as stale. */
[data-wewira-results][aria-busy='true'] ul.products {
	opacity: 0.6;
}