/*
 * shop-archive.css - shop / product-taxonomy archive shell.
 *
 * LAYER 5. Owns the head bar, filter rail, toolbar, product grid and pagination.
 *
 * PROVENANCE
 *   desktop : screens/03-products-desktop-default.html (AR_Shop) - head bar 20px 60px 16px,
 *             body grid 262px / 1fr with 32px gap, product grid repeat(5, 1fr) gap 16px,
 *             toolbar 9px 14px on sand, pagination 36px cells with 6px gap
 *   mobile  : screens/04-products-mobile-default.html - head 12px 16px, title 22px,
 *             full-width toolbar buttons at 44px, product rows instead of a grid
 *
 * DEVIATION (owner instruction, post-TASK-052): the desktop product grid is 4 columns, not
 * the design's 5 - the approved 5-column grid crowded at common intermediate widths (the
 * auto-fill fallback below could pack a narrow, misaligned 5th track before 1440px). Every
 * other repeat(5, ...) grid in this theme (home category/brand tiles, footer, about media) is
 * unrelated and untouched.
 *
 * Mobile-first. Logical properties throughout.
 */

/* ---------------------------------------------------------------------------
 * Head bar
 * ------------------------------------------------------------------------- */

.zahra-shop-head {
	border-block-end: 1px solid var(--zahra-color-line);
	background: var(--zahra-color-surface);
}

.zahra-shop-head__inner {
	padding-block: 12px;
}

.zahra-breadcrumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 11.5px;
	color: var(--zahra-color-muted);
	margin-block-end: 6px;
}

.zahra-breadcrumb a {
	color: inherit;
	text-decoration: none;
}

.zahra-breadcrumb a:hover,
.zahra-breadcrumb a:focus-visible {
	text-decoration: underline;
}

.zahra-breadcrumb__current {
	color: var(--zahra-color-ink);
	font-weight: 600;
}

.zahra-shop-title {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
}

/* The in-catalogue search is desktop-only in the approved design. */
.zahra-shop-search {
	display: none;
}

/* ---------------------------------------------------------------------------
 * Body shell
 * ------------------------------------------------------------------------- */

.zahra-shop-body {
	display: block;
	padding-block: 0 32px;
}

.zahra-shop-main {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-inline-size: 0;
}

/* ---------------------------------------------------------------------------
 * Filter rail
 *
 * The approved mobile archive collapses filtering behind a "تصفية" control. That control has
 * no approved open state anywhere in the package, so rather than invent a drawer the rail is
 * rendered inline above the results on mobile - every filter stays reachable and nothing is
 * designed speculatively.
 * ------------------------------------------------------------------------- */

.zahra-shop-filters {
	margin-block: 12px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.zahra-shop-filters form {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/*
 * TASK-064: a real <legend> - regardless of width/border/box-shadow applied to it - is laid
 * out through the browser's own dedicated fieldset/legend positioning algorithm, which cuts a
 * gap in the fieldset's own border-block-start no matter what. Every attempt to compensate for
 * that on the legend itself (explicit border, box-shadow, a ::before on the fieldset instead)
 * worked around the symptom rather than the cause. The fix instead keeps a real <legend> for
 * assistive tech (visually hidden via .zahra-visually-hidden, inc/shop-archive.php) and renders
 * the visible title as an ordinary <div> - not subject to that algorithm - so the fieldset
 * itself can carry a completely normal, complete 4-side border.
 */
.zahra-filter {
	position: relative;
	background: var(--zahra-color-surface);
	border: 1px solid var(--zahra-color-line);
	margin: 0;
	padding: 0;
	min-inline-size: 0;
}

.zahra-filter__title {
	margin: 0;
	padding: 11px 14px;
	font-size: 12.5px;
	font-weight: 600;
	text-align: center;
	border-block-end: 1px solid var(--zahra-color-line);
}

.zahra-filter__body {
	padding: 8px 14px;
	display: flex;
	flex-direction: column;
}

.zahra-filter__row {
	display: flex;
	align-items: center;
	gap: 10px;
	min-block-size: 34px;
	font-size: 13.5px;
	cursor: pointer;
}

.zahra-filter__row input {
	inline-size: 15px;
	block-size: 15px;
	accent-color: var(--zahra-color-brand);
	flex: 0 0 auto;
}

.zahra-filter__label {
	flex: 1 1 0%;
}

.zahra-filter__count {
	font-size: 11.5px;
	color: var(--zahra-color-muted);
}

.zahra-filter__actions {
	display: flex;
	align-items: center;
	gap: 10px;
}

.zahra-filter__apply {
	min-block-size: 40px;
	padding-inline: 18px;
	background: var(--zahra-color-brand);
	color: var(--zahra-color-surface);
	font-size: 13px;
	font-weight: 600;
}

.zahra-filter__apply:hover {
	background: var(--zahra-color-brand-dark);
}

.zahra-filter__clear {
	font-size: 12.5px;
	color: var(--zahra-color-ink-2);
}

/* ---------------------------------------------------------------------------
 * Toolbar
 * ------------------------------------------------------------------------- */

.zahra-shop-toolbar {
	display: flex;
	flex-direction: column;
	gap: 10px;
	border: 1px solid var(--zahra-color-line);
	padding: 9px 14px;
	background: var(--zahra-color-sand);
}

.zahra-shop-toolbar__label {
	font-size: 13px;
	color: var(--zahra-color-ink-2);
}

.zahra-shop-toolbar__count {
	color: var(--zahra-color-muted);
}

.zahra-shop-toolbar__controls {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.zahra-shop-sort {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	color: var(--zahra-color-ink-2);
	flex: 1 1 auto;
}

.zahra-shop-sort__field {
	position: relative;
	display: flex;
	flex: 1 1 auto;
}

.zahra-shop-sort select {
	appearance: none;
	min-block-size: 40px;
	inline-size: 100%;
	border: 1px solid var(--zahra-color-field);
	background: var(--zahra-color-surface);
	padding-inline: 12px 30px;
	font-size: 13px;
}

.zahra-shop-sort__caret {
	position: absolute;
	inset-inline-end: 12px;
	inset-block-start: 16px;
	inline-size: 6px;
	block-size: 6px;
	border-inline-end: 1.5px solid var(--zahra-color-muted);
	border-block-end: 1.5px solid var(--zahra-color-muted);
	transform: rotate(45deg);
	pointer-events: none;
}

.zahra-shop-sort__apply {
	min-block-size: 40px;
	padding-inline: 14px;
	border: 1px solid var(--zahra-color-field);
	background: var(--zahra-color-surface);
	font-size: 12.5px;
	font-weight: 600;
}

.zahra-shop-view {
	display: flex;
	border: 1px solid var(--zahra-color-field);
}

.zahra-shop-view__btn {
	min-block-size: 40px;
	display: flex;
	align-items: center;
	padding-inline: 14px;
	font-size: 12.5px;
	font-weight: 600;
	background: var(--zahra-color-surface);
	color: var(--zahra-color-ink);
	text-decoration: none;
}

.zahra-shop-view__btn + .zahra-shop-view__btn {
	border-inline-start: 1px solid var(--zahra-color-field);
}

/* Active view inverts background AND text - never colour alone. */
.zahra-shop-view__btn.is-active {
	background: var(--zahra-color-ink);
	color: var(--zahra-color-surface);
}

/* ---------------------------------------------------------------------------
 * Product grid
 *
 * WooCommerce emits <ul class="products"> around the loop; the cards are the list items.
 * ------------------------------------------------------------------------- */

.woocommerce ul.products,
ul.products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/*
 * WooCommerce's own stylesheet gives ul.products a float-era clearfix
 * (::before/::after { content: ""; display: table; clear: both; }). A `display: table`
 * generated box is not blockified inside a grid container, so both pseudo-elements become
 * real anonymous grid items and silently consume the first and last grid cells - the exact
 * cause of a phantom empty slot in the first row (verified via computed styles: ::before had
 * content:" " and display:table, and the first three real .product cards occupied grid
 * columns 2-4, leaving column 1 of row 1 empty before wrapping). The clearfix serves no
 * purpose once the list is a grid, so it is removed here rather than worked around.
 */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
ul.products::before,
ul.products::after {
	content: none;
	display: none;
}

.woocommerce ul.products li.product,
ul.products li.product {
	margin: 0;
	padding: 0;
	inline-size: auto;
	float: none;
	min-inline-size: 0;
}

/*
 * List view: one column, rows separated by the card's own hairline.
 * --auto joins it below the breakpoint because the approved MOBILE archive opens as rows.
 */
.zahra-shop--list ul.products,
.zahra-shop--auto ul.products {
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
}

/* WooCommerce's default notice/ordering leftovers have no place in the approved layout. */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
	display: none;
}

/* ---------------------------------------------------------------------------
 * Pagination - SHARED COMPONENT
 *
 * The approved pagination is identical on the shop archive (screens 03/04) and the search
 * results (screens 45/46): square cells with a 6px gap, the current page inverted on ink,
 * aligned to the inline start so prev reads on the right and next on the left (99-notes §٤).
 *
 * The selectors therefore cover BOTH markup shapes - WooCommerce's `nav.woocommerce-pagination`
 * on the archive and WordPress's `nav.pagination` from the_posts_pagination() on search.
 * Generalised at TASK-011; the declarations are unchanged, so shop rendering is untouched.
 * ------------------------------------------------------------------------- */

.woocommerce nav.woocommerce-pagination,
.zahra-search nav.pagination {
	padding-block-start: 6px;
	text-align: start;
}

.woocommerce nav.woocommerce-pagination ul,
.zahra-search nav.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	border: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.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,
.zahra-search nav.pagination .nav-links > a,
.zahra-search nav.pagination .nav-links > span {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 36px;
	block-size: 36px;
	padding: 0;
	border: 1px solid var(--zahra-color-line);
	font-size: 13px;
	color: var(--zahra-color-ink);
	background: var(--zahra-color-surface);
	text-decoration: none;
}

.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a.current,
.zahra-search nav.pagination .nav-links > span.current {
	background: var(--zahra-color-ink);
	border-color: var(--zahra-color-ink);
	color: var(--zahra-color-surface);
	font-weight: 600;
}

.woocommerce nav.woocommerce-pagination ul li a:hover,
.zahra-search nav.pagination .nav-links > a:hover {
	background: var(--zahra-color-sand);
}

/* ---------------------------------------------------------------------------
 * Desktop - IMPLEMENTATION PROVISIONAL breakpoint (Q-013)
 * ------------------------------------------------------------------------- */

@media (min-width: 1024px) {

	.zahra-shop-head__inner {
		padding-block: 20px 16px;
	}

	.zahra-shop-head__row {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		gap: 40px;
	}

	.zahra-breadcrumb {
		font-size: 12.5px;
		margin-block-end: 10px;
	}

	.zahra-shop-title {
		font-size: 30px;
	}

	.zahra-shop-search {
		display: flex;
		block-size: 44px;
		inline-size: 360px;
		flex: 0 0 auto;
		border: 1.5px solid var(--zahra-color-ink);
		background: var(--zahra-color-surface);
	}

	.zahra-shop-search__icon {
		display: flex;
		align-items: center;
		padding-inline-start: 12px;
		color: var(--zahra-color-muted);
	}

	.zahra-shop-search__input {
		flex: 1 1 0%;
		min-inline-size: 0;
		border: 0;
		outline: none;
		padding-inline: 10px;
		font-size: 13.5px;
		background: transparent;
	}

	/* Two columns: 262px filter rail beside the product column. */
	.zahra-shop-body {
		display: grid;
		grid-template-columns: 262px minmax(0, 1fr);
		gap: 32px;
		padding-block: 22px 48px;
	}

	.zahra-shop-filters {
		margin-block: 0;
		gap: 16px;
	}

	.zahra-shop-toolbar {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 20px;
	}

	.zahra-shop-toolbar__controls {
		gap: 14px;
		flex-wrap: nowrap;
	}

	.zahra-shop-sort {
		flex: 0 0 auto;
	}

	.zahra-shop-sort select,
	.zahra-shop-sort__apply,
	.zahra-shop-view__btn {
		min-block-size: 36px;
	}

	.zahra-shop-sort__caret {
		inset-block-start: 14px;
	}

	/*
	 * ROBUSTNESS ONLY - no approved tablet design exists (Q-014).
	 *
	 * The 4-column grid assumes the 1440px reference: 4 columns of a 891px product column
	 * give ~206px cards. At 1024px that same column is 475px, which would produce
	 * 103px cards - too cramped. Between the provisional breakpoint and the 1440px reference
	 * width the grid therefore fits as many ~200px columns as the space allows, and snaps to
	 * exactly 4 at 1440px.
	 *
	 * The 200px minimum (not 160px) is deliberate: at the widest pre-1440px width (1439px) the
	 * product column is ~890px, wide enough to auto-fill a 5th ~165px track - reintroducing the
	 * exact "5 not 4" crowding this deviation exists to remove. 200px caps auto-fill at 4 tracks
	 * across the entire 1024-1439px range while still comfortably fitting a real product card.
	 *
	 * This preserves hierarchy and usability at intermediate widths. It is NOT a claim of
	 * visual approval for those widths.
	 */
	.woocommerce ul.products,
	ul.products {
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	}

	/* --auto returns to the desktop grid; an explicit list choice is respected. */
	.zahra-shop--auto ul.products {
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
		gap: 16px;
	}

	.zahra-shop--list ul.products {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}
}

/* ---------------------------------------------------------------------------
 * Desktop reference width - exactly 4 columns (owner instruction, post-TASK-052).
 * ------------------------------------------------------------------------- */

@media (min-width: 1440px) {

	.woocommerce ul.products,
	ul.products,
	.zahra-shop--auto ul.products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 16px;
	}

	.zahra-shop--list ul.products {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}
}