/*
 * OSTADEEZ — phone density, and the archive overflow fix.
 *
 * Two problems that are really one: too much chrome stacked above the first product on a phone,
 * and a control row that did not fit the viewport. Both are measured numbers, not impressions:
 * the first product card started at y≈1012 on a 375×812 screen, and the toolbar pushed the page
 * 19px sideways.
 *
 * Colours are tokens only — this file adds no palette of its own.
 */

@media (max-width: 820px) {

	/*
	 * ⚠ THE 19px HORIZONTAL OVERFLOW, found by hiding each subtree in turn until it disappeared:
	 * the «فیلترها» button I added to this row. The row is a flex line that never wrapped, so the
	 * button plus the result count plus WooCommerce's ordering select were 19px wider than the
	 * viewport and pushed the whole PAGE sideways.
	 *
	 * Two earlier attributions (the filter rail, then the chip row) were both wrong; this one was
	 * isolated by elimination rather than reasoning, which is why it is the one that holds.
	 */
	.ostz-toolbar-meta {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 8px;
		min-width: 0;
	}

	.ostz-toolbar-meta > * {
		min-width: 0;
	}

	/* The select is the only elastic item here, so it is the one allowed to give. */
	.ostz-toolbar-meta .woocommerce-ordering {
		flex: 1 1 140px;
		margin: 0;
		min-width: 0;
	}

	.ostz-toolbar-meta .woocommerce-ordering select {
		width: 100%;
		max-width: 100%;
	}

	.ostz-toolbar-meta .woocommerce-result-count {
		flex: 0 1 auto;
		margin: 0;
		font-size: 12px;
	}

	/* ------------------------------------------------------------ above the fold
	   Every rule below buys vertical space back. Nothing is REMOVED from the document — a phone
	   and a crawler get the same content; it is only rendered tighter. */

	/*
	 * The announcement bar was wrapping to three lines and eating 62px of the most valuable
	 * space on the page. One line, truncated — the full text stays in the DOM and the bar is
	 * dismissible, so nothing is lost that the buyer cannot reach.
	 */
	.ostz-anb-inner {
		display: flex;
		align-items: center;
		gap: 8px;
		white-space: nowrap;
		overflow: hidden;
	}

	.ostz-anb-inner > * {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.ostz-anb {
		font-size: 12px;
	}

	/* The page head: the title stays prominent, the supporting line is capped at two lines. */
	.ostz-phead {
		margin-block-end: 10px;
	}

	.ostz-page-title {
		font-size: clamp(20px, 5.6vw, 26px);
		margin-block: 6px;
	}

	.ostz-lede {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		font-size: 13px;
		line-height: 1.7;
		margin-block: 0;
	}

	/* The breadcrumb is one line and small; it is a wayfinding aid, not a headline. */
	.ostz-crumb-list {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		white-space: nowrap;
		font-size: 11px;
		scrollbar-width: none;
	}

	.ostz-crumb-list::-webkit-scrollbar {
		display: none;
	}

	.ostz-toolbar {
		gap: 8px;
		padding-block: 8px;
	}

	.ostz-chips {
		gap: 6px;
	}

	.ostz-chip {
		padding: 6px 12px;
		font-size: 12px;
	}
}