/*
 * Category archives, the shop page and product search.
 *
 * Values measured off the reference: a three-up grid with 30px gutters, a
 * toolbar whose count is centred on the page, and a serif page title in
 * uppercase.
 */

/* ─── Toolbar ────────────────────────────────────────────────────────────── */

/*
 * Three columns, not a flex row with space-between: the count is centred on
 * the page, and with space-between it would drift as the two controls change
 * width (a long sort label moves it, so does hiding the filter control).
 */
.shop-toolbar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: end;
	gap: 16px;
	margin-block-end: 30px;
}

.shop-toolbar__cell--sort {
	display: flex;
	justify-content: flex-end;
}

.shop-toolbar__count {
	margin: 0;
	color: var(--color-text-muted);
	font-size: 14px;
	line-height: 1.4;
	text-align: center;
}

/*
 * The control is a <summary>, so both panels open with no JavaScript. The
 * marker is removed because the design draws its own sign and chevron.
 */
.shop-toolbar__control {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	width: 210px;
	padding-block-end: 10px;
	border-block-end: 1px solid var(--color-border);
	color: var(--color-ink);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
	cursor: pointer;
	list-style: none;
}

.shop-toolbar__control::-webkit-details-marker {
	display: none;
}

.shop-toolbar__control .icon {
	width: 16px;
	height: 16px;
	transition: transform 0.2s ease;
}

[open] > .shop-toolbar__control .icon {
	transform: rotate(180deg);
}

/* The filter sign: a plus that loses its upright when the panel is open. */
.shop-toolbar__sign {
	position: relative;
	display: block;
	flex: none;
	width: 13px;
	height: 13px;
}

.shop-toolbar__sign::before,
.shop-toolbar__sign::after {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 0;
	width: 13px;
	height: 1.5px;
	background: currentColor;
	transform: translateY(-50%);
}

.shop-toolbar__sign::after {
	transform: translateY(-50%) rotate(90deg);
	transition: opacity 0.18s ease;
}

[open] > .shop-toolbar__control .shop-toolbar__sign::after {
	opacity: 0;
}

/* ─── Filter toggle ──────────────────────────────────────────────────────── */

/* One link, two labels: "Show Filters +" collapsed, "Hide Filters —" open. */
.shop-toolbar__control--filters[aria-expanded="false"] [data-label-hide],
.shop-toolbar__control--filters[aria-expanded="true"] [data-label-show] {
	display: none;
}

.shop-toolbar__control--filters[aria-expanded="true"] .shop-toolbar__sign::after,
[open] > summary .shop-toolbar__sign::after {
	opacity: 0;
}

.shop-toolbar__control--filters {
	text-decoration: none;
}

/* ─── Results beside the filter sidebar ──────────────────────────────────── */

/*
 * The sidebar takes a fixed 210px column — the reference's width — and the
 * grid keeps its three columns in what is left, so opening the filters narrows
 * the cards rather than reflowing them into two.
 */
.shop-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 30px;
	align-items: start;
}

.shop-body.is-filtering {
	grid-template-columns: 210px minmax(0, 1fr);
}

.shop-filter {
	border-block-end: 1px solid var(--color-border);
}

.shop-filter__title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-block: 16px;
	color: var(--color-ink);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.06em;
	line-height: 1.3;
	text-transform: uppercase;
	cursor: pointer;
	list-style: none;
}

.shop-filter__title::-webkit-details-marker {
	display: none;
}

.shop-filter__list {
	margin: -4px 0 16px;
	padding: 0 0 0 25px;
	list-style: none;
}

.shop-filter__item + .shop-filter__item {
	margin-block-start: 8px;
}

.shop-filter__link {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 8px;
	color: var(--color-ink);
	font-size: 15px;
	line-height: 1.45;
	text-decoration: none;
}

.shop-filter__link:hover .shop-filter__name {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.shop-filter__count {
	color: var(--color-text-muted);
}

/* A drawn square rather than an <input>: the entry is a link, not a form field. */
.shop-filter__box {
	flex: none;
	align-self: center;
	width: 14px;
	height: 14px;
	border: 1px solid var(--account-field-border);
	background: var(--color-white);
}

.shop-filter__link.is-checked .shop-filter__box {
	border-color: var(--color-ink);
	background: var(--color-ink);
	box-shadow: inset 0 0 0 2px var(--color-white);
}

.shop-filter__link[aria-current="page"] {
	font-weight: 600;
}

.shop-filters__clear {
	display: inline-block;
	margin-block-start: 16px;
	color: var(--color-text-muted);
	font-size: 14px;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ─── Sort panel ─────────────────────────────────────────────────────────── */

.shop-sort {
	position: relative;
}

.shop-sort__list {
	position: absolute;
	inset-block-start: calc(100% + 6px);
	inset-inline-end: 0;
	z-index: 5;
	min-width: 210px;
	margin: 0;
	padding: 6px 0;
	list-style: none;
	background: var(--color-white);
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14);
}

.shop-sort__option {
	display: block;
	padding: 9px 18px;
	color: var(--color-ink);
	font-size: 14px;
	text-decoration: none;
	white-space: nowrap;
}

.shop-sort__option:hover {
	background: var(--color-surface);
}

.shop-sort__option.is-current {
	font-weight: 600;
}

/* ─── Grid ───────────────────────────────────────────────────────────────── */

/*
 * WooCommerce's loop wrapper is a <ul class="products">; the grid lives on
 * that rather than on .shop-grid so the cards are its direct children and the
 * tracks apply to them.
 *
 * Every selector here carries `.woocommerce` on purpose. WooCommerce's own
 * rules are `.woocommerce ul.products…` (0,2,1), so the obvious
 * `.shop-grid .products` (0,2,0) loses — and its clearfix `::before` is a
 * `display: table` box, which in a grid container becomes a real grid item
 * and pushed the whole first row one column to the right.
 */
.woocommerce .shop-grid .products {
	display: grid;
	grid-template-columns: repeat(var(--shop-columns), minmax(0, 1fr));
	gap: 40px var(--tile-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce .shop-grid .products::before,
.woocommerce .shop-grid .products::after {
	content: none;
	display: none;
}

/* WooCommerce's own column classes would override the grid's tracks. */
.woocommerce .shop-grid .products .product {
	width: auto;
	margin: 0;
	float: none;
	clear: none;
}

.shop-progress {
	margin: 40px 0 0;
	color: var(--color-text-muted);
	font-size: 14px;
	text-align: center;
}

/* ─── Pagination ─────────────────────────────────────────────────────────── */

.woocommerce-pagination {
	margin-block-start: 26px;
	text-align: center;
}

.woocommerce-pagination ul {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

.woocommerce-pagination li {
	border: 0;
}

.woocommerce-pagination a,
.woocommerce-pagination span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding-inline: 10px;
	background: none;
	color: var(--color-ink);
	font-size: 14px;
	text-decoration: none;
}

.woocommerce-pagination .current {
	background: var(--color-ink);
	color: var(--color-white);
}

.woocommerce-pagination a:hover {
	background: var(--color-surface);
	color: var(--color-ink);
}

/* ─── Category copy under the grid ───────────────────────────────────────── */

/*
 * Category copy at the foot of the archive, measured off the reference: a
 * 1118px centred column 50px below the grid, 16px/24px black with 0.5px
 * tracking, no rule above it.
 *
 * Collapsed, the reference flattens its headings into the running text — one
 * plain paragraph of three lines ending in "…" — and only shows them as
 * headings once "More" is pressed. The same markup does both here: while
 * clamped, headings and paragraphs are inline, so they flow into a single
 * paragraph that -webkit-line-clamp cuts at three lines with its own ellipsis.
 */
.shop-description {
	max-width: 1118px;
	margin: 50px auto 24px;
	color: var(--color-ink);
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0.5px;
	text-align: center;
}

.shop-description__body p {
	margin: 0 0 12px;
}

.shop-description__body h2,
.shop-description__body h3 {
	margin: 22px 0 8px;
	font-family: var(--font-body);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0.5px;
}

.shop-description__body a {
	color: inherit;
}

/* Collapsed to three lines until "More" — shop.js only reveals the button when
   the copy is actually taller than that. */
.shop-description[data-clamped="true"] .shop-description__body {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow-x: hidden;
	overflow-y: hidden;
}

.shop-description[data-clamped="true"] .shop-description__body * {
	display: inline;
	margin: 0;
	font: inherit;
	letter-spacing: inherit;
}

.shop-description[data-clamped="true"] .shop-description__body :is(h2, h3, p)::after {
	content: " ";
}

.shop-description__more {
	display: block;
	margin: 7px auto 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-ink);
	font-family: var(--font-body);
	font-size: 16px;
	letter-spacing: 0.5px;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

/* ─── No results ─────────────────────────────────────────────────────────── */

.woocommerce-no-products-found {
	padding-block: 30px 60px;
	text-align: center;
}

@media (max-width: 899px) {
	/* The sidebar stacks above the grid on a phone rather than squeezing it. */
	.shop-body.is-filtering {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
	}

	.shop-toolbar {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px 14px;
	}

	/* The count moves under the two controls rather than between them: at
	   phone width there is no room for three cells on one line. */
	.shop-toolbar__count {
		order: 3;
		grid-column: 1 / -1;
	}

	.shop-toolbar__control {
		width: 100%;
		font-size: 13px;
		letter-spacing: 0.06em;
	}


	.shop-grid .products {
		gap: 26px var(--tile-gap);
	}

	.shop-sort__list {
		min-width: 180px;
	}
}