/* =========================================================
   Archive pages: assets browser, brands, campaigns, collections, faces, search, taxonomy.

   Split out of single-asset.css (2026-10). Every rule here only
   ever matches markup on these pages, so it loads only there —
   see bv_style_bundles() in functions.php. Loads straight after
   single-asset.css (handle bv-pages), the position these rules
   held inside it, so the cascade is unchanged.
   ========================================================= */

.bv-browser__pagination {
	margin-top: clamp(2rem, 4vw, 3rem);
}
.bv-browser__pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	list-style: none;
	margin: 0;
	padding: 0;
	justify-content: center;
}

/* Listing variants (brands/campaigns full-width, search) */
.bv-browser__body--full {
	grid-template-columns: 1fr;
}
.bv-tile:hover .bv-tile__sheet {
	transform: scale(1.03);
}
.bv-tile__sheet--solo {
	grid-template-columns: 1fr;
}
.bv-tile__sheet--pair {
	grid-template-columns: 3fr 2fr;
	grid-template-rows: 1fr;
}
.bv-tile__sheet--quad {
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
}
@media (prefers-reduced-motion: reduce) {
	.bv-tile__sheet {
		transition: none;
	}
	.bv-tile:hover .bv-tile__sheet {
		transform: none;
	}
}

/* Last item is alone */
.bv-faces__grid > :last-child:nth-child(3n + 1) {
	grid-column: span 3;
}

/* Last 2 items are alone on the final row */
.bv-faces__grid > :nth-last-child(2):nth-child(3n + 2),
.bv-faces__grid > :last-child:nth-child(3n + 3) {
	grid-column: span 1;
}
@media (max-width: 1000px) {
	.bv-faces__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 640px) {
	.bv-faces__grid {
		grid-template-columns: 1fr;
	}
}
.bv-campintro__inner {
	max-width: 960px;
	margin-inline: auto;
}
.bv-campintro__eyebrow strong {
	color: var(--color-text);
}
.bv-field select {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	padding: 0.6rem 2rem 0.6rem 0.85rem;
	border: var(--border-subtle);
	border-radius: var(--radius-pill);
	background: var(--color-surface)
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%2371717a' stroke-width='1.5'/></svg>")
		no-repeat right 0.9rem center;
	font-size: var(--font-size-sm);
	color: var(--color-text);
	cursor: pointer;
}
.bv-field select:focus-visible {
	outline: 2px solid var(--color-focus-ring);
	outline-offset: 1px;
}
@media (max-width: 800px) {
	.bv-sortbar__inner {
		grid-template-columns: 1fr 1fr;
	}
	.bv-sortbar__label {
		grid-column: 1 / -1;
	}
}

/* ----- Browse tools -----
   Sort sits with the ground swatches, opposite the count: the row answers
   "how many, in what order, against what background" in one line. Sort is a
   plain GET form so the ordering lives in the URL and a filtered, sorted
   view can be pasted to a colleague. */
.bv-browser__tools {
	display: flex;
	align-items: end;
	gap: clamp(1rem, 2.5vw, 2rem);
	flex-wrap: wrap;
}
.bv-browser__sort {
	display: flex;
	align-items: end;
	gap: 0.5rem;
}
.bv-field--inline {
	flex-direction: row;
	align-items: center;
	gap: 0.5rem;
}
.bv-field--inline .bv-field__label {
	white-space: nowrap;
}
.bv-field--inline select {
	width: auto;
	min-width: 11rem;
}
@media (max-width: 640px) {
	.bv-browser__tools {
		width: 100%;
		justify-content: space-between;
	}
	.bv-field--inline select {
		min-width: 0;
	}
}

/* ----- One hub header, two grounds -----
   Faces sits on the dark shell; everything else on the light field. The
   modifier changes colour only — the structure (breadcrumbs, title, lede)
   is identical on all four hubs, which is the entire point of sharing it. */
.bv-browser__head--dark {
	background: transparent;
	border-bottom-color: rgba(255, 255, 255, 0.14);
}
.bv-browser__head--dark .bv-browser__title {
	color: var(--color-text-inverse);
}
.bv-browser__head--dark .bv-browser__lede {
	color: rgba(255, 255, 255, 0.7);
}
.bv-browser__head--dark .bv-breadcrumbs {
	color: rgba(255, 255, 255, 0.55);
}
.bv-browser__head--dark .bv-breadcrumbs a {
	color: rgba(255, 255, 255, 0.8);
}
.bv-browser__head--dark .bv-breadcrumbs a:hover {
	color: var(--color-text-inverse);
}
.bv-browser__head--dark .bv-breadcrumbs__sep {
	color: rgba(255, 255, 255, 0.3);
}

/* ----- Grid / list toggle ----- */
.bv-viewtoggle {
	display: inline-flex;
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-pill);
	overflow: hidden;
}
.bv-viewtoggle__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 34px;
	padding: 0 0.85rem;
	font-size: var(--font-size-xs);
	text-decoration: none;
	color: var(--color-text-muted);
	background: var(--color-surface);
	transition:
		background-color var(--transition-fast),
		color var(--transition-fast);
}
.bv-viewtoggle__btn + .bv-viewtoggle__btn {
	border-left: 1px solid var(--color-border-strong);
}
.bv-viewtoggle__btn:hover {
	background: var(--color-bg-alt);
}
.bv-viewtoggle__btn.is-current {
	background: var(--color-ink);
	color: var(--color-surface);
}

/* ----- Collapsible filter sidebar (desktop) -----
   The panel's ‹ button folds the sidebar away so the results take the full
   width; "Filters" in the result bar brings it back. Remembered per browser
   (localStorage, bv-copy.js). Below 1024px the panel is the bottom sheet and
   none of this applies. */
.bv-filter-collapse,
.bv-browser__filters-open {
	display: none;
}
@media (min-width: 1024px) {
	.bv-browser__body {
		transition:
			grid-template-columns var(--transition-med),
			column-gap var(--transition-med);
	}
	/* The panel keeps its width while its column closes, so nothing
	   rewraps mid-animation. */
	.bv-browser__filters {
		min-width: 0;
		transition: opacity 150ms ease-out 180ms, visibility 0s linear 0s;
	}
	.bv-browser__filters > .bv-filter-wrapper {
		width: 280px;
	}
	.bv-browser__body.is-filters-collapsed {
		grid-template-columns: 0 minmax(0, 1fr);
		column-gap: 0;
	}
	.is-filters-collapsed .bv-browser__filters {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity 120ms ease-out, visibility 0s linear var(--transition-med);
	}

	.bv-filter-collapse {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 28px;
		height: 28px;
		border: var(--border-subtle);
		border-radius: var(--radius-pill);
		background: var(--color-surface);
		color: var(--color-text);
		font-size: var(--font-size-md);
		line-height: 1;
		cursor: pointer;
		transition:
			background-color var(--transition-fast),
			border-color var(--transition-fast),
			color var(--transition-fast);
	}
	.bv-filter-collapse:hover,
	.bv-browser__filters-open:hover {
		background: var(--color-bg-alt);
		border-color: var(--color-border-strong);
		color: var(--color-accent-strong);
	}

	.is-filters-collapsed .bv-browser__filters-open {
		display: inline-flex;
		align-self: center;
		align-items: center;
		gap: var(--space-2);
		min-height: 36px;
		padding-inline: var(--space-4);
		border: var(--border-subtle);
		border-radius: var(--radius-pill);
		background: var(--color-surface);
		color: var(--color-text);
		box-shadow: var(--shadow-subtle);
		cursor: pointer;
		transition:
			background-color var(--transition-fast),
			border-color var(--transition-fast),
			color var(--transition-fast);
	}
	.bv-browser__filters-open-label {
		font-size: var(--font-size-xs);
		font-weight: 700;
		letter-spacing: 0.12em;
		text-transform: uppercase;
	}
	/* Count sits beside the button; the tools stay right. */
	.is-filters-collapsed .bv-browser__count {
		margin-right: auto;
	}
}
/* The freed width earns a fourth column. */
@media (min-width: 1280px) {
	.is-filters-collapsed .bv-asset-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}
@media (prefers-reduced-motion: reduce) {
	.bv-browser__body,
	.bv-browser__filters,
	.is-filters-collapsed .bv-browser__filters {
		transition: none;
	}
}

/* Search fell back to partial matches (bv_asset_search()). */
.bv-browser__note {
	margin: 0 0 var(--space-4);
	font-size: var(--font-size-sm);
	color: var(--color-text-muted);
}