/*
 * OSTADEEZ — the filter rail.
 *
 * Desktop is a plain two-column grid, so the rail is pure CSS there and a JavaScript failure
 * cannot cost anyone their filters. Only the phone layout is off-canvas, and even there the rail
 * stays in the document — it is moved, never removed.
 */

.ostz-archive {
	display: grid;
	grid-template-columns: 268px minmax(0, 1fr);
	gap: var(--ostz-space-8);
	align-items: start;
}

.ostz-archive-main {
	min-width: 0;
}

.ostz-filters {
	position: sticky;
	top: calc(var(--ostz-header-h, 64px) + var(--ostz-space-4));
	padding: var(--ostz-space-4);
	border: 1px solid var(--ostz-line);
	border-radius: var(--ostz-radius);
	background: var(--ostz-bg-raised);
	max-height: calc(100vh - var(--ostz-header-h, 64px) - var(--ostz-space-8));
	overflow-y: auto;
}

.ostz-filters-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ostz-space-3);
	margin-block-end: var(--ostz-space-3);
	padding-block-end: var(--ostz-space-3);
	border-block-end: 1px solid var(--ostz-line);
}

.ostz-filters-title {
	margin: 0;
	font-size: 15px;
	font-weight: 800;
}

/* The close control belongs to the phone layout only. */
.ostz-filters-close {
	display: none;
	width: 32px;
	height: 32px;
	border: 1px solid var(--ostz-line);
	border-radius: 8px;
	background: transparent;
	color: var(--ostz-text-dim);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.ostz-filters-open {
	display: none;
	align-items: center;
	gap: var(--ostz-space-2);
	padding: 9px 16px;
	border: 1px solid var(--ostz-line-strong);
	border-radius: var(--ostz-radius-sm);
	background: var(--ostz-bg-raised-2);
	color: var(--ostz-text);
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}

/* ---------------------------------------------------------------- the plugin's own controls
   Scoped under our rail so nothing here escapes onto a page the plugin renders elsewhere. */

.ostz-filters .dm-search-widget,
.ostz-filters .dm-filter-block {
	margin-block-end: var(--ostz-space-4);
}

.ostz-filters h3,
.ostz-filters .dm-filter-title {
	margin: 0 0 var(--ostz-space-2);
	font-size: 13px;
	font-weight: 700;
	color: var(--ostz-text-dim);
}

.ostz-filters ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 2px;
}

.ostz-filters li label {
	display: flex;
	align-items: center;
	gap: var(--ostz-space-2);
	padding: 6px 4px;
	border-radius: 8px;
	font-size: 13px;
	line-height: 1.8;
	cursor: pointer;
}

.ostz-filters li label:hover {
	background: var(--ostz-bg-raised-2);
}

.ostz-filters input[type='text'],
.ostz-filters input[type='number'],
.ostz-filters input[type='search'],
.ostz-filters select {
	width: 100%;
	padding: 9px 12px;
	border: 1px solid var(--ostz-line);
	border-radius: 8px;
	background: var(--ostz-bg-sunken);
	color: var(--ostz-text);
	font-family: inherit;
	font-size: 13px;
}

.ostz-filters button {
	font-family: inherit;
}

.ostz-results {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--ostz-space-6);
}

.ostz-empty {
	padding: var(--ostz-space-12) var(--ostz-space-6);
	border: 1px solid var(--ostz-line);
	border-radius: var(--ostz-radius);
	background: var(--ostz-bg-raised);
	text-align: center;
}

.ostz-empty-title {
	margin: 0 0 var(--ostz-space-2);
	font-size: 18px;
	font-weight: 800;
}

.ostz-empty-note {
	margin: 0 0 var(--ostz-space-6);
	color: var(--ostz-text-dim);
}

.ostz-empty .ostz-chips {
	justify-content: center;
}

/* ---------------------------------------------------------------- narrow screens */

@media (max-width: 1000px) {
	.ostz-archive {
		grid-template-columns: 240px minmax(0, 1fr);
		gap: var(--ostz-space-6);
	}

	.ostz-results {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 820px) {

	.ostz-archive {
		display: block;
	}

	.ostz-filters-open {
		display: inline-flex;
	}

	.ostz-filters-close {
		display: block;
	}

	/*
	 * ⚠ MEASURED: the closed panel parks itself just past the inline edge, and in an RTL document
	 * that edge is the RIGHT one — where overflow IS scrollable. The rail alone gave every phone
	 * page a horizontal scrollbar again, the exact defect fixed two rounds ago in the skip link.
	 *
	 * `overflow-x: clip` is the fix rather than `hidden`: clip suppresses the overflow WITHOUT
	 * turning the body into a scroll container, so `position: sticky` elsewhere keeps working.
	 * It is scoped to the width where the off-canvas panel exists, so the desktop layout is never
	 * silently hiding a real overflow bug.
	 */
	body {
		overflow-x: clip;
	}

	/*
	 * Off-canvas, but still in the document: translated out of view rather than removed, so the
	 * panel can animate back in. `visibility` is what keeps it out of the tab order while closed.
	 */
	/*
	 * ⚠ The closed panel is NEVER parked outside the viewport. Translating it out is the usual
	 * off-canvas trick and it is wrong here twice over: in an RTL document the inline edge is the
	 * right one, where overflow is scrollable, and `overflow-x: clip` on the body does not clip a
	 * `position: fixed` descendant at all — measured, after that clip fixed one page and not the
	 * other. So the panel stays within bounds and is hidden by visibility/opacity instead. The
	 * slide is a few pixels INWARD, which cannot extend the scroll area in either direction.
	 */
	.ostz-filters {
		position: fixed;
		inset-block: 0;
		inset-inline-end: 0;
		z-index: 60;
		width: min(86vw, 340px);
		max-height: none;
		border-radius: 0;
		border-inline-end: 0;
		visibility: hidden;
		opacity: 0;
		transform: translateX(0);
		transition: opacity .2s ease, visibility .2s, transform .2s ease;
	}

	.ostz-filters.is-open {
		visibility: visible;
		opacity: 1;
		box-shadow: 0 0 60px rgba(0, 0, 0, .6);
	}

	body.ostz-filters-locked {
		overflow: hidden;
	}

	.ostz-results {
		grid-template-columns: 1fr;
	}

	/*
	 * A chip row should scroll inside itself rather than wrap, the way the header nav does — its
	 * overflow-x was computing to `visible`. Correct on its own merits.
	 *
	 * ⚠ IT DOES NOT FIX THE 19px OVERFLOW on the product archive, and this comment says so on
	 * purpose: the rule was added on that hypothesis and the page still measured 19px afterwards.
	 * The defect is real, reproducible, confined to the shop and category templates at 375px, and
	 * still UNATTRIBUTED — it is not the filter rail (search carries the same rail and measures
	 * clean) and it is not this row. Recorded in the project map as open rather than papered over
	 * with `overflow-x: hidden` on the body, which would hide it instead of finding it.
	 *
	 * ⚠ Placement debt: this belongs in the shop stylesheet with the rest of the chip styling.
	 */
	.ostz-chips {
		overflow-x: auto;
		flex-wrap: nowrap;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.ostz-chips::-webkit-scrollbar {
		display: none;
	}

	.ostz-chips > * {
		flex: 0 0 auto;
	}
}