/* The browse column on a product archive */

/*
 * The shop is this column beside the results, and the split lives here
 * because the sidebar is the reason it exists. Five equal columns: the
 * browse column takes one, the results take four, and because the gap is
 * the same as the card grid's, the sidebar comes out exactly one card
 * wide (Will, 2026-08-28). Below the tablet break the column's own rules
 * turn it into rows of links, so the split collapses with it.
 *
 * The results come first in the source and the column after them (Will,
 * 2026-09-17), so on a phone the books are above the browse links. Beside
 * each other, both are placed on the first row, the column in the first
 * track.
 */
.saqi-shop {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 1.875rem;
	align-items: start;
}

.saqi-shop__results {
	grid-row: 1;
	grid-column: 2 / span 4;
}

.saqi-shop > .saqi-shop-sidebar {
	grid-row: 1;
	grid-column: 1;
}

@media (max-width: 63.9375rem) {
	.saqi-shop {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.saqi-shop__results {
		grid-column: 2 / span 3;
	}
}

@media (max-width: 47.9375rem) {
	.saqi-shop {
		grid-template-columns: minmax(0, 1fr);
		gap: 2rem;
	}

	.saqi-shop__results,
	.saqi-shop > .saqi-shop-sidebar {
		grid-row: auto;
		grid-column: auto;
	}
}

.saqi-shop-sidebar {
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
}

/*
 * Capitalised Caslon, mid-grey, regular — not the small caps the first
 * pass guessed (Will, 2026-08-28). The grey is the `light` token: the
 * palette's `mid-grey` slug is #e6e6e6, a surface grey, and #999999 is
 * this design's actual mid reading-grey (it was the redesign's
 * link-hover colour).
 */
.saqi-shop-sidebar__heading {
	margin: 0 0 0.75rem;
	font-family: var(--wp--preset--font-family--serif);
	/* The site's Caslon subhead size, as on About and the prize lists; the
	   links beneath step down to `xs` so the two levels are told apart by
	   size as well as face (Will, 2026-09-11). */
	font-size: var(--wp--preset--font-size--subhead);
	font-weight: 400;
	color: var(--wp--preset--color--light);
}

.saqi-shop-sidebar__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	font-size: var(--wp--preset--font-size--xs);
}

.saqi-shop-sidebar__list a:hover,
.saqi-shop-sidebar__list a:focus {
	color: var(--wp--preset--color--accent);
}

/*
 * The current filter is bold, in the text colour, and stays that way under
 * the pointer. It used to be an underline, which is no longer available to
 * say anything — the theme does not underline links at all now — and then
 * the accent, which said "hovered" as much as "here" (Will, 2026-09-14): the
 * weight is the state, and the accent stays the rollover.
 */
.saqi-shop-sidebar__list .current-menu-item > a,
.saqi-shop-sidebar__list .current-menu-item > a:hover,
.saqi-shop-sidebar__list .current-menu-item > a:focus {
	font-weight: 600;
	color: var(--wp--preset--color--foreground);
}

/*
 * Below the tablet break the column becomes a row of collapsible groups
 * stacked above the grid, rather than a narrow rail squeezed beside it.
 */
@media (max-width: 47.9375rem) {
	.saqi-shop-sidebar {
		gap: 1.5rem;
	}

	.saqi-shop-sidebar__list {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 0.5rem 1rem;
	}
}