/*
 * 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-real, 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-real, 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: var(--ostz-text-md);
	font-weight: var(--ostz-weight-bold);
	line-height: var(--ostz-leading-heading);
}

/* The scrolling part of the rail. The head above it stays put while the facets scroll, so a long
   attribute list never pushes «فیلترها» and its close control off the top of a phone drawer. */
.ostz-filters-body {
	min-block-size: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* 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: var(--ostz-text-xl);
	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: var(--ostz-text-sm);
	font-weight: var(--ostz-weight-bold);
	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: var(--ostz-text-sm);
	font-weight: var(--ostz-weight-bold);
	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: var(--ostz-text-sm);
	line-height: var(--ostz-leading-body);
	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: var(--ostz-text-sm);
}

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

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

/*
 * ⚠ EMPTY STATE moved to modules/ostadeez-m-empty.css on 2026-09-03, and this sheet is the reason
 * it had to move: it loads only on the shop archive, so the same `.ostz-empty` used by the blog
 * archive and by `index.php`'s «هنوز چیزی اینجا منتشر نشده است» had no rule at all. A state that
 * three templates share cannot be owned by the sheet of one of them.
 * Nothing about the empty state may be declared here again.
 */

/* ---------------------------------------------------------------- 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.
	 *
	 * ⚠ The placement debt this comment used to record is PAID: the chip strip's rules moved to
	 * ostadeez-shop.css on 2026-09-02, where the rest of the chip styling lives. The chips belong
	 * to the archive toolbar, not to the filter rail, and describing one component from two files
	 * is the duplication this project is removing.
	 */

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