/*
 * OSTADEEZ — the shop ARCHIVE (shop page and product taxonomies).
 *
 * Enqueued ONLY on `is_shop() || is_product_taxonomy()` (inc/ostadeez-assets.php). The FRONT PAGE
 * also renders product cards and is deliberately NOT included: it has its own brief, and styling
 * it from here is the shared-surface mistake this project has already paid for once.
 *
 * Target design: prd/ostadeez/wireframes/archive-v1/ («کاغذِ گرم», three columns).
 * Layout ownership: inc/ostadeez-archive.php.
 *
 * ⚠ NOTHING HERE WRITES A LITERAL COLOUR. Every value is an `--ostz-*` token.
 */

/* ---------------------------------------------------------------- the grid */

/*
 * ⚠ THREE columns, not four — owner's decision, 2026-09-20. MEASURED on the live archive: four
 * columns gave 194px cards, at which width the title wrapped to three lines and the price and the
 * button competed for one row. A card is a sales unit, not a thumbnail.
 */
.woocommerce ul.products,
.ostz ul.products {
	display: grid;
	/* ⚠ The COLUMN COUNT is a variable so the owner's theme setting can set it per shop; three is
	   the owner's decision of 2026-09-20 and stays the default. Only the desktop track is
	   settable — below 820px the layout decides, because a chosen number is wrong there. */
	grid-template-columns: repeat(var(--ostz-archive-cols, 3), minmax(0, 1fr));
	gap: var(--ostz-space-5, 18px);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 820px) {

	.woocommerce ul.products,
	.ostz ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--ostz-space-4, 14px);
	}
}

@media (max-width: 430px) {

	.woocommerce ul.products,
	.ostz ul.products {
		grid-template-columns: 1fr;
	}
}

/* WooCommerce still emits its column classes and a float; the grid owns the layout now. */
.woocommerce ul.products li.product,
.ostz ul.products li.product {
	width: auto;
	margin: 0;
	padding: 0;
	float: none;
	min-width: 0;
}

/* ---------------------------------------------------------------- the card: NOT HERE

   ⚠ Everything this sheet still held about a card — the category line, the rating, the colour
   dots, the price and the button metrics — moved to `modules/ostadeez-m-product-card.css` on
   2026-09-22 and was DELETED here. It was never «archive content»: the reason it looked that way
   is that the hooks printing it were gated to the archive, so the front page and the related
   strip simply had no category, no rating, no colours and WooCommerce's wordless «تخفیف!».
   That gate is gone with 0.47.0. This sheet keeps the GRID and the archive's own chrome.
*/

/* ---------------------------------------------------------------- applied filters */

/*
 * ⚠ RENAMED from `.ostz-chip` on 2026-09-20, the day it was written. That class ALREADY belongs
 * to the category rail above the grid — measured: nine elements answered to it, seven of them
 * somebody else's. A second component quietly wearing an existing component's name is how one
 * correct style change breaks a control on the other side of the page.
 */


.ostz-applied {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--ostz-space-2, 8px);
	min-width: 0;
	margin-block-end: var(--ostz-space-4, 16px);
}

.ostz-applied-lead {
	font-size: var(--ostz-text-xs, 12.5px);
	font-weight: var(--ostz-weight-bold, 700);
	color: var(--ostz-text-faint);
}

.ostz-afilter {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 34px;
	padding-inline: 12px;
	border-radius: 999px;
	background: var(--ostz-bg-raised-2);
	color: var(--ostz-text-dim);
	font-size: var(--ostz-text-xs, 12.5px);
	font-weight: var(--ostz-weight-bold, 700);
	min-width: 0;
}

/*
 * ⚠ 24x24 and the SECOND-level ink, not the third. The wireframe's first draft used the faint ink
 * at 18x18 and measured 4.06 — for a control whose whole job is «take this filter off», too small
 * and too quiet is how a shopper gets stuck looking at a filtered list they did not choose.
 */
.ostz-afilter-x {
	display: inline-grid;
	place-items: center;
	min-width: 24px;
	min-height: 24px;
	border-radius: 50%;
	color: var(--ostz-text-dim);
	font-size: var(--ostz-text-md, 15px);
	line-height: 1;
	text-decoration: none;
}

.ostz-afilter-x:hover {
	background: var(--ostz-bg-sunken);
	color: var(--ostz-danger);
}

.ostz-applied-clear {
	min-height: 34px;
	display: inline-flex;
	align-items: center;
	padding-inline: 12px;
	border-radius: 999px;
	border: 1px dashed var(--ostz-line-strong);
	color: var(--ostz-text-dim);
	font-size: var(--ostz-text-xs, 12.5px);
	font-weight: var(--ostz-weight-bold, 700);
	text-decoration: none;
}

.ostz-applied-clear:hover {
	border-color: var(--ostz-danger);
	color: var(--ostz-danger);
}

/*
 * ⚠ The search plugin renders its OWN active-filter pills, and on this archive they were a
 * DUPLICATE of the row above the grid — two controls, same job, same page. MEASURED: both
 * visible at 375px, the plugin's at y=88 inside the filter panel and ours at y=514 above the
 * results.
 *
 * Ours is kept and the plugin's is hidden here, for a reason that is not preference: the
 * plugin's pills live INSIDE the filter panel, which is collapsed on a phone — so exactly when
 * a shopper most needs to see what is filtering their results, they cannot. Ours sits above the
 * grid where the narrowed list is.
 *
 * ⚠ Hiding a plugin's control is only acceptable because ours performs the SAME action, per
 * value, plus a clear-all. THE PLUGIN IS NOT MODIFIED — this is our stylesheet, on our archive.
 * Its own pills also measured 1.19 contrast here (its hardcoded slate ground under our ink),
 * which is logged as a plugin debt.
 */
.ostz .dms-active-pills,
.dms-active-pills.js-dms-global-pills {
	display: none;
}

/*
 * The card's percentage sale badge — same voice as the product page's.
 *
 * ⚠ SCOPED AND SPECIFIC, not because it is prettier but because it lost. `.ostz-badge` in the
 * module bundle scores the same 0-1-0 and that bundle LOADS LATER, so the plain
 * `.ostz-badge-sale` rule was overridden and the badge rendered white-on-white — the text was
 * correct and completely invisible. MEASURED: background rgba(255,255,255,.82), colour white.
 *
 * Load order is not a thing to rely on; specificity inside our own screen is.
 */
.ostz ul.products li.product .ostz-badge.ostz-badge-sale {
	background: var(--ostz-accent-2);
	color: var(--ostz-accent-ink);
	border-color: transparent;
}

/* ---------------------------------------------------------------- nothing found */

/* The empty state moved to `modules/ostadeez-m-empty.css` on 2026-09-22 — one component, one file,
   and one RENDERER (`ostz_empty_state()`). `.ostz-empty-text` and `.ostz-empty-cta` went with the
   private markup that printed them; the shared component uses `-note` and `-actions`. Nothing
   about the empty state may be declared here again. */

/* ---------------------------------------------------------------- pagination */

/*
 * WooCommerce's own pagination already ships 40x40 targets; this only gives it the page's voice.
 */
.woocommerce nav.woocommerce-pagination ul {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--ostz-space-2, 8px);
	margin-block-start: var(--ostz-space-6, 28px);
	border: 0;
}

.woocommerce nav.woocommerce-pagination ul li {
	border: 0;
	margin: 0;
	overflow: visible;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	display: inline-grid;
	place-items: center;
	min-width: 40px;
	min-height: 40px;
	padding-inline: 10px;
	border: 1px solid var(--ostz-line-strong);
	border-radius: var(--ostz-radius, 12px);
	background: var(--ostz-bg-raised);
	color: var(--ostz-text-dim);
	font-size: var(--ostz-text-sm, 13.5px);
	font-weight: var(--ostz-weight-bold, 800);
}

.woocommerce nav.woocommerce-pagination ul li a:hover {
	border-color: var(--ostz-accent);
	color: var(--ostz-accent);
	background: var(--ostz-bg-raised);
}

.woocommerce nav.woocommerce-pagination ul li span.current {
	background: var(--ostz-accent);
	color: var(--ostz-accent-ink);
	border-color: transparent;
}